create-lupine 1.0.15 → 1.0.16

package/index.js

@@ -54,12 +54,14 @@ const cwd = process.cwd();
 const TEMPLATES = [
   {
     name: 'hello-world',
+    dir: 'lupine-template-hello-world',
     display: 'Hello World',
     itemType: 'frontend',
     color: green,
   },
   {
     name: 'doc-starter',
+    dir: 'lupine-template-doc-starter',
     display: 'Documentation Starter',
     itemType: 'frontend',
     color: green,
@@ -67,6 +69,7 @@ const TEMPLATES = [
   },
   {
     name: 'cv-starter',
+    dir: 'lupine-template-cv-starter',
     display: 'CV Starter',
     itemType: 'frontend',
     color: green,
@@ -74,7 +77,7 @@ const TEMPLATES = [
   },
   {
     name: 'responsive-starter-tabs',
-    dir: 'responsive-starter',
+    dir: 'lupine-template-responsive-starter',
     layout: 'tabs',
     display: 'Responsive Starter (tabs)',
     itemType: 'frontend',
@@ -82,7 +85,7 @@ const TEMPLATES = [
   },
   {
     name: 'responsive-starter-sidemenu',
-    dir: 'responsive-starter',
+    dir: 'lupine-template-responsive-starter',
     layout: 'sidemenu',
     display: 'Responsive Starter (sidemenu)',
     itemType: 'frontend',
@@ -174,16 +177,42 @@ async function init() {
   const appName = path.basename(root);
   const targetAppDir = path.join(appsDir, appName);
 
+  function replaceStr(filepath, fromToArr) {
+    let content = fs.readFileSync(filepath, 'utf-8');
+    for (const { from, to } of fromToArr) {
+      content = content.replace(new RegExp(from, 'g'), to);
+    }
+    fs.writeFileSync(filepath, content);
+  }
+
   copyDir(templateDir, targetAppDir);
+  // if templateDir\web\src\appName exists, rename it to github-pj-name
+  const githubName = path.join(targetAppDir, `web/src/${templateObj?.dir}`);
+  if (templateObj?.dir && fs.existsSync(githubName)) {
+    fs.renameSync(githubName, path.join(targetAppDir, 'web/src/github-pj-name'));
+    replaceStr(path.join(targetAppDir, 'web/src/github-pj-name/index.tsx'), [
+      { from: `/${templateObj?.dir}`, to: '/github-pj-name' },
+      { from: `${templateObj?.dir}/`, to: 'github-pj-name/' },
+    ]);
+    replaceStr(path.join(targetAppDir, 'web/src/github-pj-name/index.html'), [
+      { from: `/${templateObj?.dir}`, to: '/github-pj-name' },
+      { from: `${templateObj?.dir}/`, to: 'github-pj-name/' },
+    ]);
+    replaceStr(path.join(targetAppDir, 'web/src/github-pj-name/404.html'), [
+      { from: `/${templateObj?.dir}`, to: '/github-pj-name' },
+      { from: `${templateObj?.dir}/`, to: 'github-pj-name/' },
+    ]);
+    replaceStr(path.join(targetAppDir, 'lupine.json'), [
+      { from: `/${templateObj?.dir}`, to: '/github-pj-name' },
+      { from: `${templateObj?.dir}/`, to: 'github-pj-name/' },
+    ]);
+  }
 
   if (templateObj?.layout) {
     const frameFile = path.join(targetAppDir, 'web/src/frames/app-responsive-frame.tsx');
     if (fs.existsSync(frameFile)) {
       let content = fs.readFileSync(frameFile, 'utf-8');
-      content = content.replace(
-        /const DEFAULT_LAYOUT = '.*';/,
-        `const DEFAULT_LAYOUT = '${templateObj.layout}';`
-      );
+      content = content.replace(/const DEFAULT_LAYOUT = '.*';/, `const DEFAULT_LAYOUT = '${templateObj.layout}';`);
       fs.writeFileSync(frameFile, content);
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lupine",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "Scaffolding tool for Lupine.js projects",
   "bin": {
     "create-lupine": "index.js"

package/templates/common/AI_CONTEXT.md

@@ -13,6 +13,7 @@
 ## 1. Core Philosophy & Reactivity
 
 - **`useState` — React-style local state (small/simple components)**:
+
   - Import: `import { useState } from 'lupine.components';`
   - Syntax: `const [value, setValue] = useState(initial);` — calling `setValue(...)` rerenders the **entire** component.
   - ✅ **Use when**: The component is small, state drives most of the UI, and the React-style patterns feel natural.
@@ -20,6 +21,7 @@
   - **`ref.onLoad` + useState**: `onLoad` is called **only on initial mount** (not on rerenders). It's the right place for async data fetch that populates state.
 
 - **`HtmlVar` — Surgical partial updates (large/complex components)**:
+
   - Use `HtmlVar` to wrap dynamic sections (lists, conditional renderings, async content).
   - **Pattern**: `const dom = new HtmlVar(initialContent);` → JSX `{dom.node}` → `dom.value = updatedContent`.
   - ✅ **Use when**: Only a small part of a large component changes (e.g. list inside a page, progress text), or state is updated by external hooks (`props.hook.onProgress`), or high-frequency updates (file upload progress).
@@ -426,12 +428,13 @@ export const DemoIcons = {
 ```
 
 **2. Override the specific `.ifc-icon` via CSS Masking:**
-Use the `maskImage` property wrapped in `url()` to apply the SVG data to the icon class. This ensures it inherits colors (`currentColor`) properly.
+Use the `-webkit-mask-image` and `maskImage` property wrapped in `url()` to apply the SVG data to the icon class. This ensures it inherits colors (`currentColor`) properly.
 
 ```typescript
 const css: CssProps = {
   // Target the specific system icon class you wish to override
   '.ifc-icon.ma-close': {
+    '-webkit-mask-image': `url("${DemoIcons['ma-close']}")`,
     maskImage: `url("${DemoIcons['ma-close']}")`,
     // If needed, specify mask sizing properties:
     // maskRepeat: 'no-repeat',
@@ -446,7 +449,7 @@ const css: CssProps = {
 When creating a new Cross-Platform App using `lupine.js`, follow this standard procedure for scaffolding the entry point, navigation, and icons:
 
 1. **Custom Navigation Icons (`app-icons.ts`)**:
-   Instead of using the default icon font, you should export SVG Data URIs for your app's specific icons from `app-icons.ts`. Use a `reduce` function to generate the appropriate `CssProps` with `maskImage: 'url("' + svg + '")'` to override the `.ifc-icon.[icon-name]` classes. Avoid using backticks (\"\`\") when injecting SVG variables inside the maskImage URL to prevent escaping issues.
+   Instead of using the default icon font, you should export SVG Data URIs for your app's specific icons from `app-icons.ts`. Use a `reduce` function to generate the appropriate `CssProps` with `-webkit-mask-image: url("' + svg + '")'` and `maskImage: 'url("' + svg + '")'` to override the `.ifc-icon.[icon-name]` classes. Avoid using backticks (\"\`\") when injecting SVG variables inside the maskImage URL to prevent escaping issues.
 
 2. **Base Styles (`base-css.ts`)**:
    Create a `styles/base-css.ts` file that imports the dynamic icon styles (from `app-icons.ts`), and defines any placeholder wrappers (e.g., `.user-page-placeholder` having `width: '100%', height: '100%'`). Use `bindGlobalStyle('comm-css', baseCss, false, true)` in the index file to register these.

package/templates/{cv-starter → lupine-template-cv-starter}/api/package.json

@@ -1,6 +1,6 @@
-{
-  "name": "cv-starter-api",
-  "version": "1.0.0",
-  "dependencies": {},
-  "devDependencies": {}
-}
+{
+  "name": "lupine-template-cv-starter-api",
+  "version": "1.0.0",
+  "dependencies": {},
+  "devDependencies": {}
+}

package/templates/{doc-starter/api/src → lupine-template-cv-starter/api}/resources/config_default.json

@@ -1,6 +1,6 @@
-{
-  "WEB.pageLimit": "15",
-  "WEB.siteTitle": "Sample title",
-  "WEB.siteEmail": "sample@sample.com",
-  "WEB.siteUrl": "https://sample.com"
-}
+{
+  "WEB.pageLimit": "15",
+  "WEB.siteTitle": "Sample title",
+  "WEB.siteEmail": "sample@sample.com",
+  "WEB.siteUrl": "https://sample.com"
+}

package/templates/{cv-starter → lupine-template-cv-starter}/lupine.json

@@ -1,5 +1,5 @@
 {
-  "name": "cv-starter",
+  "name": "lupine-template-cv-starter",
   "markdownEntryPoints": {
     "indir": "web/markdown",
     "outdir": "web/src/markdown-built"
@@ -11,9 +11,9 @@
       "outdir": "/"
     },
     {
-      "index": "web/github-pj-name/index.tsx",
-      "html": "web/github-pj-name/index.html",
-      "outdir": "/github-pj-name"
+      "index": "web/src/lupine-template-cv-starter/index.tsx",
+      "html": "web/src/lupine-template-cv-starter/index.html",
+      "outdir": "/lupine-template-cv-starter"
     }
   ],
   "apiEntryPoint": "api/src/index.ts",
@@ -26,8 +26,8 @@
     },
     {
       "type": "web",
-      "from": "web/github-pj-name/404.html",
-      "to": "github-pj-name/404.html"
+      "from": "web/src/lupine-template-cv-starter/404.html",
+      "to": "lupine-template-cv-starter/404.html"
     },
     {
       "type": "data",

package/templates/{doc-starter → lupine-template-cv-starter}/web/package.json

@@ -1,6 +1,6 @@
-{
-  "name": "doc-starter-web",
-  "version": "1.0.0",
-  "dependencies": {},
-  "devDependencies": {}
-}
+{
+  "name": "lupine-template-cv-starter-web",
+  "version": "1.0.0",
+  "dependencies": {},
+  "devDependencies": {}
+}

package/templates/{doc-starter → lupine-template-cv-starter}/web/src/client-env-keys.ts

@@ -1,5 +1,5 @@
-export const enum ClientEnvKeys {
-  API_PORT = 'API_PORT',
-  API_BASE_URL = 'API_BASE_URL',
-  NODE_ENV = 'NODE_ENV',
-}
+export const enum ClientEnvKeys {
+  API_PORT = 'API_PORT',
+  API_BASE_URL = 'API_BASE_URL',
+  NODE_ENV = 'NODE_ENV',
+}

package/templates/{doc-starter/web/github-pj-name → lupine-template-cv-starter/web/src/lupine-template-cv-starter}/404.html

@@ -17,18 +17,21 @@
       }
     </style>
     <script type="text/javascript">
-      // Single Page Apps for GitHub Pages, change all "/github-pj-name/" to your github project name
-      if (window.location.pathname.includes('/github-pj-name/')) {
-        window.location.href = '/github-pj-name/?redirect=' + window.location.pathname;
+      // Single Page Apps for GitHub Pages, change all "/lupine-template-cv-starter/" to your github project name
+      if (window.location.pathname.includes("/lupine-template-cv-starter/")) {
+        window.location.href =
+          "/lupine-template-cv-starter/?redirect=" + window.location.pathname;
       }
     </script>
   </head>
   <body>
     <main>
       <h4 class="header404">404</h4>
-      <div class="content-404">Uh-oh! We couldn't find the page you are looking for.</div>
+      <div class="content-404">
+        Uh-oh! We couldn't find the page you are looking for.
+      </div>
       <p>
-        <a href="/github-pj-name/">Check our home page</a>
+        <a href="/lupine-template-cv-starter/">Check our home page</a>
       </p>
     </main>
   </body>

package/templates/lupine-template-cv-starter/web/src/lupine-template-cv-starter/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html data-theme="<!--META-THEME-->">
+  <head>
+    <meta charset="utf-8" />
+    <title><!--META-TITLE--></title>
+    <meta
+      name="description"
+      content="Lupine.js: The Lightweight Frontend & Efficient Backend. 7kb gzipped, React TSX syntax, SSR, Page Router, and CSS-in-JS. Build faster with less overhead."
+    />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:url"
+      content="https://uuware.github.io/lupine-template-cv-starter/"
+    />
+    <meta property="og:title" content="CV Starter （Powered by Lupine.js）" />
+    <meta
+      property="og:description"
+      content="CV Starter （Powered by Lupine.js）"
+    />
+    <meta
+      property="og:image"
+      content="https://uuware.github.io/lupine-template-cv-starter/assets/og-image.png?v=2"
+    />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta
+      property="twitter:url"
+      content="https://uuware.github.io/lupine-template-cv-starter/"
+    />
+    <meta
+      property="twitter:title"
+      content="CV Starter （Powered by Lupine.js）"
+    />
+    <meta
+      property="twitter:description"
+      content="CV Starter （Powered by Lupine.js）"
+    />
+    <meta
+      property="twitter:image"
+      content="https://uuware.github.io/lupine-template-cv-starter/assets/og-image.png"
+    />
+
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="{SUBDIR}/assets/favicon.ico"
+      type="image/x-icon"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!--META-ENV-START-->
+    <!--META-ENV-END-->
+    <link
+      rel="shortcut icon"
+      href="{SUBDIR}/assets/favicon.ico?t={hash}"
+      type="image/x-icon"
+    />
+    <link rel="stylesheet" type="text/css" href="{SUBDIR}/index.css?t={hash}" />
+    <script defer src="{SUBDIR}/index.js#t={hash}"></script>
+    <!-- Remove Cloudflare Web Analytics if you clone this project -->
+    <script
+      defer
+      src="https://static.cloudflareinsights.com/beacon.min.js"
+      data-cf-beacon='{"token": "6d22338a0a564aa78523d3c7078109db"}'
+    ></script>
+    <!-- End Cloudflare Web Analytics -->
+  </head>
+  <body>
+    <div class="lupine-root"></div>
+  </body>
+</html>

package/templates/lupine-template-cv-starter/web/src/lupine-template-cv-starter/index.tsx

@@ -0,0 +1,38 @@
+import {
+  bindRouter,
+  PageRouter,
+  bindTheme,
+  bindLang,
+  setDefaultPageTitle,
+  isFrontEnd,
+  debugWatch,
+  webEnv,
+  bindAppGlobalStyle,
+} from "lupine.components";
+import {
+  bindPressData,
+  PressPage,
+  pressThemes,
+  setPressSubDir,
+} from "lupine.press";
+import { ClientEnvKeys } from "../src/client-env-keys";
+import { baseCss } from "../src/styles/base-css";
+import { markdownConfig } from "../src/markdown-built/markdown-config";
+
+if (isFrontEnd() && webEnv(ClientEnvKeys.NODE_ENV, "") === "development") {
+  debugWatch(webEnv(ClientEnvKeys.API_PORT, 0));
+}
+
+bindLang("en", {});
+bindTheme("light", pressThemes);
+bindAppGlobalStyle("comm-css", baseCss, false, true);
+setDefaultPageTitle("Doc Starter");
+
+bindPressData(markdownConfig);
+setPressSubDir("/lupine-template-cv-starter");
+
+const pageRouter = new PageRouter();
+pageRouter.setSubDir("/lupine-template-cv-starter");
+pageRouter.use("*", PressPage);
+
+bindRouter(pageRouter);

package/templates/{cv-starter → lupine-template-cv-starter}/web/src/markdown-built/en/01-experience/index.html

@@ -1,20 +1,20 @@
-<h1 id="experience"><a class="header-anchor" href="#experience">#</a>Experience</h1><h2 id="senior-frontend-engineer-techsolutions-nz-ltd"><a class="header-anchor" href="#senior-frontend-engineer-techsolutions-nz-ltd">#</a>Senior Frontend Engineer | TechSolutions NZ Ltd.</h2><p><strong>Auckland, NZ | June 2021 - Present</strong></p>
-<ul>
-<li><strong>Core Architecture</strong>: Spearheaded the architectural design and refactoring of the company&#39;s flagship product, successfully reducing First Contentful Paint (FCP) from 2.5s to 1.2s.</li>
-<li><strong>Design System</strong>: Led the development and maintenance of the internal UI library <code>abc-ui</code>, boosting team development efficiency by over 30%.</li>
-<li><strong>Performance Optimisation</strong>: Optimised rendering performance for large-scale data visualisation dashboards, enabling smooth handling of 100k+ data points.</li>
-<li><strong>Mentorship</strong>: Mentored three junior developers, established coding standards, and conducted regular code reviews to ensure high code quality.</li>
-</ul>
-<h2 id="full-stack-developer-creative-web-agency"><a class="header-anchor" href="#full-stack-developer-creative-web-agency">#</a>Full Stack Developer | Creative Web Agency</h2><p><strong>Auckland, NZ | June 2018 - May 2021</strong></p>
-<ul>
-<li><strong>System Development</strong>: Took full ownership of the full-stack development for an e-commerce admin portal (Vue.js + Node.js), implementing key modules including order management and role-based access control (RBAC).</li>
-<li><strong>API Design</strong>: Designed and implemented RESTful APIs, documenting them with Swagger to facilitate seamless frontend-backend integration.</li>
-<li><strong>CI/CD</strong>: Implemented an automated build and deployment pipeline using Jenkins, cutting release times by 50%.</li>
-<li><strong>Mobile Responsiveness</strong>: ensured all marketing H5 pages were fully responsive and cross-browser compatible across major devices.</li>
-</ul>
-<h2 id="frontend-intern-digital-innovation-studio"><a class="header-anchor" href="#frontend-intern-digital-innovation-studio">#</a>Frontend Intern | Digital Innovation Studio</h2><p><strong>Wellington, NZ | July 2017 - May 2018</strong></p>
-<ul>
-<li><strong>UI Implementation</strong>: Collaborated closely with UI/UX designers to deliver pixel-perfect web pages with semantic HTML and clean CSS.</li>
-<li><strong>Interactivity</strong>: Implemented complex page interactions using Vanilla JS and jQuery.</li>
-<li><strong>Maintenance</strong>: Assisted with daily bug fixes and feature maintenance tasks.</li>
-</ul>
+<h1 id="experience"><a class="header-anchor" href="#experience">#</a>Experience</h1><h2 id="senior-frontend-engineer-techsolutions-nz-ltd"><a class="header-anchor" href="#senior-frontend-engineer-techsolutions-nz-ltd">#</a>Senior Frontend Engineer | TechSolutions NZ Ltd.</h2><p><strong>Auckland, NZ | June 2021 - Present</strong></p>
+<ul>
+<li><strong>Core Architecture</strong>: Spearheaded the architectural design and refactoring of the company&#39;s flagship product, successfully reducing First Contentful Paint (FCP) from 2.5s to 1.2s.</li>
+<li><strong>Design System</strong>: Led the development and maintenance of the internal UI library <code>abc-ui</code>, boosting team development efficiency by over 30%.</li>
+<li><strong>Performance Optimisation</strong>: Optimised rendering performance for large-scale data visualisation dashboards, enabling smooth handling of 100k+ data points.</li>
+<li><strong>Mentorship</strong>: Mentored three junior developers, established coding standards, and conducted regular code reviews to ensure high code quality.</li>
+</ul>
+<h2 id="full-stack-developer-creative-web-agency"><a class="header-anchor" href="#full-stack-developer-creative-web-agency">#</a>Full Stack Developer | Creative Web Agency</h2><p><strong>Auckland, NZ | June 2018 - May 2021</strong></p>
+<ul>
+<li><strong>System Development</strong>: Took full ownership of the full-stack development for an e-commerce admin portal (Vue.js + Node.js), implementing key modules including order management and role-based access control (RBAC).</li>
+<li><strong>API Design</strong>: Designed and implemented RESTful APIs, documenting them with Swagger to facilitate seamless frontend-backend integration.</li>
+<li><strong>CI/CD</strong>: Implemented an automated build and deployment pipeline using Jenkins, cutting release times by 50%.</li>
+<li><strong>Mobile Responsiveness</strong>: ensured all marketing H5 pages were fully responsive and cross-browser compatible across major devices.</li>
+</ul>
+<h2 id="frontend-intern-digital-innovation-studio"><a class="header-anchor" href="#frontend-intern-digital-innovation-studio">#</a>Frontend Intern | Digital Innovation Studio</h2><p><strong>Wellington, NZ | July 2017 - May 2018</strong></p>
+<ul>
+<li><strong>UI Implementation</strong>: Collaborated closely with UI/UX designers to deliver pixel-perfect web pages with semantic HTML and clean CSS.</li>
+<li><strong>Interactivity</strong>: Implemented complex page interactions using Vanilla JS and jQuery.</li>
+<li><strong>Maintenance</strong>: Assisted with daily bug fixes and feature maintenance tasks.</li>
+</ul>

package/templates/{cv-starter → lupine-template-cv-starter}/web/src/markdown-built/en/02-projects/index.html

@@ -1,28 +1,28 @@
-<h1 id="projects"><a class="header-anchor" href="#projects">#</a>Projects</h1><h2 id="lupine-js-https-github-com-uuware-lupine-js-open-source"><a class="header-anchor" href="#lupine-js-https-github-com-uuware-lupine-js-open-source">#</a><a href="https://github.com/uuware/lupine.js">Lupine.js</a> (Open Source)</h2><p><strong>Stack</strong>: TypeScript, React, Node.js</p>
-<ul>
-<li><strong>Overview</strong>: A high-performance, modular full-stack development framework designed to streamline modern web application builds.</li>
-<li><strong>Key Contributions</strong>:<ul>
-<li>Architected and implemented the core runtime environment.</li>
-<li>Designed a robust plugin system, enabling dynamic extension loading.</li>
-<li>Authored comprehensive official documentation and example projects.</li>
-</ul>
-</li>
-<li><strong>Impact</strong>: Garnered 1k+ Stars on GitHub; recognised as a core contributor.</li>
-</ul>
-<h2 id="personal-blog-generator"><a class="header-anchor" href="#personal-blog-generator">#</a>Personal Blog Generator</h2><p><strong>Stack</strong>: Next.js, Tailwind CSS, Markdown</p>
-<ul>
-<li><strong>Overview</strong>: A static site generator for personal blogs built with Next.js, featuring MDX rendering and customisable themes.</li>
-<li><strong>Features</strong>:<ul>
-<li>High-performance Static Site Generation (SSG) for optimal SEO.</li>
-<li>Integrated commenting system and full-text search capability.</li>
-<li>Native Dark Mode support.</li>
-</ul>
-</li>
-<li><strong>Outcome</strong>: Actively maintained personal project with 500+ daily unique visitors.</li>
-</ul>
-<h2 id="real-time-collaborative-editor"><a class="header-anchor" href="#real-time-collaborative-editor">#</a>Real-time Collaborative Editor</h2><p><strong>Stack</strong>: Vue 3, Socket.io, Node.js, MongoDB</p>
-<ul>
-<li><strong>Overview</strong>: A collaborative online document editing tool similar to Google Docs.</li>
-<li><strong>Challenge</strong>: Implemented Operational Transformation (OT) algorithms to handle conflict resolution during simultaneous multi-user editing.</li>
-<li><strong>Outcome</strong>: Successfully supported 20+ concurrent users editing a single document with latency under 100ms.</li>
-</ul>
+<h1 id="projects"><a class="header-anchor" href="#projects">#</a>Projects</h1><h2 id="lupine-js-https-github-com-uuware-lupine-js-open-source"><a class="header-anchor" href="#lupine-js-https-github-com-uuware-lupine-js-open-source">#</a><a href="https://github.com/uuware/lupine.js">Lupine.js</a> (Open Source)</h2><p><strong>Stack</strong>: TypeScript, React, Node.js</p>
+<ul>
+<li><strong>Overview</strong>: A high-performance, modular full-stack development framework designed to streamline modern web application builds.</li>
+<li><strong>Key Contributions</strong>:<ul>
+<li>Architected and implemented the core runtime environment.</li>
+<li>Designed a robust plugin system, enabling dynamic extension loading.</li>
+<li>Authored comprehensive official documentation and example projects.</li>
+</ul>
+</li>
+<li><strong>Impact</strong>: Garnered 1k+ Stars on GitHub; recognised as a core contributor.</li>
+</ul>
+<h2 id="personal-blog-generator"><a class="header-anchor" href="#personal-blog-generator">#</a>Personal Blog Generator</h2><p><strong>Stack</strong>: Next.js, Tailwind CSS, Markdown</p>
+<ul>
+<li><strong>Overview</strong>: A static site generator for personal blogs built with Next.js, featuring MDX rendering and customisable themes.</li>
+<li><strong>Features</strong>:<ul>
+<li>High-performance Static Site Generation (SSG) for optimal SEO.</li>
+<li>Integrated commenting system and full-text search capability.</li>
+<li>Native Dark Mode support.</li>
+</ul>
+</li>
+<li><strong>Outcome</strong>: Actively maintained personal project with 500+ daily unique visitors.</li>
+</ul>
+<h2 id="real-time-collaborative-editor"><a class="header-anchor" href="#real-time-collaborative-editor">#</a>Real-time Collaborative Editor</h2><p><strong>Stack</strong>: Vue 3, Socket.io, Node.js, MongoDB</p>
+<ul>
+<li><strong>Overview</strong>: A collaborative online document editing tool similar to Google Docs.</li>
+<li><strong>Challenge</strong>: Implemented Operational Transformation (OT) algorithms to handle conflict resolution during simultaneous multi-user editing.</li>
+<li><strong>Outcome</strong>: Successfully supported 20+ concurrent users editing a single document with latency under 100ms.</li>
+</ul>

package/templates/{cv-starter → lupine-template-cv-starter}/web/src/markdown-built/en/03-skills/index.html

@@ -1,18 +1,18 @@
-<h1 id="technical-skills"><a class="header-anchor" href="#technical-skills">#</a>Technical Skills</h1><h2 id="frontend-core"><a class="header-anchor" href="#frontend-core">#</a>Frontend &amp; Core</h2><ul>
-<li><strong>JavaScript (ES6+) / TypeScript</strong>: Expert level; capable of writing strict, type-safe, and scalable code.</li>
-<li><strong>HTML5 / CSS3</strong>: Proficient with semantic markup, Flexbox, Grid, and modern responsive design principles.</li>
-<li><strong>React / Vue</strong>: Deep understanding of React Hooks and Vue 3 Composition API/Reactivity system.</li>
-</ul>
-<h2 id="backend-database"><a class="header-anchor" href="#backend-database">#</a>Backend &amp; Database</h2><ul>
-<li><strong>Node.js</strong>: Experienced with Express, Koa, and NestJS frameworks for building robust server-side applications.</li>
-<li><strong>Databases</strong>: Competent with MySQL, MongoDB, and Redis, including schema design and basic performance tuning.</li>
-</ul>
-<h2 id="devops-tools"><a class="header-anchor" href="#devops-tools">#</a>DevOps &amp; Tools</h2><ul>
-<li><strong>Build Tools</strong>: Skilled locally with Webpack, Vite, and Rollup.</li>
-<li><strong>Version Control</strong>: Proficient with Git and Git Flow workflows.</li>
-<li><strong>CI/CD</strong>: Experienced in setting up pipelines with GitHub Actions, Jenkins, and Docker.</li>
-</ul>
-<h2 id="general"><a class="header-anchor" href="#general">#</a>General</h2><ul>
-<li><strong>Languages</strong>: English (Professional working proficiency).</li>
-<li><strong>Design</strong>: Comfortable using Figma/Sketch for inspecting designs; solid understanding of UI/UX principles.</li>
-</ul>
+<h1 id="technical-skills"><a class="header-anchor" href="#technical-skills">#</a>Technical Skills</h1><h2 id="frontend-core"><a class="header-anchor" href="#frontend-core">#</a>Frontend &amp; Core</h2><ul>
+<li><strong>JavaScript (ES6+) / TypeScript</strong>: Expert level; capable of writing strict, type-safe, and scalable code.</li>
+<li><strong>HTML5 / CSS3</strong>: Proficient with semantic markup, Flexbox, Grid, and modern responsive design principles.</li>
+<li><strong>React / Vue</strong>: Deep understanding of React Hooks and Vue 3 Composition API/Reactivity system.</li>
+</ul>
+<h2 id="backend-database"><a class="header-anchor" href="#backend-database">#</a>Backend &amp; Database</h2><ul>
+<li><strong>Node.js</strong>: Experienced with Express, Koa, and NestJS frameworks for building robust server-side applications.</li>
+<li><strong>Databases</strong>: Competent with MySQL, MongoDB, and Redis, including schema design and basic performance tuning.</li>
+</ul>
+<h2 id="devops-tools"><a class="header-anchor" href="#devops-tools">#</a>DevOps &amp; Tools</h2><ul>
+<li><strong>Build Tools</strong>: Skilled locally with Webpack, Vite, and Rollup.</li>
+<li><strong>Version Control</strong>: Proficient with Git and Git Flow workflows.</li>
+<li><strong>CI/CD</strong>: Experienced in setting up pipelines with GitHub Actions, Jenkins, and Docker.</li>
+</ul>
+<h2 id="general"><a class="header-anchor" href="#general">#</a>General</h2><ul>
+<li><strong>Languages</strong>: English (Professional working proficiency).</li>
+<li><strong>Design</strong>: Comfortable using Figma/Sketch for inspecting designs; solid understanding of UI/UX principles.</li>
+</ul>

package/templates/{cv-starter → lupine-template-cv-starter}/web/src/markdown-built/en/04-education/index.html

@@ -1,10 +1,10 @@
-<h1 id="education"><a class="header-anchor" href="#education">#</a>Education</h1><h2 id="university-of-auckland"><a class="header-anchor" href="#university-of-auckland">#</a>University of Auckland</h2><p><strong>Bachelor of Science in Computer Science</strong>
-<strong>Feb 2014 - Nov 2017</strong></p>
-<ul>
-<li><strong>Key Coursework</strong>: Data Structures &amp; Algorithms, Operating Systems, Computer Networks, Database Systems, Software Engineering.</li>
-<li><strong>Achievements</strong>:<ul>
-<li>Dean&#39;s Honours List (2016).</li>
-<li>First Class Honours.</li>
-</ul>
-</li>
-</ul>
+<h1 id="education"><a class="header-anchor" href="#education">#</a>Education</h1><h2 id="university-of-auckland"><a class="header-anchor" href="#university-of-auckland">#</a>University of Auckland</h2><p><strong>Bachelor of Science in Computer Science</strong>
+<strong>Feb 2014 - Nov 2017</strong></p>
+<ul>
+<li><strong>Key Coursework</strong>: Data Structures &amp; Algorithms, Operating Systems, Computer Networks, Database Systems, Software Engineering.</li>
+<li><strong>Achievements</strong>:<ul>
+<li>Dean&#39;s Honours List (2016).</li>
+<li>First Class Honours.</li>
+</ul>
+</li>
+</ul>

package/templates/{cv-starter → lupine-template-cv-starter}/web/src/markdown-built/en/index.html

@@ -1,20 +1,20 @@
-<h1 id="alex-freeman"><a class="header-anchor" href="#alex-freeman">#</a>Alex Freeman</h1><blockquote>
-<p>Full Stack Engineer | Open Source Enthusiast | Lifelong Learner</p>
-</blockquote>
-<ul>
-<li>📧 Email: <a href="javascript:lpPressLoad('/en/mailto:your.email@example.com')">your.email@example.com</a></li>
-<li>📱 Mobile: +64 21 123 4567</li>
-<li>🔗 GitHub: <a href="https://github.com/yourusername">github.com/yourusername</a></li>
-<li>🌐 Blog: <a href="https://yourblog.com">yourblog.com</a></li>
-<li>📍 Location: Auckland, New Zealand</li>
-</ul>
-<h2 id="personal-statement"><a class="header-anchor" href="#personal-statement">#</a>Personal Statement</h2><p>A seasoned Full Stack Engineer with over 5 years of experience in designing and building high-performance, scalable web applications. Proficient in the modern JavaScript ecosystem, including React, Node.js, and TypeScript. Passionate about open source software and actively maintaining several popular repositories on GitHub.</p>
-<p>A problem-solver at heart with strong collaborative and communication skills. Committed to writing clean, maintainable code and delivering exceptional user experiences.</p>
-<h2 id="career-objectives"><a class="header-anchor" href="#career-objectives">#</a>Career Objectives</h2><ul>
-<li><strong>Role</strong>: Senior Frontend Engineer / Full Stack Engineer</li>
-<li><strong>Location</strong>: Auckland / Remote</li>
-<li><strong>Availability</strong>: 4 weeks notice</li>
-<li><strong>Visa Status</strong>: NZ Resident / Work Visa</li>
-</ul>
-<hr>
-<p>Powered by <a href="https://github.com/uuware/lupine.js">Lupine.js</a>. If you find this template helpful, a star on GitHub is always appreciated ⭐️</p>
+<h1 id="alex-freeman"><a class="header-anchor" href="#alex-freeman">#</a>Alex Freeman</h1><blockquote>
+<p>Full Stack Engineer | Open Source Enthusiast | Lifelong Learner</p>
+</blockquote>
+<ul>
+<li>📧 Email: <a href="javascript:lpPressLoad('/en/mailto:your.email@example.com')">your.email@example.com</a></li>
+<li>📱 Mobile: +64 21 123 4567</li>
+<li>🔗 GitHub: <a href="https://github.com/yourusername">github.com/yourusername</a></li>
+<li>🌐 Blog: <a href="https://yourblog.com">yourblog.com</a></li>
+<li>📍 Location: Auckland, New Zealand</li>
+</ul>
+<h2 id="personal-statement"><a class="header-anchor" href="#personal-statement">#</a>Personal Statement</h2><p>A seasoned Full Stack Engineer with over 5 years of experience in designing and building high-performance, scalable web applications. Proficient in the modern JavaScript ecosystem, including React, Node.js, and TypeScript. Passionate about open source software and actively maintaining several popular repositories on GitHub.</p>
+<p>A problem-solver at heart with strong collaborative and communication skills. Committed to writing clean, maintainable code and delivering exceptional user experiences.</p>
+<h2 id="career-objectives"><a class="header-anchor" href="#career-objectives">#</a>Career Objectives</h2><ul>
+<li><strong>Role</strong>: Senior Frontend Engineer / Full Stack Engineer</li>
+<li><strong>Location</strong>: Auckland / Remote</li>
+<li><strong>Availability</strong>: 4 weeks notice</li>
+<li><strong>Visa Status</strong>: NZ Resident / Work Visa</li>
+</ul>
+<hr>
+<p>Powered by <a href="https://github.com/uuware/lupine.js">Lupine.js</a>. If you find this template helpful, a star on GitHub is always appreciated ⭐️</p>