@veluai/velu 0.1.2 → 0.1.4
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/dist/cli.js +8 -8
- package/package.json +2 -2
- package/runtime/velu-ui/lib/lang-icons.jsx +147 -156
- package/templates/starter/essentials/code.mdx +29 -28
package/dist/cli.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
var
|
|
3
|
-
`,"utf-8");let
|
|
4
|
-
`)}var
|
|
2
|
+
var we=Object.defineProperty;var g=(e,t)=>()=>(e&&(t=e(e=0)),t);var R=(e,t)=>{for(var o in t)we(e,o,{get:t[o],enumerable:!0})};var _={};R(_,{initProject:()=>ke});import w from"node:fs/promises";import x from"node:path";import{fileURLToPath as xe}from"node:url";async function ke(e,t){try{if((await w.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(i){if(i.code!=="ENOENT")throw i}await w.mkdir(e,{recursive:!0}),await w.cp(Se,e,{recursive:!0});let o=x.join(e,"velu.json"),r=JSON.parse(await w.readFile(o,"utf-8"));r.name=t,await w.writeFile(o,JSON.stringify(r,null,2)+`
|
|
3
|
+
`,"utf-8");let n=await I(e);console.log(`[velu] created ${t}/`);for(let i of n)console.log(` ${i}`);console.log(""),console.log("Next steps:"),console.log(` cd ${t}`),console.log(" velu dev")}async function I(e,t=e,o=[]){let r=await w.readdir(e,{withFileTypes:!0});for(let n of r){let i=x.join(e,n.name);n.isDirectory()?await I(i,t,o):o.push(x.relative(t,i).split(x.sep).join("/"))}return o.sort()}var be,Se,C=g(()=>{be=x.dirname(xe(import.meta.url)),Se=x.resolve(be,"..","templates","starter")});import{visit as $e}from"unist-util-visit";import{toString as Pe}from"mdast-util-to-string";import Ae from"github-slugger";import{valueToEstree as Te}from"estree-util-value-to-estree";function L(){return e=>{let t=new Ae,o=[];$e(e,"heading",s=>{let l=Pe(s);o.push({depth:s.depth,id:t.slug(l),label:l})});let r={children:[]},n=[{node:r,depth:0}];for(let s of o){for(;n.length>1&&n[n.length-1].depth>=s.depth;)n.pop();let l={id:s.id,label:s.label},a=n[n.length-1].node;a.children||(a.children=[]),a.children.push(l),n.push({node:l,depth:s.depth})}let i=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:Te(i)}]}}]}}})}}var V=g(()=>{});import Ee from"node:fs/promises";import z from"node:path";function O(e={},t){let o=e.colors?.primary??Fe;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??Le},navigation:e.navigation??null}}async function B(e){let t=z.join(e,"velu.json"),o;try{o=await Ee.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 O(r,z.basename(e))}function G(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 Fe,Le,M=g(()=>{Fe="#dc143c",Le="Google Sans Flex"});import Oe from"github-slugger";import Ne from"iso-639-1";function je(e){let t=String(e).toLowerCase();return Ne.getNativeName(t)||e}function E(e){return new Oe().slug(String(e??""))}function Re(e){let t=String(e).replace(/^\/+|\/+$/g,"").split("/").filter(Boolean);return t[t.length-1]==="index"&&t.pop(),"/"+t.join("/")}function J(e){let t={kind:"root",children:k(e??{})};return H(t.children),t}function k(e){let t=Array.isArray(e.anchors)?e.anchors.map(ze):[];if(Array.isArray(e.products))return[...t,...e.products.map(Ie)];if(Array.isArray(e.versions))return[...t,...e.versions.map(_e)];if(Array.isArray(e.languages))return[...t,...e.languages.map(Ce)];if(Array.isArray(e.tabs))return[...t,...e.tabs.map(Ve)];let o=[...t];return Array.isArray(e.groups)&&o.push(...e.groups.map(q)),Array.isArray(e.pages)&&o.push(...e.pages.map(D)),o}function Ie(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 _e(e){return{kind:"version",label:e.version,slug:E(e.version),default:!!e.default,children:k(e)}}function Ce(e){let t=String(e.language);return{kind:"language",code:t,label:je(t),slug:E(t),default:!!e.default,children:k(e)}}function Ve(e){return{kind:"tab",label:e.tab,slug:E(e.tab),icon:e.icon,href:e.href,children:k(e)}}function ze(e){return{kind:"anchor",label:e.anchor,icon:e.icon,href:e.href,color:e.color}}function q(e){let t=(e.pages??[]).map(D);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 D(e){return typeof e=="string"?{kind:"page",pagePath:e}:q(e)}function H(e){for(let t of Ue){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&&H(t.children)}function W(e){let t=[],o=(r,n,i)=>{if(r.kind==="page"){t.push({pagePath:r.pagePath,url:Be(r.pagePath,n),ctx:{...n},ancestors:i,node:r});return}let s=n;r.kind==="product"?s={...n,product:r.default?null:r.slug}:r.kind==="version"?s={...n,version:r.default?null:r.slug}:r.kind==="language"&&(s={...n,language:r.default?null:r.slug});let l=r.kind==="root"?i:[...i,r];for(let a of r.children??[])o(a,s,l)};return o(e,{product:null,version:null,language:null},[]),t}function Be(e,t){let o=[t.product,t.version,t.language].filter(Boolean),r=Re(e).split("/").filter(Boolean);return"/"+[...o,...r].join("/")}var Ue,N=g(()=>{Ue=["product","version","language"]});import Ge from"node:fs";import Y from"node:path";function K(e,t){let o=[],r=[],n=new Set;for(let i of W(e)){if(n.has(i.url)){o.push(`duplicate URL "${i.url}" (page "${i.pagePath}") \u2014 keeping the first occurrence`);continue}n.add(i.url);let s=i.pagePath.replace(/^\/+|\/+$/g,""),l=Y.join(t,...s.split("/"))+".mdx",a=Ge.existsSync(l);a||o.push(`page "${i.pagePath}" \u2192 ${Y.relative(t,l)} not found`),r.push({pagePath:i.pagePath,url:i.url,fileAbsPath:l,exists:a})}return{pageEntries:r,warnings:o}}var X=g(()=>{N()});import Me from"node:fs";import Q from"node:path";function te(e){return{name:"velu-site",resolveId(t){return t===ee?Z:null},load(t){return t!==Z?null:Je(e)}}}function Je(e){let t={};try{t=JSON.parse(Me.readFileSync(Q.join(e,"velu.json"),"utf-8"))}catch{}let o=J(t.navigation??{}),{pageEntries:r,warnings:n}=K(o,e);for(let a of n)console.warn(`[velu] nav: ${a}`);let i=[],s=[],l=0;for(let a of r)if(a.exists){let P=JSON.stringify(a.fileAbsPath.split(Q.sep).join("/")),v=`__p${l++}`;i.push(`import * as ${v} from ${P};`),s.push(` ${JSON.stringify(a.url)}: { Component: ${v}.default, frontmatter: ${v}.frontmatter, toc: ${v}.toc },`)}else s.push(` ${JSON.stringify(a.url)}: { missing: true },`);return["// AUTO-GENERATED by vite-plugin-velu-site. Do not edit.",i.join(`
|
|
5
5
|
`),"","export const pages = {",s.join(`
|
|
6
6
|
`),"};",`export const navigation = ${JSON.stringify(o)};`,""].join(`
|
|
7
|
-
`)}var
|
|
8
|
-
`)}async function
|
|
9
|
-
${
|
|
10
|
-
</style>`,
|
|
11
|
-
`),
|
|
7
|
+
`)}var ee,Z,oe=g(()=>{N();X();ee="virtual:velu-site",Z="\0"+ee});var se={};R(se,{startDevServer:()=>pt});import qe from"node:fs/promises";import re from"node:fs";import p from"node:path";import{fileURLToPath as De}from"node:url";import{createRequire as He}from"node:module";import We from"chokidar";import Ye from"express";import Ke from"@tailwindcss/vite";import Xe from"@vitejs/plugin-react";import Qe from"@mdx-js/rollup";import Ze from"remark-frontmatter";import et from"remark-mdx-frontmatter";import tt from"remark-gfm";import ot from"rehype-slug";import{createServer as rt,searchForWorkspaceRoot as nt}from"vite";function ct(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 ie(e){try{return await B(e)}catch(t){return console.warn(`[velu] ${t.message} Using defaults.`),O({},p.basename(e))}}async function ut(e,t){let o=await e.moduleGraph.getModuleByUrl(t,!0),r=new Map,n=new Set;async function i(s){if(!(!s||n.has(s.url))){if(n.add(s.url),s.id&&st.test(s.id)){let l=s.url.includes("?")?"&":"?",a=await e.transformRequest(`${s.url}${l}direct`);a?.code&&r.set(s.url,a.code)}for(let l of s.importedModules)await i(l)}}return await i(o),[...r.values()].join(`
|
|
8
|
+
`)}async function pt(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 ie(e),i=e;try{i=re.realpathSync(e)}catch{}let l=He(import.meta.url).resolve("@mdx-js/react"),a=p.resolve($,"runtime","velu-ui"),P=re.existsSync(a)?a:p.resolve($,"..","velu-ui","src"),v=[{find:"@mdx-js/react",replacement:l},{find:/^velu-ui$/,replacement:p.join(P,"index.js")},{find:/^velu-ui\//,replacement:P+"/"}],F=Number(process.env.PORT)||5173,ue=F+1,A=Ye(),d=await rt({root:$,appType:"custom",logLevel:t?"info":"warn",plugins:[te(e),Qe({remarkPlugins:[Ze,et,tt,L],rehypePlugins:[ot],providerImportSource:"@mdx-js/react"}),Xe(),Ke()],cacheDir:p.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:v,dedupe:["react","react-dom","@mdx-js/react"]},server:{middlewareMode:!0,fs:{allow:[nt($),e,i]},hmr:{port:ue}}});r("vite server created",o),A.use(d.middlewares),A.get(ne,async(m,c,b)=>{if(!n.favicon)return c.status(404).end();let u=p.resolve(e,n.favicon.replace(/^\//,""));c.sendFile(u,S=>{S&&c.status(404).end()})}),A.use("*",async(m,c,b)=>{let u=m.originalUrl,S=performance.now();try{let f=performance.now(),y=await qe.readFile(ft,"utf-8");y=await d.transformIndexHtml(u,y),r(`transformIndexHtml ${u}`,f);let T="/src/runtime/server-entry.jsx";f=performance.now();let{render:fe}=await d.ssrLoadModule(T);r(`ssrLoadModule ${u} (1st req includes dep pre-bundle)`,f),f=performance.now();let pe=await fe(u);r(`render ${u}`,f),f=performance.now();let j=await ut(d,T);r(`collectSsrCss ${u}`,f);let de=j?`<style data-velu-ssr>${j}</style>`:"",me=`<style data-velu-config>
|
|
9
|
+
${G(n)}
|
|
10
|
+
</style>`,ge=at.has(n.font.family)?"":ct(n.font.family),he=n.favicon?`<link rel="icon" href="${ne}" />`:"",ve=[de,me,ge,he].filter(Boolean).join(`
|
|
11
|
+
`),ye=y.replace("<!--app-title-->",lt(n.name)).replace("<!--app-head-->",ve).replace("<!--app-html-->",pe);c.status(200).set({"Content-Type":"text/html"}).end(ye),r(`TOTAL ${u}`,S)}catch(f){d.ssrFixStacktrace(f),b(f)}}),We.watch(e,{ignoreInitial:!0,ignored:/(^|[\\/])(node_modules|\.git)([\\/]|$)/,awaitWriteFinish:{stabilityThreshold:100,pollInterval:20}}).on("all",async(m,c)=>{console.log(`[velu-cli] content ${m}: ${p.relative(e,c)}`);let b=p.basename(c)==="velu.json",u=c.endsWith(".mdx"),S=b||u&&(m==="add"||m==="unlink");if(b&&(n=await ie(e)),S)d.moduleGraph.invalidateAll();else if(u){let f=c.split(p.sep).join("/"),y=d.moduleGraph.getModulesByFile(f);if(y)for(let T of y)d.moduleGraph.invalidateModule(T)}d.ws.send({type:"full-reload"})}),A.listen(F,()=>{console.log(`[velu-cli] listening on http://localhost:${F}`)})}var it,st,at,ne,lt,$,ft,ae=g(()=>{V();M();oe();it=p.dirname(De(import.meta.url)),st=/\.(css|less|sass|scss|styl|stylus|pcss|postcss)(\?|$)/,at=new Set(["Google Sans Flex","Google Sans Code","Outfit"]),ne="/@velu-favicon",lt=e=>String(e).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""");$=p.resolve(it,".."),ft=p.resolve($,"src","template.html")});import le from"node:path";import h from"node:process";var[,,ce,U]=h.argv;async function dt(){switch(ce){case"init":{U||(console.error("Usage: velu init <project-name>"),h.exit(1));let e=U,t=le.resolve(h.cwd(),e),{initProject:o}=await Promise.resolve().then(()=>(C(),_));await o(t,e);break}case"dev":{let e=le.resolve(h.cwd(),U??"."),{startDevServer:t}=await Promise.resolve().then(()=>(ae(),se));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"),h.exit(ce?1:0)}}dt().catch(e=>{console.error(h.env.VELU_DEBUG?e:`Error: ${e.message}`),h.exit(1)});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veluai/velu",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"bin": "./dist/cli.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"prepack": "node scripts/build.mjs"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@icons-pack/react-simple-icons": "
|
|
23
|
+
"@icons-pack/react-simple-icons": ">=13.0.0 <13.13.0",
|
|
24
24
|
"@mdx-js/react": "^3.1.1",
|
|
25
25
|
"@mdx-js/rollup": "^3.1.1",
|
|
26
26
|
"@tailwindcss/vite": "^4.1.0",
|
|
@@ -1,156 +1,147 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
};
|
|
149
|
-
|
|
150
|
-
export function iconForLang(lang) {
|
|
151
|
-
if (!lang) return 'file-code';
|
|
152
|
-
const id = resolveLang(lang) || lang;
|
|
153
|
-
const Cmp = BRAND[id] || BRAND[lang];
|
|
154
|
-
if (Cmp) return <Cmp size="1em" />;
|
|
155
|
-
return LUCIDE[id] || LUCIDE[lang] || 'file-code';
|
|
156
|
-
}
|
|
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,28 +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
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
requests
|
|
27
|
-
|
|
28
|
-
</
|
|
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>
|