@lettercamp/cli 0.1.10 → 0.1.12

package/renderer/src/components/PostSearch.astro

@@ -0,0 +1,30 @@
+---
+import '../styles/post-search.css';
+import { postSearchScript } from '../lib/post-search';
+const { posts } = Astro.props;
+// Only public post fields enter the browser. Escape HTML delimiters even in an
+// inert JSON script: article text may contain a literal closing script tag.
+const index = JSON.stringify(posts.map(post => ({
+  title: String(post.title), href: post.href,
+  summary: typeof post.description === 'string' ? post.description : '',
+  text: typeof post.searchText === 'string' ? post.searchText : '',
+  category: post.category, date: post.date.label,
+}))).replace(/</g, '\\u003c');
+---
+
+<div class="post-search-trigger" hidden>
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5" /><path d="m16 16 4.5 4.5" /></svg>
+  <input type="search" readonly placeholder="Search articles…" aria-label="Search articles" aria-haspopup="dialog" aria-controls="post-search-dialog" />
+</div>
+<dialog id="post-search-dialog" class="post-search-dialog" aria-label="Search articles">
+  <div class="post-search-header">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5" /><path d="m16 16 4.5 4.5" /></svg>
+    <input type="text" role="searchbox" enterkeyhint="search" placeholder="Search articles…" aria-label="Search article titles and content" aria-controls="post-search-results" autocomplete="off" spellcheck="false" autofocus />
+    <button type="button" class="post-search-close" aria-label="Close search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18" /></svg></button>
+  </div>
+  <p class="post-search-status" role="status" aria-live="polite" aria-atomic="true"></p>
+  <ul id="post-search-results" class="post-search-results" aria-label="Matching articles"></ul>
+  <p class="post-search-empty" hidden>No articles found. Try a different word or title.</p>
+</dialog>
+<script is:inline type="application/json" data-post-search-index set:html={index} />
+<script is:inline set:html={postSearchScript} />

package/renderer/src/components/RelatedPosts.astro

@@ -0,0 +1,11 @@
+---
+import PostCard from './PostCard.astro';
+const { posts, site } = Astro.props;
+---
+
+{posts.length > 0 && <section class="related-posts" aria-labelledby="related-posts-heading" hidden={site.post?.showRelatedPosts === false}>
+  <h2 id="related-posts-heading">Related</h2>
+  <div class="post-list">
+    {posts.map(post => <PostCard post={post} site={site} />)}
+  </div>
+</section>}

package/renderer/src/components/SocialLink.astro

@@ -18,6 +18,6 @@ const hasIcon = icons[platform] || ['instagram', 'website', 'hacker-news'].inclu
     {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" /></>}
+    {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(--site-background, #fff)" stroke-width="1.8" /></>}
   </svg> : <span>{label}</span>}
 </a>

package/renderer/src/layouts/SiteLayout.astro

@@ -13,6 +13,9 @@ import { postShareScript } from '../lib/post-share';
 import { mobileNavigationScript } from '../lib/mobile-navigation';
 import { blockWidthStyles } from '../lib/block-widths';
 import { tableStyles } from '../lib/table-styles';
+import { keyTakeawaysStyles } from '../lib/key-takeaways';
+import { faqStyles } from '../lib/faq';
+import { siteColors } from '../lib/site-colors';
 import { imageWidthStyles } from '../lib/image-widths';
 import { googleAnalyticsScript } from '../lib/analytics';
 import Header from '../components/HeaderSlot.astro';
@@ -21,19 +24,21 @@ import Footer from '../components/FooterSlot.astro';
 const { site, page, article = false } = Astro.props;
 const meta = pageMetadata(site, page, Astro.url, article, basePath);
 const typography = site.design?.typography ?? {};
-const fonts = fontResources(typography);
+const fonts = fontResources(typography, article ? 700 : 500);
 const fontSize = (value, fallback) => typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : fallback;
-const baseSize = fontSize(typography.baseSizePx, 16);
+const headingBaseSize = fontSize(typography.headingBaseSizePx, 18);
+const bodyBaseSize = fontSize(typography.bodyBaseSizePx, 16);
 const bodyLineHeight = fontSize(typography.bodyLineHeight, 1.8);
-const backgroundColor = typeof site.design?.backgroundColor === 'string' && /^#[0-9a-f]{6}$/i.test(site.design?.backgroundColor) ? site.design?.backgroundColor : '#ffffff';
+const colors = siteColors(site.design);
 const analytics = googleAnalyticsScript(site.analytics?.googleAnalyticsId);
 ---
 
 <!doctype html>
-<html data-base-path={basePath} lang={meta.language} style={{ '--image-radius': readImageRadius(site.design?.imageRadiusPercent) / 100, '--site-background': backgroundColor, '--font-family': fonts.bodyFamily, '--heading-font': fonts.headingFamily, '--type-scale': baseSize / 16, '--body-line-height': bodyLineHeight }}>
+<html data-base-path={basePath} data-site-accent={colors['--site-accent'] !== 'inherit' ? '' : undefined} lang={meta.language} style={{ ...colors, '--image-radius': readImageRadius(site.design?.imageRadiusPercent) / 100, '--font-family': fonts.bodyFamily, '--heading-font': fonts.headingFamily, '--heading-type-scale': headingBaseSize / 18, '--body-type-scale': bodyBaseSize / 16, '--body-line-height': bodyLineHeight }}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    {fonts.preloads.map(href => <link data-lettercamp-font-preload rel="preload" href={href} as="font" type="font/woff2" crossorigin />)}
     {fonts.googleUrl && <>
       <link rel="preconnect" href="https://fonts.googleapis.com" />
       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -44,6 +49,8 @@ const analytics = googleAnalyticsScript(site.analytics?.googleAnalyticsId);
     <style is:inline set:html={blockWidthStyles} />
     <style is:inline set:html={codeBlockStyles} />
     <style is:inline set:html={tableStyles} />
+    <style is:inline set:html={keyTakeawaysStyles} />
+    <style is:inline set:html={faqStyles} />
     <title>{meta.documentTitle}</title>
     <meta name="description" content={meta.description} />
     {meta.keywords && <meta name="keywords" content={meta.keywords} />}

package/renderer/src/lib/block-widths.ts

@@ -26,10 +26,4 @@ ${blocks}${full} {
   max-width: none; margin-inline: calc((100% - var(--block-display-width)) / 2);
   margin-left: calc((100% - var(--block-display-width)) / 2 - var(--block-column-offset, 0px));
 }
-/* The two-column TOC layout shifts the reading column 106px from center. */
-@media (min-width: 761px) and (max-width: 1199px) {
-  .publication-post[data-post-hero="split"][data-post-toc="visible"] .article-body-with-toc .prose {
-    --block-column-offset: 106px;
-  }
-}
 `;

package/renderer/src/lib/branding.js

@@ -7,6 +7,8 @@ export const defaultSiteBranding = {
 export function withDefaultBranding(source) {
   const branding = Object.fromEntries(Object.entries(defaultSiteBranding).map(([key, fallback]) =>
     [key, typeof source[key] === 'string' && source[key].trim() ? source[key] : fallback]));
+  // An explicit empty logo disables the image while omitted logos keep the default.
+  if (typeof source.logo === 'string') branding.logo = source.logo.trim();
   return {
     ...source,
     ...branding,

package/renderer/src/lib/button.js

@@ -1,10 +1,12 @@
-// Keep the color fallback and contrast calculation aligned with the editor preview.
-export function buttonColors(value) {
-  const background = typeof value === 'string' && /^#[0-9a-f]{6}$/i.test(value) ? value : '#111111';
-  const channels = [1, 3, 5].map(offset => {
-    const channel = parseInt(background.slice(offset, offset + 2), 16) / 255;
-    return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
-  });
-  const luminance = channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
-  return { background, text: luminance > 0.179 ? '#000000' : '#ffffff' };
+// Generated from lettercamp/lib/button-colors.ts.
+// Shared by settings, the preview bridge, and the published renderer.
+// Keep self-contained so the preview can embed this function.
+export function buttonColors(value, accent) {
+    const background = [value, accent].find((color) => typeof color === "string" && /^#[0-9a-f]{6}$/i.test(color)) ?? "#111111";
+    const channels = [1, 3, 5].map(offset => {
+        const channel = parseInt(background.slice(offset, offset + 2), 16) / 255;
+        return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+    });
+    const luminance = channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
+    return { background, text: (luminance + 0.05) / 0.05 >= 1.05 / (luminance + 0.05) ? "#000000" : "#ffffff" };
 }

package/renderer/src/lib/code-block.ts

@@ -23,24 +23,24 @@ export function writeCodeSettings(meta: string, patch: Partial<CodeBlockSettings
 
 // The editor and both publication renderers use the same token classes and palette.
 export const codeBlockStyles = `
-[data-lettercamp-code] { --code-keyword: #8250a0; --code-string: #3d7757; --code-number: #a15c32; --code-name: #326b99; --code-comment: #93939b; color: #414146; }
+[data-lettercamp-code] { --code-keyword: color-mix(in srgb, #8250a0, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-string: color-mix(in srgb, #3d7757, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-number: color-mix(in srgb, #a15c32, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-name: color-mix(in srgb, #326b99, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-comment: var(--site-text-muted, #93939b); color: var(--site-text-strong, #414146); }
 [data-lettercamp-code][data-code-width] { margin-block: 24px; }
-[data-lettercamp-code][data-code-theme="ocean"] { --code-keyword: #3d62a8; --code-string: #277c85; --code-number: #98623e; --code-name: #6961a4; }
-[data-lettercamp-code][data-code-theme="forest"] { --code-keyword: #47724a; --code-string: #827030; --code-number: #a25d47; --code-name: #3c7b79; }
-[data-lettercamp-code][data-code-theme="mono"] { --code-keyword: #45454a; --code-string: #62626a; --code-number: #62626a; --code-name: #45454a; }
+[data-lettercamp-code][data-code-theme="ocean"] { --code-keyword: color-mix(in srgb, #3d62a8, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-string: color-mix(in srgb, #277c85, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-number: color-mix(in srgb, #98623e, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-name: color-mix(in srgb, #6961a4, var(--site-foreground, #000000) var(--site-code-tint, 0%)); }
+[data-lettercamp-code][data-code-theme="forest"] { --code-keyword: color-mix(in srgb, #47724a, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-string: color-mix(in srgb, #827030, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-number: color-mix(in srgb, #a25d47, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-name: color-mix(in srgb, #3c7b79, var(--site-foreground, #000000) var(--site-code-tint, 0%)); }
+[data-lettercamp-code][data-code-theme="mono"] { --code-keyword: var(--site-text-strong, #45454a); --code-string: var(--site-text-secondary, #62626a); --code-number: var(--site-text-secondary, #62626a); --code-name: var(--site-text-strong, #45454a); }
 [data-lettercamp-code] .tok-keyword, [data-lettercamp-code] .tok-operator { color: var(--code-keyword); }
 [data-lettercamp-code] .tok-string, [data-lettercamp-code] .tok-string2, [data-lettercamp-code] .tok-inserted { color: var(--code-string); }
 [data-lettercamp-code] .tok-number, [data-lettercamp-code] .tok-bool, [data-lettercamp-code] .tok-atom, [data-lettercamp-code] .tok-literal { color: var(--code-number); }
 [data-lettercamp-code] .tok-typeName, [data-lettercamp-code] .tok-className, [data-lettercamp-code] .tok-propertyName, [data-lettercamp-code] .tok-definition, [data-lettercamp-code] .tok-variableName2, [data-lettercamp-code] .tok-labelName { color: var(--code-name); }
 [data-lettercamp-code] .tok-comment, [data-lettercamp-code] .tok-meta { color: var(--code-comment); }
-[data-lettercamp-code] .tok-invalid, [data-lettercamp-code] .tok-deleted { color: #aa4747; }
+[data-lettercamp-code] .tok-invalid, [data-lettercamp-code] .tok-deleted { color: color-mix(in srgb, #aa4747, var(--site-foreground, #000000) var(--site-code-tint, 0%)); }
 [data-lettercamp-code] .tok-strong { font-weight: 600; }
 [data-lettercamp-code] .tok-emphasis { font-style: italic; }
-figure[data-lettercamp-code] > pre { box-sizing: border-box; margin: 0; padding: 16px 0; overflow-x: auto; border-radius: 8px; background: #fafafa; color: #414146; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
+figure[data-lettercamp-code] > pre { box-sizing: border-box; margin: 0; padding: 16px 0; overflow-x: auto; border-radius: 8px; background: var(--site-surface, #fafafa); color: var(--site-text-strong, #414146); font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
 figure[data-lettercamp-code] > pre > code { display: block; width: max-content; min-width: 100%; padding: 0; background: transparent; color: inherit; font: inherit; white-space: normal; counter-reset: code-line; }
 [data-lettercamp-code] .code-line { position: relative; display: block; box-sizing: border-box; min-height: 1.7em; padding: 0 18px 0 calc(var(--code-gutter, 3ch) + 24px); white-space: pre; }
-[data-lettercamp-code] .code-line::before { position: absolute; left: 8px; width: var(--code-gutter, 3ch); text-align: right; content: counter(code-line); counter-increment: code-line; color: #b4b4bc; user-select: none; font-variant-numeric: tabular-nums; }
+[data-lettercamp-code] .code-line::before { position: absolute; left: 8px; width: var(--code-gutter, 3ch); text-align: right; content: counter(code-line); counter-increment: code-line; color: var(--site-text-faint, #b4b4bc); user-select: none; font-variant-numeric: tabular-nums; }
 [data-lettercamp-code][data-code-wrap="true"] > pre > code { width: 100%; }
 [data-lettercamp-code][data-code-wrap="true"] .code-line { white-space: pre-wrap; overflow-wrap: anywhere; }
-figure[data-lettercamp-code] > figcaption { margin: 8px 0 0; color: #888; font: 13px/1.5 var(--font-family, inherit); text-align: center; overflow-wrap: anywhere; }
+figure[data-lettercamp-code] > figcaption { margin: 8px 0 0; color: var(--site-text-muted, #888); font: 13px/1.5 var(--font-family, inherit); text-align: center; overflow-wrap: anywhere; }
 `;

package/renderer/src/lib/faq.ts

@@ -0,0 +1,25 @@
+// Generated from lettercamp/lib/faq.ts.
+// Shared by the editor preview and published posts. Native disclosures work
+// without hydration and let readers keep several answers open at once.
+export const faqStyles = `
+[data-lettercamp-faq] { margin-block: 24px; color: inherit; overflow-wrap: anywhere; }
+[data-lettercamp-faq] > details { border-bottom: 1px solid var(--site-border, #e5e5e5); }
+[data-lettercamp-faq] > details:first-child { border-top: 1px solid var(--site-border, #e5e5e5); }
+[data-lettercamp-faq] > details > summary {
+  display: flex; align-items: center; justify-content: space-between; gap: 24px;
+  padding: 18px 0; cursor: pointer; list-style: none; font-weight: 600; line-height: 1.5;
+}
+[data-lettercamp-faq] > details > summary::-webkit-details-marker { display: none; }
+[data-lettercamp-faq] > details > summary::after {
+  content: ''; width: 7px; height: 7px; flex: 0 0 7px; margin: 0 4px 4px;
+  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg); transition: transform 150ms;
+}
+[data-lettercamp-faq] > details[open] > summary::after { transform: translateY(4px) rotate(225deg); }
+[data-lettercamp-faq] > details > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
+[data-lettercamp-faq] > details > [data-faq-answer] { padding: 0 28px 20px 0; }
+[data-lettercamp-faq] > details > [data-faq-answer] > :first-child { margin-top: 0; }
+[data-lettercamp-faq] > details > [data-faq-answer] > :last-child { margin-bottom: 0; }
+@media (prefers-reduced-motion: reduce) { [data-lettercamp-faq] > details > summary::after { transition: none; } }
+@media print { [data-lettercamp-faq] > details::details-content { content-visibility: visible; } }
+`;