OpenSource/LoveIt
1
0
Fork 0
mirror of https://github.com/dillonzq/LoveIt.git synced 2025-04-12 00:37:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(code-block): refactor code block rendering logic based on hook and optimize code block style

Browse source
This commit is contained in:
Dillon 2025-02-22 17:48:02 +08:00
parent ba1ffd75bd
commit 177daff432
11 changed files with 475 additions and 510 deletions
assets
css
_page
_single.scss
_partial/_single
_code.scss_gist.scss
js
theme.js
layouts
_default/_markup
render-codeblock.html
partials
function
bool.htmldict.html
plugin
code-block.html
shortcodes
highlight.html
resources/_gen/assets/css
style.scss_1a67ae4ed98f18e3ea7da02d2ccd80c9.content
src/js
theme.js

46
assets/css/_page/_single.scss
View file

@ -167,7 +167,13 @@
}
}
.table-wrapper {
table {
width: 100%;
max-width: 100%;
margin: .625rem 0;
border-spacing: 0;
background: $table-background-color;
border-collapse: collapse;
overflow-x: auto;
&::-webkit-scrollbar {
@ -178,33 +184,24 @@
}
}
> table {
width: 100%;
max-width: 100%;
margin: .625rem 0;
border-spacing: 0;
background: $table-background-color;
border-collapse: collapse;
[theme=dark] & {
background: $table-background-color-dark;
}
thead {
background: $table-thead-color;
[theme=dark] & {
background: $table-background-color-dark;
background-color: $table-thead-color-dark;
}
}
thead {
background: $table-thead-color;
th, td {
padding: .3rem 1rem;
border: 1px solid darken($table-thead-color, 2%);
[theme=dark] & {
background-color: $table-thead-color-dark;
}
}
th, td {
padding: .3rem 1rem;
border: 1px solid darken($table-thead-color, 2%);
[theme=dark] & {
border-color: darken($table-thead-color-dark, 2%);
}
[theme=dark] & {
border-color: darken($table-thead-color-dark, 2%);
}
}
}
@ -264,6 +261,7 @@
}
@import "../_partial/_single/code";
@import "../_partial/_single/gist";
@import "../_partial/_single/instagram";
@import "../_partial/_single/admonition";
@import "../_partial/_single/echarts";
@ -313,7 +311,7 @@
img {
vertical-align: -12%;
max-height: 1.1em;
margin-right: 0ex;
margin-right: 0;
border-radius: 50%;
}
}

397
assets/css/_partial/_single/_code.scss
View file

@ -1,5 +1,5 @@
code {
display:inline-block;
display: inline-block;
max-width: 100%;
padding: 0 .4rem;
@include overflow-wrap(break-word);
@ -15,7 +15,7 @@ code {
pre {
margin: 0;
padding: .25rem 0 .25rem .5rem;
padding: 8px;
@include tab-size(4);
code {
@ -29,106 +29,51 @@ pre {
}
}
code, pre, .highlight table, .highlight tr, .highlight td {
background: $code-background-color !important;
code, pre {
background: $code-background-color;
[theme=dark] & {
background: $code-background-color-dark !important;
background: $code-background-color-dark;
}
}
.highlight {
font-family: var(--code-font-family);
font-size: var(--code-font-size);
.code-block {
line-height: 1.4em;
margin: .5rem 0;
.table-wrapper {
> table,
> table thead,
> table tr,
> table td {
margin: 0;
padding: 0;
border: none !important;
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
width: 100%;
font-family: var(--global-font-family);
font-weight: bold;
color: $code-info-color;
background: darken($code-background-color, 8%);
span.c {
white-space: nowrap;
}
[theme=dark] & {
color: $code-info-color-dark;
background: darken($code-background-color-dark, 6%);
}
}
> .chroma {
position: relative;
&:hover {
cursor: pointer;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
.code-title {
width: 100%;
font-family: var(--global-font-family);
font-weight: bold;
color: $code-info-color;
background: darken($code-background-color, 8%);
[theme=dark] & {
color: $code-info-color-dark;
background: darken($code-background-color-dark, 6%);
}
&:hover {
cursor: pointer;
}
.code-title {
width: 100%;
padding: .4rem;
}
.code-title::after {
padding-left: .2rem;
content: "Code";
}
@each $type, $text in $code-type-list {
&.#{$type} .code-title::after {
content: $text;
}
}
padding: .4rem;
}
.lntd:first-child {
min-width: 1.6rem;
text-align: right;
.code-title::after {
padding-left: .2rem;
content: "Code";
}
.lntd:last-child {
width: 100%;
pre {
@include max-content(min-width);
}
}
.ln {
padding-right: .75rem;
}
.hl {
display: block;
background-color: darken($code-background-color, 10%);
[theme=dark] & {
background-color: darken($code-background-color-dark, 5%);
}
}
.ln, .lnt {
color: $global-font-secondary-color;
[theme=dark] & {
color: $global-font-secondary-color-dark;
@each $type, $text in $code-type-list {
&.#{$type} .code-title::after {
content: $text;
}
}
@ -154,25 +99,57 @@ code, pre, .highlight table, .highlight tr, .highlight td {
}
}
}
}
.table-wrapper {
max-height: 0;
overflow-y: hidden;
@include details-transition-open;
.highlight {
position: relative;
max-height: 0;
overflow-y: hidden;
@include details-transition-open;
background: $code-background-color;
[theme=dark] & {
background: $code-background-color-dark;
}
&.open {
.code-header {
background: darken($code-background-color, 3%);
.hl {
background-color: darken($code-background-color, 10%);
[theme=dark] & {
background: darken($code-background-color-dark, 3%);
}
[theme=dark] & {
background-color: darken($code-background-color-dark, 5%);
}
}
.table-wrapper {
max-height: 10000px;
@include details-transition-close;
.c, /* Comment */
.ch /* CommentHashbang */,
.cm /* CommentMultiline */,
.c1 /* CommentSingle */,
.cs /* CommentSpecial */,
.cp /* CommentPreproc */,
.cpf /* CommentPreprocFile */ {
font-style: italic
}
.gl /* GenericUnderline */ {
text-decoration: underline
}
@each $class, $color in $code-highlight-color-map {
.#{$class} { color: $color; }
}
[theme=dark] & {
@each $class, $color in $code-highlight-color-map-dark {
.#{$class} { color: $color; }
}
}
}
&.open {
.code-header {
background: darken($code-background-color, 3%);
[theme=dark] & {
background: darken($code-background-color-dark, 3%);
}
.arrow {
@ -187,213 +164,29 @@ code, pre, .highlight table, .highlight tr, .highlight td {
display: inline;
}
}
}
/* Comment */ .c,
/* CommentHashbang */ .ch,
/* CommentMultiline */ .cm,
/* CommentSingle */ .c1,
/* CommentSpecial */ .cs,
/* CommentPreproc */ .cp,
/* CommentPreprocFile */ .cpf { font-style: italic }
/* GenericUnderline */ .gl { text-decoration: underline }
@each $class, $color in $code-highlight-color-map {
.#{$class} { color: $color; }
}
[theme=dark] & {
@each $class, $color in $code-highlight-color-map-dark {
.#{$class} { color: $color; }
}
}
}
.gist {
font-family: var(--code-font-family);
font-size: var(--code-font-size);
.table-wrapper {
> table,
> table thead,
> table tr,
> table td {
margin: 0;
padding: 0;
border: none !important;
}
}
.gist-file, .gist-data, .gist-meta {
border: none;
}
.gist-meta {
padding: .4rem .8rem;
background-color: darken($code-background-color, 5%);
@include link(false, false);
[theme=dark] & {
background-color: darken($code-background-color-dark, 5%);
}
}
[theme=dark] & {
// imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css
.highlight {
background: #141414;
max-height: 10000px;
@include details-transition-close;
}
.blob-num,
.blob-code-inner,
.highlight,
.pl-enm,
.pl-ko,
.pl-mo,
.pl-mp1 .pl-sf,
.pl-ms,
.pl-pdc1,
.pl-scp,
.pl-smc,
.pl-som,
.pl-va,
.pl-vpf,
.pl-vpu,
.pl-mdr {
color: #aab1bf;
}
.pl-mb,
.pl-pdb {
font-weight: 700;
}
.pl-c,
.pl-c span,
.pl-pdc {
color: #5b6270;
font-style: italic;
}
.pl-sr .pl-cce {
color: #56b5c2;
font-weight: 400;
}
.pl-ef,
.pl-en,
.pl-enf,
.pl-eoai,
.pl-kos,
.pl-mh .pl-pdh,
.pl-mr {
color: #61afef;
}
.pl-ens,
.pl-vi {
color: #be5046;
}
.pl-enti,
.pl-mai .pl-sf,
.pl-ml,
.pl-sf,
.pl-sr,
.pl-sr .pl-sra,
.pl-src,
.pl-st,
.pl-vo {
color: #56b5c2;
}
.pl-eoi,
.pl-mri,
.pl-pds,
.pl-pse .pl-s1,
.pl-s,
.pl-s1 {
color: #97c279;
}
.pl-k,
.pl-kolp,
.pl-mc,
.pl-pde {
color: #c578dd;
}
.pl-mi,
.pl-pdi {
color: #c578dd;
font-style: italic;
}
.pl-mp,
.pl-stp {
color: #818896;
}
.pl-mdh,
.pl-mdi,
.pl-mdr {
font-weight: 400;
}
.pl-mdht,
.pl-mi1 {
color: #97c279;
background: #020;
}
.pl-md,
.pl-mdhf {
color: #df6b75;
background: #200;
}
.pl-corl {
color: #df6b75;
text-decoration: underline;
}
.pl-ib {
background: #df6b75;
}
.pl-ii {
background: #e0c184;
color: #fff;
}
.pl-iu {
background: #e05151;
}
.pl-ms1 {
color: #aab1bf;
background: #373b41;
}
.pl-c1,
.pl-cn,
.pl-e,
.pl-eoa,
.pl-eoac,
.pl-eoac .pl-pde,
.pl-kou,
.pl-mm,
.pl-mp .pl-s3,
.pl-mq,
.pl-s3,
.pl-sok,
.pl-sv,
.pl-mb {
color: #d19965;
}
.pl-enc,
.pl-entc,
.pl-pse .pl-s2,
.pl-s2,
.pl-sc,
.pl-smp,
.pl-sr .pl-sre,
.pl-stj,
.pl-v,
.pl-pdb {
color: #e4bf7a;
}
.pl-ent,
.pl-entl,
.pl-entm,
.pl-mh,
.pl-pdv,
.pl-smi,
.pl-sol,
.pl-mdh,
.pl-mdi {
color: #df6b75;
}
&.code-line-numbers {
span.line::before {
display: inline-block;
counter-increment: code-block;
content: counter(code-block);
min-width: 4ch;
text-align: right;
text-wrap: nowrap;
box-sizing: border-box;
border-width: 0;
margin-right: 1rem;
color: $code-info-color;
[theme=dark] & {
color: $code-info-color-dark;
}
}
}
}

186
assets/css/_partial/_single/_gist.scss Normal file
View file

@ -0,0 +1,186 @@
.gist {
font-family: var(--code-font-family);
font-size: var(--code-font-size);
table,
table thead,
table tr,
table td {
margin: 0;
padding: 0;
border: none;
}
.gist-file, .gist-data, .gist-meta {
border: none;
}
.gist-meta {
padding: .4rem .8rem;
background-color: darken($code-background-color, 5%);
@include link(false, false);
[theme=dark] & {
background-color: darken($code-background-color-dark, 5%);
}
}
[theme=dark] & {
// imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css
.highlight {
background: #141414;
}
.blob-num,
.blob-code-inner,
.highlight,
.pl-enm,
.pl-ko,
.pl-mo,
.pl-mp1 .pl-sf,
.pl-ms,
.pl-pdc1,
.pl-scp,
.pl-smc,
.pl-som,
.pl-va,
.pl-vpf,
.pl-vpu,
.pl-mdr {
color: #aab1bf;
}
.pl-mb,
.pl-pdb {
font-weight: 700;
}
.pl-c,
.pl-c span,
.pl-pdc {
color: #5b6270;
font-style: italic;
}
.pl-sr .pl-cce {
color: #56b5c2;
font-weight: 400;
}
.pl-ef,
.pl-en,
.pl-enf,
.pl-eoai,
.pl-kos,
.pl-mh .pl-pdh,
.pl-mr {
color: #61afef;
}
.pl-ens,
.pl-vi {
color: #be5046;
}
.pl-enti,
.pl-mai .pl-sf,
.pl-ml,
.pl-sf,
.pl-sr,
.pl-sr .pl-sra,
.pl-src,
.pl-st,
.pl-vo {
color: #56b5c2;
}
.pl-eoi,
.pl-mri,
.pl-pds,
.pl-pse .pl-s1,
.pl-s,
.pl-s1 {
color: #97c279;
}
.pl-k,
.pl-kolp,
.pl-mc,
.pl-pde {
color: #c578dd;
}
.pl-mi,
.pl-pdi {
color: #c578dd;
font-style: italic;
}
.pl-mp,
.pl-stp {
color: #818896;
}
.pl-mdh,
.pl-mdi,
.pl-mdr {
font-weight: 400;
}
.pl-mdht,
.pl-mi1 {
color: #97c279;
background: #020;
}
.pl-md,
.pl-mdhf {
color: #df6b75;
background: #200;
}
.pl-corl {
color: #df6b75;
text-decoration: underline;
}
.pl-ib {
background: #df6b75;
}
.pl-ii {
background: #e0c184;
color: #fff;
}
.pl-iu {
background: #e05151;
}
.pl-ms1 {
color: #aab1bf;
background: #373b41;
}
.pl-c1,
.pl-cn,
.pl-e,
.pl-eoa,
.pl-eoac,
.pl-eoac .pl-pde,
.pl-kou,
.pl-mm,
.pl-mp .pl-s3,
.pl-mq,
.pl-s3,
.pl-sok,
.pl-sv,
.pl-mb {
color: #d19965;
}
.pl-enc,
.pl-entc,
.pl-pse .pl-s2,
.pl-s2,
.pl-sc,
.pl-smp,
.pl-sr .pl-sre,
.pl-stj,
.pl-v,
.pl-pdb {
color: #e4bf7a;
}
.pl-ent,
.pl-entl,
.pl-entm,
.pl-mh,
.pl-pdv,
.pl-smi,
.pl-sol,
.pl-mdh,
.pl-mdi {
color: #df6b75;
}
}
}

216
assets/js/theme.js
View file

@ -485,71 +485,38 @@ var Theme = /*#__PURE__*/function () {
}, {
key: "initHighlight",
value: function initHighlight() {
var _this5 = this;
Util.forEach(document.querySelectorAll('.code-block'), function ($codeBlock) {
var $codeTitle = $codeBlock.querySelector('.code-header > .code-title');
Util.forEach(document.querySelectorAll('.highlight > pre.chroma'), function ($preChroma) {
var $chroma = document.createElement('div');
$chroma.className = $preChroma.className;
var $table = document.createElement('table');
$chroma.appendChild($table);
var $tbody = document.createElement('tbody');
$table.appendChild($tbody);
var $tr = document.createElement('tr');
$tbody.appendChild($tr);
var $td = document.createElement('td');
$tr.appendChild($td);
$preChroma.parentElement.replaceChild($chroma, $preChroma);
$td.appendChild($preChroma);
});
Util.forEach(document.querySelectorAll('.highlight > .chroma'), function ($chroma) {
var $codeElements = $chroma.querySelectorAll('pre.chroma > code');
if ($codeElements.length) {
var $code = $codeElements[$codeElements.length - 1];
var $header = document.createElement('div');
$header.className = 'code-header ' + $code.className.toLowerCase();
var $title = document.createElement('span');
$title.classList.add('code-title');
$title.insertAdjacentHTML('afterbegin', '<i class="arrow fas fa-chevron-right fa-fw" aria-hidden="true"></i>');
$title.addEventListener('click', function () {
$chroma.classList.toggle('open');
if ($codeTitle) {
$codeTitle.addEventListener('click', function () {
$codeBlock.classList.toggle('open');
}, false);
$header.appendChild($title);
var $ellipses = document.createElement('span');
$ellipses.insertAdjacentHTML('afterbegin', '<i class="fas fa-ellipsis-h fa-fw" aria-hidden="true"></i>');
$ellipses.classList.add('ellipses');
$ellipses.addEventListener('click', function () {
$chroma.classList.add('open');
}, false);
$header.appendChild($ellipses);
var $copy = document.createElement('span');
$copy.insertAdjacentHTML('afterbegin', '<i class="far fa-copy fa-fw" aria-hidden="true"></i>');
$copy.classList.add('copy');
var code = $code.innerText;
if (_this5.config.code.maxShownLines > 0 && code.split('\n').length < _this5.config.code.maxShownLines + 2) $chroma.classList.add('open');
if (_this5.config.code.copyTitle) {
$copy.setAttribute('data-clipboard-text', code);
$copy.title = _this5.config.code.copyTitle;
var clipboard = new ClipboardJS($copy);
clipboard.on('success', function (_e) {
Util.animateCSS($code, 'animate__flash');
});
$header.appendChild($copy);
}
$chroma.insertBefore($header, $chroma.firstChild);
}
});
}
}, {
key: "initTable",
value: function initTable() {
Util.forEach(document.querySelectorAll('.content table'), function ($table) {
var $wrapper = document.createElement('div');
$wrapper.className = 'table-wrapper';
$table.parentElement.replaceChild($wrapper, $table);
$wrapper.appendChild($table);
var $ellipses = $codeBlock.querySelector('.code-header .ellipses');
if ($ellipses) {
$ellipses.addEventListener('click', function () {
$codeBlock.classList.toggle('open');
}, false);
}
var $copy = $codeBlock.querySelector('.code-header .copy');
if ($copy) {
var $code = $codeBlock.querySelector('code');
$copy.setAttribute('data-clipboard-text', $code.innerText);
var clipboard = new ClipboardJS($copy);
var $codeLines = $code.querySelectorAll('span.cl');
clipboard.on('success', function (_e) {
if ($codeLines) {
Util.forEach($codeLines, function ($codeLine) {
return Util.animateCSS($codeLine, 'animate__flash');
});
}
});
}
});
}
}, {
@ -565,7 +532,7 @@ var Theme = /*#__PURE__*/function () {
}, {
key: "initToc",
value: function initToc() {
var _this6 = this;
var _this5 = this;
var $tocCore = document.getElementById('TableOfContents');
if ($tocCore === null) return;
@ -607,10 +574,10 @@ var Theme = /*#__PURE__*/function () {
var maxTocTop = footerTop - $toc.getBoundingClientRect().height;
var maxScrollTop = maxTocTop - TOP_SPACING + (headerIsFixed ? 0 : headerHeight);
if (_this6.newScrollTop < minScrollTop) {
if (_this5.newScrollTop < minScrollTop) {
$toc.style.position = 'absolute';
$toc.style.top = "".concat(minTocTop, "px");
} else if (_this6.newScrollTop > maxScrollTop) {
} else if (_this5.newScrollTop > maxScrollTop) {
$toc.style.position = 'absolute';
$toc.style.top = "".concat(maxTocTop, "px");
} else {
@ -661,7 +628,7 @@ var Theme = /*#__PURE__*/function () {
}, {
key: "initMermaid",
value: function initMermaid() {
var _this7 = this;
var _this6 = this;
this._mermaidOnSwitchTheme = this._mermaidOnSwitchTheme || function () {
var $mermaidElements = document.getElementsByClassName('mermaid');
@ -669,11 +636,11 @@ var Theme = /*#__PURE__*/function () {
if ($mermaidElements.length) {
mermaid.initialize({
startOnLoad: false,
theme: _this7.isDark ? 'dark' : 'neutral',
theme: _this6.isDark ? 'dark' : 'neutral',
securityLevel: 'loose'
});
Util.forEach($mermaidElements, function ($mermaid) {
mermaid.render('svg-' + $mermaid.id, _this7.data[$mermaid.id], function (svgCode) {
mermaid.render('svg-' + $mermaid.id, _this6.data[$mermaid.id], function (svgCode) {
$mermaid.innerHTML = svgCode;
}, $mermaid);
});
@ -687,27 +654,27 @@ var Theme = /*#__PURE__*/function () {
}, {
key: "initEcharts",
value: function initEcharts() {
var _this8 = this;
var _this7 = this;
if (this.config.echarts) {
echarts.registerTheme('light', this.config.echarts.lightTheme);
echarts.registerTheme('dark', this.config.echarts.darkTheme);
this._echartsOnSwitchTheme = this._echartsOnSwitchTheme || function () {
_this8._echartsArr = _this8._echartsArr || [];
_this7._echartsArr = _this7._echartsArr || [];
for (var i = 0; i < _this8._echartsArr.length; i++) {
_this8._echartsArr[i].dispose();
for (var i = 0; i < _this7._echartsArr.length; i++) {
_this7._echartsArr[i].dispose();
}
_this8._echartsArr = [];
_this7._echartsArr = [];
Util.forEach(document.getElementsByClassName('echarts'), function ($echarts) {
var chart = echarts.init($echarts, _this8.isDark ? 'dark' : 'light', {
var chart = echarts.init($echarts, _this7.isDark ? 'dark' : 'light', {
renderer: 'svg'
});
chart.setOption(JSON.parse(_this8.data[$echarts.id]));
chart.setOption(JSON.parse(_this7.data[$echarts.id]));
_this8._echartsArr.push(chart);
_this7._echartsArr.push(chart);
});
};
@ -716,8 +683,8 @@ var Theme = /*#__PURE__*/function () {
this._echartsOnSwitchTheme();
this._echartsOnResize = this._echartsOnResize || function () {
for (var i = 0; i < _this8._echartsArr.length; i++) {
_this8._echartsArr[i].resize();
for (var i = 0; i < _this7._echartsArr.length; i++) {
_this7._echartsArr[i].resize();
}
};
@ -727,30 +694,30 @@ var Theme = /*#__PURE__*/function () {
}, {
key: "initMapbox",
value: function initMapbox() {
var _this9 = this;
var _this8 = this;
if (this.config.mapbox) {
mapboxgl.accessToken = this.config.mapbox.accessToken;
mapboxgl.setRTLTextPlugin(this.config.mapbox.RTLTextPlugin);
this._mapboxArr = this._mapboxArr || [];
Util.forEach(document.getElementsByClassName('mapbox'), function ($mapbox) {
var _this9$data$$mapbox$i = _this9.data[$mapbox.id],
lng = _this9$data$$mapbox$i.lng,
lat = _this9$data$$mapbox$i.lat,
zoom = _this9$data$$mapbox$i.zoom,
lightStyle = _this9$data$$mapbox$i.lightStyle,
darkStyle = _this9$data$$mapbox$i.darkStyle,
marked = _this9$data$$mapbox$i.marked,
navigation = _this9$data$$mapbox$i.navigation,
geolocate = _this9$data$$mapbox$i.geolocate,
scale = _this9$data$$mapbox$i.scale,
fullscreen = _this9$data$$mapbox$i.fullscreen;
var _this8$data$$mapbox$i = _this8.data[$mapbox.id],
lng = _this8$data$$mapbox$i.lng,
lat = _this8$data$$mapbox$i.lat,
zoom = _this8$data$$mapbox$i.zoom,
lightStyle = _this8$data$$mapbox$i.lightStyle,
darkStyle = _this8$data$$mapbox$i.darkStyle,
marked = _this8$data$$mapbox$i.marked,
navigation = _this8$data$$mapbox$i.navigation,
geolocate = _this8$data$$mapbox$i.geolocate,
scale = _this8$data$$mapbox$i.scale,
fullscreen = _this8$data$$mapbox$i.fullscreen;
var mapbox = new mapboxgl.Map({
container: $mapbox,
center: [lng, lat],
zoom: zoom,
minZoom: .2,
style: _this9.isDark ? darkStyle : lightStyle,
style: _this8.isDark ? darkStyle : lightStyle,
attributionControl: false
});
@ -782,16 +749,16 @@ var Theme = /*#__PURE__*/function () {
mapbox.addControl(new MapboxLanguage());
_this9._mapboxArr.push(mapbox);
_this8._mapboxArr.push(mapbox);
});
this._mapboxOnSwitchTheme = this._mapboxOnSwitchTheme || function () {
Util.forEach(_this9._mapboxArr, function (mapbox) {
Util.forEach(_this8._mapboxArr, function (mapbox) {
var $mapbox = mapbox.getContainer();
var _this9$data$$mapbox$i2 = _this9.data[$mapbox.id],
lightStyle = _this9$data$$mapbox$i2.lightStyle,
darkStyle = _this9$data$$mapbox$i2.darkStyle;
mapbox.setStyle(_this9.isDark ? darkStyle : lightStyle);
var _this8$data$$mapbox$i2 = _this8.data[$mapbox.id],
lightStyle = _this8$data$$mapbox$i2.lightStyle,
darkStyle = _this8$data$$mapbox$i2.darkStyle;
mapbox.setStyle(_this8.isDark ? darkStyle : lightStyle);
mapbox.addControl(new MapboxLanguage());
});
};
@ -802,7 +769,7 @@ var Theme = /*#__PURE__*/function () {
}, {
key: "initTypeit",
value: function initTypeit() {
var _this10 = this;
var _this9 = this;
if (this.config.typeit) {
var typeitConfig = this.config.typeit;
@ -813,7 +780,7 @@ var Theme = /*#__PURE__*/function () {
var typeone = function typeone(i) {
var id = group[i];
new TypeIt("#".concat(id), {
strings: _this10.data[id],
strings: _this9.data[id],
speed: speed,
lifeLike: true,
cursorSpeed: cursorSpeed,
@ -840,7 +807,7 @@ var Theme = /*#__PURE__*/function () {
}, {
key: "initComment",
value: function initComment() {
var _this11 = this;
var _this10 = this;
if (this.config.comment) {
if (this.config.comment.gitalk) {
@ -867,7 +834,7 @@ var Theme = /*#__PURE__*/function () {
this._utterancesOnSwitchTheme = this._utterancesOnSwitchTheme || function () {
var message = {
type: 'set-theme',
theme: _this11.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme
theme: _this10.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme
};
var iframe = document.querySelector('.utterances-frame');
iframe.contentWindow.postMessage(message, 'https://utteranc.es');
@ -899,7 +866,7 @@ var Theme = /*#__PURE__*/function () {
this._giscusOnSwitchTheme = this._giscusOnSwitchTheme || function () {
var message = {
setConfig: {
theme: _this11.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme,
theme: _this10.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme,
reactionsEnabled: false
}
};
@ -922,7 +889,7 @@ var Theme = /*#__PURE__*/function () {
}, {
key: "onScroll",
value: function onScroll() {
var _this12 = this;
var _this11 = this;
var $headers = [];
if (document.body.getAttribute('data-header-desktop') === 'auto') $headers.push(document.getElementById('header-desktop'));
@ -939,8 +906,8 @@ var Theme = /*#__PURE__*/function () {
var ACCURACY = 20,
MINIMUM = 100;
window.addEventListener('scroll', function () {
_this12.newScrollTop = Util.getScrollTop();
var scroll = _this12.newScrollTop - _this12.oldScrollTop;
_this11.newScrollTop = Util.getScrollTop();
var scroll = _this11.newScrollTop - _this11.oldScrollTop;
var isMobile = Util.isMobile();
Util.forEach($headers, function ($header) {
if (scroll > ACCURACY) {
@ -952,7 +919,7 @@ var Theme = /*#__PURE__*/function () {
}
});
if (_this12.newScrollTop > MINIMUM) {
if (_this11.newScrollTop > MINIMUM) {
if (isMobile && scroll > ACCURACY) {
$fixedButtons.classList.remove('animate__fadeIn');
Util.animateCSS($fixedButtons, ['animate__fadeOut', 'animate__faster'], true);
@ -970,7 +937,7 @@ var Theme = /*#__PURE__*/function () {
$fixedButtons.style.display = 'none';
}
var _iterator2 = _createForOfIteratorHelper(_this12.scrollEventSet),
var _iterator2 = _createForOfIteratorHelper(_this11.scrollEventSet),
_step2;
try {
@ -984,20 +951,20 @@ var Theme = /*#__PURE__*/function () {
_iterator2.f();
}
_this12.oldScrollTop = _this12.newScrollTop;
_this11.oldScrollTop = _this11.newScrollTop;
}, false);
}
}, {
key: "onResize",
value: function onResize() {
var _this13 = this;
var _this12 = this;
window.addEventListener('resize', function () {
if (!_this13._resizeTimeout) {
_this13._resizeTimeout = window.setTimeout(function () {
_this13._resizeTimeout = null;
if (!_this12._resizeTimeout) {
_this12._resizeTimeout = window.setTimeout(function () {
_this12._resizeTimeout = null;
var _iterator3 = _createForOfIteratorHelper(_this13.resizeEventSet),
var _iterator3 = _createForOfIteratorHelper(_this12.resizeEventSet),
_step3;
try {
@ -1011,11 +978,11 @@ var Theme = /*#__PURE__*/function () {
_iterator3.f();
}
_this13.initToc();
_this12.initToc();
_this13.initMermaid();
_this12.initMermaid();
_this13.initSearch();
_this12.initSearch();
}, 100);
}
}, false);
@ -1023,10 +990,10 @@ var Theme = /*#__PURE__*/function () {
}, {
key: "onClickMask",
value: function onClickMask() {
var _this14 = this;
var _this13 = this;
document.getElementById('mask').addEventListener('click', function () {
var _iterator4 = _createForOfIteratorHelper(_this14.clickMaskEventSet),
var _iterator4 = _createForOfIteratorHelper(_this13.clickMaskEventSet),
_step4;
try {
@ -1046,7 +1013,7 @@ var Theme = /*#__PURE__*/function () {
}, {
key: "init",
value: function init() {
var _this15 = this;
var _this14 = this;
try {
this.initRaw();
@ -1058,7 +1025,6 @@ var Theme = /*#__PURE__*/function () {
this.initDetails();
this.initLightGallery();
this.initHighlight();
this.initTable();
this.initHeaderLink();
this.initMath();
this.initMermaid();
@ -1071,15 +1037,15 @@ var Theme = /*#__PURE__*/function () {
}
window.setTimeout(function () {
_this15.initToc();
_this14.initToc();
_this15.initComment();
_this14.initComment();
_this15.onScroll();
_this14.onScroll();
_this15.onResize();
_this14.onResize();
_this15.onClickMask();
_this14.onClickMask();
}, 100);
}
}]);

1
layouts/_default/_markup/render-codeblock.html Normal file
View file

@ -0,0 +1 @@
{{- dict "Content" .Inner "Lang" .Type "Options" .Options | partial "plugin/code-block.html" -}}

18
layouts/partials/function/bool.html Normal file
View file

@ -0,0 +1,18 @@
{{- /* To Bool */ -}}
{{- $bool := . -}}
{{- if eq . true -}}
{{- $bool = true -}}
{{- else if eq . false -}}
{{- $bool = false -}}
{{- else if eq . "true" -}}
{{- $bool = true -}}
{{- else if eq . "false" -}}
{{- $bool = false -}}
{{- else if eq . "1" -}}
{{- $bool = true -}}
{{- else if eq . "0" -}}
{{- $bool = false -}}
{{- end -}}
{{- return $bool -}}

14
layouts/partials/function/dict.html Normal file
View file

@ -0,0 +1,14 @@
{{- /* To Dict */ -}}
{{- /* "a=1, b=2" -> dict "a" "1" "b" "2" */ -}}
{{- $dict := dict -}}
{{- if reflect.IsMap . -}}
{{- $dict = . -}}
{{- else -}}
{{- range split . "," -}}
{{- $parts := split (trim . " ") "=" -}}
{{- $dict = dict (index $parts 0) (delimit (after 1 $parts) "") | merge $dict -}}
{{- end -}}}
{{- end -}}
{{- return $dict -}}

17
layouts/partials/plugin/code-block.html Normal file
View file

@ -0,0 +1,17 @@
{{- $content := .Content -}}
{{- $lang := .Lang -}}
{{- $options := dict "lineNoStart" 1 "lineNos" true -}}
{{- $options = .Options | partial "function/dict.html" | merge $options -}}
{{- $lineNoStart := $options.lineNoStart | int -}}
{{- $lineNos := $options.lineNos | partial "function/bool.html" -}}
{{- $options = dict "noClasses" false "lineNos" false | merge $options -}}
{{- $result := transform.Highlight $content $lang $options -}}
<div class="code-block{{ if $lineNos }} code-line-numbers{{ end }} open" style="counter-reset: code-block {{ sub $lineNoStart 1 }}">
<div class="code-header language-bash">
<span class="code-title"><i class="arrow fas fa-chevron-right fa-fw" aria-hidden="true"></i></span>
<span class="ellipses"><i class="fas fa-ellipsis-h fa-fw" aria-hidden="true"></i></span>
<span class="copy" title="{{ T "copyToClipboard" }}"><i class="far fa-copy fa-fw" aria-hidden="true"></i></span>
</div>
{{- $result -}}
</div>

7
layouts/shortcodes/highlight.html Normal file
View file

@ -0,0 +1,7 @@
{{- $content := trim .InnerDeindent "\n\r" -}}
{{- $lang := .Get 0 -}}
{{- $options := "" -}}
{{- if len .Params | eq 2 -}}
{{- $options = .Get 1 -}}
{{- end -}}
{{- dict "Content" $content "Lang" $lang "Options" $options | partial "plugin/code-block.html" -}}

2
resources/_gen/assets/css/style.scss_1a67ae4ed98f18e3ea7da02d2ccd80c9.content
View file

File diff suppressed because one or more lines are too long

81
src/js/theme.js
View file

@ -347,65 +347,31 @@ class Theme {
}
initHighlight() {
Util.forEach(document.querySelectorAll('.highlight > pre.chroma'), $preChroma => {
const $chroma = document.createElement('div');
$chroma.className = $preChroma.className;
const $table = document.createElement('table');
$chroma.appendChild($table);
const $tbody = document.createElement('tbody');
$table.appendChild($tbody);
const $tr = document.createElement('tr');
$tbody.appendChild($tr);
const $td = document.createElement('td');
$tr.appendChild($td);
$preChroma.parentElement.replaceChild($chroma, $preChroma);
$td.appendChild($preChroma);
});
Util.forEach(document.querySelectorAll('.highlight > .chroma'), $chroma => {
const $codeElements = $chroma.querySelectorAll('pre.chroma > code');
if ($codeElements.length) {
const $code = $codeElements[$codeElements.length - 1];
const $header = document.createElement('div');
$header.className = 'code-header ' + $code.className.toLowerCase();
const $title = document.createElement('span');
$title.classList.add('code-title');
$title.insertAdjacentHTML('afterbegin', '<i class="arrow fas fa-chevron-right fa-fw" aria-hidden="true"></i>');
$title.addEventListener('click', () => {
$chroma.classList.toggle('open');
Util.forEach(document.querySelectorAll('.code-block'), $codeBlock => {
const $codeTitle = $codeBlock.querySelector('.code-header > .code-title');
if ($codeTitle) {
$codeTitle.addEventListener('click', () => {
$codeBlock.classList.toggle('open');
}, false);
$header.appendChild($title);
const $ellipses = document.createElement('span');
$ellipses.insertAdjacentHTML('afterbegin', '<i class="fas fa-ellipsis-h fa-fw" aria-hidden="true"></i>');
$ellipses.classList.add('ellipses');
$ellipses.addEventListener('click', () => {
$chroma.classList.add('open');
}, false);
$header.appendChild($ellipses);
const $copy = document.createElement('span');
$copy.insertAdjacentHTML('afterbegin', '<i class="far fa-copy fa-fw" aria-hidden="true"></i>');
$copy.classList.add('copy');
const code = $code.innerText;
if (this.config.code.maxShownLines > 0 && code.split('\n').length < this.config.code.maxShownLines + 2) $chroma.classList.add('open');
if (this.config.code.copyTitle) {
$copy.setAttribute('data-clipboard-text', code);
$copy.title = this.config.code.copyTitle;
const clipboard = new ClipboardJS($copy);
clipboard.on('success', _e => {
Util.animateCSS($code, 'animate__flash');
});
$header.appendChild($copy);
}
$chroma.insertBefore($header, $chroma.firstChild);
}
});
}
initTable() {
Util.forEach(document.querySelectorAll('.content table'), $table => {
const $wrapper = document.createElement('div');
$wrapper.className = 'table-wrapper';
$table.parentElement.replaceChild($wrapper, $table);
$wrapper.appendChild($table);
const $ellipses = $codeBlock.querySelector('.code-header .ellipses');
if ($ellipses) {
$ellipses.addEventListener('click', () => {
$codeBlock.classList.toggle('open');
}, false);
}
const $copy = $codeBlock.querySelector('.code-header .copy');
if ($copy) {
const $code = $codeBlock.querySelector('code');
$copy.setAttribute('data-clipboard-text', $code.innerText);
const clipboard = new ClipboardJS($copy);
const $codeLines = $code.querySelectorAll('span.cl');
clipboard.on('success', _e => {
if ($codeLines) {
Util.forEach($codeLines, $codeLine => Util.animateCSS($codeLine, 'animate__flash'))
}
});
}
});
}
@ -769,7 +735,6 @@ class Theme {
this.initDetails();
this.initLightGallery();
this.initHighlight();
this.initTable();
this.initHeaderLink();
this.initMath();
this.initMermaid();