diff options
| author | Yuval Adam <_@yuv.al> | 2025-05-22 13:00:55 +0200 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-05-22 13:00:55 +0200 |
| commit | 69cc1db574e319c77d5ae049979a6b35518b26fe (patch) | |
| tree | 3ffa4cd7a8d6f09d3a97addfe2c5e20468801ed3 /src/pages/embed.astro | |
| parent | 65276a312f20cbcbab07201c5a07c547540652ed (diff) | |
Add subnet guide, layout, nav and embed
Diffstat (limited to 'src/pages/embed.astro')
| -rw-r--r-- | src/pages/embed.astro | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/src/pages/embed.astro b/src/pages/embed.astro new file mode 100644 index 0000000..3496287 --- /dev/null +++ b/src/pages/embed.astro @@ -0,0 +1,72 @@ +--- +import Cidr from "../components/Cidr"; +import { GOOGLE_ANALYTICS_ID } from "../config"; + +const title = "CIDR Calculator Widget"; +const description = "Embeddable CIDR calculator widget for network calculations"; +--- + +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <link rel="icon" type="image/x-icon" href="/ico/favicon.ico" /> + <meta name="viewport" content="width=device-width" /> + <title>{title}</title> + <meta name="description" content={description} /> + <meta name="robots" content="noindex, follow" /> + + <!-- Import global styles --> + <style is:global> + @import "../styles/global.css"; + </style> + + <!-- Embed-specific styles --> + <style> + body { + margin: 0; + padding: 0; + background: transparent; + overflow: hidden; + } + .embed-container { + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.9); + border-radius: 8px; + padding: 10px; + box-sizing: border-box; + } + </style> + + <script async src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_ID}`}></script> + <script define:vars={{ GOOGLE_ANALYTICS_ID }} is:inline> + window.dataLayer = window.dataLayer || []; + function gtag() { + dataLayer.push(arguments); + } + gtag("js", new Date()); + gtag("config", GOOGLE_ANALYTICS_ID); + </script> + </head> + <body> + <div class="embed-container"> + <Cidr client:load /> + </div> + + <script is:inline> + // Handle messages from parent window for potential configuration + window.addEventListener('message', (event) => { + // You can add functionality here to configure the widget based on messages + // from the parent window if needed in the future + }); + + // Notify parent when loaded + window.addEventListener('load', () => { + if (window.parent !== window) { + window.parent.postMessage({ type: 'cidr-widget-loaded' }, '*'); + } + }); + </script> + </body> +</html> |