@kamod-ch/preactpress 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +165 -0
- package/assets/favicon-32.png +0 -0
- package/assets/favicon.png +0 -0
- package/assets/favicon.svg +28 -0
- package/assets/logo-dark.svg +5 -0
- package/assets/logo-light.svg +5 -0
- package/assets/logo.svg +5 -0
- package/bin/preactpress.mjs +13 -0
- package/dist/client/app.d.ts +6 -0
- package/dist/client/app.d.ts.map +1 -0
- package/dist/client/app.js +168 -0
- package/dist/client/app.js.map +1 -0
- package/dist/client/entry-client.d.ts +2 -0
- package/dist/client/entry-client.d.ts.map +1 -0
- package/dist/client/entry-client.js +27 -0
- package/dist/client/entry-client.js.map +1 -0
- package/dist/client/entry-ssr.d.ts +14 -0
- package/dist/client/entry-ssr.d.ts.map +1 -0
- package/dist/client/entry-ssr.js +59 -0
- package/dist/client/entry-ssr.js.map +1 -0
- package/dist/client/index.d.ts +3 -0
- package/dist/client/index.d.ts.map +1 -0
- package/dist/client/index.js +2 -0
- package/dist/client/index.js.map +1 -0
- package/dist/client/loadPage.d.ts +5 -0
- package/dist/client/loadPage.d.ts.map +1 -0
- package/dist/client/loadPage.js +62 -0
- package/dist/client/loadPage.js.map +1 -0
- package/dist/client/prefetchLinks.d.ts +2 -0
- package/dist/client/prefetchLinks.d.ts.map +1 -0
- package/dist/client/prefetchLinks.js +55 -0
- package/dist/client/prefetchLinks.js.map +1 -0
- package/dist/client/theme-default/AlgoliaSearch.d.ts +12 -0
- package/dist/client/theme-default/AlgoliaSearch.d.ts.map +1 -0
- package/dist/client/theme-default/AlgoliaSearch.js +66 -0
- package/dist/client/theme-default/AlgoliaSearch.js.map +1 -0
- package/dist/client/theme-default/Features.d.ts +9 -0
- package/dist/client/theme-default/Features.d.ts.map +1 -0
- package/dist/client/theme-default/Features.js +25 -0
- package/dist/client/theme-default/Features.js.map +1 -0
- package/dist/client/theme-default/Hero.d.ts +9 -0
- package/dist/client/theme-default/Hero.d.ts.map +1 -0
- package/dist/client/theme-default/Hero.js +23 -0
- package/dist/client/theme-default/Hero.js.map +1 -0
- package/dist/client/theme-default/Layout.d.ts +6 -0
- package/dist/client/theme-default/Layout.d.ts.map +1 -0
- package/dist/client/theme-default/Layout.js +224 -0
- package/dist/client/theme-default/Layout.js.map +1 -0
- package/dist/client/theme-default/Logo.d.ts +16 -0
- package/dist/client/theme-default/Logo.d.ts.map +1 -0
- package/dist/client/theme-default/Logo.js +30 -0
- package/dist/client/theme-default/Logo.js.map +1 -0
- package/dist/client/theme-default/NavLinks.d.ts +12 -0
- package/dist/client/theme-default/NavLinks.d.ts.map +1 -0
- package/dist/client/theme-default/NavLinks.js +18 -0
- package/dist/client/theme-default/NavLinks.js.map +1 -0
- package/dist/client/theme-default/SidebarNav.d.ts +12 -0
- package/dist/client/theme-default/SidebarNav.d.ts.map +1 -0
- package/dist/client/theme-default/SidebarNav.js +21 -0
- package/dist/client/theme-default/SidebarNav.js.map +1 -0
- package/dist/client/theme-default/SocialLinks.d.ts +8 -0
- package/dist/client/theme-default/SocialLinks.d.ts.map +1 -0
- package/dist/client/theme-default/SocialLinks.js +13 -0
- package/dist/client/theme-default/SocialLinks.js.map +1 -0
- package/dist/client/theme-default/ThemeToggle.d.ts +4 -0
- package/dist/client/theme-default/ThemeToggle.d.ts.map +1 -0
- package/dist/client/theme-default/ThemeToggle.js +31 -0
- package/dist/client/theme-default/ThemeToggle.js.map +1 -0
- package/dist/client/theme-default/index.d.ts +2 -0
- package/dist/client/theme-default/index.d.ts.map +1 -0
- package/dist/client/theme-default/index.js +2 -0
- package/dist/client/theme-default/index.js.map +1 -0
- package/dist/client/types.d.ts +36 -0
- package/dist/client/types.d.ts.map +1 -0
- package/dist/client/types.js +2 -0
- package/dist/client/types.js.map +1 -0
- package/dist/client/usePageHead.d.ts +10 -0
- package/dist/client/usePageHead.d.ts.map +1 -0
- package/dist/client/usePageHead.js +182 -0
- package/dist/client/usePageHead.js.map +1 -0
- package/dist/client/useSiteSearch.d.ts +10 -0
- package/dist/client/useSiteSearch.d.ts.map +1 -0
- package/dist/client/useSiteSearch.js +54 -0
- package/dist/client/useSiteSearch.js.map +1 -0
- package/dist/node/build.d.ts +15 -0
- package/dist/node/build.d.ts.map +1 -0
- package/dist/node/build.js +310 -0
- package/dist/node/build.js.map +1 -0
- package/dist/node/buildCache.d.ts +15 -0
- package/dist/node/buildCache.d.ts.map +1 -0
- package/dist/node/buildCache.js +41 -0
- package/dist/node/buildCache.js.map +1 -0
- package/dist/node/check.d.ts +11 -0
- package/dist/node/check.d.ts.map +1 -0
- package/dist/node/check.js +228 -0
- package/dist/node/check.js.map +1 -0
- package/dist/node/cli.d.ts +2 -0
- package/dist/node/cli.d.ts.map +1 -0
- package/dist/node/cli.js +157 -0
- package/dist/node/cli.js.map +1 -0
- package/dist/node/config-helpers.d.ts +8 -0
- package/dist/node/config-helpers.d.ts.map +1 -0
- package/dist/node/config-helpers.js +5 -0
- package/dist/node/config-helpers.js.map +1 -0
- package/dist/node/config.d.ts +13 -0
- package/dist/node/config.d.ts.map +1 -0
- package/dist/node/config.js +167 -0
- package/dist/node/config.js.map +1 -0
- package/dist/node/content.d.ts +16 -0
- package/dist/node/content.d.ts.map +1 -0
- package/dist/node/content.js +72 -0
- package/dist/node/content.js.map +1 -0
- package/dist/node/createContentLoader.d.ts +19 -0
- package/dist/node/createContentLoader.d.ts.map +1 -0
- package/dist/node/createContentLoader.js +11 -0
- package/dist/node/createContentLoader.js.map +1 -0
- package/dist/node/devCss.d.ts +7 -0
- package/dist/node/devCss.d.ts.map +1 -0
- package/dist/node/devCss.js +70 -0
- package/dist/node/devCss.js.map +1 -0
- package/dist/node/devSsr.d.ts +6 -0
- package/dist/node/devSsr.d.ts.map +1 -0
- package/dist/node/devSsr.js +112 -0
- package/dist/node/devSsr.js.map +1 -0
- package/dist/node/dynamicRoutes.d.ts +21 -0
- package/dist/node/dynamicRoutes.d.ts.map +1 -0
- package/dist/node/dynamicRoutes.js +120 -0
- package/dist/node/dynamicRoutes.js.map +1 -0
- package/dist/node/favicon.d.ts +9 -0
- package/dist/node/favicon.d.ts.map +1 -0
- package/dist/node/favicon.js +71 -0
- package/dist/node/favicon.js.map +1 -0
- package/dist/node/feed.d.ts +7 -0
- package/dist/node/feed.d.ts.map +1 -0
- package/dist/node/feed.js +37 -0
- package/dist/node/feed.js.map +1 -0
- package/dist/node/hooks.d.ts +9 -0
- package/dist/node/hooks.d.ts.map +1 -0
- package/dist/node/hooks.js +20 -0
- package/dist/node/hooks.js.map +1 -0
- package/dist/node/html.d.ts +56 -0
- package/dist/node/html.d.ts.map +1 -0
- package/dist/node/html.js +222 -0
- package/dist/node/html.js.map +1 -0
- package/dist/node/index.d.ts +12 -0
- package/dist/node/index.d.ts.map +1 -0
- package/dist/node/index.js +9 -0
- package/dist/node/index.js.map +1 -0
- package/dist/node/init.d.ts +12 -0
- package/dist/node/init.d.ts.map +1 -0
- package/dist/node/init.js +93 -0
- package/dist/node/init.js.map +1 -0
- package/dist/node/lastUpdated.d.ts +3 -0
- package/dist/node/lastUpdated.d.ts.map +1 -0
- package/dist/node/lastUpdated.js +24 -0
- package/dist/node/lastUpdated.js.map +1 -0
- package/dist/node/loadSiteModule.d.ts +2 -0
- package/dist/node/loadSiteModule.d.ts.map +1 -0
- package/dist/node/loadSiteModule.js +10 -0
- package/dist/node/loadSiteModule.js.map +1 -0
- package/dist/node/markdown.d.ts +31 -0
- package/dist/node/markdown.d.ts.map +1 -0
- package/dist/node/markdown.js +508 -0
- package/dist/node/markdown.js.map +1 -0
- package/dist/node/markdownHeadings.d.ts +12 -0
- package/dist/node/markdownHeadings.d.ts.map +1 -0
- package/dist/node/markdownHeadings.js +70 -0
- package/dist/node/markdownHeadings.js.map +1 -0
- package/dist/node/markdownInclude.d.ts +6 -0
- package/dist/node/markdownInclude.d.ts.map +1 -0
- package/dist/node/markdownInclude.js +74 -0
- package/dist/node/markdownInclude.js.map +1 -0
- package/dist/node/markdownSnippets.d.ts +32 -0
- package/dist/node/markdownSnippets.d.ts.map +1 -0
- package/dist/node/markdownSnippets.js +172 -0
- package/dist/node/markdownSnippets.js.map +1 -0
- package/dist/node/mdx.d.ts +3 -0
- package/dist/node/mdx.d.ts.map +1 -0
- package/dist/node/mdx.js +9 -0
- package/dist/node/mdx.js.map +1 -0
- package/dist/node/packageRoot.d.ts +4 -0
- package/dist/node/packageRoot.d.ts.map +1 -0
- package/dist/node/packageRoot.js +7 -0
- package/dist/node/packageRoot.js.map +1 -0
- package/dist/node/pageDataLoaders.d.ts +6 -0
- package/dist/node/pageDataLoaders.d.ts.map +1 -0
- package/dist/node/pageDataLoaders.js +68 -0
- package/dist/node/pageDataLoaders.js.map +1 -0
- package/dist/node/paths.d.ts +5 -0
- package/dist/node/paths.d.ts.map +1 -0
- package/dist/node/paths.js +12 -0
- package/dist/node/paths.js.map +1 -0
- package/dist/node/plugin.d.ts +7 -0
- package/dist/node/plugin.d.ts.map +1 -0
- package/dist/node/plugin.js +282 -0
- package/dist/node/plugin.js.map +1 -0
- package/dist/node/resolveDeps.d.ts +5 -0
- package/dist/node/resolveDeps.d.ts.map +1 -0
- package/dist/node/resolveDeps.js +25 -0
- package/dist/node/resolveDeps.js.map +1 -0
- package/dist/node/serve.d.ts +6 -0
- package/dist/node/serve.d.ts.map +1 -0
- package/dist/node/serve.js +41 -0
- package/dist/node/serve.js.map +1 -0
- package/dist/node/server.d.ts +7 -0
- package/dist/node/server.d.ts.map +1 -0
- package/dist/node/server.js +55 -0
- package/dist/node/server.js.map +1 -0
- package/dist/node/siteConfig.d.ts +206 -0
- package/dist/node/siteConfig.d.ts.map +1 -0
- package/dist/node/siteConfig.js +2 -0
- package/dist/node/siteConfig.js.map +1 -0
- package/dist/node/tagIndex.d.ts +27 -0
- package/dist/node/tagIndex.d.ts.map +1 -0
- package/dist/node/tagIndex.js +84 -0
- package/dist/node/tagIndex.js.map +1 -0
- package/dist/shared/contentChunk.d.ts +4 -0
- package/dist/shared/contentChunk.d.ts.map +1 -0
- package/dist/shared/contentChunk.js +14 -0
- package/dist/shared/contentChunk.js.map +1 -0
- package/dist/shared/contentSchema.d.ts +43 -0
- package/dist/shared/contentSchema.d.ts.map +1 -0
- package/dist/shared/contentSchema.js +44 -0
- package/dist/shared/contentSchema.js.map +1 -0
- package/dist/shared/deadLinks.d.ts +9 -0
- package/dist/shared/deadLinks.d.ts.map +1 -0
- package/dist/shared/deadLinks.js +27 -0
- package/dist/shared/deadLinks.js.map +1 -0
- package/dist/shared/escapeHtml.d.ts +3 -0
- package/dist/shared/escapeHtml.d.ts.map +1 -0
- package/dist/shared/escapeHtml.js +11 -0
- package/dist/shared/escapeHtml.js.map +1 -0
- package/dist/shared/index.d.ts +15 -0
- package/dist/shared/index.d.ts.map +1 -0
- package/dist/shared/index.js +15 -0
- package/dist/shared/index.js.map +1 -0
- package/dist/shared/locale.d.ts +11 -0
- package/dist/shared/locale.d.ts.map +1 -0
- package/dist/shared/locale.js +84 -0
- package/dist/shared/locale.js.map +1 -0
- package/dist/shared/pageChrome.d.ts +80 -0
- package/dist/shared/pageChrome.d.ts.map +1 -0
- package/dist/shared/pageChrome.js +160 -0
- package/dist/shared/pageChrome.js.map +1 -0
- package/dist/shared/pageHead.d.ts +3 -0
- package/dist/shared/pageHead.d.ts.map +1 -0
- package/dist/shared/pageHead.js +28 -0
- package/dist/shared/pageHead.js.map +1 -0
- package/dist/shared/pageMeta.d.ts +60 -0
- package/dist/shared/pageMeta.d.ts.map +1 -0
- package/dist/shared/pageMeta.js +72 -0
- package/dist/shared/pageMeta.js.map +1 -0
- package/dist/shared/rewrites.d.ts +5 -0
- package/dist/shared/rewrites.d.ts.map +1 -0
- package/dist/shared/rewrites.js +23 -0
- package/dist/shared/rewrites.js.map +1 -0
- package/dist/shared/route.d.ts +5 -0
- package/dist/shared/route.d.ts.map +1 -0
- package/dist/shared/route.js +15 -0
- package/dist/shared/route.js.map +1 -0
- package/dist/shared/search.d.ts +39 -0
- package/dist/shared/search.d.ts.map +1 -0
- package/dist/shared/search.js +63 -0
- package/dist/shared/search.js.map +1 -0
- package/dist/shared/sidebar.d.ts +18 -0
- package/dist/shared/sidebar.d.ts.map +1 -0
- package/dist/shared/sidebar.js +51 -0
- package/dist/shared/sidebar.js.map +1 -0
- package/dist/shared/slug.d.ts +4 -0
- package/dist/shared/slug.d.ts.map +1 -0
- package/dist/shared/slug.js +21 -0
- package/dist/shared/slug.js.map +1 -0
- package/dist/shared/socialIcons.d.ts +13 -0
- package/dist/shared/socialIcons.d.ts.map +1 -0
- package/dist/shared/socialIcons.js +27 -0
- package/dist/shared/socialIcons.js.map +1 -0
- package/dist/shared/tags.d.ts +6 -0
- package/dist/shared/tags.d.ts.map +1 -0
- package/dist/shared/tags.js +39 -0
- package/dist/shared/tags.js.map +1 -0
- package/dist/shared/theme.d.ts +8 -0
- package/dist/shared/theme.d.ts.map +1 -0
- package/dist/shared/theme.js +25 -0
- package/dist/shared/theme.js.map +1 -0
- package/dist/shared/themeLabels.d.ts +18 -0
- package/dist/shared/themeLabels.d.ts.map +1 -0
- package/dist/shared/themeLabels.js +51 -0
- package/dist/shared/themeLabels.js.map +1 -0
- package/dist/shared/url.d.ts +7 -0
- package/dist/shared/url.d.ts.map +1 -0
- package/dist/shared/url.js +10 -0
- package/dist/shared/url.js.map +1 -0
- package/package.json +108 -0
- package/src/client/app.tsx +194 -0
- package/src/client/entry-client.tsx +27 -0
- package/src/client/entry-ssr.tsx +77 -0
- package/src/client/index.ts +2 -0
- package/src/client/loadPage.ts +68 -0
- package/src/client/prefetchLinks.ts +60 -0
- package/src/client/theme-default/AlgoliaSearch.tsx +89 -0
- package/src/client/theme-default/Features.tsx +75 -0
- package/src/client/theme-default/Hero.tsx +60 -0
- package/src/client/theme-default/Layout.tsx +525 -0
- package/src/client/theme-default/Logo.tsx +104 -0
- package/src/client/theme-default/NavLinks.tsx +65 -0
- package/src/client/theme-default/SidebarNav.tsx +103 -0
- package/src/client/theme-default/SocialLinks.tsx +41 -0
- package/src/client/theme-default/ThemeToggle.tsx +79 -0
- package/src/client/theme-default/index.ts +1 -0
- package/src/client/theme-default/styles.css +1450 -0
- package/src/client/types.ts +37 -0
- package/src/client/usePageHead.ts +212 -0
- package/src/client/useSiteSearch.ts +57 -0
- package/src/client/virtual.d.ts +103 -0
- package/src/shared/contentChunk.ts +14 -0
- package/src/shared/contentSchema.ts +85 -0
- package/src/shared/deadLinks.ts +33 -0
- package/src/shared/escapeHtml.ts +11 -0
- package/src/shared/index.ts +83 -0
- package/src/shared/locale.ts +116 -0
- package/src/shared/pageChrome.ts +244 -0
- package/src/shared/pageHead.ts +26 -0
- package/src/shared/pageMeta.ts +136 -0
- package/src/shared/rewrites.ts +35 -0
- package/src/shared/route.ts +14 -0
- package/src/shared/search.ts +105 -0
- package/src/shared/sidebar.ts +67 -0
- package/src/shared/slug.ts +23 -0
- package/src/shared/socialIcons.ts +44 -0
- package/src/shared/tags.ts +36 -0
- package/src/shared/theme.ts +26 -0
- package/src/shared/themeLabels.ts +72 -0
- package/src/shared/url.ts +14 -0
- package/templates/default/.preactpress/config.ts +31 -0
- package/templates/default/README.md +45 -0
- package/templates/default/about.md +11 -0
- package/templates/default/guide/first-five-minutes.md +83 -0
- package/templates/default/index.html +18 -0
- package/templates/default/index.md +55 -0
- package/templates/default/package.json +15 -0
- package/templates/default/pnpm-lock.yaml +2917 -0
- package/templates/docs/.preactpress/config.ts +94 -0
- package/templates/docs/README.md +21 -0
- package/templates/docs/about.md +10 -0
- package/templates/docs/components/Counter.tsx +25 -0
- package/templates/docs/de/guide/getting-started.md +19 -0
- package/templates/docs/de/guide/what-is-preactpress.md +15 -0
- package/templates/docs/de/index.md +23 -0
- package/templates/docs/dist/404.html +29 -0
- package/templates/docs/dist/about/index.html +32 -0
- package/templates/docs/dist/assets/esm-DzlBxN5p.js +110 -0
- package/templates/docs/dist/assets/interactive-64o6YwrR.js +9 -0
- package/templates/docs/dist/assets/interactive-BedCloEw.js +9 -0
- package/templates/docs/dist/assets/main-BVLeh8GO.js +1 -0
- package/templates/docs/dist/assets/main-CreUBb3N.js +1 -0
- package/templates/docs/dist/assets/main-oodK-zZy.css +2 -0
- package/templates/docs/dist/de/guide/getting-started/index.html +36 -0
- package/templates/docs/dist/de/guide/what-is-preactpress/index.html +38 -0
- package/templates/docs/dist/de/index.html +29 -0
- package/templates/docs/dist/favicon-32.png +0 -0
- package/templates/docs/dist/favicon.png +0 -0
- package/templates/docs/dist/favicon.svg +28 -0
- package/templates/docs/dist/guide/advanced/index.html +53 -0
- package/templates/docs/dist/guide/commands/index.html +89 -0
- package/templates/docs/dist/guide/configuration/index.html +196 -0
- package/templates/docs/dist/guide/creating-pages/index.html +234 -0
- package/templates/docs/dist/guide/custom-themes/index.html +52 -0
- package/templates/docs/dist/guide/default-theme/index.html +53 -0
- package/templates/docs/dist/guide/deploy/index.html +195 -0
- package/templates/docs/dist/guide/first-five-minutes/index.html +99 -0
- package/templates/docs/dist/guide/getting-started/index.html +173 -0
- package/templates/docs/dist/guide/markdown-and-mdx/index.html +59 -0
- package/templates/docs/dist/guide/routing/index.html +192 -0
- package/templates/docs/dist/guide/what-is-preactpress/index.html +141 -0
- package/templates/docs/dist/index.html +30 -0
- package/templates/docs/dist/interactive/index.html +37 -0
- package/templates/docs/dist/markdown-examples/index.html +231 -0
- package/templates/docs/dist/preactpress-content/404.json +8 -0
- package/templates/docs/dist/preactpress-content/_index.json +50 -0
- package/templates/docs/dist/preactpress-content/about.json +15 -0
- package/templates/docs/dist/preactpress-content/de.json +45 -0
- package/templates/docs/dist/preactpress-content/de__guide__getting-started.json +26 -0
- package/templates/docs/dist/preactpress-content/de__guide__what-is-preactpress.json +21 -0
- package/templates/docs/dist/preactpress-content/guide__advanced.json +46 -0
- package/templates/docs/dist/preactpress-content/guide__commands.json +26 -0
- package/templates/docs/dist/preactpress-content/guide__configuration.json +51 -0
- package/templates/docs/dist/preactpress-content/guide__creating-pages.json +71 -0
- package/templates/docs/dist/preactpress-content/guide__custom-themes.json +15 -0
- package/templates/docs/dist/preactpress-content/guide__default-theme.json +36 -0
- package/templates/docs/dist/preactpress-content/guide__deploy.json +56 -0
- package/templates/docs/dist/preactpress-content/guide__first-five-minutes.json +36 -0
- package/templates/docs/dist/preactpress-content/guide__getting-started.json +51 -0
- package/templates/docs/dist/preactpress-content/guide__markdown-and-mdx.json +31 -0
- package/templates/docs/dist/preactpress-content/guide__routing.json +71 -0
- package/templates/docs/dist/preactpress-content/guide__what-is-preactpress.json +51 -0
- package/templates/docs/dist/preactpress-content/markdown-examples.json +71 -0
- package/templates/docs/dist/preactpress-content/tags__markdown.json +16 -0
- package/templates/docs/dist/preactpress-search.json +166 -0
- package/templates/docs/dist/preactpress-theme.js +1 -0
- package/templates/docs/dist/tags/markdown/index.html +32 -0
- package/templates/docs/guide/advanced.md +44 -0
- package/templates/docs/guide/commands.md +41 -0
- package/templates/docs/guide/configuration.md +130 -0
- package/templates/docs/guide/creating-pages.md +171 -0
- package/templates/docs/guide/custom-themes.md +39 -0
- package/templates/docs/guide/default-theme.md +41 -0
- package/templates/docs/guide/deploy.md +197 -0
- package/templates/docs/guide/first-five-minutes.md +82 -0
- package/templates/docs/guide/getting-started.md +146 -0
- package/templates/docs/guide/markdown-and-mdx.md +59 -0
- package/templates/docs/guide/routing.md +263 -0
- package/templates/docs/guide/what-is-preactpress.md +87 -0
- package/templates/docs/index.html +18 -0
- package/templates/docs/index.md +28 -0
- package/templates/docs/interactive.mdx +32 -0
- package/templates/docs/markdown-examples.md +72 -0
- package/templates/docs/package.json +15 -0
- package/templates/docs/partials/shared-note.md +3 -0
- package/templates/docs/parts/include-body.md +9 -0
- package/templates/docs/pnpm-lock.yaml +2917 -0
- package/templates/docs/snippets/greet.ts +3 -0
- package/templates/hono/.preactpress/config.ts +100 -0
- package/templates/hono/.preactpress/theme/CodeSnippet.tsx +41 -0
- package/templates/hono/.preactpress/theme/FeatureGrid.tsx +27 -0
- package/templates/hono/.preactpress/theme/Hero.tsx +45 -0
- package/templates/hono/.preactpress/theme/Layout.tsx +388 -0
- package/templates/hono/.preactpress/theme/Logo.tsx +26 -0
- package/templates/hono/.preactpress/theme/ThemeToggle.tsx +72 -0
- package/templates/hono/.preactpress/theme/hono.css +1058 -0
- package/templates/hono/README.md +41 -0
- package/templates/hono/about.md +10 -0
- package/templates/hono/components/Counter.tsx +25 -0
- package/templates/hono/de/about.md +10 -0
- package/templates/hono/de/guide/commands.md +44 -0
- package/templates/hono/de/guide/configuration.md +64 -0
- package/templates/hono/de/guide/deploy.md +197 -0
- package/templates/hono/de/guide/first-five-minutes.md +82 -0
- package/templates/hono/de/guide/getting-started.md +146 -0
- package/templates/hono/de/guide/routing.md +220 -0
- package/templates/hono/de/guide/seiten-erstellen.md +171 -0
- package/templates/hono/de/guide/what-is-preactpress.md +87 -0
- package/templates/hono/de/index.mdx +51 -0
- package/templates/hono/de/interactive.mdx +32 -0
- package/templates/hono/de/markdown-examples.md +142 -0
- package/templates/hono/de/parts/include-body.md +9 -0
- package/templates/hono/de/snippets/greet.ts +3 -0
- package/templates/hono/dist/404.html +29 -0
- package/templates/hono/dist/README/index.html +104 -0
- package/templates/hono/dist/about/index.html +32 -0
- package/templates/hono/dist/assets/Counter-CCEByS-J.js +1 -0
- package/templates/hono/dist/assets/Hero--o6WMNvm.js +2 -0
- package/templates/hono/dist/assets/de-D5r6Ye70.js +10 -0
- package/templates/hono/dist/assets/hono-BXWYYdyv.js +10 -0
- package/templates/hono/dist/assets/interactive-Bxo-WBpC.js +9 -0
- package/templates/hono/dist/assets/interactive-BznI4IQ3.js +9 -0
- package/templates/hono/dist/assets/main-Bqi-VFEk.js +2 -0
- package/templates/hono/dist/assets/main-DIIN7FO0.css +1 -0
- package/templates/hono/dist/de/about/index.html +32 -0
- package/templates/hono/dist/de/guide/commands/index.html +41 -0
- package/templates/hono/dist/de/guide/configuration/index.html +105 -0
- package/templates/hono/dist/de/guide/deploy/index.html +195 -0
- package/templates/hono/dist/de/guide/first-five-minutes/index.html +99 -0
- package/templates/hono/dist/de/guide/getting-started/index.html +173 -0
- package/templates/hono/dist/de/guide/routing/index.html +165 -0
- package/templates/hono/dist/de/guide/seiten-erstellen/index.html +234 -0
- package/templates/hono/dist/de/guide/what-is-preactpress/index.html +141 -0
- package/templates/hono/dist/de/index.html +30 -0
- package/templates/hono/dist/de/interactive/index.html +37 -0
- package/templates/hono/dist/de/markdown-examples/index.html +97 -0
- package/templates/hono/dist/de/parts/include-body/index.html +36 -0
- package/templates/hono/dist/de/tags/markdown/index.html +32 -0
- package/templates/hono/dist/favicon-32.png +0 -0
- package/templates/hono/dist/favicon.png +0 -0
- package/templates/hono/dist/favicon.svg +28 -0
- package/templates/hono/dist/guide/commands/index.html +41 -0
- package/templates/hono/dist/guide/configuration/index.html +158 -0
- package/templates/hono/dist/guide/creating-pages/index.html +234 -0
- package/templates/hono/dist/guide/deploy/index.html +195 -0
- package/templates/hono/dist/guide/first-five-minutes/index.html +99 -0
- package/templates/hono/dist/guide/getting-started/index.html +173 -0
- package/templates/hono/dist/guide/routing/index.html +165 -0
- package/templates/hono/dist/guide/what-is-preactpress/index.html +141 -0
- package/templates/hono/dist/index.html +30 -0
- package/templates/hono/dist/interactive/index.html +37 -0
- package/templates/hono/dist/markdown-examples/index.html +105 -0
- package/templates/hono/dist/partials/shared-note/index.html +30 -0
- package/templates/hono/dist/parts/include-body/index.html +36 -0
- package/templates/hono/dist/preactpress-content/404.json +8 -0
- package/templates/hono/dist/preactpress-content/README.json +26 -0
- package/templates/hono/dist/preactpress-content/about.json +15 -0
- package/templates/hono/dist/preactpress-content/de__about.json +15 -0
- package/templates/hono/dist/preactpress-content/de__guide__commands.json +36 -0
- package/templates/hono/dist/preactpress-content/de__guide__configuration.json +41 -0
- package/templates/hono/dist/preactpress-content/de__guide__deploy.json +56 -0
- package/templates/hono/dist/preactpress-content/de__guide__first-five-minutes.json +36 -0
- package/templates/hono/dist/preactpress-content/de__guide__getting-started.json +51 -0
- package/templates/hono/dist/preactpress-content/de__guide__routing.json +61 -0
- package/templates/hono/dist/preactpress-content/de__guide__seiten-erstellen.json +71 -0
- package/templates/hono/dist/preactpress-content/de__guide__what-is-preactpress.json +51 -0
- package/templates/hono/dist/preactpress-content/de__markdown-examples.json +131 -0
- package/templates/hono/dist/preactpress-content/de__parts__include-body.json +16 -0
- package/templates/hono/dist/preactpress-content/de__tags__markdown.json +16 -0
- package/templates/hono/dist/preactpress-content/guide__commands.json +36 -0
- package/templates/hono/dist/preactpress-content/guide__configuration.json +51 -0
- package/templates/hono/dist/preactpress-content/guide__creating-pages.json +71 -0
- package/templates/hono/dist/preactpress-content/guide__deploy.json +56 -0
- package/templates/hono/dist/preactpress-content/guide__first-five-minutes.json +36 -0
- package/templates/hono/dist/preactpress-content/guide__getting-started.json +51 -0
- package/templates/hono/dist/preactpress-content/guide__routing.json +61 -0
- package/templates/hono/dist/preactpress-content/guide__what-is-preactpress.json +51 -0
- package/templates/hono/dist/preactpress-content/markdown-examples.json +141 -0
- package/templates/hono/dist/preactpress-content/partials__shared-note.json +10 -0
- package/templates/hono/dist/preactpress-content/parts__include-body.json +16 -0
- package/templates/hono/dist/preactpress-content/tags__markdown.json +16 -0
- package/templates/hono/dist/preactpress-search.json +242 -0
- package/templates/hono/dist/preactpress-theme.js +1 -0
- package/templates/hono/dist/tags/markdown/index.html +32 -0
- package/templates/hono/guide/commands.md +44 -0
- package/templates/hono/guide/configuration.md +177 -0
- package/templates/hono/guide/creating-pages.md +171 -0
- package/templates/hono/guide/deploy.md +197 -0
- package/templates/hono/guide/first-five-minutes.md +82 -0
- package/templates/hono/guide/getting-started.md +146 -0
- package/templates/hono/guide/routing.md +263 -0
- package/templates/hono/guide/what-is-preactpress.md +87 -0
- package/templates/hono/index.html +18 -0
- package/templates/hono/index.mdx +51 -0
- package/templates/hono/interactive.mdx +32 -0
- package/templates/hono/markdown-examples.md +160 -0
- package/templates/hono/package.json +15 -0
- package/templates/hono/partials/shared-note.md +3 -0
- package/templates/hono/parts/include-body.md +9 -0
- package/templates/hono/pnpm-lock.yaml +2917 -0
- package/templates/hono/snippets/greet.ts +3 -0
- package/templates/magazine/.preactpress/config.ts +36 -0
- package/templates/magazine/.preactpress/theme/Layout.tsx +319 -0
- package/templates/magazine/.preactpress/theme/TeaserGrid.tsx +39 -0
- package/templates/magazine/.preactpress/theme/ThemeToggle.tsx +73 -0
- package/templates/magazine/.preactpress/theme/magazine.css +587 -0
- package/templates/magazine/article-markets.md +24 -0
- package/templates/magazine/article-tech.mdx +35 -0
- package/templates/magazine/index.data.ts +19 -0
- package/templates/magazine/index.html +14 -0
- package/templates/magazine/index.mdx +13 -0
- package/templates/magazine/package.json +15 -0
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>What is PreactPress? | Hono Starter</title>
|
|
7
|
+
<script src="/preactpress-theme.js"></script>
|
|
8
|
+
<meta name="description" content="Learn what PreactPress is and when to use it">
|
|
9
|
+
<meta property="og:title" content="What is PreactPress? | Hono Starter">
|
|
10
|
+
<meta property="og:description" content="Learn what PreactPress is and when to use it">
|
|
11
|
+
<meta property="og:type" content="website">
|
|
12
|
+
<meta property="og:url" content="/guide/what-is-preactpress/">
|
|
13
|
+
<meta name="twitter:card" content="summary">
|
|
14
|
+
<meta name="twitter:title" content="What is PreactPress? | Hono Starter">
|
|
15
|
+
<meta name="twitter:description" content="Learn what PreactPress is and when to use it">
|
|
16
|
+
<link rel="canonical" href="/guide/what-is-preactpress/">
|
|
17
|
+
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","headline":"What is PreactPress? | Hono Starter","name":"What is PreactPress? | Hono Starter","description":"Learn what PreactPress is and when to use it","url":"/guide/what-is-preactpress/","dateModified":"2026-06-04T07:32:52.322Z"}</script>
|
|
18
|
+
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
19
|
+
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
|
|
20
|
+
<link rel="icon" href="/favicon.png" type="image/png" sizes="any">
|
|
21
|
+
<link rel="apple-touch-icon" href="/favicon.png">
|
|
22
|
+
<link rel="stylesheet" crossorigin href="/assets/main-DIIN7FO0.css">
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
<template id="__PREACTPRESS_PAGE_DATA__">{"kind":"markdown","meta":{"title":"What is PreactPress?","description":"Learn what PreactPress is and when to use it"},"html":"\u003ch1 id=\"what-is-preactpress\" class=\"pp-heading\">What is PreactPress?\u003ca class=\"pp-heading-anchor\" href=\"#what-is-preactpress\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h1>\n\u003cp>PreactPress is a static site generator for fast, content-focused websites. You write pages in Markdown or MDX, configure navigation and theme options in \u003ccode>.preactpress/config.ts\u003c/code>, and PreactPress generates static HTML that can be deployed to any static host.\u003c/p>\n\u003cp>It is built with \u003ca href=\"https://vite.dev/\" target=\"_blank\" rel=\"noopener noreferrer\">Vite\u003c/a> and \u003ca href=\"https://preactjs.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Preact\u003c/a>. The workflow is inspired by VitePress, but the component model is Preact instead of Vue.\u003c/p>\n\u003ch2 id=\"use-cases\" class=\"pp-heading\">Use cases\u003ca class=\"pp-heading-anchor\" href=\"#use-cases\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003ch3 id=\"documentation\" class=\"pp-heading\">Documentation\u003ca class=\"pp-heading-anchor\" href=\"#documentation\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h3>\n\u003cp>PreactPress ships with a small default theme for technical documentation. It includes navigation, sidebar groups, outline links, search, last-updated metadata, and Markdown rendering out of the box.\u003c/p>\n\u003cp>Use it when your docs live naturally as files:\u003c/p>\n\u003cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003ccode>\u003cspan class=\"line\">\u003cspan>index.md\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003cspan>guide/getting-started.md\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003cspan>guide/routing.md\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003cspan>reference/api.md\u003c/span>\u003c/span>\u003c/code>\u003c/pre>\u003cp>Every Markdown or MDX file becomes a page, so documentation grows by adding files and linking them from the sidebar.\u003c/p>\n\u003ch3 id=\"blogs-portfolios-and-marketing-sites\" class=\"pp-heading\">Blogs, portfolios, and marketing sites\u003ca class=\"pp-heading-anchor\" href=\"#blogs-portfolios-and-marketing-sites\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h3>\n\u003cp>PreactPress can also power blogs, portfolios, and small marketing sites. Markdown handles content, MDX brings in interactive Preact components, and custom themes let you replace the default documentation shell.\u003c/p>\n\u003cp>The separate \u003ccode>preactpress-examples\u003c/code> project includes a custom-theme example that shows a magazine-style layout with article teasers and tag pages.\u003c/p>\n\u003ch2 id=\"developer-experience\" class=\"pp-heading\">Developer experience\u003ca class=\"pp-heading-anchor\" href=\"#developer-experience\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>PreactPress focuses on keeping content work simple:\u003c/p>\n\u003ctable>\n\u003cthead>\n\u003ctr>\n\u003cth>Feature\u003c/th>\n\u003cth>What it gives you\u003c/th>\n\u003c/tr>\n\u003c/thead>\n\u003ctbody>\n\u003ctr>\n\u003ctd>Vite dev server\u003c/td>\n\u003ctd>Fast startup and hot updates while editing content\u003c/td>\n\u003c/tr>\n\u003ctr>\n\u003ctd>Markdown frontmatter\u003c/td>\n\u003ctd>Page titles, descriptions, tags, draft status, and social metadata\u003c/td>\n\u003c/tr>\n\u003ctr>\n\u003ctd>MDX\u003c/td>\n\u003ctd>Preact components inside content pages\u003c/td>\n\u003c/tr>\n\u003ctr>\n\u003ctd>Default theme\u003c/td>\n\u003ctd>Nav, sidebar, outline, search, footer, locale switcher\u003c/td>\n\u003c/tr>\n\u003ctr>\n\u003ctd>\u003ccode>preactpress check\u003c/code>\u003c/td>\n\u003ctd>Config, route, and link validation before release\u003c/td>\n\u003c/tr>\n\u003c/tbody>\n\u003c/table>\n\u003cp>For regular content, use \u003ccode>.md\u003c/code>. When a page needs interactivity, use \u003ccode>.mdx\u003c/code> and import a Preact component:\u003c/p>\n\u003cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003ccode>\u003cspan class=\"line\">\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">import Counter from './components/Counter.tsx'\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003c/span>\n\u003cspan class=\"line\">\u003cspan style=\"color:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold\">## Demo\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003c/span>\n\u003cspan class=\"line\">\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">&#x3C;Counter initial={3} />\u003c/span>\u003c/span>\u003c/code>\u003c/pre>\u003ch2 id=\"performance\" class=\"pp-heading\">Performance\u003ca class=\"pp-heading-anchor\" href=\"#performance\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>PreactPress produces static HTML for every route during the production build. The first visit receives HTML that already contains the page content, which is good for loading speed and SEO.\u003c/p>\n\u003cp>After hydration, client-side navigation takes over. Markdown pages are loaded as small JSON payloads from \u003ccode>preactpress-content/*.json\u003c/code>, so large sites do not need to ship every Markdown body in the initial JavaScript bundle.\u003c/p>\n\u003cp>The production output is static files only:\u003c/p>\n\u003ctable>\n\u003cthead>\n\u003ctr>\n\u003cth>Output\u003c/th>\n\u003cth>Purpose\u003c/th>\n\u003c/tr>\n\u003c/thead>\n\u003ctbody>\n\u003ctr>\n\u003ctd>\u003ccode>index.html\u003c/code>, \u003ccode>*/index.html\u003c/code>\u003c/td>\n\u003ctd>One HTML file per route\u003c/td>\n\u003c/tr>\n\u003ctr>\n\u003ctd>\u003ccode>assets/*\u003c/code>\u003c/td>\n\u003ctd>Hashed JavaScript and CSS from Vite\u003c/td>\n\u003c/tr>\n\u003ctr>\n\u003ctd>\u003ccode>preactpress-search.json\u003c/code>\u003c/td>\n\u003ctd>Search data for the default theme\u003c/td>\n\u003c/tr>\n\u003ctr>\n\u003ctd>\u003ccode>preactpress-content/*.json\u003c/code>\u003c/td>\n\u003ctd>Lazy-loaded Markdown page payloads\u003c/td>\n\u003c/tr>\n\u003ctr>\n\u003ctd>\u003ccode>404.html\u003c/code>\u003c/td>\n\u003ctd>Not-found page\u003c/td>\n\u003c/tr>\n\u003c/tbody>\n\u003c/table>\n\u003ch2 id=\"what-about-vitepress\" class=\"pp-heading\">What about VitePress?\u003ca class=\"pp-heading-anchor\" href=\"#what-about-vitepress\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>If you know VitePress, PreactPress should feel familiar: both use Vite, file-based Markdown routing, a default docs theme, and static output.\u003c/p>\n\u003cp>The main difference is the UI stack. VitePress uses Vue. PreactPress uses Preact and MDX, so interactive content and custom themes are written as Preact components.\u003c/p>\n\u003cp>PreactPress is also static-only in production. You build the site once, upload the output directory, and serve it from Netlify, Vercel, Cloudflare Pages, GitHub Pages, S3, Nginx, or another static host.\u003c/p>\n\u003ch2 id=\"next-steps\" class=\"pp-heading\">Next steps\u003ca class=\"pp-heading-anchor\" href=\"#next-steps\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003ctable>\n\u003cthead>\n\u003ctr>\n\u003cth>Page\u003c/th>\n\u003cth>Why\u003c/th>\n\u003c/tr>\n\u003c/thead>\n\u003ctbody>\n\u003ctr>\n\u003ctd>\u003ca href=\"/guide/getting-started\">Getting Started\u003c/a>\u003c/td>\n\u003ctd>Install PreactPress and understand the starter structure\u003c/td>\n\u003c/tr>\n\u003ctr>\n\u003ctd>\u003ca href=\"/guide/routing\">Routing\u003c/a>\u003c/td>\n\u003ctd>Learn how files become URLs\u003c/td>\n\u003c/tr>\n\u003ctr>\n\u003ctd>\u003ca href=\"/guide/deploy\">Deploy\u003c/a>\u003c/td>\n\u003ctd>Build and publish a static site\u003c/td>\n\u003c/tr>\n\u003c/tbody>\n\u003c/table>\n","title":"What is PreactPress?","description":"Learn what PreactPress is and when to use it","tags":[],"pageType":"website","headings":[{"id":"use-cases","text":"Use cases","level":2},{"id":"documentation","text":"Documentation","level":3},{"id":"blogs-portfolios-and-marketing-sites","text":"Blogs, portfolios, and marketing sites","level":3},{"id":"developer-experience","text":"Developer experience","level":2},{"id":"performance","text":"Performance","level":2},{"id":"what-about-vitepress","text":"What about VitePress?","level":2},{"id":"next-steps","text":"Next steps","level":2}],"relativePath":"guide/what-is-preactpress.md","lastUpdated":"2026-06-04T07:32:52.322Z"}</template>
|
|
26
|
+
<div id="app"><div class="hn-site"><a class="hn-skip" href="#content">Skip to content</a><header class="hn-header"><div class="hn-header-inner"><a class="hn-brand" href="/" aria-label="Hono Starter"><span class="hn-logo" aria-label="Hono Starter"><svg aria-hidden="true" viewBox="0 0 36 36" width="36" height="36"><rect width="36" height="36" rx="11" fill="currentColor" opacity="0.12"></rect><path d="M19.8 5.5c.8 4-2.8 5.9-4.7 8.2-1.8 2.1-2.5 4.9-.3 7 0-2.8 1.7-4.6 4.2-6.7 3.2 3 5.3 5.8 5.3 9.2 0 4.4-3.3 7.3-7.6 7.3-4.8 0-8.3-3.6-8.3-8.4 0-6.1 6.3-9.2 11.4-16.6Z" fill="currentColor"></path><path d="M21.7 25.7c0 2.2-1.7 3.8-3.9 3.8s-4-1.6-4-3.8c0-1.7 1-3.1 3.4-5.2.1 1.7 1.4 2.6 2.4 3.4.8.6 2.1 1 2.1 1.8Z" fill="currentColor" opacity="0.38"></path></svg><span>Hono Starter</span></span></a><div class="hn-header-actions"><nav class="hn-nav" aria-label="Main navigation"><a class="active" href="/guide/what-is-preactpress" aria-current="page">Docs</a><a class href="/markdown-examples">Examples</a><a class href="/about">About</a></nav><div class="hn-social" aria-label="Social links"><a href="https://github.com/your-org/your-project" aria-label="GitHub"><span><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.404 1.02.005 2.04.137 3 .404 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></span></a></div><details class="hn-locale-switcher"><summary>English</summary><div class="hn-locale-menu"><a href="/guide/what-is-preactpress" aria-current="page" class="active">English</a><a href="/de/guide/what-is-preactpress" class>Deutsch</a></div></details><button type="button" class="hn-theme-toggle" aria-label="Toggle theme"><span class="hn-theme-toggle-moon" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"><path d="M21 14.8A8.5 8.5 0 0 1 9.2 3a7 7 0 1 0 11.8 11.8Z" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7"></path></svg></span><span class="hn-theme-toggle-sun" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="3.5" stroke-width="1.7"></circle><path d="M12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4" stroke-linecap="round" stroke-width="1.7"></path></svg></span></button></div></div></header><div class="hn-doc-shell"><aside class="hn-sidebar" aria-label="Documentation navigation"><div class="hn-sidebar-panel"><label class="hn-search"><span>Search pages</span><input type="search" value placeholder="Filter documentation..."/></label><div class="hn-sidebar-group"><h2>Introduction</h2><ul><li><a class href="/">Welcome</a></li><li><a class="active" href="/guide/what-is-preactpress" aria-current="page">What is PreactPress?</a></li><li><a class href="/guide/getting-started">Getting Started</a></li><li><a class href="/guide/routing">Routing</a></li><li><a class href="/guide/deploy">Deploy</a></li><li><a class href="/guide/first-five-minutes">Your first 5 minutes</a></li><li><a class href="/guide/creating-pages">Creating pages</a></li><li><a class href="/guide/commands">Commands</a></li><li><a class href="/guide/configuration">Configuration</a></li></ul></div><div class="hn-sidebar-group"><h2>Reference</h2><ul><li><a class href="/markdown-examples">Markdown examples</a></li><li><a class href="/interactive">Interactive MDX</a></li></ul></div></div></aside><main id="content" class="hn-doc-main"><article class="hn-doc"><h1 class="hn-doc-title">What is PreactPress?</h1><p class="hn-doc-lead">Learn what PreactPress is and when to use it</p><div class="hn-doc-content"><h1 id="what-is-preactpress" class="pp-heading">What is PreactPress?<a class="pp-heading-anchor" href="#what-is-preactpress" aria-label="Link to this section">#</a></h1>
|
|
27
|
+
<p>PreactPress is a static site generator for fast, content-focused websites. You write pages in Markdown or MDX, configure navigation and theme options in <code>.preactpress/config.ts</code>, and PreactPress generates static HTML that can be deployed to any static host.</p>
|
|
28
|
+
<p>It is built with <a href="https://vite.dev/" target="_blank" rel="noopener noreferrer">Vite</a> and <a href="https://preactjs.com/" target="_blank" rel="noopener noreferrer">Preact</a>. The workflow is inspired by VitePress, but the component model is Preact instead of Vue.</p>
|
|
29
|
+
<h2 id="use-cases" class="pp-heading">Use cases<a class="pp-heading-anchor" href="#use-cases" aria-label="Link to this section">#</a></h2>
|
|
30
|
+
<h3 id="documentation" class="pp-heading">Documentation<a class="pp-heading-anchor" href="#documentation" aria-label="Link to this section">#</a></h3>
|
|
31
|
+
<p>PreactPress ships with a small default theme for technical documentation. It includes navigation, sidebar groups, outline links, search, last-updated metadata, and Markdown rendering out of the box.</p>
|
|
32
|
+
<p>Use it when your docs live naturally as files:</p>
|
|
33
|
+
<pre class="shiki shiki-themes github-light github-dark" style="background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8" tabindex="0"><code><span class="line"><span>index.md</span></span>
|
|
34
|
+
<span class="line"><span>guide/getting-started.md</span></span>
|
|
35
|
+
<span class="line"><span>guide/routing.md</span></span>
|
|
36
|
+
<span class="line"><span>reference/api.md</span></span></code></pre><p>Every Markdown or MDX file becomes a page, so documentation grows by adding files and linking them from the sidebar.</p>
|
|
37
|
+
<h3 id="blogs-portfolios-and-marketing-sites" class="pp-heading">Blogs, portfolios, and marketing sites<a class="pp-heading-anchor" href="#blogs-portfolios-and-marketing-sites" aria-label="Link to this section">#</a></h3>
|
|
38
|
+
<p>PreactPress can also power blogs, portfolios, and small marketing sites. Markdown handles content, MDX brings in interactive Preact components, and custom themes let you replace the default documentation shell.</p>
|
|
39
|
+
<p>The separate <code>preactpress-examples</code> project includes a custom-theme example that shows a magazine-style layout with article teasers and tag pages.</p>
|
|
40
|
+
<h2 id="developer-experience" class="pp-heading">Developer experience<a class="pp-heading-anchor" href="#developer-experience" aria-label="Link to this section">#</a></h2>
|
|
41
|
+
<p>PreactPress focuses on keeping content work simple:</p>
|
|
42
|
+
<table>
|
|
43
|
+
<thead>
|
|
44
|
+
<tr>
|
|
45
|
+
<th>Feature</th>
|
|
46
|
+
<th>What it gives you</th>
|
|
47
|
+
</tr>
|
|
48
|
+
</thead>
|
|
49
|
+
<tbody>
|
|
50
|
+
<tr>
|
|
51
|
+
<td>Vite dev server</td>
|
|
52
|
+
<td>Fast startup and hot updates while editing content</td>
|
|
53
|
+
</tr>
|
|
54
|
+
<tr>
|
|
55
|
+
<td>Markdown frontmatter</td>
|
|
56
|
+
<td>Page titles, descriptions, tags, draft status, and social metadata</td>
|
|
57
|
+
</tr>
|
|
58
|
+
<tr>
|
|
59
|
+
<td>MDX</td>
|
|
60
|
+
<td>Preact components inside content pages</td>
|
|
61
|
+
</tr>
|
|
62
|
+
<tr>
|
|
63
|
+
<td>Default theme</td>
|
|
64
|
+
<td>Nav, sidebar, outline, search, footer, locale switcher</td>
|
|
65
|
+
</tr>
|
|
66
|
+
<tr>
|
|
67
|
+
<td><code>preactpress check</code></td>
|
|
68
|
+
<td>Config, route, and link validation before release</td>
|
|
69
|
+
</tr>
|
|
70
|
+
</tbody>
|
|
71
|
+
</table>
|
|
72
|
+
<p>For regular content, use <code>.md</code>. When a page needs interactivity, use <code>.mdx</code> and import a Preact component:</p>
|
|
73
|
+
<pre class="shiki shiki-themes github-light github-dark" style="background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#24292E;--shiki-dark:#E1E4E8">import Counter from './components/Counter.tsx'</span></span>
|
|
74
|
+
<span class="line"></span>
|
|
75
|
+
<span class="line"><span style="color:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold">## Demo</span></span>
|
|
76
|
+
<span class="line"></span>
|
|
77
|
+
<span class="line"><span style="color:#24292E;--shiki-dark:#E1E4E8"><Counter initial={3} /></span></span></code></pre><h2 id="performance" class="pp-heading">Performance<a class="pp-heading-anchor" href="#performance" aria-label="Link to this section">#</a></h2>
|
|
78
|
+
<p>PreactPress produces static HTML for every route during the production build. The first visit receives HTML that already contains the page content, which is good for loading speed and SEO.</p>
|
|
79
|
+
<p>After hydration, client-side navigation takes over. Markdown pages are loaded as small JSON payloads from <code>preactpress-content/*.json</code>, so large sites do not need to ship every Markdown body in the initial JavaScript bundle.</p>
|
|
80
|
+
<p>The production output is static files only:</p>
|
|
81
|
+
<table>
|
|
82
|
+
<thead>
|
|
83
|
+
<tr>
|
|
84
|
+
<th>Output</th>
|
|
85
|
+
<th>Purpose</th>
|
|
86
|
+
</tr>
|
|
87
|
+
</thead>
|
|
88
|
+
<tbody>
|
|
89
|
+
<tr>
|
|
90
|
+
<td><code>index.html</code>, <code>*/index.html</code></td>
|
|
91
|
+
<td>One HTML file per route</td>
|
|
92
|
+
</tr>
|
|
93
|
+
<tr>
|
|
94
|
+
<td><code>assets/*</code></td>
|
|
95
|
+
<td>Hashed JavaScript and CSS from Vite</td>
|
|
96
|
+
</tr>
|
|
97
|
+
<tr>
|
|
98
|
+
<td><code>preactpress-search.json</code></td>
|
|
99
|
+
<td>Search data for the default theme</td>
|
|
100
|
+
</tr>
|
|
101
|
+
<tr>
|
|
102
|
+
<td><code>preactpress-content/*.json</code></td>
|
|
103
|
+
<td>Lazy-loaded Markdown page payloads</td>
|
|
104
|
+
</tr>
|
|
105
|
+
<tr>
|
|
106
|
+
<td><code>404.html</code></td>
|
|
107
|
+
<td>Not-found page</td>
|
|
108
|
+
</tr>
|
|
109
|
+
</tbody>
|
|
110
|
+
</table>
|
|
111
|
+
<h2 id="what-about-vitepress" class="pp-heading">What about VitePress?<a class="pp-heading-anchor" href="#what-about-vitepress" aria-label="Link to this section">#</a></h2>
|
|
112
|
+
<p>If you know VitePress, PreactPress should feel familiar: both use Vite, file-based Markdown routing, a default docs theme, and static output.</p>
|
|
113
|
+
<p>The main difference is the UI stack. VitePress uses Vue. PreactPress uses Preact and MDX, so interactive content and custom themes are written as Preact components.</p>
|
|
114
|
+
<p>PreactPress is also static-only in production. You build the site once, upload the output directory, and serve it from Netlify, Vercel, Cloudflare Pages, GitHub Pages, S3, Nginx, or another static host.</p>
|
|
115
|
+
<h2 id="next-steps" class="pp-heading">Next steps<a class="pp-heading-anchor" href="#next-steps" aria-label="Link to this section">#</a></h2>
|
|
116
|
+
<table>
|
|
117
|
+
<thead>
|
|
118
|
+
<tr>
|
|
119
|
+
<th>Page</th>
|
|
120
|
+
<th>Why</th>
|
|
121
|
+
</tr>
|
|
122
|
+
</thead>
|
|
123
|
+
<tbody>
|
|
124
|
+
<tr>
|
|
125
|
+
<td><a href="/guide/getting-started">Getting Started</a></td>
|
|
126
|
+
<td>Install PreactPress and understand the starter structure</td>
|
|
127
|
+
</tr>
|
|
128
|
+
<tr>
|
|
129
|
+
<td><a href="/guide/routing">Routing</a></td>
|
|
130
|
+
<td>Learn how files become URLs</td>
|
|
131
|
+
</tr>
|
|
132
|
+
<tr>
|
|
133
|
+
<td><a href="/guide/deploy">Deploy</a></td>
|
|
134
|
+
<td>Build and publish a static site</td>
|
|
135
|
+
</tr>
|
|
136
|
+
</tbody>
|
|
137
|
+
</table>
|
|
138
|
+
</div><nav class="hn-pager" aria-label="Page navigation"><a class="previous" href="/"><span>Previous</span>Welcome</a><a class="next" href="/guide/getting-started"><span>Next</span>Getting Started</a></nav><footer class="hn-doc-meta"><span>Updated Jun 4, 2026</span></footer></article></main><aside class="hn-outline" aria-label="On this page"><div class="hn-outline-panel"><h2>On this page</h2><ul><li class="level-2"><a href="#use-cases">Use cases</a></li><li class="level-3"><a href="#documentation">Documentation</a></li><li class="level-3"><a href="#blogs-portfolios-and-marketing-sites">Blogs, portfolios, and marketing sites</a></li><li class="level-2"><a href="#developer-experience">Developer experience</a></li><li class="level-2"><a href="#performance">Performance</a></li><li class="level-2"><a href="#what-about-vitepress">What about VitePress?</a></li><li class="level-2"><a href="#next-steps">Next steps</a></li></ul></div></aside></div><footer class="hn-footer">Built with PreactPress.</footer></div></div>
|
|
139
|
+
<script type="module" crossorigin src="/assets/main-Bqi-VFEk.js"></script>
|
|
140
|
+
</body>
|
|
141
|
+
</html>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Fast, lightweight, built on Web Standards | Hono Starter</title>
|
|
7
|
+
<script src="/preactpress-theme.js"></script>
|
|
8
|
+
<meta name="description" content="A Hono-inspired starter for documentation and product sites built with PreactPress.">
|
|
9
|
+
<meta property="og:title" content="Fast, lightweight, built on Web Standards | Hono Starter">
|
|
10
|
+
<meta property="og:description" content="A Hono-inspired starter for documentation and product sites built with PreactPress.">
|
|
11
|
+
<meta property="og:type" content="website">
|
|
12
|
+
<meta property="og:url" content="/">
|
|
13
|
+
<meta name="twitter:card" content="summary">
|
|
14
|
+
<meta name="twitter:title" content="Fast, lightweight, built on Web Standards | Hono Starter">
|
|
15
|
+
<meta name="twitter:description" content="A Hono-inspired starter for documentation and product sites built with PreactPress.">
|
|
16
|
+
<link rel="canonical" href="/">
|
|
17
|
+
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","headline":"Fast, lightweight, built on Web Standards | Hono Starter","name":"Fast, lightweight, built on Web Standards | Hono Starter","description":"A Hono-inspired starter for documentation and product sites built with PreactPress.","url":"/","dateModified":"2026-06-05T07:24:28.039Z"}</script>
|
|
18
|
+
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
19
|
+
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
|
|
20
|
+
<link rel="icon" href="/favicon.png" type="image/png" sizes="any">
|
|
21
|
+
<link rel="apple-touch-icon" href="/favicon.png">
|
|
22
|
+
<link rel="stylesheet" crossorigin href="/assets/main-DIIN7FO0.css">
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
|
|
26
|
+
<div id="app"><div class="hn-site is-home"><a class="hn-skip" href="#content">Skip to content</a><header class="hn-header"><div class="hn-header-inner"><a class="hn-brand" href="/" aria-label="Hono Starter"><span class="hn-logo" aria-label="Hono Starter"><svg aria-hidden="true" viewBox="0 0 36 36" width="36" height="36"><rect width="36" height="36" rx="11" fill="currentColor" opacity="0.12"></rect><path d="M19.8 5.5c.8 4-2.8 5.9-4.7 8.2-1.8 2.1-2.5 4.9-.3 7 0-2.8 1.7-4.6 4.2-6.7 3.2 3 5.3 5.8 5.3 9.2 0 4.4-3.3 7.3-7.6 7.3-4.8 0-8.3-3.6-8.3-8.4 0-6.1 6.3-9.2 11.4-16.6Z" fill="currentColor"></path><path d="M21.7 25.7c0 2.2-1.7 3.8-3.9 3.8s-4-1.6-4-3.8c0-1.7 1-3.1 3.4-5.2.1 1.7 1.4 2.6 2.4 3.4.8.6 2.1 1 2.1 1.8Z" fill="currentColor" opacity="0.38"></path></svg><span>Hono Starter</span></span></a><div class="hn-header-actions"><nav class="hn-nav" aria-label="Main navigation"><a class href="/guide/what-is-preactpress">Docs</a><a class href="/markdown-examples">Examples</a><a class href="/about">About</a></nav><div class="hn-social" aria-label="Social links"><a href="https://github.com/your-org/your-project" aria-label="GitHub"><span><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.404 1.02.005 2.04.137 3 .404 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></span></a></div><details class="hn-locale-switcher"><summary>English</summary><div class="hn-locale-menu"><a href="/" aria-current="page" class="active">English</a><a href="/de" class>Deutsch</a></div></details><button type="button" class="hn-theme-toggle" aria-label="Toggle theme"><span class="hn-theme-toggle-moon" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"><path d="M21 14.8A8.5 8.5 0 0 1 9.2 3a7 7 0 1 0 11.8 11.8Z" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7"></path></svg></span><span class="hn-theme-toggle-sun" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="3.5" stroke-width="1.7"></circle><path d="M12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4" stroke-linecap="round" stroke-width="1.7"></path></svg></span></button></div></div></header><main id="content" class="hn-home-main"><div class="hn-home-content"><section class="hn-hero" aria-labelledby="hero-title"><div class="hn-hero-glow" aria-hidden="true"></div><div class="hn-hero-copy"><p class="hn-hero-eyebrow">Hono-inspired starter</p><h1 id="hero-title">Fast, lightweight, built on Web Standards.</h1><p class="hn-hero-subtitle">Use this template for polished documentation, examples, and product pages with a compact Preact theme.</p><div class="hn-hero-actions"><a class="hn-button hn-button-brand" href="/guide/getting-started">Get Started</a><a class="hn-button hn-button-alt" href="https://github.com/your-org/your-project">View on GitHub</a></div></div><div class="hn-hero-code"><div class="hn-code-card" aria-label="Example code"><div class="hn-code-topbar" aria-hidden="true"><span></span><span></span><span></span></div><pre><code><span class="hn-code-line hn-code-keyword">import { App } from 'your-framework'</span><span class="hn-code-line hn-code-empty"> </span><span class="hn-code-line hn-code-keyword">const app = new App()</span><span class="hn-code-line hn-code-empty"> </span><span class="hn-code-line hn-code-string">app.get('/', (c) => {</span><span class="hn-code-line hn-code-keyword">return c.text('Hello Web Standards!')</span><span class="hn-code-line hn-code-plain">})</span><span class="hn-code-line hn-code-empty"> </span><span class="hn-code-line hn-code-keyword">export default app</span></code></pre></div></div></section>
|
|
27
|
+
<section class="hn-features" aria-label="Highlights"><article class="hn-feature-card"><div class="hn-feature-icon" aria-hidden="true">F</div><h2>Ultrafast & Lightweight</h2><p>Static HTML output, small client code, and a theme that keeps your docs responsive.</p></article><article class="hn-feature-card"><div class="hn-feature-icon" aria-hidden="true">R</div><h2>Multi-runtime mindset</h2><p>Write portable examples for Node, Bun, Deno, edge workers, and static hosting workflows.</p></article><article class="hn-feature-card"><div class="hn-feature-icon" aria-hidden="true">B</div><h2>Batteries included</h2><p>Navigation, sidebar search, MDX, tags, i18n, and static builds are ready from day one.</p></article><article class="hn-feature-card"><div class="hn-feature-icon" aria-hidden="true">D</div><h2>Delightful DX</h2><p>Markdown-first content, Vite dev speed, and editable Preact components for custom pages.</p></article></section></div></main><footer class="hn-footer">Built with PreactPress.</footer></div></div>
|
|
28
|
+
<script type="module" crossorigin src="/assets/main-Bqi-VFEk.js"></script>
|
|
29
|
+
</body>
|
|
30
|
+
</html>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Interactive MDX | Hono Starter</title>
|
|
7
|
+
<script src="/preactpress-theme.js"></script>
|
|
8
|
+
<meta name="description" content="Markdown with imported Preact components">
|
|
9
|
+
<meta property="og:title" content="Interactive MDX | Hono Starter">
|
|
10
|
+
<meta property="og:description" content="Markdown with imported Preact components">
|
|
11
|
+
<meta property="og:type" content="website">
|
|
12
|
+
<meta property="og:url" content="/interactive/">
|
|
13
|
+
<meta name="twitter:card" content="summary">
|
|
14
|
+
<meta name="twitter:title" content="Interactive MDX | Hono Starter">
|
|
15
|
+
<meta name="twitter:description" content="Markdown with imported Preact components">
|
|
16
|
+
<link rel="canonical" href="/interactive/">
|
|
17
|
+
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","headline":"Interactive MDX | Hono Starter","name":"Interactive MDX | Hono Starter","description":"Markdown with imported Preact components","url":"/interactive/","dateModified":"2026-06-04T07:28:10.784Z"}</script>
|
|
18
|
+
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
19
|
+
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
|
|
20
|
+
<link rel="icon" href="/favicon.png" type="image/png" sizes="any">
|
|
21
|
+
<link rel="apple-touch-icon" href="/favicon.png">
|
|
22
|
+
<link rel="stylesheet" crossorigin href="/assets/main-DIIN7FO0.css">
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
|
|
26
|
+
<div id="app"><div class="hn-site"><a class="hn-skip" href="#content">Skip to content</a><header class="hn-header"><div class="hn-header-inner"><a class="hn-brand" href="/" aria-label="Hono Starter"><span class="hn-logo" aria-label="Hono Starter"><svg aria-hidden="true" viewBox="0 0 36 36" width="36" height="36"><rect width="36" height="36" rx="11" fill="currentColor" opacity="0.12"></rect><path d="M19.8 5.5c.8 4-2.8 5.9-4.7 8.2-1.8 2.1-2.5 4.9-.3 7 0-2.8 1.7-4.6 4.2-6.7 3.2 3 5.3 5.8 5.3 9.2 0 4.4-3.3 7.3-7.6 7.3-4.8 0-8.3-3.6-8.3-8.4 0-6.1 6.3-9.2 11.4-16.6Z" fill="currentColor"></path><path d="M21.7 25.7c0 2.2-1.7 3.8-3.9 3.8s-4-1.6-4-3.8c0-1.7 1-3.1 3.4-5.2.1 1.7 1.4 2.6 2.4 3.4.8.6 2.1 1 2.1 1.8Z" fill="currentColor" opacity="0.38"></path></svg><span>Hono Starter</span></span></a><div class="hn-header-actions"><nav class="hn-nav" aria-label="Main navigation"><a class href="/guide/what-is-preactpress">Docs</a><a class href="/markdown-examples">Examples</a><a class href="/about">About</a></nav><div class="hn-social" aria-label="Social links"><a href="https://github.com/your-org/your-project" aria-label="GitHub"><span><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.404 1.02.005 2.04.137 3 .404 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></span></a></div><details class="hn-locale-switcher"><summary>English</summary><div class="hn-locale-menu"><a href="/interactive" aria-current="page" class="active">English</a><a href="/de/interactive" class>Deutsch</a></div></details><button type="button" class="hn-theme-toggle" aria-label="Toggle theme"><span class="hn-theme-toggle-moon" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"><path d="M21 14.8A8.5 8.5 0 0 1 9.2 3a7 7 0 1 0 11.8 11.8Z" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7"></path></svg></span><span class="hn-theme-toggle-sun" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="3.5" stroke-width="1.7"></circle><path d="M12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4" stroke-linecap="round" stroke-width="1.7"></path></svg></span></button></div></div></header><div class="hn-doc-shell"><aside class="hn-sidebar" aria-label="Documentation navigation"><div class="hn-sidebar-panel"><label class="hn-search"><span>Search pages</span><input type="search" value placeholder="Filter documentation..."/></label><div class="hn-sidebar-group"><h2>Introduction</h2><ul><li><a class href="/">Welcome</a></li><li><a class href="/guide/what-is-preactpress">What is PreactPress?</a></li><li><a class href="/guide/getting-started">Getting Started</a></li><li><a class href="/guide/routing">Routing</a></li><li><a class href="/guide/deploy">Deploy</a></li><li><a class href="/guide/first-five-minutes">Your first 5 minutes</a></li><li><a class href="/guide/creating-pages">Creating pages</a></li><li><a class href="/guide/commands">Commands</a></li><li><a class href="/guide/configuration">Configuration</a></li></ul></div><div class="hn-sidebar-group"><h2>Reference</h2><ul><li><a class href="/markdown-examples">Markdown examples</a></li><li><a class="active" href="/interactive" aria-current="page">Interactive MDX</a></li></ul></div></div></aside><main id="content" class="hn-doc-main"><article class="hn-doc"><h1 class="hn-doc-title">Interactive MDX</h1><p class="hn-doc-lead">Markdown with imported Preact components</p><div class="hn-doc-content"><h2 id="preact-component" class="hn-heading">Preact component<a class="hn-heading-anchor" href="#preact-component" aria-label="Link to section">#</a></h2>
|
|
27
|
+
<p>MDX pages can import local Preact components and render them inline.</p>
|
|
28
|
+
<div style="display:inline-flex;align-items:center;gap:0.5rem;"><button type="button" aria-label="Decrease count">−</button><span>3</span><button type="button" aria-label="Increase count">+</button></div>
|
|
29
|
+
<h2 id="image" class="hn-heading">Image<a class="hn-heading-anchor" href="#image" aria-label="Link to section">#</a></h2>
|
|
30
|
+
<p>Markdown images work like in <code>.md</code> pages:</p>
|
|
31
|
+
<p><img src="https://picsum.photos/id/10/800/450" alt="Sample photo from Lorem Picsum"/></p>
|
|
32
|
+
<h2 id="youtube" class="hn-heading">YouTube<a class="hn-heading-anchor" href="#youtube" aria-label="Link to section">#</a></h2>
|
|
33
|
+
<p>Embed with a normal JSX <code>iframe</code> (replace the video id with your own):</p>
|
|
34
|
+
<iframe width="560" height="315" src="https://www.youtube.com/embed/aqz-KE-bpKQ" title="YouTube video example" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe></div><nav class="hn-pager" aria-label="Page navigation"><a class="previous" href="/markdown-examples"><span>Previous</span>Markdown examples</a></nav><footer class="hn-doc-meta"><span>Updated Jun 4, 2026</span></footer></article></main><aside class="hn-outline" aria-label="On this page"><div class="hn-outline-panel"><h2>On this page</h2><ul><li class="level-2"><a href="#preact-component">Preact component</a></li><li class="level-2"><a href="#image">Image</a></li><li class="level-2"><a href="#youtube">YouTube</a></li></ul></div></aside></div><footer class="hn-footer">Built with PreactPress.</footer></div></div>
|
|
35
|
+
<script type="module" crossorigin src="/assets/main-Bqi-VFEk.js"></script>
|
|
36
|
+
</body>
|
|
37
|
+
</html>
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Markdown examples | Hono Starter</title>
|
|
7
|
+
<script src="/preactpress-theme.js"></script>
|
|
8
|
+
<meta name="description" content="Common authoring snippets">
|
|
9
|
+
<meta property="article:tag" content="markdown">
|
|
10
|
+
<meta property="og:title" content="Markdown examples | Hono Starter">
|
|
11
|
+
<meta property="og:description" content="Common authoring snippets">
|
|
12
|
+
<meta property="og:type" content="website">
|
|
13
|
+
<meta property="og:url" content="/markdown-examples/">
|
|
14
|
+
<meta name="twitter:card" content="summary">
|
|
15
|
+
<meta name="twitter:title" content="Markdown examples | Hono Starter">
|
|
16
|
+
<meta name="twitter:description" content="Common authoring snippets">
|
|
17
|
+
<link rel="canonical" href="/markdown-examples/">
|
|
18
|
+
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","headline":"Markdown examples | Hono Starter","name":"Markdown examples | Hono Starter","description":"Common authoring snippets","url":"/markdown-examples/","dateModified":"2026-06-05T06:17:55.859Z"}</script>
|
|
19
|
+
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
20
|
+
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
|
|
21
|
+
<link rel="icon" href="/favicon.png" type="image/png" sizes="any">
|
|
22
|
+
<link rel="apple-touch-icon" href="/favicon.png">
|
|
23
|
+
<link rel="stylesheet" crossorigin href="/assets/main-DIIN7FO0.css">
|
|
24
|
+
</head>
|
|
25
|
+
<body>
|
|
26
|
+
<template id="__PREACTPRESS_PAGE_DATA__">{"kind":"markdown","meta":{"title":"Markdown examples","description":"Common authoring snippets","tags":["markdown"]},"html":"\u003ch2 id=\"code\" class=\"pp-heading\">Code\u003ca class=\"pp-heading-anchor\" href=\"#code\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003ccode>\u003cspan class=\"line\">\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\">export\u003c/span>\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\"> function\u003c/span>\u003cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> greet\u003c/span>\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">(\u003c/span>\u003cspan style=\"color:#E36209;--shiki-dark:#FFAB70\">name\u003c/span>\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\">:\u003c/span>\u003cspan style=\"color:#005CC5;--shiki-dark:#79B8FF\"> string\u003c/span>\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">) {\u003c/span>\u003c/span>\n\u003cspan class=\"line highlighted\">\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\"> return\u003c/span>\u003cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\"> `Hello, ${\u003c/span>\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">name\u003c/span>\u003cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">}!`\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">}\u003c/span>\u003c/span>\u003c/code>\u003c/pre>\u003cp>Highlight a single line with fence meta (\u003ccode>{2}\u003c/code>) or inline notation:\u003c/p>\n\u003cpre class=\"shiki shiki-themes github-light github-dark has-highlighted\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003ccode>\u003cspan class=\"line\">\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\">export\u003c/span>\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\"> function\u003c/span>\u003cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> greet\u003c/span>\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">(\u003c/span>\u003cspan style=\"color:#E36209;--shiki-dark:#FFAB70\">name\u003c/span>\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\">:\u003c/span>\u003cspan style=\"color:#005CC5;--shiki-dark:#79B8FF\"> string\u003c/span>\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">) {\u003c/span>\u003c/span>\n\u003cspan class=\"line highlighted\">\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\"> return\u003c/span>\u003cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\"> `Hello, ${\u003c/span>\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">name\u003c/span>\u003cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">}!`\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">}\u003c/span>\u003c/span>\u003c/code>\u003c/pre>\u003cp>Inline code like \u003ccode>themeConfig.outline\u003c/code> uses the same theme tokens as code blocks.\u003c/p>\n\u003ch2 id=\"snippet-import\" class=\"pp-heading\">Snippet import\u003ca class=\"pp-heading-anchor\" href=\"#snippet-import\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>Reuse source files instead of duplicating code:\u003c/p>\n\u003cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003ccode>\u003cspan class=\"line\">\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\">export\u003c/span>\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\"> function\u003c/span>\u003cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> greet\u003c/span>\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">(\u003c/span>\u003cspan style=\"color:#E36209;--shiki-dark:#FFAB70\">name\u003c/span>\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\">:\u003c/span>\u003cspan style=\"color:#005CC5;--shiki-dark:#79B8FF\"> string\u003c/span>\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">) {\u003c/span>\u003c/span>\n\u003cspan class=\"line highlighted\">\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\"> return\u003c/span>\u003cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\"> `Hello, ${\u003c/span>\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">name\u003c/span>\u003cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">}!`\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">}\u003c/span>\u003c/span>\u003c/code>\u003c/pre>\u003cp>The \u003ccode>@/\u003c/code> prefix resolves from the site content root (\u003ccode>srcDir\u003c/code>).\u003c/p>\n\u003ch2 id=\"links\" class=\"pp-heading\">Links\u003ca class=\"pp-heading-anchor\" href=\"#links\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>\u003ca href=\"/\">Home\u003c/a> · \u003ca href=\"https://preactjs.com\" target=\"_blank\" rel=\"noopener noreferrer\">External link\u003c/a>\u003c/p>\n\u003ch2 id=\"tables\" class=\"pp-heading\">Tables\u003ca class=\"pp-heading-anchor\" href=\"#tables\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003ctable>\n\u003cthead>\n\u003ctr>\n\u003cth>Syntax\u003c/th>\n\u003cth>Result\u003c/th>\n\u003c/tr>\n\u003c/thead>\n\u003ctbody>\n\u003ctr>\n\u003ctd>\u003ccode># Title\u003c/code>\u003c/td>\n\u003ctd>Heading\u003c/td>\n\u003c/tr>\n\u003ctr>\n\u003ctd>\u003ccode>---\u003c/code> frontmatter\u003c/td>\n\u003ctd>Page metadata\u003c/td>\n\u003c/tr>\n\u003c/tbody>\n\u003c/table>\n\u003ch2 id=\"quotes\" class=\"pp-heading\">Quotes\u003ca class=\"pp-heading-anchor\" href=\"#quotes\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cblockquote>\n\u003cp>Use blockquotes for callouts, notes, or short contextual hints.\u003c/p>\n\u003c/blockquote>\n\u003ch2 id=\"containers\" class=\"pp-heading\">Containers\u003ca class=\"pp-heading-anchor\" href=\"#containers\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cdiv class=\"pp-container pp-container-tip\">\u003cp class=\"pp-container-title\">TIP\u003c/p>\u003cdiv class=\"pp-container-body\">\u003cp>\u003ccode>::: tip\u003c/code>, \u003ccode>::: warning\u003c/code>, \u003ccode>::: danger\u003c/code>, \u003ccode>::: info\u003c/code>, and \u003ccode>::: details\u003c/code> work like VitePress custom containers.\u003c/p>\n\u003c/div>\u003c/div>\u003cdiv class=\"pp-container pp-container-warning\">\u003cp class=\"pp-container-title\">Optional title\u003c/p>\u003cdiv class=\"pp-container-body\">\u003cp>You can pass a custom title after the container type.\u003c/p>\n\u003c/div>\u003c/div>\u003cdetails class=\"pp-container pp-container-details\">\u003csummary>Learn more\u003c/summary>\u003cdiv class=\"pp-container-body\">\u003cp>Details blocks render as native \u003ccode>&lt;details&gt;\u003c/code> elements.\u003c/p>\n\u003c/div>\u003c/details>\u003ch2 id=\"gfm-alerts\" class=\"pp-heading\">GFM alerts\u003ca class=\"pp-heading-anchor\" href=\"#gfm-alerts\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>GitHub-flavored alert syntax renders with the same styling as custom containers:\u003c/p>\n\u003cdiv class=\"pp-container pp-container-note\">\u003cp class=\"pp-container-title\">NOTE\u003c/p>\u003cdiv class=\"pp-container-body\">\u003cp>Useful information that readers should know.\u003c/p>\n\u003c/div>\u003c/div>\u003cdiv class=\"pp-container pp-container-tip\">\u003cp class=\"pp-container-title\">TIP\u003c/p>\u003cdiv class=\"pp-container-body\">\u003cp>Optional advice for doing things more easily.\u003c/p>\n\u003c/div>\u003c/div>\u003cdiv class=\"pp-container pp-container-warning\">\u003cp class=\"pp-container-title\">WARNING\u003c/p>\u003cdiv class=\"pp-container-body\">\u003cp>Critical content that needs immediate attention.\u003c/p>\n\u003c/div>\u003c/div>\u003ch2 id=\"custom-heading-ids\" class=\"pp-heading\">Custom heading IDs\u003ca class=\"pp-heading-anchor\" href=\"#custom-heading-ids\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003ch2 id=\"stable-id\" class=\"pp-heading\">Stable links\u003ca class=\"pp-heading-anchor\" href=\"#stable-id\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>Append \u003ccode>{#id}\u003c/code> to any heading to control its anchor.\u003c/p>\n\u003ch2 id=\"emoji\" class=\"pp-heading\">Emoji\u003ca class=\"pp-heading-anchor\" href=\"#emoji\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>PreactPress supports \u003ccode>:tada:\u003c/code> and \u003ccode>:rocket:\u003c/code> shortcodes out of the box.\u003c/p>\n\u003ch2 id=\"inline-table-of-contents\" class=\"pp-heading\">Inline table of contents\u003ca class=\"pp-heading-anchor\" href=\"#inline-table-of-contents\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cnav class=\"pp-inline-toc\" aria-label=\"Table of contents\">\u003ca class=\"pp-inline-toc-link level-2\" href=\"#code\">Code\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#snippet-import\">Snippet import\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#links\">Links\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#tables\">Tables\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#quotes\">Quotes\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#containers\">Containers\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#gfm-alerts\">GFM alerts\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#custom-heading-ids\">Custom heading IDs\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#stable-id\">Stable links\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#emoji\">Emoji\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#inline-table-of-contents\">Inline table of contents\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#second-section\">Second section\u003c/a>\u003ca class=\"pp-inline-toc-link level-3\" href=\"#sub-section\">Sub section\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#code-groups\">Code groups\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#markdown-inclusion\">Markdown inclusion\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#included-body\">Included body\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#heading-ids\">Heading IDs\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#custom-anchor\">Custom anchors\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#inline-table-of-contents-2\">Inline table of contents\u003c/a>\u003ca class=\"pp-inline-toc-link level-3\" href=\"#first-section\">First section\u003c/a>\u003ca class=\"pp-inline-toc-link level-3\" href=\"#second-section-2\">Second section\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#code-groups-2\">Code groups\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#markdown-includes\">Markdown includes\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#emoji-and-math\">Emoji and math\u003c/a>\u003c/nav>\u003ch2 id=\"second-section\" class=\"pp-heading\">Second section\u003ca class=\"pp-heading-anchor\" href=\"#second-section\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>Content below the inline TOC.\u003c/p>\n\u003ch3 id=\"sub-section\" class=\"pp-heading\">Sub section\u003ca class=\"pp-heading-anchor\" href=\"#sub-section\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h3>\n\u003cp>Nested heading for the outline.\u003c/p>\n\u003ch2 id=\"code-groups\" class=\"pp-heading\">Code groups\u003ca class=\"pp-heading-anchor\" href=\"#code-groups\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cdiv class=\"pp-code-group\">\u003cinput type=\"radio\" name=\"pp-cg-1\" id=\"pp-cg-1-0\" class=\"pp-code-group-input\" checked>\u003clabel for=\"pp-cg-1-0\" class=\"pp-code-group-tab\">config.js\u003c/label>\u003cinput type=\"radio\" name=\"pp-cg-1\" id=\"pp-cg-1-1\" class=\"pp-code-group-input\">\u003clabel for=\"pp-cg-1-1\" class=\"pp-code-group-tab\">config.ts\u003c/label>\u003cdiv class=\"pp-code-group-blocks\">\u003cdiv class=\"pp-code-group-block\">\u003cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003ccode>\u003cspan class=\"line\">\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\">export\u003c/span>\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\"> default\u003c/span>\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> { lang: \u003c/span>\u003cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">'js'\u003c/span>\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> }\u003c/span>\u003c/span>\u003c/code>\u003c/pre>\u003c/div>\u003cdiv class=\"pp-code-group-block\">\u003cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003ccode>\u003cspan class=\"line\">\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\">export\u003c/span>\u003cspan style=\"color:#D73A49;--shiki-dark:#F97583\"> default\u003c/span>\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> { lang: \u003c/span>\u003cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">'ts'\u003c/span>\u003cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> }\u003c/span>\u003c/span>\u003c/code>\u003c/pre>\u003c/div>\u003c/div>\u003c/div>\u003ch2 id=\"markdown-inclusion\" class=\"pp-heading\">Markdown inclusion\u003ca class=\"pp-heading-anchor\" href=\"#markdown-inclusion\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003ch2 id=\"included-body\" class=\"pp-heading\">Included body\u003ca class=\"pp-heading-anchor\" href=\"#included-body\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003ch2 id=\"heading-ids\" class=\"pp-heading\">Heading IDs\u003ca class=\"pp-heading-anchor\" href=\"#heading-ids\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003ch2 id=\"custom-anchor\" class=\"pp-heading\">Custom anchors\u003ca class=\"pp-heading-anchor\" href=\"#custom-anchor\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>Add \u003ccode>{#your-id}\u003c/code> to any heading to control the fragment URL.\u003c/p>\n\u003ch2 id=\"inline-table-of-contents-2\" class=\"pp-heading\">Inline table of contents\u003ca class=\"pp-heading-anchor\" href=\"#inline-table-of-contents-2\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cnav class=\"pp-inline-toc\" aria-label=\"Table of contents\">\u003ca class=\"pp-inline-toc-link level-2\" href=\"#code\">Code\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#snippet-import\">Snippet import\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#links\">Links\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#tables\">Tables\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#quotes\">Quotes\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#containers\">Containers\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#gfm-alerts\">GFM alerts\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#custom-heading-ids\">Custom heading IDs\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#stable-id\">Stable links\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#emoji\">Emoji\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#inline-table-of-contents\">Inline table of contents\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#second-section\">Second section\u003c/a>\u003ca class=\"pp-inline-toc-link level-3\" href=\"#sub-section\">Sub section\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#code-groups\">Code groups\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#markdown-inclusion\">Markdown inclusion\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#included-body\">Included body\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#heading-ids\">Heading IDs\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#custom-anchor\">Custom anchors\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#inline-table-of-contents-2\">Inline table of contents\u003c/a>\u003ca class=\"pp-inline-toc-link level-3\" href=\"#first-section\">First section\u003c/a>\u003ca class=\"pp-inline-toc-link level-3\" href=\"#second-section-2\">Second section\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#code-groups-2\">Code groups\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#markdown-includes\">Markdown includes\u003c/a>\u003ca class=\"pp-inline-toc-link level-2\" href=\"#emoji-and-math\">Emoji and math\u003c/a>\u003c/nav>\u003ch3 id=\"first-section\" class=\"pp-heading\">First section\u003ca class=\"pp-heading-anchor\" href=\"#first-section\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h3>\n\u003cp>Content for the first section.\u003c/p>\n\u003ch3 id=\"second-section-2\" class=\"pp-heading\">Second section\u003ca class=\"pp-heading-anchor\" href=\"#second-section-2\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h3>\n\u003cp>Content for the second section.\u003c/p>\n\u003ch2 id=\"code-groups-2\" class=\"pp-heading\">Code groups\u003ca class=\"pp-heading-anchor\" href=\"#code-groups-2\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cdiv class=\"pp-code-group\">\u003cinput type=\"radio\" name=\"pp-cg-2\" id=\"pp-cg-2-0\" class=\"pp-code-group-input\" checked>\u003clabel for=\"pp-cg-2-0\" class=\"pp-code-group-tab\">npm\u003c/label>\u003cinput type=\"radio\" name=\"pp-cg-2\" id=\"pp-cg-2-1\" class=\"pp-code-group-input\">\u003clabel for=\"pp-cg-2-1\" class=\"pp-code-group-tab\">pnpm\u003c/label>\u003cdiv class=\"pp-code-group-blocks\">\u003cdiv class=\"pp-code-group-block\">\u003cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003ccode>\u003cspan class=\"line\">\u003cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\">npm\u003c/span>\u003cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\"> install\u003c/span>\u003c/span>\u003c/code>\u003c/pre>\u003c/div>\u003cdiv class=\"pp-code-group-block\">\u003cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003ccode>\u003cspan class=\"line\">\u003cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\">pnpm\u003c/span>\u003cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\"> install\u003c/span>\u003c/span>\u003c/code>\u003c/pre>\u003c/div>\u003c/div>\u003c/div>\u003ch2 id=\"markdown-includes\" class=\"pp-heading\">Markdown includes\u003ca class=\"pp-heading-anchor\" href=\"#markdown-includes\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>Reuse shared fragments with HTML comments:\u003c/p>\n\u003cdiv class=\"pp-container pp-container-tip\">\u003cp class=\"pp-container-title\">Shared fragment\u003c/p>\u003cdiv class=\"pp-container-body\">\u003cp>This note is pulled in via \u003ccode>&lt;!-- include cycle detected: /home/watzak/master/kamod/preactpress/templates/hono/partials/shared-note.md --&gt;\u003c/code>.\u003c/p>\n\u003c/div>\u003c/div>\u003ch2 id=\"emoji-and-math\" class=\"pp-heading\">Emoji and math\u003ca class=\"pp-heading-anchor\" href=\"#emoji-and-math\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>Enable in config: \u003ccode>markdown: { emoji: true, math: true }\u003c/code>.\u003c/p>\n\u003cp>:tada: becomes a party popper when emoji is on.\u003c/p>\n\u003cp>Inline math: $E = mc^2$\u003c/p>\n","title":"Markdown examples","description":"Common authoring snippets","tags":["markdown"],"pageType":"website","headings":[{"id":"code","text":"Code","level":2},{"id":"snippet-import","text":"Snippet import","level":2},{"id":"links","text":"Links","level":2},{"id":"tables","text":"Tables","level":2},{"id":"quotes","text":"Quotes","level":2},{"id":"containers","text":"Containers","level":2},{"id":"gfm-alerts","text":"GFM alerts","level":2},{"id":"custom-heading-ids","text":"Custom heading IDs","level":2},{"id":"stable-id","text":"Stable links","level":2},{"id":"emoji","text":"Emoji","level":2},{"id":"inline-table-of-contents","text":"Inline table of contents","level":2},{"id":"second-section","text":"Second section","level":2},{"id":"sub-section","text":"Sub section","level":3},{"id":"code-groups","text":"Code groups","level":2},{"id":"markdown-inclusion","text":"Markdown inclusion","level":2},{"id":"included-body","text":"Included body","level":2},{"id":"heading-ids","text":"Heading IDs","level":2},{"id":"custom-anchor","text":"Custom anchors","level":2},{"id":"inline-table-of-contents-2","text":"Inline table of contents","level":2},{"id":"first-section","text":"First section","level":3},{"id":"second-section-2","text":"Second section","level":3},{"id":"code-groups-2","text":"Code groups","level":2},{"id":"markdown-includes","text":"Markdown includes","level":2},{"id":"emoji-and-math","text":"Emoji and math","level":2}],"relativePath":"markdown-examples.md","lastUpdated":"2026-06-05T06:17:55.859Z"}</template>
|
|
27
|
+
<div id="app"><div class="hn-site"><a class="hn-skip" href="#content">Skip to content</a><header class="hn-header"><div class="hn-header-inner"><a class="hn-brand" href="/" aria-label="Hono Starter"><span class="hn-logo" aria-label="Hono Starter"><svg aria-hidden="true" viewBox="0 0 36 36" width="36" height="36"><rect width="36" height="36" rx="11" fill="currentColor" opacity="0.12"></rect><path d="M19.8 5.5c.8 4-2.8 5.9-4.7 8.2-1.8 2.1-2.5 4.9-.3 7 0-2.8 1.7-4.6 4.2-6.7 3.2 3 5.3 5.8 5.3 9.2 0 4.4-3.3 7.3-7.6 7.3-4.8 0-8.3-3.6-8.3-8.4 0-6.1 6.3-9.2 11.4-16.6Z" fill="currentColor"></path><path d="M21.7 25.7c0 2.2-1.7 3.8-3.9 3.8s-4-1.6-4-3.8c0-1.7 1-3.1 3.4-5.2.1 1.7 1.4 2.6 2.4 3.4.8.6 2.1 1 2.1 1.8Z" fill="currentColor" opacity="0.38"></path></svg><span>Hono Starter</span></span></a><div class="hn-header-actions"><nav class="hn-nav" aria-label="Main navigation"><a class href="/guide/what-is-preactpress">Docs</a><a class="active" href="/markdown-examples" aria-current="page">Examples</a><a class href="/about">About</a></nav><div class="hn-social" aria-label="Social links"><a href="https://github.com/your-org/your-project" aria-label="GitHub"><span><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.404 1.02.005 2.04.137 3 .404 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></span></a></div><details class="hn-locale-switcher"><summary>English</summary><div class="hn-locale-menu"><a href="/markdown-examples" aria-current="page" class="active">English</a><a href="/de/markdown-examples" class>Deutsch</a></div></details><button type="button" class="hn-theme-toggle" aria-label="Toggle theme"><span class="hn-theme-toggle-moon" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"><path d="M21 14.8A8.5 8.5 0 0 1 9.2 3a7 7 0 1 0 11.8 11.8Z" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7"></path></svg></span><span class="hn-theme-toggle-sun" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="3.5" stroke-width="1.7"></circle><path d="M12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4" stroke-linecap="round" stroke-width="1.7"></path></svg></span></button></div></div></header><div class="hn-doc-shell"><aside class="hn-sidebar" aria-label="Documentation navigation"><div class="hn-sidebar-panel"><label class="hn-search"><span>Search pages</span><input type="search" value placeholder="Filter documentation..."/></label><div class="hn-sidebar-group"><h2>Introduction</h2><ul><li><a class href="/">Welcome</a></li><li><a class href="/guide/what-is-preactpress">What is PreactPress?</a></li><li><a class href="/guide/getting-started">Getting Started</a></li><li><a class href="/guide/routing">Routing</a></li><li><a class href="/guide/deploy">Deploy</a></li><li><a class href="/guide/first-five-minutes">Your first 5 minutes</a></li><li><a class href="/guide/creating-pages">Creating pages</a></li><li><a class href="/guide/commands">Commands</a></li><li><a class href="/guide/configuration">Configuration</a></li></ul></div><div class="hn-sidebar-group"><h2>Reference</h2><ul><li><a class="active" href="/markdown-examples" aria-current="page">Markdown examples</a></li><li><a class href="/interactive">Interactive MDX</a></li></ul></div></div></aside><main id="content" class="hn-doc-main"><article class="hn-doc"><h1 class="hn-doc-title">Markdown examples</h1><p class="hn-doc-lead">Common authoring snippets</p><ul class="hn-tags" aria-label="Tags"><li><a href="/tags/markdown">markdown</a></li></ul><div class="hn-doc-content"><h2 id="code" class="pp-heading">Code<a class="pp-heading-anchor" href="#code" aria-label="Link to this section">#</a></h2>
|
|
28
|
+
<pre class="shiki shiki-themes github-light github-dark" style="background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#D73A49;--shiki-dark:#F97583">export</span><span style="color:#D73A49;--shiki-dark:#F97583"> function</span><span style="color:#6F42C1;--shiki-dark:#B392F0"> greet</span><span style="color:#24292E;--shiki-dark:#E1E4E8">(</span><span style="color:#E36209;--shiki-dark:#FFAB70">name</span><span style="color:#D73A49;--shiki-dark:#F97583">:</span><span style="color:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="color:#24292E;--shiki-dark:#E1E4E8">) {</span></span>
|
|
29
|
+
<span class="line highlighted"><span style="color:#D73A49;--shiki-dark:#F97583"> return</span><span style="color:#032F62;--shiki-dark:#9ECBFF"> `Hello, ${</span><span style="color:#24292E;--shiki-dark:#E1E4E8">name</span><span style="color:#032F62;--shiki-dark:#9ECBFF">}!`</span></span>
|
|
30
|
+
<span class="line"><span style="color:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre><p>Highlight a single line with fence meta (<code>{2}</code>) or inline notation:</p>
|
|
31
|
+
<pre class="shiki shiki-themes github-light github-dark has-highlighted" style="background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#D73A49;--shiki-dark:#F97583">export</span><span style="color:#D73A49;--shiki-dark:#F97583"> function</span><span style="color:#6F42C1;--shiki-dark:#B392F0"> greet</span><span style="color:#24292E;--shiki-dark:#E1E4E8">(</span><span style="color:#E36209;--shiki-dark:#FFAB70">name</span><span style="color:#D73A49;--shiki-dark:#F97583">:</span><span style="color:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="color:#24292E;--shiki-dark:#E1E4E8">) {</span></span>
|
|
32
|
+
<span class="line highlighted"><span style="color:#D73A49;--shiki-dark:#F97583"> return</span><span style="color:#032F62;--shiki-dark:#9ECBFF"> `Hello, ${</span><span style="color:#24292E;--shiki-dark:#E1E4E8">name</span><span style="color:#032F62;--shiki-dark:#9ECBFF">}!`</span></span>
|
|
33
|
+
<span class="line"><span style="color:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre><p>Inline code like <code>themeConfig.outline</code> uses the same theme tokens as code blocks.</p>
|
|
34
|
+
<h2 id="snippet-import" class="pp-heading">Snippet import<a class="pp-heading-anchor" href="#snippet-import" aria-label="Link to this section">#</a></h2>
|
|
35
|
+
<p>Reuse source files instead of duplicating code:</p>
|
|
36
|
+
<pre class="shiki shiki-themes github-light github-dark" style="background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#D73A49;--shiki-dark:#F97583">export</span><span style="color:#D73A49;--shiki-dark:#F97583"> function</span><span style="color:#6F42C1;--shiki-dark:#B392F0"> greet</span><span style="color:#24292E;--shiki-dark:#E1E4E8">(</span><span style="color:#E36209;--shiki-dark:#FFAB70">name</span><span style="color:#D73A49;--shiki-dark:#F97583">:</span><span style="color:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="color:#24292E;--shiki-dark:#E1E4E8">) {</span></span>
|
|
37
|
+
<span class="line highlighted"><span style="color:#D73A49;--shiki-dark:#F97583"> return</span><span style="color:#032F62;--shiki-dark:#9ECBFF"> `Hello, ${</span><span style="color:#24292E;--shiki-dark:#E1E4E8">name</span><span style="color:#032F62;--shiki-dark:#9ECBFF">}!`</span></span>
|
|
38
|
+
<span class="line"><span style="color:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre><p>The <code>@/</code> prefix resolves from the site content root (<code>srcDir</code>).</p>
|
|
39
|
+
<h2 id="links" class="pp-heading">Links<a class="pp-heading-anchor" href="#links" aria-label="Link to this section">#</a></h2>
|
|
40
|
+
<p><a href="/">Home</a> · <a href="https://preactjs.com" target="_blank" rel="noopener noreferrer">External link</a></p>
|
|
41
|
+
<h2 id="tables" class="pp-heading">Tables<a class="pp-heading-anchor" href="#tables" aria-label="Link to this section">#</a></h2>
|
|
42
|
+
<table>
|
|
43
|
+
<thead>
|
|
44
|
+
<tr>
|
|
45
|
+
<th>Syntax</th>
|
|
46
|
+
<th>Result</th>
|
|
47
|
+
</tr>
|
|
48
|
+
</thead>
|
|
49
|
+
<tbody>
|
|
50
|
+
<tr>
|
|
51
|
+
<td><code># Title</code></td>
|
|
52
|
+
<td>Heading</td>
|
|
53
|
+
</tr>
|
|
54
|
+
<tr>
|
|
55
|
+
<td><code>---</code> frontmatter</td>
|
|
56
|
+
<td>Page metadata</td>
|
|
57
|
+
</tr>
|
|
58
|
+
</tbody>
|
|
59
|
+
</table>
|
|
60
|
+
<h2 id="quotes" class="pp-heading">Quotes<a class="pp-heading-anchor" href="#quotes" aria-label="Link to this section">#</a></h2>
|
|
61
|
+
<blockquote>
|
|
62
|
+
<p>Use blockquotes for callouts, notes, or short contextual hints.</p>
|
|
63
|
+
</blockquote>
|
|
64
|
+
<h2 id="containers" class="pp-heading">Containers<a class="pp-heading-anchor" href="#containers" aria-label="Link to this section">#</a></h2>
|
|
65
|
+
<div class="pp-container pp-container-tip"><p class="pp-container-title">TIP</p><div class="pp-container-body"><p><code>::: tip</code>, <code>::: warning</code>, <code>::: danger</code>, <code>::: info</code>, and <code>::: details</code> work like VitePress custom containers.</p>
|
|
66
|
+
</div></div><div class="pp-container pp-container-warning"><p class="pp-container-title">Optional title</p><div class="pp-container-body"><p>You can pass a custom title after the container type.</p>
|
|
67
|
+
</div></div><details class="pp-container pp-container-details"><summary>Learn more</summary><div class="pp-container-body"><p>Details blocks render as native <code><details></code> elements.</p>
|
|
68
|
+
</div></details><h2 id="gfm-alerts" class="pp-heading">GFM alerts<a class="pp-heading-anchor" href="#gfm-alerts" aria-label="Link to this section">#</a></h2>
|
|
69
|
+
<p>GitHub-flavored alert syntax renders with the same styling as custom containers:</p>
|
|
70
|
+
<div class="pp-container pp-container-note"><p class="pp-container-title">NOTE</p><div class="pp-container-body"><p>Useful information that readers should know.</p>
|
|
71
|
+
</div></div><div class="pp-container pp-container-tip"><p class="pp-container-title">TIP</p><div class="pp-container-body"><p>Optional advice for doing things more easily.</p>
|
|
72
|
+
</div></div><div class="pp-container pp-container-warning"><p class="pp-container-title">WARNING</p><div class="pp-container-body"><p>Critical content that needs immediate attention.</p>
|
|
73
|
+
</div></div><h2 id="custom-heading-ids" class="pp-heading">Custom heading IDs<a class="pp-heading-anchor" href="#custom-heading-ids" aria-label="Link to this section">#</a></h2>
|
|
74
|
+
<h2 id="stable-id" class="pp-heading">Stable links<a class="pp-heading-anchor" href="#stable-id" aria-label="Link to this section">#</a></h2>
|
|
75
|
+
<p>Append <code>{#id}</code> to any heading to control its anchor.</p>
|
|
76
|
+
<h2 id="emoji" class="pp-heading">Emoji<a class="pp-heading-anchor" href="#emoji" aria-label="Link to this section">#</a></h2>
|
|
77
|
+
<p>PreactPress supports <code>:tada:</code> and <code>:rocket:</code> shortcodes out of the box.</p>
|
|
78
|
+
<h2 id="inline-table-of-contents" class="pp-heading">Inline table of contents<a class="pp-heading-anchor" href="#inline-table-of-contents" aria-label="Link to this section">#</a></h2>
|
|
79
|
+
<nav class="pp-inline-toc" aria-label="Table of contents"><a class="pp-inline-toc-link level-2" href="#code">Code</a><a class="pp-inline-toc-link level-2" href="#snippet-import">Snippet import</a><a class="pp-inline-toc-link level-2" href="#links">Links</a><a class="pp-inline-toc-link level-2" href="#tables">Tables</a><a class="pp-inline-toc-link level-2" href="#quotes">Quotes</a><a class="pp-inline-toc-link level-2" href="#containers">Containers</a><a class="pp-inline-toc-link level-2" href="#gfm-alerts">GFM alerts</a><a class="pp-inline-toc-link level-2" href="#custom-heading-ids">Custom heading IDs</a><a class="pp-inline-toc-link level-2" href="#stable-id">Stable links</a><a class="pp-inline-toc-link level-2" href="#emoji">Emoji</a><a class="pp-inline-toc-link level-2" href="#inline-table-of-contents">Inline table of contents</a><a class="pp-inline-toc-link level-2" href="#second-section">Second section</a><a class="pp-inline-toc-link level-3" href="#sub-section">Sub section</a><a class="pp-inline-toc-link level-2" href="#code-groups">Code groups</a><a class="pp-inline-toc-link level-2" href="#markdown-inclusion">Markdown inclusion</a><a class="pp-inline-toc-link level-2" href="#included-body">Included body</a><a class="pp-inline-toc-link level-2" href="#heading-ids">Heading IDs</a><a class="pp-inline-toc-link level-2" href="#custom-anchor">Custom anchors</a><a class="pp-inline-toc-link level-2" href="#inline-table-of-contents-2">Inline table of contents</a><a class="pp-inline-toc-link level-3" href="#first-section">First section</a><a class="pp-inline-toc-link level-3" href="#second-section-2">Second section</a><a class="pp-inline-toc-link level-2" href="#code-groups-2">Code groups</a><a class="pp-inline-toc-link level-2" href="#markdown-includes">Markdown includes</a><a class="pp-inline-toc-link level-2" href="#emoji-and-math">Emoji and math</a></nav><h2 id="second-section" class="pp-heading">Second section<a class="pp-heading-anchor" href="#second-section" aria-label="Link to this section">#</a></h2>
|
|
80
|
+
<p>Content below the inline TOC.</p>
|
|
81
|
+
<h3 id="sub-section" class="pp-heading">Sub section<a class="pp-heading-anchor" href="#sub-section" aria-label="Link to this section">#</a></h3>
|
|
82
|
+
<p>Nested heading for the outline.</p>
|
|
83
|
+
<h2 id="code-groups" class="pp-heading">Code groups<a class="pp-heading-anchor" href="#code-groups" aria-label="Link to this section">#</a></h2>
|
|
84
|
+
<div class="pp-code-group"><input type="radio" name="pp-cg-1" id="pp-cg-1-0" class="pp-code-group-input" checked><label for="pp-cg-1-0" class="pp-code-group-tab">config.js</label><input type="radio" name="pp-cg-1" id="pp-cg-1-1" class="pp-code-group-input"><label for="pp-cg-1-1" class="pp-code-group-tab">config.ts</label><div class="pp-code-group-blocks"><div class="pp-code-group-block"><pre class="shiki shiki-themes github-light github-dark" style="background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#D73A49;--shiki-dark:#F97583">export</span><span style="color:#D73A49;--shiki-dark:#F97583"> default</span><span style="color:#24292E;--shiki-dark:#E1E4E8"> { lang: </span><span style="color:#032F62;--shiki-dark:#9ECBFF">'js'</span><span style="color:#24292E;--shiki-dark:#E1E4E8"> }</span></span></code></pre></div><div class="pp-code-group-block"><pre class="shiki shiki-themes github-light github-dark" style="background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#D73A49;--shiki-dark:#F97583">export</span><span style="color:#D73A49;--shiki-dark:#F97583"> default</span><span style="color:#24292E;--shiki-dark:#E1E4E8"> { lang: </span><span style="color:#032F62;--shiki-dark:#9ECBFF">'ts'</span><span style="color:#24292E;--shiki-dark:#E1E4E8"> }</span></span></code></pre></div></div></div><h2 id="markdown-inclusion" class="pp-heading">Markdown inclusion<a class="pp-heading-anchor" href="#markdown-inclusion" aria-label="Link to this section">#</a></h2>
|
|
85
|
+
<h2 id="included-body" class="pp-heading">Included body<a class="pp-heading-anchor" href="#included-body" aria-label="Link to this section">#</a></h2>
|
|
86
|
+
<h2 id="heading-ids" class="pp-heading">Heading IDs<a class="pp-heading-anchor" href="#heading-ids" aria-label="Link to this section">#</a></h2>
|
|
87
|
+
<h2 id="custom-anchor" class="pp-heading">Custom anchors<a class="pp-heading-anchor" href="#custom-anchor" aria-label="Link to this section">#</a></h2>
|
|
88
|
+
<p>Add <code>{#your-id}</code> to any heading to control the fragment URL.</p>
|
|
89
|
+
<h2 id="inline-table-of-contents-2" class="pp-heading">Inline table of contents<a class="pp-heading-anchor" href="#inline-table-of-contents-2" aria-label="Link to this section">#</a></h2>
|
|
90
|
+
<nav class="pp-inline-toc" aria-label="Table of contents"><a class="pp-inline-toc-link level-2" href="#code">Code</a><a class="pp-inline-toc-link level-2" href="#snippet-import">Snippet import</a><a class="pp-inline-toc-link level-2" href="#links">Links</a><a class="pp-inline-toc-link level-2" href="#tables">Tables</a><a class="pp-inline-toc-link level-2" href="#quotes">Quotes</a><a class="pp-inline-toc-link level-2" href="#containers">Containers</a><a class="pp-inline-toc-link level-2" href="#gfm-alerts">GFM alerts</a><a class="pp-inline-toc-link level-2" href="#custom-heading-ids">Custom heading IDs</a><a class="pp-inline-toc-link level-2" href="#stable-id">Stable links</a><a class="pp-inline-toc-link level-2" href="#emoji">Emoji</a><a class="pp-inline-toc-link level-2" href="#inline-table-of-contents">Inline table of contents</a><a class="pp-inline-toc-link level-2" href="#second-section">Second section</a><a class="pp-inline-toc-link level-3" href="#sub-section">Sub section</a><a class="pp-inline-toc-link level-2" href="#code-groups">Code groups</a><a class="pp-inline-toc-link level-2" href="#markdown-inclusion">Markdown inclusion</a><a class="pp-inline-toc-link level-2" href="#included-body">Included body</a><a class="pp-inline-toc-link level-2" href="#heading-ids">Heading IDs</a><a class="pp-inline-toc-link level-2" href="#custom-anchor">Custom anchors</a><a class="pp-inline-toc-link level-2" href="#inline-table-of-contents-2">Inline table of contents</a><a class="pp-inline-toc-link level-3" href="#first-section">First section</a><a class="pp-inline-toc-link level-3" href="#second-section-2">Second section</a><a class="pp-inline-toc-link level-2" href="#code-groups-2">Code groups</a><a class="pp-inline-toc-link level-2" href="#markdown-includes">Markdown includes</a><a class="pp-inline-toc-link level-2" href="#emoji-and-math">Emoji and math</a></nav><h3 id="first-section" class="pp-heading">First section<a class="pp-heading-anchor" href="#first-section" aria-label="Link to this section">#</a></h3>
|
|
91
|
+
<p>Content for the first section.</p>
|
|
92
|
+
<h3 id="second-section-2" class="pp-heading">Second section<a class="pp-heading-anchor" href="#second-section-2" aria-label="Link to this section">#</a></h3>
|
|
93
|
+
<p>Content for the second section.</p>
|
|
94
|
+
<h2 id="code-groups-2" class="pp-heading">Code groups<a class="pp-heading-anchor" href="#code-groups-2" aria-label="Link to this section">#</a></h2>
|
|
95
|
+
<div class="pp-code-group"><input type="radio" name="pp-cg-2" id="pp-cg-2-0" class="pp-code-group-input" checked><label for="pp-cg-2-0" class="pp-code-group-tab">npm</label><input type="radio" name="pp-cg-2" id="pp-cg-2-1" class="pp-code-group-input"><label for="pp-cg-2-1" class="pp-code-group-tab">pnpm</label><div class="pp-code-group-blocks"><div class="pp-code-group-block"><pre class="shiki shiki-themes github-light github-dark" style="background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#6F42C1;--shiki-dark:#B392F0">npm</span><span style="color:#032F62;--shiki-dark:#9ECBFF"> install</span></span></code></pre></div><div class="pp-code-group-block"><pre class="shiki shiki-themes github-light github-dark" style="background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#6F42C1;--shiki-dark:#B392F0">pnpm</span><span style="color:#032F62;--shiki-dark:#9ECBFF"> install</span></span></code></pre></div></div></div><h2 id="markdown-includes" class="pp-heading">Markdown includes<a class="pp-heading-anchor" href="#markdown-includes" aria-label="Link to this section">#</a></h2>
|
|
96
|
+
<p>Reuse shared fragments with HTML comments:</p>
|
|
97
|
+
<div class="pp-container pp-container-tip"><p class="pp-container-title">Shared fragment</p><div class="pp-container-body"><p>This note is pulled in via <code><!-- include cycle detected: /home/watzak/master/kamod/preactpress/templates/hono/partials/shared-note.md --></code>.</p>
|
|
98
|
+
</div></div><h2 id="emoji-and-math" class="pp-heading">Emoji and math<a class="pp-heading-anchor" href="#emoji-and-math" aria-label="Link to this section">#</a></h2>
|
|
99
|
+
<p>Enable in config: <code>markdown: { emoji: true, math: true }</code>.</p>
|
|
100
|
+
<p>:tada: becomes a party popper when emoji is on.</p>
|
|
101
|
+
<p>Inline math: $E = mc^2$</p>
|
|
102
|
+
</div><nav class="hn-pager" aria-label="Page navigation"><a class="previous" href="/guide/configuration"><span>Previous</span>Configuration</a><a class="next" href="/interactive"><span>Next</span>Interactive MDX</a></nav><footer class="hn-doc-meta"><span>Updated Jun 5, 2026</span></footer></article></main><aside class="hn-outline" aria-label="On this page"><div class="hn-outline-panel"><h2>On this page</h2><ul><li class="level-2"><a href="#code">Code</a></li><li class="level-2"><a href="#snippet-import">Snippet import</a></li><li class="level-2"><a href="#links">Links</a></li><li class="level-2"><a href="#tables">Tables</a></li><li class="level-2"><a href="#quotes">Quotes</a></li><li class="level-2"><a href="#containers">Containers</a></li><li class="level-2"><a href="#gfm-alerts">GFM alerts</a></li><li class="level-2"><a href="#custom-heading-ids">Custom heading IDs</a></li><li class="level-2"><a href="#stable-id">Stable links</a></li><li class="level-2"><a href="#emoji">Emoji</a></li><li class="level-2"><a href="#inline-table-of-contents">Inline table of contents</a></li><li class="level-2"><a href="#second-section">Second section</a></li><li class="level-3"><a href="#sub-section">Sub section</a></li><li class="level-2"><a href="#code-groups">Code groups</a></li><li class="level-2"><a href="#markdown-inclusion">Markdown inclusion</a></li><li class="level-2"><a href="#included-body">Included body</a></li><li class="level-2"><a href="#heading-ids">Heading IDs</a></li><li class="level-2"><a href="#custom-anchor">Custom anchors</a></li><li class="level-2"><a href="#inline-table-of-contents-2">Inline table of contents</a></li><li class="level-3"><a href="#first-section">First section</a></li><li class="level-3"><a href="#second-section-2">Second section</a></li><li class="level-2"><a href="#code-groups-2">Code groups</a></li><li class="level-2"><a href="#markdown-includes">Markdown includes</a></li><li class="level-2"><a href="#emoji-and-math">Emoji and math</a></li></ul></div></aside></div><footer class="hn-footer">Built with PreactPress.</footer></div></div>
|
|
103
|
+
<script type="module" crossorigin src="/assets/main-Bqi-VFEk.js"></script>
|
|
104
|
+
</body>
|
|
105
|
+
</html>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Hono Starter</title>
|
|
7
|
+
<script src="/preactpress-theme.js"></script>
|
|
8
|
+
<meta name="description" content="Fast, lightweight docs and landing pages built on Web Standards.">
|
|
9
|
+
<meta property="og:title" content="Hono Starter">
|
|
10
|
+
<meta property="og:description" content="Fast, lightweight docs and landing pages built on Web Standards.">
|
|
11
|
+
<meta property="og:type" content="website">
|
|
12
|
+
<meta property="og:url" content="/partials/shared-note/">
|
|
13
|
+
<meta name="twitter:card" content="summary">
|
|
14
|
+
<meta name="twitter:title" content="Hono Starter">
|
|
15
|
+
<meta name="twitter:description" content="Fast, lightweight docs and landing pages built on Web Standards.">
|
|
16
|
+
<link rel="canonical" href="/partials/shared-note/">
|
|
17
|
+
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","headline":"Hono Starter","name":"Hono Starter","description":"Fast, lightweight docs and landing pages built on Web Standards.","url":"/partials/shared-note/","dateModified":"2026-06-05T06:17:39.711Z"}</script>
|
|
18
|
+
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
19
|
+
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
|
|
20
|
+
<link rel="icon" href="/favicon.png" type="image/png" sizes="any">
|
|
21
|
+
<link rel="apple-touch-icon" href="/favicon.png">
|
|
22
|
+
<link rel="stylesheet" crossorigin href="/assets/main-DIIN7FO0.css">
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
<template id="__PREACTPRESS_PAGE_DATA__">{"kind":"markdown","meta":{},"html":"\u003cdiv class=\"pp-container pp-container-tip\">\u003cp class=\"pp-container-title\">Shared fragment\u003c/p>\u003cdiv class=\"pp-container-body\">\u003cp>This note is pulled in via \u003ccode>::: tip Shared fragment This note is pulled in via \u003c/code>&lt;!-- include cycle detected: /home/watzak/master/kamod/preactpress/templates/hono/partials/shared-note.md --&gt;\u003ccode>. :::\u003c/code>.\u003c/p>\n\u003c/div>\u003c/div>","tags":[],"pageType":"website","headings":[],"relativePath":"partials/shared-note.md","lastUpdated":"2026-06-05T06:17:39.711Z"}</template>
|
|
26
|
+
<div id="app"><div class="hn-site"><a class="hn-skip" href="#content">Skip to content</a><header class="hn-header"><div class="hn-header-inner"><a class="hn-brand" href="/" aria-label="Hono Starter"><span class="hn-logo" aria-label="Hono Starter"><svg aria-hidden="true" viewBox="0 0 36 36" width="36" height="36"><rect width="36" height="36" rx="11" fill="currentColor" opacity="0.12"></rect><path d="M19.8 5.5c.8 4-2.8 5.9-4.7 8.2-1.8 2.1-2.5 4.9-.3 7 0-2.8 1.7-4.6 4.2-6.7 3.2 3 5.3 5.8 5.3 9.2 0 4.4-3.3 7.3-7.6 7.3-4.8 0-8.3-3.6-8.3-8.4 0-6.1 6.3-9.2 11.4-16.6Z" fill="currentColor"></path><path d="M21.7 25.7c0 2.2-1.7 3.8-3.9 3.8s-4-1.6-4-3.8c0-1.7 1-3.1 3.4-5.2.1 1.7 1.4 2.6 2.4 3.4.8.6 2.1 1 2.1 1.8Z" fill="currentColor" opacity="0.38"></path></svg><span>Hono Starter</span></span></a><div class="hn-header-actions"><nav class="hn-nav" aria-label="Main navigation"><a class href="/guide/what-is-preactpress">Docs</a><a class href="/markdown-examples">Examples</a><a class href="/about">About</a></nav><div class="hn-social" aria-label="Social links"><a href="https://github.com/your-org/your-project" aria-label="GitHub"><span><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.404 1.02.005 2.04.137 3 .404 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></span></a></div><details class="hn-locale-switcher"><summary>English</summary><div class="hn-locale-menu"><a href="/partials/shared-note" aria-current="page" class="active">English</a><a href="/de" class>Deutsch</a></div></details><button type="button" class="hn-theme-toggle" aria-label="Toggle theme"><span class="hn-theme-toggle-moon" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"><path d="M21 14.8A8.5 8.5 0 0 1 9.2 3a7 7 0 1 0 11.8 11.8Z" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7"></path></svg></span><span class="hn-theme-toggle-sun" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="3.5" stroke-width="1.7"></circle><path d="M12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4" stroke-linecap="round" stroke-width="1.7"></path></svg></span></button></div></div></header><div class="hn-doc-shell"><aside class="hn-sidebar" aria-label="Documentation navigation"><div class="hn-sidebar-panel"><label class="hn-search"><span>Search pages</span><input type="search" value placeholder="Filter documentation..."/></label><div class="hn-sidebar-group"><h2>Introduction</h2><ul><li><a class href="/">Welcome</a></li><li><a class href="/guide/what-is-preactpress">What is PreactPress?</a></li><li><a class href="/guide/getting-started">Getting Started</a></li><li><a class href="/guide/routing">Routing</a></li><li><a class href="/guide/deploy">Deploy</a></li><li><a class href="/guide/first-five-minutes">Your first 5 minutes</a></li><li><a class href="/guide/creating-pages">Creating pages</a></li><li><a class href="/guide/commands">Commands</a></li><li><a class href="/guide/configuration">Configuration</a></li></ul></div><div class="hn-sidebar-group"><h2>Reference</h2><ul><li><a class href="/markdown-examples">Markdown examples</a></li><li><a class href="/interactive">Interactive MDX</a></li></ul></div></div></aside><main id="content" class="hn-doc-main"><article class="hn-doc"><h1 class="hn-doc-title">Hono Starter</h1><div class="hn-doc-content"><div class="pp-container pp-container-tip"><p class="pp-container-title">Shared fragment</p><div class="pp-container-body"><p>This note is pulled in via <code>::: tip Shared fragment This note is pulled in via </code><!-- include cycle detected: /home/watzak/master/kamod/preactpress/templates/hono/partials/shared-note.md --><code>. :::</code>.</p>
|
|
27
|
+
</div></div></div><footer class="hn-doc-meta"><span>Updated Jun 5, 2026</span></footer></article></main></div><footer class="hn-footer">Built with PreactPress.</footer></div></div>
|
|
28
|
+
<script type="module" crossorigin src="/assets/main-Bqi-VFEk.js"></script>
|
|
29
|
+
</body>
|
|
30
|
+
</html>
|