PlexSheep
/
krata
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

feat: change TOC plugin to `tocbot` (#774)

This commit is contained in:
Cotes Chung 2023-03-16 02:56:54 +08:00
parent 474b4ba681
commit 02b7bd5095
No known key found for this signature in database
GPG Key ID: 0D9E54843167A808
13 changed files with 115 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_config.yml
View File

@ -82,7 +82,7 @@ img_cdn: "https://chirpy-img.netlify.app"
# the avatar on sidebar, support local or CORS resources # the avatar on sidebar, support local or CORS resources
avatar: "/commons/avatar.jpg" avatar: "/commons/avatar.jpg"
# boolean type, the global switch for ToC in posts. # boolean type, the global switch for TOC in posts.
toc: true toc: true
comments: comments:

6
_data/assets/cross_origin.yml
View File

@ -22,9 +22,9 @@ bootstrap:
css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
bootstrap-toc: toc:
css: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css css: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.css
js: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js js: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.js
fontawesome: fontawesome:
css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css

6
_data/assets/self_host.yml
View File

@ -11,9 +11,9 @@ bootstrap:
css: /assets/lib/bootstrap-4.6.1/bootstrap.min.css css: /assets/lib/bootstrap-4.6.1/bootstrap.min.css
js: /assets/lib/bootstrap-4.6.1/bootstrap.bundle.min.js js: /assets/lib/bootstrap-4.6.1/bootstrap.bundle.min.js
bootstrap-toc: toc:
css: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css css: /assets/lib/tocbot-4.20.1/tocbot.min.css
js: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js js: /assets/lib/tocbot-4.20.1/tocbot.min.js
fontawesome: fontawesome:
css: /assets/lib/fontawesome-free-6.2.1/css/all.min.css css: /assets/lib/fontawesome-free-6.2.1/css/all.min.css

2
_includes/head.html
View File

@ -97,7 +97,7 @@
<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}"> <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
{% if site.toc and page.toc %} {% if site.toc and page.toc %}
<link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap-toc.css | relative_url }}"> <link rel="stylesheet" href="{{ site.data.assets[origin].toc.css | relative_url }}">
{% endif %} {% endif %}
{% if page.layout == 'page' or page.layout == 'post' %} {% if page.layout == 'page' or page.layout == 'post' %}

12
_includes/toc.html
View File

@ -6,11 +6,11 @@
{% endif %} {% endif %}
{% if enable_toc %} {% if enable_toc %}
<!-- BS-toc.js will be loaded at medium priority --> <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
<script src="{{ site.data.assets[origin].bootstrap-toc.js | relative_url }}"></script> <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[site.lang].panel.toc -}}</div>
<nav id="toc"></nav>
</div>
<div id="toc-wrapper" class="pl-0 pr-4 mb-5"> <!-- toc.js will be loaded at medium priority -->
<div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[site.lang].panel.toc -}}</div> <script src="{{ site.data.assets[origin].toc.js | relative_url }}"></script>
<nav id="toc" data-toggle="toc"></nav>
</div>
{% endif %} {% endif %}

11
_javascript/modules/components/toc.js Normal file
View File

@ -0,0 +1,11 @@
export function toc() {
// see: https://github.com/tscanlin/tocbot#usage
tocbot.init({
tocSelector: '#toc',
contentSelector: '.post-content',
ignoreSelector: '[data-toc-skip]',
headingSelector: 'h2, h3',
orderedList: false,
scrollSmooth: false
});
}

1
_javascript/modules/plugins.js
View File

@ -4,3 +4,4 @@ export { imgExtra } from './components/img-extra';
export { initLocaleDatetime } from './components/locale-datetime'; export { initLocaleDatetime } from './components/locale-datetime';
export { initPageviews } from './components/pageviews'; export { initPageviews } from './components/pageviews';
export { smoothScroll } from './components/smooth-scroll'; export { smoothScroll } from './components/smooth-scroll';
export { toc } from './components/toc';

6
_javascript/post.js
View File

@ -4,7 +4,8 @@ import {
initLocaleDatetime, initLocaleDatetime,
initClipboard, initClipboard,
smoothScroll, smoothScroll,
initPageviews initPageviews,
toc
} from './modules/plugins'; } from './modules/plugins';
basic(); basic();
@ -13,5 +14,6 @@ initTopbar();
imgExtra(); imgExtra();
initLocaleDatetime(); initLocaleDatetime();
initClipboard(); initClipboard();
smoothScroll(); toc();
smoothScroll(); // must be called after toc is created
initPageviews(); initPageviews();

2
_layouts/default.html
View File

@ -18,7 +18,7 @@ layout: compress
{% include head.html %} {% include head.html %}
<body data-spy="scroll" data-target="#toc" data-topbar-visible="true"> <body data-topbar-visible="true">
{% include sidebar.html %} {% include sidebar.html %}

43
_sass/colors/dark-typography.scss
View File

@ -27,13 +27,12 @@
--checkbox-color: rgb(118, 120, 121); --checkbox-color: rgb(118, 120, 121);
--checkbox-checked-color: var(--link-color); --checkbox-checked-color: var(--link-color);
--img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%); --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
--shimmer-bg: --shimmer-bg: linear-gradient(
linear-gradient( 90deg,
90deg, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 0%, rgba(58, 55, 55, 0.4) 50%,
rgba(58, 55, 55, 0.4) 50%, rgba(255, 255, 255, 0) 100%
rgba(255, 255, 255, 0) 100% );
);
/* Sidebar */ /* Sidebar */
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
@ -117,16 +116,6 @@
border-color: var(--main-border-color); border-color: var(--main-border-color);
} }
/* posts' toc, override BS */
nav[data-toggle="toc"] .nav-link.active,
nav[data-toggle="toc"] .nav-link.active:focus,
nav[data-toggle="toc"] .nav-link.active:hover,
nav[data-toggle="toc"] .nav > li > a:focus,
nav[data-toggle="toc"] .nav > li > a:hover {
color: var(--toc-highlight) !important;
border-left-color: var(--toc-highlight) !important;
}
/* categories */ /* categories */
.categories.card, .categories.card,
.list-group-item { .list-group-item {
@ -151,20 +140,20 @@
} }
#archives li:nth-child(odd) { #archives li:nth-child(odd) {
background-image: background-image: linear-gradient(
linear-gradient( to left,
to left, rgb(26, 26, 30),
rgb(26, 26, 30), rgb(39, 39, 45),
rgb(39, 39, 45), rgb(39, 39, 45),
rgb(39, 39, 45), rgb(39, 39, 45),
rgb(39, 39, 45), rgb(26, 26, 30)
rgb(26, 26, 30) );
);
} }
color-scheme: dark; color-scheme: dark;
#disqus_thread { /* stylelint-disable-line selector-id-pattern */ /* stylelint-disable-next-line selector-id-pattern */
#disqus_thread {
color-scheme: none; color-scheme: none;
} }
} /* dark-scheme */ } /* dark-scheme */

22
_sass/colors/light-typography.scss
View File

@ -24,14 +24,17 @@
--btn-box-shadow: #eaeaea; --btn-box-shadow: #eaeaea;
--checkbox-color: #c5c5c5; --checkbox-color: #c5c5c5;
--checkbox-checked-color: #07a8f7; --checkbox-checked-color: #07a8f7;
--img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%); --img-bg: radial-gradient(
--shimmer-bg: circle,
linear-gradient( rgb(255, 255, 255) 0%,
90deg, rgb(249, 249, 249) 100%
rgba(250, 250, 250, 0) 0%, );
rgba(232, 230, 230, 1) 50%, --shimmer-bg: linear-gradient(
rgba(250, 250, 250, 0) 100% 90deg,
); rgba(250, 250, 250, 0) 0%,
rgba(232, 230, 230, 1) 50%,
rgba(250, 250, 250, 0) 100%
);
/* Sidebar */ /* Sidebar */
--sidebar-bg: #eeeeee; --sidebar-bg: #eeeeee;
@ -59,6 +62,7 @@
--pin-color: #999fa4; --pin-color: #999fa4;
/* Posts */ /* Posts */
--toc-highlight: #563d7c;
--btn-share-hover-color: var(--link-color); --btn-share-hover-color: var(--link-color);
--card-border-color: #f1f1f1; --card-border-color: #f1f1f1;
--card-box-shadow: rgba(234, 234, 234, 0.76); --card-box-shadow: rgba(234, 234, 234, 0.76);
@ -85,7 +89,7 @@
--prompt-danger-bg: rgb(248, 215, 218, 0.56); --prompt-danger-bg: rgb(248, 215, 218, 0.56);
--prompt-danger-icon-color: #df3c30; --prompt-danger-icon-color: #df3c30;
[class^="prompt-"] { [class^='prompt-'] {
--link-underline-color: rgb(219, 216, 216); --link-underline-color: rgb(219, 216, 216);
} }

72
_sass/layout/post.scss
View File

@ -17,7 +17,7 @@
} }
@mixin dot($pl: 0.25rem, $pr: 0.25rem) { @mixin dot($pl: 0.25rem, $pr: 0.25rem) {
content: "\2022"; content: '\2022';
padding-left: $pl; padding-left: $pl;
padding-right: $pr; padding-right: $pr;
} }
@ -91,6 +91,7 @@ h1 + .post-meta {
vertical-align: middle; vertical-align: middle;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
.share-icons { .share-icons {
@ -115,7 +116,7 @@ h1 + .post-meta {
&:hover { &:hover {
text-decoration: none; text-decoration: none;
>i { > i {
@extend %btn-share-hovor; @extend %btn-share-hovor;
} }
} }
@ -250,24 +251,58 @@ h1 + .post-meta {
transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out;
-webkit-animation: fade-up 0.8s; -webkit-animation: fade-up 0.8s;
animation: fade-up 0.8s; animation: fade-up 0.8s;
}
#toc { ul {
ul.nav.navbar-nav { list-style: none;
margin: 0.5rem 0; font-size: 0.85rem;
padding: 0; line-height: 1.25;
padding-left: 0;
li { li {
padding-top: 2px; &:not(:last-child) {
padding-bottom: 2px; margin: 0.4rem 0;
} }
}
}
nav[data-toggle="toc"] { a {
.nav { padding: 0.2rem 0 0.2rem 1.25rem;
.nav > li > a.active { }
font-weight: 600 !important; }
/* Overwrite TOC plugin style */
.toc-link {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
color: var(--toc-highlight);
text-decoration: none;
}
&::before {
display: none;
}
}
.is-active-link {
color: var(--toc-highlight) !important;
font-weight: 600;
&::before {
display: inline-block;
width: 1px;
left: -1px;
height: 1.25rem;
background-color: var(--toc-highlight) !important;
}
}
ul {
a {
padding-left: 2rem;
}
} }
} }
} }
@ -324,7 +359,8 @@ nav[data-toggle="toc"] {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
#disqus_thread { /* stylelint-disable-line selector-id-pattern */ /* stylelint-disable-next-line selector-id-pattern */
#disqus_thread {
min-height: 8.5rem; min-height: 8.5rem;
} }
} }
@ -337,7 +373,7 @@ nav[data-toggle="toc"] {
@include label(inherit, 400, inherit); @include label(inherit, 400, inherit);
&::after { &::after {
content: ":"; content: ':';
} }
} }

2
assets/lib

@ -1 +1 @@
Subproject commit e372141074f370c6f03b68b5264e7663f2b7477c Subproject commit ba49daf38b3abd1bfcec2a70b2ecc26ffcc4ce71