@veluai/velu 0.1.4 → 0.1.6
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 +80 -80
- package/dist/cli.js +9 -9
- package/package.json +1 -1
- package/runtime/velu-ui/lib/lang-icons.jsx +147 -147
- package/templates/starter/essentials/code.mdx +29 -29
package/README.md
CHANGED
|
@@ -1,80 +1,80 @@
|
|
|
1
|
-
# Velu
|
|
2
|
-
|
|
3
|
-
A documentation-site generator with live preview. Scaffold a docs project
|
|
4
|
-
and run it locally with two commands — author your pages in Markdown +
|
|
5
|
-
components, configure the site with a single `velu.json`.
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install -g @veluai/velu
|
|
9
|
-
velu init my-docs
|
|
10
|
-
velu dev my-docs
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
Then open <http://localhost:5173>. Editing any `.mdx` page or `velu.json`
|
|
14
|
-
reloads the browser automatically.
|
|
15
|
-
|
|
16
|
-
> Requires **Node.js 18+**. Prefer not to install globally? Use
|
|
17
|
-
> `npx @veluai/velu init my-docs` and `npx @veluai/velu dev my-docs`.
|
|
18
|
-
|
|
19
|
-
## Commands
|
|
20
|
-
|
|
21
|
-
| Command | What it does |
|
|
22
|
-
| --- | --- |
|
|
23
|
-
| `velu init <dir>` | Scaffold a new docs project into `<dir>` (creates `velu.json`, a favicon, and a set of starter `.mdx` pages). |
|
|
24
|
-
| `velu dev [dir]` | Start the live-preview dev server for the project in `<dir>` (defaults to the current directory). |
|
|
25
|
-
|
|
26
|
-
Set a custom port with the `PORT` env var:
|
|
27
|
-
|
|
28
|
-
```bash
|
|
29
|
-
PORT=5180 velu dev my-docs
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## Project layout
|
|
33
|
-
|
|
34
|
-
`velu init` produces a project shaped like this:
|
|
35
|
-
|
|
36
|
-
```
|
|
37
|
-
my-docs/
|
|
38
|
-
├─ velu.json # site config: name, colors, font, favicon, navigation
|
|
39
|
-
├─ favicon.svg
|
|
40
|
-
├─ index.mdx # pages, organized however your navigation references them
|
|
41
|
-
├─ quickstart.mdx
|
|
42
|
-
└─ …
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
## `velu.json`
|
|
46
|
-
|
|
47
|
-
`velu.json` drives the whole site — branding and navigation:
|
|
48
|
-
|
|
49
|
-
```json
|
|
50
|
-
{
|
|
51
|
-
"$schema": "https://veluai.com/velu.schema.json",
|
|
52
|
-
"name": "My Docs",
|
|
53
|
-
"colors": { "primary": "#dc143c" },
|
|
54
|
-
"favicon": "/favicon.svg",
|
|
55
|
-
"font": { "family": "Inter" },
|
|
56
|
-
"navigation": {
|
|
57
|
-
"tabs": [
|
|
58
|
-
{
|
|
59
|
-
"tab": "Guides",
|
|
60
|
-
"groups": [
|
|
61
|
-
{ "group": "Getting started", "pages": ["index", "quickstart"] }
|
|
62
|
-
]
|
|
63
|
-
}
|
|
64
|
-
]
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
- **`colors`** — `primary` is required; `light` and `dark` default to `primary`.
|
|
70
|
-
- **`navigation`** — Mintlify-compatible: `products → versions → languages →
|
|
71
|
-
tabs → anchors → groups → pages`. Switchable axes (products, versions,
|
|
72
|
-
languages) become URL path prefixes; the default value of each axis is
|
|
73
|
-
unprefixed. Languages are stored as ISO 639-1 codes and shown with their
|
|
74
|
-
native name.
|
|
75
|
-
|
|
76
|
-
Page labels come from each page's frontmatter `title`.
|
|
77
|
-
|
|
78
|
-
## License
|
|
79
|
-
|
|
80
|
-
Proprietary. © Velu.
|
|
1
|
+
# Velu
|
|
2
|
+
|
|
3
|
+
A documentation-site generator with live preview. Scaffold a docs project
|
|
4
|
+
and run it locally with two commands — author your pages in Markdown +
|
|
5
|
+
components, configure the site with a single `velu.json`.
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install -g @veluai/velu
|
|
9
|
+
velu init my-docs
|
|
10
|
+
velu dev my-docs
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Then open <http://localhost:5173>. Editing any `.mdx` page or `velu.json`
|
|
14
|
+
reloads the browser automatically.
|
|
15
|
+
|
|
16
|
+
> Requires **Node.js 18+**. Prefer not to install globally? Use
|
|
17
|
+
> `npx @veluai/velu init my-docs` and `npx @veluai/velu dev my-docs`.
|
|
18
|
+
|
|
19
|
+
## Commands
|
|
20
|
+
|
|
21
|
+
| Command | What it does |
|
|
22
|
+
| --- | --- |
|
|
23
|
+
| `velu init <dir>` | Scaffold a new docs project into `<dir>` (creates `velu.json`, a favicon, and a set of starter `.mdx` pages). |
|
|
24
|
+
| `velu dev [dir]` | Start the live-preview dev server for the project in `<dir>` (defaults to the current directory). |
|
|
25
|
+
|
|
26
|
+
Set a custom port with the `PORT` env var:
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
PORT=5180 velu dev my-docs
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Project layout
|
|
33
|
+
|
|
34
|
+
`velu init` produces a project shaped like this:
|
|
35
|
+
|
|
36
|
+
```
|
|
37
|
+
my-docs/
|
|
38
|
+
├─ velu.json # site config: name, colors, font, favicon, navigation
|
|
39
|
+
├─ favicon.svg
|
|
40
|
+
├─ index.mdx # pages, organized however your navigation references them
|
|
41
|
+
├─ quickstart.mdx
|
|
42
|
+
└─ …
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## `velu.json`
|
|
46
|
+
|
|
47
|
+
`velu.json` drives the whole site — branding and navigation:
|
|
48
|
+
|
|
49
|
+
```json
|
|
50
|
+
{
|
|
51
|
+
"$schema": "https://veluai.com/velu.schema.json",
|
|
52
|
+
"name": "My Docs",
|
|
53
|
+
"colors": { "primary": "#dc143c" },
|
|
54
|
+
"favicon": "/favicon.svg",
|
|
55
|
+
"font": { "family": "Inter" },
|
|
56
|
+
"navigation": {
|
|
57
|
+
"tabs": [
|
|
58
|
+
{
|
|
59
|
+
"tab": "Guides",
|
|
60
|
+
"groups": [
|
|
61
|
+
{ "group": "Getting started", "pages": ["index", "quickstart"] }
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
- **`colors`** — `primary` is required; `light` and `dark` default to `primary`.
|
|
70
|
+
- **`navigation`** — Mintlify-compatible: `products → versions → languages →
|
|
71
|
+
tabs → anchors → groups → pages`. Switchable axes (products, versions,
|
|
72
|
+
languages) become URL path prefixes; the default value of each axis is
|
|
73
|
+
unprefixed. Languages are stored as ISO 639-1 codes and shown with their
|
|
74
|
+
native name.
|
|
75
|
+
|
|
76
|
+
Page labels come from each page's frontmatter `title`.
|
|
77
|
+
|
|
78
|
+
## License
|
|
79
|
+
|
|
80
|
+
Proprietary. © Velu.
|
package/dist/cli.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
var
|
|
3
|
-
`,"utf-8");let n=await
|
|
4
|
-
`)}var
|
|
5
|
-
`),"","export const pages = {",
|
|
2
|
+
var ke=Object.defineProperty;var w=(e,t)=>()=>(e&&(t=e(e=0)),t);var z=(e,t)=>{for(var o in t)ke(e,o,{get:t[o],enumerable:!0})};var G={};z(G,{initProject:()=>Ae});import k from"node:fs/promises";import $ from"node:path";import{fileURLToPath as $e}from"node:url";async function Ae(e,t){try{if((await k.readdir(e)).length>0)throw new Error(`Directory "${t}" already exists and is not empty. Choose a different name or remove the folder first.`)}catch(s){if(s.code!=="ENOENT")throw s}await k.mkdir(e,{recursive:!0}),await k.cp(Te,e,{recursive:!0});let o=$.join(e,"velu.json"),r=JSON.parse(await k.readFile(o,"utf-8"));r.name=t,await k.writeFile(o,JSON.stringify(r,null,2)+`
|
|
3
|
+
`,"utf-8");let n=await V(e);console.log(`[velu] created ${t}/`);for(let s of n)console.log(` ${s}`);console.log(""),console.log("Next steps:"),console.log(` cd ${t}`),console.log(" velu dev")}async function V(e,t=e,o=[]){let r=await k.readdir(e,{withFileTypes:!0});for(let n of r){let s=$.join(e,n.name);n.isDirectory()?await V(s,t,o):o.push($.relative(t,s).split($.sep).join("/"))}return o.sort()}var Pe,Te,B=w(()=>{Pe=$.dirname($e(import.meta.url)),Te=$.resolve(Pe,"..","templates","starter")});import{visit as Ee}from"unist-util-visit";import{toString as Fe}from"mdast-util-to-string";import Le from"github-slugger";import{valueToEstree as je}from"estree-util-value-to-estree";function I(){return e=>{let t=new Le,o=[];Ee(e,"heading",i=>{let l=Fe(i);o.push({depth:i.depth,id:t.slug(l),label:l})});let r={children:[]},n=[{node:r,depth:0}];for(let i of o){for(;n.length>1&&n[n.length-1].depth>=i.depth;)n.pop();let l={id:i.id,label:i.label},a=n[n.length-1].node;a.children||(a.children=[]),a.children.push(l),n.push({node:l,depth:i.depth})}let s=r.children;e.children.unshift({type:"mdxjsEsm",value:"",data:{estree:{type:"Program",sourceType:"module",body:[{type:"ExportNamedDeclaration",specifiers:[],declaration:{type:"VariableDeclaration",kind:"const",declarations:[{type:"VariableDeclarator",id:{type:"Identifier",name:"toc"},init:je(s)}]}}]}}})}}var q=w(()=>{});import Oe from"node:fs/promises";import J from"node:path";function N(e={},t){let o=e.colors?.primary??Ie;return{name:e.name??t??"docs",colors:{primary:o,light:e.colors?.light??o,dark:e.colors?.dark??o},favicon:e.favicon??null,font:{family:e.font?.family??Ne},navigation:e.navigation??null}}async function D(e){let t=J.join(e,"velu.json"),o;try{o=await Oe.readFile(t,"utf-8")}catch(n){throw n.code==="ENOENT"?new Error(`No velu.json found in ${e}. Run \`velu init <name>\` to scaffold one.`):n}let r;try{r=JSON.parse(o)}catch(n){throw new Error(`velu.json is not valid JSON: ${n.message}`)}return N(r,J.basename(e))}function H(e){let{colors:t,font:o}=e;return[":root:root {",` --accent-color: ${t.light};`,` --font-sans: "${o.family}", sans-serif;`,"}",':root:root[data-theme="dark"] {',` --accent-color: ${t.dark};`,"}"].join(`
|
|
4
|
+
`)}var Ie,Ne,W=w(()=>{Ie="#dc143c",Ne="Google Sans Flex"});import Re from"github-slugger";import Ue from"iso-639-1";function _e(e){let t=String(e).toLowerCase();return Ue.getNativeName(t)||e}function j(e){return new Re().slug(String(e??""))}function Me(e){let t=String(e).replace(/^\/+|\/+$/g,"").split("/").filter(Boolean);return t[t.length-1]==="index"&&t.pop(),"/"+t.join("/")}function Y(e){let t={kind:"root",children:T(e??{})};return Q(t.children),t}function T(e){let t=Array.isArray(e.anchors)?e.anchors.map(qe):[];if(Array.isArray(e.products))return[...t,...e.products.map(ze)];if(Array.isArray(e.versions))return[...t,...e.versions.map(Ve)];if(Array.isArray(e.languages))return[...t,...e.languages.map(Ge)];if(Array.isArray(e.tabs))return[...t,...e.tabs.map(Be)];let o=[...t];return Array.isArray(e.groups)&&o.push(...e.groups.map(K)),Array.isArray(e.pages)&&o.push(...e.pages.map(X)),o}function ze(e){return{kind:"product",label:e.name??e.product,slug:j(e.product),icon:e.icon,color:e.color,default:!!e.default,children:T(e)}}function Ve(e){return{kind:"version",label:e.version,slug:j(e.version),default:!!e.default,children:T(e)}}function Ge(e){let t=String(e.language);return{kind:"language",code:t,label:_e(t),slug:j(t),default:!!e.default,children:T(e)}}function Be(e){return{kind:"tab",label:e.tab,slug:j(e.tab),icon:e.icon,href:e.href,children:T(e)}}function qe(e){return{kind:"anchor",label:e.anchor,icon:e.icon,href:e.href,color:e.color}}function K(e){let t=(e.pages??[]).map(X);return e.root&&t.unshift({kind:"page",pagePath:e.root}),{kind:"group",label:e.group,icon:e.icon,expanded:!!e.expanded,root:e.root,children:t}}function X(e){return typeof e=="string"?{kind:"page",pagePath:e}:K(e)}function Q(e){for(let t of Ce){let o=e.filter(r=>r.kind===t);o.length&&!o.some(r=>r.default)&&(o[0].default=!0)}for(let t of e)t.children&&Q(t.children)}function Z(e){let t=[],o=(r,n,s)=>{if(r.kind==="page"){t.push({pagePath:r.pagePath,url:Je(r.pagePath,n),ctx:{...n},ancestors:s,node:r});return}let i=n;r.kind==="product"?i={...n,product:r.default?null:r.slug}:r.kind==="version"?i={...n,version:r.default?null:r.slug}:r.kind==="language"&&(i={...n,language:r.default?null:r.slug});let l=r.kind==="root"?s:[...s,r];for(let a of r.children??[])o(a,i,l)};return o(e,{product:null,version:null,language:null},[]),t}function Je(e,t){let o=[t.product,t.version,t.language].filter(Boolean),r=Me(e).split("/").filter(Boolean);return"/"+[...o,...r].join("/")}var Ce,R=w(()=>{Ce=["product","version","language"]});import De from"node:fs";import ee from"node:path";function te(e,t){let o=[],r=[],n=new Set;for(let s of Z(e)){if(n.has(s.url)){o.push(`duplicate URL "${s.url}" (page "${s.pagePath}") \u2014 keeping the first occurrence`);continue}n.add(s.url);let i=s.pagePath.replace(/^\/+|\/+$/g,""),l=ee.join(t,...i.split("/"))+".mdx",a=De.existsSync(l);a||o.push(`page "${s.pagePath}" \u2192 ${ee.relative(t,l)} not found`),r.push({pagePath:s.pagePath,url:s.url,fileAbsPath:l,exists:a})}return{pageEntries:r,warnings:o}}var re=w(()=>{R()});import He from"node:fs";import oe from"node:path";function ie(e){return{name:"velu-site",resolveId(t){return t===se?ne:null},load(t){return t!==ne?null:We(e)}}}function We(e){let t={};try{t=JSON.parse(He.readFileSync(oe.join(e,"velu.json"),"utf-8"))}catch{}let o=Y(t.navigation??{}),{pageEntries:r,warnings:n}=te(o,e);for(let a of n)console.warn(`[velu] nav: ${a}`);let s=[],i=[],l=0;for(let a of r)if(a.exists){let E=JSON.stringify(a.fileAbsPath.split(oe.sep).join("/")),S=`__p${l++}`;s.push(`import * as ${S} from ${E};`),i.push(` ${JSON.stringify(a.url)}: { Component: ${S}.default, frontmatter: ${S}.frontmatter, toc: ${S}.toc },`)}else i.push(` ${JSON.stringify(a.url)}: { missing: true },`);return["// AUTO-GENERATED by vite-plugin-velu-site. Do not edit.",s.join(`
|
|
5
|
+
`),"","export const pages = {",i.join(`
|
|
6
6
|
`),"};",`export const navigation = ${JSON.stringify(o)};`,""].join(`
|
|
7
|
-
`)}var
|
|
8
|
-
`)}async function
|
|
9
|
-
${
|
|
10
|
-
</style>`,
|
|
11
|
-
`),
|
|
7
|
+
`)}var se,ne,ae=w(()=>{R();re();se="virtual:velu-site",ne="\0"+se});var me={};z(me,{startDevServer:()=>mt});import le from"node:fs/promises";import ce from"node:fs";import Ye from"node:http";import g from"node:path";import{fileURLToPath as Ke}from"node:url";import{createRequire as Xe}from"node:module";import Qe from"chokidar";import Ze from"express";import et from"@tailwindcss/vite";import tt from"@vitejs/plugin-react";import rt from"@mdx-js/rollup";import ot from"remark-frontmatter";import nt from"remark-mdx-frontmatter";import st from"remark-gfm";import it from"rehype-slug";import{createServer as at,searchForWorkspaceRoot as lt}from"vite";function dt(e){return`<link rel="stylesheet" href="${`https://fonts.googleapis.com/css2?family=${encodeURIComponent(e).replace(/%20/g,"+")}:wght@300;400;500;600;700&display=swap`}" />`}async function fe(e){try{return await D(e)}catch(t){return console.warn(`[velu] ${t.message} Using defaults.`),N({},g.basename(e))}}async function pe(e,t){let o=await e.moduleGraph.getModuleByUrl(t,!0),r=new Map,n=new Set;async function s(i){if(!(!i||n.has(i.url))){if(n.add(i.url),i.id&&ut.test(i.id)){let l=i.url.includes("?")?"&":"?",a=await e.transformRequest(`${i.url}${l}direct`);a?.code&&r.set(i.url,a.code)}for(let l of i.importedModules)await s(l)}}return await s(o),[...r.values()].join(`
|
|
8
|
+
`)}async function mt(e){console.log(`[velu-cli] dev server for: ${e}`);let t=!!process.env.VELU_PROFILE,o=performance.now(),r=(m,c)=>t&&console.log(`[velu-profile] ${m}: ${(performance.now()-c).toFixed(0)}ms`),n=await fe(e),s=e;try{s=ce.realpathSync(e)}catch{}let l=Xe(import.meta.url).resolve("@mdx-js/react"),a=g.resolve(A,"runtime","velu-ui"),E=ce.existsSync(a)?a:g.resolve(A,"..","velu-ui","src"),S=[{find:"@mdx-js/react",replacement:l},{find:/^velu-ui$/,replacement:g.join(E,"index.js")},{find:/^velu-ui\//,replacement:E+"/"}],C=Number(process.env.PORT)||5173,F=Ze(),_=Ye.createServer(F),f=await at({root:A,appType:"custom",logLevel:t?"info":"warn",plugins:[ie(e),rt({remarkPlugins:[ot,nt,st,I],rehypePlugins:[it],providerImportSource:"@mdx-js/react"}),tt(),et()],cacheDir:g.resolve(e,".velu","vite-cache"),optimizeDeps:{include:["react","react-dom","react-dom/client","react-router-dom","@mdx-js/react","lucide-react","prism-react-renderer","iso-639-1","github-slugger"],esbuildOptions:{loader:{".mdx":"jsx"}}},resolve:{alias:S,dedupe:["react","react-dom","@mdx-js/react"]},server:{middlewareMode:!0,fs:{allow:[lt(A),e,s]},hmr:{server:_}}});r("vite server created",o),F.use(f.middlewares),F.get(ue,async(m,c,h)=>{if(!n.favicon)return c.status(404).end();let u=g.resolve(e,n.favicon.replace(/^\//,""));c.sendFile(u,v=>{v&&c.status(404).end()})}),F.use("*",async(m,c,h)=>{let u=m.originalUrl,v=performance.now();try{let p=performance.now(),y=await le.readFile(de,"utf-8");y=await f.transformIndexHtml(u,y),r(`transformIndexHtml ${u}`,p);let b="/src/runtime/server-entry.jsx";p=performance.now();let{render:L}=await f.ssrLoadModule(b);r(`ssrLoadModule ${u} (1st req includes dep pre-bundle)`,p),p=performance.now();let d=await L(u);r(`render ${u}`,p),p=performance.now();let P=await pe(f,b);r(`collectSsrCss ${u}`,p);let O=P?`<style data-velu-ssr>${P}</style>`:"",ye=`<style data-velu-config>
|
|
9
|
+
${H(n)}
|
|
10
|
+
</style>`,we=ft.has(n.font.family)?"":dt(n.font.family),xe=n.favicon?`<link rel="icon" href="${ue}" />`:"",Se=[O,ye,we,xe].filter(Boolean).join(`
|
|
11
|
+
`),be=y.replace("<!--app-title-->",pt(n.name)).replace("<!--app-head-->",Se).replace("<!--app-html-->",d);c.status(200).set({"Content-Type":"text/html"}).end(be),r(`TOTAL ${u}`,v)}catch(p){f.ssrFixStacktrace(p),h(p)}}),Qe.watch(e,{ignoreInitial:!0,ignored:/(^|[\\/])(node_modules|\.git|\.velu)([\\/]|$)/,awaitWriteFinish:{stabilityThreshold:100,pollInterval:20}}).on("all",async(m,c)=>{console.log(`[velu-cli] content ${m}: ${g.relative(e,c)}`);let h=g.basename(c)==="velu.json",u=c.endsWith(".mdx"),v=h||u&&(m==="add"||m==="unlink");if(h&&(n=await fe(e)),v)f.moduleGraph.invalidateAll();else if(u){let p=c.split(g.sep).join("/"),y=f.moduleGraph.getModulesByFile(p);if(y)for(let b of y)f.moduleGraph.invalidateModule(b)}f.ws.send({type:"full-reload"})});async function M(m){let c=new Set,h=12,u=0,v=[],p=()=>u<h?(u+=1,Promise.resolve()):new Promise(d=>v.push(d)).then(()=>{u+=1}),y=()=>{u-=1,v.shift()?.()},b=d=>/[\\/]\.velu[\\/]vite-cache[\\/]|[\\/]deps[\\/]/.test(d)||/[\\/]node_modules[\\/]/.test(d)&&!/velu-ui/.test(d);async function L(d){if(!(!d||c.has(d)||b(d))){c.add(d);try{await p();try{await f.transformRequest(d,{ssr:!1})}finally{y()}let P=await f.moduleGraph.getModuleByUrl(d,!1);P?.importedModules?.size&&await Promise.all([...P.importedModules].map(O=>L(O.url)))}catch{}}}return await L(m),c.size}_.listen(C,async()=>{let m=performance.now(),c=0;try{let{render:h}=await f.ssrLoadModule("/src/runtime/server-entry.jsx");await M("/src/runtime/client-entry.jsx"),typeof f.waitForRequestsIdle=="function"&&await f.waitForRequestsIdle();let[u]=await Promise.all([M("/src/runtime/client-entry.jsx"),h("/"),f.transformIndexHtml("/",await le.readFile(de,"utf-8")),pe(f,"/src/runtime/server-entry.jsx")]);c=u}catch(h){t&&console.log("[velu-profile] warmup error:",h?.message)}r(`cold-start warm-up (${c} client modules)`,m),console.log(`[velu-cli] ready \u2192 http://localhost:${C}`)})}var ct,ut,ft,ue,pt,A,de,ge=w(()=>{q();W();ae();ct=g.dirname(Ke(import.meta.url)),ut=/\.(css|less|sass|scss|styl|stylus|pcss|postcss)(\?|$)/,ft=new Set(["Google Sans Flex","Google Sans Code","Outfit"]),ue="/@velu-favicon",pt=e=>String(e).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""");A=g.resolve(ct,".."),de=g.resolve(A,"src","template.html")});import he from"node:path";import x from"node:process";import{readFileSync as gt}from"node:fs";var[,,ve,U]=x.argv;function ht(){try{return JSON.parse(gt(new URL("../package.json",import.meta.url),"utf8")).version}catch{return"unknown"}}async function vt(){switch(ve){case"--version":case"-v":case"version":{console.log(ht());break}case"init":{U||(console.error("Usage: velu init <project-name>"),x.exit(1));let e=U,t=he.resolve(x.cwd(),e),{initProject:o}=await Promise.resolve().then(()=>(B(),G));await o(t,e);break}case"dev":{let e=he.resolve(x.cwd(),U??"."),{startDevServer:t}=await Promise.resolve().then(()=>(ge(),me));await t(e);break}default:console.log("Usage:"),console.log(" velu init <project-name> scaffold a new docs project"),console.log(" velu dev [dir] start the dev preview server"),x.exit(ve?1:0)}}vt().catch(e=>{console.error(x.env.VELU_DEBUG?e:`Error: ${e.message}`),x.exit(1)});
|
package/package.json
CHANGED
|
@@ -1,147 +1,147 @@
|
|
|
1
|
-
import React, { useState, useEffect } from 'react';
|
|
2
|
-
import { resolveLang } from './prism-loader.js';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Language → icon mapping.
|
|
6
|
-
*
|
|
7
|
-
* Brand icons (JS / Python / Ruby / etc.) come from
|
|
8
|
-
* @icons-pack/react-simple-icons. We load each one with an explicit
|
|
9
|
-
* dynamic `import()` (static specifier, so Vite code-splits one chunk per
|
|
10
|
-
* icon) — the browser then fetches ONLY the languages a page actually
|
|
11
|
-
* renders, never the full set and never the package's ~3000-icon barrel
|
|
12
|
-
* (importing that barrel makes Vite transform all 3000 modules on the
|
|
13
|
-
* first dev load, which dominated cold start).
|
|
14
|
-
*
|
|
15
|
-
* Because the import is dynamic, a brand icon isn't available during SSR;
|
|
16
|
-
* `BrandIcon` renders a sized placeholder until the module resolves on the
|
|
17
|
-
* client. The placeholder is identical on the server and the first client
|
|
18
|
-
* render, so hydration never mismatches. Langs without a brand icon fall
|
|
19
|
-
* back to a semantic lucide id (string) handled by `resolveIcon`.
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
|
-
// canonical lang → loader (() => import of that icon's module).
|
|
23
|
-
const BRAND_LOADERS = {
|
|
24
|
-
javascript: () => import('@icons-pack/react-simple-icons/icons/SiJavascript.mjs'),
|
|
25
|
-
typescript: () => import('@icons-pack/react-simple-icons/icons/SiTypescript.mjs'),
|
|
26
|
-
jsx: () => import('@icons-pack/react-simple-icons/icons/SiReact.mjs'),
|
|
27
|
-
tsx: () => import('@icons-pack/react-simple-icons/icons/SiReact.mjs'),
|
|
28
|
-
python: () => import('@icons-pack/react-simple-icons/icons/SiPython.mjs'),
|
|
29
|
-
ruby: () => import('@icons-pack/react-simple-icons/icons/SiRuby.mjs'),
|
|
30
|
-
go: () => import('@icons-pack/react-simple-icons/icons/SiGo.mjs'),
|
|
31
|
-
rust: () => import('@icons-pack/react-simple-icons/icons/SiRust.mjs'),
|
|
32
|
-
java: () => import('@icons-pack/react-simple-icons/icons/SiOpenjdk.mjs'),
|
|
33
|
-
csharp: () => import('@icons-pack/react-simple-icons/icons/SiSharp.mjs'),
|
|
34
|
-
c: () => import('@icons-pack/react-simple-icons/icons/SiC.mjs'),
|
|
35
|
-
cpp: () => import('@icons-pack/react-simple-icons/icons/SiCplusplus.mjs'),
|
|
36
|
-
php: () => import('@icons-pack/react-simple-icons/icons/SiPhp.mjs'),
|
|
37
|
-
swift: () => import('@icons-pack/react-simple-icons/icons/SiSwift.mjs'),
|
|
38
|
-
kotlin: () => import('@icons-pack/react-simple-icons/icons/SiKotlin.mjs'),
|
|
39
|
-
scala: () => import('@icons-pack/react-simple-icons/icons/SiScala.mjs'),
|
|
40
|
-
dart: () => import('@icons-pack/react-simple-icons/icons/SiDart.mjs'),
|
|
41
|
-
r: () => import('@icons-pack/react-simple-icons/icons/SiR.mjs'),
|
|
42
|
-
haskell: () => import('@icons-pack/react-simple-icons/icons/SiHaskell.mjs'),
|
|
43
|
-
elixir: () => import('@icons-pack/react-simple-icons/icons/SiElixir.mjs'),
|
|
44
|
-
erlang: () => import('@icons-pack/react-simple-icons/icons/SiErlang.mjs'),
|
|
45
|
-
lua: () => import('@icons-pack/react-simple-icons/icons/SiLua.mjs'),
|
|
46
|
-
perl: () => import('@icons-pack/react-simple-icons/icons/SiPerl.mjs'),
|
|
47
|
-
julia: () => import('@icons-pack/react-simple-icons/icons/SiJulia.mjs'),
|
|
48
|
-
ocaml: () => import('@icons-pack/react-simple-icons/icons/SiOcaml.mjs'),
|
|
49
|
-
fsharp: () => import('@icons-pack/react-simple-icons/icons/SiFsharp.mjs'),
|
|
50
|
-
nim: () => import('@icons-pack/react-simple-icons/icons/SiNim.mjs'),
|
|
51
|
-
zig: () => import('@icons-pack/react-simple-icons/icons/SiZig.mjs'),
|
|
52
|
-
clojure: () => import('@icons-pack/react-simple-icons/icons/SiClojure.mjs'),
|
|
53
|
-
coffeescript: () => import('@icons-pack/react-simple-icons/icons/SiCoffeescript.mjs'),
|
|
54
|
-
html: () => import('@icons-pack/react-simple-icons/icons/SiHtml5.mjs'),
|
|
55
|
-
css: () => import('@icons-pack/react-simple-icons/icons/SiCss.mjs'),
|
|
56
|
-
vue: () => import('@icons-pack/react-simple-icons/icons/SiVuedotjs.mjs'),
|
|
57
|
-
svelte: () => import('@icons-pack/react-simple-icons/icons/SiSvelte.mjs'),
|
|
58
|
-
solid: () => import('@icons-pack/react-simple-icons/icons/SiSolid.mjs'),
|
|
59
|
-
json: () => import('@icons-pack/react-simple-icons/icons/SiJson.mjs'),
|
|
60
|
-
yaml: () => import('@icons-pack/react-simple-icons/icons/SiYaml.mjs'),
|
|
61
|
-
toml: () => import('@icons-pack/react-simple-icons/icons/SiToml.mjs'),
|
|
62
|
-
graphql: () => import('@icons-pack/react-simple-icons/icons/SiGraphql.mjs'),
|
|
63
|
-
markdown: () => import('@icons-pack/react-simple-icons/icons/SiMarkdown.mjs'),
|
|
64
|
-
mdx: () => import('@icons-pack/react-simple-icons/icons/SiMarkdown.mjs'),
|
|
65
|
-
latex: () => import('@icons-pack/react-simple-icons/icons/SiLatex.mjs'),
|
|
66
|
-
asciidoc: () => import('@icons-pack/react-simple-icons/icons/SiAsciidoctor.mjs'),
|
|
67
|
-
bash: () => import('@icons-pack/react-simple-icons/icons/SiGnubash.mjs'),
|
|
68
|
-
shell: () => import('@icons-pack/react-simple-icons/icons/SiGnubash.mjs'),
|
|
69
|
-
sh: () => import('@icons-pack/react-simple-icons/icons/SiGnubash.mjs'),
|
|
70
|
-
fish: () => import('@icons-pack/react-simple-icons/icons/SiFishshell.mjs'),
|
|
71
|
-
nodejs: () => import('@icons-pack/react-simple-icons/icons/SiNodedotjs.mjs'),
|
|
72
|
-
mysql: () => import('@icons-pack/react-simple-icons/icons/SiMysql.mjs'),
|
|
73
|
-
postgresql: () => import('@icons-pack/react-simple-icons/icons/SiPostgresql.mjs'),
|
|
74
|
-
plsql: () => import('@icons-pack/react-simple-icons/icons/SiPostgresql.mjs'),
|
|
75
|
-
sqlite: () => import('@icons-pack/react-simple-icons/icons/SiSqlite.mjs'),
|
|
76
|
-
mongodb: () => import('@icons-pack/react-simple-icons/icons/SiMongodb.mjs'),
|
|
77
|
-
redis: () => import('@icons-pack/react-simple-icons/icons/SiRedis.mjs'),
|
|
78
|
-
docker: () => import('@icons-pack/react-simple-icons/icons/SiDocker.mjs'),
|
|
79
|
-
dockerfile: () => import('@icons-pack/react-simple-icons/icons/SiDocker.mjs'),
|
|
80
|
-
kubernetes: () => import('@icons-pack/react-simple-icons/icons/SiKubernetes.mjs'),
|
|
81
|
-
nginx: () => import('@icons-pack/react-simple-icons/icons/SiNginx.mjs'),
|
|
82
|
-
apacheconf: () => import('@icons-pack/react-simple-icons/icons/SiApache.mjs'),
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
// Generic lucide fallback for langs without a brand icon. Returns a
|
|
86
|
-
// lucide id string — `resolveIcon` turns it into the icon component.
|
|
87
|
-
const LUCIDE = {
|
|
88
|
-
sql: 'database',
|
|
89
|
-
xml: 'code-xml',
|
|
90
|
-
diff: 'git-compare-arrows',
|
|
91
|
-
ini: 'braces',
|
|
92
|
-
properties: 'braces',
|
|
93
|
-
powershell: 'terminal',
|
|
94
|
-
batch: 'terminal',
|
|
95
|
-
zsh: 'terminal',
|
|
96
|
-
text: 'file-code',
|
|
97
|
-
plaintext: 'file-code',
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
// Module-level cache so an icon that's been loaded once renders
|
|
101
|
-
// synchronously everywhere after (no repeat import, no flash).
|
|
102
|
-
const iconCache = new Map();
|
|
103
|
-
|
|
104
|
-
/**
|
|
105
|
-
* Renders a brand icon loaded lazily by `key`. SSR + the first client
|
|
106
|
-
* render emit a sized placeholder (identical → hydration-safe); after
|
|
107
|
-
* mount the icon's module is imported and swapped in.
|
|
108
|
-
*/
|
|
109
|
-
function BrandIcon({ iconKey, ...props }) {
|
|
110
|
-
const [Icon, setIcon] = useState(() => iconCache.get(iconKey) || null);
|
|
111
|
-
|
|
112
|
-
useEffect(() => {
|
|
113
|
-
if (iconCache.has(iconKey)) {
|
|
114
|
-
setIcon(() => iconCache.get(iconKey));
|
|
115
|
-
return;
|
|
116
|
-
}
|
|
117
|
-
const load = BRAND_LOADERS[iconKey];
|
|
118
|
-
if (!load) return;
|
|
119
|
-
let alive = true;
|
|
120
|
-
load().then((mod) => {
|
|
121
|
-
iconCache.set(iconKey, mod.default);
|
|
122
|
-
if (alive) setIcon(() => mod.default);
|
|
123
|
-
});
|
|
124
|
-
return () => {
|
|
125
|
-
alive = false;
|
|
126
|
-
};
|
|
127
|
-
}, [iconKey]);
|
|
128
|
-
|
|
129
|
-
if (!Icon) {
|
|
130
|
-
// Reserve the icon's box so swapping it in causes no layout shift.
|
|
131
|
-
return (
|
|
132
|
-
<span
|
|
133
|
-
aria-hidden="true"
|
|
134
|
-
style={{ display: 'inline-block', width: '1em', height: '1em' }}
|
|
135
|
-
/>
|
|
136
|
-
);
|
|
137
|
-
}
|
|
138
|
-
return <Icon {...props} />;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
export function iconForLang(lang) {
|
|
142
|
-
if (!lang) return 'file-code';
|
|
143
|
-
const id = resolveLang(lang) || lang;
|
|
144
|
-
const key = BRAND_LOADERS[id] ? id : BRAND_LOADERS[lang] ? lang : null;
|
|
145
|
-
if (key) return <BrandIcon iconKey={key} size="1em" />;
|
|
146
|
-
return LUCIDE[id] || LUCIDE[lang] || 'file-code';
|
|
147
|
-
}
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import { resolveLang } from './prism-loader.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Language → icon mapping.
|
|
6
|
+
*
|
|
7
|
+
* Brand icons (JS / Python / Ruby / etc.) come from
|
|
8
|
+
* @icons-pack/react-simple-icons. We load each one with an explicit
|
|
9
|
+
* dynamic `import()` (static specifier, so Vite code-splits one chunk per
|
|
10
|
+
* icon) — the browser then fetches ONLY the languages a page actually
|
|
11
|
+
* renders, never the full set and never the package's ~3000-icon barrel
|
|
12
|
+
* (importing that barrel makes Vite transform all 3000 modules on the
|
|
13
|
+
* first dev load, which dominated cold start).
|
|
14
|
+
*
|
|
15
|
+
* Because the import is dynamic, a brand icon isn't available during SSR;
|
|
16
|
+
* `BrandIcon` renders a sized placeholder until the module resolves on the
|
|
17
|
+
* client. The placeholder is identical on the server and the first client
|
|
18
|
+
* render, so hydration never mismatches. Langs without a brand icon fall
|
|
19
|
+
* back to a semantic lucide id (string) handled by `resolveIcon`.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
// canonical lang → loader (() => import of that icon's module).
|
|
23
|
+
const BRAND_LOADERS = {
|
|
24
|
+
javascript: () => import('@icons-pack/react-simple-icons/icons/SiJavascript.mjs'),
|
|
25
|
+
typescript: () => import('@icons-pack/react-simple-icons/icons/SiTypescript.mjs'),
|
|
26
|
+
jsx: () => import('@icons-pack/react-simple-icons/icons/SiReact.mjs'),
|
|
27
|
+
tsx: () => import('@icons-pack/react-simple-icons/icons/SiReact.mjs'),
|
|
28
|
+
python: () => import('@icons-pack/react-simple-icons/icons/SiPython.mjs'),
|
|
29
|
+
ruby: () => import('@icons-pack/react-simple-icons/icons/SiRuby.mjs'),
|
|
30
|
+
go: () => import('@icons-pack/react-simple-icons/icons/SiGo.mjs'),
|
|
31
|
+
rust: () => import('@icons-pack/react-simple-icons/icons/SiRust.mjs'),
|
|
32
|
+
java: () => import('@icons-pack/react-simple-icons/icons/SiOpenjdk.mjs'),
|
|
33
|
+
csharp: () => import('@icons-pack/react-simple-icons/icons/SiSharp.mjs'),
|
|
34
|
+
c: () => import('@icons-pack/react-simple-icons/icons/SiC.mjs'),
|
|
35
|
+
cpp: () => import('@icons-pack/react-simple-icons/icons/SiCplusplus.mjs'),
|
|
36
|
+
php: () => import('@icons-pack/react-simple-icons/icons/SiPhp.mjs'),
|
|
37
|
+
swift: () => import('@icons-pack/react-simple-icons/icons/SiSwift.mjs'),
|
|
38
|
+
kotlin: () => import('@icons-pack/react-simple-icons/icons/SiKotlin.mjs'),
|
|
39
|
+
scala: () => import('@icons-pack/react-simple-icons/icons/SiScala.mjs'),
|
|
40
|
+
dart: () => import('@icons-pack/react-simple-icons/icons/SiDart.mjs'),
|
|
41
|
+
r: () => import('@icons-pack/react-simple-icons/icons/SiR.mjs'),
|
|
42
|
+
haskell: () => import('@icons-pack/react-simple-icons/icons/SiHaskell.mjs'),
|
|
43
|
+
elixir: () => import('@icons-pack/react-simple-icons/icons/SiElixir.mjs'),
|
|
44
|
+
erlang: () => import('@icons-pack/react-simple-icons/icons/SiErlang.mjs'),
|
|
45
|
+
lua: () => import('@icons-pack/react-simple-icons/icons/SiLua.mjs'),
|
|
46
|
+
perl: () => import('@icons-pack/react-simple-icons/icons/SiPerl.mjs'),
|
|
47
|
+
julia: () => import('@icons-pack/react-simple-icons/icons/SiJulia.mjs'),
|
|
48
|
+
ocaml: () => import('@icons-pack/react-simple-icons/icons/SiOcaml.mjs'),
|
|
49
|
+
fsharp: () => import('@icons-pack/react-simple-icons/icons/SiFsharp.mjs'),
|
|
50
|
+
nim: () => import('@icons-pack/react-simple-icons/icons/SiNim.mjs'),
|
|
51
|
+
zig: () => import('@icons-pack/react-simple-icons/icons/SiZig.mjs'),
|
|
52
|
+
clojure: () => import('@icons-pack/react-simple-icons/icons/SiClojure.mjs'),
|
|
53
|
+
coffeescript: () => import('@icons-pack/react-simple-icons/icons/SiCoffeescript.mjs'),
|
|
54
|
+
html: () => import('@icons-pack/react-simple-icons/icons/SiHtml5.mjs'),
|
|
55
|
+
css: () => import('@icons-pack/react-simple-icons/icons/SiCss.mjs'),
|
|
56
|
+
vue: () => import('@icons-pack/react-simple-icons/icons/SiVuedotjs.mjs'),
|
|
57
|
+
svelte: () => import('@icons-pack/react-simple-icons/icons/SiSvelte.mjs'),
|
|
58
|
+
solid: () => import('@icons-pack/react-simple-icons/icons/SiSolid.mjs'),
|
|
59
|
+
json: () => import('@icons-pack/react-simple-icons/icons/SiJson.mjs'),
|
|
60
|
+
yaml: () => import('@icons-pack/react-simple-icons/icons/SiYaml.mjs'),
|
|
61
|
+
toml: () => import('@icons-pack/react-simple-icons/icons/SiToml.mjs'),
|
|
62
|
+
graphql: () => import('@icons-pack/react-simple-icons/icons/SiGraphql.mjs'),
|
|
63
|
+
markdown: () => import('@icons-pack/react-simple-icons/icons/SiMarkdown.mjs'),
|
|
64
|
+
mdx: () => import('@icons-pack/react-simple-icons/icons/SiMarkdown.mjs'),
|
|
65
|
+
latex: () => import('@icons-pack/react-simple-icons/icons/SiLatex.mjs'),
|
|
66
|
+
asciidoc: () => import('@icons-pack/react-simple-icons/icons/SiAsciidoctor.mjs'),
|
|
67
|
+
bash: () => import('@icons-pack/react-simple-icons/icons/SiGnubash.mjs'),
|
|
68
|
+
shell: () => import('@icons-pack/react-simple-icons/icons/SiGnubash.mjs'),
|
|
69
|
+
sh: () => import('@icons-pack/react-simple-icons/icons/SiGnubash.mjs'),
|
|
70
|
+
fish: () => import('@icons-pack/react-simple-icons/icons/SiFishshell.mjs'),
|
|
71
|
+
nodejs: () => import('@icons-pack/react-simple-icons/icons/SiNodedotjs.mjs'),
|
|
72
|
+
mysql: () => import('@icons-pack/react-simple-icons/icons/SiMysql.mjs'),
|
|
73
|
+
postgresql: () => import('@icons-pack/react-simple-icons/icons/SiPostgresql.mjs'),
|
|
74
|
+
plsql: () => import('@icons-pack/react-simple-icons/icons/SiPostgresql.mjs'),
|
|
75
|
+
sqlite: () => import('@icons-pack/react-simple-icons/icons/SiSqlite.mjs'),
|
|
76
|
+
mongodb: () => import('@icons-pack/react-simple-icons/icons/SiMongodb.mjs'),
|
|
77
|
+
redis: () => import('@icons-pack/react-simple-icons/icons/SiRedis.mjs'),
|
|
78
|
+
docker: () => import('@icons-pack/react-simple-icons/icons/SiDocker.mjs'),
|
|
79
|
+
dockerfile: () => import('@icons-pack/react-simple-icons/icons/SiDocker.mjs'),
|
|
80
|
+
kubernetes: () => import('@icons-pack/react-simple-icons/icons/SiKubernetes.mjs'),
|
|
81
|
+
nginx: () => import('@icons-pack/react-simple-icons/icons/SiNginx.mjs'),
|
|
82
|
+
apacheconf: () => import('@icons-pack/react-simple-icons/icons/SiApache.mjs'),
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
// Generic lucide fallback for langs without a brand icon. Returns a
|
|
86
|
+
// lucide id string — `resolveIcon` turns it into the icon component.
|
|
87
|
+
const LUCIDE = {
|
|
88
|
+
sql: 'database',
|
|
89
|
+
xml: 'code-xml',
|
|
90
|
+
diff: 'git-compare-arrows',
|
|
91
|
+
ini: 'braces',
|
|
92
|
+
properties: 'braces',
|
|
93
|
+
powershell: 'terminal',
|
|
94
|
+
batch: 'terminal',
|
|
95
|
+
zsh: 'terminal',
|
|
96
|
+
text: 'file-code',
|
|
97
|
+
plaintext: 'file-code',
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
// Module-level cache so an icon that's been loaded once renders
|
|
101
|
+
// synchronously everywhere after (no repeat import, no flash).
|
|
102
|
+
const iconCache = new Map();
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Renders a brand icon loaded lazily by `key`. SSR + the first client
|
|
106
|
+
* render emit a sized placeholder (identical → hydration-safe); after
|
|
107
|
+
* mount the icon's module is imported and swapped in.
|
|
108
|
+
*/
|
|
109
|
+
function BrandIcon({ iconKey, ...props }) {
|
|
110
|
+
const [Icon, setIcon] = useState(() => iconCache.get(iconKey) || null);
|
|
111
|
+
|
|
112
|
+
useEffect(() => {
|
|
113
|
+
if (iconCache.has(iconKey)) {
|
|
114
|
+
setIcon(() => iconCache.get(iconKey));
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
const load = BRAND_LOADERS[iconKey];
|
|
118
|
+
if (!load) return;
|
|
119
|
+
let alive = true;
|
|
120
|
+
load().then((mod) => {
|
|
121
|
+
iconCache.set(iconKey, mod.default);
|
|
122
|
+
if (alive) setIcon(() => mod.default);
|
|
123
|
+
});
|
|
124
|
+
return () => {
|
|
125
|
+
alive = false;
|
|
126
|
+
};
|
|
127
|
+
}, [iconKey]);
|
|
128
|
+
|
|
129
|
+
if (!Icon) {
|
|
130
|
+
// Reserve the icon's box so swapping it in causes no layout shift.
|
|
131
|
+
return (
|
|
132
|
+
<span
|
|
133
|
+
aria-hidden="true"
|
|
134
|
+
style={{ display: 'inline-block', width: '1em', height: '1em' }}
|
|
135
|
+
/>
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
return <Icon {...props} />;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
export function iconForLang(lang) {
|
|
142
|
+
if (!lang) return 'file-code';
|
|
143
|
+
const id = resolveLang(lang) || lang;
|
|
144
|
+
const key = BRAND_LOADERS[id] ? id : BRAND_LOADERS[lang] ? lang : null;
|
|
145
|
+
if (key) return <BrandIcon iconKey={key} size="1em" />;
|
|
146
|
+
return LUCIDE[id] || LUCIDE[lang] || 'file-code';
|
|
147
|
+
}
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Code blocks
|
|
3
|
-
description: Syntax-highlighted code and groups.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Fenced code blocks are upgraded to a rich code component with a copy
|
|
7
|
-
button and a language label.
|
|
8
|
-
|
|
9
|
-
```js
|
|
10
|
-
export function greet(name) {
|
|
11
|
-
return `Hello, ${name}!`;
|
|
12
|
-
}
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Code groups
|
|
16
|
-
|
|
17
|
-
Show the same example in several languages with a `CodeGroup`. Each
|
|
18
|
-
alternative is a `<CodeBlock>` with a `title` (the tab label) and a
|
|
19
|
-
`language` (drives syntax highlighting and the tab's language icon):
|
|
20
|
-
|
|
21
|
-
<CodeGroup>
|
|
22
|
-
<CodeBlock title="index.js" language="javascript">
|
|
23
|
-
{`fetch('/api/hello').then((r) => r.json());`}
|
|
24
|
-
</CodeBlock>
|
|
25
|
-
<CodeBlock title="main.py" language="python">
|
|
26
|
-
{`import requests
|
|
27
|
-
requests.get('/api/hello').json()`}
|
|
28
|
-
</CodeBlock>
|
|
29
|
-
</CodeGroup>
|
|
1
|
+
---
|
|
2
|
+
title: Code blocks
|
|
3
|
+
description: Syntax-highlighted code and groups.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Fenced code blocks are upgraded to a rich code component with a copy
|
|
7
|
+
button and a language label.
|
|
8
|
+
|
|
9
|
+
```js
|
|
10
|
+
export function greet(name) {
|
|
11
|
+
return `Hello, ${name}!`;
|
|
12
|
+
}
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Code groups
|
|
16
|
+
|
|
17
|
+
Show the same example in several languages with a `CodeGroup`. Each
|
|
18
|
+
alternative is a `<CodeBlock>` with a `title` (the tab label) and a
|
|
19
|
+
`language` (drives syntax highlighting and the tab's language icon):
|
|
20
|
+
|
|
21
|
+
<CodeGroup>
|
|
22
|
+
<CodeBlock title="index.js" language="javascript">
|
|
23
|
+
{`fetch('/api/hello').then((r) => r.json());`}
|
|
24
|
+
</CodeBlock>
|
|
25
|
+
<CodeBlock title="main.py" language="python">
|
|
26
|
+
{`import requests
|
|
27
|
+
requests.get('/api/hello').json()`}
|
|
28
|
+
</CodeBlock>
|
|
29
|
+
</CodeGroup>
|