增加tmskit一些看法

joey998 · May 30, 2024 · 479353c · 479353c
1 parent 6537762
commit 479353c
Show file tree

Hide file tree

Showing 24 changed files with 1,437 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,5 +9,20 @@
     "docs:dev": "vitepress dev",
     "docs:build": "vitepress build",
     "docs:preview": "vitepress preview"
+  },
+  "dependencies": {
+    "@metalsmith/collections": "^1.3.0",
+    "@metalsmith/drafts": "^1.3.0",
+    "@metalsmith/layouts": "^2.7.0",
+    "@metalsmith/markdown": "^1.10.0",
+    "@metalsmith/permalinks": "^3.0.1",
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "handlebars": "^4.7.8",
+    "inquirer": "^8.2.6",
+    "metalsmith": "^2.6.3",
+    "metalsmith-layouts": "^2.3.1",
+    "ora": "^8.0.1",
+    "shelljs": "^0.8.5"
   }
 }
diff --git a/src/frontend/library/Metalsmith/index.js b/src/frontend/library/Metalsmith/index.js
@@ -0,0 +1,18 @@
+const Metalsmith = require('metalsmith');
+let layouts = require('@metalsmith/layouts');
+
+Metalsmith(__dirname)
+  .metadata({
+    site: {
+      title: 'My Website',
+    },
+  })
+  .source('./src')
+  .destination('./build')
+  .clean(true)
+  .use(layouts({
+    pattern: '**/*.html'
+  }))
+  .build(function (err) {
+    if (err) throw err;
+  });
diff --git a/src/frontend/library/Metalsmith/index.md b/src/frontend/library/Metalsmith/index.md
@@ -0,0 +1 @@
+# 勾八玩意儿看文档根本看不明白，用个鸡巴
diff --git a/src/frontend/library/Metalsmith/layouts/default.html b/src/frontend/library/Metalsmith/layouts/default.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }}</title>
+</head>
+<body>
+    <header>
+        <nav>
+            <a href="/">Home</a>
+            <a href="/about.html">About</a>
+        </nav>
+    </header>
+
+    <main>
+        {{{ contents }}}
+    </main>
+</body>
+</html>
diff --git a/src/frontend/library/Metalsmith/src/about.md b/src/frontend/library/Metalsmith/src/about.md
@@ -0,0 +1,8 @@
+---
+title: About
+layout: default.hbs
+---
+
+# About Me
+
+I am a web developer who loves creating static websites using Metalsmith.
diff --git a/src/frontend/library/Metalsmith/src/index.md b/src/frontend/library/Metalsmith/src/index.md
@@ -0,0 +1,8 @@
+---
+title: Home
+layout: default.hbs
+---
+
+# Welcome to My Website
+
+This is the homepage of my awesome website.
diff --git a/src/frontend/library/Metalsmith/src/posts/about2.md b/src/frontend/library/Metalsmith/src/posts/about2.md
@@ -0,0 +1,8 @@
+---
+title: About
+layout: default.hbs
+---
+
+# About Me
+
+I am a web developer who loves creating static websites using Metalsmith.
diff --git a/src/frontend/library/Metalsmith/src/posts/index2.md b/src/frontend/library/Metalsmith/src/posts/index2.md
@@ -0,0 +1,8 @@
+---
+title: Home
+layout: default.hbs
+---
+
+# Welcome to My Website
+
+This is the homepage of my awesome website.
diff --git a/src/frontend/library/commander/commander-start.js b/src/frontend/library/commander/commander-start.js
@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+
+const commander = require('commander');
+const program = new commander.Command();
+
+// Commander supports nested subcommands.
+// .command() can add a subcommand with an action handler or an executable.
+// .addCommand() adds a prepared command with an action handler.
+
+// Add nested commands using `.command()`.
+const brew = program.command('brew');
+brew.command('tea').action(() => {
+  console.log('brew tea');
+});
+brew.command('coffee').action(() => {
+  console.log('brew coffee');
+});
+
+// Add nested commands using `.addCommand().
+// The command could be created separately in another module.
+function makeHeatCommand() {
+  const heat = new commander.Command('heat');
+  heat.command('jug').action(() => {
+    console.log('heat jug');
+  });
+  heat.command('pot').action(() => {
+    console.log('heat pot');
+  });
+  return heat;
+}
+program.addCommand(makeHeatCommand());
+
+program.parse(process.argv);
+
+// Try the following:
+//    node nestedCommands.js brew tea
+//    node nestedCommands.js heat jug
diff --git a/src/frontend/library/commander/commander.js b/src/frontend/library/commander/commander.js
@@ -0,0 +1,66 @@
+const { program } = require('commander');
+
+
+let op1 = program.option('-s --search', 'search')
+// 通过绑定处理函数实现命令（这里的指令描述为放在`.command`中）
+// 返回新生成的命令（即该子命令）以供继续配置
+let a = program
+  .command('clone <source> [destination]');
+
+a.description('clone a repository into a newly created directory')
+  .action((source, destination) => {
+    console.log('clone command called', source, destination);
+  })
+  .hook('postAction', (a, b) => {
+    console.log('postAction', a === b);
+  })
+  .hook('preAction', (a, b) => {
+    console.log('preAction', a === b);
+  });
+
+let c = program
+  .command('cloneC <source> [destination]')
+  .command('cloneCAfter <source> [destination]')
+
+c.description('clone a repository into a newly created directory')
+  .action((source, destination) => {
+    console.log('clone command called', source, destination);
+  })
+  .hook('postAction', (a, b) => {
+    console.log('postAction', a === b);
+  })
+  .hook('preAction', (a, b) => {
+    console.log('preAction', a === b);
+  });
+
+let isAEqualC = a === c
+
+
+// 通过独立的的可执行文件实现命令 (注意这里指令描述是作为`.command`的第二个参数)
+// 返回最顶层的命令以供继续添加子命令
+let b = program
+  .command('start <service>', 'start service', { executableFile: 'myUpdateSubCommand' })
+  .command('stop [service]', 'stop named service, or all if no name supplied');
+
+b.helpOption('-e, --HELP', 'read more information');
+
+
+program.addHelpCommand('start [command]', 'show assistance');
+
+// program
+//   .version('0.1.0')
+//   .argument('<username>', 'user to login')
+//   .argument('[password]', 'password for user, if required', 'no password given')
+//   .action((username, password) => {
+//     console.log('username:', username);
+//     console.log('password:', password);
+//   });
+
+// 分别装配命令
+// 返回最顶层的命令以供继续添加子命令
+// program
+//   .addCommand(build.makeBuildCommand());
+
+program.parse();
+let m = 12
+console.log(m);
diff --git a/src/frontend/library/commander/commander.md b/src/frontend/library/commander/commander.md
@@ -0,0 +1,46 @@
+# commander.js
+
+## 名词概念
+1. 选项（options）：终端传递的以`-`或者`--`开头的参数。
+2. 命令（command）：终端可以调用的命令，例如git add .中的add
+3. 子命令(sub-command)：一个独立的文件，名称默认为`主命令文件名称-子命令名称`
+4. 选项参数，命令参数：跟在选项或者命令之后的参数，<>表示必选，[]表示可选，终端没出现该选项名称或者命令名称时候，默认为undefined
+
+例子
+```
+1. 
+program.option("-s --search <value>", "搜索")
+// 终端调用
+node ./commander.js -s searchValue // -s为选项，searchValue为选项参数
+
+2. 
+program.command("clone <source> <destination>").action((source, destination) => {console.log(source, destination)})
+// 终端调用
+node ./commander.js clone placeA placeB // clone为命令，place和placeB为命令参数，source，destination对应placeA，placeB
+
+3.
+program.command("start <value>", "子命令start"); // command的第二个参数为描述且必须传，不传则该命令为上面的主命令
+// 终端调用
+node ./commander.js start clone placeA placeB // 会调用同级目录下面的commander-start.js文件的clone命令
+```
+
+## 用法
+类似jquery，其实program就是一个Command实例，除了.command()会创建一个新的Command实例（会挂在调用了command方法的那个Command实例下面），其余方法其实返回的都是最近已经存在的Command实例
+```
+const { program } = require('commander'); // program是一个全局的Command实例
+
+program.options("-s --search") // 返回全局Command实例
+.command('commandA")  // 创建一个CommandA实例
+.command('commandB")  // 在CommandA实例下面创建一个新的CommandB实例
+
+
+program.command('commandC') //在全局Command下面创建一个新的CommandC实例
+```
+
+## Command实例方法
+[具体见官方文档](https://github.com/tj/commander.js/blob/HEAD/Readme_zh-CN.md)
+- option
+- command
+- action 参数为命令的所有参数，外加上解析出来的options和command实例
+- version
+- hook
diff --git a/src/frontend/library/commander/myUpdateSubCommand.js b/src/frontend/library/commander/myUpdateSubCommand.js
@@ -0,0 +1,33 @@
+const { program } = require('commander');
+
+// 通过绑定处理函数实现命令（这里的指令描述为放在`.command`中）
+// 返回新生成的命令（即该子命令）以供继续配置
+program
+  .command('clone <source> [destination]')
+  .description('clone a repository into a newly created directory')
+  .action((source, destination) => {
+    console.log('clone command called', source, destination);
+  });
+
+// 通过独立的的可执行文件实现命令 (注意这里指令描述是作为`.command`的第二个参数)
+// 返回最顶层的命令以供继续添加子命令
+program
+  .command('start <service>', './start.sh', { executableFile: 'myUpdateSubCommand' })
+// .command('stop [service]', 'stop named service, or all if no name supplied');
+// .helpOption(false, 'read more information');
+
+// program
+//   .version('0.1.0')
+//   .argument('<username>', 'user to login')
+//   .argument('[password]', 'password for user, if required', 'no password given')
+//   .action((username, password) => {
+//     console.log('username:', username);
+//     console.log('password:', password);
+//   });
+
+// 分别装配命令
+// 返回最顶层的命令以供继续添加子命令
+// program
+//   .addCommand(build.makeBuildCommand());
+
+program.parse();
diff --git a/src/frontend/library/inquirer/index.md b/src/frontend/library/inquirer/index.md
@@ -0,0 +1,3 @@
+# inquirer
+
+命令行交互库
diff --git a/src/frontend/library/inquirer/index.mjs b/src/frontend/library/inquirer/index.mjs
@@ -0,0 +1,60 @@
+/**
+ * Input prompt example
+ */
+
+import chalk from 'chalk';
+import inquirer from "inquirer";
+
+const hexRegEx = /(\d|[a-f])/gim;
+const isHex = (value) =>
+  (value.match(hexRegEx) || []).length === value.length &&
+  (value.length === 3 || value.length === 6);
+
+const questions = [
+  {
+    type: 'checkbox',
+    choices: [{ name: 'haha', value: 'a', disabled: true }, { name: '第二个', value: 'b' }, { value: 'c' }],
+    name: 'first_name',
+    message: "What's your first name",
+  },
+  {
+    type: 'input',
+    name: 'last_name',
+    message: "What's your last name",
+    default() {
+      return 'Doe';
+    },
+  },
+  {
+    type: 'input',
+    name: 'fav_color',
+    message: "What's your favorite color",
+    transformer(color, answers, flags) {
+      const text = chalk.hex(isHex(color) ? color : 'fff')(color);
+      if (flags.isFinal) {
+        return text + '!';
+      }
+
+      return text;
+    },
+  },
+  // {
+  //   type: 'input',
+  //   name: 'phone',
+  //   message: "What's your phone number",
+  //   validate(value) {
+  //     const pass = value.match(
+  //       /^([01])?[\s.-]?\(?(\d{3})\)?[\s.-]?(\d{3})[\s.-]?(\d{4})\s?((?:#|ext\.?\s?|x\.?\s?)(?:\d+)?)?$/i,
+  //     );
+  //     if (pass) {
+  //       return true;
+  //     }
+
+  //     return 'Please enter a valid phone number';
+  //   },
+  // },
+];
+
+inquirer.prompt(questions).then((answers) => {
+  console.log(JSON.stringify(answers, null, '  '));
+});
diff --git a/src/frontend/library/ora/index.md b/src/frontend/library/ora/index.md
@@ -0,0 +1,3 @@
+# ora
+
+就是用来转圈并提供文字的
diff --git a/src/frontend/library/ora/index.mjs b/src/frontend/library/ora/index.mjs
@@ -0,0 +1,23 @@
+import ora from 'ora';
+
+const spinner = ora('Loading unicorns').start();
+
+async function changeColor() {
+  await new Promise(resolve => {
+    setTimeout(() => {
+      spinner.color = 'yellow';
+      spinner.text = 'Loading rainbows';
+      resolve()
+    }, 1000);
+  })
+
+  new Promise(resolve => {
+    setTimeout(() => {
+      spinner.stop();
+      resolve()
+    }, 1000);
+  })
+
+}
+
+changeColor();
diff --git a/src/frontend/library/semver/semver.js b/src/frontend/library/semver/semver.js
diff --git a/src/frontend/library/semver/semver.md b/src/frontend/library/semver/semver.md
@@ -0,0 +1,4 @@
+# semver
+
+## 简介
+用来判断版本号是否满足某条件，版本号应遵循semver格式，例如 >1.2.3，^1.2.3, ~1.2.3