@foliokit/cms-ui 0.4.2 → 1.0.0

package/esm2022/index.js

@@ -1,4 +1,7 @@
 export * from './lib/app-shell/app-shell.component';
 export * from './lib/theme.service';
 export * from './lib/shell-config.token';
+export * from './lib/about-page/about-page.component';
+export * from './lib/links-page/links-page.component';
+export * from './lib/route-data';
 //# sourceMappingURL=index.js.map

package/esm2022/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/cms-ui/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './lib/app-shell/app-shell.component';\nexport * from './lib/theme.service';\nexport * from './lib/shell-config.token';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/cms-ui/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './lib/app-shell/app-shell.component';\nexport * from './lib/theme.service';\nexport * from './lib/shell-config.token';\nexport * from './lib/about-page/about-page.component';\nexport * from './lib/links-page/links-page.component';\nexport * from './lib/route-data';\n"]}

package/esm2022/lib/about-page/about-page.component.js

@@ -0,0 +1,81 @@
+import { ChangeDetectionStrategy, Component, effect, inject, PLATFORM_ID, } from '@angular/core';
+import { 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 { MarkdownModule } from 'ngx-markdown';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-markdown";
+export class AboutPageComponent {
+    route = inject(ActivatedRoute);
+    meta = inject(Meta);
+    title = inject(Title);
+    platformId = inject(PLATFORM_ID);
+    page = toSignal(this.route.data.pipe(map((data) => data['page'] ?? null)), { initialValue: this.route.snapshot.data['page'] ?? null });
+    constructor() {
+        effect(() => {
+            const p = this.page();
+            if (!p)
+                return;
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            this.title.setTitle(p.seo?.title ?? p.title);
+            if (p.seo?.description) {
+                this.meta.updateTag({ name: 'description', content: p.seo.description });
+            }
+            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"');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AboutPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: AboutPageComponent, isStandalone: true, selector: "cms-about-page", ngImport: i0, template: `
+    @if (page()) {
+      <article class="max-w-3xl mx-auto px-4 py-10">
+        @if (page()!.heroImageUrl) {
+          <img
+            class="w-full rounded-xl object-cover mb-8 max-h-80"
+            [src]="page()!.heroImageUrl"
+            [alt]="page()!.heroImageAlt || page()!.title"
+          />
+        }
+        <markdown [data]="page()!.body" class="folio-prose" />
+      </article>
+    } @else {
+      <p class="p-10 text-center opacity-50">No content available.</p>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AboutPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cms-about-page',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [MarkdownModule],
+                    template: `
+    @if (page()) {
+      <article class="max-w-3xl mx-auto px-4 py-10">
+        @if (page()!.heroImageUrl) {
+          <img
+            class="w-full rounded-xl object-cover mb-8 max-h-80"
+            [src]="page()!.heroImageUrl"
+            [alt]="page()!.heroImageAlt || page()!.title"
+          />
+        }
+        <markdown [data]="page()!.body" class="folio-prose" />
+      </article>
+    } @else {
+      <p class="p-10 text-center opacity-50">No content available.</p>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=about-page.component.js.map

package/esm2022/lib/about-page/about-page.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"about-page.component.js","sourceRoot":"","sources":["../../../../../../libs/cms-ui/src/lib/about-page/about-page.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EAET,MAAM,EACN,MAAM,EACN,WAAW,GACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,MAAM,CAAC;AAC3B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;;;AAyB9C,MAAM,OAAO,kBAAkB;IACZ,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAC/B,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACpB,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IAEzC,IAAI,GAAG,QAAQ,CACtB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAE,IAAI,CAAC,MAAM,CAAe,IAAI,IAAI,CAAC,CAAC,EACxE,EAAE,YAAY,EAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAe,IAAI,IAAI,EAAE,CAC1E,CAAC;IAEF;QACE,MAAM,CAAC,GAAG,EAAE;YACV,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,CAAC;gBAAE,OAAO;YACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;gBAAE,OAAO;YAChD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;YAC7C,IAAI,CAAC,CAAC,GAAG,EAAE,WAAW,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;YAC3E,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC;YACxE,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;YAC9D,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;uGA7BU,kBAAkB;2FAAlB,kBAAkB,0EAjBnB;;;;;;;;;;;;;;;GAeT,2DAhBS,cAAc;;2FAkBb,kBAAkB;kBAtB9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,cAAc,CAAC;oBACzB,QAAQ,EAAE;;;;;;;;;;;;;;;GAeT;iBACF","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  inject,\n  PLATFORM_ID,\n} from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { ActivatedRoute } from '@angular/router';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { map } from 'rxjs';\nimport { Meta, Title } from '@angular/platform-browser';\nimport { MarkdownModule } from 'ngx-markdown';\nimport type { AboutPage } from '@foliokit/cms-core';\n\n@Component({\n  selector: 'cms-about-page',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [MarkdownModule],\n  template: `\n    @if (page()) {\n      <article class=\"max-w-3xl mx-auto px-4 py-10\">\n        @if (page()!.heroImageUrl) {\n          <img\n            class=\"w-full rounded-xl object-cover mb-8 max-h-80\"\n            [src]=\"page()!.heroImageUrl\"\n            [alt]=\"page()!.heroImageAlt || page()!.title\"\n          />\n        }\n        <markdown [data]=\"page()!.body\" class=\"folio-prose\" />\n      </article>\n    } @else {\n      <p class=\"p-10 text-center opacity-50\">No content available.</p>\n    }\n  `,\n})\nexport class AboutPageComponent {\n  private readonly route = inject(ActivatedRoute);\n  private readonly meta = inject(Meta);\n  private readonly title = inject(Title);\n  private readonly platformId = inject(PLATFORM_ID);\n\n  readonly page = toSignal(\n    this.route.data.pipe(map((data) => (data['page'] as AboutPage) ?? null)),\n    { initialValue: (this.route.snapshot.data['page'] as AboutPage) ?? null },\n  );\n\n  constructor() {\n    effect(() => {\n      const p = this.page();\n      if (!p) return;\n      if (!isPlatformBrowser(this.platformId)) return;\n      this.title.setTitle(p.seo?.title ?? p.title);\n      if (p.seo?.description) {\n        this.meta.updateTag({ name: 'description', content: p.seo.description });\n      }\n      if (p.seo?.ogImage) {\n        this.meta.updateTag({ property: 'og:image', content: p.seo.ogImage });\n      }\n      if (p.seo?.noIndex) {\n        this.meta.updateTag({ name: 'robots', content: 'noindex' });\n      } else {\n        this.meta.removeTag('name=\"robots\"');\n      }\n    });\n  }\n}\n"]}

package/esm2022/lib/links-page/links-page.component.js

@@ -0,0 +1,143 @@
+import { ChangeDetectionStrategy, Component, computed, effect, inject, PLATFORM_ID, } from '@angular/core';
+import { 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 { MatButtonModule } from '@angular/material/button';
+import * as i0 from "@angular/core";
+const PLATFORM_ICONS = {
+    youtube: 'fa-brands fa-youtube',
+    twitch: 'fa-brands fa-twitch',
+    twitter: 'fa-brands fa-x-twitter',
+    bluesky: 'fa-brands fa-bluesky',
+    github: 'fa-brands fa-github',
+    linkedin: 'fa-brands fa-linkedin-in',
+    instagram: 'fa-brands fa-instagram',
+    tiktok: 'fa-brands fa-tiktok',
+    facebook: 'fa-brands fa-facebook',
+    email: 'fa-solid fa-envelope',
+    website: 'fa-solid fa-globe',
+};
+export class LinksPageComponent {
+    route = inject(ActivatedRoute);
+    meta = inject(Meta);
+    title = inject(Title);
+    platformId = inject(PLATFORM_ID);
+    page = toSignal(this.route.data.pipe(map((data) => data['page'] ?? null)), { initialValue: this.route.snapshot.data['page'] ?? null });
+    sortedLinks = computed(() => [...(this.page()?.links ?? [])].sort((a, b) => a.order - b.order), ...(ngDevMode ? [{ debugName: "sortedLinks" }] : /* istanbul ignore next */ []));
+    getIcon(link) {
+        if (link.icon)
+            return link.icon;
+        if (link.platform)
+            return PLATFORM_ICONS[link.platform] ?? '';
+        return '';
+    }
+    constructor() {
+        effect(() => {
+            const p = this.page();
+            if (!p)
+                return;
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            this.title.setTitle(p.seo?.title ?? p.title);
+            if (p.seo?.description) {
+                this.meta.updateTag({ name: 'description', content: p.seo.description });
+            }
+            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"');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinksPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: LinksPageComponent, isStandalone: true, selector: "cms-links-page", ngImport: i0, template: `
+    @if (page()) {
+      <div class="flex flex-col items-center max-w-md mx-auto px-4 py-12 gap-6">
+        @if (page()!.avatarUrl) {
+          <img
+            class="w-24 h-24 rounded-full object-cover shadow-md"
+            [src]="page()!.avatarUrl"
+            [alt]="page()!.avatarAlt || page()!.title"
+          />
+        }
+        @if (page()!.headline) {
+          <h1 class="text-2xl font-bold text-center">{{ page()!.headline }}</h1>
+        }
+        @if (page()!.bio) {
+          <p class="text-center opacity-70">{{ page()!.bio }}</p>
+        }
+        <nav class="flex flex-col w-full gap-3">
+          @for (link of sortedLinks(); track link.id) {
+            <a
+              [href]="link.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              [class]="link.highlighted ? 'link-btn-featured' : 'link-btn'"
+              class="w-full flex items-center rounded-full px-5 !py-3 text-base font-medium transition-opacity no-underline"
+            >
+              <span class="w-6 flex-shrink-0 text-lg leading-none">
+                @if (getIcon(link)) {
+                  <i [class]="getIcon(link)"></i>
+                }
+              </span>
+              <span class="flex-1 text-center">{{ link.label }}</span>
+              <span class="w-6 flex-shrink-0"></span>
+            </a>
+          }
+        </nav>
+      </div>
+    } @else {
+      <p class="p-10 text-center opacity-50">No content available.</p>
+    }
+  `, isInline: true, styles: [".link-btn{background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}.link-btn-featured{background-color:var(--mat-sys-tertiary-container);color:var(--mat-sys-on-tertiary-container)}.link-btn:hover,.link-btn-featured:hover{opacity:.92}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinksPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cms-links-page', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule], template: `
+    @if (page()) {
+      <div class="flex flex-col items-center max-w-md mx-auto px-4 py-12 gap-6">
+        @if (page()!.avatarUrl) {
+          <img
+            class="w-24 h-24 rounded-full object-cover shadow-md"
+            [src]="page()!.avatarUrl"
+            [alt]="page()!.avatarAlt || page()!.title"
+          />
+        }
+        @if (page()!.headline) {
+          <h1 class="text-2xl font-bold text-center">{{ page()!.headline }}</h1>
+        }
+        @if (page()!.bio) {
+          <p class="text-center opacity-70">{{ page()!.bio }}</p>
+        }
+        <nav class="flex flex-col w-full gap-3">
+          @for (link of sortedLinks(); track link.id) {
+            <a
+              [href]="link.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              [class]="link.highlighted ? 'link-btn-featured' : 'link-btn'"
+              class="w-full flex items-center rounded-full px-5 !py-3 text-base font-medium transition-opacity no-underline"
+            >
+              <span class="w-6 flex-shrink-0 text-lg leading-none">
+                @if (getIcon(link)) {
+                  <i [class]="getIcon(link)"></i>
+                }
+              </span>
+              <span class="flex-1 text-center">{{ link.label }}</span>
+              <span class="w-6 flex-shrink-0"></span>
+            </a>
+          }
+        </nav>
+      </div>
+    } @else {
+      <p class="p-10 text-center opacity-50">No content available.</p>
+    }
+  `, styles: [".link-btn{background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}.link-btn-featured{background-color:var(--mat-sys-tertiary-container);color:var(--mat-sys-on-tertiary-container)}.link-btn:hover,.link-btn-featured:hover{opacity:.92}\n"] }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=links-page.component.js.map

package/esm2022/lib/links-page/links-page.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"links-page.component.js","sourceRoot":"","sources":["../../../../../../libs/cms-ui/src/lib/links-page/links-page.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,MAAM,EACN,WAAW,GACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,MAAM,CAAC;AAC3B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;;AAI3D,MAAM,cAAc,GAAmC;IACrD,OAAO,EAAE,sBAAsB;IAC/B,MAAM,EAAE,qBAAqB;IAC7B,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,sBAAsB;IAC/B,MAAM,EAAE,qBAAqB;IAC7B,QAAQ,EAAE,0BAA0B;IACpC,SAAS,EAAE,wBAAwB;IACnC,MAAM,EAAE,qBAAqB;IAC7B,QAAQ,EAAE,uBAAuB;IACjC,KAAK,EAAE,sBAAsB;IAC7B,OAAO,EAAE,mBAAmB;CAC7B,CAAC;AA6DF,MAAM,OAAO,kBAAkB;IACZ,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAC/B,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACpB,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IAEzC,IAAI,GAAG,QAAQ,CACtB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAE,IAAI,CAAC,MAAM,CAAe,IAAI,IAAI,CAAC,CAAC,EACxE,EAAE,YAAY,EAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAe,IAAI,IAAI,EAAE,CAC1E,CAAC;IAEO,WAAW,GAAG,QAAQ,CAAc,GAAG,EAAE,CAChD,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,kFAClE,CAAC;IAEF,OAAO,CAAC,IAAe;QACrB,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC,IAAI,CAAC;QAChC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QAC9D,OAAO,EAAE,CAAC;IACZ,CAAC;IAED;QACE,MAAM,CAAC,GAAG,EAAE;YACV,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,CAAC;gBAAE,OAAO;YACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;gBAAE,OAAO;YAChD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;YAC7C,IAAI,CAAC,CAAC,GAAG,EAAE,WAAW,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;YAC3E,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC;YACxE,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;YAC9D,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;uGAvCU,kBAAkB;2FAAlB,kBAAkB,0EAzCnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCT,mUArDS,eAAe;;2FAuDd,kBAAkB;kBA3D9B,SAAS;+BACE,gBAAgB,cACd,IAAI,mBACC,uBAAuB,CAAC,MAAM,WACtC,CAAC,eAAe,CAAC,YAchB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCT","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  inject,\n  PLATFORM_ID,\n} from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { ActivatedRoute } from '@angular/router';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { map } from 'rxjs';\nimport { Meta, Title } from '@angular/platform-browser';\nimport { MatButtonModule } from '@angular/material/button';\nimport type { LinksPage, LinksLink } from '@foliokit/cms-core';\nimport type { SocialPlatform } from '@foliokit/cms-core';\n\nconst PLATFORM_ICONS: Record<SocialPlatform, string> = {\n  youtube: 'fa-brands fa-youtube',\n  twitch: 'fa-brands fa-twitch',\n  twitter: 'fa-brands fa-x-twitter',\n  bluesky: 'fa-brands fa-bluesky',\n  github: 'fa-brands fa-github',\n  linkedin: 'fa-brands fa-linkedin-in',\n  instagram: 'fa-brands fa-instagram',\n  tiktok: 'fa-brands fa-tiktok',\n  facebook: 'fa-brands fa-facebook',\n  email: 'fa-solid fa-envelope',\n  website: 'fa-solid fa-globe',\n};\n\n@Component({\n  selector: 'cms-links-page',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [MatButtonModule],\n  styles: [`\n    .link-btn {\n      background-color: var(--mat-sys-primary);\n      color: var(--mat-sys-on-primary);\n    }\n    .link-btn-featured {\n      background-color: var(--mat-sys-tertiary-container);\n      color: var(--mat-sys-on-tertiary-container);\n    }\n    .link-btn:hover, .link-btn-featured:hover {\n      opacity: 0.92;\n    }\n  `],\n  template: `\n    @if (page()) {\n      <div class=\"flex flex-col items-center max-w-md mx-auto px-4 py-12 gap-6\">\n        @if (page()!.avatarUrl) {\n          <img\n            class=\"w-24 h-24 rounded-full object-cover shadow-md\"\n            [src]=\"page()!.avatarUrl\"\n            [alt]=\"page()!.avatarAlt || page()!.title\"\n          />\n        }\n        @if (page()!.headline) {\n          <h1 class=\"text-2xl font-bold text-center\">{{ page()!.headline }}</h1>\n        }\n        @if (page()!.bio) {\n          <p class=\"text-center opacity-70\">{{ page()!.bio }}</p>\n        }\n        <nav class=\"flex flex-col w-full gap-3\">\n          @for (link of sortedLinks(); track link.id) {\n            <a\n              [href]=\"link.url\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [class]=\"link.highlighted ? 'link-btn-featured' : 'link-btn'\"\n              class=\"w-full flex items-center rounded-full px-5 !py-3 text-base font-medium transition-opacity no-underline\"\n            >\n              <span class=\"w-6 flex-shrink-0 text-lg leading-none\">\n                @if (getIcon(link)) {\n                  <i [class]=\"getIcon(link)\"></i>\n                }\n              </span>\n              <span class=\"flex-1 text-center\">{{ link.label }}</span>\n              <span class=\"w-6 flex-shrink-0\"></span>\n            </a>\n          }\n        </nav>\n      </div>\n    } @else {\n      <p class=\"p-10 text-center opacity-50\">No content available.</p>\n    }\n  `,\n})\nexport class LinksPageComponent {\n  private readonly route = inject(ActivatedRoute);\n  private readonly meta = inject(Meta);\n  private readonly title = inject(Title);\n  private readonly platformId = inject(PLATFORM_ID);\n\n  readonly page = toSignal(\n    this.route.data.pipe(map((data) => (data['page'] as LinksPage) ?? null)),\n    { initialValue: (this.route.snapshot.data['page'] as LinksPage) ?? null },\n  );\n\n  readonly sortedLinks = computed<LinksLink[]>(() =>\n    [...(this.page()?.links ?? [])].sort((a, b) => a.order - b.order),\n  );\n\n  getIcon(link: LinksLink): string {\n    if (link.icon) return link.icon;\n    if (link.platform) return PLATFORM_ICONS[link.platform] ?? '';\n    return '';\n  }\n\n  constructor() {\n    effect(() => {\n      const p = this.page();\n      if (!p) return;\n      if (!isPlatformBrowser(this.platformId)) return;\n      this.title.setTitle(p.seo?.title ?? p.title);\n      if (p.seo?.description) {\n        this.meta.updateTag({ name: 'description', content: p.seo.description });\n      }\n      if (p.seo?.ogImage) {\n        this.meta.updateTag({ property: 'og:image', content: p.seo.ogImage });\n      }\n      if (p.seo?.noIndex) {\n        this.meta.updateTag({ name: 'robots', content: 'noindex' });\n      } else {\n        this.meta.removeTag('name=\"robots\"');\n      }\n    });\n  }\n}\n"]}

package/esm2022/lib/route-data.js

@@ -0,0 +1,17 @@
+/**
+ * The route data key used by AboutPageComponent and LinksPageComponent
+ * to read their page from Angular Router resolved data.
+ *
+ * Use this constant in your route definition's `resolve` map so the key
+ * stays in sync with what the components expect:
+ *
+ * ```ts
+ * {
+ *   path: 'about',
+ *   component: AboutPageComponent,
+ *   resolve: { [CMS_ROUTE_DATA_KEY]: aboutPageResolver }
+ * }
+ * ```
+ */
+export const CMS_ROUTE_DATA_KEY = 'page';
+//# sourceMappingURL=route-data.js.map

package/esm2022/lib/route-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"route-data.js","sourceRoot":"","sources":["../../../../../libs/cms-ui/src/lib/route-data.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAe,CAAC","sourcesContent":["import type { AboutPage, LinksPage } from '@foliokit/cms-core';\n\n/**\n * The route data key used by AboutPageComponent and LinksPageComponent\n * to read their page from Angular Router resolved data.\n *\n * Use this constant in your route definition's `resolve` map so the key\n * stays in sync with what the components expect:\n *\n * ```ts\n * {\n *   path: 'about',\n *   component: AboutPageComponent,\n *   resolve: { [CMS_ROUTE_DATA_KEY]: aboutPageResolver }\n * }\n * ```\n */\nexport const CMS_ROUTE_DATA_KEY = 'page' as const;\n\n/**\n * Shape of the resolved route data expected by AboutPageComponent.\n * Use as the return type annotation on your resolver:\n *\n * ```ts\n * export const aboutPageResolver: ResolveFn<AboutPageRouteData[typeof CMS_ROUTE_DATA_KEY]> = ...\n * ```\n */\nexport interface AboutPageRouteData {\n  [CMS_ROUTE_DATA_KEY]: AboutPage | null;\n}\n\n/**\n * Shape of the resolved route data expected by LinksPageComponent.\n */\nexport interface LinksPageRouteData {\n  [CMS_ROUTE_DATA_KEY]: LinksPage | null;\n}\n"]}

package/index.d.ts

@@ -1,3 +1,6 @@
 export * from './lib/app-shell/app-shell.component';
 export * from './lib/theme.service';
 export * from './lib/shell-config.token';
+export * from './lib/about-page/about-page.component';
+export * from './lib/links-page/links-page.component';
+export * from './lib/route-data';

package/lib/about-page/about-page.component.d.ts

@@ -0,0 +1,12 @@
+import type { AboutPage } from '@foliokit/cms-core';
+import * as i0 from "@angular/core";
+export declare class AboutPageComponent {
+    private readonly route;
+    private readonly meta;
+    private readonly title;
+    private readonly platformId;
+    readonly page: import("@angular/core").Signal<AboutPage>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<AboutPageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AboutPageComponent, "cms-about-page", never, {}, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,14 @@
+import type { LinksPage, LinksLink } from '@foliokit/cms-core';
+import * as i0 from "@angular/core";
+export declare class LinksPageComponent {
+    private readonly route;
+    private readonly meta;
+    private readonly title;
+    private readonly platformId;
+    readonly page: import("@angular/core").Signal<LinksPage>;
+    readonly sortedLinks: import("@angular/core").Signal<LinksLink[]>;
+    getIcon(link: LinksLink): string;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<LinksPageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LinksPageComponent, "cms-links-page", never, {}, {}, never, never, true, never>;
+}

package/lib/route-data.d.ts

@@ -0,0 +1,34 @@
+import type { AboutPage, LinksPage } from '@foliokit/cms-core';
+/**
+ * The route data key used by AboutPageComponent and LinksPageComponent
+ * to read their page from Angular Router resolved data.
+ *
+ * Use this constant in your route definition's `resolve` map so the key
+ * stays in sync with what the components expect:
+ *
+ * ```ts
+ * {
+ *   path: 'about',
+ *   component: AboutPageComponent,
+ *   resolve: { [CMS_ROUTE_DATA_KEY]: aboutPageResolver }
+ * }
+ * ```
+ */
+export declare const CMS_ROUTE_DATA_KEY: "page";
+/**
+ * Shape of the resolved route data expected by AboutPageComponent.
+ * Use as the return type annotation on your resolver:
+ *
+ * ```ts
+ * export const aboutPageResolver: ResolveFn<AboutPageRouteData[typeof CMS_ROUTE_DATA_KEY]> = ...
+ * ```
+ */
+export interface AboutPageRouteData {
+    [CMS_ROUTE_DATA_KEY]: AboutPage | null;
+}
+/**
+ * Shape of the resolved route data expected by LinksPageComponent.
+ */
+export interface LinksPageRouteData {
+    [CMS_ROUTE_DATA_KEY]: LinksPage | null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foliokit/cms-ui",
-  "version": "0.4.2",
+  "version": "1.0.0",
   "description": "Angular shell layout components and theme service for FolioKit CMS",
   "keywords": [
     "angular",
@@ -22,12 +22,11 @@
     "@angular/common": "^21.2.4",
     "@angular/core": "^21.2.4",
     "@angular/material": "^21.2.2",
-    "@foliokit/cms-core": "^0.4.2"
-  },
-  "peerDependenciesMeta": {
-    "@foliokit/cms-core": {
-      "optional": true
-    }
+    "@angular/platform-browser": "^21.2.4",
+    "@angular/router": "^21.2.4",
+    "@foliokit/cms-core": "^1.0.0",
+    "ngx-markdown": "^21.1.0",
+    "rxjs": "~7.8.0"
   },
   "sideEffects": false,
   "module": "esm2022/foliokit-cms-ui.js",