website: add dark theme.

jaywcjlove · Apr 3, 2022 · 0802e96 · 0802e96
1 parent 2c3e9f0
commit 0802e96
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 93 deletions.
diff --git a/build/build.mjs b/build/build.mjs
@@ -24,7 +24,9 @@ const contributorsPath = path.resolve(process.cwd(), 'CONTRIBUTORS.svg');
     await FS.ensureDir(path.resolve(deployDir, 'c'));
     await FS.copySync(faviconPath, path.resolve(deployDir, 'img', 'favicon.ico'));
 
-    await FS.copyFile(path.resolve(process.cwd(), 'template', 'js', 'copy-to-clipboard.js'), path.resolve(deployDir, 'js', 'copy-to-clipboard.js'))
+    await FS.copyFile(path.resolve(process.cwd(), 'template', 'js', 'copy-to-clipboard.js'), path.resolve(deployDir, 'js', 'copy-to-clipboard.js'));
+    await FS.copyFile(path.resolve(process.cwd(), 'node_modules/@wcj/dark-mode/main.js'), path.resolve(deployDir, 'js', 'dark-mode.min.js'));
+    await FS.copyFile(path.resolve(process.cwd(), 'node_modules/@uiw/github-corners/lib/index.js'), path.resolve(deployDir, 'js', 'github-corners.js'));
 
     const jsData = await FS.readFileSync(rootIndexJSPath);
     await FS.outputFile(path.resolve(deployDir, 'js', 'index.js'), UglifyJS.minify(jsData.toString()).code)
@@ -214,7 +216,7 @@ const contributorsPath = path.resolve(process.cwd(), 'CONTRIBUTORS.svg');
 }
 
 function markdownToHTML(str) {
-  return create({ markdown: str, document: undefined });
+  return create({ markdown: str, document: undefined, 'dark-mode': false });
 }
 
 /**
@@ -226,13 +228,12 @@ function markdownToHTML(str) {
   return new Promise((resolve, reject) => {
     try {
       const stylStr = FS.readFileSync(stylPath, 'utf8');
-      const stylMD = FS.readFileSync(path.resolve('node_modules/markdown-to-html-cli/github.css'), 'utf8');
       stylus(stylStr.toString())
         .set('filename', stylPath)
         .set('compress', true)
         .render((err, css) => {
           if (err) throw err;
-          resolve(`${stylMD.replace(/\n/, '')}\n${css}`);
+          resolve(`${css}`);
         });
     } catch (err) {
       reject(err);

diff --git a/package.json b/package.json
@@ -25,11 +25,13 @@
     "url": "git+https://github.com/jaywcjlove/linux-command.git"
   },
   "devDependencies": {
+    "@uiw/github-corners": "~1.5.11",
+    "@wcj/dark-mode": "~1.0.14",
     "archiver": "~5.3.0",
     "colors-cli": "~1.0.28",
     "ejs": "~3.1.6",
     "fs-extra": "~10.0.1",
-    "markdown-to-html-cli": "~3.2.5",
+    "markdown-to-html-cli": "~3.4.1",
     "sitemap-generator": "~8.5.1",
     "sqlite3": "~5.0.2",
     "stylus": "~0.56.0",

diff --git a/template/contributors.ejs b/template/contributors.ejs
@@ -4,7 +4,7 @@
   <h1>Contributors</h1>
   <div><%-describe.contributors ? describe.contributors : '' %></div>
   <p>
-    数据来源于 <a href="https://github.com/jaywcjlove/linux-command/graphs/contributors">GitHub Contributors</a>，使用<a href="https://github.com/jaywcjlove/github-action-contributors">github-action-contributors</a>创建。
+    数据来源于 <a href="https://github.com/jaywcjlove/linux-command/graphs/contributors">GitHub Contributors</a>，使用<a href="https://github.com/jaywcjlove/github-action-contributors">action-contributors</a>创建。
   </p>
 </div>
 <%- include('widget/footer',{type: "list"}); %>

diff --git a/template/list.ejs b/template/list.ejs
@@ -1,6 +1,5 @@
 <%- include('partial/header'); %>
 <%- include('widget/search',{type: "list"}); %>
-
 <div class="search_list">
     <ul id="search_list_result">
         <!-- <li>

diff --git a/template/partial/header.ejs b/template/partial/header.ejs
@@ -10,5 +10,8 @@
     <title><%=describe.n?describe.n+'':''%> 命令，Linux <%=describe.n?describe.n+'':''%> 命令详解：<%=describe.d?describe.d+' - ':''%> Linux 命令搜索引擎</title>
     <link rel="shortcut icon" href="<%=relative_path%>img/favicon.ico">
     <link rel="stylesheet" type="text/css" href="<%=relative_path%>css/index.css?v=<%=new Date().getTime()%>">
+    <script type="module" src="<%=relative_path%>js/dark-mode.min.js"></script>
+    <script type="module" src="<%=relative_path%>js/github-corners.js"></script>
 </head>
-<body>
+<body>
+<dark-mode permanent dark="Dark" light="Light" style="position: fixed;left: 10px;top: 8px; z-index: 999;"></dark-mode>
diff --git a/template/styl/index.styl b/template/styl/index.styl
@@ -1,43 +1,19 @@
 @import('mixins/reset.styl')
-@import('mixins/css.styl')
 @import('mixins/markdown.styl')
 
 mq-mobile = "screen and (max-width: 479px)"
 
-a.github-corner { 
-  position: fixed
-  z-index: 9999
-  top: 0
-  right: 0
-  &:hover {
-    .octo-arm{
-      animation: octocat-wave 560ms ease-in-out
-    }
-  }
-  svg {
-    fill #f1f1f1
-    color #000
-    position absolute
-    top 0
-    border 0
-    right 0
-    z-index 99
-    width 70px
-    height 70px
-    @media mq-mobile {
-      width 46px
-      height 46px
-    }
-  }
+[data-color-mode*='dark'], [data-color-mode*='dark'] body {
+  color-scheme: dark;
+  --color-header-bg: #3a3a3a8f;
+  --color-header-border: #323232;
+  --color-hover: #ffffff30;
 }
-a {
-  transition: all .2s ease-in
-}
-
-@keyframes octocat-wave{
-  0%,100%{-webkit-transform:rotate(0);transform:rotate(0)}
-  20%,60%{-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}
-  40%,80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}
+[data-color-mode*='light'], [data-color-mode*='light'] body {
+  color-scheme: light;
+  --color-header-bg: #ffffff52;
+  --color-header-border: #d3d3d3;
+  --color-hover: #f2f2f2;
 }
 
 .warpper {
@@ -56,6 +32,7 @@ a {
   padding 0 10px
   .logo a {
     display flex
+    color: currentColor;
   }
   .box {
     position relative
@@ -77,9 +54,9 @@ a {
       position absolute
       display none
       z-index 999
-      box-shadow 1px 1px 3px #ededed
-      border 1px solid #d5d5d5
-      background #fff
+      box-shadow 1px 1px 3px var(--color-theme-bg)
+      border 1px solid var(--color-header-border)
+      background var(--color-theme-bg)
       min-width 100px
       top 39px
       width 100%
@@ -95,9 +72,8 @@ a {
       a {
         display block
         padding 2px 6px 2px 6px
-        color #555555
         &:hover {
-          background-color #f2f2f2
+          background-color var(--color-hover)
         }
         .kw {
           color #f00
@@ -120,8 +96,7 @@ a {
       font-size 14px
       font-weight bold
       line-height 1.42857143
-      color #555
-      background-color #fff
+      background-color: transparent;
       background-image none
       border 1px solid $border-color
       border-radius 5px 0 0 5px
@@ -153,12 +128,10 @@ a {
         cursor pointer
         user-select none
         background-image none
-        background-color #fff
         border 1px solid transparent
         border-collapse separate
         border-radius 0 5px 5px 0
         border-color $border-color
-        color #333
         &:focus,&:active:focus {
           outline thin dotted
           outline 5px auto -webkit-focus-ring-color
@@ -190,10 +163,9 @@ a {
 .footer {
   text-align center
   padding-top 31px
-  color #616161
   font-size 14px
   font-weight 300
-  border-top 1px solid #efefef
+  border-top 1px solid var(--color-header-border)
   padding-bottom 50px;
   padding 31px 6px 50px 6px
   &.home {
@@ -221,15 +193,15 @@ a {
   width auto
   position fixed
   width 100%
-  background #fff
+  background var(--color-theme-bg)
   backdrop-filter saturate(180%) blur(0.4rem)
-  background-color hsla(0, 0%, 100%, .55)
+  background-color var(--color-header-bg)
   z-index 99
 }
 
 .header_list {
   padding 10px 10px 10px 13px 
-  border-bottom 1px solid #EEEEEE
+  border-bottom 1px solid var(--color-header-border)
   .logo {
     padding-right 24px
     text-align left
@@ -303,8 +275,6 @@ a {
 .contributors {
   padding 79px 27px
   max-width: 960px;
-  color: #24292f;
-  background-color: #ffffff;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   font-size: 16px;
   line-height: 1.5;

diff --git a/template/styl/mixins/css.styl b/template/styl/mixins/css.styl
diff --git a/template/styl/mixins/markdown.styl b/template/styl/mixins/markdown.styl
@@ -15,7 +15,6 @@ mq-mobile = "screen and (max-width: 479px)"
     height 13px
     vertical-align middle
     width 1px
-    border-left 1px solid #dfdfdf
     margin -1px 0 0 0
   }
   a {
@@ -38,6 +37,7 @@ mq-mobile = "screen and (max-width: 479px)"
 }
 
 .markdown-body {
+  margin: 0 auto 0 auto;
   margin-top: 0 !important;
   padding 90px 35px 30px 35px
   max-width 980px

diff --git a/template/styl/mixins/reset.styl b/template/styl/mixins/reset.styl
@@ -11,12 +11,9 @@ html {
 }
 a {
   text-decoration none
-  &:hover {
-    color #333
-  }
 }
 * {
   box-sizing border-box
 }
 
-$border-color = #D5D5D5
+$border-color = #8f8f8f7a
diff --git a/template/widget/search.ejs b/template/widget/search.ejs