@beforesemicolon/builder 1.8.23 → 1.8.24
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/README.md +26 -0
- package/dist/cjs/docs/markdown-layout/marked-extension.js +1 -1
- package/dist/cjs/docs/markdown-layout/types.js +1 -1
- package/dist/cjs/docs/run.js +2 -2
- package/dist/cjs/docs/templates/fading-citrus/README.md +56 -31
- package/dist/cjs/docs/templates/fading-citrus/assets/favicon/site.webmanifest +2 -2
- package/dist/cjs/docs/templates/fading-citrus/layouts/_footer.js +53 -60
- package/dist/cjs/docs/templates/fading-citrus/layouts/_header.js +65 -20
- package/dist/cjs/docs/templates/fading-citrus/layouts/_layout-utils.js +20 -0
- package/dist/cjs/docs/templates/fading-citrus/layouts/document.js +7 -4
- package/dist/cjs/docs/templates/fading-citrus/layouts/landing-hero.js +11 -3
- package/dist/cjs/docs/templates/fading-citrus/template.config.js +26 -4
- package/dist/cjs/docs/types.js +1 -1
- package/dist/esm/docs/markdown-layout/marked-extension.js +1 -1
- package/dist/esm/docs/run.js +4 -4
- package/dist/esm/docs/templates/fading-citrus/README.md +56 -31
- package/dist/esm/docs/templates/fading-citrus/assets/favicon/site.webmanifest +2 -2
- package/dist/esm/docs/templates/fading-citrus/layouts/_footer.js +53 -60
- package/dist/esm/docs/templates/fading-citrus/layouts/_header.js +65 -20
- package/dist/esm/docs/templates/fading-citrus/layouts/_layout-utils.js +20 -0
- package/dist/esm/docs/templates/fading-citrus/layouts/document.js +7 -4
- package/dist/esm/docs/templates/fading-citrus/layouts/landing-hero.js +11 -3
- package/dist/esm/docs/templates/fading-citrus/template.config.js +26 -4
- package/dist/types/docs/markdown-layout/marked-extension.d.ts +2 -1
- package/dist/types/docs/markdown-layout/types.d.ts +1 -0
- package/dist/types/docs/types.d.ts +32 -0
- package/package.json +1 -1
- package/dist/cjs/docs/templates/fading-citrus/assets/client-server.svg +0 -4
- package/dist/cjs/docs/templates/fading-citrus/assets/fast.svg +0 -4
- package/dist/cjs/docs/templates/fading-citrus/assets/independent.svg +0 -23
- package/dist/cjs/docs/templates/fading-citrus/assets/markup-banner.jpg +0 -0
- package/dist/cjs/docs/templates/fading-citrus/assets/markup-essentials-training.jpg +0 -0
- package/dist/cjs/docs/templates/fading-citrus/assets/markup-favicon.jpg +0 -0
- package/dist/cjs/docs/templates/fading-citrus/assets/markup-favicon.png +0 -0
- package/dist/cjs/docs/templates/fading-citrus/assets/markup-logo-name.svg +0 -10
- package/dist/cjs/docs/templates/fading-citrus/assets/markup-logo-name@2x.png +0 -0
- package/dist/cjs/docs/templates/fading-citrus/assets/markup-logo.svg +0 -13
- package/dist/cjs/docs/templates/fading-citrus/assets/markup-logo@2x.png +0 -0
- package/dist/cjs/docs/templates/fading-citrus/assets/reactive.svg +0 -3
- package/dist/cjs/docs/templates/fading-citrus/assets/simple.svg +0 -8
- package/dist/cjs/docs/templates/fading-citrus/assets/small.svg +0 -8
- package/dist/esm/docs/templates/fading-citrus/assets/client-server.svg +0 -4
- package/dist/esm/docs/templates/fading-citrus/assets/fast.svg +0 -4
- package/dist/esm/docs/templates/fading-citrus/assets/independent.svg +0 -23
- package/dist/esm/docs/templates/fading-citrus/assets/markup-banner.jpg +0 -0
- package/dist/esm/docs/templates/fading-citrus/assets/markup-essentials-training.jpg +0 -0
- package/dist/esm/docs/templates/fading-citrus/assets/markup-favicon.jpg +0 -0
- package/dist/esm/docs/templates/fading-citrus/assets/markup-favicon.png +0 -0
- package/dist/esm/docs/templates/fading-citrus/assets/markup-logo-name.svg +0 -10
- package/dist/esm/docs/templates/fading-citrus/assets/markup-logo-name@2x.png +0 -0
- package/dist/esm/docs/templates/fading-citrus/assets/markup-logo.svg +0 -13
- package/dist/esm/docs/templates/fading-citrus/assets/markup-logo@2x.png +0 -0
- package/dist/esm/docs/templates/fading-citrus/assets/reactive.svg +0 -3
- package/dist/esm/docs/templates/fading-citrus/assets/simple.svg +0 -8
- package/dist/esm/docs/templates/fading-citrus/assets/small.svg +0 -8
|
@@ -15,12 +15,34 @@ import landingCta from './layouts/landing-cta.js'
|
|
|
15
15
|
|
|
16
16
|
export default {
|
|
17
17
|
meta: {
|
|
18
|
-
siteName: '
|
|
19
|
-
title: '
|
|
20
|
-
description:
|
|
21
|
-
'Documentation for Before Semicolon projects, libraries, and developer tools.',
|
|
18
|
+
siteName: 'Documentation',
|
|
19
|
+
title: 'Project Documentation',
|
|
20
|
+
description: 'Documentation, guides, and references for this project.',
|
|
22
21
|
image: '/assets/site-image.jpg',
|
|
23
22
|
},
|
|
23
|
+
site: {
|
|
24
|
+
name: 'Documentation',
|
|
25
|
+
navLinks: [
|
|
26
|
+
{ label: 'Features', href: '/#features' },
|
|
27
|
+
{ label: 'Code', href: '/#code' },
|
|
28
|
+
{ label: 'Install', href: '/#install' },
|
|
29
|
+
],
|
|
30
|
+
actionLinks: [
|
|
31
|
+
{
|
|
32
|
+
label: 'Documentation',
|
|
33
|
+
href: '/documentation',
|
|
34
|
+
className: 'btn-primary',
|
|
35
|
+
},
|
|
36
|
+
],
|
|
37
|
+
footerDescription:
|
|
38
|
+
'Documentation, guides, and references for this project.',
|
|
39
|
+
footerGroups: [
|
|
40
|
+
{
|
|
41
|
+
title: 'Documentation',
|
|
42
|
+
links: [{ label: 'Docs', href: '/documentation' }],
|
|
43
|
+
},
|
|
44
|
+
],
|
|
45
|
+
},
|
|
24
46
|
markdownLayouts: {
|
|
25
47
|
'landing-hero': landingHero,
|
|
26
48
|
'landing-ecosystem': landingEcosystem,
|
package/dist/cjs/docs/types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var c=(e,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of a(t))!g.call(e,i)&&i!==s&&n(e,i,{get:()=>t[i],enumerable:!(r=o(t,i))||r.enumerable});return e};var p=e=>c(n({},"__esModule",{value:!0}),e);var l={};module.exports=p(l);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var i=Object.defineProperty;var u=(t,e)=>i(t,"name",{value:e,configurable:!0});import{parseLayoutBlock as y,readLayoutBlock as w}from"./parser.js";import{renderDefaultMarkdownLayout as M,renderMarkdownLayout as L}from"./renderer.js";const C=u(({marked:t,handlers:e={},renderMarkdown:d,templateConfig:s})=>({extensions:[{name:"markdownLayout",level:"block",start(o){return o.match(/^::: layout /m)?.index},tokenizer(o){const n=w(o);if(n)return{...y(n),type:"markdownLayout",raw:n}},renderer(o){const n=o,a={marked:t,templateConfig:s,renderMarkdown(r){return d?d(r):t.parse(r)},renderDefault(r){return M(r,a)},renderParts(r){return r.items.map(k=>({...k,html:a.renderMarkdown(k.body)}))}};return L(n,a,e)}}]}),"createMarkdownLayoutExtension");export{C as createMarkdownLayoutExtension};
|
package/dist/esm/docs/run.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var ie=Object.defineProperty;var c=(e,t)=>ie(e,"name",{value:t,configurable:!0});import{Marked as le}from"marked";import{cp as j,mkdir as S,readdir as ce,readFile as C,writeFile as
|
|
1
|
+
var ie=Object.defineProperty;var c=(e,t)=>ie(e,"name",{value:t,configurable:!0});import{Marked as le}from"marked";import{cp as j,mkdir as S,readdir as ce,readFile as C,writeFile as $}from"fs/promises";import o from"path";import me from"front-matter";import ue from"isomorphic-dompurify";import{markedHighlight as pe}from"marked-highlight";import Q from"highlight.js";import fe from"./templates/default.template.js";import de from"./renderer/index.js";import{createMarkdownLayoutExtension as he}from"./markdown-layout/index.js";import ge from"clean-css";import ye from"html-minifier";import*as X from"@putout/minify";import{fileURLToPath as we,pathToFileURL as A}from"url";import p from"fs";let V,R="";const Y=new ge({inline:["none"]}),W=new Map;W.set("default",fe);let _;const Z=c((e,t)=>t===!1?!1:t===void 0?e:e===!1||e===void 0?t:{...e,...t},"mergeThemeMode"),ve=c((e,t)=>{if(!(!e&&!t))return{light:Z(e?.light,t?.light),dark:Z(e?.dark,t?.dark)}},"mergeTheme"),Se=c((e,t)=>({...e,...t,markdownLayouts:{...e.markdownLayouts,...t.markdownLayouts},headScripts:{...e.headScripts,...t.headScripts},scripts:{...e.scripts,...t.scripts},theme:ve(e.theme,t.theme),meta:{...e.meta,...t.meta},site:{...e.site,...t.site}}),"mergeTemplateConfig"),De=c((e,t)=>{if(typeof e=="function")return!0;const{match:r}=e;return r?typeof r=="string"?t.includes(r):Array.isArray(r)?r.some(a=>t.includes(a)):r instanceof RegExp?r.test(t):r(t):!0},"scriptMatches"),ee=c((e,t)=>e?Object.values(e).filter(r=>r!==!1).filter(r=>De(r,t)).map(r=>typeof r=="function"?r():r.render()):[],"renderPageScripts"),G=c((e,t)=>{const r=Object.entries(t).filter(([a])=>a.startsWith("--")).map(([a,i])=>` ${a}: ${i};`).join(`
|
|
2
2
|
`);return r?`${e} {
|
|
3
3
|
${r}
|
|
4
4
|
}`:""},"renderThemeBlock"),be=c(e=>{if(!e)return"";const t=e.light===!1,r=e.dark===!1,a=e.light===!1?void 0:e.light,i=r?void 0:e.dark,m=a||i;return m?[G(":root",m),i&&!t?`@media (prefers-color-scheme: dark) {
|
|
@@ -7,10 +7,10 @@ ${G(" :root",i)}
|
|
|
7
7
|
.site-logo-dark { display: block; }`:"",r&&a?`.site-logo-light { display: block; }
|
|
8
8
|
.site-logo-dark { display: none; }`:""].filter(Boolean).join(`
|
|
9
9
|
|
|
10
|
-
`):""},"renderThemeStylesheet")
|
|
10
|
+
`):""},"renderThemeStylesheet"),$e=c((e="")=>String(e).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"),"escapeXML"),xe=c((e="")=>e.replace(/```[\s\S]*?```/g," ").replace(/`([^`]+)`/g,"$1").replace(/!\[[^\]]*]\([^)]*\)/g," ").replace(/\[([^\]]+)]\([^)]*\)/g,"$1").replace(/^#{1,6}\s+/gm,"").replace(/^---+$/gm," ").replace(/[>*_~]/g,"").replace(/\s+/g," ").trim(),"stripMarkdown"),Pe=c(e=>e==="/index.html"?"/":e.replace(/\/index\.html$/,"/").replace(/\.html$/,"").replace(/\/+/g,"/"),"pagePathToUrlPath"),te=c((e,t)=>e?`${e.replace(/\/$/,"")}${t==="/"?"/":t}`:t,"canonicalUrl"),ke=c(async(e,t)=>p.existsSync(e)?(await S(o.dirname(t),{recursive:!0}),await j(e,t),!0):!1,"copyIfExists"),Te=c(async e=>{const t=o.resolve(e,"logo.svg");p.existsSync(t)&&await Promise.all(["logo.light.svg","logo.dark.svg"].map(async r=>{const a=o.resolve(e,r);p.existsSync(a)||await j(t,a)}))},"ensureLogoModeAssets"),Me=c(e=>{const t={sitemap:!0,robots:!0,llms:!0,llmsFull:!0,netlify:!1};return e===!1?{sitemap:!1,robots:!1,llms:!1,llmsFull:!1,netlify:!1}:e===!0||e===void 0?t:{...t,...e}},"normalizeGeneratedFilesConfig"),je=c((e,t)=>{if(!t)return"";const r=new Date().toISOString().slice(0,10);return`<?xml version="1.0" encoding="UTF-8"?>
|
|
11
11
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
|
12
12
|
${e.map(i=>{const m=i.urlPath==="/"?"1.0":"0.8";return` <url>
|
|
13
|
-
<loc>${
|
|
13
|
+
<loc>${$e(te(t,i.urlPath))}</loc>
|
|
14
14
|
<lastmod>${r}</lastmod>
|
|
15
15
|
<changefreq>weekly</changefreq>
|
|
16
16
|
<priority>${m}</priority>
|
|
@@ -75,4 +75,4 @@ for = "/robots.txt"
|
|
|
75
75
|
[headers.values]
|
|
76
76
|
Content-Type = "text/plain; charset=utf-8"
|
|
77
77
|
Cache-Control = "public, max-age=0, must-revalidate"
|
|
78
|
-
`,"generateNetlifyToml")
|
|
78
|
+
`,"generateNetlifyToml"),x=c(async(e,t,r,a)=>{if(await ke(e,t))return;const i=r();if(!i){a&&console.warn(a);return}await S(o.dirname(t),{recursive:!0}),await $(t,i)},"writeGeneratedFile"),Oe=c(async({docsDir:e,docsSiteDir:t,pages:r,siteUrl:a,publicDir:i,generatedFiles:m})=>{m.sitemap&&await x(o.resolve(e,"sitemap.xml"),o.resolve(t,"sitemap.xml"),()=>je(r,a),"Skipping generated sitemap.xml because buildDocs({ siteUrl }) is not set."),m.robots&&await x(o.resolve(e,"robots.txt"),o.resolve(t,"robots.txt"),()=>Ce(a)),m.llms&&await x(o.resolve(e,"llms.txt"),o.resolve(t,"llms.txt"),()=>Fe(r)),m.llmsFull&&await x(o.resolve(e,"llms-full.txt"),o.resolve(t,"llms-full.txt"),()=>Ge(r,a)),m.netlify&&(await x(o.resolve(e,"_redirects"),o.resolve(t,"_redirects"),()=>Le(r,m)),await x(o.resolve(e,"netlify.toml"),o.resolve(t,"netlify.toml"),()=>Ee(i&&o.basename(i))))},"writeGeneratedDocsFiles"),se=c((e={},t,r)=>{const a=new le(pe({langPrefix:"hljs language-",highlight(i,m){const d=Q.getLanguage(m)?m:"plaintext";return Q.highlight(i,{language:d}).value}}));return a.use({renderer:de}),a.use(he({marked:a,handlers:e.markdownLayouts,renderMarkdown:r,templateConfig:e})),e.markedOptions&&a.use(e.markedOptions),t&&a.use(t),a},"createBaseMarked"),Ae=c((e={},t,r)=>{const a=se(e,t),i=c(d=>a.parse(d),"renderMarkdown"),m=se(e,t,i);return m.use({hooks:{postprocess(d){const{layout:y="default",...P}=_.attributes,k=ee(e.headScripts,d),T=ee(e.scripts,d);d=ue.sanitize(d);const D=[...d.matchAll(/<h([0-6])\sid="[^"]+".*?>.*?<a\s+href="([^"]+)".*?>([\s\S]*?)<\/a><\/h\1>/gm)].map(u=>({path:u[2],label:u[3].replace(/<[^>]+>/g,"").replace(/\s+/g," ").trim(),level:u[1]}));return W.get(y)?.({...P,content:d,siteMap:_.siteMap,tableOfContent:D,projectMeta:V,renderMarkdown:i,headScripts:k,scripts:T,themeStylesheet:e.theme?`/stylesheets/theme.css?v=${R}`:void 0,cacheKey:R,siteUrl:r,templateConfig:e})||d}}}),m},"createMarked"),w=c(async e=>{const t=await ce(e),r=[];for(const a of t){const i=o.extname(a);/^[._]/.test(a)||(i?r.push(o.join(e,a)):/(stylesheets|assets|scripts)/.test(a)||r.push(...await w(o.join(e,a))))}return r},"traverseDirectory"),lt=c(async({srcDir:e,publicDir:t,markedOptions:r,template:a,siteUrl:i,generatedFiles:m}={})=>{R=Date.now().toString(36);try{const s=o.resolve(process.cwd(),"package.json");p.existsSync(s)&&(V=JSON.parse(await C(s,"utf-8")))}catch(s){console.warn("Failed to load project package.json metadata",s)}const d=c(()=>{try{return __dirname}catch{return o.dirname(we(import.meta.url))}},"getDirname"),y=a?o.resolve(d(),"templates",a):null,P=y?o.resolve(y,"assets"):null,k=y?o.resolve(y,"stylesheets"):null,T=y?o.resolve(y,"layouts"):null;let D={};if(y)try{let s=o.resolve(y,"template.config.js");if(p.existsSync(s)||(s=s.replace(/\.js$/,".ts")),p.existsSync(s)){const n=await import(A(s).href);D=n.default||n}}catch(s){console.error(`Failed to load template config for ${a}`,s)}const u=e??o.resolve(process.cwd(),"docs"),f=t??o.resolve(process.cwd(),"website"),re=Me(m),v=o.resolve(u,"_template"),B=o.resolve(v,"assets"),N=o.resolve(v,"stylesheets"),U=o.resolve(v,"scripts"),z=o.resolve(v,"layouts"),q=o.resolve(u,"_layouts"),F=o.resolve(u,"assets"),H=o.resolve(u,"stylesheets"),L=o.resolve(u,"scripts");try{let s=o.resolve(v,"template.config.js");if(p.existsSync(s)||(s=s.replace(/\.js$/,".ts")),p.existsSync(s)){const n=await import(A(s).href),l=n.default||n;D=Se(D,l)}}catch(s){console.error("Failed to load docs _template config",s)}const oe=Ae(D,r,i);if(await S(f,{recursive:!0}),P&&p.existsSync(P))try{await j(P,F.replace(u,f),{recursive:!0})}catch(s){console.warn(s)}if(p.existsSync(F))try{await j(F,F.replace(u,f),{recursive:!0})}catch(s){console.warn(s)}if(p.existsSync(B))try{await j(B,o.resolve(f,"assets"),{recursive:!0})}catch(s){console.warn(s)}await Te(o.resolve(f,"assets"));try{const s=new Set;if(k&&p.existsSync(k)&&(await w(k)).forEach(l=>s.add(l)),p.existsSync(H)&&(await w(H)).forEach(l=>s.add(l)),p.existsSync(N)&&(await w(N)).forEach(l=>s.add(l)),s.size){await S(o.join(f,"stylesheets"),{recursive:!0});for(const l of s){const h=await C(l,"utf-8"),g=Y.minify(h);g.errors.length&&g.errors.forEach(console.error);const M=l.startsWith(v)?l.replace(v,f):l.startsWith(u)?l.replace(u,f):o.join(f,"stylesheets",o.basename(l));await $(M,g.styles??h)}}const n=be(D.theme);if(n){const l=Y.minify(n);l.errors.length&&l.errors.forEach(console.error),await S(o.join(f,"stylesheets"),{recursive:!0}),await $(o.join(f,"stylesheets","theme.css"),l.styles??n)}}catch(s){console.error(s)}if(p.existsSync(L))try{const s=await w(L);s.length&&await S(L.replace(u,f),{recursive:!0});for(const n of s)try{const l=await C(n,"utf-8");await $(n.replace(u,f),X.minify(l))}catch(l){console.error(l)}}catch(s){console.warn(s)}if(p.existsSync(U))try{const s=await w(U);s.length&&await S(o.join(f,"scripts"),{recursive:!0});for(const n of s)try{const l=await C(n,"utf-8");await $(n.replace(v,f),X.minify(l))}catch(l){console.error(l)}}catch(s){console.warn(s)}try{const s=new Map;T&&p.existsSync(T)&&(await w(T)).forEach(n=>{/\.(j|t)s$/.test(n)&&s.set(o.basename(n).replace(/\.(j|t)s$/,""),n)}),p.existsSync(q)&&(await w(q)).forEach(n=>{/\.(j|t)s$/.test(n)&&s.set(o.basename(n).replace(/\.(j|t)s$/,""),n)}),p.existsSync(z)&&(await w(z)).forEach(n=>{/\.(j|t)s$/.test(n)&&s.set(o.basename(n).replace(/\.(j|t)s$/,""),n)});for(const[n,l]of s.entries()){const h=await import(A(l).href);W.set(n,h.default)}}catch(s){console.error("Template import failed",s)}const ae=await w(u),I=new Map,J=(await Promise.all(ae.filter(s=>s.endsWith(".md")).map(async s=>{const n=await C(s,"utf-8");return{filePath:s,...me(n)}}))).sort((s,n)=>(s.attributes.order??0)-(n.attributes.order??0)).map(({attributes:s,body:n,filePath:l})=>{const h=l.replace(u,"").replace(/\.md/,".html"),g=l.replace(u,f).replace(".md",".html"),M=g.replace(o.basename(g),""),E=o.basename(h)||"/",ne=h.replace(E,"").replace(/\/$/,"");let b=I;ne.split("/").filter(Boolean).forEach(O=>{b.has(O)||b.set(O,new Map),b=b.get(O)});const K={...s,path:h};return b.has(E)||b.set(E,K),{attributes:K,fileWebsitePath:g,fileDirWebsitePath:M,body:n,sourcePath:o.relative(u,l),siteMap:I}});for(const{attributes:s,body:n,fileDirWebsitePath:l,fileWebsitePath:h,siteMap:g}of J){_={attributes:s,siteMap:g};const M=await oe.parse(n);await S(l,{recursive:!0}),await $(h,ye.minify(M,{includeAutoGeneratedTags:!0,removeAttributeQuotes:!0,removeComments:!0,removeRedundantAttributes:!0,removeScriptTypeAttributes:!0,removeStyleLinkTypeAttributes:!0,sortClassName:!0,useShortDoctype:!0,collapseWhitespace:!0,minifyJS:!0,minifyCSS:!0}))}await Oe({docsDir:u,docsSiteDir:f,pages:J.map(({attributes:s,body:n,sourcePath:l})=>{const h=Pe(String(s.path)),g=xe(n);return{sourcePath:l,urlPath:h,title:String(s.title||s.name||"").trim()||"Documentation",name:String(s.name||s.title||"").trim()||"Documentation",description:String(s.description||"").trim()||g.slice(0,156)||"Documentation page.",order:Number(s.order??999),summary:g.slice(0,320)}}),siteUrl:i,publicDir:f,generatedFiles:re})},"buildDocs");export{lt as buildDocs};
|
|
@@ -121,7 +121,7 @@ docs/_template/assets/logo.svg
|
|
|
121
121
|
|
|
122
122
|
The footer also uses social icons from `/assets/*.svg`.
|
|
123
123
|
|
|
124
|
-
|
|
124
|
+
Header and footer links are driven by `site` config. Override `_header.js`, `_footer.js`, or the full page layouts only when the HTML structure itself needs to change.
|
|
125
125
|
|
|
126
126
|
## Metadata
|
|
127
127
|
|
|
@@ -167,6 +167,57 @@ export default {
|
|
|
167
167
|
|
|
168
168
|
Override `_head-meta.js` in `docs/_template/layouts` only when the generated metadata shape itself needs to change.
|
|
169
169
|
|
|
170
|
+
## Site Identity And Links
|
|
171
|
+
|
|
172
|
+
The template is generic. Product-specific labels, repository links, footer links, and edit links should live in `docs/_template/template.config.js` under `site`.
|
|
173
|
+
|
|
174
|
+
```js
|
|
175
|
+
// docs/_template/template.config.js
|
|
176
|
+
export default {
|
|
177
|
+
site: {
|
|
178
|
+
name: 'Example',
|
|
179
|
+
packageName: '@example/project',
|
|
180
|
+
repositoryUrl: 'https://github.com/example/project',
|
|
181
|
+
repositoryLabel: 'Example GitHub repository',
|
|
182
|
+
docsEditUrl: 'https://github.com/example/project/tree/main/docs',
|
|
183
|
+
navLinks: [
|
|
184
|
+
{ label: 'Features', href: '/#features' },
|
|
185
|
+
{ label: 'Code', href: '/#code' },
|
|
186
|
+
{ label: 'Install', href: '/#install' },
|
|
187
|
+
],
|
|
188
|
+
actionLinks: [
|
|
189
|
+
{
|
|
190
|
+
label: 'Documentation',
|
|
191
|
+
href: '/documentation',
|
|
192
|
+
className: 'btn-primary',
|
|
193
|
+
},
|
|
194
|
+
],
|
|
195
|
+
footerDescription: 'Documentation for Example.',
|
|
196
|
+
footerGroups: [
|
|
197
|
+
{
|
|
198
|
+
title: 'Learning Resources',
|
|
199
|
+
links: [{ label: 'Documentation', href: '/documentation' }],
|
|
200
|
+
},
|
|
201
|
+
],
|
|
202
|
+
socialLinks: [
|
|
203
|
+
{
|
|
204
|
+
name: 'GitHub',
|
|
205
|
+
href: 'https://github.com/example',
|
|
206
|
+
icon: '/assets/github.svg',
|
|
207
|
+
},
|
|
208
|
+
],
|
|
209
|
+
copyright: `Copyright © ${new Date().getFullYear()} Example.`,
|
|
210
|
+
},
|
|
211
|
+
}
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
Relevant fields:
|
|
215
|
+
|
|
216
|
+
- `repositoryUrl` powers the header GitHub links and the docs version badge.
|
|
217
|
+
- `docsEditUrl` powers the “edit this doc” link. If omitted, that link is hidden.
|
|
218
|
+
- `packageName` powers the default landing hero install command.
|
|
219
|
+
- `navLinks`, `actionLinks`, `footerGroups`, and `socialLinks` replace the template defaults.
|
|
220
|
+
|
|
170
221
|
## Markdown Layout Handlers
|
|
171
222
|
|
|
172
223
|
`template.config.js` registers these Markdown layout handlers:
|
|
@@ -227,7 +278,8 @@ Supported layout options:
|
|
|
227
278
|
- `title2`: second headline line.
|
|
228
279
|
- `primaryHref`: primary CTA URL. Defaults to `/documentation/get-started`.
|
|
229
280
|
- `primaryLabel`: primary CTA label. Defaults to `Get Started`.
|
|
230
|
-
- `secondaryLabel`: secondary CTA label. Defaults to `npm i
|
|
281
|
+
- `secondaryLabel`: secondary CTA label. Defaults to `site.landingHeroSecondaryLabel`, then `npm i ${site.packageName}`, then `Install`.
|
|
282
|
+
- `versionHref`: version badge URL. Defaults to `site.landingHeroVersionHref`, then `site.repositoryUrl`.
|
|
231
283
|
|
|
232
284
|
Supported parts:
|
|
233
285
|
|
|
@@ -238,7 +290,7 @@ Supported parts:
|
|
|
238
290
|
Notes:
|
|
239
291
|
|
|
240
292
|
- The secondary CTA currently points to `#install`.
|
|
241
|
-
- The version badge
|
|
293
|
+
- The version badge links to `versionHref`, `site.landingHeroVersionHref`, or `site.repositoryUrl`.
|
|
242
294
|
|
|
243
295
|
## `landing-ecosystem`
|
|
244
296
|
|
|
@@ -579,9 +631,7 @@ docs/_template/template.config.js
|
|
|
579
631
|
|
|
580
632
|
## Assets
|
|
581
633
|
|
|
582
|
-
The template includes
|
|
583
|
-
|
|
584
|
-
Generic or shared assets:
|
|
634
|
+
The template includes only generic/shared assets. Product-specific logos, banners, screenshots, and icons should live in the docs source under `docs/_template/assets`.
|
|
585
635
|
|
|
586
636
|
- `logo.svg`: compatibility fallback for the main site logo.
|
|
587
637
|
- `logo.light.svg`: preferred logo on light backgrounds.
|
|
@@ -589,19 +639,6 @@ Generic or shared assets:
|
|
|
589
639
|
- `favicon/*`: default favicons.
|
|
590
640
|
- social icons: `medium2.svg`, `facebook.svg`, `instagram.svg`, `reddit.svg`, `twitter.svg`, `youtube.svg`.
|
|
591
641
|
|
|
592
|
-
Markup-specific assets still present:
|
|
593
|
-
|
|
594
|
-
- `markup-banner.jpg`
|
|
595
|
-
- `markup-essentials-training.jpg`
|
|
596
|
-
- `markup-favicon.*`
|
|
597
|
-
- `markup-logo*`
|
|
598
|
-
- `client-server.svg`
|
|
599
|
-
- `fast.svg`
|
|
600
|
-
- `independent.svg`
|
|
601
|
-
- `reactive.svg`
|
|
602
|
-
- `simple.svg`
|
|
603
|
-
- `small.svg`
|
|
604
|
-
|
|
605
642
|
Override assets from a docs project by adding files at the same target path:
|
|
606
643
|
|
|
607
644
|
```txt
|
|
@@ -732,18 +769,6 @@ export default {
|
|
|
732
769
|
}
|
|
733
770
|
```
|
|
734
771
|
|
|
735
|
-
## Known Template-Specific Assumptions
|
|
736
|
-
|
|
737
|
-
Some template internals are still Markup or Before Semicolon oriented:
|
|
738
|
-
|
|
739
|
-
- `_header.js` has Markup-oriented GitHub and documentation links.
|
|
740
|
-
- `_footer.js` has Before Semicolon social links, footer copy, and learning links.
|
|
741
|
-
- `document.js` builds edit links against the Markup GitHub docs path.
|
|
742
|
-
- Some landing layout handlers contain default labels or links aimed at Markup docs.
|
|
743
|
-
- Several assets are Markup-specific.
|
|
744
|
-
|
|
745
|
-
These are template defaults, not builder requirements. Override them from `docs/_template` for another documentation site.
|
|
746
|
-
|
|
747
772
|
## Minimal Landing Page
|
|
748
773
|
|
|
749
774
|
````md
|
|
@@ -1,77 +1,70 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
name: 'Facebook',
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
link: 'https://www.instagram.com/before_semicolon_/',
|
|
14
|
-
icon: 'assets/instagram.svg',
|
|
15
|
-
name: 'Instagram',
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
link: 'https://www.reddit.com/r/beforesemicolon/',
|
|
19
|
-
icon: 'assets/reddit.svg',
|
|
20
|
-
name: 'Reddit',
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
link: 'https://twitter.com/BeforeSemicolon',
|
|
24
|
-
icon: 'assets/twitter.svg',
|
|
25
|
-
name: 'Twitter',
|
|
26
|
-
},
|
|
1
|
+
import {
|
|
2
|
+
escapeAttribute,
|
|
3
|
+
escapeHTML,
|
|
4
|
+
linkAttrs,
|
|
5
|
+
siteConfig,
|
|
6
|
+
siteName,
|
|
7
|
+
} from './_layout-utils.js'
|
|
8
|
+
|
|
9
|
+
const defaultFooterGroups = [
|
|
27
10
|
{
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
name: 'YouTube',
|
|
11
|
+
title: 'Documentation',
|
|
12
|
+
links: [{ label: 'Docs', href: '/documentation' }],
|
|
31
13
|
},
|
|
32
14
|
]
|
|
33
15
|
|
|
34
|
-
|
|
35
|
-
const siteName =
|
|
36
|
-
props.projectMeta?.name || props.name || props.title || 'Documentation'
|
|
37
|
-
const logo = `
|
|
16
|
+
const renderLogo = (name) => `
|
|
38
17
|
<span class="site-logo-pair">
|
|
39
|
-
<img class="site-logo site-logo-dark" src="/assets/logo.dark.svg" alt="${
|
|
18
|
+
<img class="site-logo site-logo-dark" src="/assets/logo.dark.svg" alt="${escapeAttribute(name)} logo" width="100" height="30" />
|
|
40
19
|
<img class="site-logo site-logo-light" src="/assets/logo.light.svg" alt="" width="100" height="30" aria-hidden="true" />
|
|
41
20
|
</span>`
|
|
42
21
|
|
|
43
|
-
|
|
44
|
-
<footer class="site-footer">
|
|
45
|
-
<div class="footer-inner wrapper">
|
|
46
|
-
<div class="footer-brand">
|
|
47
|
-
${logo}
|
|
48
|
-
<p>A reactive HTML templating system for building dynamic UIs with pure JavaScript. No build step. No virtual DOM.</p>
|
|
49
|
-
</div>
|
|
22
|
+
const renderFooterGroup = (group) => `
|
|
50
23
|
<ul class="footer-links">
|
|
51
|
-
<li><h4
|
|
52
|
-
|
|
53
|
-
<li><a target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=mIr2XglV5nQ&list=PLpWvGP6yhJUgWNiz25vj__CArY9Z0O6ke&index=1">Essentials Training</a></li>
|
|
54
|
-
</ul>
|
|
55
|
-
<ul class="footer-links">
|
|
56
|
-
<li><h4>About <em>Before Semicolon</em></h4></li>
|
|
57
|
-
<li><a href="https://github.com/beforesemicolon" rel="noopener" target="_blank">Open Source</a></li>
|
|
58
|
-
<li><a href="https://beforesemicolon.com/" rel="noopener" target="_blank">Website</a></li>
|
|
59
|
-
<li><a href="https://medium.com/before-semicolon" rel="noopener" target="_blank">Blog</a></li>
|
|
60
|
-
<li><a href="https://www.youtube.com/channel/UCrU33aw1k9BqTIq2yKXrmBw" rel="noopener" target="_blank">YouTube Channel</a></li>
|
|
61
|
-
</ul>
|
|
62
|
-
<div class="footer-social" aria-label="social-media">
|
|
63
|
-
${social
|
|
24
|
+
<li><h4>${escapeHTML(group.title)}</h4></li>
|
|
25
|
+
${(group.links || [])
|
|
64
26
|
.map(
|
|
65
|
-
(
|
|
66
|
-
|
|
67
|
-
<span class="footer-social-icon" style="--icon: url('/${s.icon}')" aria-hidden="true"></span>
|
|
68
|
-
</a>
|
|
69
|
-
`
|
|
27
|
+
(link) =>
|
|
28
|
+
`<li><a href="${escapeAttribute(link.href)}"${linkAttrs(link)}>${escapeHTML(link.label)}</a></li>`
|
|
70
29
|
)
|
|
71
30
|
.join('')}
|
|
31
|
+
</ul>`
|
|
32
|
+
|
|
33
|
+
const renderSocialLink = (link) => `
|
|
34
|
+
<a href="${escapeAttribute(link.href)}"${linkAttrs(link)} aria-label="${escapeAttribute(link.name)}">
|
|
35
|
+
<span class="footer-social-icon" style="--icon: url('${escapeAttribute(link.icon)}')" aria-hidden="true"></span>
|
|
36
|
+
</a>`
|
|
37
|
+
|
|
38
|
+
export default (props = {}) => {
|
|
39
|
+
const site = siteConfig(props)
|
|
40
|
+
const name = siteName(props)
|
|
41
|
+
const description =
|
|
42
|
+
site.footerDescription ||
|
|
43
|
+
props.description ||
|
|
44
|
+
'Documentation, guides, and references for this project.'
|
|
45
|
+
const footerGroups = site.footerGroups || defaultFooterGroups
|
|
46
|
+
const socialLinks = site.socialLinks || []
|
|
47
|
+
const copyright =
|
|
48
|
+
site.copyright ||
|
|
49
|
+
`Copyright © ${new Date().getFullYear()} ${escapeHTML(name)}. All rights reserved.`
|
|
50
|
+
|
|
51
|
+
return `
|
|
52
|
+
<footer class="site-footer">
|
|
53
|
+
<div class="footer-inner wrapper">
|
|
54
|
+
<div class="footer-brand">
|
|
55
|
+
${renderLogo(name)}
|
|
56
|
+
<p>${escapeHTML(description)}</p>
|
|
72
57
|
</div>
|
|
58
|
+
${footerGroups.map(renderFooterGroup).join('')}
|
|
59
|
+
${
|
|
60
|
+
socialLinks.length
|
|
61
|
+
? `<div class="footer-social" aria-label="social-media">
|
|
62
|
+
${socialLinks.map(renderSocialLink).join('')}
|
|
63
|
+
</div>`
|
|
64
|
+
: ''
|
|
65
|
+
}
|
|
73
66
|
<div class="footer-credit">
|
|
74
|
-
<span
|
|
67
|
+
<span>${copyright}</span>
|
|
75
68
|
</div>
|
|
76
69
|
</div>
|
|
77
70
|
</footer>
|
|
@@ -1,42 +1,87 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import {
|
|
2
|
+
escapeAttribute,
|
|
3
|
+
escapeHTML,
|
|
4
|
+
linkAttrs,
|
|
5
|
+
siteConfig,
|
|
6
|
+
siteName,
|
|
7
|
+
} from './_layout-utils.js'
|
|
8
|
+
|
|
9
|
+
const githubIcon =
|
|
10
|
+
'<svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>'
|
|
11
|
+
|
|
12
|
+
const renderLogo = (name, width = 90, height = 27) => `
|
|
6
13
|
<span class="site-logo-pair">
|
|
7
|
-
<img class="site-logo site-logo-dark" src="/assets/logo.dark.svg" alt="${
|
|
8
|
-
<img class="site-logo site-logo-light" src="/assets/logo.light.svg" alt="" width="
|
|
14
|
+
<img class="site-logo site-logo-dark" src="/assets/logo.dark.svg" alt="${escapeAttribute(name)} logo" width="${width}" height="${height}" />
|
|
15
|
+
<img class="site-logo site-logo-light" src="/assets/logo.light.svg" alt="" width="${width}" height="${height}" aria-hidden="true" />
|
|
9
16
|
</span>`
|
|
10
17
|
|
|
18
|
+
const defaultNavLinks = [
|
|
19
|
+
{ label: 'Features', href: '/#features' },
|
|
20
|
+
{ label: 'Code', href: '/#code' },
|
|
21
|
+
{ label: 'Install', href: '/#install' },
|
|
22
|
+
]
|
|
23
|
+
|
|
24
|
+
const defaultActionLinks = [
|
|
25
|
+
{
|
|
26
|
+
label: 'Documentation',
|
|
27
|
+
href: '/documentation',
|
|
28
|
+
className: 'btn-primary',
|
|
29
|
+
},
|
|
30
|
+
]
|
|
31
|
+
|
|
32
|
+
const renderTextLink = (link) => `
|
|
33
|
+
<a href="${escapeAttribute(link.href)}"${linkAttrs(link)}${link.className ? ` class="${escapeAttribute(link.className)}"` : ''}${link.ariaLabel ? ` aria-label="${escapeAttribute(link.ariaLabel)}"` : ''}>${escapeHTML(link.label)}</a>`
|
|
34
|
+
|
|
35
|
+
const renderRepositoryLink = (props, docs = false) => {
|
|
36
|
+
const site = siteConfig(props)
|
|
37
|
+
|
|
38
|
+
if (!site.repositoryUrl) return ''
|
|
39
|
+
|
|
40
|
+
const label = site.repositoryLabel || `${siteName(props)} repository`
|
|
41
|
+
|
|
42
|
+
if (docs) {
|
|
43
|
+
return `
|
|
44
|
+
<a href="${escapeAttribute(site.repositoryUrl)}" target="_blank" rel="noopener" aria-label="${escapeAttribute(label)}" class="github-link docs-github-link">
|
|
45
|
+
<span>v${escapeHTML(props.projectMeta?.version || '')}</span>
|
|
46
|
+
${githubIcon}
|
|
47
|
+
</a>`
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
return `
|
|
51
|
+
<a href="${escapeAttribute(site.repositoryUrl)}" target="_blank" rel="noopener" aria-label="${escapeAttribute(label)}" class="github-link">
|
|
52
|
+
${githubIcon}
|
|
53
|
+
</a>`
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export default (props = {}) => {
|
|
57
|
+
const isDocs = props.path?.startsWith('/documentation')
|
|
58
|
+
const name = siteName(props)
|
|
59
|
+
const site = siteConfig(props)
|
|
60
|
+
const navLinks = site.navLinks || defaultNavLinks
|
|
61
|
+
const actionLinks = site.actionLinks || defaultActionLinks
|
|
62
|
+
|
|
11
63
|
return `
|
|
12
64
|
<header class="site-header">
|
|
13
65
|
<div class="header-inner wrapper">
|
|
14
66
|
<h1>
|
|
15
|
-
<a href="/" aria-label="${
|
|
16
|
-
${
|
|
67
|
+
<a href="/" aria-label="${escapeAttribute(name)} home">
|
|
68
|
+
${renderLogo(name)}
|
|
17
69
|
</a>
|
|
18
70
|
</h1>
|
|
19
71
|
${
|
|
20
72
|
isDocs
|
|
21
73
|
? `
|
|
22
74
|
<nav class="nav-actions docs-actions">
|
|
23
|
-
|
|
24
|
-
<span>v${props.projectMeta?.version || ''}</span>
|
|
25
|
-
<svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
|
26
|
-
</a>
|
|
75
|
+
${renderRepositoryLink(props, true)}
|
|
27
76
|
</nav>
|
|
28
77
|
`
|
|
29
78
|
: `
|
|
30
79
|
<nav class="nav-links">
|
|
31
|
-
|
|
32
|
-
<a href="/#code">Code</a>
|
|
33
|
-
<a href="/#install">Install</a>
|
|
80
|
+
${navLinks.map(renderTextLink).join('')}
|
|
34
81
|
</nav>
|
|
35
82
|
<nav class="nav-actions">
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
</a>
|
|
39
|
-
<a href="/documentation" class="btn-primary">Documentation</a>
|
|
83
|
+
${renderRepositoryLink(props)}
|
|
84
|
+
${actionLinks.map(renderTextLink).join('')}
|
|
40
85
|
</nav>
|
|
41
86
|
`
|
|
42
87
|
}
|
|
@@ -6,6 +6,26 @@ export const escapeHTML = (value = '') =>
|
|
|
6
6
|
.replace(/"/g, '"')
|
|
7
7
|
.replace(/'/g, ''')
|
|
8
8
|
|
|
9
|
+
export const escapeAttribute = escapeHTML
|
|
10
|
+
|
|
11
|
+
export const isExternalHref = (href = '') => /^(https?:)?\/\//.test(href)
|
|
12
|
+
|
|
13
|
+
export const linkAttrs = (link = {}) => {
|
|
14
|
+
const href = link.href || '#'
|
|
15
|
+
const external = link.external ?? isExternalHref(href)
|
|
16
|
+
|
|
17
|
+
return external ? ' target="_blank" rel="noopener"' : ''
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export const siteConfig = (props = {}) => props.templateConfig?.site || {}
|
|
21
|
+
|
|
22
|
+
export const siteName = (props = {}) =>
|
|
23
|
+
siteConfig(props).name ||
|
|
24
|
+
props.projectMeta?.name ||
|
|
25
|
+
props.name ||
|
|
26
|
+
props.title ||
|
|
27
|
+
'Documentation'
|
|
28
|
+
|
|
9
29
|
export const partByName = (parts, name) =>
|
|
10
30
|
parts.find((part) => part.name === name)
|
|
11
31
|
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import meta from './_head-meta.js'
|
|
2
2
|
import header from './_header.js'
|
|
3
3
|
import footer from './_footer.js'
|
|
4
|
-
|
|
5
|
-
const githubDocsPath =
|
|
6
|
-
'https://github.com/beforesemicolon/markup/tree/main/docs'
|
|
4
|
+
import { escapeAttribute, siteConfig } from './_layout-utils.js'
|
|
7
5
|
|
|
8
6
|
const navCategoryToHTML = (docs, currentPath) =>
|
|
9
7
|
Array.from(docs.entries())
|
|
@@ -27,6 +25,7 @@ export default (props) => {
|
|
|
27
25
|
const docs = props.siteMap.get('documentation')
|
|
28
26
|
const isDocsIndex = props.path === '/documentation/index.html'
|
|
29
27
|
const cacheKey = props.cacheKey ? `?v=${props.cacheKey}` : ''
|
|
28
|
+
const docsEditUrl = siteConfig(props).docsEditUrl?.replace(/\/$/, '')
|
|
30
29
|
const docsMenu = `<ul>${navCategoryToHTML(docs, props.path)}</ul>`
|
|
31
30
|
const pages = [...docs.values()].flatMap((page) =>
|
|
32
31
|
page instanceof Map ? [...page.values()] : [page]
|
|
@@ -74,7 +73,11 @@ export default (props) => {
|
|
|
74
73
|
${nextPage ? `<a href="${nextPage.path.replace('.html', '')}" id="next-doc">${nextPage.name} <span aria-hidden="true">>></span></a>` : ''}
|
|
75
74
|
</div>
|
|
76
75
|
|
|
77
|
-
|
|
76
|
+
${
|
|
77
|
+
docsEditUrl
|
|
78
|
+
? `<a href="${escapeAttribute(`${docsEditUrl}${props.path.replace('.html', '')}.md`)}" id="edit-doc" target="_blank" rel="noopener">edit this doc</a>`
|
|
79
|
+
: ''
|
|
80
|
+
}
|
|
78
81
|
</article>
|
|
79
82
|
<aside id="table-of-content">
|
|
80
83
|
<h4>Content</h4>
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
import { renderCodeBlock } from './_code-snippet.js'
|
|
2
2
|
import {
|
|
3
3
|
codeFromPart,
|
|
4
|
+
escapeAttribute,
|
|
4
5
|
icon,
|
|
5
6
|
option,
|
|
6
7
|
partByName,
|
|
8
|
+
siteConfig,
|
|
7
9
|
statContent,
|
|
8
10
|
withFirstParagraphClass,
|
|
9
11
|
} from './_layout-utils.js'
|
|
10
12
|
|
|
11
|
-
export default ({ parts, options }) => {
|
|
13
|
+
export default ({ parts, options }, context = {}) => {
|
|
14
|
+
const site = siteConfig(context)
|
|
12
15
|
const copy = partByName(parts, 'copy') || parts[0]
|
|
13
16
|
const code = partByName(parts, 'code') || parts[1]
|
|
14
17
|
const stats = parts.filter((part) => part.name === 'stat')
|
|
@@ -22,8 +25,13 @@ export default ({ parts, options }) => {
|
|
|
22
25
|
const primaryLabel = option(options.primaryLabel, 'Get Started')
|
|
23
26
|
const secondaryLabel = option(
|
|
24
27
|
options.secondaryLabel,
|
|
25
|
-
|
|
28
|
+
site.landingHeroSecondaryLabel ||
|
|
29
|
+
(site.packageName ? `npm i ${site.packageName}` : 'Install')
|
|
26
30
|
)
|
|
31
|
+
const versionHref =
|
|
32
|
+
option(options.versionHref) ||
|
|
33
|
+
site.landingHeroVersionHref ||
|
|
34
|
+
site.repositoryUrl
|
|
27
35
|
|
|
28
36
|
return `
|
|
29
37
|
<section class="hero-section relative overflow-hidden">
|
|
@@ -33,7 +41,7 @@ export default ({ parts, options }) => {
|
|
|
33
41
|
<div class="hero-content">
|
|
34
42
|
${
|
|
35
43
|
version
|
|
36
|
-
? `<a href="
|
|
44
|
+
? `<a href="${escapeAttribute(versionHref || '#')}"${versionHref ? ' target="_blank" rel="noopener"' : ''} class="version-badge">
|
|
37
45
|
${icon('sparkles')}
|
|
38
46
|
<span>${version}</span>
|
|
39
47
|
${icon('arrowRight')}
|