@veluai/velu 0.1.3 → 0.1.5
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 +116 -125
- package/templates/starter/essentials/code.mdx +10 -9
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
|
|
4
|
-
`)}var
|
|
5
|
-
`),"","export const pages = {",
|
|
2
|
+
var ke=Object.defineProperty;var v=(e,t)=>()=>(e&&(t=e(e=0)),t);var C=(e,t)=>{for(var o in t)ke(e,o,{get:t[o],enumerable:!0})};var M={};C(M,{initProject:()=>Te});import S from"node:fs/promises";import b from"node:path";import{fileURLToPath as $e}from"node:url";async function Te(e,t){try{if((await S.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 S.mkdir(e,{recursive:!0}),await S.cp(Ae,e,{recursive:!0});let o=b.join(e,"velu.json"),r=JSON.parse(await S.readFile(o,"utf-8"));r.name=t,await S.writeFile(o,JSON.stringify(r,null,2)+`
|
|
3
|
+
`,"utf-8");let n=await _(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 _(e,t=e,o=[]){let r=await S.readdir(e,{withFileTypes:!0});for(let n of r){let s=b.join(e,n.name);n.isDirectory()?await _(s,t,o):o.push(b.relative(t,s).split(b.sep).join("/"))}return o.sort()}var Pe,Ae,z=v(()=>{Pe=b.dirname($e(import.meta.url)),Ae=b.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 F(){return e=>{let t=new Le,o=[];Ee(e,"heading",i=>{let c=Fe(i);o.push({depth:i.depth,id:t.slug(c),label:c})});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 c={id:i.id,label:i.label},a=n[n.length-1].node;a.children||(a.children=[]),a.children.push(c),n.push({node:c,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 G=v(()=>{});import Oe from"node:fs/promises";import V from"node:path";function L(e={},t){let o=e.colors?.primary??Ne;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??Re},navigation:e.navigation??null}}async function B(e){let t=V.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 L(r,V.basename(e))}function q(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 Ne,Re,J=v(()=>{Ne="#dc143c",Re="Google Sans Flex"});import Ue from"github-slugger";import Ie from"iso-639-1";function _e(e){let t=String(e).toLowerCase();return Ie.getNativeName(t)||e}function E(e){return new Ue().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 D(e){let t={kind:"root",children:k(e??{})};return Y(t.children),t}function k(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(Ge)];if(Array.isArray(e.languages))return[...t,...e.languages.map(Ve)];if(Array.isArray(e.tabs))return[...t,...e.tabs.map(Be)];let o=[...t];return Array.isArray(e.groups)&&o.push(...e.groups.map(H)),Array.isArray(e.pages)&&o.push(...e.pages.map(W)),o}function ze(e){return{kind:"product",label:e.name??e.product,slug:E(e.product),icon:e.icon,color:e.color,default:!!e.default,children:k(e)}}function Ge(e){return{kind:"version",label:e.version,slug:E(e.version),default:!!e.default,children:k(e)}}function Ve(e){let t=String(e.language);return{kind:"language",code:t,label:_e(t),slug:E(t),default:!!e.default,children:k(e)}}function Be(e){return{kind:"tab",label:e.tab,slug:E(e.tab),icon:e.icon,href:e.href,children:k(e)}}function qe(e){return{kind:"anchor",label:e.anchor,icon:e.icon,href:e.href,color:e.color}}function H(e){let t=(e.pages??[]).map(W);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 W(e){return typeof e=="string"?{kind:"page",pagePath:e}:H(e)}function Y(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&&Y(t.children)}function K(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 c=r.kind==="root"?s:[...s,r];for(let a of r.children??[])o(a,i,c)};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,j=v(()=>{Ce=["product","version","language"]});import De from"node:fs";import X from"node:path";function Q(e,t){let o=[],r=[],n=new Set;for(let s of K(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,""),c=X.join(t,...i.split("/"))+".mdx",a=De.existsSync(c);a||o.push(`page "${s.pagePath}" \u2192 ${X.relative(t,c)} not found`),r.push({pagePath:s.pagePath,url:s.url,fileAbsPath:c,exists:a})}return{pageEntries:r,warnings:o}}var Z=v(()=>{j()});import He from"node:fs";import ee from"node:path";function oe(e){return{name:"velu-site",resolveId(t){return t===re?te:null},load(t){return t!==te?null:We(e)}}}function We(e){let t={};try{t=JSON.parse(He.readFileSync(ee.join(e,"velu.json"),"utf-8"))}catch{}let o=D(t.navigation??{}),{pageEntries:r,warnings:n}=Q(o,e);for(let a of n)console.warn(`[velu] nav: ${a}`);let s=[],i=[],c=0;for(let a of r)if(a.exists){let P=JSON.stringify(a.fileAbsPath.split(ee.sep).join("/")),w=`__p${c++}`;s.push(`import * as ${w} from ${P};`),i.push(` ${JSON.stringify(a.url)}: { Component: ${w}.default, frontmatter: ${w}.frontmatter, toc: ${w}.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 re,te,ne=v(()=>{j();Z();re="virtual:velu-site",te="\0"+re});var fe={};C(fe,{startDevServer:()=>mt});import se from"node:fs/promises";import ie 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 le(e){try{return await B(e)}catch(t){return console.warn(`[velu] ${t.message} Using defaults.`),L({},g.basename(e))}}async function ce(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 c=i.url.includes("?")?"&":"?",a=await e.transformRequest(`${i.url}${c}direct`);a?.code&&r.set(i.url,a.code)}for(let c of i.importedModules)await s(c)}}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=(d,u)=>t&&console.log(`[velu-profile] ${d}: ${(performance.now()-u).toFixed(0)}ms`),n=await le(e),s=e;try{s=ie.realpathSync(e)}catch{}let c=Xe(import.meta.url).resolve("@mdx-js/react"),a=g.resolve($,"runtime","velu-ui"),P=ie.existsSync(a)?a:g.resolve($,"..","velu-ui","src"),w=[{find:"@mdx-js/react",replacement:c},{find:/^velu-ui$/,replacement:g.join(P,"index.js")},{find:/^velu-ui\//,replacement:P+"/"}],N=Number(process.env.PORT)||5173,A=Ze(),R=Ye.createServer(A),f=await at({root:$,appType:"custom",logLevel:t?"info":"warn",plugins:[oe(e),rt({remarkPlugins:[ot,nt,st,F],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:w,dedupe:["react","react-dom","@mdx-js/react"]},server:{middlewareMode:!0,fs:{allow:[lt($),e,s]},hmr:{server:R}}});r("vite server created",o),A.use(f.middlewares),A.get(ae,async(d,u,m)=>{if(!n.favicon)return u.status(404).end();let l=g.resolve(e,n.favicon.replace(/^\//,""));u.sendFile(l,h=>{h&&u.status(404).end()})}),A.use("*",async(d,u,m)=>{let l=d.originalUrl,h=performance.now();try{let p=performance.now(),x=await se.readFile(ue,"utf-8");x=await f.transformIndexHtml(l,x),r(`transformIndexHtml ${l}`,p);let T="/src/runtime/server-entry.jsx";p=performance.now();let{render:ge}=await f.ssrLoadModule(T);r(`ssrLoadModule ${l} (1st req includes dep pre-bundle)`,p),p=performance.now();let he=await ge(l);r(`render ${l}`,p),p=performance.now();let I=await ce(f,T);r(`collectSsrCss ${l}`,p);let ve=I?`<style data-velu-ssr>${I}</style>`:"",ye=`<style data-velu-config>
|
|
9
|
+
${q(n)}
|
|
10
|
+
</style>`,we=ft.has(n.font.family)?"":dt(n.font.family),xe=n.favicon?`<link rel="icon" href="${ae}" />`:"",Se=[ve,ye,we,xe].filter(Boolean).join(`
|
|
11
|
+
`),be=x.replace("<!--app-title-->",pt(n.name)).replace("<!--app-head-->",Se).replace("<!--app-html-->",he);u.status(200).set({"Content-Type":"text/html"}).end(be),r(`TOTAL ${l}`,h)}catch(p){f.ssrFixStacktrace(p),m(p)}}),Qe.watch(e,{ignoreInitial:!0,ignored:/(^|[\\/])(node_modules|\.git|\.velu)([\\/]|$)/,awaitWriteFinish:{stabilityThreshold:100,pollInterval:20}}).on("all",async(d,u)=>{console.log(`[velu-cli] content ${d}: ${g.relative(e,u)}`);let m=g.basename(u)==="velu.json",l=u.endsWith(".mdx"),h=m||l&&(d==="add"||d==="unlink");if(m&&(n=await le(e)),h)f.moduleGraph.invalidateAll();else if(l){let p=u.split(g.sep).join("/"),x=f.moduleGraph.getModulesByFile(p);if(x)for(let T of x)f.moduleGraph.invalidateModule(T)}f.ws.send({type:"full-reload"})});async function U(d){let u=new Set;async function m(l){if(!(!l||u.has(l))){u.add(l);try{await f.transformRequest(l,{ssr:!1});let h=await f.moduleGraph.getModuleByUrl(l,!1);h?.importedModules?.size&&await Promise.all([...h.importedModules].map(p=>m(p.url)))}catch{}}}return await m(d),u.size}R.listen(N,async()=>{let d=performance.now(),u=0;try{let{render:m}=await f.ssrLoadModule("/src/runtime/server-entry.jsx");await U("/src/runtime/client-entry.jsx"),typeof f.waitForRequestsIdle=="function"&&await f.waitForRequestsIdle();let[l]=await Promise.all([U("/src/runtime/client-entry.jsx"),m("/"),f.transformIndexHtml("/",await se.readFile(ue,"utf-8")),ce(f,"/src/runtime/server-entry.jsx")]);u=l}catch(m){t&&console.log("[velu-profile] warmup error:",m?.message)}r(`cold-start warm-up (${u} client modules)`,d),console.log(`[velu-cli] ready \u2192 http://localhost:${N}`)})}var ct,ut,ft,ae,pt,$,ue,pe=v(()=>{G();J();ne();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"]),ae="/@velu-favicon",pt=e=>String(e).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""");$=g.resolve(ct,".."),ue=g.resolve($,"src","template.html")});import de from"node:path";import y from"node:process";var[,,me,O]=y.argv;async function gt(){switch(me){case"init":{O||(console.error("Usage: velu init <project-name>"),y.exit(1));let e=O,t=de.resolve(y.cwd(),e),{initProject:o}=await Promise.resolve().then(()=>(z(),M));await o(t,e);break}case"dev":{let e=de.resolve(y.cwd(),O??"."),{startDevServer:t}=await Promise.resolve().then(()=>(pe(),fe));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"),y.exit(me?1:0)}}gt().catch(e=>{console.error(y.env.VELU_DEBUG?e:`Error: ${e.message}`),y.exit(1)});
|
package/package.json
CHANGED
|
@@ -1,135 +1,85 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
SiJavascript,
|
|
4
|
-
SiTypescript,
|
|
5
|
-
SiReact,
|
|
6
|
-
SiPython,
|
|
7
|
-
SiRuby,
|
|
8
|
-
SiGo,
|
|
9
|
-
SiRust,
|
|
10
|
-
SiOpenjdk,
|
|
11
|
-
SiSharp,
|
|
12
|
-
SiC,
|
|
13
|
-
SiCplusplus,
|
|
14
|
-
SiPhp,
|
|
15
|
-
SiSwift,
|
|
16
|
-
SiKotlin,
|
|
17
|
-
SiScala,
|
|
18
|
-
SiDart,
|
|
19
|
-
SiR,
|
|
20
|
-
SiHaskell,
|
|
21
|
-
SiElixir,
|
|
22
|
-
SiErlang,
|
|
23
|
-
SiLua,
|
|
24
|
-
SiPerl,
|
|
25
|
-
SiJulia,
|
|
26
|
-
SiOcaml,
|
|
27
|
-
SiFsharp,
|
|
28
|
-
SiNim,
|
|
29
|
-
SiZig,
|
|
30
|
-
SiClojure,
|
|
31
|
-
SiCoffeescript,
|
|
32
|
-
SiHtml5,
|
|
33
|
-
SiCss,
|
|
34
|
-
SiVuedotjs,
|
|
35
|
-
SiSvelte,
|
|
36
|
-
SiSolid,
|
|
37
|
-
SiJson,
|
|
38
|
-
SiYaml,
|
|
39
|
-
SiToml,
|
|
40
|
-
SiGraphql,
|
|
41
|
-
SiMarkdown,
|
|
42
|
-
SiLatex,
|
|
43
|
-
SiAsciidoctor,
|
|
44
|
-
SiGnubash,
|
|
45
|
-
SiFishshell,
|
|
46
|
-
SiNodedotjs,
|
|
47
|
-
SiMysql,
|
|
48
|
-
SiPostgresql,
|
|
49
|
-
SiSqlite,
|
|
50
|
-
SiMongodb,
|
|
51
|
-
SiRedis,
|
|
52
|
-
SiDocker,
|
|
53
|
-
SiKubernetes,
|
|
54
|
-
SiNginx,
|
|
55
|
-
SiApache,
|
|
56
|
-
} from '@icons-pack/react-simple-icons';
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
57
2
|
import { resolveLang } from './prism-loader.js';
|
|
58
3
|
|
|
59
4
|
/**
|
|
60
5
|
* Language → icon mapping.
|
|
61
6
|
*
|
|
62
7
|
* Brand icons (JS / Python / Ruby / etc.) come from
|
|
63
|
-
* @icons-pack/react-simple-icons
|
|
64
|
-
*
|
|
65
|
-
* icon
|
|
66
|
-
*
|
|
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).
|
|
67
14
|
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
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`.
|
|
70
20
|
*/
|
|
71
21
|
|
|
72
|
-
//
|
|
73
|
-
const
|
|
74
|
-
javascript: SiJavascript,
|
|
75
|
-
typescript: SiTypescript,
|
|
76
|
-
jsx: SiReact,
|
|
77
|
-
tsx: SiReact,
|
|
78
|
-
python: SiPython,
|
|
79
|
-
ruby: SiRuby,
|
|
80
|
-
go: SiGo,
|
|
81
|
-
rust: SiRust,
|
|
82
|
-
java: SiOpenjdk,
|
|
83
|
-
csharp: SiSharp,
|
|
84
|
-
c: SiC,
|
|
85
|
-
cpp: SiCplusplus,
|
|
86
|
-
php: SiPhp,
|
|
87
|
-
swift: SiSwift,
|
|
88
|
-
kotlin: SiKotlin,
|
|
89
|
-
scala: SiScala,
|
|
90
|
-
dart: SiDart,
|
|
91
|
-
r: SiR,
|
|
92
|
-
haskell: SiHaskell,
|
|
93
|
-
elixir: SiElixir,
|
|
94
|
-
erlang: SiErlang,
|
|
95
|
-
lua: SiLua,
|
|
96
|
-
perl: SiPerl,
|
|
97
|
-
julia: SiJulia,
|
|
98
|
-
ocaml: SiOcaml,
|
|
99
|
-
fsharp: SiFsharp,
|
|
100
|
-
nim: SiNim,
|
|
101
|
-
zig: SiZig,
|
|
102
|
-
clojure: SiClojure,
|
|
103
|
-
coffeescript: SiCoffeescript,
|
|
104
|
-
html: SiHtml5,
|
|
105
|
-
css: SiCss,
|
|
106
|
-
vue: SiVuedotjs,
|
|
107
|
-
svelte: SiSvelte,
|
|
108
|
-
solid: SiSolid,
|
|
109
|
-
json: SiJson,
|
|
110
|
-
yaml: SiYaml,
|
|
111
|
-
toml: SiToml,
|
|
112
|
-
graphql: SiGraphql,
|
|
113
|
-
markdown: SiMarkdown,
|
|
114
|
-
mdx: SiMarkdown,
|
|
115
|
-
latex: SiLatex,
|
|
116
|
-
asciidoc: SiAsciidoctor,
|
|
117
|
-
bash: SiGnubash,
|
|
118
|
-
shell: SiGnubash,
|
|
119
|
-
sh: SiGnubash,
|
|
120
|
-
fish: SiFishshell,
|
|
121
|
-
nodejs: SiNodedotjs,
|
|
122
|
-
mysql: SiMysql,
|
|
123
|
-
postgresql: SiPostgresql,
|
|
124
|
-
plsql: SiPostgresql,
|
|
125
|
-
sqlite: SiSqlite,
|
|
126
|
-
mongodb: SiMongodb,
|
|
127
|
-
redis: SiRedis,
|
|
128
|
-
docker: SiDocker,
|
|
129
|
-
dockerfile: SiDocker,
|
|
130
|
-
kubernetes: SiKubernetes,
|
|
131
|
-
nginx: SiNginx,
|
|
132
|
-
apacheconf: SiApache,
|
|
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'),
|
|
133
83
|
};
|
|
134
84
|
|
|
135
85
|
// Generic lucide fallback for langs without a brand icon. Returns a
|
|
@@ -147,10 +97,51 @@ const LUCIDE = {
|
|
|
147
97
|
plaintext: 'file-code',
|
|
148
98
|
};
|
|
149
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
|
+
|
|
150
141
|
export function iconForLang(lang) {
|
|
151
142
|
if (!lang) return 'file-code';
|
|
152
143
|
const id = resolveLang(lang) || lang;
|
|
153
|
-
const
|
|
154
|
-
if (
|
|
144
|
+
const key = BRAND_LOADERS[id] ? id : BRAND_LOADERS[lang] ? lang : null;
|
|
145
|
+
if (key) return <BrandIcon iconKey={key} size="1em" />;
|
|
155
146
|
return LUCIDE[id] || LUCIDE[lang] || 'file-code';
|
|
156
147
|
}
|
|
@@ -14,15 +14,16 @@ export function greet(name) {
|
|
|
14
14
|
|
|
15
15
|
## Code groups
|
|
16
16
|
|
|
17
|
-
Show the same example in several languages with a `CodeGroup
|
|
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):
|
|
18
20
|
|
|
19
21
|
<CodeGroup>
|
|
20
|
-
|
|
21
|
-
fetch('/api/hello').then((r) => r.json())
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```
|
|
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>
|
|
28
29
|
</CodeGroup>
|