@lettercamp/cli 0.1.6 → 0.1.7

package/renderer/src/components/BlogHome.astro

@@ -0,0 +1,80 @@
+---
+import PostCard from './PostCard.astro';
+import { getPosts } from '../lib/posts.js';
+const { site } = Astro.props;
+const posts = getPosts(site.language);
+const categories = [...new Set(posts.map(post => post.category).filter(Boolean))];
+const showCategories = posts.length > 1 && categories.length > 0;
+const featuredLimit = 9;
+---
+
+<div class="blog-home" data-blog-home>
+  <header class="blog-heading">
+    <h1>{site.homeTitle ?? `${site.name} Blog`}</h1>
+    {site.description && <p class="description" style="margin-top: 12px">{site.description}</p>}
+  </header>
+  {showCategories && <nav class="category-selector" aria-label="Filter posts by category">
+    <a href="/" data-category="" aria-current="page">All posts</a>
+    {categories.map(category => <a href={`?category=${encodeURIComponent(category)}`} data-category={category}>{category}</a>)}
+  </nav>}
+  <p class="sr-only" data-results-count role="status" aria-live="polite">{posts.length} articles</p>
+  <section aria-label="Recent articles">
+    <h2 class="sr-only">Recent articles</h2>
+    <div class:list={['post-list', { 'post-list-rows': posts.length < 3 }]} data-featured-posts>
+      {posts.slice(0, featuredLimit).map(post => <PostCard post={post} site={site} />)}
+    </div>
+    <p class="empty-state" data-empty-state hidden={posts.length > 0}>No articles here yet.</p>
+  </section>
+  <section class="archive" aria-labelledby="archive-heading" data-archive hidden={posts.length <= featuredLimit}>
+    <h2 id="archive-heading">Archive</h2>
+    <div class="archive-list" data-archive-posts>
+      {posts.slice(featuredLimit).map(post => <PostCard post={post} site={site} />)}
+    </div>
+  </section>
+</div>
+
+<script>
+  const blog = document.querySelector<HTMLElement>('[data-blog-home]');
+  if (blog) {
+    const links = [...blog.querySelectorAll<HTMLAnchorElement>('[data-category]')];
+    // Preserve the original date order as cards move between the two lists.
+    const posts = [...blog.querySelectorAll<HTMLElement>('[data-post-category]')];
+    const featured = blog.querySelector<HTMLElement>('[data-featured-posts]')!;
+    const archive = blog.querySelector<HTMLElement>('[data-archive]')!;
+    const archivePosts = blog.querySelector<HTMLElement>('[data-archive-posts]')!;
+    const empty = blog.querySelector<HTMLElement>('[data-empty-state]')!;
+    const count = blog.querySelector<HTMLElement>('[data-results-count]')!;
+    const featuredLimit = 9;
+    function filter(category: string) {
+      // An old shared filter must not hide the only post when controls are absent.
+      category = links.length ? category : '';
+      const matching = posts.filter(post => !category || post.dataset.postCategory === category);
+      for (const post of posts) post.hidden = Boolean(category) && post.dataset.postCategory !== category;
+      matching.forEach((post, index) => (index < featuredLimit ? featured : archivePosts).append(post));
+      featured.classList.toggle('post-list-rows', matching.length < 3);
+      archive.hidden = matching.length <= featuredLimit;
+      for (const link of links) {
+        if (link.dataset.category === category) link.setAttribute('aria-current', 'page');
+        else link.removeAttribute('aria-current');
+      }
+      empty.hidden = matching.length > 0;
+      empty.textContent = category ? `No articles in ${category} yet. Choose All posts to explore the blog.` : 'No articles here yet.';
+      const archived = Math.max(0, matching.length - featuredLimit);
+      count.textContent = `${matching.length} ${matching.length === 1 ? 'article' : 'articles'}${category ? ` in ${category}` : ''}${archived ? `: ${featuredLimit} recent, ${archived} in Archive` : ''}`;
+    }
+    function select(category: string) {
+      const url = new URL(window.location.href);
+      if (category) url.searchParams.set('category', category);
+      else url.searchParams.delete('category');
+      if (url.href !== window.location.href) window.history.pushState(null, '', url);
+      filter(category);
+    }
+    for (const link of links) link.addEventListener('click', (event) => {
+      if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      event.preventDefault();
+      select(link.dataset.category ?? '');
+    });
+    window.addEventListener('popstate', () => filter(new URL(window.location.href).searchParams.get('category') ?? ''));
+    filter(new URL(window.location.href).searchParams.get('category') ?? '');
+  }
+</script>

package/renderer/src/components/Footer.astro

@@ -0,0 +1,32 @@
+---
+import SocialLink from './SocialLink.astro';
+const { site } = Astro.props;
+const columns = (site.footer?.links ?? []).slice(0, 5);
+const socials = Object.entries(site.footer?.socials ?? {});
+---
+
+<footer class="site-footer">
+  <div class:list={['footer-inner', { 'footer-has-columns': columns.length > 0 }]} style={`--footer-columns: ${Math.max(columns.length, 1)}; --footer-tablet-columns: ${Math.min(Math.max(columns.length, 1), 3)}; --footer-mobile-columns: ${Math.min(Math.max(columns.length, 1), 2)}`}>
+  <div class="footer-main">
+    <div class="footer-brand">
+      <a class="brand" href="/" aria-label={`${site.name} home`}>
+        {site.favicon && <img src={site.favicon} width="24" height="24" alt="" />}
+        {!site.favicon && <span>{site.name}</span>}
+      </a>
+    </div>
+    {columns.length > 0 && <div class="footer-columns">
+      {columns.map((column, index) => <nav class="footer-column" aria-label={column.header ?? `Footer links ${index + 1}`}>
+        {column.header && <h2>{column.header}</h2>}
+        <ul>{(column.items ?? []).map(item => <li><a href={item.href}>{item.label}</a></li>)}</ul>
+      </nav>)}
+    </div>}
+  </div>
+  <div class="footer-bottom">
+    <span>© {new Date().getFullYear()} {site.name}</span>
+    {socials.length > 0 && <nav class="footer-socials" aria-label="Social links">
+      {socials.map(([name, href]) => <SocialLink name={name} href={href} />)}
+    </nav>}
+    <a class="footer-credit" href="https://lettercamp.com">Published with Lettercamp <span aria-hidden="true">↗</span></a>
+  </div>
+  </div>
+</footer>

package/renderer/src/components/PostCard.astro

@@ -0,0 +1,18 @@
+---
+import AuthorByline from './AuthorByline.astro';
+const { post, site } = Astro.props;
+const image = post.ogImage ?? post.image ?? site.ogImage;
+---
+
+<article class="post-card" data-post-category={post.category}>
+  <a class="post-card-link" href={post.href}>
+    <div class="post-card-cover">
+      {image ? <img src={image} alt="" width="1200" height="630" loading="lazy" /> : <span class="image-placeholder" aria-hidden="true">{site.name}</span>}
+    </div>
+    <div class="post-card-content">
+      <h3>{post.title}</h3>
+      {post.description && <p class="post-card-description">{post.description}</p>}
+      <AuthorByline post={post} site={site} variant="listing" />
+    </div>
+  </a>
+</article>

package/renderer/src/components/SocialLink.astro

@@ -0,0 +1,23 @@
+---
+const { name, href } = Astro.props;
+const aliases = { twitter: 'x', 'x-twitter': 'x', 'earth-americas': 'website' };
+const platform = aliases[name] ?? name;
+const names = { x: 'X', github: 'GitHub', linkedin: 'LinkedIn', youtube: 'YouTube', instagram: 'Instagram', facebook: 'Facebook', website: 'Website', 'hacker-news': 'Hacker News', bluesky: 'Bluesky', discord: 'Discord', slack: 'Slack', medium: 'Medium', telegram: 'Telegram', threads: 'Threads', reddit: 'Reddit', podcast: 'Podcast' };
+const label = names[platform] ?? name.replaceAll('-', ' ').replace(/^./, character => character.toUpperCase());
+const icons = {
+  x: 'M18.9 2H22l-6.8 7.8L23.2 22h-6.3l-5-7.6L5.2 22H2l8.4-9.6L.8 2h6.5l4.6 7L18.9 2Zm-1.1 18h1.7L6.3 4H4.5l13.3 16Z',
+  github: 'M12 .8a11.2 11.2 0 0 0-3.54 21.83c.56.1.77-.24.77-.54v-2.1c-3.13.68-3.79-1.33-3.79-1.33-.51-1.3-1.25-1.65-1.25-1.65-1.02-.7.08-.69.08-.69 1.13.08 1.72 1.16 1.72 1.16 1 .1 1.83 1.65 3.28.73.1-.73.39-1.23.71-1.51-2.5-.28-5.13-1.25-5.13-5.56 0-1.23.44-2.23 1.16-3.02-.12-.28-.5-1.43.11-2.98 0 0 .95-.3 3.08 1.15a10.7 10.7 0 0 1 5.6 0c2.13-1.45 3.08-1.15 3.08-1.15.61 1.55.23 2.7.11 2.98.72.79 1.16 1.79 1.16 3.02 0 4.32-2.63 5.27-5.14 5.55.4.35.76 1.03.76 2.08v3.32c0 .3.2.65.77.54A11.2 11.2 0 0 0 12 .8Z',
+  linkedin: 'M20.5 2h-17C2.67 2 2 2.67 2 3.5v17c0 .83.67 1.5 1.5 1.5h17c.83 0 1.5-.67 1.5-1.5v-17c0-.83-.67-1.5-1.5-1.5ZM8 19H5V9h3v10ZM6.5 7.7a1.8 1.8 0 1 1 0-3.6 1.8 1.8 0 0 1 0 3.6ZM19 19h-3v-5.3c0-1.3-.5-2.1-1.6-2.1-1.2 0-1.9.8-1.9 2.1V19h-3V9h2.9v1.4C13 9.5 14 8.8 15.4 8.8c2.4 0 3.6 1.5 3.6 4.3V19Z',
+  youtube: 'M23 7a3 3 0 0 0-2.1-2.1C19 4.4 12 4.4 12 4.4s-7 0-8.9.5A3 3 0 0 0 1 7a31 31 0 0 0 0 10 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5A3 3 0 0 0 23 17a31 31 0 0 0 0-10ZM9.5 15.5v-7l6 3.5-6 3.5Z',
+  facebook: 'M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12Z',
+};
+const hasIcon = icons[platform] || ['instagram', 'website', 'hacker-news'].includes(platform);
+---
+<a href={href} aria-label={label} title={label}>
+  {hasIcon ? <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
+    {icons[platform] && <path d={icons[platform]} />}
+    {platform === 'instagram' && <g fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r=".8" fill="currentColor" stroke="none" /></g>}
+    {platform === 'website' && <g fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9" /><ellipse cx="12" cy="12" rx="4" ry="9" /><path d="M3 12h18" /></g>}
+    {platform === 'hacker-news' && <><rect x="2" y="2" width="20" height="20" rx="2" /><path d="m7 6 5 7 5-7m-5 7v5" fill="none" stroke="var(--background, #fff)" stroke-width="1.8" /></>}
+  </svg> : <span>{label}</span>}
+</a>

package/renderer/src/layouts/SiteLayout.astro

@@ -1,24 +1,36 @@
 ---
 import '../styles/site.css';
+import Footer from '../components/Footer.astro';
 
-const { site, page } = Astro.props;
+const { site, page, article = false } = Astro.props;
+const navLinks = site.navbar?.links ?? site.navigation ?? [{ label: 'Home', href: '/' }];
+const primary = site.navbar?.primary;
 const title = page.title ?? site.name;
 const description = page.description ?? site.description;
 const image = page.ogImage ?? page.image ?? site.ogImage;
-const imageUrl = image ? new URL(image, Astro.url).href : undefined;
+const imageUrl = image || undefined;
+const typography = site.typography ?? {};
+const fontFamily = typeof typography.fontFamily === 'string' && typography.fontFamily.trim() ? typography.fontFamily.trim() : 'Inter';
+const fontSize = (value, fallback) => typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : fallback;
+const headingSize = fontSize(typography.headingSize, 48);
+const bodySize = fontSize(typography.bodySize, 18);
+const fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@400;500;600;700&display=swap`;
 ---
 
 <!doctype html>
-<html lang={site.language ?? 'en'}>
+<html lang={site.language ?? 'en'} style={{ '--font-family': `${JSON.stringify(fontFamily)}, Arial, Helvetica, sans-serif`, '--heading-size': `${headingSize / 16}rem`, '--body-size': `${bodySize / 16}rem` }}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href={fontUrl} rel="stylesheet" />
     <title>{title === site.name ? title : `${title} · ${site.name}`}</title>
     <meta name="description" content={description} />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
     <meta property="og:site_name" content={site.name} />
-    <meta property="og:type" content={page.layout === 'post' ? 'article' : 'website'} />
+    <meta property="og:type" content={article ? 'article' : 'website'} />
     <meta property="og:url" content={Astro.url.href} />
     {imageUrl && <meta property="og:image" content={imageUrl} />}
     <meta name="twitter:card" content={imageUrl ? 'summary_large_image' : 'summary'} />
@@ -27,17 +39,32 @@ const imageUrl = image ? new URL(image, Astro.url).href : undefined;
   <body>
     <a class="skip-link" href="#content">Skip to content</a>
     <header class="site-header">
+      <div class="site-header-inner">
       <a class="brand" href="/">
         {site.favicon && <img src={site.favicon} width="30" height="30" alt="" />}
         <span>{site.name}</span>
       </a>
-      <nav aria-label="Main navigation">
-        {(site.navigation ?? [{ label: 'Home', href: '/' }]).map((item) =>
-          <a href={item.href} aria-current={item.href === Astro.url.pathname ? 'page' : undefined}>{item.label}</a>
-        )}
-      </nav>
+      {(navLinks.length > 0 || primary) && <div class="header-actions">
+        {navLinks.length > 0 &&
+          <nav class="desktop-navigation" aria-label="Main navigation">
+            {navLinks.map((item) =>
+              <a href={item.href} aria-current={item.href === Astro.url.pathname ? 'page' : undefined}>{item.label}</a>
+            )}
+          </nav>}
+          <details class="mobile-navigation">
+            <summary>Menu</summary>
+            <nav aria-label="Main navigation">
+              {navLinks.map((item) =>
+                <a href={item.href} aria-current={item.href === Astro.url.pathname ? 'page' : undefined}>{item.label}</a>
+              )}
+              {primary && <a href={primary.href}>{primary.label}</a>}
+            </nav>
+          </details>
+        {primary && <a class="header-primary" href={primary.href}>{primary.label}</a>}
+      </div>}
+      </div>
     </header>
     <main id="content"><slot /></main>
-    <footer class="site-footer"><span>© {new Date().getFullYear()} {site.name}</span><a href="https://lettercamp.com">Published with Lettercamp</a></footer>
+    <Footer site={site} />
   </body>
 </html>

package/renderer/src/lib/posts.js

@@ -0,0 +1,32 @@
+import { pages, contentPrefix } from '../content.js';
+
+export function pageSlug(filename) {
+  return filename.slice(contentPrefix.length).replace(/\.(md|mdx)$/, '');
+}
+
+export function postDate(value, language = 'en') {
+  if (!value) return { iso: '', label: '', timestamp: -Infinity };
+  const date = value instanceof Date ? value : new Date(String(value));
+  if (Number.isNaN(date.valueOf())) return { iso: '', label: '', timestamp: -Infinity };
+  return {
+    iso: date.toISOString().slice(0, 10),
+    label: new Intl.DateTimeFormat(language, { month: 'long', day: 'numeric', year: 'numeric', timeZone: 'UTC' }).format(date),
+    timestamp: date.valueOf(),
+  };
+}
+
+export function getPosts(language = 'en') {
+  return Object.entries(pages)
+    .map(([filename, page]) => {
+      const frontmatter = page.frontmatter ?? {};
+      const slug = pageSlug(filename);
+      return {
+        ...frontmatter,
+        title: frontmatter.title ?? slug,
+        category: typeof frontmatter.category === 'string' ? frontmatter.category.trim() : '',
+        href: `/${slug.split('/').map(encodeURIComponent).join('/')}/`,
+        date: postDate(frontmatter.date, language),
+      };
+    })
+    .sort((a, b) => b.date.timestamp - a.date.timestamp || a.href.localeCompare(b.href));
+}

package/renderer/src/pages/[...slug].astro

@@ -1,41 +1,56 @@
 ---
 import SiteLayout from '../layouts/SiteLayout.astro';
+import AuthorByline from '../components/AuthorByline.astro';
+import { pageSlug, postDate } from '../lib/posts.js';
 import site from '../site.js';
-import { pages, contentPrefix } from '../content.js';
+import { pages } from '../content.js';
 
 export function getStaticPaths() {
   return Object.entries(pages).map(([filename, page]) => {
-    const slug = filename.slice(contentPrefix.length).replace(/\.(md|mdx)$/, '')
-      .replace(/(^|\/)index$/, '');
-    return { params: { slug: slug || undefined }, props: { page } };
+    const slug = pageSlug(filename);
+    return { params: { slug }, props: { page } };
   });
 }
 
 const { page } = Astro.props;
 const { Content, frontmatter = {} } = page;
-const home = frontmatter.layout === 'home' || Astro.url.pathname === '/';
-const author = frontmatter.author ?? site.author;
-const date = frontmatter.date ? new Date(`${String(frontmatter.date).slice(0, 10)}T12:00:00Z`) : null;
-const dateLabel = date && !Number.isNaN(date.valueOf())
-  ? new Intl.DateTimeFormat(site.language ?? 'en', { month: 'long', day: 'numeric', year: 'numeric', timeZone: 'UTC' }).format(date)
-  : null;
+const coverImage = frontmatter.image ?? frontmatter.ogImage;
+const headings = (page.getHeadings?.() ?? []).filter(({ depth }) => depth === 2 || depth === 3);
+const category = typeof frontmatter.category === 'string' ? frontmatter.category.trim() : '';
+const date = postDate(frontmatter.date, site.language);
+const postLayout = site.postLayout ?? {};
 ---
 
-<SiteLayout site={site} page={frontmatter}>
-  <article class:list={['publication', { 'publication-home': home }]}>
-    <header class="article-header">
-      {!home && <a class="back-link" href="/">← All posts</a>}
-      <p class="eyebrow">{home ? 'News, ideas & notes' : site.name}</p>
-      <h1>{frontmatter.title ?? site.name}</h1>
-      {frontmatter.description && <p class="description">{frontmatter.description}</p>}
-      {!home && (author || dateLabel) && <p class="byline">
-        {author && <span>{author}</span>}
-        {dateLabel && <time datetime={String(frontmatter.date).slice(0, 10)}>{dateLabel}</time>}
-      </p>}
+<SiteLayout site={site} page={frontmatter} article>
+  <article class="publication publication-post" data-post-width={postLayout.contentWidth ?? 'standard'} data-post-hero={postLayout.heroLayout ?? 'split'}
+    data-post-cover={postLayout.showCover === false ? 'hidden' : 'visible'} data-post-toc={postLayout.showTableOfContents === false ? 'hidden' : 'visible'}>
+    <a class="back-link" href="/">← All posts</a>
+    <header class:list={['article-header', 'article-hero', { 'article-hero-with-image': coverImage }]}>
+      <div class="article-intro">
+        <p class="eyebrow">{category ? <a href={`/?category=${encodeURIComponent(category)}`}>{category}</a> : site.name}</p>
+        <h1>{frontmatter.title ?? site.name}</h1>
+        {frontmatter.description && <p class="description">{frontmatter.description}</p>}
+        <div class="byline">
+          {date.label && <time datetime={date.iso}>{date.label}</time>}
+          <AuthorByline post={frontmatter} site={site} />
+        </div>
+      </div>
+      {coverImage && <figure class="article-hero-image">
+        <img src={coverImage} alt={frontmatter.imageAlt ?? ''} width="1200" height="630" fetchpriority="high" />
+      </figure>}
     </header>
-    {!home && frontmatter.image && <figure class="cover">
-      <img src={frontmatter.image} alt={frontmatter.imageAlt ?? ''} width="1200" height="630" />
-    </figure>}
-    <div class="prose"><Content /></div>
+    <div class:list={['article-body', { 'article-body-with-toc': headings.length > 0 }]}>
+      {headings.length > 0 && <aside class="article-sidebar">
+        <nav class="article-toc" aria-label="Table of contents">
+          <h2>On this page</h2>
+          <ol>
+            {headings.map(({ depth, slug, text }) => <li class:list={{ 'toc-subheading': depth === 3 }}>
+              <a href={`#${slug}`}>{text}</a>
+            </li>)}
+          </ol>
+        </nav>
+      </aside>}
+      <div class="prose"><Content /></div>
+    </div>
   </article>
 </SiteLayout>

package/renderer/src/pages/index.astro

@@ -0,0 +1,10 @@
+---
+import SiteLayout from '../layouts/SiteLayout.astro';
+import BlogHome from '../components/BlogHome.astro';
+import site from '../site.js';
+const title = site.homeTitle ?? `${site.name} Blog`;
+---
+
+<SiteLayout site={site} page={{ title }}>
+  <BlogHome site={site} />
+</SiteLayout>