### Start Node.js Proxy Server Source: https://help.linguix.com/docs/linguix-sdk/proxy-server This command executes the Node.js proxy server script. Ensure you have saved the server code to a file (e.g., 'proxy-server.js'), replaced the placeholder API key, and installed all required dependencies before running this command. ```bash node proxy-server.js ``` -------------------------------- ### Install Linguix Checker SDK via npm Source: https://help.linguix.com/docs/linguix-sdk/getting-started This snippet demonstrates how to install the Linguix Checker SDK using npm, the package manager for JavaScript, to integrate grammar and spell checking capabilities into your project. ```JavaScript npm install @linguix.com/lx-checker-sdk ``` -------------------------------- ### Initialize Linguix Checker SDK Source: https://help.linguix.com/docs/linguix-sdk/getting-started This code illustrates how to initialize the Linguix Checker SDK with your API key. It also provides an example of advanced initialization with custom configurations, including a custom API endpoint, query options, and forcing a specific language. ```JavaScript import { LinguixCheckerSDK } from '@linguix.com/lx-checker-sdk'; // Initialize with your API key LinguixCheckerSDK.initialize({ apiKey: 'your-api-key' }); // Or initialize with custom configuration LinguixCheckerSDK.initialize({ apiKey: 'your-api-key', url: 'https://your-custom-api-endpoint.com', options: { query: { clientToken: 'optional-client-token' } }, language: 'en-US' // Force specific language instead of automatic detection }); ``` -------------------------------- ### Install, Import, and Initialize Linguix Checker SDK Source: https://help.linguix.com/docs/linguix-sdk/overview-and-quick-start This snippet demonstrates how to install the Linguix Checker SDK using npm, import it into your JavaScript project, initialize it with an API key, and attach it to a textarea element or use a custom HTML tag for automatic checking. ```JavaScript // Install npm install @linguix.com/lx-checker-sdk // Import import { LinguixCheckerSDK } from '@linguix.com/lx-checker-sdk'; // Initialize LinguixCheckerSDK.initialize({ apiKey: 'your-api-key' }); // Attach to elements const textarea = document.querySelector('textarea'); LinguixCheckerSDK.attachToElement(textarea); // Or wrap elements with tags ``` -------------------------------- ### Install Node.js Proxy Server Dependencies Source: https://help.linguix.com/docs/linguix-sdk/proxy-server This command installs the necessary 'http-proxy' package, which is a core dependency for the Node.js proxy server. This step must be completed before running the server code. ```bash npm install http-proxy ``` -------------------------------- ### Attach Linguix SDK to HTML Elements using HTML Wrapper Source: https://help.linguix.com/docs/linguix-sdk/getting-started This example shows an alternative method to automatically initialize the Linguix Checker SDK on 'textarea' and 'contenteditable' elements by wrapping them with the custom '' HTML tag. ```HTML
``` -------------------------------- ### Initialize LinguixCheckerSDK for Content Scripts Source: https://help.linguix.com/docs/linguix-sdk/getting-started This example illustrates how to initialize the LinguixCheckerSDK within a content script. It shows the basic initialization with an API key and a custom content messenger, followed by attaching the SDK to a specific DOM element, such as a textarea, for spell checking. ```javascript import { LinguixCheckerSDK } from '@linguix.com/lx-checker-sdk'; import { YourContentMessenger } from './your-messenger'; // Initialize content component const messenger = new YourContentMessenger(); LinguixCheckerSDK.initialize({ apiKey: 'your-api-key' }, messenger); // Attach to elements as usual const textarea = document.querySelector('textarea'); LinguixCheckerSDK.attachToElement(textarea); ``` -------------------------------- ### Clean Up Linguix Checker SDK Instances Source: https://help.linguix.com/docs/linguix-sdk/getting-started This code demonstrates how to manage the lifecycle of the Linguix Checker SDK by detaching it from a specific element or completely destroying the SDK instance to release resources. ```JavaScript // Detach from a specific element LinguixCheckerSDK.detachFromElement(element); // Completely destroy SDK instance LinguixCheckerSDK.destroy(); ``` -------------------------------- ### Install Linguix Checker SDK in Next.js Source: https://help.linguix.com/docs/linguix-sdk/next-js-guide This snippet provides commands to install the Linguix Checker SDK using either npm or yarn, which are common package managers in the JavaScript ecosystem. This is the essential first step to set up the SDK in your Next.js project. ```Shell npm install @linguix.com/lx-checker-sdk ``` ```Shell yarn add @linguix.com/lx-checker-sdk ``` -------------------------------- ### Initialize Linguix SDK Background Component for Split Architecture Source: https://help.linguix.com/docs/linguix-sdk/getting-started This snippet illustrates how to set up the background component of the Linguix Checker SDK, which is essential for implementing split architectures in applications like browser extensions or service workers, by providing a custom messenger. ```JavaScript import { LinguixCheckerSDK } from '@linguix.com/lx-checker-sdk'; import { YourBackgroundMessenger } from './your-messenger'; // Initialize background component const messenger = new YourBackgroundMessenger(); LinguixCheckerSDK.initialize({ apiKey: 'your-api-key' }, messenger); ``` -------------------------------- ### Implement Linguix Checker SDK with Split Architecture for Browser Extensions Source: https://help.linguix.com/docs/linguix-sdk/overview-and-quick-start This example illustrates the advanced usage of the Linguix Checker SDK for browser extensions, showcasing a split architecture where UI and networking components run in separate contexts using custom messenger implementations for background and content scripts. ```JavaScript // Background script import { LinguixCheckerSDK } from '@linguix.com/lx-checker-sdk'; import { YourBackgroundMessenger } from './messenger'; const messenger = new YourBackgroundMessenger(); LinguixCheckerSDK.initialize({ apiKey: 'your-api-key' }, messenger); // Content script import { LinguixCheckerSDK } from '@linguix.com/lx-checker-sdk'; import { YourContentMessenger } from './messenger'; const messenger = new YourContentMessenger(); LinguixCheckerSDK.initialize({ apiKey: 'your-api-key' }, messenger); ``` -------------------------------- ### Implement Background Script for Browser Extension Source: https://help.linguix.com/docs/linguix-sdk/getting-started This JavaScript code defines the `ExtensionBackgroundMessenger` class to manage communication from the browser's background script to content scripts. It initializes the `LinguixCheckerSDK` with this messenger, allowing the SDK to process messages from content scripts and send responses to specific tabs. ```javascript import { LinguixCheckerSDK } from '@linguix.com/lx-checker-sdk'; class ExtensionBackgroundMessenger { constructor() { // Listen for messages from content scripts browser.runtime.onMessage.addListener((message, sender) => { if (this.messageCallback) { // Add any extension-specific properties to the message // These will be automatically preserved and passed through const augmentedMessage = { ...message, tabId: sender.tab.id }; this.messageCallback(augmentedMessage); } }); } sendToContent(message) { // Use any message properties that were preserved from the original message // The SDK will automatically pass through all properties if (message && message.tabId) { browser.tabs.sendMessage(message.tabId, message); } } onContentMessage(callback) { this.messageCallback = callback; } destroy() { this.messageCallback = null; } } // Initialize background component const messenger = new ExtensionBackgroundMessenger(); LinguixCheckerSDK.initialize({ apiKey: 'your-api-key' }, messenger); ``` -------------------------------- ### Manually Import Web Components Custom Elements Polyfill Source: https://help.linguix.com/docs/linguix-sdk/getting-started This snippet shows how to explicitly import the @webcomponents/custom-elements polyfill. This is useful in scenarios where the SDK's automatic polyfill loading might be insufficient or blocked, ensuring custom elements are properly defined before use. ```javascript import '@webcomponents/custom-elements'; ``` -------------------------------- ### Basic Linguix Checker SDK Integration with Material UI in Next.js Source: https://help.linguix.com/docs/linguix-sdk/next-js-guide This example demonstrates how to integrate the Linguix Checker SDK into a Next.js component, specifically with a Material UI TextField. It highlights the use of the 'use client' directive for client-side rendering, SDK initialization within a useEffect hook, and attaching the SDK to a DOM element using a React ref. This setup ensures the SDK functions correctly in a browser environment. ```JavaScript 'use client' import { TextField } from "@mui/material"; import { useEffect, useRef } from "react"; import { LinguixCheckerSDK } from "@linguix.com/lx-checker-sdk"; export default function Home() { const textFieldRef = useRef(null); useEffect(() => { LinguixCheckerSDK.initialize({ apiKey: 'API_KEY' }); if (textFieldRef.current) { LinguixCheckerSDK.attachToElement(textFieldRef.current); } }, []); return (

Demo: Linguix Checker with MUI

); } ``` -------------------------------- ### Initialize LinguixCheckerSDK in Service Worker Environment Source: https://help.linguix.com/docs/linguix-sdk/getting-started This snippet demonstrates how to initialize the LinguixCheckerSDK for background scripts running in a service worker. It shows two initialization methods: one using an API key and another with custom URL and query parameters for a proxy server. A custom messenger is required for communication. ```javascript import { LinguixCheckerSDK } from '@linguix.com/lx-checker-sdk/worker'; import { YourBackgroundMessenger } from './your-messenger'; // Initialize background component in service worker const messenger = new YourBackgroundMessenger(); LinguixCheckerSDK.initialize({ apiKey: 'your-api-key' }, messenger); // Or with custom configuration for proxy server LinguixCheckerSDK.initialize({ url: 'http://your-proxy-server.com:3000', options: { query: { clientToken: 'some-token' } } }, messenger); ``` -------------------------------- ### Apply Basic CSS Styles to Linguix Highlighter Source: https://help.linguix.com/docs/linguix-sdk/styling-guide This CSS example shows how to apply fundamental styling to the "linguix-highlighter" component using its custom CSS properties. It sets the underline color, thickness, background color, opacity, and z-index for a general highlight appearance. ```CSS linguix-highlighter { --lx-highlight-underline-color: #dc2626; --lx-highlight-underline-thickness: 2px; --lx-highlight-background-color: rgba(220, 38, 38, 0.15); --lx-highlight-background-opacity: 1; --lx-highlight-z-index: 100; } ``` -------------------------------- ### Implement Modern Light Theme for Linguix Alert Component Source: https://help.linguix.com/docs/linguix-sdk/styling-guide Provides CSS code to apply a modern light theme to the `linguix-alert` component. This example customizes font family, background, border, text, and title colors, along with shadow and replacement button styles, creating a clean and bright appearance. ```CSS linguix-alert { --lx-font-family: 'Roboto', sans-serif; --lx-background-color: #ffffff; --lx-border-color: #e5e7eb; --lx-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); --lx-text-color: #374151; --lx-title-color: #111827; --lx-title-font-weight: 500; --lx-replacement-background: #3b82f6; --lx-replacement-hover-background: #2563eb; } ``` -------------------------------- ### Apply Subtle CSS Styles to Linguix Highlighter Source: https://help.linguix.com/docs/linguix-sdk/styling-guide This CSS example shows how to apply a more subtle styling to the "linguix-highlighter" component. It uses a grey underline with minimal thickness and a low-opacity grey background for a less intrusive highlight. ```CSS linguix-highlighter { --lx-highlight-underline-color: #94a3b8; --lx-highlight-underline-thickness: 1px; --lx-highlight-background-color: rgba(148, 163, 184, 0.1); --lx-highlight-background-opacity: 0.5; } ``` -------------------------------- ### Apply Custom Styles to Linguix Alert Header Shadow Part Source: https://help.linguix.com/docs/linguix-sdk/styling-guide Demonstrates how to target and style the `header` Shadow Part of the `linguix-alert` component using CSS. This example adds a bottom border and adjusts padding, showcasing direct manipulation of internal component elements. ```CSS linguix-alert::part(header) { border-bottom: 1px solid var(--lx-border-color); padding-bottom: 8px; } ``` -------------------------------- ### Get Word Definitions via Linguix API with Node.js Source: https://help.linguix.com/docs/linguix-api/rest-api-calls This Node.js example shows how to make a GET request to the Linguix API's `/api/v1/define/{word}` endpoint to retrieve definitions for a specific word. It constructs the URL with the word and includes an authorization token in the headers. The example logs the 'info' from the API response or any encountered errors. ```javascript const axios = require('axios'); async function makePostRequest() { const word = 'cat'; const url = 'https://api.linguix.com/api/v1/define/' + word; const authToken = 'token'; try { const response = await axios.get(url, null, { headers: { 'Authorization': `Bearer ${authToken}` } }); console.log('Info:', response.data.info); } catch (error) { console.error('Error:', error.message); } } makePostRequest(); ``` -------------------------------- ### Linguix SDK Custom Messenger Interfaces Source: https://help.linguix.com/docs/linguix-sdk/getting-started These TypeScript interfaces define the contract for custom messenger implementations required by the Linguix SDK. They specify methods for sending messages between content and background scripts, handling incoming messages, and resource cleanup. The ILinguixMessage interface outlines the structure of messages exchanged. ```typescript interface ILinguixBackgroundMessenger { sendToContent(message: ILinguixMessage): void; onContentMessage(callback: (message: ILinguixMessage) => void): void; destroy(): void; } interface ILinguixContentMessenger { sendToBackground(message: ILinguixMessage): void; onBackgroundMessage(callback: (message: ILinguixMessage) => void): void; destroy(): void; } interface ILinguixMessage { type: string; id: string; payload?: any; } ``` -------------------------------- ### Attach Linguix SDK to HTML Elements using JavaScript Source: https://help.linguix.com/docs/linguix-sdk/getting-started This snippet demonstrates how to programmatically attach the Linguix Checker SDK to specific HTML elements, such as 'textarea' and 'contenteditable' divs, using JavaScript's 'attachToElement' method. ```JavaScript // For textarea elements const textarea = document.querySelector('textarea'); LinguixCheckerSDK.attachToElement(textarea); // For contenteditable elements const editor = document.querySelector('[contenteditable="true"]'); LinguixCheckerSDK.attachToElement(editor); ``` -------------------------------- ### Implement Minimal Code Editor Style for Linguix Alert Component Source: https://help.linguix.com/docs/linguix-sdk/styling-guide Offers comprehensive CSS for styling the `linguix-alert` component to resemble a minimal code editor interface. This example customizes various properties including background, text, title colors, font family, font size, padding, and also targets specific Shadow Parts like header, title, replacements, and dismiss button for a cohesive look. ```CSS linguix-alert { --lx-background-color: #1e1e1e; --lx-border-color: #333333; --lx-box-shadow: none; --lx-text-color: #d4d4d4; --lx-title-color: #9cdcfe; --lx-font-family: 'JetBrains Mono', 'Fira Code', monospace; --lx-font-size: 14px; --lx-title-font-size: 13px; --lx-card-padding: 12px; --lx-content-gap: 8px; --lx-replacement-background: #264f78; --lx-replacement-hover-background: #37699d; --lx-replacement-color: #d4d4d4; --lx-dismiss-button-color: #808080; --lx-dismiss-button-hover-color: #c586c0; } linguix-alert::part(header) { border-bottom: 1px solid #333333; padding-bottom: 8px; } linguix-alert::part(title) { font-family: inherit; opacity: 0.9; } linguix-alert::part(replacements) { font-family: inherit; background: #252526; padding: 8px; border-radius: 3px; } linguix-alert::part(dismiss-button) { opacity: 0.8; transition: opacity 0.2s; } linguix-alert::part(dismiss-button):hover { opacity: 1; } ``` -------------------------------- ### Implement Content Script for Browser Extension Source: https://help.linguix.com/docs/linguix-sdk/getting-started This JavaScript code defines the `ExtensionContentMessenger` class for handling communication between the browser's content script and the background script. It initializes the `LinguixCheckerSDK` and dynamically attaches it to `HTMLTextAreaElement` or `contentEditable` elements upon `focusin` events, enabling real-time text checking for user input. ```javascript import { LinguixCheckerSDK } from '@linguix.com/lx-checker-sdk'; class ExtensionContentMessenger { constructor() { // Listen for messages from background script browser.runtime.onMessage.addListener(message => { if (this.messageCallback) { this.messageCallback(message); }n }); } sendToBackground(message) { browser.runtime.sendMessage(message); } onBackgroundMessage(callback) { this.messageCallback = callback; } destroy() { this.messageCallback = null; } } // Initialize content component const messenger = new ExtensionContentMessenger(); LinguixCheckerSDK.initialize({ apiKey: 'your-api-key' }, messenger); let currentElement = null; document.addEventListener('focusin', (event) => { const element = event.target; if (element instanceof HTMLTextAreaElement || (element instanceof HTMLElement && element.isContentEditable) && currentElement !== element) { if (currentElement) { LinguixCheckerSDK.detachFromElement(currentElement); } LinguixCheckerSDK.attachToElement(element); currentElement = element; } }, true); ``` -------------------------------- ### Initialize Linguix SDK in Service Worker Environment Source: https://help.linguix.com/docs/linguix-sdk/sdk-reference This example demonstrates how to initialize the Linguix Checker SDK within a service worker. It illustrates both API key-based and custom configuration initialization, highlighting the mandatory messenger parameter that must implement ILinguixBackgroundMessenger. ```JavaScript import { LinguixCheckerSDK } from '@linguix.com/lx-checker-sdk/worker'; // A messenger implementation is required in worker environments const messenger = new YourBackgroundMessenger(); // Initialize with API key LinguixCheckerSDK.initialize({apiKey: 'your-api-key'}, messenger); // Or with custom configuration LinguixCheckerSDK.initialize({ url: 'http://your-proxy-server.com:3000', options: { query: { clientToken: 'some-token' } } }, messenger); ``` -------------------------------- ### Configure Linguix Checker SDK to Use Proxy Source: https://help.linguix.com/docs/linguix-sdk/proxy-server This JavaScript code demonstrates how to initialize the Linguix Checker SDK to route its requests through your custom proxy server. It specifies the proxy server's URL and includes a 'clientToken' in the query parameters, which the proxy server is configured to process for authentication. ```JavaScript import { LinguixCheckerSDK } from '@linguix.com/lx-checker-sdk'; // Configure the SDK to use your proxy server LinguixCheckerSDK.initializeWithConfig( { url: 'http://localhost:3000', options: { query: { clientToken: 'some-token' } } }); ``` -------------------------------- ### Linguix API POST /checker Response Body Example Source: https://help.linguix.com/docs/linguix-api/linguix-checker-rest-api An example of the JSON response returned by the /checker endpoint. It contains an 'alerts' array, where each object details a detected grammar or style issue, including its location, message, and potential replacements. ```JSON { "alerts": [ { "length": 4, "offset": 10, "message": "After the auxiliary verb ‘do’, use the base form of a verb. Did you mean “know”?", "shortMessage": "Possible grammar error", "category": "Grammar", "replacements": [ "know" ] }, ... ] } ``` -------------------------------- ### Linguix API Example Response Structure Source: https://help.linguix.com/docs/linguix-api/example-api-response-and-data This JSON object illustrates a typical response from the Linguix API, detailing grammar alerts found in the processed text and various statistical metrics about the text. It includes an array of 'alerts' with details like length, offset, message, category, and replacements, as well as a 'stats' object providing word count, character count, readability scores, and time estimates. ```json { "status": 200, "alerts": [ { "length": 6, "offset": 60, "message": "Possible grammar mistake found.", "category": "Noun Number", "replacements": [ "uploads" ] }, { "length": 3, "offset": 92, "message": "Use a comma before ‘so’ if it connects two independent clauses (unless they are closely connected and short).", "category": "Punctuation", "replacements": [ ", so" ] }, { "length": 4, "offset": 121, "message": "Possible grammar mistake found.", "category": "Noun Number", "replacements": [ "cases" ] } ], "stats": { "wordsCount": 26, "charsCount": 115, "sentencesCount": 1, "avgWordLength": 4.346153846153846, "avgSentenceLength": 26, "fleschIndex": 47.037307692307735, "readingTimeSeconds": 8, "speakingTimeSeconds": 12, "textScore": 5 } } ``` -------------------------------- ### Customize Linguix Alert Popover Basic Styling with CSS Source: https://help.linguix.com/docs/linguix-sdk/styling-guide This CSS snippet demonstrates how to apply basic styling to the `linguix-alert` component using CSS Custom Properties. It sets the background color, border color, and replacement background color for the popover. ```CSS linguix-alert { --lx-background-color: #f8f9fa; --lx-border-color: #dee2e6; --lx-replacement-background: #28a745; } ``` -------------------------------- ### Style Linguix Alert Component Shadow Parts Source: https://help.linguix.com/docs/linguix-sdk/styling-guide Lists the available Shadow Parts within the `linguix-alert` component, enabling direct styling of its internal structural elements. This allows for advanced customization beyond standard CSS properties, targeting specific sections like the header, title, or buttons. ```APIDOC Shadow Parts: card: The main container header: The header section containing title and buttons title: The title element buttons: The buttons container dismiss-button: The dismiss button dismiss-icon: The dismiss button icon replacements: The replacements container ``` -------------------------------- ### Make a Paraphrasing API Call with Node.js Source: https://help.linguix.com/docs/linguix-api/rest-api-calls This Node.js example demonstrates how to make a POST request to the Linguix API's `/api/v2/rephrase` endpoint. It sends text for paraphrasing in the request body and includes an authorization token in the headers. The example logs the 'results' from the API response or any encountered errors. ```javascript const axios = require('axios'); async function makePostRequest() { const url = 'https://api.linguix.com/api/v2/rephrase'; const data = { text: 'Let she do it!' }; const authToken = 'token'; try { const response = await axios.post(url, data, { headers: { 'Authorization': `Bearer ${authToken}` } }); console.log('Results:', response.data.results); } catch (error) { console.error('Error:', error.message); } } makePostRequest(); ``` -------------------------------- ### Manage Z-Index for Linguix Highlighter in Different Contexts Source: https://help.linguix.com/docs/linguix-sdk/styling-guide This CSS snippet illustrates how to manage the z-index of the "linguix-highlighter" component based on its parent container. It demonstrates setting different base z-index values for highlights within an editor versus an overlay, ensuring proper stacking order in complex UIs. ```CSS /* Set different z-index bases for different contexts */ .editor-content linguix-highlighter { --lx-highlight-z-index: 100; } .overlay-content linguix-highlighter { --lx-highlight-z-index: 1000; } ``` -------------------------------- ### Apply Terminal Theme to Linguix Alert Component Source: https://help.linguix.com/docs/linguix-sdk/styling-guide This CSS snippet defines a 'Terminal Theme' for the `linguix-alert` web component. It uses CSS custom properties to set colors, fonts, spacing, and button styles, creating a dark, code-editor-like appearance. It also customizes the header, title, dismiss button, and replacements section using `::part` selectors for a consistent terminal aesthetic. ```CSS linguix-alert { /* Base styles */ --lx-background-color: #002b36; --lx-border-color: #073642; --lx-box-shadow: 0 0 0 1px #073642, 0 0 20px rgba(0, 43, 54, 0.5); --lx-border-radius: 6px; --lx-text-color: #839496; /* Typography */ --lx-font-family: 'Source Code Pro', 'Fira Mono', monospace; --lx-font-size: 14px; --lx-line-height: 1.5; --lx-title-color: #93a1a1; --lx-title-font-size: 14px; --lx-title-font-weight: normal; /* Spacing */ --lx-card-padding: 8px; --lx-content-gap: 6px; /* Replacement button */ --lx-replacement-background: #2aa198; --lx-replacement-hover-background: #268bd2; --lx-replacement-color: #002b36; --lx-replacement-hover-color: #002b36; --lx-replacement-font-family: inherit; --lx-replacement-font-size: inherit; --lx-replacement-border-radius: 0; --lx-replacement-padding: 6px 10px; /* Dismiss button */ --lx-dismiss-button-color: #586e75; --lx-dismiss-button-hover-color: #dc322f; } /* Terminal-like header with prompt */ linguix-alert::part(header) { display: flex; align-items: center; padding-bottom: 6px; border-bottom: 1px solid #073642; } linguix-alert::part(title) { display: flex; align-items: center; } linguix-alert::part(title)::before { content: '$ '; color: #859900; margin-right: 6px; } /* Command-like styling for dismiss button */ linguix-alert::part(dismiss-button) { position: relative; padding: 4px; opacity: 0.7; transition: opacity 0.2s ease; } linguix-alert::part(dismiss-button):hover { opacity: 1; } /* Code block styling for replacements */ linguix-alert::part(replacements) { background: #073642; margin: 0 -16px 0px; padding: 16px; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; position: relative; } ``` -------------------------------- ### Linguix Alert Popover Colors and Background CSS Custom Properties Source: https://help.linguix.com/docs/linguix-sdk/styling-guide Defines the CSS Custom Properties available for customizing the colors and background of the Linguix Alert Popover component. These properties control the background and border colors. ```APIDOC --lx-background-color: white (Background color of the popover) --lx-border-color: #EAECF0 (Border color of the popover) ``` -------------------------------- ### CSS for Info Highlights in Linguix Highlighter Source: https://help.linguix.com/docs/linguix-sdk/styling-guide This snippet provides CSS custom properties to style the "linguix-highlighter" for informational highlights. It uses a blue underline with a slightly thinner thickness and a semi-transparent blue background to indicate informational content. ```CSS linguix-highlighter { --lx-highlight-underline-color: #0ea5e9; --lx-highlight-underline-thickness: 1.5px; --lx-highlight-background-color: rgba(14, 165, 233, 0.08); --lx-highlight-background-opacity: 0.9; } ``` -------------------------------- ### Create Node.js Proxy Server for Linguix API Source: https://help.linguix.com/docs/linguix-sdk/proxy-server This Node.js server acts as a proxy for the Linguix API, handling both HTTP requests and WebSocket upgrades. It authenticates client requests using a 'clientToken' query parameter, removes it, and then appends a server-side 'apiKey' before forwarding the request to the actual Linguix API. The code includes robust error handling and URL rewriting logic. ```JavaScript const http = require('http'); const httpProxy = require('http-proxy'); const { URL } = require('url'); const PORT = 3000; const TARGET = 'https://api.linguix.com'; // Linguix API server URL const API_KEY = 'your-api-key'; // Replace with your actual API key // Create a proxy server with WebSocket support const proxy = httpProxy.createProxyServer({ target: TARGET, ws: true, changeOrigin: true }); // Global error handler for proxy events (HTTP requests) proxy.on('error', (err, req, res) => { console.error('Proxy error:', err); if (res && !res.headersSent) { res.writeHead(500, { 'Content-Type': 'text/plain' }); } if (res) { res.end('Something went wrong.'); } }); // This function authenticates the request and rewrites the URL query string. // It expects a "token" parameter for authenticating the user. On success, it removes // any client-provided token/apiKey and appends your server's API key. function authenticateAndModify(req, res) { try { // Construct a URL object using a dummy base (since req.url is relative) const urlObj = new URL(req.url, 'http://dummy'); // Extract the token from query parameters const token = urlObj.searchParams.get('clientToken'); console.log('Authentication attempt with token:', token); // Simple authentication check: token must be non-empty. // You can expand this to check against a database or other auth service. if (!token || token.trim() === '' || token === 'undefined') { if (res) { res.writeHead(401, { 'Content-Type': 'text/plain' }); res.end('Authentication failed: Invalid or missing token'); } return false; } // At this point, authentication succeeded. // Remove any client-provided token or apiKey and insert your API key. urlObj.searchParams.delete('clientToken'); urlObj.searchParams.delete('apiKey'); urlObj.searchParams.append('apiKey', API_KEY); // Rewrite the request URL with the updated query string. req.url = urlObj.pathname + urlObj.search; console.log('Modified URL:', req.url); return true; } catch (err) { console.error('Error during authentication:', err); if (res) { res.writeHead(500, { 'Content-Type': 'text/plain' }); res.end('Internal server error'); } return false; } } // Create an HTTP server that handles both HTTP requests and WebSocket upgrades. const server = http.createServer((req, res) => { // For standard HTTP requests, authenticate and modify the URL. if (!authenticateAndModify(req, res)) { return; } // Forward the HTTP request to the target server. proxy.web(req, res); }); // Handle WebSocket upgrade requests. server.on('upgrade', (req, socket, head) => { // For upgrade requests, run authentication. if (!authenticateAndModify(req)) { // If authentication fails, close the socket. socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n'); socket.destroy(); return; } socket.on('error', (err) => { console.error('Socket error:', err); }); // Forward the WebSocket connection. proxy.ws(req, socket, head); }); server.listen(PORT, () => { console.log(`Proxy server with authentication is running on port ${PORT}`); }); ``` -------------------------------- ### Implement Dark Theme for Linguix Alert Component Source: https://help.linguix.com/docs/linguix-sdk/styling-guide Presents CSS code for applying a dark theme to the `linguix-alert` component. This configuration adjusts background, border, text, and title colors to dark shades, along with shadow, replacement button, and dismiss button styles, suitable for dark mode interfaces. ```CSS linguix-alert { --lx-background-color: #1f2937; --lx-border-color: #374151; --lx-text-color: #e5e7eb; --lx-title-color: #f3f4f6; --lx-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3); --lx-replacement-background: #3b82f6; --lx-replacement-hover-background: #2563eb; --lx-dismiss-button-color: #9ca3af; --lx-dismiss-button-hover-color: #f87171; } ``` -------------------------------- ### Customize Linguix Alert Component CSS Properties Source: https://help.linguix.com/docs/linguix-sdk/styling-guide Defines the CSS custom properties available for styling various aspects of the `linguix-alert` component, including colors, fonts, sizes, and spacing for titles, replacement buttons, and dismiss buttons. These properties allow for granular control over the component's appearance. ```APIDOC CSS Custom Properties: --lx-title-color: #667085 (Title text color) --lx-title-font-size: 14px (Title font size) --lx-title-font-weight: 400 (Title font weight) --lx-replacement-background: #4E2CE7 (Button background color) --lx-replacement-hover-background: #311A96 (Button background color on hover) --lx-replacement-color: white (Button text color) --lx-replacement-hover-color: white (Button text color on hover) --lx-replacement-padding: 11px 13px (Button padding) --lx-replacement-font-size: var(--lx-font-size) (Button font size) --lx-replacement-font-weight: 400 (Button font weight) --lx-replacement-border-radius: var(--lx-border-radius) (Button border radius) --lx-replacement-border-width: 0 (Button border width) --lx-replacement-border-style: none (Button border style) --lx-replacement-border-color: transparent (Button border color) --lx-replacement-hover-border-color: transparent (Button border color on hover) --lx-dismiss-button-size: 18px (Size of the dismiss button) --lx-dismiss-button-color: #98A2B3 (Color of the dismiss icon) --lx-dismiss-button-hover-color: #E84337 (Color of the dismiss icon on hover) --lx-dismiss-button-z-index: 1 (Z-index of the dismiss button) ``` -------------------------------- ### CSS for Warning Highlights in Linguix Highlighter Source: https://help.linguix.com/docs/linguix-sdk/styling-guide This snippet demonstrates how to style the "linguix-highlighter" for warning indications using CSS custom properties. It applies a yellow underline and a semi-transparent yellow background, along with adjusted opacity, to signify warnings. ```CSS linguix-highlighter { --lx-highlight-underline-color: #eab308; --lx-highlight-underline-thickness: 2px; --lx-highlight-background-color: rgba(234, 179, 8, 0.1); --lx-highlight-background-opacity: 0.8; } ``` -------------------------------- ### Linguix API POST /checker Request Body Example Source: https://help.linguix.com/docs/linguix-api/linguix-checker-rest-api This JSON object represents the required payload for submitting text to the /checker endpoint. The 'text' field should contain the string to be analyzed for grammar and style issues. ```JSON {"text": "I did not knew how to did this."} ``` -------------------------------- ### Linguix Alert Popover Spacing CSS Custom Properties Source: https://help.linguix.com/docs/linguix-sdk/styling-guide Defines the CSS Custom Properties available for customizing the spacing within the Linguix Alert Popover component. These properties control internal padding and gap between elements. ```APIDOC --lx-card-padding: 16px (Internal padding of the card) --lx-content-gap: 12px (Gap between elements) ``` -------------------------------- ### CSS for Error Highlights in Linguix Highlighter Source: https://help.linguix.com/docs/linguix-sdk/styling-guide This snippet provides CSS custom properties to style the "linguix-highlighter" for error indications. It uses a red underline and a semi-transparent red background to visually represent errors. ```CSS linguix-highlighter { --lx-highlight-underline-color: #dc2626; --lx-highlight-underline-thickness: 2px; --lx-highlight-background-color: rgba(220, 38, 38, 0.15); --lx-highlight-background-opacity: 1; } ``` -------------------------------- ### Linguix Alert Popover Borders and Shadows CSS Custom Properties Source: https://help.linguix.com/docs/linguix-sdk/styling-guide Defines the CSS Custom Properties available for customizing the borders and shadows of the Linguix Alert Popover component. These properties control border radius, width, style, and box shadow. ```APIDOC --lx-border-radius: 8px (Border radius for the popover) --lx-border-width: 1px (Border width) --lx-border-style: solid (Border style) --lx-box-shadow: 0px 8px 48px -12px rgba(68, 75, 90, 0.24) (Box shadow) ``` -------------------------------- ### Linguix Alert Popover Typography CSS Custom Properties Source: https://help.linguix.com/docs/linguix-sdk/styling-guide Defines the CSS Custom Properties available for customizing the typography of the Linguix Alert Popover component. These properties control font family, size, weight, line height, and text color. ```APIDOC --lx-font-family: Inter, sans-serif (Main font family for the component) --lx-font-size: 16px (Base font size) --lx-font-weight: 400 (Base font weight) --lx-line-height: 120% (Base line height) --lx-text-color: #77838D (Base text color) ``` -------------------------------- ### Radical Transformation Styling for Linguix Alert Component Source: https://help.linguix.com/docs/linguix-sdk/styling-guide This snippet showcases a comprehensive customization of the `linguix-alert` web component using CSS custom properties and shadow parts. It defines unique typography, color schemes, border styles, and spacing, along with specific styling for the title, replacement buttons, and dismiss button, creating a visually striking and distinct alert box. It also includes hover effects for interactive elements. ```CSS /* This example showcases all available customization options */ linguix-alert { /* Typography */ --lx-font-family: 'Playfair Display', serif; --lx-font-size: 18px; --lx-font-weight: 400; --lx-line-height: 1.6; --lx-text-color: #2c1810; /* Colors and Layout */ --lx-background-color: #fdf1e7; --lx-border-color: #8b4513; --lx-border-radius: 0; --lx-border-width: 2px; --lx-border-style: double; --lx-box-shadow: 12px 12px 0 #8b4513; /* Spacing */ --lx-card-padding: 32px; --lx-content-gap: 24px; /* Title */ --lx-title-color: #5c1f0c; --lx-title-font-size: 24px; --lx-title-font-weight: 700; /* Replacement Button */ --lx-replacement-background: #8b4513; --lx-replacement-hover-background: #5c1f0c; --lx-replacement-color: #fdf1e7; --lx-replacement-hover-color: #ffffff; --lx-replacement-font-family: inherit; --lx-replacement-font-size: inherit; --lx-replacement-border-radius: 0; --lx-replacement-border-width: 2px; --lx-replacement-border-style: solid; --lx-replacement-border-color: #8b4513; --lx-replacement-hover-border-color: #5c1f0c; /* Dismiss Button */ --lx-dismiss-button-size: 24px; --lx-dismiss-button-color: #8b4513; --lx-dismiss-button-hover-color: #5c1f0c; } /* Shadow Parts Styling */ linguix-alert::part(card) { transform: rotate(-1deg); transition: transform 0.3s ease; } linguix-alert::part(card):hover { transform: rotate(0deg); } linguix-alert::part(header) { border-bottom: 2px solid #8b4513; padding-bottom: 16px; margin-bottom: 16px; } linguix-alert::part(title) { font-style: italic; letter-spacing: 0.05em; text-transform: uppercase; } linguix-alert::part(buttons) { background: #fbeadb; padding: 8px; border: 1px solid #8b4513; } linguix-alert::part(dismiss-button) { border: 2px solid currentColor; border-radius: 50%; padding: 4px; transition: all 0.3s ease; } linguix-alert::part(dismiss-button):hover { transform: rotate(90deg); } linguix-alert::part(replacements) { background: #fbeadb; padding: 24px; border: 1px solid #8b4513; position: relative; } linguix-alert::part(replacements)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #8b4513; transform: translate(4px, 4px); pointer-events: none; } ``` -------------------------------- ### Minimalist Float Style for Linguix Alert Component Source: https://help.linguix.com/docs/linguix-sdk/styling-guide This snippet provides a minimalist and floating aesthetic for the `linguix-alert` web component. It customizes the background, border, and shadow for a subtle, modern look. The title is hidden, and the action buttons are absolutely positioned in the top-right corner, offering a clean and unobtrusive user experience with hover effects for the dismiss button. ```CSS linguix-alert { --lx-background-color: #ffffff; --lx-border-color: #e5e7eb; --lx-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --lx-border-radius: 6px; --lx-text-color: #374151; --lx-font-family: system-ui, -apple-system, sans-serif; --lx-font-size: 14px; --lx-card-padding: 6px; --lx-content-gap: 0px; /* Hide title */ --lx-title-font-size: 0; --lx-title-color: transparent; /* Replacement button */ --lx-replacement-background: #4f46e5; --lx-replacement-hover-background: #4338ca; --lx-replacement-color: white; --lx-replacement-hover-color: #ffffff; --lx-replacement-font-family: inherit; --lx-replacement-font-size: inherit; --lx-replacement-border-radius: 6px; /* Dismiss button */ --lx-dismiss-button-color: #9ca3af; --lx-dismiss-button-hover-color: #6b7280; } linguix-alert::part(header) { height: 0; } /* Position buttons absolutely */ linguix-alert::part(buttons) { position: absolute; top: 6px; right: 6px; z-index: 10; } /* Add hover effect to buttons */ linguix-alert::part(dismiss-button) { padding: 4px; border-radius: 4px; transition: background-color 0.2s; } linguix-alert::part(dismiss-button):hover { background-color: #f3f4f6; } ```