handoff-app 2.0.0-8 → 2.0.0

package/src/app/pages/assets/fonts.tsx

@@ -1,129 +0,0 @@
-import * as fs from 'fs-extra';
-import uniq from 'lodash/uniq';
-import { FileArchive } from 'lucide-react';
-import type { GetStaticProps } from 'next';
-import Head from 'next/head';
-import path from 'path';
-import * as React from 'react';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import Footer from '../../components/Footer';
-import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
-import Header from '../../components/old/Header';
-import { buildTimeFoundationDesign, fetchDocPageMarkdown, FontDocumentationProps, getClientRuntimeConfig } from '../../components/util';
-import { useFoundationTokens } from '../../components/util/useFoundationTokens';
-
-const basePath = process.env.HANDOFF_APP_BASE_PATH ?? '';
-const isRegistry = process.env.HANDOFF_RUNTIME_MODE === 'registry';
-
-/**
- * This statically renders content from the markdown, creating menu and providing
- * metadata
- *
- * This is all done statically at build time
- * @param context GetStaticProps
- * @returns
- */
-export const getStaticProps: GetStaticProps = async () => {
-  // Workspace/static reads the mirrored font archives; a registry build has none (hydrated at runtime).
-  const customFonts: string[] = [];
-  try {
-    const fontDir = path.resolve(process.env.HANDOFF_MODULE_PATH ?? '', '.handoff', `${process.env.HANDOFF_PROJECT_ID}`, 'public', 'fonts');
-    for (const font of fs.readdirSync(fontDir)) {
-      if (font.endsWith('.zip')) customFonts.push(font.replace('.zip', ''));
-    }
-  } catch {
-    // No local font archives (e.g. a registry build), so customFonts stays empty.
-  }
-
-  return {
-    props: {
-      ...(await fetchDocPageMarkdown('docs/assets/', 'fonts', `/assets`)).props,
-      design: buildTimeFoundationDesign(),
-      config: getClientRuntimeConfig(),
-      customFonts,
-    },
-  };
-};
-
-const FontsPage = ({ content, menu, metadata, customFonts, design, config }: FontDocumentationProps) => {
-  // Registry hydrates typography tokens (for the family list) + the published font archives at runtime.
-  const tokens = useFoundationTokens('typography', { design });
-  const [hydratedFonts, setHydratedFonts] = React.useState<string[]>(customFonts);
-  React.useEffect(() => {
-    if (!isRegistry) return;
-    let active = true;
-    fetch(`${basePath}/api/docs/assets/fonts`)
-      .then((res) => (res.ok ? res.json() : null))
-      .then((data) => {
-        if (!active || !data?.assets) return;
-        const names = (data.assets as { path: string }[])
-          .filter((a) => typeof a.path === 'string' && /^fonts\/.+\.zip$/i.test(a.path))
-          .map((a) => a.path.slice('fonts/'.length).replace(/\.zip$/i, ''));
-        setHydratedFonts(names);
-      })
-      .catch(() => {});
-    return () => {
-      active = false;
-    };
-  }, []);
-
-  const typography = tokens.design?.typography ?? [];
-  const fontFamilies: string[] = uniq(typography.map((type) => type.values.fontFamily));
-  const fontLinks: string[] = fontFamilies.map((fontFamily) => {
-    const machineName = fontFamily.replace(/\s/g, '');
-    const custom = hydratedFonts.find((font) => font === machineName);
-    if (custom) {
-      return isRegistry ? `${basePath}/api/docs/assets/fonts/fonts/${machineName}.zip` : `/fonts/${machineName}.zip`;
-    }
-    return `https://fonts.google.com/specimen/${fontFamily}`;
-  });
-  return (
-    <div className="c-page">
-      <Head>
-        <title>{metadata.metaTitle}</title>
-        <meta name="description" content={metadata.metaDescription} />
-      </Head>
-      <Header config={config} />
-      <section className="c-content">
-        <div className="o-container-fluid">
-          <div className="c-hero">
-            <div>
-              <h1>{metadata.title}</h1>
-              <p>{metadata.description}</p>
-            </div>
-          </div>
-          {fontFamilies.map((fontFamily, i) => (
-            <React.Fragment key={fontFamily}>
-              <div className="o-row u-justify-between">
-                <div className="o-col-5@md">
-                  <h4>{fontFamily}</h4>
-                </div>
-                <div className="o-col-6@md">
-                  <div className="c-card">
-                    <FileArchive />
-                    <h4>{fontFamily}</h4>
-                    <p>Font files for installing on a local machine.</p>
-                    <p>
-                      <a href={fontLinks[i]}>Download Font</a>
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <hr />
-            </React.Fragment>
-          ))}
-
-          <div className="prose">
-            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
-              {content}
-            </ReactMarkdown>
-          </div>
-        </div>
-      </section>
-      <Footer config={config} />
-    </div>
-  );
-};
-export default FontsPage;

package/src/app/pages/assets/index.tsx

@@ -1,91 +0,0 @@
-import { File, FileArchive } from 'lucide-react';
-import type { GetStaticProps } from 'next';
-import Head from 'next/head';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import Footer from '../../components/Footer';
-import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
-import NavLink from '../../components/NavLink';
-import Header from '../../components/old/Header';
-import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from '../../components/util';
-
-/**
- * This statically renders content from the markdown, creating menu and providing
- * metadata
- *
- * This is all done statically at build time
- * @param context GetStaticProps
- * @returns
- */
-export const getStaticProps: GetStaticProps = async () => {
-  return {
-    props: {
-      ...(await fetchDocPageMarkdown('docs/', 'assets', `/assets`)).props,
-      config: getClientRuntimeConfig(),
-    },
-  };
-};
-
-const AssetsPage = ({ content, menu, metadata, config }: DocumentationProps) => {
-  return (
-    <div className="c-page">
-      <Head>
-        <title>{metadata.metaTitle}</title>
-        <meta name="description" content={metadata.metaDescription} />
-      </Head>
-      <Header config={config} />
-      <section className="c-content">
-        <div className="o-container-fluid">
-          <div className="c-hero c-hero--boxed c-hero--bg-red">
-            <div>
-              <h1 className="c-title--extra-large">{metadata.title}</h1>
-              <p>{metadata.description}</p>
-            </div>
-          </div>
-
-          <div className="o-row">
-            <div className="o-col-6@md">
-              <div className="c-card">
-                <FileArchive />
-                <h4>Logos</h4>
-                <p>Official logo used for all digital and offline materials.</p>
-                <p>
-                  <NavLink href="/assets/logos">View Logos</NavLink>
-                </p>
-              </div>
-            </div>
-            <div className="o-col-6@md">
-              <div className="c-card">
-                <FileArchive />
-                <h4>Fonts</h4>
-                <p>Font family and weights for all {config?.app?.client} visuals.</p>
-                <p>
-                  <NavLink href="/assets/fonts">View Fonts</NavLink>
-                </p>
-              </div>
-            </div>
-            <div className="o-col-6@md">
-              <div className="c-card">
-                <File />
-                <h4>Iconography</h4>
-                <p>Library of approved vector iconography.</p>
-                <p>
-                  <NavLink href="/assets/icons">View Icons</NavLink>
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="prose">
-            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
-              {content}
-            </ReactMarkdown>
-          </div>
-        </div>
-      </section>
-      <Footer config={config} />
-    </div>
-  );
-};
-export default AssetsPage;

package/src/app/pages/assets/logos.tsx

@@ -1,75 +0,0 @@
-import { FileArchive } from 'lucide-react';
-import type { GetStaticProps } from 'next';
-import Head from 'next/head';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import Footer from '../../components/Footer';
-import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
-import { buildAssetDownloadUrl } from '@handoff/artifacts/url';
-import Header from '../../components/old/Header';
-import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from '../../components/util';
-
-/**
- * This statically renders content from the markdown, creating menu and providing
- * metadata
- *
- * This is all done statically at build time
- * @param context GetStaticProps
- * @returns
- */
-export const getStaticProps: GetStaticProps = async () => {
-  return {
-    props: {
-      ...(await fetchDocPageMarkdown('docs/assets/', 'logos', `/assets`)).props,
-      config: getClientRuntimeConfig(),
-    },
-  };
-};
-
-const AssetsLogosPage = ({ content, menu, metadata, config }: DocumentationProps) => {
-  return (
-    <div className="c-page">
-      <Head>
-        <title>{metadata.metaTitle}</title>
-        <meta name="description" content={metadata.metaDescription} />
-      </Head>
-      <Header config={config} />
-      <section className="c-content">
-        <div className="o-container-fluid">
-          <div className="c-hero">
-            <div>
-              <h1>{metadata.title}</h1>
-              <p>{metadata.description}</p>
-            </div>
-          </div>
-          <div className="o-row u-justify-between">
-            <div className="o-col-5@md">
-              <h4>{config?.app?.client} Logo</h4>
-            </div>
-            <div className="o-col-6@md">
-              <div className="c-card">
-                <FileArchive />
-                <h4>{config?.app?.client} Logo</h4>
-                <p>Vector files of approved {config?.app?.client} logos.</p>
-                <p>
-                  <a href={config?.assets_zip_links?.logos ?? buildAssetDownloadUrl('logos', process.env.HANDOFF_APP_BASE_PATH)} download>
-                    Download Logos
-                  </a>
-                </p>
-              </div>
-            </div>
-          </div>
-          <div className="prose">
-            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
-              {content}
-            </ReactMarkdown>
-          </div>
-          <hr />
-        </div>
-      </section>
-      <Footer config={config} />
-    </div>
-  );
-};
-export default AssetsLogosPage;

package/src/config/validator.ts

@@ -1,22 +0,0 @@
-import { ResolvedConfig } from '../types/config';
-import { Logger } from '../utils/logger';
-
-/**
- * Validates that the configuration has the required Figma credentials.
- *
- * @param config - The config to validate.
- * @returns The validated config (same reference).
- * @throws {Error} If required Figma credentials are missing.
- */
-export const validateConfig = (config: ResolvedConfig): ResolvedConfig => {
-  // TODO: Check to see if the exported folder exists before we run start
-  if (!config.figma_project_id) {
-    Logger.error('Figma Project ID missing. Please set HANDOFF_FIGMA_PROJECT_ID or run "handoff-app fetch".');
-    throw new Error('Cannot initialize configuration');
-  }
-  if (!config.dev_access_token) {
-    Logger.error('Figma Access Token missing. Please set HANDOFF_DEV_ACCESS_TOKEN or run "handoff-app fetch".');
-    throw new Error('Cannot initialize configuration');
-  }
-  return config;
-};

package/src/registry/asset-storage/adapters/vercel-blob.ts

@@ -1,51 +0,0 @@
-/**
- * Pre-packaged Vercel Blob asset storage adapter.
- *
- * Ships with Handoff and is selected via `runtime.registry.assetStorage.adapter: "vercel-blob"`. The
- * read/write token is read from `process.env[tokenEnv]` at request time (never persisted in config).
- * Blobs are stored public and content-addressed by hash, so reads resolve to a direct provider URL
- * (a `redirect` result), keeping large payloads out of the serverless function body/response.
- *
- * The `@vercel/blob` SDK is loaded lazily so it is only pulled into memory (and traced into the
- * registry bundle) when this adapter is actually used.
- */
-
-import type { AssetStorage } from '../types';
-
-/** Build a Vercel Blob storage adapter bound to a token env-var name + non-secret options. */
-export const createVercelBlobStorage = (params: { tokenEnv: string; options: Record<string, unknown> }): AssetStorage => {
-  const prefix = typeof params.options.prefix === 'string' && params.options.prefix.trim() ? params.options.prefix.trim() : 'handoff/assets';
-
-  const resolveToken = (): string => {
-    const token = process.env[params.tokenEnv]?.trim();
-    if (!token) {
-      throw new Error(
-        `Vercel Blob storage is configured but the token env var "${params.tokenEnv}" is not set. ` +
-          'Set it to a Blob read/write token, or change runtime.registry.assetStorage.token.'
-      );
-    }
-    return token;
-  };
-
-  return {
-    async put({ hash, bytes, contentType }) {
-      const { put } = await import('@vercel/blob');
-      // Content-addressed pathname + no random suffix so the same bytes map to a stable, dedupable key.
-      const result = await put(`${prefix}/${hash}`, bytes, {
-        access: 'public',
-        token: resolveToken(),
-        contentType,
-        addRandomSuffix: false,
-      });
-      return { storageRef: result.url };
-    },
-    async get(storageRef) {
-      // Public blob URLs are directly fetchable; redirect the client to avoid proxying bytes.
-      return { kind: 'redirect', url: storageRef };
-    },
-    async delete(storageRef) {
-      const { del } = await import('@vercel/blob');
-      await del(storageRef, { token: resolveToken() });
-    },
-  };
-};