CodeVetter · Repo Unpack · Feature catalog
Chalarangelo/30-seconds-of-code
User-facing features are all static pages and client widgets: a home page, paginated collection listing pages, snippet article pages, an about page and 404, plus an omnisearch modal, keyboard shortcuts, RSS feed, sitemap, and redirects file. Content-level features (collections, journeys, article embeds, admonitions, codepen embeds, automatic code-reference links, table of contents) are produced by the custom markdown pipeline. Author-facing features include snippet/collection scaffolding commands, a watch mode, an interactive REPL console, and an asset pipeline that resizes cover images.
- Snippet pages at /{lang}/s/{snippet} are rendered by [snippet].astro with breadcrumb, snippet content, journey prev/next pagination, a 'More like this' recommendation list, a table-of-contents sidebar, and a content-components fallback.
- Paginated listing pages are served by [lang]/[...listing].astro, which reads .content/pages/[lang]/[...listing].json and renders a Hero, optional sublink Chips, a PreviewList, and Pagination.
- The home page composes a Hero, an optional Announcement banner (latest update-log snippet within the last 30 days), featured collection Chips (top 7 plus an 'Explore collections' link), and a PreviewList of the 12 newest published snippets.
- The omnisearch modal lazily fetches /search-data.json on first open, builds a DocumentIndex in the browser, searches on keyup (queries of 1 char or less are ignored), supports ArrowUp/ArrowDown result navigation, and closes on Escape, backdrop click, or the close trigger.
- Keyboard hotkeys bind Ctrl/Cmd+k to omnisearch, Ctrl/Cmd+j to collections, and Ctrl/Cmd+h to home, with Mac detection via navigator.userAgent.
- Collections are YAML-defined and populated three ways: explicit snippetIds lists, languageMatcher/tagMatcher filters, or the special 'snippets' main collection which ranks all snippets; 'collections' hub gets featured ordering from hub.yaml featuredListings.
- Journeys are multi-part articles: a snippet's journeyId front-matter links it to a Collection, and Snippet.journeyPagination computes previousUrl/nextUrl/url/title/itemNumber for the Pagination component.
- Article embeds: '<article-embed ref="..." title="..."/>' markup in rendered content is replaced at read time by Snippet.enrichedContent with an asEmbedding figure produced via ContentModel.searchContentModels.
- The markdown pipeline applies remark plugins (highlightCode, embedCodepensFromLinks, transformArticleEmbeds) then HAST plugins (loadWebComponents, linkInlineCode, safeguardExternalLinks, transformAdmonitions, transformHeadings for h2-h4 with linkable ids, transfomImagePaths, wrapTables) before rehype-stringify.
- linkInlineCode auto-links inline code tokens to language reference URLs (e.g. MDN) declared in content/languages/*.yaml 'references' and 'additionalReferences' maps.
- SEO features: each Page emits schema.org JSON-LD (TechArticle for snippets, ItemList for collections, WebSite for home), Snippet.seoTitle prefixes the language name when absent from the title, and ContentModel.seoDescription strips HTML for meta descriptions.
- Build-time outputs for the site include an RSS feed (public/feed.xml), a sitemap listing home/about/snippets/all collection pages, and a Netlify-style _redirects file generated from content/redirects.yaml.
- The asset pipeline (prepareAssets) uses sharp to convert content/assets/{cover,splash} images into sized .webp variants in public/assets — covers at 800x400/400x200/1200x600 and splashes at 600x600/400x400 — and copies static 'icons' and 'illustrations' directories.
- Content web components are supported: scripts under content/components/scripts are copied and SCSS under content/components/styles is compiled to public/components; the loadWebComponents HAST plugin injects <script type=module> tags when markup references them.
- Authoring commands: 'bin/prepare create [snippet|collection] [dir] [name]' scaffolds content from content/collection-template.yaml or per-directory snippet-template.md files, filling title/slug/dateModified; 'bin/prepare create-component' scaffolds components; 'bin/console' opens a REPL with all models and PreparedQueries preloaded.