create-rspress 0.0.10 → 0.0.12

package/dist/index.js

@@ -2733,7 +2733,7 @@ var require_dist = __commonJS({
         });
       };
     }
-    var prompts2 = require_prompts();
+    var prompts3 = require_prompts();
     var passOn = ["suggest", "format", "onState", "validate", "onRender", "type"];
     var noop = () => {
     };
@@ -2786,7 +2786,7 @@ var require_dist = __commonJS({
             var _question2 = question;
             name = _question2.name;
             type = _question2.type;
-            if (prompts2[type] === void 0) {
+            if (prompts3[type] === void 0) {
               throw new Error(`prompt type (${type}) is not defined`);
             }
             if (override2[question.name] !== void 0) {
@@ -2797,7 +2797,7 @@ var require_dist = __commonJS({
               }
             }
             try {
-              answer = prompt._injected ? getInjectedAnswer(prompt._injected, question.initial) : yield prompts2[type](question);
+              answer = prompt._injected ? getInjectedAnswer(prompt._injected, question.initial) : yield prompts3[type](question);
               answers[name] = answer = yield getFormattedAnswer(question, answer, true);
               quit = yield onSubmit(question, answer, answers);
             } catch (err) {
@@ -2830,7 +2830,7 @@ var require_dist = __commonJS({
     }
     module2.exports = Object.assign(prompt, {
       prompt,
-      prompts: prompts2,
+      prompts: prompts3,
       inject,
       override
     });
@@ -4997,7 +4997,7 @@ var require_prompts2 = __commonJS({
 var require_lib = __commonJS({
   "../../node_modules/.pnpm/prompts@2.4.1/node_modules/prompts/lib/index.js"(exports, module2) {
     "use strict";
-    var prompts2 = require_prompts2();
+    var prompts3 = require_prompts2();
     var passOn = ["suggest", "format", "onState", "validate", "onRender", "type"];
     var noop = () => {
     };
@@ -5031,7 +5031,7 @@ var require_lib = __commonJS({
           throw new Error("prompt message is required");
         }
         ({ name, type } = question);
-        if (prompts2[type] === void 0) {
+        if (prompts3[type] === void 0) {
           throw new Error(`prompt type (${type}) is not defined`);
         }
         if (override2[question.name] !== void 0) {
@@ -5042,7 +5042,7 @@ var require_lib = __commonJS({
           }
         }
         try {
-          answer = prompt._injected ? getInjectedAnswer(prompt._injected, question.initial) : await prompts2[type](question);
+          answer = prompt._injected ? getInjectedAnswer(prompt._injected, question.initial) : await prompts3[type](question);
           answers[name] = answer = await getFormattedAnswer(question, answer, true);
           quit = await onSubmit(question, answer, answers);
         } catch (err) {
@@ -5066,7 +5066,7 @@ var require_lib = __commonJS({
     function override(answers) {
       prompt._override = Object.assign({}, answers);
     }
-    module2.exports = Object.assign(prompt, { prompt, prompts: prompts2, inject, override });
+    module2.exports = Object.assign(prompt, { prompt, prompts: prompts3, inject, override });
   }
 });
 
@@ -8065,12 +8065,13 @@ var CAC = class extends import_events.EventEmitter {
 var cac = (name = "") => new CAC(name);
 
 // src/index.ts
-var import_prompts = __toESM(require_prompts3());
+var import_prompts2 = __toESM(require_prompts3());
 var import_fs_extra2 = __toESM(require_lib2());
 
 // src/utils.ts
 var import_path = __toESM(require("path"));
 var import_fs_extra = __toESM(require_lib2());
+var import_prompts = __toESM(require_prompts3());
 async function copyFolder(src, dest) {
   const renameFiles = {
     _gitignore: ".gitignore"
@@ -8087,6 +8088,23 @@ async function copyFolder(src, dest) {
     }
   }
 }
+function replaceVar(str, data, decorator = "") {
+  return str.replace(/<%=\s*(.*?)\s*%>/g, (_, key) => {
+    const value = data[key.trim()];
+    return `${decorator}${value}${decorator}`;
+  });
+}
+async function renderFile(fileSrc, templateDir, targetRoot, data) {
+  const templateFilePath = import_path.default.resolve(templateDir, fileSrc);
+  const targetPath = import_path.default.resolve(targetRoot, fileSrc);
+  const file = await import_fs_extra.default.readFile(templateFilePath, "utf-8");
+  const decorator = templateFilePath.endsWith(".ts") ? "'" : "";
+  const output = replaceVar(file, data, decorator);
+  if (!import_fs_extra.default.existsSync(targetRoot)) {
+    await import_fs_extra.default.mkdir(targetRoot, { recursive: true });
+  }
+  await import_fs_extra.default.writeFile(targetPath, output);
+}
 function getPkgManager() {
   const ua = process.env.npm_config_user_agent;
   if (!ua) {
@@ -8099,13 +8117,40 @@ function getPkgManager() {
 function formatTargetDir(targetDir) {
   return targetDir.trim().replace(/\/+$/g, "");
 }
+function initSitePrompts(options) {
+  const initOptionEvent = (option) => {
+    option.onState = (state) => {
+      const value = state.value || option.initial;
+      option.value = option.formatFn?.(value) || value;
+    };
+    return option;
+  };
+  options.forEach(initOptionEvent);
+  return (0, import_prompts.default)(options);
+}
 
 // src/index.ts
 var cli = cac("create-rspress").help();
 cli.command("", "Create a new rspress site").action(async () => {
+  const siteOptions = [
+    {
+      name: "siteTitle",
+      type: "text",
+      message: "Site Title",
+      initial: "Rspress",
+      value: ""
+    },
+    {
+      name: "siteDesc",
+      type: "text",
+      message: "Site Description",
+      initial: "Rspack-based Static Site Generator",
+      value: ""
+    }
+  ];
   const defaultProjectName = "rspress-site";
   let targetDir = defaultProjectName;
-  const promptProjectDir = async () => await (0, import_prompts.default)([
+  const promptProjectDir = async () => await (0, import_prompts2.default)([
     {
       type: "text",
       name: "projectDir",
@@ -8125,9 +8170,18 @@ cli.command("", "Create a new rspress site").action(async () => {
     await promptProjectDir();
     root = import_path2.default.resolve(process.cwd(), targetDir);
   }
+  await initSitePrompts(siteOptions);
   await import_fs_extra2.default.mkdir(root, { recursive: true });
   const srcFolder = import_path2.default.resolve(__dirname, "../template");
   await copyFolder(srcFolder, targetDir);
+  const filesToInterpret = ["docs/index.md", "rspress.config.ts"];
+  const siteData = siteOptions.reduce((prev, cur) => {
+    prev[cur.name] = cur.value;
+    return prev;
+  }, {});
+  for (const file of filesToInterpret) {
+    await renderFile(file, targetDir, targetDir, siteData);
+  }
   const pkgManager = getPkgManager();
   console.log("\nDone. Now run:\n");
   console.log(`cd ${targetDir}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rspress",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/template/docs/_meta.json

@@ -0,0 +1,16 @@
+[
+  {
+    "text": "Guide",
+    "link": "/guide/",
+    "activeMatch": "/guide/"
+  },
+  {
+    "text": "Hello World",
+    "link": "/hello/",
+    "activeMatch": "/hello/"
+  },
+  {
+    "text": "API",
+    "link": "https://rspress.dev/api/index.html"
+  }
+]

package/template/docs/guide/index.md

@@ -0,0 +1,201 @@
+# Markdown & MDX
+
+Rspress supports not only Markdown but also [MDX](https://mdxjs.com/), a powerful way to develop content.
+
+## Markdown
+
+MDX is a superset of Markdown, which means you can write Markdown files as usual. For example:
+
+```md
+# Hello World
+```
+
+## Use Component
+
+When you want to use React components in Markdown files, you should name your files with `.mdx` extension. For example:
+
+```mdx
+// docs/index.mdx
+import { CustomComponent } from './custom';
+
+# Hello World
+
+<CustomComponent />
+```
+
+## Front Matter
+
+You can add Front Matter at the beginning of your Markdown file, which is a YAML-formatted object that defines some metadata. For example:
+
+```yaml
+---
+title: Hello World
+---
+```
+
+> Note: By default, Rspress uses h1 headings as html headings.
+
+You can also access properties defined in Front Matter in the body, for example:
+
+```markdown
+---
+title: Hello World
+---
+
+# {frontmatter.title}
+```
+
+The previously defined properties will be passed to the component as `frontmatter` properties. So the final output will be:
+
+```html
+<h1>Hello World</h1>
+```
+
+## Custom Container
+
+You can use the `:::` syntax to create custom containers and support custom titles. For example:
+
+**Input:**
+
+```markdown
+:::tip
+This is a `block` of type `tip`
+:::
+
+:::info
+This is a `block` of type `info`
+:::
+
+:::warning
+This is a `block` of type `warning`
+:::
+
+:::danger
+This is a `block` of type `danger`
+:::
+
+::: details
+This is a `block` of type `details`
+:::
+
+:::tip Custom Title
+This is a `block` of `Custom Title`
+:::
+
+:::tip{title="Custom Title"}
+This is a `block` of `Custom Title`
+:::
+```
+
+**Output:**
+
+:::tip
+This is a `block` of type `tip`
+:::
+
+:::info
+This is a `block` of type `info`
+:::
+
+:::warning
+This is a `block` of type `warning`
+:::
+
+:::danger
+This is a `block` of type `danger`
+:::
+
+::: details
+This is a `block` of type `details`
+:::
+
+:::tip Custom Title
+This is a `block` of `Custom Title`
+:::
+
+:::tip{title="Custom Title"}
+This is a `block` of `Custom Title`
+:::
+
+## Code Block
+
+### Basic Usage
+
+You can use the \`\`\` syntax to create code blocks and support custom titles. For example:
+
+**Input:**
+
+````md
+```js
+console.log('Hello World');
+```
+
+```js title="hello.js"
+console.log('Hello World');
+```
+````
+
+**Output:**
+
+```js
+console.log('Hello World');
+```
+
+```js title="hello.js"
+console.log('Hello World');
+```
+
+### Show Line Numbers
+
+If you want to display line numbers, you can enable the `showLineNumbers` option in the config file:
+
+```ts title="rspress.config.ts"
+export default {
+  // ...
+  markdown: {
+    showLineNumbers: true,
+  },
+};
+```
+
+### Line Highlighting
+
+You can also apply line highlighting and code block title at the same time, for example:
+
+**Input:**
+
+````md
+```js title="hello.js" {1,3-5}
+console.log('Hello World');
+
+const a = 1;
+
+console.log(a);
+
+const b = 2;
+
+console.log(b);
+```
+````
+
+**Ouput:**
+
+```js title="hello.js" {1,3-5}
+console.log('Hello World');
+
+const a = 1;
+
+console.log(a);
+
+const b = 2;
+
+console.log(b);
+```
+
+## Rustify MDX compiler
+
+You can enable Rustify MDX compiler by following config:
+
+import MdxRs from '../../fragments/mdx-rs';
+
+<MdxRs />

package/template/docs/hello.md

@@ -0,0 +1,4 @@
+# Hello World!
+
+## Start
+Write something to build your own docs! 🎁

package/template/docs/index.md

@@ -0,0 +1,37 @@
+---
+pageType: home
+
+hero:
+  name: <%= siteTitle %>
+  text: <%= siteDesc %>
+  tagline: <%= siteTitle %> tagline
+  actions:
+    - theme: brand
+      text: Quick Start
+      link: /guide/
+    - theme: alt
+      text: Github
+      link: https://github.com/web-infra-dev/rspress
+  image:
+    src: https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/rspress/rspress-logo.png
+    alt: <%= siteTitle %> Logo
+features:
+  - title: Blazing fast build speed
+    details: The core compilation module is based on the Rust front-end toolchain, providing a more ultimate development experience.
+    icon: 🏃🏻‍♀️
+  - title: Support for MDX content writing
+    details: MDX is a powerful way to write content, allowing you to use React components in Markdown.
+    icon: 📦
+  - title: Built-in full-text search
+    details: Automatically generates a full-text search index for you during construction, providing out-of-the-box full-text search capabilities.
+    icon: 🎨
+  - title: Simpler I18n solution
+    details: With the built-in I18n solution, you can easily provide multi-language support for documents or components.
+    icon: 🌍
+  - title: Static site generation
+    details: In production, it automatically builds into static HTML files, which can be easily deployed anywhere.
+    icon: 🌈
+  - title: Providing multiple custom capabilities
+    details: Through its extension mechanism, you can easily extend theme UI and build process.
+    icon: 🔥
+---

package/template/rspress.config.ts

@@ -2,5 +2,17 @@ import * as path from 'path';
 import { defineConfig } from 'rspress/config';
 
 export default defineConfig({
-  root: path.join(__dirname, 'doc'),
+  root: path.join(__dirname, 'docs'),
+  title: <%= siteTitle %>,
+  description: <%= siteDesc %>,
+  icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/rspress/rspress-logo.png',
+  logo: {
+    light: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspress/rspress-navbar-logo-0904.png',
+    dark: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspress/rspress-navbar-logo-dark-0904.png',
+  },
+  themeConfig: {
+    socialLinks: [
+      { icon: 'github', mode: 'link', content: 'https://github.com/web-infra-dev/rspress' },
+    ],
+  },
 });

package/template/doc/guide.md

@@ -1 +0,0 @@
-# Guide

package/template/doc/index.md

@@ -1 +0,0 @@
-# Hello World