coherent-docs-theme 1.0.0

package/internal-components/ChangelogRow.astro

@@ -0,0 +1,39 @@
+---
+import { Badge } from "@astrojs/starlight/components";
+export interface ChangelogProps {
+    engine?: "Unreal Engine" | "Unity" | "Native" | undefined;
+    description?: string | undefined;
+}
+
+interface Props extends ChangelogProps {
+    badgeText: string;
+    badgeVariant: "note" | "danger" | "success" | "caution" | "tip" | "default";
+}
+
+const { badgeText, badgeVariant, engine, description } = Astro.props;
+
+const allowedEngines = ["Unreal Engine", "Unity", "Native"];
+
+if (engine && !allowedEngines.includes(engine)) {
+    throw new Error(
+        `[ChangelogRow] Invalid engine "${engine}". Allowed: ${allowedEngines.join(", ")}`,
+    );
+}
+---
+
+<tr>
+    <td>
+        <Badge text={badgeText} variant={badgeVariant} size="medium" />
+
+        {engine && <Badge text={engine} variant="tip" size="medium" />}
+    </td>
+    <td>
+        {Astro.slots.has("default") ? <slot /> : <span>{description}</span>}
+    </td>
+</tr>
+
+<style>
+    td :global(.sl-badge) {
+        margin-right: 0.5rem;
+    }
+</style>

package/internal-components/NavLinks.astro

@@ -0,0 +1,253 @@
+---
+import getThemeConfig from "../internal/themeConfig";
+import { Icon } from "@astrojs/starlight/components";
+
+interface Props {
+    type?: "header" | "sidebar";
+}
+
+const { type = "header" } = Astro.props;
+const { navLinks } = getThemeConfig();
+const currentPath = Astro.url.pathname;
+
+const isLinkActive = (href: string) => {
+    if (href === "/") return currentPath === "/";
+    return currentPath.startsWith(href);
+};
+
+const navClasses =
+    type === "header"
+        ? "extra-links sl-hidden md:sl-flex"
+        : "extra-links mobile sidebar-mode lg:hidden";
+
+const activeLinkObj = navLinks?.find((link) => isLinkActive(link.href));
+const activeLabel = activeLinkObj ? activeLinkObj.label : "Documentations";
+---
+
+{
+    navLinks && navLinks.length > 0 && (
+        <>
+            <nav class={"smart-nav " + navClasses} id="smart-nav" aria-label="Global Navigation">
+                {type === "header" && (
+                    <div class="vertical-separator md:sl-flex" />
+                )}
+
+                <ul class="full-nav-list">
+                    {navLinks.map((link) => (
+                        <li class="nav-item">
+                            <a
+                                href={link.href}
+                                class={`nav-link ${isLinkActive(link.href) ? "active" : ""}`}
+                            >
+                                {link.label}
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+
+                <div class="collapsed-menu" style="display: none;">
+                    <button class="dropdown-btn" aria-expanded="false">
+                        <span class="btn-text">{activeLabel}</span>
+                        <Icon name="down-caret" size="0.75rem" />
+                    </button>
+
+                    <ul class="dropdown-list">
+                        {navLinks.map((link) => (
+                            <li>
+                                <a
+                                    href={link.href}
+                                    class={`dropdown-link ${isLinkActive(link.href) ? "active" : ""}`}
+                                >
+                                    {link.label}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            </nav>
+        </>
+    )
+}
+
+<style>
+    .smart-nav {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    .vertical-separator {
+        width: 1px;
+        height: 1.5rem;
+        margin-right: 1rem;
+        background-color: var(--sl-color-gray-5);
+    }
+
+    .full-nav-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 1.5rem;
+        align-items: center;
+        white-space: nowrap;
+    }
+
+    .nav-link {
+        color: var(--sl-color-gray-3);
+        text-decoration: none;
+        font-size: 0.85rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        display: block;
+        padding: 0.5rem 0;
+        transition: color 0.2s;
+    }
+
+    .nav-link:hover,
+    .nav-link.active {
+        color: var(--sl-color-white);
+    }
+    .nav-link.active {
+        color: var(--sl-color-accent);
+    }
+    .collapsed-menu {
+        position: relative;
+    }
+
+    .dropdown-btn {
+        background: transparent;
+        border: 1px solid var(--sl-color-gray-5);
+        color: var(--sl-color-gray-3);
+        cursor: pointer;
+        font-weight: 700;
+        font-size: 0.85rem;
+        text-transform: uppercase;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.35rem 0.75rem;
+        border-radius: 4px;
+        white-space: nowrap;
+    }
+
+    .dropdown-btn:hover {
+        border-color: var(--sl-color-gray-2);
+        color: var(--sl-color-white);
+    }
+
+    .collapsed-menu.has-active .dropdown-btn {
+        color: var(--sl-color-accent);
+        border-color: var(--sl-color-accent);
+        background: rgba(var(--sl-color-accent-rgb), 0.1);
+    }
+
+    .dropdown-list {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        background-color: var(--sl-color-bg-nav);
+        border: 1px solid var(--sl-color-gray-5);
+        border-radius: 0.5rem;
+        box-shadow: var(--sl-shadow-lg);
+        padding: 0.5rem 0;
+        list-style: none;
+        display: none;
+        flex-direction: column;
+        min-width: 200px;
+        z-index: 9999;
+    }
+    .collapsed-menu:hover .dropdown-list {
+        display: flex;
+    }
+
+    .dropdown-link {
+        display: block;
+        padding: 0.75rem 1.5rem;
+        color: var(--sl-color-gray-3);
+        text-decoration: none;
+        font-size: 0.9rem;
+    }
+
+    .dropdown-link:hover {
+        background-color: var(--sl-color-gray-6);
+        color: var(--sl-color-white);
+    }
+
+    .dropdown-link.active {
+        color: var(--sl-color-accent);
+        font-weight: bold;
+    }
+</style>
+
+<script>
+    class SmartNav {
+        container: HTMLElement;
+        verticalSeparator: HTMLElement | null;
+        fullList: HTMLElement;
+        collapsedMenu: HTMLElement;
+        fullListWidth: number;
+
+        constructor(navElement: HTMLElement) {
+            this.container = navElement;
+            this.verticalSeparator = navElement.querySelector(".vertical-separator") as HTMLElement;
+            this.fullList = navElement.querySelector(".full-nav-list") as HTMLElement;
+            this.collapsedMenu = navElement.querySelector(".collapsed-menu") as HTMLElement;
+
+            this.fullListWidth = this.calculateRequiredWidth();
+
+            if (this.fullList.querySelector(".active")) {
+                this.collapsedMenu.classList.add("has-active");
+            }
+
+            this.check();
+
+            const observer = new ResizeObserver(() => {
+                requestAnimationFrame(() => this.check());
+            });
+            observer.observe(this.container);
+        }
+
+        calculateRequiredWidth() {
+            const items = Array.from(this.fullList.children) as HTMLElement[];
+            if (items.length === 0) return 0;
+
+            let totalWidth = 0;
+            items.forEach((item) => {
+                totalWidth += item.getBoundingClientRect().width;
+            });
+
+            const gap = 24;
+            totalWidth += (items.length - 1) * gap;
+
+            return totalWidth + 10;
+        }
+
+        check() {
+            const availableWidth = this.container.getBoundingClientRect().width;
+
+            if (availableWidth === 0) return;
+
+            if (availableWidth < this.fullListWidth) {
+                if(this.verticalSeparator) this.verticalSeparator.style.display = "none";
+                this.container.style.flexDirection = "row-reverse";
+                this.fullList.style.display = "none";
+                this.collapsedMenu.style.display = "block";
+            } else {
+                if(this.verticalSeparator) this.verticalSeparator.style.display = "block";
+                this.container.style.flexDirection = "row";
+                this.fullList.style.display = "flex";
+                this.collapsedMenu.style.display = "none";
+            }
+        }
+    }
+
+    const init = () => {
+        const nav = document.getElementById("smart-nav");
+        if (nav) new SmartNav(nav);
+    };
+
+    document.addEventListener("astro:page-load", init);
+    document.addEventListener("DOMContentLoaded", init);
+</script>

package/internal-components/ProgressIndicator.astro

@@ -0,0 +1,53 @@
+<div class="progress-scroll-container" aria-hidden="true">
+    <div id="progress-scroll"></div>
+</div>
+
+<script>
+    window.addEventListener("scroll", function () {
+        updateProgressScroll();
+    });
+    window.addEventListener("load", function () {
+        updateProgressScroll();
+    });
+
+    function updateProgressScroll() {
+        const progressScroll = document.getElementById("progress-scroll");
+        if (progressScroll) {
+            const scrollTop =
+                window.scrollY || document.documentElement.scrollTop;
+            const scrollHeight =
+                document.documentElement.scrollHeight - window.innerHeight;
+            if (scrollHeight > 0) {
+                const progress = (scrollTop / scrollHeight) * 100;
+                progressScroll.style.width = progress + "%";
+            } else {
+                progressScroll.style.width = "0%";
+            }
+        }
+    }
+</script>
+
+<style>
+    html:is(:not([data-has-hero]), [data-has-sidebar], [data-has-toc])
+        .progress-scroll-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 0.25rem;
+        width: 100%;
+        background-color: transparent;
+        z-index: 3;
+    }
+
+    #progress-scroll {
+        height: 100%;
+        width: 0px;
+        background-color: var(--sl-color-accent);
+    }
+</style>
+
+<style is:global>
+    #starlight__on-this-page--mobile {
+        margin-top: 0.25rem;
+    }
+</style>

package/overrides/Footer.astro

@@ -0,0 +1,103 @@
+---
+import type { Props } from "@astrojs/starlight/props";
+import DefaultFooter from "@astrojs/starlight/components/Footer.astro";
+
+const currentYear = new Date().getFullYear();
+
+const { pagination, editUrl, lastUpdated } = (Astro.locals as any)
+    .starlightRoute;
+
+const hasPagination = !!(pagination?.prev || pagination?.next);
+const hasMeta = !!(editUrl || lastUpdated);
+const hasAnyFooterContent = hasPagination || hasMeta;
+---
+
+<footer
+    class:list={[
+        "sl-footer",
+        { "no-meta": !hasMeta },
+        { "no-pagination": !hasPagination },
+        { "has-any-content": hasAnyFooterContent },
+    ]}
+>
+    {hasPagination && <hr class="footer-divider" />}
+
+    <DefaultFooter {...Astro.props}>
+        <slot />
+    </DefaultFooter>
+</footer>
+
+<div class="custom-copyright">
+    <p>
+        &copy; {currentYear}
+        <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
+        >
+    </div>
+</div>
+
+<style>
+    .sl-footer {
+        margin-top: 0 !important;
+    }
+
+    .sl-footer.has-any-content {
+        margin-top: 3rem !important;
+    }
+
+    .sl-footer.no-meta :global(.meta) {
+        display: none !important;
+    }
+
+    .sl-footer.no-pagination :global(.pagination-links) {
+        display: none !important;
+    }
+
+    .sl-footer :global(.meta) {
+        margin-top: 0 !important;
+        padding-top: 0 !important;
+    }
+
+    .footer-divider {
+        border: 0;
+        border-top: 1px solid var(--sl-color-gray-5);
+        margin-bottom: 1.5rem;
+        opacity: 0.5;
+    }
+
+    .custom-copyright {
+        margin-top: 2rem;
+        padding-top: 2rem;
+        border-top: 1px solid var(--sl-color-hairline);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        text-align: center;
+        color: var(--sl-color-gray-3);
+        font-size: 0.85rem;
+    }
+
+    .custom-copyright strong {
+        color: var(--sl-color-white);
+    }
+
+    .links {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+    }
+
+    .links a {
+        color: var(--sl-color-gray-3);
+        text-decoration: none;
+        transition: color 0.2s;
+    }
+
+    .links a:hover {
+        color: var(--sl-color-accent);
+    }
+</style>

package/overrides/Header.astro

@@ -0,0 +1,91 @@
+---
+import config from "virtual:starlight/user-config";
+import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro";
+import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
+import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
+import ThemeSelect from "./ThemeSelect.astro";
+import ProgressIndicator from "../internal-components/ProgressIndicator.astro";
+import getThemeConfig from "../internal/themeConfig";
+import NavLinks from "../internal-components/NavLinks.astro";
+import Search from "./Search.astro";
+
+const { showPageProgress } = getThemeConfig();
+const shouldRenderSearch =
+    config.pagefind ||
+    config.components.Search !== "@astrojs/starlight/components/Search.astro";
+---
+
+{showPageProgress && <ProgressIndicator />}
+<div class="header sl-flex">
+    <div class="left-group">
+        <div class="site-title-wrapper">
+            <SiteTitle />
+        </div>
+
+        <div class="nav-wrapper">
+            <NavLinks />
+        </div>
+    </div>
+
+    <div class="right-group print:hidden">
+        <div class="search-container">
+            {shouldRenderSearch && <Search />}
+        </div>
+        <div class="actions-wrapper sl-hidden md:sl-flex">
+            <SocialIcons />
+            <ThemeSelect />
+            <LanguageSelect />
+        </div>
+    </div>
+</div>
+
+<style>
+    .header {
+        gap: var(--sl-nav-gap);
+        justify-content: space-between;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+        display: flex;
+    }
+
+    .left-group {
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .site-title-wrapper {
+        flex-shrink: 0;
+    }
+
+    .nav-wrapper {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        justify-content: flex-start;
+        overflow: visible;
+        align-items: center;
+    }
+
+    .right-group {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+
+    .actions-wrapper {
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .vertical-separator {
+        width: 1px;
+        height: 1.5rem;
+        background-color: var(--sl-color-gray-5);
+    }
+</style>