feat: add website scripts.

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "mysql-tutorial",
+  "version": "1.0.0",
+  "description": "从零开始学习MySQL，主要是面向MySQL数据库管理系统初学者。",
+  "homepage": "https://jaywcjlove.github.io/mysql-tutorial",
+  "author": "jaywcjlove",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "start": "node scripts/build.mjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jaywcjlove/mysql-tutorial.git"
+  },
+  "devDependencies": {
+    "fs-extra": "^10.0.0",
+    "markdown-to-html-cli": "^3.2.4",
+    "recursive-readdir-files": "^2.0.7"
+  }
+}

scripts/build.mjs

@@ -0,0 +1,73 @@
+import path from 'path';
+import fs from 'fs-extra';
+import getFiles from 'recursive-readdir-files';
+import { create } from 'markdown-to-html-cli';
+import { favicon } from './node/favicon.mjs';
+import { header } from './node/header.mjs';
+import { footer } from './node/footer.mjs';
+
+const styleStr = fs.readFileSync(path.relative(process.cwd(), 'scripts/style.css'));
+function createOption(editPath) {
+  const href = path.relative(process.cwd(), editPath);
+  return {
+    'github-corners': 'https://github.com/jaywcjlove/handbook.git',
+    document: {
+      style: [styleStr.toString()],
+      link: [
+        { rel: 'icon', href: favicon, type: 'image/x-icon' }
+        // { rel: 'shortcut icon', href: './favicon.ico' },
+      ]
+    },
+    rewrite: (node) => {
+      if (node.type === 'element' && node.properties.href && !node.properties['data-edit'] && /\.md(.*?)$/.test(node.properties.href)) {
+        if (/(readme).md$/.test(node.properties.href.toLocaleLowerCase())) {
+          node.properties.href = node.properties.href.replace(/(readme|README).md$/, 'index.html');
+        } else if (/.md$/.test(node.properties.href.toLocaleLowerCase())) {
+          node.properties.href = node.properties.href.replace(/.md$/, '.html');
+        } else {
+          node.properties.href = node.properties.href.replace(/.md(.*?)$/, '.html$1');;
+        }
+      }
+      if (node.type === 'element' && node.tagName === 'body') {
+        node.properties = { ...node.properties, id: 'totop' };
+        const homeUrl = path.relative(`${href}/..`, './index.html');
+        node.children = [header(homeUrl), ...node.children, footer(href)];
+      }
+    }
+  }
+}
+
+;(async () => {
+  await fs.ensureDir('build');
+  const files = await getFiles(process.cwd(), {
+    ignored: /\/(node_modules|\.git|build)/,
+    filter: (item) => /(.md|.svg|.jpg|.png|.mp4)$/.test(item.path)
+  });
+  await Promise.all(files.map(async (item) => {
+    const markdown = await fs.readFile(item.path);
+    const outputPath = path.join('build', path.relative(process.cwd(), item.path).replace(/(README|readme).md$/, 'index.html').replace(/.md$/, '.html'));
+    await fs.ensureDir(path.dirname(outputPath));
+    if (/.md$/.test(item.path)) {
+      const options = createOption(item.path);
+      let title = markdown.toString().match(/^([\s\S]*?)===/)
+      title = title ? title[1].replace(/\n/, '') : '';
+      const html = create({
+        markdown, ...options,
+        document: {
+          title: `${title ? `${title} - ` : ''}mysql-tutorial`,
+          ...options.document,
+          meta: [
+            { description: `${title ? `${title}。`: '' }从零开始学习MySQL，主要是面向MySQL数据库管理系统初学者。- mysql-tutorial` },
+            { keywords: 'example,mysql-tutorial,mysql,tutorial' }
+          ]
+        }
+      });
+      await fs.writeFile(outputPath, html);
+      console.log(`♻️  create file: \x1b[32;1m ${outputPath} \x1b[0m`);
+    } else {
+      await fs.copyFile(item.path, outputPath);
+      console.log(`🏞  copied file: \x1b[32;1m ${outputPath} \x1b[0m`);
+    }
+
+  }));
+})();

scripts/node/favicon.mjs

@@ -0,0 +1 @@
+export const favicon = 'data:image/png;base64,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'

scripts/node/footer.mjs

@@ -0,0 +1,60 @@
+
+export const footer = (editPath) => {
+  return {
+    type: 'element',
+    tagName: 'div',
+    properties: {
+      className: 'footer',
+    },
+    children: [
+      {
+        type: 'element',
+        tagName: 'a',
+        properties: {
+          'data-edit': true,
+          target: '__blank',
+          title: `https://github.com/jaywcjlove/handbook/edit/master/${editPath}`, 
+          href: `https://github.com/jaywcjlove/handbook/edit/master/${editPath}`,
+        },
+        children: [ { type: 'text', value: '编辑当前页面' } ]
+      },
+      {
+        type: 'element',
+        tagName: 'a',
+        properties: {
+          target: '__blank',
+          href: 'https://jaywcjlove.gitee.io/handbook/',
+        },
+        children: [ { type: 'text', value: '国内镜像站点 🇨🇳' } ]
+      },
+      {
+        type: 'element',
+        tagName: 'a',
+        properties: {
+          target: '__blank',
+          href: 'https://github.com/jaywcjlove/handbook',
+        },
+        children: [ { type: 'text', value: 'Github' } ]
+      },
+      {
+        type: 'element',
+        tagName: 'a',
+        properties: {
+          target: '__blank',
+          href: 'https://gitee.com/jaywcjlove/handbook',
+        },
+        children: [ { type: 'text', value: 'Gitee' } ]
+      },
+      {
+        type: 'element',
+        tagName: 'div',
+        properties: {
+          className: 'copyright',
+        },
+        children: [
+          { type: 'text', value: 'Copyright © 2021. All rights reserved.' }
+        ]
+      }
+    ]
+  }
+}

scripts/node/header.mjs

@@ -0,0 +1,55 @@
+import { favicon } from './favicon.mjs';
+
+export const header = (homeUrl) => {
+  return {
+      type: 'element',
+      tagName: 'header',
+      properties: { className: 'header', },
+      children: [
+        {
+          type: 'element',
+          tagName: 'article',
+          properties: { className: 'inner', },
+          children: [
+            {
+              type: 'element',
+              tagName: 'a',
+              properties: {
+                className: 'logo',
+                href: homeUrl || 'https://jaywcjlove.github.io/mysql-tutorial',
+              },
+              children: [
+                {
+                  type: 'element',
+                  tagName: 'img',
+                  properties: {
+                    src: favicon,
+                    alt: 'mysql-tutorial logo',
+                  },
+                  children: []
+                }
+              ]
+            }, {
+              type: 'element',
+              tagName: 'div',
+              properties: {
+                className: 'title',
+              },
+              children: [
+                { type: 'text', value: 'mysql-tutorial' }
+              ]
+            }, {
+              type: 'element',
+              tagName: 'nav',
+              properties: {
+                className: 'nav',
+              },
+              children: [
+
+              ]
+            }
+          ]
+        }
+      ]
+  }
+}

scripts/style.css

@@ -0,0 +1,67 @@
+.header {
+  position: fixed;
+  width: 100%;
+  background: #fff;
+  backdrop-filter: saturate(180%) blur(0.4rem);
+  background-color: rgba(255,255,255,0.55);
+  border-bottom: 1px solid #00000014;
+  z-index: 99;
+  top: 0;
+}
+
+.header .inner {
+  max-width: 960px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 0;
+}
+
+.header .logo {
+  margin-right: 10px;
+}
+.header .title {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+.header .logo img {
+  height: 26px;
+  display: block;
+}
+
+.markdown-body {
+  margin-top: 78px;
+}
+
+.footer {
+  max-width: 960px;
+  margin: 0 auto;
+  text-align: center;
+  padding: 0 0 110px 0;
+  border-top: 1px solid hsla(210,18%,87%,1);
+  padding-top: 18px;
+}
+
+.footer a {
+  font-size: 14px;
+  text-decoration: initial;
+  color: #3f51b5;
+}
+
+.footer a:hover {
+  color:#009688;
+  text-decoration: underline;
+}
+
+.footer a + a {
+  margin-left: 10px;
+}
+
+.footer .copyright {
+  color: #596068;
+  font-size: 14px;
+  padding-top: 5px;
+}