Skip to content

Commit 0802e96

Browse files
jaywcjlovejaywcjlove
committed
website: add dark theme.
1 parent 2c3e9f0 commit 0802e96

File tree

10 files changed

+37
-93
lines changed

10 files changed

+37
-93
lines changed

‎build/build.mjs‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ const contributorsPath = path.resolve(process.cwd(), 'CONTRIBUTORS.svg');
2424
await FS.ensureDir(path.resolve(deployDir, 'c'));
2525
await FS.copySync(faviconPath, path.resolve(deployDir, 'img', 'favicon.ico'));
2626

27-
await FS.copyFile(path.resolve(process.cwd(), 'template', 'js', 'copy-to-clipboard.js'), path.resolve(deployDir, 'js', 'copy-to-clipboard.js'))
27+
await FS.copyFile(path.resolve(process.cwd(), 'template', 'js', 'copy-to-clipboard.js'), path.resolve(deployDir, 'js', 'copy-to-clipboard.js'));
28+
await FS.copyFile(path.resolve(process.cwd(), 'node_modules/@wcj/dark-mode/main.js'), path.resolve(deployDir, 'js', 'dark-mode.min.js'));
29+
await FS.copyFile(path.resolve(process.cwd(), 'node_modules/@uiw/github-corners/lib/index.js'), path.resolve(deployDir, 'js', 'github-corners.js'));
2830

2931
const jsData = await FS.readFileSync(rootIndexJSPath);
3032
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');
214216
}
215217

216218
function markdownToHTML(str) {
217-
return create({ markdown: str, document: undefined });
219+
return create({ markdown: str, document: undefined, 'dark-mode': false });
218220
}
219221

220222
/**
@@ -226,13 +228,12 @@ function markdownToHTML(str) {
226228
return new Promise((resolve, reject) => {
227229
try {
228230
const stylStr = FS.readFileSync(stylPath, 'utf8');
229-
const stylMD = FS.readFileSync(path.resolve('node_modules/markdown-to-html-cli/github.css'), 'utf8');
230231
stylus(stylStr.toString())
231232
.set('filename', stylPath)
232233
.set('compress', true)
233234
.render((err, css) => {
234235
if (err) throw err;
235-
resolve(`${stylMD.replace(/\n/, '')}\n${css}`);
236+
resolve(`${css}`);
236237
});
237238
} catch (err) {
238239
reject(err);

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,13 @@
2525
"url": "git+https://github.com/jaywcjlove/linux-command.git"
2626
},
2727
"devDependencies": {
28+
"@uiw/github-corners": "~1.5.11",
29+
"@wcj/dark-mode": "~1.0.14",
2830
"archiver": "~5.3.0",
2931
"colors-cli": "~1.0.28",
3032
"ejs": "~3.1.6",
3133
"fs-extra": "~10.0.1",
32-
"markdown-to-html-cli": "~3.2.5",
34+
"markdown-to-html-cli": "~3.4.1",
3335
"sitemap-generator": "~8.5.1",
3436
"sqlite3": "~5.0.2",
3537
"stylus": "~0.56.0",

‎template/contributors.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<h1>Contributors</h1>
55
<div><%-describe.contributors ? describe.contributors : '' %></div>
66
<p>
7-
数据来源于 <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>创建。
7+
数据来源于 <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>创建。
88
</p>
99
</div>
1010
<%- include('widget/footer',{type: "list"}); %>

‎template/list.ejs‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<%- include('partial/header'); %>
22
<%- include('widget/search',{type: "list"}); %>
3-
43
<div class="search_list">
54
<ul id="search_list_result">
65
<!-- <li>

‎template/partial/header.ejs‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,8 @@
1010
<title><%=describe.n?describe.n+'':''%> 命令，Linux <%=describe.n?describe.n+'':''%> 命令详解：<%=describe.d?describe.d+' - ':''%> Linux 命令搜索引擎</title>
1111
<link rel="shortcut icon" href="<%=relative_path%>img/favicon.ico">
1212
<link rel="stylesheet" type="text/css" href="<%=relative_path%>css/index.css?v=<%=new Date().getTime()%>">
13+
<script type="module" src="<%=relative_path%>js/dark-mode.min.js"></script>
14+
<script type="module" src="<%=relative_path%>js/github-corners.js"></script>
1315
</head>
14-
<body>
16+
<body>
17+
<dark-mode permanent dark="Dark" light="Light" style="position: fixed;left: 10px;top: 8px; z-index: 999;"></dark-mode>

‎template/styl/index.styl‎

Lines changed: 20 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,19 @@
11
@import('mixins/reset.styl')
2-
@import('mixins/css.styl')
32
@import('mixins/markdown.styl')
43

54
mq-mobile = "screen and (max-width: 479px)"
65

7-
a.github-corner {
8-
position: fixed
9-
z-index: 9999
10-
top: 0
11-
right: 0
12-
&:hover {
13-
.octo-arm{
14-
animation: octocat-wave 560ms ease-in-out
15-
}
16-
}
17-
svg {
18-
fill #f1f1f1
19-
color #000
20-
position absolute
21-
top 0
22-
border 0
23-
right 0
24-
z-index 99
25-
width 70px
26-
height 70px
27-
@media mq-mobile {
28-
width 46px
29-
height 46px
30-
}
31-
}
6+
[data-color-mode*='dark'], [data-color-mode*='dark'] body {
7+
color-scheme: dark;
8+
--color-header-bg: #3a3a3a8f;
9+
--color-header-border: #323232;
10+
--color-hover: #ffffff30;
3211
}
33-
a {
34-
transition: all .2s ease-in
35-
}
36-
37-
@keyframes octocat-wave{
38-
0%,100%{-webkit-transform:rotate(0);transform:rotate(0)}
39-
20%,60%{-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}
40-
40%,80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}
12+
[data-color-mode*='light'], [data-color-mode*='light'] body {
13+
color-scheme: light;
14+
--color-header-bg: #ffffff52;
15+
--color-header-border: #d3d3d3;
16+
--color-hover: #f2f2f2;
4117
}
4218

4319
.warpper {
@@ -56,6 +32,7 @@ a {
5632
padding 0 10px
5733
.logo a {
5834
display flex
35+
color: currentColor;
5936
}
6037
.box {
6138
position relative
@@ -77,9 +54,9 @@ a {
7754
position absolute
7855
display none
7956
z-index 999
80-
box-shadow 1px 1px 3px #ededed
81-
border 1px solid #d5d5d5
82-
background #fff
57+
box-shadow 1px 1px 3px var(--color-theme-bg)
58+
border 1px solid var(--color-header-border)
59+
background var(--color-theme-bg)
8360
min-width 100px
8461
top 39px
8562
width 100%
@@ -95,9 +72,8 @@ a {
9572
a {
9673
display block
9774
padding 2px 6px 2px 6px
98-
color #555555
9975
&:hover {
100-
background-color #f2f2f2
76+
background-color var(--color-hover)
10177
}
10278
.kw {
10379
color #f00
@@ -120,8 +96,7 @@ a {
12096
font-size 14px
12197
font-weight bold
12298
line-height 1.42857143
123-
color #555
124-
background-color #fff
99+
background-color: transparent;
125100
background-image none
126101
border 1px solid $border-color
127102
border-radius 5px 0 0 5px
@@ -153,12 +128,10 @@ a {
153128
cursor pointer
154129
user-select none
155130
background-image none
156-
background-color #fff
157131
border 1px solid transparent
158132
border-collapse separate
159133
border-radius 0 5px 5px 0
160134
border-color $border-color
161-
color #333
162135
&:focus,&:active:focus {
163136
outline thin dotted
164137
outline 5px auto -webkit-focus-ring-color
@@ -190,10 +163,9 @@ a {
190163
.footer {
191164
text-align center
192165
padding-top 31px
193-
color #616161
194166
font-size 14px
195167
font-weight 300
196-
border-top 1px solid #efefef
168+
border-top 1px solid var(--color-header-border)
197169
padding-bottom 50px;
198170
padding 31px 6px 50px 6px
199171
&.home {
@@ -221,15 +193,15 @@ a {
221193
width auto
222194
position fixed
223195
width 100%
224-
background #fff
196+
background var(--color-theme-bg)
225197
backdrop-filter saturate(180%) blur(0.4rem)
226-
background-color hsla(0, 0%, 100%, .55)
198+
background-color var(--color-header-bg)
227199
z-index 99
228200
}
229201

230202
.header_list {
231203
padding 10px 10px 10px 13px
232-
border-bottom 1px solid #EEEEEE
204+
border-bottom 1px solid var(--color-header-border)
233205
.logo {
234206
padding-right 24px
235207
text-align left
@@ -303,8 +275,6 @@ a {
303275
.contributors {
304276
padding 79px 27px
305277
max-width: 960px;
306-
color: #24292f;
307-
background-color: #ffffff;
308278
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
309279
font-size: 16px;
310280
line-height: 1.5;

‎template/styl/mixins/css.styl‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎template/styl/mixins/markdown.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ mq-mobile = "screen and (max-width: 479px)"
1515
height 13px
1616
vertical-align middle
1717
width 1px
18-
border-left 1px solid #dfdfdf
1918
margin -1px 0 0 0
2019
}
2120
a {
@@ -38,6 +37,7 @@ mq-mobile = "screen and (max-width: 479px)"
3837
}
3938

4039
.markdown-body {
40+
margin: 0 auto 0 auto;
4141
margin-top: 0 !important;
4242
padding 90px 35px 30px 35px
4343
max-width 980px

‎template/styl/mixins/reset.styl‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,9 @@ html {
1111
}
1212
a {
1313
text-decoration none
14-
&:hover {
15-
color #333
16-
}
1714
}
1815
* {
1916
box-sizing border-box
2017
}
2118

22-
$border-color = #D5D5D5
19+
$border-color = #8f8f8f7a

‎template/widget/search.ejs‎

Lines changed: 2 additions & 11 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)