learning
/
linux-command
mirror of https://github.com/jaywcjlove/linux-command.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

website: add dark theme.

This commit is contained in:
jaywcjlove 2022-04-03 23:32:20 +08:00
parent 2c3e9f08c6
commit 0802e9695c
10 changed files with 37 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
build/build.mjs
View File

@ -24,7 +24,9 @@ const contributorsPath = path.resolve(process.cwd(), 'CONTRIBUTORS.svg');
await FS.ensureDir(path.resolve(deployDir, 'c')); await FS.ensureDir(path.resolve(deployDir, 'c'));
await FS.copySync(faviconPath, path.resolve(deployDir, 'img', 'favicon.ico')); 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); const jsData = await FS.readFileSync(rootIndexJSPath);
await FS.outputFile(path.resolve(deployDir, 'js', 'index.js'), UglifyJS.minify(jsData.toString()).code) 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) { 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) => { return new Promise((resolve, reject) => {
try { try {
const stylStr = FS.readFileSync(stylPath, 'utf8'); const stylStr = FS.readFileSync(stylPath, 'utf8');
const stylMD = FS.readFileSync(path.resolve('node_modules/markdown-to-html-cli/github.css'), 'utf8');
stylus(stylStr.toString()) stylus(stylStr.toString())
.set('filename', stylPath) .set('filename', stylPath)
.set('compress', true) .set('compress', true)
.render((err, css) => { .render((err, css) => {
if (err) throw err; if (err) throw err;
resolve(`${stylMD.replace(/\n/, '')}\n${css}`); resolve(`${css}`);
}); });
} catch (err) { } catch (err) {
reject(err); reject(err);

4
package.json
View File

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

2
template/contributors.ejs
View File

@ -4,7 +4,7 @@
<h1>Contributors</h1> <h1>Contributors</h1>
<div><%-describe.contributors ? describe.contributors : '' %></div> <div><%-describe.contributors ? describe.contributors : '' %></div>
<p> <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> </p>
</div> </div>
<%- include('widget/footer',{type: "list"}); %> <%- include('widget/footer',{type: "list"}); %>

1
template/list.ejs
View File

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

5
template/partial/header.ejs
View File

@ -10,5 +10,8 @@
<title><%=describe.n?describe.n+'':''%> 命令，Linux <%=describe.n?describe.n+'':''%> 命令详解：<%=describe.d?describe.d+' - ':''%> Linux 命令搜索引擎</title> <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="shortcut icon" href="<%=relative_path%>img/favicon.ico">
<link rel="stylesheet" type="text/css" href="<%=relative_path%>css/index.css?v=<%=new Date().getTime()%>"> <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> </head>
<body> <body>
<dark-mode permanent dark="Dark" light="Light" style="position: fixed;left: 10px;top: 8px; z-index: 999;"></dark-mode>

70
template/styl/index.styl
View File

@ -1,43 +1,19 @@
@import('mixins/reset.styl') @import('mixins/reset.styl')
@import('mixins/css.styl')
@import('mixins/markdown.styl') @import('mixins/markdown.styl')
mq-mobile = "screen and (max-width: 479px)" mq-mobile = "screen and (max-width: 479px)"
a.github-corner { [data-color-mode*='dark'], [data-color-mode*='dark'] body {
position: fixed color-scheme: dark;
z-index: 9999 --color-header-bg: #3a3a3a8f;
top: 0 --color-header-border: #323232;
right: 0 --color-hover: #ffffff30;
&: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
}
}
} }
a { [data-color-mode*='light'], [data-color-mode*='light'] body {
transition: all .2s ease-in color-scheme: light;
} --color-header-bg: #ffffff52;
--color-header-border: #d3d3d3;
@keyframes octocat-wave{ --color-hover: #f2f2f2;
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)}
} }
.warpper { .warpper {
@ -56,6 +32,7 @@ a {
padding 0 10px padding 0 10px
.logo a { .logo a {
display flex display flex
color: currentColor;
} }
.box { .box {
position relative position relative
@ -77,9 +54,9 @@ a {
position absolute position absolute
display none display none
z-index 999 z-index 999
box-shadow 1px 1px 3px #ededed box-shadow 1px 1px 3px var(--color-theme-bg)
border 1px solid #d5d5d5 border 1px solid var(--color-header-border)
background #fff background var(--color-theme-bg)
min-width 100px min-width 100px
top 39px top 39px
width 100% width 100%
@ -95,9 +72,8 @@ a {
a { a {
display block display block
padding 2px 6px 2px 6px padding 2px 6px 2px 6px
color #555555
&:hover { &:hover {
background-color #f2f2f2 background-color var(--color-hover)
} }
.kw { .kw {
color #f00 color #f00
@ -120,8 +96,7 @@ a {
font-size 14px font-size 14px
font-weight bold font-weight bold
line-height 1.42857143 line-height 1.42857143
color #555 background-color: transparent;
background-color #fff
background-image none background-image none
border 1px solid $border-color border 1px solid $border-color
border-radius 5px 0 0 5px border-radius 5px 0 0 5px
@ -153,12 +128,10 @@ a {
cursor pointer cursor pointer
user-select none user-select none
background-image none background-image none
background-color #fff
border 1px solid transparent border 1px solid transparent
border-collapse separate border-collapse separate
border-radius 0 5px 5px 0 border-radius 0 5px 5px 0
border-color $border-color border-color $border-color
color #333
&:focus,&:active:focus { &:focus,&:active:focus {
outline thin dotted outline thin dotted
outline 5px auto -webkit-focus-ring-color outline 5px auto -webkit-focus-ring-color
@ -190,10 +163,9 @@ a {
.footer { .footer {
text-align center text-align center
padding-top 31px padding-top 31px
color #616161
font-size 14px font-size 14px
font-weight 300 font-weight 300
border-top 1px solid #efefef border-top 1px solid var(--color-header-border)
padding-bottom 50px; padding-bottom 50px;
padding 31px 6px 50px 6px padding 31px 6px 50px 6px
&.home { &.home {
@ -221,15 +193,15 @@ a {
width auto width auto
position fixed position fixed
width 100% width 100%
background #fff background var(--color-theme-bg)
backdrop-filter saturate(180%) blur(0.4rem) backdrop-filter saturate(180%) blur(0.4rem)
background-color hsla(0, 0%, 100%, .55) background-color var(--color-header-bg)
z-index 99 z-index 99
} }
.header_list { .header_list {
padding 10px 10px 10px 13px padding 10px 10px 10px 13px
border-bottom 1px solid #EEEEEE border-bottom 1px solid var(--color-header-border)
.logo { .logo {
padding-right 24px padding-right 24px
text-align left text-align left
@ -303,8 +275,6 @@ a {
.contributors { .contributors {
padding 79px 27px padding 79px 27px
max-width: 960px; 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-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;

19
template/styl/mixins/css.styl
View File

@ -1,19 +0,0 @@
.language-css,
.language-styl,
.language-less,
.language-scss,
.language-sass {
color: #005cc5;
.punctuation {
color: #24292e;
}
.selector {
color: #6749BA;
}
.property {
color: #005cc5;
}
.atrule {
color: #d73a49;
}
}

2
template/styl/mixins/markdown.styl
View File

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

5
template/styl/mixins/reset.styl
View File

@ -11,12 +11,9 @@ html {
} }
a { a {
text-decoration none text-decoration none
&:hover {
color #333
}
} }
* { * {
box-sizing border-box box-sizing border-box
} }
$border-color = #D5D5D5 $border-color = #8f8f8f7a

13
template/widget/search.ejs
View File

File diff suppressed because one or more lines are too long