coherent-docs-theme 1.0.6 → 1.0.7

package/internal-components/TopicSwitcher.astro

@@ -0,0 +1,207 @@
+---
+import getThemeConfig from "../internal/themeConfig";
+import nativeIcon from "../assets/icons/native.png";
+import unrealIcon from "../assets/icons/unreal.png";
+import unityIcon from "../assets/icons/unity.png";
+
+const product = import.meta.env.DOCS_PRODUCT || "gameface";
+const { topicsConfig, version, currentTopicId } = getThemeConfig();
+
+const topics = {
+  native: {
+    label: "Custom Engine",
+    href: `https://docs.coherent-labs.com/cpp-${product}`,
+    icon: nativeIcon,
+    ...(topicsConfig?.native || {}),
+  },
+  unreal: {
+    label: "Unreal Engine",
+    href: `https://docs.coherent-labs.com/unreal-${product}`,
+    icon: unrealIcon,
+    ...(topicsConfig?.unreal || {}),
+  },
+  unity: {
+    label: "Unity 3D",
+    href: `https://docs.coherent-labs.com/unity-${product}`,
+    icon: unityIcon,
+    ...(topicsConfig?.unity || {}),
+  },
+};
+
+const topicsArray = Object.entries(topics).map(([id, data]) => ({
+  id,
+  ...data,
+}));
+
+const isCurrent = (id: string) => id === currentTopicId;
+const hasContent = topicsArray.length > 0 || version;
+---
+
+{
+  hasContent && (
+    <>
+      {version && (
+        <div class="version-badge">
+          <span>Version:</span>
+          <span class="sl-badge tip small">{version}</span>
+        </div>
+      )}
+      <div class="topics-wrapper">
+        <ul class="starlight-sidebar-topics">
+          {topicsArray.map((topic) => {
+            const iconUrl =
+              typeof topic.icon === "object" ? topic.icon.src : topic.icon;
+
+            const isImage =
+              iconUrl &&
+              (iconUrl.startsWith("/") ||
+                iconUrl.startsWith("http") ||
+                iconUrl.startsWith("data:"));
+
+            return (
+              <li>
+                <a
+                  href={topic.href}
+                  class:list={{
+                    "starlight-sidebar-topics-current": isCurrent(topic.id),
+                  }}
+                >
+                  <div class="starlight-sidebar-topics-icon">
+                    {isImage ? (
+                      <div
+                        class="icon-mask"
+                        style={`--icon-url: url('${iconUrl}')`}
+                        role="img"
+                        aria-label={topic.label}
+                      />
+                    ) : (
+                      <span class="text-icon">{topic.icon}</span>
+                    )}
+                  </div>
+                  <div class="label-wrapper">{topic.label}</div>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+        <div class="sidebar-divider" />
+      </div>
+    </>
+  )
+}
+<style>
+  .starlight-sidebar-topics {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li + li {
+    margin-top: 0.25rem;
+  }
+
+  a {
+    align-items: center;
+    color: var(--sl-color-gray-2);
+    display: flex;
+    font-size: 0.85rem;
+    font-weight: 700;
+    gap: 0.6rem;
+    text-decoration: none;
+    border-radius: 0.25rem;
+    transition:
+      background-color 0.2s ease,
+      color 0.2s ease;
+  }
+
+  a:hover,
+  a:focus-visible {
+    color: var(--sl-color-white);
+    background-color: var(--sl-color-gray-5);
+  }
+
+  a.starlight-sidebar-topics-current {
+    color: var(--gameface-cyan);
+    background-color: var(--sl-color-gray-5);
+  }
+
+  .starlight-sidebar-topics-icon {
+    align-items: center;
+    border-radius: 0.25rem;
+    display: flex;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    flex-shrink: 0;
+    transition:
+      color 0.2s ease,
+      background-color 0.2s ease,
+      border-color 0.2s ease;
+  }
+
+  .icon-mask {
+    width: 100%;
+    height: 100%;
+
+    -webkit-mask-image: var(--icon-url);
+    mask-image: var(--icon-url);
+
+    -webkit-mask-size: contain;
+    mask-size: cover;
+
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+
+    -webkit-mask-position: center;
+    mask-position: center;
+
+    background-color: var(--sl-color-gray-2);
+    transition: background-color 0.2s ease;
+  }
+
+  a:hover .icon-mask,
+  a:focus-visible .icon-mask {
+    background-color: var(--sl-color-white);
+  }
+
+  a.starlight-sidebar-topics-current .icon-mask {
+    background-color: var(--gameface-cyan);
+  }
+
+  :global([data-theme="light"]) a.starlight-sidebar-topics-current {
+    color: var(--sl-color-accent-high);
+  }
+  :global([data-theme="light"]) a.starlight-sidebar-topics-current .icon-mask {
+    background-color: var(--sl-color-accent-high);
+  }
+
+  .text-icon {
+    font-size: 0.65rem;
+    font-weight: 800;
+  }
+
+  .version-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.2rem 0.5rem;
+    background-color: var(--sl-color-gray-6);
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.3rem;
+    color: var(--sl-color-gray-2);
+    font-size: 0.85rem;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  .sidebar-divider {
+    margin-top: 1rem;
+    height: 1px;
+    border-top: 1px solid var(--sl-color-gray-5);
+  }
+
+  .label-wrapper {
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+</style>

package/overrides/Footer.astro

@@ -1,6 +1,8 @@
 ---
 import type { Props } from "@astrojs/starlight/props";
 import DefaultFooter from "@astrojs/starlight/components/Footer.astro";
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+import getThemeConfig from "../internal/themeConfig";
 
 const currentYear = new Date().getFullYear();
 
@@ -10,6 +12,7 @@ const { pagination, editUrl, lastUpdated } = (Astro.locals as any)
 const hasPagination = !!(pagination?.prev || pagination?.next);
 const hasMeta = !!(editUrl || lastUpdated);
 const hasAnyFooterContent = hasPagination || hasMeta;
+const { tagManagerId } = getThemeConfig();
 ---
 
 <footer
@@ -33,9 +36,10 @@ const hasAnyFooterContent = hasPagination || hasMeta;
         <strong>Coherent Labs</strong>. All rights reserved.
     </p>
     <div class="links">
-        <a href="https://coherent-labs.com/privacy-policy" rel="noopener" target="_blank"
-            >Privacy Policy</a
-        >
+        <a
+            href="https://coherent-labs.com/privacy-policy"
+            rel="noopener"
+            target="_blank">Privacy Policy</a>
     </div>
 </div>
 
@@ -101,3 +105,129 @@ const hasAnyFooterContent = hasPagination || hasMeta;
         color: var(--sl-color-accent);
     }
 </style>
+
+<script>
+    import { run } from "vanilla-cookieconsent";
+
+    const config = {
+        hideFromBots: true,
+        // See https://github.com/orestbida/cookieconsent#how-to-enablemanage-revisions
+        // Left for future reference if we change the consent.
+        // revision: 0,
+        cookie: {
+            name: "cc_cookie",
+            domain: location.hostname,
+            expiresAfterDays: 365,
+        },
+        categories: {
+            necessary: {
+                readOnly: true,
+            },
+            analytics: {
+                autoClear: {
+                    cookies: [
+                        {
+                            name: /^_ga/, // regex: match all cookies starting with '_ga'
+                        },
+                        {
+                            name: "_gid", // string: exact cookie name
+                        },
+                    ],
+                },
+            },
+        },
+        language: {
+            default: "en",
+            translations: {
+                en: {
+                    consentModal: {
+                        title: "We use cookies!",
+                        description:
+                            'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <a data-cc="show-preferencesModal" class="cc-link">Let me choose</a>',
+                        acceptAllBtn: "Accept all",
+                        acceptNecessaryBtn: "Reject all",
+                        showPreferencesBtn: "Manage Individual preferences",
+                    },
+                    preferencesModal: {
+                        title: "Cookie preferences",
+                        acceptAllBtn: "Accept all",
+                        acceptNecessaryBtn: "Reject all",
+                        savePreferencesBtn: "Save settings",
+                        closeIconLabel: "Close",
+                        serviceCounterLabel: "Service|Services",
+                        sections: [
+                            {
+                                title: "Cookie usage 📢",
+                                description: `Cookies are used to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="/privacy-policy" class="cc-link" target="_blank">privacy policy</a>.`,
+                            },
+                            {
+                                title: "Strictly necessary cookies",
+                                description:
+                                    "These cookies are essential for the proper functioning of my website. Without these cookies, the website may not work properly.",
+                                linkedCategory: "necessary",
+                            },
+                            {
+                                title: "Performance and Analytics cookies",
+                                description:
+                                    "These cookies allow the website to remember the choices you have made in the past.",
+                                linkedCategory: "analytics",
+                                cookieTable: {
+                                    caption: "Cookie table",
+                                    headers: {
+                                        name: "Cookie",
+                                        domain: "Domain",
+                                        desc: "Description",
+                                        duration: "Duration",
+                                    },
+                                    body: [
+                                        {
+                                            name: "_ga",
+                                            domain: "google.com",
+                                            desc: "This cookie is a Google Analytics persistent cookie.",
+                                            duration: "2 years",
+                                        },
+                                        {
+                                            name: "_gid",
+                                            domain: "google.com",
+                                            desc: "This cookie is a Google Analytics persistent cookie.",
+                                            duration: "1 day",
+                                        },
+                                    ],
+                                },
+                            },
+                        ],
+                    },
+                },
+            },
+        },
+    };
+
+    run(config);
+</script>
+
+<!-- Google tag (gtag.js) -->
+{tagManagerId && (
+    <>
+        <script
+            type="text/plain"
+            data-category="analytics"
+            data-service="Google Analytics"
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${tagManagerId}`}
+        ></script>
+        
+        <script
+            type="text/plain"
+            data-category="analytics"
+            data-service="Google Analytics"
+            define:vars={{ tagManagerId }}
+        >
+            window.dataLayer = window.dataLayer || [];
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+            gtag("js", new Date());
+            gtag("config", tagManagerId);
+        </script>
+    </>
+)}

package/overrides/MarkdownContent.astro

@@ -0,0 +1,14 @@
+---
+import DefaultMarkdownContent from '@astrojs/starlight/components/MarkdownContent.astro';
+
+const pathname = Astro.url.pathname.toLowerCase();
+const isApiReference = pathname.includes('/api_reference') || pathname.includes('/api-reference');
+
+const pageWeight = isApiReference ? "0.1" : "1.0";
+---
+
+<div data-pagefind-weight={pageWeight} style="display: contents;">
+  <DefaultMarkdownContent {...Astro.props}>
+    <slot />
+  </DefaultMarkdownContent>
+</div>