15308555518/ mirror-web
1
0
Fork 0
mirror of https://github.com/tuna/mirror-web.git synced 2025-12-25 20:32:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

extract style from help pages

This commit is contained in:
Miao Wang 2024-04-08 15:19:34 +08:00
parent d6821ab71b
commit 5496373a19
8 changed files with 253 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_src/entrypoints/helpz.js
View File

@ -1,4 +1,5 @@
import './help'
import '../styles/helpz.scss'
import hljs from 'highlight.js';
import {mirrorId} from '../lib/mirrorid'
import Mustache from 'mustache'

176
_src/styles/help.scss Normal file
View File

@ -0,0 +1,176 @@
@use "./utils.scss" as utils;
@include utils.noissue {
.highlight {
.c { color: #998; font-style: italic } // Comment
.err { color: #a61717; background-color: #e3d2d2 } // Error
.k { font-weight: bold } // Keyword
.o { font-weight: bold } // Operator
.cm { color: #998; font-style: italic } // Comment.Multiline
.cp { color: #999; font-weight: bold } // Comment.Preproc
.c1 { color: #998; font-style: italic } // Comment.Single
.cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
.gd { color: #000; background-color: #fdd } // Generic.Deleted
.gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
.ge { font-style: italic } // Generic.Emph
.gr { color: #a00 } // Generic.Error
.gh { color: #999 } // Generic.Heading
.gi { color: #000; background-color: #dfd } // Generic.Inserted
.gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
.go { color: #888 } // Generic.Output
.gp { color: #555 } // Generic.Prompt
.gs { font-weight: bold } // Generic.Strong
.gu { color: #aaa } // Generic.Subheading
.gt { color: #a00 } // Generic.Traceback
.kc { font-weight: bold } // Keyword.Constant
.kd { font-weight: bold } // Keyword.Declaration
.kp { font-weight: bold } // Keyword.Pseudo
.kr { font-weight: bold } // Keyword.Reserved
.kt { color: #458; font-weight: bold } // Keyword.Type
.m { color: #099 } // Literal.Number
.s { color: #d14 } // Literal.String
.na { color: #008080 } // Name.Attribute
.nb { color: #0086B3 } // Name.Builtin
.nc { color: #458; font-weight: bold } // Name.Class
.no { color: #008080 } // Name.Constant
.ni { color: #800080 } // Name.Entity
.ne { color: #900; font-weight: bold } // Name.Exception
.nf { color: #900; font-weight: bold } // Name.Function
.nn { color: #555 } // Name.Namespace
.nt { color: #000080 } // Name.Tag
.nv { color: #008080 } // Name.Variable
.ow { font-weight: bold } // Operator.Word
.w { color: #bbb } // Text.Whitespace
.mf { color: #099 } // Literal.Number.Float
.mh { color: #099 } // Literal.Number.Hex
.mi { color: #099 } // Literal.Number.Integer
.mo { color: #099 } // Literal.Number.Oct
.sb { color: #d14 } // Literal.String.Backtick
.sc { color: #d14 } // Literal.String.Char
.sd { color: #d14 } // Literal.String.Doc
.s2 { color: #d14 } // Literal.String.Double
.se { color: #d14 } // Literal.String.Escape
.sh { color: #d14 } // Literal.String.Heredoc
.si { color: #d14 } // Literal.String.Interpol
.sx { color: #d14 } // Literal.String.Other
.sr { color: #009926 } // Literal.String.Regex
.s1 { color: #d14 } // Literal.String.Single
.ss { color: #990073 } // Literal.String.Symbol
.bp { color: #999 } // Name.Builtin.Pseudo
.vc { color: #008080 } // Name.Variable.Class
.vg { color: #008080 } // Name.Variable.Global
.vi { color: #008080 } // Name.Variable.Instance
.il { color: #099 } // Literal.Number.Integer.Long
}
.hljs-comment { color: #998; font-style: italic } // Comment
.hljs-keyword { font-weight: bold } // Keyword
.hljs-operator { font-weight: bold } // Operator
.hljs-deletion { color: #000; background-color: #fdd } // Generic.Deleted
.hljs-emphasis { font-style: italic } // Generic.Emph
.hljs-meta.prompt { color: #555 } // Generic.Prompt
.hljs-strong { font-weight: bold } // Generic.Strong
.hljs-section { color: #458; font-weight: bold } // Generic.Heading
.hljs-variable.constant { font-weight: bold } // Keyword.Constant
.hljs-params { font-weight: bold } // Keyword.Declaration
.hljs-type { color: #458; font-weight: bold } // Keyword.Type
.hljs-number { color: #099 } // Literal.Number
.hljs-string { color: #d14 } // Literal.String
.hljs-attr, .hljs-attribute { color: #008080 } // Name.Attribute
.hljs-built_in { color: #0086B3 } // Name.Builtin
.hljs-title.class { color: #458; font-weight: bold } // Name.Class
.hljs-title.function { color: #900; font-weight: bold } // Name.Function
.hljs-tag { color: #000080 } // Name.Tag
.hljs-variable { color: #008080 } // Name.Variable
}
@include utils.dark{
.highlight {
.hll { background-color: #272822; }
.c { color: #75715e } /* Comment */
.err { color: #960050; background-color: #1e0010 } /* Error */
.k { color: #66d9ef } /* Keyword */
.l { color: #ae81ff } /* Literal */
.n { color: #f8f8f2 } /* Name */
.o { color: #f92672 } /* Operator */
.p { color: #f8f8f2 } /* Punctuation */
.cm { color: #75715e } /* Comment.Multiline */
.cp { color: #75715e } /* Comment.Preproc */
.c1 { color: #75715e } /* Comment.Single */
.cs { color: #75715e } /* Comment.Special */
.ge { font-style: italic } /* Generic.Emph */
.gs { font-weight: bold } /* Generic.Strong */
.kc { color: #66d9ef } /* Keyword.Constant */
.kd { color: #66d9ef } /* Keyword.Declaration */
.kn { color: #f92672 } /* Keyword.Namespace */
.kp { color: #66d9ef } /* Keyword.Pseudo */
.kr { color: #66d9ef } /* Keyword.Reserved */
.kt { color: #66d9ef } /* Keyword.Type */
.ld { color: #e6db74 } /* Literal.Date */
.m { color: #ae81ff } /* Literal.Number */
.s { color: #e6db74 } /* Literal.String */
.na { color: #a6e22e } /* Name.Attribute */
.nb { color: #f8f8f2 } /* Name.Builtin */
.nc { color: #a6e22e } /* Name.Class */
.no { color: #66d9ef } /* Name.Constant */
.nd { color: #a6e22e } /* Name.Decorator */
.ni { color: #f8f8f2 } /* Name.Entity */
.ne { color: #a6e22e } /* Name.Exception */
.nf { color: #a6e22e } /* Name.Function */
.nl { color: #f8f8f2 } /* Name.Label */
.nn { color: #f8f8f2 } /* Name.Namespace */
.nx { color: #a6e22e } /* Name.Other */
.py { color: #f8f8f2 } /* Name.Property */
.nt { color: #f92672 } /* Name.Tag */
.nv { color: #f8f8f2 } /* Name.Variable */
.ow { color: #f92672 } /* Operator.Word */
.w { color: #f8f8f2 } /* Text.Whitespace */
.mf { color: #ae81ff } /* Literal.Number.Float */
.mh { color: #ae81ff } /* Literal.Number.Hex */
.mi { color: #ae81ff } /* Literal.Number.Integer */
.mo { color: #ae81ff } /* Literal.Number.Oct */
.sb { color: #e6db74 } /* Literal.String.Backtick */
.sc { color: #e6db74 } /* Literal.String.Char */
.sd { color: #e6db74 } /* Literal.String.Doc */
.s2 { color: #e6db74 } /* Literal.String.Double */
.se { color: #ae81ff } /* Literal.String.Escape */
.sh { color: #e6db74 } /* Literal.String.Heredoc */
.si { color: #e6db74 } /* Literal.String.Interpol */
.sx { color: #e6db74 } /* Literal.String.Other */
.sr { color: #e6db74 } /* Literal.String.Regex */
.s1 { color: #e6db74 } /* Literal.String.Single */
.ss { color: #e6db74 } /* Literal.String.Symbol */
.bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.vc { color: #f8f8f2 } /* Name.Variable.Class */
.vg { color: #f8f8f2 } /* Name.Variable.Global */
.vi { color: #f8f8f2 } /* Name.Variable.Instance */
.il { color: #ae81ff } /* Literal.Number.Integer.Long */
.gh { } /* Generic Heading & Diff Header */
.gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
.gd { color: #f92672; background-color: inherit;} /* Generic.Deleted & Diff Deleted */
.gi { color: #a6e22e; background-color: inherit;} /* Generic.Inserted & Diff Inserted */
.gd .x {background-color: inherit;}
.gi .x {background-color: inherit;}
}
.hljs-comment { color: #75715e } // Comment
.hljs-keyword { color: #66d9ef } // Keyword
.hljs-operator { color: #f92672 } // Operator
.hljs-deletion { color: #f92672; } // Generic.Deleted
.hljs-emphasis { font-style: italic } // Generic.Emph
.hljs-strong { font-weight: bold } // Generic.Strong
.hljs-section { color: #66d9ef } // Keyword
.hljs-variable.constant { color: #66d9ef } // Keyword.Constant
.hljs-params { color: #66d9ef } // Keyword.Declaration
.hljs-type { color: #66d9ef } // Keyword.Type
.hljs-number { color: #ae81ff } // Literal.Number
.hljs-string { color: #e6db74 } // Literal.String
.hljs-attr, .hljs-attribute { color: #a6e22e } // Name.Attribute
.hljs-built_in { color: #f8f8f2 } // Name.Builtin
.hljs-title.class { color: #a6e22e } // Name.Class
.hljs-title.function { color: #a6e22e } // Name.Function
.hljs-tag { color: #f92672 } // Name.Tag
.hljs-variable { color: #f8f8f2 } // Name.Variable
}

3
_src/styles/helpz.scss Normal file
View File

@ -0,0 +1,3 @@
.z-help pre.z-tmpl {
display: none;
}

17
_src/styles/utils.scss Normal file
View File

@ -0,0 +1,17 @@
@use "sass:map";
@mixin dark {
@if map.get(jekyll-config(), "issue") {
@content
} @else {
@media (prefers-color-scheme: dark) {
@content
}
}
};
@mixin noissue {
@if map.get(jekyll-config(), "issue") {
} @else {
@content
}
};

14
_vite.config.mjs
View File

@ -4,6 +4,9 @@ import vue from '@vitejs/plugin-vue'
import ruby from 'vite-plugin-ruby'
import components from 'unplugin-vue-components/vite'
import legacy from '@vitejs/plugin-legacy'
import {toSass} from 'sass-cast'
const exposedData = ['config', 'data', 'categories'];
const jekyllData = Object.fromEntries(exposedData.map((key) => [key, JSON.parse(process.env[`site_${key}`] || '{}')]));
@ -64,4 +67,15 @@ export default defineConfig(({mode})=>({
targets: [],
}),
],
css: {
preprocessorOptions: {
scss: {
functions: {
"jekyll-config()": function(){
return toSass(jekyllData.config);
}
}
},
},
}
}))

41
package-lock.json generated
View File

@ -7,7 +7,11 @@
"devDependencies": {
"@vitejs/plugin-legacy": "^5.3.2",
"@vitejs/plugin-vue": "^5.0.4",
"highlight.js": "^11.9.0",
"markup-js": "^1.5.21",
"mustache": "^4.2.0",
"sass": "^1.74.1",
"sass-cast": "^0.5.6",
"terser": "^5.30.3",
"unplugin-vue-components": "^0.26.0",
"vite": "^5.2.8",
@ -3043,6 +3047,15 @@
"node": ">= 0.4"
}
},
"node_modules/highlight.js": {
"version": "11.9.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
"integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
"dev": true,
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/immutable": {
"version": "4.3.5",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
@ -3172,6 +3185,15 @@
"node": ">=12"
}
},
"node_modules/markup-js": {
"version": "1.5.21",
"resolved": "https://registry.npmjs.org/markup-js/-/markup-js-1.5.21.tgz",
"integrity": "sha512-qeUHSSwdXkcdGJv/Gd8s5l9jLEWIW5NwXDMkGkW8V1TSckB5IOdpZ/eIVzfiAOnAJU0brrSwVx6K2Ie86KGIXg==",
"dev": true,
"bin": {
"markup-js": "src/markup.js"
}
},
"node_modules/meow": {
"version": "13.2.0",
"resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
@ -3227,6 +3249,15 @@
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
},
"node_modules/mustache": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
"integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
"dev": true,
"bin": {
"mustache": "bin/mustache"
}
},
"node_modules/nanoid": {
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@ -3516,6 +3547,16 @@
"node": ">=14.0.0"
}
},
"node_modules/sass-cast": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/sass-cast/-/sass-cast-0.5.6.tgz",
"integrity": "sha512-m0XnLu3AFJZu7UCemuG0wa2kGJPNzJ6lTYSK3ajzLBFZyNINSNMXhxPK0JCJ4mity0GSOlcfUk5N7Xirrb5SRQ==",
"dev": true,
"peerDependencies": {
"immutable": ">=4.0.0",
"sass": "^1.45.2"
}
},
"node_modules/semver": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",

1
package.json
View File

@ -9,6 +9,7 @@
"markup-js": "^1.5.21",
"mustache": "^4.2.0",
"sass": "^1.74.1",
"sass-cast": "^0.5.6",
"terser": "^5.30.3",
"unplugin-vue-components": "^0.26.0",
"vite": "^5.2.8",

1
static/css/style.scss
View File

@ -44,7 +44,6 @@ $color-mode-type: media-query;
@import
"_bootstrap/bootstrap",
"Lato",
"syntax-highlighting",
"_spinners/3-wave";
{% unless site.issue %}