@dataengineeringformachinelearning/viking-ui 1.0.2 → 3.0.0-alpha.4

package/src/lib/site-drakkar/site-drakkar.config.ts

@@ -0,0 +1,295 @@
+import { VikingIconName } from "../core/icons";
+
+/**
+ * Drakkar — the Viking longship that carries the site shell (navbar, footer, nav links)
+ * across marketing, app, and backend surfaces.
+ */
+
+/** Which DEML surface the Drakkar shell is rendering on (navbar + footer). */
+export type SiteDrakkarContext = "app" | "marketing" | "backend" | "docs";
+
+export interface SiteUrls {
+  app: string;
+  marketing: string;
+  backend: string;
+}
+
+export interface SiteNavLink {
+  id: string;
+  label: string;
+  icon: VikingIconName;
+  appHref: string;
+  marketingHref: string;
+  external?: boolean;
+  requireAuth?: boolean;
+  /** Routes served by deml.app — resolved to absolute app URLs off-app. */
+  platform?: boolean;
+}
+
+export interface SiteFooterLink {
+  label: string;
+  appHref: string;
+  marketingHref: string;
+  external?: boolean;
+  action?: "cookie-settings" | "bug-report";
+  /** Routes served by deml.app — resolved to absolute app URLs off-app. */
+  platform?: boolean;
+}
+
+export interface SiteFooterColumn {
+  title: string;
+  links: SiteFooterLink[];
+}
+
+/** Primary navbar links (desktop + mobile). Shown on every surface. */
+export const SITE_NAV_LINKS: readonly SiteNavLink[] = [
+  {
+    id: "explore",
+    label: "Explore",
+    icon: "globe",
+    appHref: "/explore",
+    marketingHref: "/explore",
+    platform: true,
+  },
+  {
+    id: "documentation",
+    label: "Documentation",
+    icon: "file",
+    appHref: "https://dataengineeringformachinelearning.com/documentation/",
+    marketingHref: "/documentation",
+  },
+  {
+    id: "dashboard",
+    label: "Dashboard",
+    icon: "home",
+    appHref: "/dashboard",
+    marketingHref: "/dashboard",
+    requireAuth: true,
+    platform: true,
+  },
+  {
+    id: "sites",
+    label: "Sites",
+    icon: "building",
+    appHref: "/settings",
+    marketingHref: "/settings",
+    requireAuth: true,
+    platform: true,
+  },
+  {
+    id: "account",
+    label: "Account",
+    icon: "user",
+    appHref: "/account",
+    marketingHref: "/account",
+    requireAuth: true,
+    platform: true,
+  },
+] as const;
+
+export const SITE_FOOTER_COLUMNS: readonly SiteFooterColumn[] = [
+  {
+    title: "Platform",
+    links: [
+      {
+        label: "Explore",
+        appHref: "/explore",
+        marketingHref: "/explore",
+        platform: true,
+      },
+      {
+        label: "Dashboard",
+        appHref: "/dashboard",
+        marketingHref: "/dashboard",
+        platform: true,
+      },
+      {
+        label: "Sites",
+        appHref: "/settings",
+        marketingHref: "/settings",
+        platform: true,
+      },
+      {
+        label: "Account",
+        appHref: "/account",
+        marketingHref: "/account",
+        platform: true,
+      },
+      {
+        label: "Platform Status",
+        appHref: "/status/platform-status",
+        marketingHref: "/status/platform-status",
+        platform: true,
+      },
+    ],
+  },
+  {
+    title: "Resources",
+    links: [
+      {
+        label: "Documentation",
+        appHref: "https://dataengineeringformachinelearning.com/documentation/",
+        marketingHref: "/documentation",
+      },
+      {
+        label: "Whitepaper",
+        appHref: "https://dataengineeringformachinelearning.com/whitepaper/",
+        marketingHref: "/whitepaper",
+      },
+      {
+        label: "Book",
+        appHref: "https://dataengineeringformachinelearning.com/book/",
+        marketingHref: "/book",
+      },
+    ],
+  },
+  {
+    title: "Support",
+    links: [
+      {
+        label: "Platform Status",
+        appHref: "/status/platform-status",
+        marketingHref: "/status/platform-status",
+        platform: true,
+      },
+      {
+        label: "Report a Bug",
+        appHref: "#",
+        marketingHref: "#",
+        action: "bug-report",
+      },
+    ],
+  },
+  {
+    title: "Legal & Compliance",
+    links: [
+      {
+        label: "Privacy Policy",
+        appHref: "https://dataengineeringformachinelearning.com/privacy/",
+        marketingHref: "/privacy",
+      },
+      {
+        label: "Terms of Service",
+        appHref: "https://dataengineeringformachinelearning.com/terms/",
+        marketingHref: "/terms",
+      },
+      {
+        label: "SOC2 Compliance",
+        appHref: "https://dataengineeringformachinelearning.com/compliance/",
+        marketingHref: "/compliance",
+      },
+      {
+        label: "GDPR Compliance",
+        appHref: "https://dataengineeringformachinelearning.com/privacy/#gdpr",
+        marketingHref: "/privacy#gdpr",
+      },
+      {
+        label: "Cookie Settings",
+        appHref: "#",
+        marketingHref: "#",
+        action: "cookie-settings",
+      },
+    ],
+  },
+] as const;
+
+export const BUG_REPORT_QUERY = "reportBug=1";
+export const COOKIE_SETTINGS_QUERY = "cookieSettings=1";
+
+const isAbsoluteUrl = (href: string): boolean => /^https?:\/\//i.test(href);
+
+const joinBase = (base: string, path: string): string => {
+  if (isAbsoluteUrl(path)) {
+    return path;
+  }
+  const normalizedBase = base.replace(/\/$/, "");
+  const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+  return `${normalizedBase}${normalizedPath}`;
+};
+
+export const bugReportHref = (urls: SiteUrls): string =>
+  `${joinBase(urls.app, "/")}?${BUG_REPORT_QUERY}`;
+
+export const cookieSettingsHref = (urls: SiteUrls): string =>
+  `${joinBase(urls.marketing, "/")}?${COOKIE_SETTINGS_QUERY}`;
+
+const resolveMarketingContentHref = (href: string, urls: SiteUrls): string => {
+  if (isAbsoluteUrl(href)) {
+    return href;
+  }
+  if (href.startsWith("mailto:")) {
+    return href;
+  }
+  return href.startsWith("/") ? href : joinBase(urls.marketing, href);
+};
+
+const resolvePlatformHref = (
+  href: string,
+  context: SiteDrakkarContext,
+  urls: SiteUrls,
+): string => {
+  if (context === "app") {
+    return href;
+  }
+  return joinBase(urls.app, href);
+};
+
+export const resolveNavHref = (
+  link: SiteNavLink,
+  context: SiteDrakkarContext,
+  urls: SiteUrls,
+): string => {
+  if (link.platform) {
+    return resolvePlatformHref(link.appHref, context, urls);
+  }
+  if (context === "app") {
+    return link.appHref;
+  }
+  return resolveMarketingContentHref(link.marketingHref, urls);
+};
+
+export const resolveFooterHref = (
+  link: SiteFooterLink,
+  context: SiteDrakkarContext,
+  urls: SiteUrls,
+): string => {
+  if (link.action === "bug-report") {
+    return context === "app" ? "#" : bugReportHref(urls);
+  }
+  if (link.action === "cookie-settings") {
+    return cookieSettingsHref(urls);
+  }
+  if (link.platform) {
+    return resolvePlatformHref(link.appHref, context, urls);
+  }
+  if (context === "app") {
+    return link.appHref;
+  }
+  return resolveMarketingContentHref(link.marketingHref, urls);
+};
+
+export const resolveBrandHref = (
+  context: SiteDrakkarContext,
+  urls: SiteUrls,
+): string => {
+  if (context === "marketing") {
+    return "/";
+  }
+  return urls.marketing;
+};
+
+/** Navbar links; auth-gated entries appear only when the session is active. */
+export const visibleNavLinks = (
+  links: readonly SiteNavLink[],
+  isAuthenticated = false,
+): SiteNavLink[] =>
+  links.filter((link) => !link.requireAuth || isAuthenticated);
+
+export const isAppRouterPath = (href: string): boolean =>
+  !isAbsoluteUrl(href) && href.startsWith("/");
+
+export const DEFAULT_SITE_URLS: SiteUrls = {
+  app: "https://deml.app",
+  marketing: "https://dataengineeringformachinelearning.com",
+  backend: "https://backend.deml.app",
+};

package/src/lib/site-drakkar/site-footer.ts

@@ -0,0 +1,129 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from "@angular/core";
+import { RouterLink } from "@angular/router";
+import { VikingFooter } from "../footer/footer";
+import {
+  cookieSettingsHref,
+  DEFAULT_SITE_URLS,
+  isAppRouterPath,
+  resolveFooterHref,
+  SITE_FOOTER_COLUMNS,
+  SiteDrakkarContext,
+  SiteFooterLink,
+  SiteUrls,
+} from "./site-drakkar.config";
+
+/**
+ * viking-site-footer — canonical site footer shared across DEML surfaces.
+ */
+@Component({
+  selector: "viking-site-footer",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink, VikingFooter],
+  template: `
+    <viking-footer>
+      <nav
+        vikingFooterDirectory
+        class="viking-footer-directory footer-directory"
+        aria-label="Footer Directory"
+      >
+        @for (column of columns; track column.title) {
+          <div class="footer-column">
+            <h3 class="footer-column-title">{{ column.title }}</h3>
+            <ul class="footer-list">
+              @for (link of column.links; track link.label) {
+                <li>
+                  @if (link.action === "cookie-settings") {
+                    @if (context() === "marketing") {
+                      <a href="#" (click)="onCookieSettings($event)">{{
+                        link.label
+                      }}</a>
+                    } @else {
+                      <a [href]="cookieSettingsUrl()">{{ link.label }}</a>
+                    }
+                  } @else if (link.action === "bug-report") {
+                    @if (context() === "app") {
+                      <a href="#" (click)="onBugReport($event)">{{
+                        link.label
+                      }}</a>
+                    } @else {
+                      <a [href]="resolveHref(link)">{{ link.label }}</a>
+                    }
+                  } @else if (context() === "app" && isAppRoute(link)) {
+                    <a [routerLink]="link.appHref">{{ link.label }}</a>
+                  } @else {
+                    <a [href]="resolveHref(link)">{{ link.label }}</a>
+                  }
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      </nav>
+
+      <ng-container vikingFooterBottom>
+        <div class="footer-badges-top">
+          <span
+            class="usa-badge viking-usa-badge"
+            id="usa-badge"
+            (mouseenter)="usaBadgeHover.emit($event)"
+          >
+            <span
+              class="usa-badge-icon viking-usa-badge-icon"
+              aria-hidden="true"
+              >🇺🇸</span
+            >
+            <span>Made in the U.S.A</span>
+          </span>
+        </div>
+
+        <div class="footer-compliance-row">
+          <div class="copyright-info">
+            <span class="copyright-text">
+              Copyright © {{ year() }} Data Engineering for Machine Learning by
+              <a
+                href="https://joealongi.dev/"
+                target="_blank"
+                rel="noopener noreferrer"
+                >Joe Alongi</a
+              >. All rights reserved.
+            </span>
+          </div>
+        </div>
+      </ng-container>
+    </viking-footer>
+  `,
+})
+export class VikingSiteFooter {
+  readonly context = input<SiteDrakkarContext>("app");
+  readonly urls = input<SiteUrls>(DEFAULT_SITE_URLS);
+  readonly year = input<number>(new Date().getFullYear());
+
+  readonly cookieSettings = output<Event>();
+  readonly bugReport = output<Event>();
+  readonly usaBadgeHover = output<MouseEvent>();
+
+  protected readonly columns = SITE_FOOTER_COLUMNS;
+
+  protected readonly cookieSettingsUrl = () => cookieSettingsHref(this.urls());
+
+  protected resolveHref = (link: SiteFooterLink): string =>
+    resolveFooterHref(link, this.context(), this.urls());
+
+  protected isAppRoute = (link: SiteFooterLink): boolean =>
+    !link.action && isAppRouterPath(link.appHref);
+
+  protected onCookieSettings(event: Event): void {
+    event.preventDefault();
+    this.cookieSettings.emit(event);
+  }
+
+  protected onBugReport(event: Event): void {
+    event.preventDefault();
+    this.bugReport.emit(event);
+  }
+}

package/src/lib/site-drakkar/site-navbar.scss

@@ -0,0 +1,2 @@
+// Navbar styles live in static-navbar.scss (global viking-ui.css + app styles.scss).
+// ViewEncapsulation.None — do not @use static-navbar here (duplicates ~46kB into component budget).

package/src/lib/site-drakkar/site-navbar.ts

@@ -0,0 +1,267 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  computed,
+  input,
+  output,
+  signal,
+} from "@angular/core";
+import { RouterLink, RouterLinkActive } from "@angular/router";
+import { VikingButton } from "../button/button";
+import { VikingIcon } from "../icon/icon";
+import { VikingThemeToggle } from "../theme-toggle/theme-toggle";
+import {
+  DEFAULT_SITE_URLS,
+  isAppRouterPath,
+  resolveBrandHref,
+  resolveNavHref,
+  SITE_NAV_LINKS,
+  SiteDrakkarContext,
+  SiteUrls,
+  visibleNavLinks,
+} from "./site-drakkar.config";
+
+/**
+ * viking-site-navbar — canonical site header shared across DEML surfaces.
+ * Uses `.navbar` markup + viking-ui.css (same structure as marketing/backend static HTML).
+ */
+@Component({
+  selector: "viking-site-navbar",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    RouterLink,
+    RouterLinkActive,
+    VikingButton,
+    VikingIcon,
+    VikingThemeToggle,
+  ],
+  styleUrl: "./site-navbar.scss",
+  template: `
+    <header class="navbar">
+      <div class="navbar-content">
+        <div class="navbar-left">
+          @if (context() === "app") {
+            <a
+              [href]="brandHref()"
+              class="navbar-brand"
+              aria-label="Go to marketing homepage"
+              (click)="onBrandClick($event)"
+            >
+              <viking-icon
+                name="drakkar"
+                [size]="28"
+                color="accent"
+                class="brand-icon navbar-logo"
+              />
+            </a>
+          } @else {
+            <a
+              [href]="brandHref()"
+              class="navbar-brand"
+              aria-label="Go to homepage"
+            >
+              <viking-icon
+                name="drakkar"
+                [size]="28"
+                color="accent"
+                class="brand-icon navbar-logo"
+              />
+            </a>
+          }
+        </div>
+
+        <nav class="navbar-center desktop-nav" aria-label="Main navigation">
+          @for (link of navLinks(); track link.id) {
+            @if (context() === "app" && isAppRouterPath(link.appHref)) {
+              <a
+                [routerLink]="link.appHref"
+                routerLinkActive="active"
+                [routerLinkActiveOptions]="{
+                  exact: link.appHref === '/explore',
+                }"
+                class="nav-btn"
+              >
+                <viking-icon [name]="link.icon" [size]="16" />
+                <span>{{ link.label }}</span>
+              </a>
+            } @else {
+              <a [href]="resolveHref(link)" class="nav-btn">
+                <viking-icon [name]="link.icon" [size]="16" />
+                <span>{{ link.label }}</span>
+              </a>
+            }
+          }
+        </nav>
+
+        <div class="navbar-right">
+          @if (showSearch()) {
+            <div class="navbar-search" role="search">
+              <viking-button
+                variant="outline"
+                [square]="true"
+                [compact]="true"
+                icon="search"
+                label="Open search (⌘K)"
+                (pressed)="openSearch()"
+              />
+            </div>
+          }
+
+          <div class="desktop-auth">
+            @if (!isAuthenticated()) {
+              <viking-button
+                variant="primary"
+                icon="arrow-right"
+                (pressed)="login.emit()"
+              >
+                Sign In
+              </viking-button>
+            } @else {
+              <viking-button
+                variant="primary"
+                icon="home"
+                [href]="urls().app + '/dashboard'"
+              >
+                Dashboard
+              </viking-button>
+              <viking-button variant="ghost" (pressed)="logout.emit()"
+                >Sign Out</viking-button
+              >
+            }
+          </div>
+
+          <viking-theme-toggle
+            [theme]="theme()"
+            (toggle)="themeToggle.emit()"
+          />
+
+          <viking-button
+            variant="outline"
+            [square]="true"
+            class="menu-toggle-btn"
+            [icon]="mobileMenuOpen() ? 'x' : 'menu'"
+            [label]="
+              mobileMenuOpen()
+                ? 'Close navigation menu'
+                : 'Toggle navigation menu'
+            "
+            (pressed)="toggleMobileMenu()"
+          />
+        </div>
+      </div>
+
+      <nav
+        class="mobile-menu"
+        [class.open]="mobileMenuOpen()"
+        aria-label="Mobile navigation"
+      >
+        @for (link of navLinks(); track link.id + "-mobile") {
+          @if (context() === "app" && isAppRouterPath(link.appHref)) {
+            <a
+              [routerLink]="link.appHref"
+              routerLinkActive="active"
+              [routerLinkActiveOptions]="{ exact: link.appHref === '/explore' }"
+              class="mobile-nav-btn"
+              (click)="closeMobileMenu()"
+            >
+              <viking-icon [name]="link.icon" [size]="16" />
+              <span>{{ link.label }}</span>
+            </a>
+          } @else {
+            <a
+              [href]="resolveHref(link)"
+              class="mobile-nav-btn"
+              (click)="closeMobileMenu()"
+            >
+              <viking-icon [name]="link.icon" [size]="16" />
+              <span>{{ link.label }}</span>
+            </a>
+          }
+        }
+
+        <div class="mobile-divider"></div>
+
+        @if (!isAuthenticated()) {
+          <viking-button
+            variant="primary"
+            icon="arrow-right"
+            class="mobile-auth-btn"
+            [fullWidth]="true"
+            (pressed)="login.emit(); closeMobileMenu()"
+          >
+            Sign In
+          </viking-button>
+        } @else {
+          <viking-button
+            variant="primary"
+            icon="home"
+            class="mobile-auth-btn"
+            [fullWidth]="true"
+            [href]="urls().app + '/dashboard'"
+            (pressed)="closeMobileMenu()"
+          >
+            Dashboard
+          </viking-button>
+          <viking-button
+            variant="ghost"
+            class="mobile-auth-btn"
+            [fullWidth]="true"
+            (pressed)="logout.emit(); closeMobileMenu()"
+          >
+            Sign Out
+          </viking-button>
+        }
+      </nav>
+    </header>
+  `,
+})
+export class VikingSiteNavbar {
+  readonly context = input<SiteDrakkarContext>("app");
+  readonly urls = input<SiteUrls>(DEFAULT_SITE_URLS);
+  readonly isAuthenticated = input<boolean>(false);
+  readonly theme = input<"light" | "dark">("dark");
+  readonly showSearch = input<boolean>(false);
+
+  readonly login = output<void>();
+  readonly logout = output<void>();
+  readonly themeToggle = output<void>();
+  readonly searchOpen = output<void>();
+
+  protected readonly mobileMenuOpen = signal(false);
+
+  protected readonly navLinks = computed(() =>
+    visibleNavLinks(SITE_NAV_LINKS, this.isAuthenticated()),
+  );
+
+  protected readonly brandHref = computed(() =>
+    resolveBrandHref(this.context(), this.urls()),
+  );
+
+  protected resolveHref = (link: (typeof SITE_NAV_LINKS)[number]): string =>
+    resolveNavHref(link, this.context(), this.urls());
+
+  protected isAppRouterPath = isAppRouterPath;
+
+  protected onBrandClick(event: MouseEvent): void {
+    event.preventDefault();
+    window.location.href = this.brandHref();
+  }
+
+  protected toggleMobileMenu(): void {
+    this.mobileMenuOpen.update((open) => !open);
+  }
+
+  protected closeMobileMenu(): void {
+    this.mobileMenuOpen.set(false);
+  }
+
+  protected openSearch(): void {
+    this.searchOpen.emit();
+    const widgets = (
+      globalThis as { DemlWidgets?: { openSearch?: () => void } }
+    ).DemlWidgets;
+    widgets?.openSearch?.();
+  }
+}