### Example Prompt for Adding a Settings Page Source: https://magicpatterns.mintlify.dev/docs/documentation/get-started/adding-pages This prompt demonstrates how to instruct Magic Patterns AI to create a new page at the `/settings` route, link it from an existing element (gear icon), and define its content, including a form with input fields for name, email, and password. ```Prompt Add a /settings route. The gear icon should take me to that page. The settings page should have a form with input boxes for name, email, and password. ``` -------------------------------- ### Example Neobrutalist Preset Prompt Source: https://magicpatterns.mintlify.dev/docs/documentation/get-started/presets This example demonstrates a detailed AI prompt preset designed to enforce a neo-brutalist visual style. It specifies layout structure, border styles, corner types, color palette (primary, secondary, guidelines), typography (font style, size, characteristics), and explicit design rules for elements to avoid and embrace, ensuring highly consistent design outputs. ```Prompt You are designing for a company called "Acme Inc," which makes rockets. You MUST ALWAYS design in a neo-brutalist style. Visual Style: - Style: Neo-brutalist - Layout: - Structure: High-contrast, rigid grid - Borders: Thick, visible, solid black or dark gray - Corners: Sharp 90-degree angles only - Effects: Flat design only; no shadows, gradients, or blurs Color Palette: - Primary Colors: - Green: #00ff00 - Aqua: #00ffff - Pink: Use prominently for emphasis (headings, calls-to-action, etc.) - Secondary Colors: - Black: #000000 - White: #ffffff - Gray: #333333 - Guidelines: Use flat, solid fills only. No gradients or soft transitions. Typography: - Font Style: Use monospace (font-mono) - Font Size: Large and dominant - Characteristics: Highly legible, blocky, and utilitarian - Text Effects: None — avoid shadows, glows, or embellishments Design Rules: Avoid: - Gradients - Shadows - Rounded corners - Subtle effects - Glossy or polished finishes Embrace: - Raw functionality - Visible layout structure - Industrial and technical visual tone - Unfinished or intentionally crude elements ``` -------------------------------- ### Example of a Specific and Contextual AI Prompt Source: https://magicpatterns.mintlify.dev/docs/documentation/get-started/prompting This example demonstrates a well-structured prompt that assigns a clear role ("product manager at a food delivery app") and specifies a precise task ("Add a new functionality that allows users to filter restaurants by dietary restrictions"). This level of detail helps the AI understand the context and deliver accurate results. ```Prompt You are a product manager at a food delivery app. Add a new functionality that allows users to filter restaurants by dietary restrictions ``` -------------------------------- ### Example Prompt for Combining Screens with References Source: https://magicpatterns.mintlify.dev/docs/documentation/projects/using-references This prompt demonstrates how to instruct the AI to combine design elements from two different references. It specifies using one reference for styling and another for layout, ensuring consistency and precise control over the generated output by explicitly stating which elements to adopt from each reference. ```Natural Language Recreate Reference 2 but use Reference 1 as theming and styling inspiration. Keep the layout of Reference 2 the exact same. Only use colors from Reference 1. ``` -------------------------------- ### Magic Patterns Chat Commands Source: https://magicpatterns.mintlify.dev/docs/documentation/editor/editing Special commands available within the chat input to control AI design generation and interaction. These commands act as default prompts for the AI, allowing users to perform specific actions or get different types of AI responses. ```Chat Command /Inspiration ``` ```Chat Command /Polish ``` ```Chat Command /Debug ``` ```Chat Command /Discuss ``` ```Chat Command /Delete Unused ``` -------------------------------- ### JavaScript application boot data configuration Source: https://join.slack.com/t/magic-patterns/shared_invite/zt-32w1n7avl-Kk4Db2jqXwQhNR_xC2ijvw This JavaScript object, `boot_data`, contains various configuration parameters used during the application's boot process. It includes API URLs, CDN edge locations, user/team IDs, version information, sign-in URLs, image proxy URLs, beacon URLs, and paths to various JavaScript libraries and notification sounds. ```JavaScript var cdn_url = "https:\/\/a.slack-edge.com"; var vvv_abs_url = "https:\/\/slack.com\/"; var inc_js_setup_data = { emoji_sheets: { apple: 'https://a.slack-edge.com/80588/img/emoji_2017_12_06/sheet_apple_64_indexed_256.png', google: 'https://a.slack-edge.com/80588/img/emoji_2017_12_06/sheet_google_64_indexed_256.png', }, }; // common boot_data var boot_data = {"api_url":"\/api\/","app":"web","user_id":null,"team_id":"T00000000","visitor_uid":"78053228fc6a09d3328507ddd66bacdb","no_login":true,"version_ts":1751945435,"version_uid":"77e57604e24fc797be558110c2e8b57143199e0e","cache_version":"v21-nomad","cache_ts_version":"v2-bunny","redir_domain":"slack-redir.net","cdn":{"edges":["https:\/\/a.slack-edge.com\/","https:\/\/b.slack-edge.com\/","https:\/\/a.slack-edge.com\/"],"avatars":"https:\/\/ca.slack-edge.com\/","downloads":"https:\/\/downloads.slack-edge.com\/","files":"https:\/\/slack-files.com\/"},"signin_url":"https:\/\/slack.com\/signin","abs_root_url":"https:\/\/slack.com\/","team_url":"","image_proxy_url":"https:\/\/slack-imgs.com\/","beacon_timing_url":"https:\/\/slack.com\/beacon\/timing","beacon_error_url":"https:\/\/slack.com\/beacon\/error","clog_url":"clog\/track\/","api_token":null,"vvv_paths":{"lz_string":"https:\/\/a.slack-edge.com\/bv1-13-br\/lz-string-1.4.4.worker.8de1b00d670ff3dc706a0.js","codemirror":"https:\/\/a.slack-edge.com\/bv1-13-br\/codemirror.min.a92e58236015d40c6f5d.min.js","codemirror_addon_simple":"https:\/\/a.slack-edge.com\/bv1-13-br\/codemirror_simple.d9067ca5fc09bf285326.min.js","codemirror_load":"https:\/\/a.slack-edge.com\/bv1-13-br\/codemirror_load.69e4c828f18ef59ce667.min.js","codemirror_files":{"javascript":"https:\/\/a.slack-edge.com\/bv1-13-br\/codemirror_lang_javascript.c82307ca2a0d2f3cd7e4.min.js"}},"notification_sounds":[{"value":"b2.mp3","label":"Ding","url":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/b2.mp3","url_ogg":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/b2.ogg"},{"value":"animal_stick.mp3","label":"Boing","url":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/animal_stick.mp3","url_ogg":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/animal_stick.ogg"},{"value":"been_tree.mp3","label":"Drop","url":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/been_tree.mp3","url_ogg":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/been_tree.ogg"},{"value":"complete_quest_requirement.mp3","label":"Ta-da","url":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/complete_quest_requirement.mp3","url_ogg":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/complete_quest_requirement.ogg"},{"value":"confirm_delivery.mp3","label":"Plink","url":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/confirm_delivery.mp3","url_ogg":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/confirm_delivery.ogg"},{"value":"flitterbug.mp3","label":"Wow","url":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/flitterbug.mp3","url_ogg":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/flitterbug.ogg"},{"value":"here_you_go_lighter.mp3","label":"Here you go","url":"https:\/\/a.slack-edge.com\/5 ``` -------------------------------- ### JavaScript Slack Beacon Initialization and Pageview Tracking Source: https://join.slack.com/t/magic-patterns/shared_invite/zt-32w1n7avl-Kk4Db2jqXwQhNR_xC2ijvw This snippet initializes a custom Slack beacon library by asynchronously loading a JavaScript file. It then sets a tracking token and immediately tracks a 'pageview' event, likely for internal analytics or monitoring within the Slack ecosystem. ```JavaScript (function(e,c,b,f,d,g,a){e.SlackBeaconObject=d; e[d]=e[d]||function(){(e[d].q=e[d].q||[]).push([1*new Date(),arguments])}; e[d].l=1*new Date();g=c.createElement(b);a=c.getElementsByTagName(b)[0]; g.async=1;g.src=f;a.parentNode.insertBefore(g,a) })(window,document,"script","https://a.slack-edge.com/bv1-13-br/slack_beacon.10d18d9f8a63b0cd84b0.min.js","sb"); window.sb('set', 'token', '3307f436963e02d4f9eb85ce5159744c'); window.sb('track', 'pageview'); ``` -------------------------------- ### Prompt for Google Analytics implementation with react-ga4 Source: https://magicpatterns.mintlify.dev/docs/documentation/integrations/user-analytics This prompt instructs an AI to implement Google Analytics using the `react-ga4` package, indicating that a Google-provided snippet should be used as a reference. ```Prompt Please help me implement Google Analytics using the react-ga4 package. Here is the snippet from Google: ``` -------------------------------- ### JavaScript Performance API Polyfill Source: https://join.slack.com/t/magic-patterns/shared_invite/zt-32w1n7avl-Kk4Db2jqXwQhNR_xC2ijvw This snippet provides a comprehensive polyfill for the `window.performance` API, ensuring core functionalities like `now`, `mark`, `measure`, `getEntriesByType`, `getEntriesByName`, `clearMarks`, and `clearMeasures` are available across different browser environments, including older ones that might lack native support. ```JavaScript window.ts_endpoint_url = "https:\/\/slack.com\/beacon\/timing";(function(e) { var n=Date.now?Date.now():+new Date,r=e.performance||{},t=[],a={},i=function(e,n){for(var r=0,a=t.length,i=[];a>r;r++)t[r][e]==n&&i.push(t[r]);return i},o=function(e,n){for(var r,a=t.length;a--;)r=t[a],r.entryType!=e||void 0!==n&&r.name!=n||t.splice(a,1)};r.now||(r.now=r.webkitNow||r.mozNow||r.msNow||function(){return(Date.now?Date.now():+new Date)-n}),r.mark||(r.mark=r.webkitMark||function(e){var n={name:e,entryType:"mark",startTime:r.now(),duration:0};t.push(n),a[e]=n}),r.measure||(r.measure=r.webkitMeasure||function(e,n,r){n=a[n].startTime,r=a[r].startTime,t.push({name:e,entryType:"measure",startTime:n,duration:r-n})}),r.getEntriesByType||(r.getEntriesByType=r.webkitGetEntriesByType||function(e){return i("entryType",e)}),r.getEntriesByName||(r.getEntriesByName=r.webkitGetEntriesByName||function(e){return i("name",e)}),r.clearMarks||(r.clearMarks=r.webkitClearMarks||function(e){o("mark",e)}),r.clearMeasures||(r.clearMeasures=r.webkitClearMeasures||function(e){o("measure",e)}),e.performance=r,"function"==typeof define&&(define.amd||define.ajs)&&define("performance",[],function(){return r}) // eslint-disable-line })(window); ``` -------------------------------- ### Magic Patterns Prompt for EmailJS Integration Source: https://magicpatterns.mintlify.dev/docs/documentation/integrations/integration-with-emailjs This prompt demonstrates how to instruct Magic Patterns to implement an email signup form using EmailJS. It includes placeholders for EmailJS Public Key, Service ID, and Template ID, and specifies that the email template expects a {{content}} parameter for the user's input. ```Magic Patterns Prompt Implement the "Try Beta" email sign up form using EmailJS to send an email. EmailJS Public Key: {{emailjs_public_key}} Service ID: {{service_id}} Template ID: {{template_id}} Inside my email template, it just takes a body with the parameter "{{content}}". Please just send me the user inputted email. ``` -------------------------------- ### JavaScript Global Object Initialization and Window Load Listener Source: https://join.slack.com/t/magic-patterns/shared_invite/zt-32w1n7avl-Kk4Db2jqXwQhNR_xC2ijvw This snippet initializes a global `TSSSB` object with a placeholder `call` method. It also adds an event listener for the window's 'load' event to manage the `window.TS` object, ensuring its state is preserved or restored after the page loads. ```JavaScript var TSSSB = { call: function() { return false; } };window.addEventListener('load', function() { var was_TS = window.TS; delete window.TS; if (was_TS) window.TS = was_TS; }); ``` -------------------------------- ### API Response: Successful Design Creation (200 OK) Source: https://magicpatterns.mintlify.dev/docs/patterns/v2-create-a-new-design Details the structure of a successful API response for design creation, including `id`, `sourceFiles`, `compiledFiles`, `editorUrl`, `previewUrl`, and `chatMessages` with their respective properties. ```APIDOC description: Successfully created a new design. schema: type: object properties: id: type: string sourceFiles: type: array items: type: object properties: id: {type: string} name: {type: string} code: {type: string} type: {type: string} compiledFiles: type: array items: type: object properties: id: {type: string} fileName: {type: string} hostedUrl: {type: string} type: {type: string} editorUrl: {type: string} previewUrl: {type: string} chatMessages: type: array description: The conversation history for this design. items: type: object properties: role: type: string description: The role of the message sender (e.g. user, assistant). example: assistant content: type: string description: The content of the message. example: I will create a login page with a centered layout. examples: example: value: id: abc123 sourceFiles: - id: name: code: type: javascript compiledFiles: - id: fileName: hostedUrl: type: javascript editorUrl: https://www.magicpatterns.com/c/abc123 previewUrl: https://abc123-preview.magicpatterns.app chatMessages: - role: assistant content: I will create a login page with a centered layout. ``` -------------------------------- ### JavaScript Custom Performance Marking and Beaconing Source: https://join.slack.com/t/magic-patterns/shared_invite/zt-32w1n7avl-Kk4Db2jqXwQhNR_xC2ijvw This set of functions provides custom utilities for marking performance points (`TSMark`), measuring durations between marks and sending them via a beacon (`TSMeasureAndBeacon`), and sending data to a specified endpoint (`TSBeacon`). It leverages the `window.performance` API and falls back to `navigator.sendBeacon` or `Image` object for data transmission, ensuring compatibility and data delivery. ```JavaScript (function () { window.TSMark = function (mark_label) { if (!window.performance || !window.performance.mark) return; performance.mark(mark_label); }; window.TSMark('start_load'); window.TSMeasureAndBeacon = function (measure_label, start_mark_label) { if (!window.performance || !window.performance.mark || !window.performance.measure) { return; } performance.mark(start_mark_label + '_end'); try { performance.measure(measure_label, start_mark_label, start_mark_label + '_end'); window.TSBeacon(measure_label, performance.getEntriesByName(measure_label)[0].duration); } catch (e) { } }; if ('sendBeacon' in navigator) { window.TSBeacon = function (label, value) { var endpoint_url = window.ts_endpoint_url || 'https://slack.com/beacon/timing'; navigator.sendBeacon( endpoint_url + '?data=' + encodeURIComponent(label + ':' + value), '', ); }; } else { window.TSBeacon = function (label, value) { var endpoint_url = window.ts_endpoint_url || 'https://slack.com/beacon/timing'; new Image().src = endpoint_url + '?data=' + encodeURIComponent(label + ':' + value); }; } })(); window.TSMark('step_load'); ``` -------------------------------- ### JavaScript function for CDN path replacement Source: https://join.slack.com/t/magic-patterns/shared_invite/zt-32w1n7avl-Kk4Db2jqXwQhNR_xC2ijvw This function, `vvv`, is a placeholder used by the build script to replace file paths with their CDN versions. It includes a warning for dynamic values and logs to `window.TS.warn` or `console.warn` if used improperly. It takes a file path string and returns it. ```JavaScript /**\n * A placeholder function that the build script uses to\n * replace file paths with their CDN versions.\n *\n * @param {String} file_path - File path\n * @returns {String} */ function vvv(file_path) { var vvv_warning = 'You cannot use vvv on dynamic values. Please make sure you only pass in static file paths.'; if (window.TS && window.TS.warn) { window.TS.warn(vvv_warning); } else { console.warn(vvv_warning); } return file_path; } ``` -------------------------------- ### MagicPatterns API: POST /v2/pattern Endpoint Source: https://magicpatterns.mintlify.dev/docs/patterns/v2-create-a-new-design Defines the API endpoint for generating new designs. It accepts parameters like mode, prompt, presetId, and optional images, and returns details about the generated design including source files, compiled files, and URLs. ```YAML paths: path: /v2/pattern method: post servers: - url: https://api.magicpatterns.com/api request: security: - title: ApiKeyAuth parameters: query: {} header: x-mp-api-key: type: apiKey cookie: {} parameters: path: {} query: {} header: {} cookie: {} body: multipart/form-data: schemaArray: - type: object properties: mode: allOf: - type: string enum: - fast - best description: >- The mode to use for the new design, either 'fast' for quicker generation or 'best' for higher quality. Defaults to 'fast'. default: fast example: fast prompt: allOf: - type: string description: The prompt for the new design. example: Create a login page presetId: allOf: - type: string description: >- If nothing is provided, then html-tailwind is used. Can be either a default combination ('html-tailwind', 'shadcn-tailwind', 'chakraUi-inline', 'mantine-inline') or a custom configuration ID. example: html-tailwind images: allOf: - type: array items: type: string format: binary description: >- Optional images to inspire or guide the design creation. Maximum file size is 5MB per image. required: true requiredProperties: - prompt examples: example: value: mode: fast prompt: Create a login page presetId: html-tailwind images: - null response: '200': application/json: schemaArray: - type: object properties: id: allOf: - type: string description: The unique ID of the created design. example: abc123 sourceFiles: allOf: - type: array description: The source files for the design. items: type: object properties: id: type: string description: Unique identifier for the source file name: type: string description: Name of the source file code: type: string description: The actual source code content type: type: string enum: - javascript - css - asset description: The type of source file compiledFiles: allOf: - type: array description: The compiled/processed files for the design. items: type: object properties: id: type: string description: Unique identifier for the compiled file fileName: type: string description: Name of the compiled file hostedUrl: type: string description: URL where the compiled file is hosted type: type: string enum: - javascript - css - font description: The type of compiled file editorUrl: allOf: - type: string description: URL to access the editor interface. example: https://www.magicpatterns.com/c/abc123 previewUrl: allOf: - type: string description: URL to preview the generated design. example: https://abc123-preview.magicpatterns.app chatMessages: allOf: - type: array ``` ```APIDOC Endpoint: POST /v2/pattern Description: Generates a new design based on provided parameters. Base URL: https://api.magicpatterns.com/api Security: - ApiKeyAuth (Header: x-mp-api-key) Request Body (multipart/form-data): Type: object Required Properties: prompt Properties: - mode (string, enum: fast, best): The mode to use for the new design. Default: fast. Example: fast. - prompt (string): The prompt for the new design. Example: Create a login page. - presetId (string): Default combination (e.g., html-tailwind) or custom config ID. Example: html-tailwind. - images (array of string, format: binary): Optional images (max 5MB each). Response (200 OK - application/json): Type: object Properties: - id (string): Unique ID of the created design. Example: abc123. - sourceFiles (array of object): The source files for the design. Properties: - id (string): Unique identifier for the source file. - name (string): Name of the source file. - code (string): The actual source code content. - type (string, enum: javascript, css, asset): The type of source file. - compiledFiles (array of object): The compiled/processed files for the design. Properties: - id (string): Unique identifier for the compiled file. - fileName (string): Name of the compiled file. - hostedUrl (string): URL where the compiled file is hosted. - type (string, enum: javascript, css, font): The type of compiled file. - editorUrl (string): URL to access the editor interface. Example: https://www.magicpatterns.com/c/abc123. - previewUrl (string): URL to preview the generated design. Example: https://abc123-preview.magicpatterns.app. - chatMessages (array): (Incomplete in source documentation) ``` -------------------------------- ### Configure A Record for Custom Domain Source: https://magicpatterns.mintlify.dev/docs/documentation/get-started/custom-domain Instructions for adding an A record to your DNS provider to point your custom domain to Magic Patterns. This record maps your domain to the Magic Patterns server IP address. Note that existing A records might need to be deleted. ```DNS Configuration TYPE | NAME | VALUE ---- | ---- | --------------- A | @ | 149.248.202.188 ``` -------------------------------- ### Configure Optional CNAME Record for Subdomain Source: https://magicpatterns.mintlify.dev/docs/documentation/get-started/custom-domain Optional instructions for adding a CNAME record, typically used for subdomains like 'www', to point to 'magicpatterns.dev'. This can be used as an alternative or supplementary method to the A record, especially for subdomains. ```DNS Configuration TYPE | NAME | VALUE ----- | ---- | ----------------- CNAME | www | magicpatterns.dev ``` -------------------------------- ### API Responses: Client and Server Errors (4xx, 5xx) Source: https://magicpatterns.mintlify.dev/docs/patterns/v2-create-a-new-design Illustrates common HTTP error responses (Bad Request, Unauthorized, Payment Required, Internal Server Error) and their consistent use of the shared `ErrorResponse` schema. ```APIDOC '400': application/json: schemaArray: - type: object properties: message: allOf: - $ref: '#/components/schemas/ErrorResponse' examples: example: value: message: Invalid API key. description: Bad request due to invalid customId or other input values. '401': application/json: schemaArray: - type: object properties: message: allOf: - $ref: '#/components/schemas/ErrorResponse' examples: example: value: message: Invalid API key. description: Unauthorized request due to missing or invalid API key. '402': application/json: schemaArray: - type: object properties: message: allOf: - $ref: '#/components/schemas/ErrorResponse' examples: example: value: message: Invalid API key. description: Payment required. '500': application/json: schemaArray: - type: object properties: message: allOf: - $ref: '#/components/schemas/ErrorResponse' examples: example: value: message: Invalid API key. description: Internal server error during pattern creation. ``` -------------------------------- ### Meta Pixel base code for website tracking Source: https://magicpatterns.mintlify.dev/docs/documentation/integrations/user-analytics This JavaScript snippet, embedded in HTML, represents the base code for Meta Pixel. It initializes the pixel and tracks page views, enabling the tracking of Facebook ad-driven visitor activity. Users must replace `{your-pixel-id-goes-here}` with their unique pixel ID. ```HTML ``` -------------------------------- ### EmailJS Template Content Placeholder Source: https://magicpatterns.mintlify.dev/docs/documentation/integrations/integration-with-emailjs This snippet shows a placeholder used within an EmailJS email template. It allows dynamic content to be inserted into the email body, replacing the {{content}} parameter with user-provided or generated text. ```EmailJS Template {{content}} ``` -------------------------------- ### Prompt to Remove Error Boundary in app.tsx Source: https://magicpatterns.mintlify.dev/docs/documentation/troubleshooting/overview This prompt can be used with the assistant to automatically remove or disable an ErrorBoundary in the `app.tsx` file, which is necessary for the 'Fix with AI' feature to function correctly by allowing unhandled exceptions to surface. ```Natural Language Do not use an error boundary at all in app.tsx. ``` -------------------------------- ### JavaScript Interception of Renderer Evaluation for Deep Link Handling Source: https://join.slack.com/t/magic-patterns/shared_invite/zt-32w1n7avl-Kk4Db2jqXwQhNR_xC2ijvw This JavaScript code intercepts the `window.rendererEvalAsync` method to process incoming data blobs. It decodes and parses the blob, checks for deep link patterns, and if found, extracts parameters using `parseDeepLinkRequest` and dispatches them via `TSSSB.handleDeepLinkWithArgs`. Otherwise, it calls the original `rendererEvalAsync` method. ```JavaScript if ('rendererEvalAsync' in window) { var origRendererEvalAsync = window.rendererEvalAsync; window.rendererEvalAsync = function(blob) { try { var data = JSON.parse(decodeURIComponent(atob(blob))); if (data.code.match(/handleDeepLink/)) { var request = parseDeepLinkRequest(data.code); if (!request.id || !request.team || !request.message) return; request.cmd = 'channel'; TSSSB.handleDeepLinkWithArgs(JSON.stringify(request)); return; } else { origRendererEvalAsync(blob); } } catch (e) { } } } ``` -------------------------------- ### JavaScript Polyfill for globalThis Source: https://www.magicpatterns.com/customers A small JavaScript polyfill designed to ensure the `globalThis` object is available in environments where it might be missing. This snippet checks for `globalThis` and defines it if necessary, enhancing compatibility for web applications. ```JavaScript !function(t){function e(){var e=this||self;e.globalThis=e,delete t.prototype._T_}"object"!=typeof globalThis&&(this?e():(t.defineProperty(t.prototype,"_T_",{configurable:!0,get:e}),_T_))}(Object); ``` -------------------------------- ### CSS for Next.js 404 Error Page Source: https://www.magicpatterns.com/customers Styling rules for the default Next.js 404 'Page Not Found' error page. This CSS defines basic typography, background and foreground colors, and includes media queries to adapt the appearance for dark mode. ```CSS body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}} ``` -------------------------------- ### JavaScript Custom Date Formatting for Logging Source: https://join.slack.com/t/magic-patterns/shared_invite/zt-32w1n7avl-Kk4Db2jqXwQhNR_xC2ijvw This function `TSMakeLogDate` is designed to create a formatted date string (YYYY/MM/DD) and an object with time components (HH:MM:SS:MS). It includes logic to pad single-digit numbers with a leading zero and milliseconds to three digits, ensuring consistent formatting for logging purposes. The provided snippet is truncated. ```JavaScript var TS_last_log_date = null; var TSMakeLogDate = function() { var date = new Date(); var y = date.getFullYear(); var mo = date.getMonth()+1; var d = date.getDate(); var time = { h: date.getHours(), mi: date.getMinutes(), s: date.getSeconds(), ms: date.getMilliseconds() }; Object.keys(time).map(function(moment, index) { if (moment == 'ms') { if (time[moment] < 10) { time[moment] = time[moment]+'00'; } else if (time[moment] < 100) { time[moment] = time[moment]+'0'; } } else if (time[moment] < 10) { time[moment] = '0' + time[moment]; } }); var str = y + '/' + mo + ``` -------------------------------- ### JavaScript Google Tag Manager Click Event Integration Source: https://join.slack.com/t/magic-patterns/shared_invite/zt-32w1n7avl-Kk4Db2jqXwQhNR_xC2ijvw This script adds event listeners to elements with `data-gtm-click` attributes. Upon a click, it extracts comma-separated GTM event names from the attribute and pushes them to the `window.dataLayer` array, facilitating custom event tracking in Google Tag Manager. ```JavaScript document.addEventListener("DOMContentLoaded", function(e) { var gtmDataLayer = window.dataLayer || []; var gtmTags = document.querySelectorAll('*[data-gtm-click]'); var gtmClickHandler = function(c) { var gtm_events = this.getAttribute('data-gtm-click'); if (!gtm_events) return; var gtm_events_arr = gtm_events.split(","); for(var e=0; e < gtm_events_arr.length; e++) { var ev = gtm_events_arr[e].trim(); gtmDataLayer.push({ 'event': ev }); } }; for(var g=0; g < gtmTags.length; g++){ var elem = gtmTags[g]; elem.addEventListener('click', gtmClickHandler); } }); ``` -------------------------------- ### API Schema: Common Error Response Source: https://magicpatterns.mintlify.dev/docs/patterns/v2-create-a-new-design Defines the standard schema for API error messages, typically used across various HTTP error codes. It includes a single `message` property. ```APIDOC #/components/schemas/ErrorResponse: type: object properties: message: type: string description: Details about the error encountered. example: Invalid API key. ``` -------------------------------- ### JavaScript Dynamic Widescreen Class Application Source: https://join.slack.com/t/magic-patterns/shared_invite/zt-32w1n7avl-Kk4Db2jqXwQhNR_xC2ijvw This JavaScript code calculates the effective viewport width and dynamically adds the 'widescreen' CSS class to the `` element if the width exceeds 1440 pixels. This is typically used for responsive design to apply specific styles for larger screens. ```JavaScript var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); if (w > 1440) document.querySelector('body').classList.add('widescreen'); ``` -------------------------------- ### Define Standard CSS Color Classes Source: https://join.slack.com/t/magic-patterns/shared_invite/zt-32w1n7avl-Kk4Db2jqXwQhNR_xC2ijvw This CSS snippet provides a set of utility classes, each named with a color-related identifier (e.g., `color_e475df`). Each class applies a specific hexadecimal color value to the `color` property, optionally excluding elements with the `nuc` class. These are typically used for text or icon coloring. ```CSS E23F99;}.color_e475df:not(.nuc) {color:#E475DF;}.color_619a4f:not(.nuc) {color:#619A4F;}.color_a72f79:not(.nuc) {color:#A72F79;}.color_7d414c:not(.nuc) {color:#7D414C;}.color_aba727:not(.nuc) {color:#ABA727;}.color_965d1b:not(.nuc) {color:#965D1B;}.color_4d5e26:not(.nuc) {color:#4D5E26;}.color_dd8527:not(.nuc) {color:#DD8527;}.color_bd9336:not(.nuc) {color:#BD9336;}.color_e85d72:not(.nuc) {color:#E85D72;}.color_dc7dbb:not(.nuc) {color:#DC7DBB;}.color_bc3663:not(.nuc) {color:#BC3663;}.color_9d8eee:not(.nuc) {color:#9D8EEE;}.color_8469bc:not(.nuc) {color:#8469BC;}.color_73769d:not(.nuc) {color:#73769D;}.color_b14cbc:not(.nuc) {color:#B14CBC;} ``` -------------------------------- ### JavaScript Iframe Security and Content Removal Source: https://join.slack.com/t/magic-patterns/shared_invite/zt-32w1n7avl-Kk4Db2jqXwQhNR_xC2ijvw This code implements security measures for iframes by checking if the current window is embedded (`self !== top`) and if the parent's host is not in a list of `safe_hosts`. If these conditions are met, it hides all content and provides a link to navigate to the top window. A timer-based function also attempts to remove specific DOM elements to prevent content display within an unauthorized iframe. ```JavaScript var safe_hosts = ['app.optimizely.com', 'tinyspeck.dev.slack.com']; if (self !== top && safe_hosts.indexOf(top.location.host) === -1) { window.document.write( '\u003Cstyle>body * {display:none !important;}\u003C/style>\u003Ca href="#" onclick=' + '"top.location.href=window.location.href" style="display:block !important;padding:10px">Go to Slack.com\u003C/a>' ); } (function() { var timer; if (self !== top && safe_hosts.indexOf(top.location.host) === -1) { timer = window.setInterval(function() { if (window) { try { var pageEl = document.getElementById('page'); var clientEl = document.getElementById('client-ui'); var sectionEls = document.querySelectorAll('nav, header, section'); pageEl.parentNode.removeChild(pageEl); clientEl.parentNode.removeChild(clientEl); for (var i = 0; i < sectionEls.length; i++) { sectionEls[i].parentNode.removeChild(sectionEls[i]); } window.TS = null; window.TD = null; window.clearInterval(timer); } catch (e) {} } }, 200); } })(); ``` -------------------------------- ### JavaScript Function to Parse Deep Link Request Parameters Source: https://join.slack.com/t/magic-patterns/shared_invite/zt-32w1n7avl-Kk4Db2jqXwQhNR_xC2ijvw This JavaScript function `parseDeepLinkRequest` extracts specific parameters (id, team, message) from a given code string using regular expressions, typically found in deep link URLs or payloads. It returns an an object containing the extracted values. ```JavaScript var parseDeepLinkRequest = function(code) { var m = code.match(/"id":"([CDG][A-Z0-9]{8,})"/); var id = m ? m[1] : null; m = code.match(/"team":"(T[A-Z0-9]{8,})"/); var team = m ? m[1] : null; m = code.match(/"message":"([0-9]+\.[0-9]+)"/); var message = m ? m[1] : null; return { id: id, team: team, message: message }; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.