### Run Next.js Development Server Source: https://github.com/jigsawstack/translation-widget/blob/main/example/translation-demo-nextjs/README.md Commands to start the development server for a Next.js application. This allows you to view the application in your browser at `http://localhost:3000` and enables hot-reloading as you edit files. ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` -------------------------------- ### Install JigsawStack Translation Widget Source: https://github.com/jigsawstack/translation-widget/blob/main/README.md Instructions for installing the `translation-widget` package using common Node.js package managers like npm, yarn, and pnpm. ```bash npm install translation-widget # or yarn add translation-widget # or pnpm add translation-widget ``` -------------------------------- ### Start Local Development Server for JigsawStack Translation Widget Source: https://github.com/jigsawstack/translation-widget/blob/main/CONTRIBUTING.md Commands to start the local development server for the JigsawStack Translation Widget using either npm or yarn, allowing you to test changes in a browser. ```bash npm run dev ``` ```bash yarn dev ``` -------------------------------- ### Complete HTML Example for JigsawStack Translation Widget Integration Source: https://github.com/jigsawstack/translation-widget/blob/main/README.md A full HTML document demonstrating the integration of the JigsawStack Translation Widget, including the required container div, the widget script, and its initialization with configuration options. ```html My Website

Welcome to my site!

``` -------------------------------- ### Install Project Dependencies for JigsawStack Translation Widget Source: https://github.com/jigsawstack/translation-widget/blob/main/CONTRIBUTING.md Commands to install the necessary project dependencies using either npm or yarn package managers, preparing the project for development. ```bash npm install ``` ```bash yarn install ``` -------------------------------- ### URL Parameter for Language Switching Source: https://github.com/jigsawstack/translation-widget/blob/main/README.md Shows how to load a page in a specific language by appending a `lang` query parameter to the site URL. For example, `?lang=fr` will automatically translate the page to French. ```URL https://yoursite.com?lang=fr ``` -------------------------------- ### Customize JigsawStack Widget Trigger Button CSS Source: https://github.com/jigsawstack/translation-widget/blob/main/README.md This example demonstrates how to change the background color and border radius of the JigsawStack Translation Widget's trigger button using a ` ``` -------------------------------- ### Initialize Translation Widget with Public Key Source: https://github.com/jigsawstack/translation-widget/blob/main/example/translation-demo-html/index.html This JavaScript snippet demonstrates how to initialize the Translation Widget on a webpage. It requires a unique public key to connect to the translation service, enabling the widget's functionality for seamless language translation. ```JavaScript TranslationWidget("YOUR_PUBLIC_KEY_HERE") ``` -------------------------------- ### Clone Git Repository for JigsawStack Translation Widget Source: https://github.com/jigsawstack/translation-widget/blob/main/CONTRIBUTING.md Instructions to clone your forked repository of the JigsawStack Translation Widget from GitHub to your local machine, followed by navigating into the project directory. ```bash git clone https://github.com/your-username/translation-widget.git cd translation-widget ``` -------------------------------- ### Translation Widget Initialization with Custom Theme Source: https://github.com/jigsawstack/translation-widget/blob/main/README.md Demonstrates how to initialize the Translation Widget with a public key and custom theme settings, including `baseColor` and `textColor`, along with other configuration options like `pageLanguage`, `position`, and `autoDetectLanguage`. ```javascript const widget = new TranslationWidget(publicKey, { pageLanguage: "en", position: "top-right", autoDetectLanguage: true, theme: { baseColor: "#2563eb", // Custom base color textColor: "#1f2937" // Custom text color } }); ``` -------------------------------- ### Configure Environment Variables for Local Development Source: https://github.com/jigsawstack/translation-widget/blob/main/CONTRIBUTING.md Instructions to create a `.env` file in the root directory and add the required `VITE_TRANSLATION_WIDGET_PUBLIC_KEY` for local development, which can be obtained from the JigsawStack Dashboard. ```plaintext # Required: Your JigsawStack Public API key VITE_TRANSLATION_WIDGET_PUBLIC_KEY=your_api_key_here ``` -------------------------------- ### Initialize Jigsawstack Translation Widget Source: https://github.com/jigsawstack/translation-widget/blob/main/index.html This JavaScript snippet demonstrates how to initialize the Jigsawstack Translation Widget. It takes a public key, typically loaded from environment variables, and configures the widget to show its user interface and set the default page language to English. ```javascript TranslationWidget(import.meta.env.VITE_TRANSLATION_WIDGET_PUBLIC_KEY, { pageLanguage: "en", showUI: true, }) ``` -------------------------------- ### Initialize JigsawStack Translation Widget with Script Tag Source: https://github.com/jigsawstack/translation-widget/blob/main/README.md Code snippet to initialize the JigsawStack Translation Widget immediately after its script tag in HTML. It takes a public key and optional configuration parameters like `pageLanguage`, `position`, `autoDetectLanguage`, `showUI`, and `theme`. ```javascript TranslationWidget("YOUR_PUBLIC_KEY_HERE", { pageLanguage: "en", // Optional position: "top-right", // Optional autoDetectLanguage: false, // Optional showUI: true, // Optional theme: { baseColor: "", // Optional textColor: "" // Optional } }); ``` -------------------------------- ### CSS Styling for Translation Widget Demo Page Source: https://github.com/jigsawstack/translation-widget/blob/main/example/translation-demo-html/index.html This CSS defines the visual styles and layout for the Translation Widget demo page. It includes global resets, typography, color variables, and responsive design for various components like the header, navigation, hero section, feature cards, and call-to-action buttons, ensuring a consistent and adaptive user interface. ```CSS :root { --primary-color: #2563eb; --primary-dark: #1d4ed8; --text-color: #1f2937; --text-light: #6b7280; --bg-color: #f9fafb; --card-bg: #ffffff; --border-radius: 12px; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text-color); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; min-height: 100vh; } .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } header { background: var(--card-bg); box-shadow: var(--shadow); padding: 1.5rem 0; position: sticky; top: 0; z-index: 100; } .header-content { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); text-decoration: none; } nav { display: flex; gap: 2rem; align-items: center; } nav a { color: var(--text-color); text-decoration: none; font-weight: 500; transition: color 0.2s; padding: 0.5rem 1rem; border-radius: 6px; } nav a:hover { color: var(--primary-color); background: rgba(37, 99, 235, 0.1); } main { padding: 4rem 0; } .hero { text-align: center; margin-top: 4rem !important; margin-bottom: 4rem; } .hero h1 { font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--text-color); } .hero p { font-size: 1.25rem; color: var(--text-light); max-width: 600px; margin: 0 auto; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 4rem; } .feature-card { background: var(--card-bg); border-radius: var(--border-radius); padding: 2rem; box-shadow: var(--shadow); transition: transform 0.2s; } .feature-card:hover { transform: translateY(-5px); } .feature-card h2 { color: var(--text-color); margin-bottom: 1rem; font-size: 1.5rem; } .feature-card p { color: var(--text-light); margin-bottom: 1.5rem; } .button { display: inline-block; background: var(--primary-color); color: white; padding: 0.75rem 1.5rem; border-radius: 6px; text-decoration: none; font-weight: 500; transition: background-color 0.2s; border: none; cursor: pointer; } .button:hover { background: var(--primary-dark); } .button-secondary { background: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); } .button-secondary:hover { background: rgba(37, 99, 235, 0.1); } .cta-section { text-align: center; margin-top: 4rem; } .cta-section h2 { font-size: 2rem; margin-bottom: 1rem; } .cta-section p { color: var(--text-light); margin-bottom: 2rem; } .button-group { display: flex; gap: 1rem; justify-content: center; } footer { background: var(--card-bg); padding: 2rem 0; margin-top: 4rem; text-align: center; color: var(--text-light); } @media (max-width: 768px) { .header-content { flex-direction: column; gap: 1rem; } nav { flex-wrap: wrap; justify-content: center; } .hero h1 { font-size: 2rem; } .features { grid-template-columns: 1fr; } } ``` -------------------------------- ### Basic Web Page CSS Styling Source: https://github.com/jigsawstack/translation-widget/blob/main/index.html Defines global styles for typography, background, colors, and layout. Includes styles for body, main content area, headings, links, unordered lists, and section containers to create a clean, modern look. ```css body { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; background: #f7f9fb; color: #222; margin: 0; padding: 0; min-height: 100vh; line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } main { max-width: 900px; margin: 2rem auto; padding: 0 1rem; } h1, h2, h3 { color: #1a237e; margin-top: 0; } a { color: #2563eb; text-decoration: none; transition: color 0.2s; } a:hover { color: #1d4ed8; text-decoration: underline; } ul { padding-left: 1.5rem; } section { background: #fff; border-radius: 10px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04); margin-bottom: 2rem; padding: 2rem; } footer { text-align: center; color: #888; font-size: 0.95rem; margin: 2rem 0 1rem 0; } ``` -------------------------------- ### Translation Widget Configuration Options Source: https://github.com/jigsawstack/translation-widget/blob/main/README.md Defines the various parameters available for configuring the Translation Widget, including page language, auto-detection, widget position, theme customization, and UI visibility. Each parameter has a type, default value, and description. ```APIDOC Parameter | Type | Default | Optional | Description -------------------- | ------- | ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------- `pageLanguage` | string | `'en'` | Yes | Language of the main page content `autoDetectLanguage` | boolean | `false` | Yes | Automatically detect and translate based on user's browser language `position` | string | `top-right` | Yes | Set the position of the widget on the screen. Supported values: `top-right`, `top-left`, `bottom-left`, `bottom-right`. `theme` | object | `{}` | Yes | Theme configuration for customizing widget appearance `theme.baseColor` | string | `white` | Yes | Base color for the widget background and accents `theme.textColor` | string | `black` | Yes | Text color for all text elements in the widget `showUI` | boolean | `true` | Yes | Toggle on/off the default widget UI ``` -------------------------------- ### Commit and Push Changes to Git Repository Source: https://github.com/jigsawstack/translation-widget/blob/main/CONTRIBUTING.md Commands to stage all modified and new files, commit them with a descriptive message, and then push the new branch to your remote fork on GitHub. ```bash git add . git commit -m "Describe your changes" git push origin feature/your-feature-name ``` -------------------------------- ### Create a New Git Branch for Feature Development Source: https://github.com/jigsawstack/translation-widget/blob/main/CONTRIBUTING.md Command to create a new, descriptive Git branch for your feature or bug fix before making any changes, ensuring your work is isolated. ```bash git checkout -b feature/your-feature-name ``` -------------------------------- ### Create React Component for Translation Widget Initialization Source: https://github.com/jigsawstack/translation-widget/blob/main/README.md A React component that initializes the JigsawStack Translation Widget using `useEffect`. It dynamically imports the widget and configures it with a public key and optional settings like UI visibility, page language, position, and auto-detection. It includes a check for `window` and `development` environment to prevent issues during server-side rendering. ```tsx "use client"; import { useEffect } from "react"; export default function Translation() { useEffect(() => { if (typeof window === "undefined" || process.env.NEXT_PUBLIC_NODE_ENV === "development") return; import("translation-widget").then(({ default: TranslationWidget }) => { console.log("translation widget loaded"); TranslationWidget("YOUR_PUBLIC_KEY_HERE", { showUI: true, pageLanguage: "en", position: "top-right", autoDetectLanguage: false }); }); }, []); return null; } ``` -------------------------------- ### CSS Media Queries for Responsive Design and Accessibility Source: https://github.com/jigsawstack/translation-widget/blob/main/STYLING.md Provides CSS media queries for implementing responsive design (mobile styles) and enhancing accessibility (high contrast, reduced motion) for the widget. ```CSS @media (max-width: 640px) Mobile styles @media (prefers-contrast: high) High contrast mode @media (prefers-reduced-motion: reduce) Reduced motion ``` -------------------------------- ### Create Translation Widget Component for Next.js App Router (Client-Side) Source: https://github.com/jigsawstack/translation-widget/blob/main/README.md This component initializes the Jigsawstack Translation Widget using a client-side directive in Next.js 13+ App Router. It dynamically loads the widget script from unpkg.com and ensures the widget is initialized once the script is loaded and the document is ready. Includes a TypeScript declaration for `window.TranslationWidget` to provide type safety. ```tsx "use client"; import { useEffect } from "react"; declare global { interface Window { TranslationWidget: ( publicKey: string, config?: { pageLanguage?: string; position?: string; autoDetectLanguage?: boolean; theme?: { baseColor: string; textColor: string; }; showUI?: boolean; } ) => void; } } export default function TranslationWidgetComponent() { useEffect(() => { const script = document.createElement("script"); script.src = "https://unpkg.com/translation-widget@latest/dist/index.min.js"; script.defer = true; const initWidget = () => { if (window.TranslationWidget) { window.TranslationWidget("YOUR_PUBLIC_KEY", { // configuration options }); } }; script.onload = () => { if (document.readyState === "complete") { initWidget(); } else { window.addEventListener("load", initWidget); } }; document.body.appendChild(script); return () => { window.removeEventListener("load", initWidget); document.body.removeChild(script); }; }, []); return null; } ``` -------------------------------- ### Add JigsawStack Translation Widget Script to HTML Source: https://github.com/jigsawstack/translation-widget/blob/main/README.md Instructions for embedding the JigsawStack Translation Widget into static HTML sites or non-React applications by placing a deferred script tag just before the closing `` tag. ```html ``` -------------------------------- ### Integrate Translation Widget in Next.js Pages Router _document.tsx Source: https://github.com/jigsawstack/translation-widget/blob/main/README.md Illustrates an alternative method to load and initialize the Jigsawstack Translation Widget by directly embedding script tags within the `_document.tsx` file for Next.js versions ≤12. This approach ensures the widget script is loaded deferentially and initialized after the window's `load` event. ```tsx import { Html, Head, Main, NextScript } from "next/document"; export default function Document() { return (