@leadertechie/personal-site-kit 0.1.0-alpha.2 → 0.1.0-alpha.20

package/src/api/handlers/static-details.ts

@@ -1,48 +0,0 @@
-const DEFAULT_STATIC_DETAILS = {
-  siteTitle: "My Personal Website",
-  copyright: "2026 My Personal Website",
-  linkedin: "https://linkedin.com/in/yourname",
-  github: "https://github.com/yourname",
-  email: "yourname@domain.com"
-};
-
-export async function handleStaticDetails(env?: any, method?: string, body?: any): Promise<Response> {
-  try {
-    if (!env?.CONTENT_BUCKET) {
-      return new Response(JSON.stringify(DEFAULT_STATIC_DETAILS), {
-        headers: { 'Content-Type': 'application/json' },
-      });
-    }
-
-    // GET - return static details
-    if (!method || method === 'GET') {
-      const staticDetails = await env.CONTENT_BUCKET.get('staticdetails.json');
-      if (staticDetails) {
-        const data = await staticDetails.json();
-        return new Response(JSON.stringify({ ...DEFAULT_STATIC_DETAILS, ...data }), {
-          headers: { 
-            'Content-Type': 'application/json',
-            'Access-Control-Allow-Origin': '*'
-          },
-        });
-      }
-      return new Response(JSON.stringify(DEFAULT_STATIC_DETAILS), {
-        headers: { 
-          'Content-Type': 'application/json',
-          'Access-Control-Allow-Origin': '*'
-        },
-      });
-    }
-
-    // PUT - save static details (handled in content handler)
-    return new Response(JSON.stringify({ error: 'Use content endpoint for PUT' }), {
-      status: 400,
-      headers: { 'Content-Type': 'application/json' },
-    });
-  } catch (error) {
-    console.error('Error serving static details:', error);
-    return new Response(JSON.stringify(DEFAULT_STATIC_DETAILS), {
-      headers: { 'Content-Type': 'application/json' },
-    });
-  }
-}

package/src/api/index.ts

@@ -1,7 +0,0 @@
-import { WebsiteAPI } from './website-api';
-export { WebsiteAPI };
-export type { APIHandler } from './website-api';
-
-// Default worker export using WebsiteAPI
-const defaultAPI = new WebsiteAPI();
-export default defaultAPI;

package/src/api/utils.ts

@@ -1,16 +0,0 @@
-export interface APIResponse {
-  data?: any;
-  error?: string;
-  status: number;
-}
-
-export function createJSONResponse(data: any, status: number = 200): Response {
-  return new Response(JSON.stringify(data), {
-    status,
-    headers: { 'Content-Type': 'application/json' },
-  });
-}
-
-export function createErrorResponse(message: string, status: number = 500): Response {
-  return createJSONResponse({ error: message }, status);
-}

package/src/api/website-api.ts

@@ -1,124 +0,0 @@
-import { createErrorResponse } from './utils';
-import { handleAboutMe, clearContentCache } from './handlers/about-me';
-import { handleHome } from './handlers/home';
-import { handleInfo } from './handlers/info';
-import { handleContent } from './handlers/content';
-import { handleBlogs, handleStories, handleSearch } from './handlers/content-api';
-import { handleLogo } from './handlers/logo';
-import { handleStaticDetails } from './handlers/static-details';
-
-export type APIHandler = (request: Request, env: any) => Promise<Response>;
-
-export class WebsiteAPI {
-  private customHandlers = new Map<string, APIHandler>();
-
-  public registerHandler(route: string, handler: APIHandler) {
-    this.customHandlers.set(route, handler);
-  }
-
-  private addCORSHeaders(response: Response): Response {
-    response.headers.set('Access-Control-Allow-Origin', '*' );
-    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS' );
-    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
-    return response;
-  }
-
-  private handleCORS(): Response {
-    return new Response(null, {
-      status: 200,
-      headers: {
-        'Access-Control-Allow-Origin': '*' ,
-        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS' ,
-        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
-        'Access-Control-Max-Age': '86400',
-      },
-    });
-  }
-
-  private requireAuth(request: Request, env?: any): Response | null {
-    const authHeader = request.headers.get('Authorization');
-    if (!authHeader || !authHeader.startsWith('Bearer ')) {
-      return createErrorResponse('Unauthorized', 401);
-    }
-    const token = authHeader.slice(7);
-    if (token !== env?.ADMIN_API_KEY) {
-      return createErrorResponse('Unauthorized', 401);
-    }
-    return null;
-  }
-
-  public async fetch(request: Request, env: any): Promise<Response> {
-    const url = new URL(request.url);
-
-    if (request.method === 'OPTIONS') {
-      return this.handleCORS();
-    }
-
-    const pathname = url.pathname;
-    const route = pathname
-      .replace(/^\/api\//, '')
-      .replace(/^\//, '')
-      .replace(/\/+$/, '');
-
-    // Check custom handlers first
-    if (this.customHandlers.has(route)) {
-      const handler = this.customHandlers.get(route)!;
-      return this.addCORSHeaders(await handler(request, env));
-    }
-
-    try {
-      // Check for content route first (content/*)
-      if (route === 'content' || route.startsWith('content/')) {
-        const subpath = route.replace(/^content\/?/, '');
-        return this.addCORSHeaders(await handleContent(request, env, subpath));
-      }
-
-      switch (route) {
-        case 'info':
-          return this.addCORSHeaders(await handleInfo());
-        case 'home':
-          return this.addCORSHeaders(await handleHome(env));
-        case 'cache-clear':
-          const authError = this.requireAuth(request, env);
-          if (authError) return this.addCORSHeaders(authError);
-          clearContentCache();
-          return this.addCORSHeaders(new Response(JSON.stringify({ success: true, message: 'Cache cleared' }), { status: 200 }));
-        case 'aboutme':
-          return this.addCORSHeaders(await handleAboutMe(env));
-        case 'logo':
-          return this.addCORSHeaders(await handleLogo(env));
-        case 'static':
-          return this.addCORSHeaders(await handleStaticDetails(env));
-        case 'blogs':
-          return this.addCORSHeaders(await handleBlogs(env));
-        case 'blogs/latest':
-          const latestCount = url.searchParams.get('count');
-          return this.addCORSHeaders(await handleBlogs(env, undefined, latestCount ? parseInt(latestCount) : 5));
-        default:
-          if (route.startsWith('blogs/')) {
-            const slug = route.replace('blogs/', '');
-            return this.addCORSHeaders(await handleBlogs(env, slug));
-          }
-          if (route.startsWith('stories')) {
-            if (route === 'stories') {
-              return this.addCORSHeaders(await handleStories(env));
-            }
-            if (route === 'stories/latest') {
-              const latestCount = url.searchParams.get('count');
-              return this.addCORSHeaders(await handleStories(env, undefined, latestCount ? parseInt(latestCount) : 5));
-            }
-            const slug = route.replace('stories/', '');
-            return this.addCORSHeaders(await handleStories(env, slug));
-          }
-          if (route === 'search') {
-            const query = url.searchParams.get('q');
-            return this.addCORSHeaders(await handleSearch(env, query || undefined));
-          }
-          return this.addCORSHeaders(createErrorResponse('Route not found', 404));
-      }
-    } catch (error) {
-      console.error('API Error:', error);
-      return this.addCORSHeaders(createErrorResponse('Internal server error', 500));
-    }
-  }
-}

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from './api';
-export * from './prerender';
-export * from './ui';
-export * from './shared';

package/src/prerender/__tests__/page-content.test.ts

@@ -1,54 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { generatePageContent } from '../page-content';
-
-describe('generatePageContent', () => {
-  const mockRoutes = [
-    { link: '/', text: 'Home' },
-    { link: '/about-me', text: 'About' }
-  ];
-  const mockFooterLinks = [
-    { text: 'Link', href: '#' }
-  ];
-  const mockEnv = {
-    CONTENT_BUCKET: {
-      get: vi.fn().mockResolvedValue({
-        json: () => Promise.resolve({ name: 'User', title: 'Professional', experience: 'some' })
-      }),
-      list: vi.fn().mockResolvedValue({ objects: [] })
-    },
-    apiUrl: 'https://api.example.com',
-    baseUrl: 'https://www.example.com'
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    global.fetch = vi.fn().mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve({ siteTitle: 'My Site', copyright: '2026' })
-    });
-  });
-
-  it('should generate home page content', async () => {
-    const result = await generatePageContent('/', mockRoutes, mockFooterLinks, mockEnv);
-
-    expect(result.title).toContain('User');
-    expect(result.canonicalUrl).toBe('https://www.example.com/');
-    expect(result.content).toContain('<my-banner');
-  });
-
-  it('should generate about-me page content', async () => {
-    const result = await generatePageContent('/about-me', mockRoutes, mockFooterLinks, mockEnv);
-
-    expect(result.title).toContain('About');
-    expect(result.canonicalUrl).toBe('https://www.example.com/about-me');
-    expect(result.content).toContain('<my-aboutme');
-  });
-
-  it('should generate 404 page content', async () => {
-    const result = await generatePageContent('/non-existent', mockRoutes, mockFooterLinks, mockEnv);
-
-    expect(result.title).toContain('Not Found');
-    expect(result.canonicalUrl).toBe('https://www.example.com/non-existent');
-    expect(result.content).toContain('Page Not Found');
-  });
-});

package/src/prerender/__tests__/template.test.ts

@@ -1,54 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { createHtmlTemplate } from '../template';
-
-describe('createHtmlTemplate', () => {
-  it('should generate complete HTML template', async () => {
-    const props = {
-      title: 'Test Title',
-      description: 'Test Description',
-      canonicalUrl: 'https://example.com/test',
-      content: '<main>Test Content</main>'
-    };
-
-    const html = await createHtmlTemplate(props);
-
-    expect(html).toContain('<!doctype html>');
-    expect(html).toContain('<title>Test Title</title>');
-    expect(html).toContain('<meta name="description" content="Test Description" />');
-    expect(html).toContain('<meta property="og:title" content="Test Title" />');
-    expect(html).toContain('<link rel="canonical" href="https://example.com/test" />');
-    expect(html).toContain('<main>Test Content</main>');
-  });
-
-  it('should escape HTML entities properly', async () => {
-    const props = {
-      title: 'Test & Title',
-      description: 'Test "Description"',
-      canonicalUrl: 'https://example.com/test',
-      content: '<main>Test Content</main>'
-    };
-
-    const html = await createHtmlTemplate(props);
-
-    expect(html).toContain('<title>Test & Title</title>');
-    expect(html).toContain('<meta name="description" content="Test "Description"" />');
-  });
-
-  it('should have proper HTML structure', async () => {
-    const props = {
-      title: 'Test',
-      description: 'Test',
-      canonicalUrl: 'https://example.com',
-      content: '<div>Content</div>'
-    };
-
-    const html = await createHtmlTemplate(props);
-
-    expect(html).toMatch(/^<!doctype html>/);
-    expect(html).toContain('<html lang="en" data-theme="light">');
-    expect(html).toContain('<head>');
-    expect(html).toContain('<body>');
-    expect(html).toContain('<div id="app">');
-    expect(html).toContain('</html>');
-  });
-});

package/src/prerender/index.ts

@@ -1,7 +0,0 @@
-import { WebsitePrerender } from './website-prerender';
-export { WebsitePrerender };
-export type { PrerenderOptions } from './website-prerender';
-
-// Default worker export using WebsitePrerender
-const defaultPrerender = new WebsitePrerender();
-export default defaultPrerender;

package/src/prerender/page-content.ts

@@ -1,263 +0,0 @@
-import { R2ContentLoader } from "@leadertechie/r2tohtml";
-
-interface Profile {
-  name: string;
-  title: string;
-  experience: string;
-  profileImageUrl: string;
-}
-
-export interface IRoute {
-  text: string;
-  link: string;
-}
-
-export interface IFooterLink {
-  text: string;
-  link: string;
-}
-
-export interface PageContent {
-  title: string;
-  description: string;
-  canonicalUrl: string;
-  content: string;
-}
-
-interface BlogMeta {
-  slug: string;
-  title: string;
-  summary: string;
-  tags: string[];
-  date: string;
-}
-
-let loader: R2ContentLoader | null = null;
-
-function getLoader(env: any): R2ContentLoader | null {
-  if (!loader) {
-    if (!env?.CONTENT_BUCKET) return null;
-    loader = new R2ContentLoader(
-      { bucket: env.CONTENT_BUCKET, cacheTTL: 5 * 60 * 1000 },
-      { md2html: { imagePathPrefix: "images/", styleOptions: { classPrefix: "md-", addHeadingIds: true } } }
-    );
-  }
-  return loader;
-}
-
-async function fetchProfile(env: any): Promise<Profile | null> {
-  try {
-    const r2 = getLoader(env);
-    if (!r2) return null;
-    const obj = await r2.getObject("profile.json");
-    if (!obj) return null;
-    return await obj.json() as Profile;
-  } catch { return null; }
-}
-
-async function fetchAboutMe(env: any): Promise<string> {
-  try {
-    const r2 = getLoader(env);
-    if (!r2) return "";
-    const result = await r2.getRendered("about-me.md");
-    return result?.content || "";
-  } catch { return ""; }
-}
-
-async function fetchHome(env: any): Promise<string> {
-  try {
-    const r2 = getLoader(env);
-    if (!r2) return "";
-    const result = await r2.getRendered("home.md");
-    return result?.content || "";
-  } catch { return ""; }
-}
-
-async function fetchLatestBlogSummaries(env: any, count: number = 3): Promise<BlogMeta[]> {
-  try {
-    const r2 = getLoader(env);
-    if (!r2) return [];
-    const list = await r2.list("blogs/");
-    const metas: BlogMeta[] = [];
-    for (const obj of list.objects) {
-      if (obj.key.endsWith(".json")) {
-        try {
-          const metaObj = await r2.getObject(obj.key);
-          if (metaObj) metas.push(await metaObj.json() as BlogMeta);
-        } catch {}
-      }
-    }
-    return metas.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()).slice(0, count);
-  } catch { return []; }
-}
-
-async function fetchLatestStorySummaries(env: any, count: number = 3): Promise<BlogMeta[]> {
-  try {
-    const r2 = getLoader(env);
-    if (!r2) return [];
-    const list = await r2.list("stories/");
-    const metas: BlogMeta[] = [];
-    for (const obj of list.objects) {
-      if (obj.key.endsWith(".json")) {
-        try {
-          const metaObj = await r2.getObject(obj.key);
-          if (metaObj) metas.push(await metaObj.json() as BlogMeta);
-        } catch {}
-      }
-    }
-    return metas.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()).slice(0, count);
-  } catch { return []; }
-}
-
-export const generatePageContent = async (
-  pathname: string,
-  routes: IRoute[],
-  footerLinks: IFooterLink[],
-  env?: any
-): Promise<PageContent> => {
-  const apiUrl = env?.apiUrl || "https://api.techieleader.com";
-  const baseUrl = env?.baseUrl || "https://www.techieleader.com";
-  
-  let staticDetails = {
-    siteTitle: "My Personal Website",
-    copyright: "2026 My Personal Website",
-    linkedin: "https://linkedin.com/in/yourname",
-    github: "https://github.com/yourname",
-    email: "yourname@domain.com"
-  };
-  
-  try {
-    const res = await fetch(`${apiUrl}/api/static`);
-    if (res.ok) staticDetails = await res.json();
-  } catch (e) {}
-  
-  const logo = "/api/logo";
-  const navLinks = routes.map(r => `<a href="${r.link}" class="nav-link" data-route="${r.link === "/" ? "home" : r.text.toLowerCase()}">${r.text}</a>`).join("");
-
-  const bannerTemplate = `
-    <my-banner header="${staticDetails.siteTitle}" logo="${logo}">
-      <theme-toggle slot="theme-switcher"></theme-toggle>
-      <nav slot="nav-links">
-        ${navLinks}
-      </nav>
-    </my-banner>`;
-
-  const footerTemplate = `
-    <my-footer
-      copyright="${staticDetails.copyright}"
-      footerlinks='${JSON.stringify(footerLinks)}'>
-    </my-footer>`;
-
-  let profile: Profile | null = null;
-  let aboutMeContent = "";
-  let homeContent = "";
-  let latestBlogs: BlogMeta[] = [];
-  let latestStories: BlogMeta[] = [];
-
-  if (env?.CONTENT_BUCKET) {
-    [profile, aboutMeContent, homeContent, latestBlogs, latestStories] = await Promise.all([
-      fetchProfile(env), fetchAboutMe(env), fetchHome(env), fetchLatestBlogSummaries(env, 3), fetchLatestStorySummaries(env, 3)
-    ]);
-  }
-
-  const name = profile?.name || "User";
-  const title = profile?.title || "Professional";
-  const experience = profile?.experience || "some";
-  const canonicalUrl = new URL(pathname, baseUrl).toString();
-
-  if (pathname === "/" || pathname === "") {
-    const homeHtml = homeContent || `<h1>Welcome to ${name}</h1><p>Upload home.md to customize this page.</p>`;
-    const blogGists = latestBlogs.map(b => `<div class="gist-card"><a href="/blogs/${b.slug}"><h4>${b.title}</h4></a><p>${b.summary}</p><small>${b.date}</small></div>`).join("");
-    const storyGists = latestStories.map(s => `<div class="gist-card"><a href="/stories/${s.slug}"><h4>${s.title}</h4></a><p>${s.summary}</p><small>${s.date}</small></div>`).join("");
-
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-wide column-layout">
-      <div class="main-column">
-        ${homeHtml}
-      </div>
-      <div class="sidebar-column">
-        <h3>Recent Blogs</h3>
-        ${blogGists || "<p>No blogs yet.</p>"}
-        <h3 class="mt-2">Recent Stories</h3>
-        ${storyGists || "<p>No stories yet.</p>"}
-      </div>
-    </main>
-    ${footerTemplate}`;
-
-    return {
-      title: `${name} – ${title}`,
-      description: `Welcome to ${name}'s personal website. Professional portfolio and content.`,
-      canonicalUrl,
-      content: mainContent
-    };
-  } else if (pathname === "/about-me") {
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-narrow">
-        <my-aboutme base-url="${apiUrl}"></my-aboutme>
-      </main>
-      ${footerTemplate}`;
-
-    return {
-      title: `About - ${name}`,
-      description: `Learn more about ${name}'s experience and skills.`,
-      canonicalUrl,
-      content: mainContent
-    };
-  } else if (pathname === "/blogs" || pathname === "/blogs/") {
-    const blogGists = latestBlogs.map(b => `<div class="gist-card"><a href="/blogs/${b.slug}"><h4>${b.title}</h4></a><p>${b.summary}</p><small>${b.date}</small></div>`).join("");
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-wide">
-      <h1>Blogs</h1>
-      <input type="text" placeholder="Search blogs..." class="search-input" />
-      <div class="blog-list">
-        ${blogGists || "<p>No blogs yet.</p>"}
-      </div>
-    </main>
-    ${footerTemplate}`;
-    return { title: `Blogs – ${name}`, description: "Read the latest blog posts.", canonicalUrl, content: mainContent };
-  } else if (pathname === "/stories" || pathname === "/stories/") {
-    const storyGists = latestStories.map(s => `<div class="gist-card"><a href="/stories/${s.slug}"><h4>${s.title}</h4></a><p>${s.summary}</p><small>${s.date}</small></div>`).join("");
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-wide">
-      <h1>Stories</h1>
-      <input type="text" placeholder="Search stories..." class="search-input" />
-      <div class="story-list">
-        ${storyGists || "<p>No stories yet.</p>"}
-      </div>
-    </main>
-    ${footerTemplate}`;
-    return { title: `Stories – ${name}`, description: "Read the latest stories.", canonicalUrl, content: mainContent };
-  } else if (pathname.startsWith("/blogs/")) {
-    const slug = pathname.replace("/blogs/", "").replace("/", "");
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-narrow">
-      <my-blog-viewer slug="${slug}"></my-blog-viewer>
-    </main>
-    ${footerTemplate}`;
-    return { title: `Blog: ${slug}`, description: "Blog post", canonicalUrl, content: mainContent };
-  } else if (pathname.startsWith("/stories/")) {
-    const slug = pathname.replace("/stories/", "").replace("/", "");
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-narrow">
-      <my-story-viewer slug="${slug}"></my-story-viewer>
-    </main>
-    ${footerTemplate}`;
-    return { title: `Story: ${slug}`, description: "Story post", canonicalUrl, content: mainContent };
-  } else {
-    const mainContent = `
-    ${bannerTemplate}
-    <main class="container container-narrow text-center">
-        <h1>Page Not Found</h1>
-        <p>The page you're looking for doesn't exist.</p>
-        <p><a href="/">Return to home</a></p>
-      </main>
-      ${footerTemplate}`;
-    return { title: "404 Not Found", description: "The page you requested could not be found.", canonicalUrl, content: mainContent };
-  }
-};

package/src/prerender/prerender.ts

@@ -1,25 +0,0 @@
-// Minimal prerender AST->HTML utility
-export function renderFromAst(ast: any): string {
-  if (!ast) return '';
-  if (ast.type === 'document' && Array.isArray(ast.children)) {
-    return ast.children.map(renderFromAst).join('\n');
-  }
-  if (ast.type === 'heading') {
-    const level = Math.max(1, Math.min(6, ast.depth || 1));
-    const inner = Array.isArray(ast.children) ? ast.children.map(renderFromAst).join('') : '';
-    return `<h${level}>${inner}</h${level}>`;
-  }
-  if (ast.type === 'paragraph') {
-    const inner = Array.isArray(ast.children) ? ast.children.map(renderFromAst).join('') : '';
-    return `<p>${inner}</p>`;
-  }
-  if (ast.type === 'text') {
-    return ast.value || '';
-  }
-  if (ast.children) {
-    return ast.children.map(renderFromAst).join('');
-  }
-  return '';
-}
-
-export default renderFromAst

package/src/prerender/template.ts

@@ -1,65 +0,0 @@
-export interface TemplateProps {
-  title: string;
-  description: string;
-  canonicalUrl: string;
-  content: string;
-  hydrationData?: string;
-  baseSiteUrl?: string;
-}
-
-async function getAssetPaths(baseSiteUrl: string): Promise<{ js: string; css: string }> {
-  const assetsUrl = `${baseSiteUrl}/cdn-assets.json`;
-  try {
-    const res = await fetch(assetsUrl);
-    if (res.ok) {
-      const data = await res.json();
-      return { js: data.js, css: data.css };
-    }
-  } catch (e) {}
-  
-  try {
-    const res = await fetch(`${baseSiteUrl}/?t=${Date.now()}`);
-    const html = await res.text();
-    const jsMatch = html.match(/src="(\/assets\/index-[^"]+\.js)"/);
-    const cssMatch = html.match(/href="(\/assets\/index-[^"]+\.css)"/);
-    return { 
-      js: jsMatch ? jsMatch[1] : "/assets/index.js", 
-      css: cssMatch ? cssMatch[1] : "/assets/index.css" 
-    };
-  } catch (e) {}
-  return { js: "/assets/index.js", css: "/assets/index.css" };
-}
-
-export const createHtmlTemplate = async ({
-  title,
-  description,
-  canonicalUrl,
-  content,
-  hydrationData = "",
-  baseSiteUrl = ""
-}: TemplateProps): Promise<string> => {
-  const { js: jsAsset, css: cssAsset } = await getAssetPaths(baseSiteUrl);
-  
-  return `<!doctype html>
-<html lang="en" data-theme="light">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/api/logo" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>${title}</title>
-    <meta name="description" content="${description}" />
-    <meta property="og:title" content="${title}" />
-    <meta property="og:description" content="${description}" />
-    <meta property="og:url" content="${canonicalUrl}" />
-    <link rel="canonical" href="${canonicalUrl}" />
-    <link rel="stylesheet" crossorigin href="${cssAsset}" />
-    <script type="module" crossorigin src="${jsAsset}"></script>
-  </head>
-  <body>
-    ${hydrationData}
-    <div id="app">
-      ${content}
-    </div>
-  </body>
-</html>`;
-};