# Feature catalog — Chalarangelo/30-seconds-of-code

> Canonical page: https://codevetter.com/unpack/30-seconds-of-code/feature-catalog

# Feature catalog — Chalarangelo/30-seconds-of-code

Scanned commit bd756f8b2283a38560efe83cb30af38324d4e9e9 (2026-09-09). Generated by codevetter codevetter 1.12.0 on 2026-09-22.

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. — [src/astro/pages/[lang]/s/[snippet].astro](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/astro/pages/%5Blang%5D/s/%5Bsnippet%5D.astro) [src/adapters/page/snippetPage.js#L19-31](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/adapters/page/snippetPage.js#L19-L31)
- 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. — [src/astro/pages/[lang]/[...listing].astro](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/astro/pages/%5Blang%5D/%5B...listing%5D.astro) [src/adapters/page/collectionPage.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/adapters/page/collectionPage.js)
- 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. — [src/astro/pages/index.astro](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/astro/pages/index.astro) [src/adapters/page/homePage.js#L36-90](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/adapters/page/homePage.js#L36-L90) [src/config/settings.js#L25-30](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/config/settings.js#L25-L30)
- 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. — [src/astro/scripts/omnisearch.js#L17-35](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/astro/scripts/omnisearch.js#L17-L35) [src/astro/scripts/omnisearch.js#L72-76](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/astro/scripts/omnisearch.js#L72-L76) [src/astro/scripts/omnisearch.js#L152-201](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/astro/scripts/omnisearch.js#L152-L201)
- 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. — [src/astro/scripts/hotkeys.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/astro/scripts/hotkeys.js)
- 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. — [src/lib/contentUtils/modelWorkers/collectionSnippet.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/contentUtils/modelWorkers/collectionSnippet.js) [src/lib/contentUtils/modelWorkers/collection.js#L45-48](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/contentUtils/modelWorkers/collection.js#L45-L48) [content/collections/js/array.yaml](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/content/collections/js/array.yaml) [content/hub.yaml](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/content/hub.yaml)
- 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. — [src/models/snippet.js#L99-132](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/models/snippet.js#L99-L132) [src/lib/contentUtils/modelWorkers/snippet.js#L25](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/contentUtils/modelWorkers/snippet.js#L25)
- 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. — [src/models/snippet.js#L67-83](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/models/snippet.js#L67-L83) [src/models/contentModel.js#L21-32](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/models/contentModel.js#L21-L32) [src/models/contentModel.js#L151-171](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/models/contentModel.js#L151-L171) [src/lib/contentUtils/markdownParser/plugins/ast/transformArticleEmbeds.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/contentUtils/markdownParser/plugins/ast/transformArticleEmbeds.js)
- 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. — [src/lib/contentUtils/markdownParser/markdownParser.js#L80-95](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/contentUtils/markdownParser/markdownParser.js#L80-L95) [src/lib/contentUtils/markdownParser/plugins/index.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/contentUtils/markdownParser/plugins/index.js)
- linkInlineCode auto-links inline code tokens to language reference URLs (e.g. MDN) declared in content/languages/*.yaml 'references' and 'additionalReferences' maps. — [src/lib/contentUtils/markdownParser/plugins/hast/linkInlineCode.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/contentUtils/markdownParser/plugins/hast/linkInlineCode.js) [content/languages/javascript.yaml](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/content/languages/javascript.yaml) [src/lib/contentUtils/markdownParser/markdownParser.js#L35-46](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/contentUtils/markdownParser/markdownParser.js#L35-L46)
- 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. — [src/adapters/page.js#L40-53](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/adapters/page.js#L40-L53) [src/adapters/page/snippetPage.js#L33-47](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/adapters/page/snippetPage.js#L33-L47) [src/models/snippet.js#L138-149](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/models/snippet.js#L138-L149) [src/models/contentModel.js#L71-77](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/models/contentModel.js#L71-L77)
- 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. — [src/lib/feed.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/feed.js) [src/lib/sitemap.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/sitemap.js) [src/lib/redirects.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/redirects.js) [content/redirects.yaml](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/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. — [src/lib/contentUtils/assetHandler.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/contentUtils/assetHandler.js) [src/config/settings.js#L84-99](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/config/settings.js#L84-L99)
- 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. — [src/lib/contentComponents.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/contentComponents.js) [src/lib/contentUtils/markdownParser/plugins/hast/loadWebComponents.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/contentUtils/markdownParser/plugins/hast/loadWebComponents.js) [src/lib/contentUtils/config.js#L12-14](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/contentUtils/config.js#L12-L14)
- 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. — [src/lib/contentUtils/contentCreator.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/contentUtils/contentCreator.js) [content/collection-template.yaml](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/content/collection-template.yaml) [content/snippets/js/snippet-template.md](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/content/snippets/js/snippet-template.md) [bin/console](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/bin/console) [src/lib/preparedQueries.js](https://github.com/Chalarangelo/30-seconds-of-code/blob/bd756f8b2283a38560efe83cb30af38324d4e9e9/src/lib/preparedQueries.js)

Every claim links to its cited files at the pinned commit. Citations identify source evidence; they do not establish runtime correctness. Independent CodeVetter scan — not reviewed by upstream maintainers.

## Public product links

- [CodeVetter](https://codevetter.com/)
- [Download](https://codevetter.com/download)
- [Documentation](https://codevetter.com/docs/)
- [Source](https://github.com/Codevetter/codevetter)