Skip to content

Commit 1a55f30

Browse files
XecadesXecades
committed
chore: add breadcrumb, fix bugs, add anchor support
1 parent 58dba53 commit 1a55f30

File tree

10 files changed

+181
-258
lines changed

10 files changed

+181
-258
lines changed

‎docs/misc/test/customToken.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ $$
6565
```
6666
::
6767

68-
6968
---
7069

7170
## Icon
@@ -88,7 +87,6 @@ The *magic spell* :arrow-up: :arrow-up: :arrow-down: :arrow-down: :arrow-left: :
8887
```
8988
::
9089

91-
9290
---
9391

9492
## 引言
@@ -134,7 +132,6 @@ e ^ {i \pi} + 1 = 0
134132
$$
135133
::
136134

137-
138135
---
139136

140137
## Note
@@ -197,7 +194,6 @@ $\text{P} \neq \text{NP}$
197194
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
198195
::
199196

200-
201197
---
202198

203199
## 折叠面板

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { ref } from "vue";
2+
import { nextTick, onMounted, ref } from "vue";
33
import { useRoute } from "vue-router";
44
import { get_leftbar_status } from "@/assets/ts/leftbar";
55
import { get_rightbar_status } from "@/assets/ts/rightbar";

‎src/assets/ts/fontawesome.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,11 @@ import {
99
faBoxArchive,
1010
faCaretLeft,
1111
faCaretRight,
12-
faChevronLeft,
12+
faChevronRight,
1313
faCode,
1414
faCube,
1515
faExclamationCircle,
1616
faExclamationTriangle,
17-
faEye,
1817
faFaceFrown,
1918
faFile,
2019
faFlag,
@@ -23,7 +22,6 @@ import {
2322
faLightbulb,
2423
faLink,
2524
faMagnifyingGlass,
26-
faSpinner,
2725
faXmark,
2826
} from "@fortawesome/free-solid-svg-icons";
2927
import { faStar } from "@fortawesome/free-regular-svg-icons";
@@ -50,11 +48,9 @@ library.add(
5048
faArrowUpRightFromSquare,
5149
faStar,
5250
faGithub,
53-
faSpinner,
54-
faChevronLeft,
51+
faChevronRight,
5552
faCode,
5653
faAtom,
5754
faBoxArchive,
58-
faFlag,
59-
faEye
55+
faFlag
6056
);

‎src/assets/ts/rightbar.ts‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -46,21 +46,6 @@ export const normalize_toc = (toc: MarkdownHeaderJsx[]): HeaderRef[] => {
4646
}));
4747
};
4848

49-
/**
50-
* Navigate to the element with the given ID.
51-
*
52-
* @param id - ID of the element to navigate to
53-
* @param offset - Offset from the top of the element, default to -4rem
54-
*/
55-
export const navigate = (id: string, offset: number = -4 * 16) => {
56-
let el = document.getElementById(id);
57-
if (el) {
58-
const y = el.getBoundingClientRect().top + window.scrollY + offset;
59-
60-
window.scrollTo({ top: y, behavior: "smooth" });
61-
}
62-
};
63-
6449
/**
6550
* Scroll listener class for rightbar.
6651
*/

‎src/assets/ts/utils.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,22 @@ export const loadJS = (src: string): Promise<unknown> =>
5353
export const sleep = (ms: number) =>
5454
new Promise<void>((res) => setTimeout(res, ms));
5555

56+
/**
57+
* Navigate to the element with the given ID.
58+
*
59+
* @param id - ID of the element to navigate to
60+
* @param offset - Offset from the top of the element, default to -4rem
61+
*/
62+
export const navigate = (id: string, offset: number = -4 * 16) => {
63+
let el = document.getElementById(id);
64+
if (el) {
65+
const y = el.getBoundingClientRect().top + window.scrollY + offset;
66+
67+
window.scrollTo({ top: y, behavior: "smooth" });
68+
history.pushState(null, "", `#${id}`);
69+
}
70+
};
71+
5672
/** The screen width of a small screen. */
5773
export const SMALL_SCREEN_WIDTH: number = 768;
5874

‎src/components/Comment.vue‎

Lines changed: 109 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -22,137 +22,115 @@ onMounted(async () => {
2222
</div>
2323
</template>
2424

25-
<style>
26-
#comment {
27-
--border-color: #eaeaea;
28-
--input-color: #888;
29-
--owo-background-color: #fff;
25+
<style lang="stylus">
26+
@import "../assets/css/global.styl";
27+
28+
#comment
29+
scheme(--border-color, #eaeaea, #2c2c2c);
30+
scheme(--input-color, #666, #b0b1b5);
31+
scheme(--owo-background-color, #fff, #1f1f1f);
3032
3133
margin: 0 var(--margin-lr) 7rem;
32-
}
33-
34-
@media (prefers-color-scheme: dark) {
35-
#comment {
36-
--border-color: #2c2c2c;
37-
--input-color: #b0b1b5;
38-
--owo-background-color: #1f1f1f;
39-
}
40-
}
41-
42-
#twikoo .OwO .OwO-body {
43-
background-color: var(--owo-background-color);
44-
}
45-
46-
#twikoo .tk-extras {
47-
display: none;
48-
}
49-
50-
#twikoo .tk-input textarea {
51-
padding: 0.7rem 1rem;
52-
min-height: 170px !important;
53-
background: none !important;
54-
resize: none;
55-
border: 0;
56-
}
57-
58-
#twikoo .tk-nick-link {
59-
margin-right: 0.3rem;
60-
}
61-
62-
#twikoo .tk-actions a {
63-
color: #777;
64-
}
65-
66-
#twikoo .tk-actions {
67-
font-size: 0.8rem;
68-
}
69-
70-
#twikoo .tk-comment {
71-
margin-bottom: 1rem;
72-
}
73-
74-
#twikoo .tk-comments-title {
75-
font-size: 1.1rem;
76-
font-weight: normal;
77-
}
78-
79-
#twikoo .tk-avatar {
80-
border-radius: 50%;
81-
margin-right: 0.7rem;
82-
}
83-
84-
#twikoo .tk-content {
85-
max-height: unset;
86-
font-size: 16px;
87-
}
88-
89-
#twikoo .tk-time {
90-
margin-left: 0.5rem;
91-
font-size: 0.8rem;
92-
color: #bebebe;
93-
}
94-
95-
#twikoo .tk-footer {
96-
display: none;
97-
}
98-
99-
#twikoo .tk-preview-container {
100-
overflow-wrap: break-word;
101-
}
102-
103-
#twikoo .tk-submit .tk-col {
104-
border: 1px solid var(--border-color);
105-
border-radius: 4px;
106-
}
107-
108-
#twikoo .tk-meta-input {
109-
margin: 0;
110-
padding: 0.4rem 0;
111-
border-bottom: 1px solid var(--border-color);
112-
}
113-
114-
#twikoo .tk-meta-input .el-input {
115-
width: auto;
116-
margin: 0;
117-
}
118-
119-
#twikoo .tk-meta-input .el-input-group__append,
120-
#twikoo .tk-meta-input .el-input-group__prepend {
121-
background-color: transparent;
122-
border: none;
123-
border-radius: 0;
124-
padding-right: 0.2rem;
125-
}
126-
127-
#twikoo .tk-meta-input .el-input__inner {
128-
border-radius: 0;
129-
border: none;
130-
padding-left: 0.2rem;
131-
color: var(--input-color);
132-
}
133-
134-
#twikoo .tk-panel .tk-content a:not(.button) {
135-
color: #409eff;
136-
}
137-
138-
#twikoo .tk-panel .tk-content code {
139-
color: #333;
140-
}
141-
142-
#twikoo .tk-panel .tk-content blockquote {
143-
color: #fff;
144-
}
145-
146-
#twikoo pre::-webkit-scrollbar {
147-
width: 0 !important;
148-
height: 0 !important;
149-
}
150-
151-
#twikoo a {
152-
text-decoration: none;
153-
}
154-
155-
#twikoo .tk-content a {
156-
color: #999;
157-
}
34+
35+
.OwO .OwO-body
36+
background-color: var(--owo-background-color);
37+
38+
.tk-extras
39+
display: none;
40+
41+
.tk-input textarea
42+
padding: 0.7rem 1rem;
43+
min-height: 170px !important;
44+
background-size: 200px;
45+
background-repeat: no-repeat;
46+
background-position: right;
47+
background-color: transparent;
48+
background-position-x: calc(100% - 1rem);
49+
resize: none;
50+
transition: background-position-y 0.2s ease-in-out 0s;
51+
border: 0;
52+
53+
&:focus
54+
background-position-y: calc(100% + 200px);
55+
56+
.tk-nick-link
57+
margin-right: 0.3rem;
58+
59+
.tk-actions
60+
font-size: 0.8rem;
61+
62+
a
63+
color: #777;
64+
65+
.tk-comment
66+
margin-bottom: 1rem;
67+
68+
.tk-comments-title
69+
font-size: 1.1rem;
70+
font-weight: normal;
71+
72+
.tk-avatar
73+
border-radius: 50%;
74+
margin-right: 0.7rem;
75+
76+
.tk-content
77+
max-height: unset;
78+
font-size: 16px;
79+
80+
.tk-time
81+
margin-left: 0.5rem;
82+
font-size: 0.8rem;
83+
color: #bebebe;
84+
85+
.tk-footer
86+
display: none;
87+
88+
.tk-preview-container
89+
overflow-wrap: break-word;
90+
91+
.tk-submit .tk-col
92+
border: 1px solid var(--border-color);
93+
border-radius: 4px;
94+
95+
.tk-meta-input
96+
margin: 0;
97+
padding: 0.4rem 0;
98+
border-bottom: 1px solid var(--border-color);
99+
100+
.el-input
101+
width: auto;
102+
margin: 0;
103+
104+
.el-input-group__append,
105+
.el-input-group__prepend
106+
background-color: transparent;
107+
border: none;
108+
border-radius: 0;
109+
padding-right: 0.2rem;
110+
111+
.el-input__inner
112+
border-radius: 0;
113+
border: none;
114+
padding-left: 0.2rem;
115+
color: var(--input-color);
116+
117+
.tk-panel .tk-content
118+
a:not(.button)
119+
color: #409eff;
120+
121+
code
122+
color: #333;
123+
124+
blockquote
125+
color: #fff;
126+
127+
a
128+
color: #999;
129+
130+
pre::-webkit-scrollbar
131+
width: 0 !important;
132+
height: 0 !important;
133+
134+
a
135+
text-decoration: none;
158136
</style>

0 commit comments

Comments
 (0)