mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-16 20:21:22 +08:00
feat: add jest cheatsheet.
This commit is contained in:
jaywcjlove
@ -4,6 +4,7 @@ import rehypeFormat from 'rehype-format';
|
||||
import { rehypeUrls } from './nodes/rehypeUrls.mjs';
|
||||
import { htmlTagAddAttri } from './nodes/htmlTagAddAttri.mjs';
|
||||
import { footer } from './nodes/footer.mjs';
|
||||
import { header } from './nodes/header.mjs';
|
||||
|
||||
/** 标记 Number */
|
||||
function panelAddNumber(arr = [], result = []) {
|
||||
@ -113,25 +114,30 @@ export function getTocsTree(arr = [], result = []) {
|
||||
}
|
||||
|
||||
export function create(str = '', options = {}) {
|
||||
let title = str.match(/[^===]+(?=[===])/g);
|
||||
let description = str.match(/\n==={1,}\n+([\s\S]*?)\n/g);
|
||||
title = title[0] || '';
|
||||
description = (description[0] || '').replace(/^\n[=\n]+/, '').replace(/\[([\s\S]*?)?\]\(([\s\S]*?)?\)/g, '$1').replace(/\n/, '');
|
||||
const mdOptions = {
|
||||
hastNode: false,
|
||||
remarkPlugins: [],
|
||||
rehypePlugins: [
|
||||
rehypeFormat,
|
||||
[rehypeDocument, {
|
||||
title: "Quick Reference",
|
||||
title: `${title ? `${title} & ` : ''} Quick Reference`,
|
||||
css: [ ...options.css ],
|
||||
meta: [
|
||||
{ description: '为开发人员分享快速参考备忘单。' },
|
||||
{ description: `${description}为开发人员分享快速参考备忘单。` },
|
||||
{ keywords: 'Quick,Reference' }
|
||||
]
|
||||
}],
|
||||
],
|
||||
rewrite: (node, index, parent) => {
|
||||
htmlTagAddAttri(node);
|
||||
htmlTagAddAttri(node, options);
|
||||
rehypeUrls(node);
|
||||
if (node.type === 'element' && node.tagName === 'body') {
|
||||
node.children = getTocsTree([ ...node.children ]);
|
||||
node.children.unshift(header(options));
|
||||
node.children.push(footer());
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,13 +15,18 @@ async function createHTML(files = [], num = 0) {
|
||||
return;
|
||||
}
|
||||
++num;
|
||||
const githubURL = `https://github.com/jaywcjlove/reference/blob/main/${path.relative(process.cwd(), dataFile.path).replace(path.sep, '/')}`;
|
||||
|
||||
const mdstr = await fs.readFile(dataFile.path);
|
||||
const htmlPath = path.relative(DOCS, dataFile.path);
|
||||
const outputHTMLPath = path.resolve(OUTOUT, 'docs', htmlPath).replace(/README.md$/i, 'index.html').replace(/.md$/, '.html');
|
||||
|
||||
await fs.ensureDir(path.dirname(outputHTMLPath));
|
||||
|
||||
const html = create(mdstr.toString(), {
|
||||
isHome: /README.md$/.test(path.relative(process.cwd(), dataFile.path)),
|
||||
githubURL,
|
||||
homePath: path.relative(path.dirname(outputHTMLPath), path.resolve(OUTOUT, 'index.html')),
|
||||
css: [path.relative(path.dirname(outputHTMLPath), CSS_OUTPUT_PATH)]
|
||||
});
|
||||
await fs.writeFile(outputHTMLPath, html);
|
||||
|
||||
82
scripts/nodes/header.mjs
Normal file
82
scripts/nodes/header.mjs
Normal file
@ -0,0 +1,82 @@
|
||||
import { logo, github, editor } from './logo.mjs';
|
||||
|
||||
export function header({ homePath, githubURL = '' }) {
|
||||
const data = [
|
||||
{
|
||||
href: githubURL,
|
||||
target: '__blank',
|
||||
label: '编辑',
|
||||
children: [editor]
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/jaywcjlove/reference',
|
||||
target: '__blank',
|
||||
children: [github]
|
||||
}
|
||||
]
|
||||
return {
|
||||
type: 'element',
|
||||
tagName: 'nav',
|
||||
properties: {
|
||||
class: 'header-nav',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: {
|
||||
class: ['max-container'],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'a',
|
||||
properties: {
|
||||
href: homePath,
|
||||
class: ['logo'],
|
||||
},
|
||||
children: logo,
|
||||
},
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: {
|
||||
class: ['menu'],
|
||||
},
|
||||
children: data.map(({ href, label, children = [], ...props }) => {
|
||||
const childs = {
|
||||
type: 'element',
|
||||
tagName: 'a',
|
||||
properties: { href, class: [], ...props },
|
||||
children: [
|
||||
...children,
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'span',
|
||||
properties: {},
|
||||
children: label ? [
|
||||
{ type: 'text', value: label }
|
||||
] : []
|
||||
}
|
||||
]
|
||||
}
|
||||
if (label) {
|
||||
childs.children = [...children, {
|
||||
type: 'element',
|
||||
tagName: 'span',
|
||||
properties: {},
|
||||
children: [
|
||||
{ type: 'text', value: label }
|
||||
]
|
||||
}];
|
||||
} else {
|
||||
childs.children = children;
|
||||
}
|
||||
return childs
|
||||
}),
|
||||
},
|
||||
],
|
||||
}
|
||||
],
|
||||
};
|
||||
}
|
||||
@ -1,5 +1,8 @@
|
||||
export function htmlTagAddAttri(node) {
|
||||
export function htmlTagAddAttri(node, { isHome }) {
|
||||
if (node && node.tagName === 'html') {
|
||||
node.properties['data-color-mode'] = 'dark';
|
||||
}
|
||||
if (node && node.tagName === 'body' && isHome) {
|
||||
node.properties.class = ['home'];
|
||||
}
|
||||
}
|
||||
99
scripts/nodes/logo.mjs
Normal file
99
scripts/nodes/logo.mjs
Normal file
@ -0,0 +1,99 @@
|
||||
export const logo = [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'svg',
|
||||
properties: {
|
||||
viewBox: "0 0 24 24",
|
||||
fill: "none",
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
height: "1em",
|
||||
width: "1em"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
opacity: ".5",
|
||||
d: "m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z",
|
||||
fill: "white"
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
d: "M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" ,
|
||||
fill: "#cbd5e1"
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
d: "M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z",
|
||||
fill: "#292D32"
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'span',
|
||||
properties: {
|
||||
class: ['title'],
|
||||
},
|
||||
children: [
|
||||
{ type: 'text', value: 'Quick Reference' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export const github = {
|
||||
type: 'element',
|
||||
tagName: 'svg',
|
||||
properties: {
|
||||
viewBox: "0 0 16 16",
|
||||
fill: "currentColor",
|
||||
height: "1em",
|
||||
width: "1em"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
export const editor = {
|
||||
type: 'element',
|
||||
tagName: 'svg',
|
||||
properties: {
|
||||
viewBox: "0 0 36 36",
|
||||
fill: "currentColor",
|
||||
height: "1em",
|
||||
width: "1em"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
d: "m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
fill: 'none',
|
||||
d: "M0 0h36v36H0z",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
export function rehypeUrls(node) {
|
||||
if (node.type === 'element' && node.properties.href && /.md/.test(node.properties.href)) {
|
||||
if (node.type === 'element' && node.properties.href && /.md/.test(node.properties.href) && !/^(https?:\/\/)/.test(node.properties.href)) {
|
||||
let href = node.properties.href;
|
||||
node.properties.href = href.replace(/([^\.\/\\]+)\.(md|markdown)/gi, '$1.html');
|
||||
}
|
||||
|
||||
@ -45,10 +45,115 @@ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
body.home .h1warp-body, body.home .h1warp .warp-body {
|
||||
max-width: 940px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
body.home .h2warp > h2 {
|
||||
display: inline-block;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
body.home .h2warp > h2::after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 3px;
|
||||
width: 110%;
|
||||
margin-top: 0.5rem;
|
||||
--bg-opacity: 1;
|
||||
background-color: rgb(30 41 59/var(--bg-opacity));
|
||||
}
|
||||
body.home .h1warp .warp-body p + p {
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
body.home .h1warp .warp-body p {
|
||||
text-indent: 2rem;
|
||||
}
|
||||
|
||||
|
||||
body.home .h1warp p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.home-card {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
grid-template-columns: repeat(4,minmax(0,1fr));
|
||||
}
|
||||
.home-card a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
color: rgb(30 41 59/1);
|
||||
box-shadow: 0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(0,0,0,0.05);
|
||||
color: rgb(203 213 225/1);
|
||||
--bg-opacity: 0.5;
|
||||
background-color: rgb(62 69 72/var(--bg-opacity));
|
||||
transition: all .3s;
|
||||
}
|
||||
.home-card a:hover {
|
||||
--bg-opacity: 1;
|
||||
}
|
||||
|
||||
.header-nav .max-container {
|
||||
padding-top: 1.8rem;
|
||||
}
|
||||
|
||||
.header-nav .max-container, .header-nav .logo, .header-nav .menu, .header-nav .menu a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-nav .logo {
|
||||
gap: 0.5rem;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.header-nav .title {
|
||||
font-size: 1.8rem;
|
||||
line-height: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-nav .logo svg {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.header-nav .menu a:hover {
|
||||
background-color: rgb(30 41 59/1);
|
||||
}
|
||||
|
||||
.header-nav .menu a {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-radius: 9999px;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.header-nav .menu {
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.header-nav .menu a > span {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.header-nav a, .header-nav a:visited {
|
||||
color: rgb(209 213 219/1);
|
||||
line-height: 1.2;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.warp-header.h1warp {
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 4.6rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.warp-header.h1warp .warp-body {
|
||||
@ -58,7 +163,7 @@ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
|
||||
.warp-header.h1warp > h1 {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.h1warp-body {
|
||||
@ -145,8 +250,6 @@ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
|
||||
|
||||
margin: 0px;
|
||||
border-top-width: 1px;
|
||||
/* border-color: rgb(226 232 240/1);
|
||||
background-color: rgb(241 245 249/1); */
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.25rem;
|
||||
@ -174,21 +277,16 @@ ol, ul, menu {
|
||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||
}
|
||||
|
||||
.h4warp > .warp-body ul,
|
||||
.h4warp > .warp-body ol,
|
||||
.h4warp > .warp-body dl,
|
||||
|
||||
.h3warp > .warp-body ul li,
|
||||
.h3warp > .warp-body ol li,
|
||||
.h3warp > .warp-body dl li {
|
||||
.h2warp-body ul li,
|
||||
.h2warp-body ol li,
|
||||
.h2warp-body dl li {
|
||||
padding: 9px;
|
||||
padding-left: 26px;
|
||||
position: relative;
|
||||
border-bottom: solid 1px rgb(51 65 85/0.5);
|
||||
}
|
||||
|
||||
.h4warp>.warp-body ul:not(.style-none)>li::before,
|
||||
.h3warp>.warp-body ul:not(.style-none)>li::before {
|
||||
.h2warp-body ul:not(.style-none)>li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
@ -196,10 +294,24 @@ ol, ul, menu {
|
||||
height: 4px;
|
||||
background: #556677;
|
||||
border-radius: 50%;
|
||||
left: 14px;
|
||||
left: 13px;
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
.h2warp-body ul li,
|
||||
.h2warp-body ol li,
|
||||
.h2warp-body dl li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.warp-body ul:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.warp-body ul:last-child li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.h3warp hr {
|
||||
border-bottom: 1px solid #475060;
|
||||
}
|
||||
@ -301,6 +413,9 @@ pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.cols-1 {
|
||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||
}
|
||||
.cols-2 {
|
||||
grid-template-columns: repeat(2,minmax(0,1fr));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user