@foliokit/cms-ui 0.4.2 → 1.0.1

package/src/lib/app-shell/app-shell.component.scss

@@ -0,0 +1,204 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+.folio-shell-container {
+  height: 100%;
+}
+
+mat-sidenav-container {
+  height: 100%;
+  background: var(--bg);
+}
+
+mat-sidenav {
+  width: 220px;
+  background: var(--surface-1);
+  border-right: 1px solid var(--border);
+  --mat-sidenav-container-shape: 0px;
+  border-radius: 0;
+  transition: width 0.18s ease;
+}
+
+// ─── Icon-rail (768–1023px) ───────────────────────────────────────────────────
+
+mat-sidenav.icon-rail {
+  width: 52px;
+  overflow-x: hidden;
+}
+
+mat-sidenav.icon-rail .nav-label {
+  display: none;
+}
+
+mat-sidenav.icon-rail .nav-group-label {
+  display: none;
+}
+
+::ng-deep mat-sidenav.icon-rail .nav-item {
+  padding: 0 !important;
+  justify-content: center;
+}
+
+// ─── Nav wrapper layout ───────────────────────────────────────────────────────
+
+.folio-nav-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.folio-nav-body {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-top: 8px;
+}
+
+.folio-nav-footer {
+  border-top: 1px solid var(--border);
+  padding: 8px;
+}
+
+.folio-nav-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 16px 16px 12px;
+}
+
+// ─── Nav group labels ─────────────────────────────────────────────────────────
+
+::ng-deep mat-sidenav .nav-group-label {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  padding: 0 16px;
+  margin-bottom: 3px;
+  margin-top: 18px;
+  display: block;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+// ─── Nav items ────────────────────────────────────────────────────────────────
+
+::ng-deep mat-sidenav .nav-item {
+  height: 40px;
+  padding: 0 16px;
+  gap: 10px;
+  display: flex !important;
+  align-items: center;
+  font-size: 13px;
+  font-family: var(--font-body);
+  color: var(--text-secondary);
+  text-decoration: none;
+  border-left: 2px solid transparent;
+  transition: background 0.12s, color 0.12s;
+
+  &:hover {
+    background: var(--surface-2);
+    color: var(--text-primary);
+  }
+
+  .nav-icon {
+    font-size: 18px !important;
+    width: 18px !important;
+    height: 18px !important;
+    flex-shrink: 0;
+  }
+
+  &.active-link {
+    border-left-color: var(--text-accent);
+    background: var(--surface-2);
+    color: var(--text-accent);
+    font-weight: 500;
+    padding-left: 14px;
+  }
+}
+
+[data-theme="dark"] ::ng-deep mat-sidenav .nav-item.active-link {
+  background: var(--nav-active-bg);
+}
+
+// ─── Logo mark ────────────────────────────────────────────────────────────────
+
+.folio-logo-mark {
+  position: relative;
+  width: 30px;
+  height: 30px;
+  background: var(--logo-bg);
+  border-radius: var(--r-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.25s;
+  flex-shrink: 0;
+
+  span {
+    font-family: var(--font-display);
+    font-size: 17px;
+    font-weight: 900;
+    color: var(--logo-text);
+    line-height: 1;
+    transition: color 0.25s;
+  }
+}
+
+.folio-logo-dot {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--logo-dot);
+  transition: background 0.25s;
+}
+
+.folio-app-name {
+  font-family: var(--font-display);
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.025em;
+
+  em {
+    font-style: italic;
+    color: var(--text-muted);
+    font-weight: 400;
+  }
+}
+
+// ─── Toolbar ─────────────────────────────────────────────────────────────────
+
+.folio-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  height: 56px;
+  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
+  backdrop-filter: blur(14px);
+  border-bottom: 1px solid var(--border);
+  gap: 4px;
+}
+
+// ─── Content area ─────────────────────────────────────────────────────────────
+
+.folio-content {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  overflow: hidden !important;
+}
+
+.shell-main {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}

package/src/lib/app-shell/app-shell.component.ts

@@ -0,0 +1,88 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  inject,
+  OnDestroy,
+  OnInit,
+  signal,
+} from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { NavigationEnd, Router } from '@angular/router';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { SHELL_CONFIG } from '../shell-config.token';
+import { ThemeService } from '../theme.service';
+import { ShellNavFooterDirective } from './shell-nav-footer.directive';
+
+const MOBILE_BP = '(max-width: 767.98px)';
+const ICON_RAIL_BP = '(min-width: 768px) and (max-width: 1023.98px)';
+
+@Component({
+  selector: 'folio-app-shell',
+  templateUrl: './app-shell.component.html',
+  styleUrl: './app-shell.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatSidenavModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatButtonModule,
+  ],
+})
+export class AppShellComponent implements OnInit, OnDestroy {
+  protected readonly config = inject(SHELL_CONFIG);
+  protected readonly theme = inject(ThemeService);
+
+  @ContentChild(ShellNavFooterDirective) protected navFooter?: ShellNavFooterDirective;
+
+  protected readonly isMobile = signal(false);
+  protected readonly isIconRail = signal(false);
+  protected readonly sidenavOpen = signal(false);
+
+  private readonly breakpointObserver = inject(BreakpointObserver);
+  private readonly router = inject(Router);
+  private bpSub?: Subscription;
+  private navSub?: Subscription;
+
+  ngOnInit(): void {
+    this.bpSub = this.breakpointObserver
+      .observe([MOBILE_BP, ICON_RAIL_BP])
+      .subscribe((state) => {
+        const mobile = state.breakpoints[MOBILE_BP];
+        const iconRail = state.breakpoints[ICON_RAIL_BP];
+        this.isMobile.set(mobile);
+        this.isIconRail.set(iconRail);
+        // Mobile: close sidenav (overlay); everything else: keep open
+        this.sidenavOpen.set(!mobile);
+      });
+
+    this.navSub = this.router.events
+      .pipe(filter(e => e instanceof NavigationEnd))
+      .subscribe(() => {
+        if (this.isMobile()) {
+          this.sidenavOpen.set(false);
+        }
+      });
+
+    this.theme.apply();
+  }
+
+  ngOnDestroy(): void {
+    this.bpSub?.unsubscribe();
+    this.navSub?.unsubscribe();
+  }
+
+  protected toggleSidenav(): void {
+    this.sidenavOpen.update((open) => !open);
+  }
+
+  protected toggleTheme(): void {
+    this.theme.toggle();
+  }
+}

package/src/lib/app-shell/shell-nav-footer.directive.ts

@@ -0,0 +1,4 @@
+import { Directive } from '@angular/core';
+
+@Directive({ selector: '[shellNavFooter]', standalone: true })
+export class ShellNavFooterDirective {}

package/src/lib/cms-ui/cms-ui.html

@@ -0,0 +1 @@
+<p>CmsUi works!</p>

package/src/lib/cms-ui/cms-ui.spec.ts

@@ -0,0 +1,93 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { ADMIN_EMAIL, FIREBASE_AUTH, FIRESTORE, FIREBASE_STORAGE, BLOG_POST_SERVICE, SITE_CONFIG_SERVICE } from '@foliokit/cms-core';
+import { AppShellComponent } from '../app-shell/app-shell.component';
+import { SHELL_CONFIG, ShellConfig } from '../shell-config.token';
+
+// Null providers for Firebase root services — prevents NullInjectorError when
+// providedIn:'root' services (PostService, SiteConfigService) are instantiated
+// by TestBed even though AppShellComponent doesn't depend on them directly.
+const firebaseNullProviders = [
+  { provide: FIRESTORE, useValue: null },
+  { provide: FIREBASE_AUTH, useValue: null },
+  { provide: FIREBASE_STORAGE, useValue: null },
+  { provide: ADMIN_EMAIL, useValue: 'test@example.com' },
+  { provide: BLOG_POST_SERVICE, useValue: null },
+  { provide: SITE_CONFIG_SERVICE, useValue: null },
+];
+
+const testConfig: ShellConfig = {
+  appName: 'Test App',
+  nav: [],
+};
+
+// JSDOM doesn't implement window.matchMedia — stub it so ThemeService
+// (providedIn:'root') can initialise without throwing.
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockReturnValue({
+      matches: false,
+      media: '',
+      addListener: vi.fn(),    // deprecated but used by Angular CDK BreakpointObserver
+      removeListener: vi.fn(), // deprecated but used by Angular CDK BreakpointObserver
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }),
+  });
+});
+
+describe('cms-ui public API smoke tests', () => {
+  afterEach(() => TestBed.resetTestingModule());
+
+  it('ShellConfig appName is a required string field', () => {
+    // Documents the runtime contract; TypeScript enforces it at compile time.
+    expect(typeof testConfig.appName).toBe('string');
+    expect(testConfig.appName.length).toBeGreaterThan(0);
+  });
+
+  it('SHELL_CONFIG token is injectable when provided', () => {
+    TestBed.configureTestingModule({
+      providers: [{ provide: SHELL_CONFIG, useValue: testConfig }],
+    });
+    const config = TestBed.inject(SHELL_CONFIG);
+    expect(config.appName).toBe('Test App');
+  });
+
+  it('AppShellComponent renders when SHELL_CONFIG is provided', async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppShellComponent],
+      providers: [
+        { provide: SHELL_CONFIG, useValue: testConfig },
+        provideRouter([]),
+        provideAnimationsAsync(),
+        ...firebaseNullProviders,
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(AppShellComponent);
+    await fixture.whenStable();
+
+    expect(fixture.componentInstance).toBeTruthy();
+  });
+
+  it('AppShellComponent renders the appName from SHELL_CONFIG', async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppShellComponent],
+      providers: [
+        { provide: SHELL_CONFIG, useValue: { appName: 'My Blog', nav: [] } },
+        provideRouter([]),
+        provideAnimationsAsync(),
+        ...firebaseNullProviders,
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(AppShellComponent);
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(fixture.nativeElement.textContent).toContain('My Blog');
+  });
+});

package/src/lib/cms-ui/cms-ui.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-cms-ui',
+  imports: [],
+  templateUrl: './cms-ui.html',
+  styleUrl: './cms-ui.scss',
+})
+export class CmsUi {}

package/src/lib/links-page/links-page.component.ts

@@ -0,0 +1,256 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  PLATFORM_ID,
+} from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { map } from 'rxjs';
+import { Meta, Title } from '@angular/platform-browser';
+import { MatIconModule } from '@angular/material/icon';
+import type { LinksPageConfig, LinksLink } from '@foliokit/cms-core';
+import type { SocialPlatform } from '@foliokit/cms-core';
+import { ThemeService } from '../theme.service';
+
+const PLATFORM_ICONS: Record<SocialPlatform, string> = {
+  youtube: 'play_circle',
+  twitch: 'live_tv',
+  twitter: 'tag',
+  bluesky: 'cloud',
+  github: 'code',
+  linkedin: 'business',
+  instagram: 'photo_camera',
+  tiktok: 'music_note',
+  facebook: 'thumb_up',
+  email: 'mail',
+  website: 'language',
+};
+
+@Component({
+  selector: 'cms-links-page',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatIconModule],
+  styles: [`
+    :host { display: block; }
+
+    .links-container {
+      max-width: 480px;
+      margin: 48px auto;
+      padding: 0 24px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .avatar--xl {
+      width: 96px;
+      height: 96px;
+      border-radius: 50%;
+      background: var(--logo-bg);
+      color: var(--logo-text);
+      font-family: var(--font-body);
+      font-weight: 600;
+      font-size: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      flex-shrink: 0;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .links-name {
+      font-family: var(--font-display);
+      font-size: 1.5rem;
+      font-weight: 600;
+      letter-spacing: -0.015em;
+      color: var(--text-primary);
+      text-align: center;
+      margin-top: 16px;
+    }
+
+    .links-bio {
+      font-size: 16px;
+      line-height: 1.75;
+      color: var(--text-secondary);
+      text-align: center;
+      max-width: 480px;
+      margin: 8px auto 0;
+    }
+
+    .links-nav {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      margin-top: 24px;
+    }
+
+    .link-btn {
+      width: 100%;
+      margin-top: 12px;
+      background: var(--surface-0);
+      border: 1px solid var(--border-strong);
+      border-radius: var(--r-lg);
+      padding: 13px 18px;
+      box-shadow: var(--shadow-sm);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      text-decoration: none;
+      cursor: pointer;
+      transition: box-shadow 0.12s, transform 0.12s;
+
+      &:hover {
+        box-shadow: var(--shadow-md);
+        transform: translateY(-1px);
+      }
+
+      .link-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+        color: var(--text-accent);
+        flex-shrink: 0;
+      }
+
+      .link-label {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--text-primary);
+        flex: 1;
+      }
+
+      .link-chevron {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+        color: var(--text-muted);
+        flex-shrink: 0;
+      }
+    }
+  `],
+  template: `
+    @if (page()) {
+      <div class="links-container">
+        <div class="avatar--xl">
+          @if (avatarSrc()) {
+            <img [src]="avatarSrc()" [alt]="page()!.avatarAlt || page()!.title" />
+          } @else {
+            {{ initials() }}
+          }
+        </div>
+
+        @if (page()!.headline) {
+          <h1 class="links-name">{{ page()!.headline }}</h1>
+        }
+
+        @if (page()!.bio) {
+          <p class="links-bio">{{ page()!.bio }}</p>
+        }
+
+        <nav class="links-nav">
+          @for (link of sortedLinks(); track link.id) {
+            <a
+              class="link-btn"
+              [href]="link.url"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <mat-icon class="link-icon">{{ getIcon(link) }}</mat-icon>
+              <span class="link-label">{{ link.label }}</span>
+              <mat-icon class="link-chevron">chevron_right</mat-icon>
+            </a>
+          }
+        </nav>
+      </div>
+    } @else {
+      <p style="padding: 40px; text-align: center; color: var(--text-muted)">No content available.</p>
+    }
+  `,
+})
+export class LinksPageComponent {
+  private readonly route = inject(ActivatedRoute);
+  private readonly meta = inject(Meta);
+  private readonly title = inject(Title);
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly document = inject(DOCUMENT);
+  readonly theme = inject(ThemeService);
+
+  readonly page = toSignal(
+    this.route.data.pipe(map((data) => (data['page'] as LinksPageConfig) ?? null)),
+    { initialValue: (this.route.snapshot.data['page'] as LinksPageConfig) ?? null },
+  );
+
+  readonly sortedLinks = computed<LinksLink[]>(() =>
+    [...(this.page()?.links ?? [])].sort((a, b) => a.order - b.order),
+  );
+
+  protected readonly avatarSrc = computed(() =>
+    this.theme.isDark() && this.page()?.avatarUrlDark
+      ? this.page()!.avatarUrlDark!
+      : this.page()!.avatarUrl,
+  );
+
+  protected readonly initials = computed(() => {
+    const headline = this.page()?.headline ?? this.page()?.title ?? '';
+    return headline
+      .split(' ')
+      .slice(0, 2)
+      .map((w: string) => w[0])
+      .join('')
+      .toUpperCase();
+  });
+
+  private upsertCanonical(href: string): void {
+    let el = this.document.querySelector<HTMLLinkElement>('link[rel="canonical"]');
+    if (!el) {
+      el = this.document.createElement('link');
+      el.rel = 'canonical';
+      this.document.head.appendChild(el);
+    }
+    el.href = href;
+  }
+
+  getIcon(link: LinksLink): string {
+    if (link.platform && PLATFORM_ICONS[link.platform]) {
+      return PLATFORM_ICONS[link.platform];
+    }
+    return 'open_in_new';
+  }
+
+  constructor() {
+    effect(() => {
+      const p = this.page();
+      if (!p) return;
+      if (!isPlatformBrowser(this.platformId)) return;
+      const pageTitle = p.seo?.title ?? p.title ?? 'Links';
+      this.title.setTitle(pageTitle);
+      if (p.seo?.description) {
+        this.meta.updateTag({ name: 'description', content: p.seo.description });
+      }
+      this.meta.updateTag({ property: 'og:title', content: pageTitle });
+      this.meta.updateTag({ property: 'og:type', content: 'website' });
+      const canonicalUrl = `${this.document.location?.origin ?? ''}/links`;
+      this.meta.updateTag({ property: 'og:url', content: canonicalUrl });
+      this.upsertCanonical(canonicalUrl);
+      if (p.seo?.ogImage) {
+        this.meta.updateTag({ property: 'og:image', content: p.seo.ogImage });
+      }
+      if (p.seo?.noIndex) {
+        this.meta.updateTag({ name: 'robots', content: 'noindex' });
+      } else {
+        this.meta.removeTag('name="robots"');
+      }
+    });
+  }
+}

package/src/lib/route-data.ts

@@ -0,0 +1,27 @@
+import type { AboutPageConfig, LinksPageConfig } from '@foliokit/cms-core';
+
+/**
+ * The route data key used by LinksPageComponent to read its page from Angular
+ * Router resolved data.
+ */
+export const CMS_ROUTE_DATA_KEY = 'page' as const;
+
+/**
+ * The route data key used by AboutPageComponent to read its config from Angular
+ * Router resolved data.
+ */
+export const ABOUT_ROUTE_DATA_KEY = 'about' as const;
+
+/**
+ * Shape of the resolved route data expected by AboutPageComponent.
+ */
+export interface AboutPageRouteData {
+  [ABOUT_ROUTE_DATA_KEY]: AboutPageConfig | null;
+}
+
+/**
+ * Shape of the resolved route data expected by LinksPageComponent.
+ */
+export interface LinksPageRouteData {
+  [CMS_ROUTE_DATA_KEY]: LinksPageConfig | null;
+}

package/src/lib/shell-config.token.ts

@@ -0,0 +1,11 @@
+import { InjectionToken } from '@angular/core';
+import type { NavEntry } from '@foliokit/cms-core';
+
+export interface ShellConfig {
+  appName: string;
+  logoUrl?: string;
+  showAuth?: boolean;
+  nav?: NavEntry[];
+}
+
+export const SHELL_CONFIG = new InjectionToken<ShellConfig>('SHELL_CONFIG');