mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 07:31:58 +01:00
Add early shortcodes
This commit is contained in:
Soitora
parent
45c2e7a614
commit
4f2431c306
@ -8,6 +8,7 @@
|
||||
*.styl
|
||||
*.vue
|
||||
*.xml
|
||||
*.otf
|
||||
dist
|
||||
pnpm-lock.yaml
|
||||
cache
|
||||
|
||||
@ -80,6 +80,7 @@
|
||||
"element-plus": "^2.3.12",
|
||||
"lodash.groupby": "^4.6.0",
|
||||
"markdown-it": "^13.0.1",
|
||||
"markdown-it-shortcode-tag": "^1.1.0",
|
||||
"moment": "^2.29.4"
|
||||
}
|
||||
}
|
||||
|
||||
16
website/pnpm-lock.yaml
generated
16
website/pnpm-lock.yaml
generated
@ -1,5 +1,9 @@
|
||||
lockfileVersion: '6.0'
|
||||
|
||||
settings:
|
||||
autoInstallPeers: true
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
dependencies:
|
||||
'@iconify-prerendered/vue-mdi':
|
||||
specifier: ^0.23.1689058119
|
||||
@ -25,6 +29,9 @@ dependencies:
|
||||
markdown-it:
|
||||
specifier: ^13.0.1
|
||||
version: 13.0.1
|
||||
markdown-it-shortcode-tag:
|
||||
specifier: ^1.1.0
|
||||
version: 1.1.0
|
||||
moment:
|
||||
specifier: ^2.29.4
|
||||
version: 2.29.4
|
||||
@ -3385,6 +3392,11 @@ packages:
|
||||
resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
|
||||
dev: true
|
||||
|
||||
/markdown-it-shortcode-tag@1.1.0:
|
||||
resolution: {integrity: sha512-6qVQHmfVYMYlO2HebbF6ydXoTpOl3jPJvw6RyPnWaGJLSXdxlIJ7ihyzzbXNNHkZlQPfoDehDQYMfqeOv1KwgQ==}
|
||||
engines: {node: '>=4.0'}
|
||||
dev: false
|
||||
|
||||
/markdown-it@13.0.1:
|
||||
resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
|
||||
hasBin: true
|
||||
@ -5010,7 +5022,3 @@ packages:
|
||||
/yoga-wasm-web@0.3.3:
|
||||
resolution: {integrity: sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==}
|
||||
dev: true
|
||||
|
||||
settings:
|
||||
autoInstallPeers: true
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
@ -7,19 +7,24 @@ import { imgMark } from "@mdit/plugin-img-mark";
|
||||
import { imgSize } from "@mdit/plugin-img-size";
|
||||
import { include } from "@mdit/plugin-include";
|
||||
import { tabsMarkdownPlugin } from "vitepress-plugin-tabs";
|
||||
import shortcode_plugin from "markdown-it-shortcode-tag";
|
||||
import shortcodes from "./shortcodes";
|
||||
|
||||
const markdownConfig: MarkdownOptions = {
|
||||
config: (md) => {
|
||||
md.use(attrs),
|
||||
md.use(figure),
|
||||
md.use(imgLazyload),
|
||||
md.use(imgMark),
|
||||
md.use(imgSize),
|
||||
md.use(include, {
|
||||
currentPath: (env) => env.filePath,
|
||||
}),
|
||||
md.use(tabsMarkdownPlugin);
|
||||
md.use(figure),
|
||||
md.use(imgLazyload),
|
||||
md.use(imgMark),
|
||||
md.use(imgSize),
|
||||
md.use(include, {
|
||||
currentPath: (env) => env.filePath,
|
||||
}),
|
||||
md.use(tabsMarkdownPlugin);
|
||||
|
||||
md.use(shortcode_plugin, shortcodes);
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
export default markdownConfig;
|
||||
|
||||
@ -5,6 +5,7 @@ const sidebar = {
|
||||
"/forks/": defaultSidebar(),
|
||||
"/changelogs/": defaultSidebar(),
|
||||
"/news/": defaultSidebar(),
|
||||
"/sandbox/": defaultSidebar(),
|
||||
};
|
||||
|
||||
function defaultSidebar() {
|
||||
|
||||
54
website/src/.vitepress/config/shortcodes.ts
Normal file
54
website/src/.vitepress/config/shortcodes.ts
Normal file
@ -0,0 +1,54 @@
|
||||
const navigationMappings = {
|
||||
more: {
|
||||
name: "More",
|
||||
title: "More menu",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>dots-horizontal</title><path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z" /></svg>`,
|
||||
},
|
||||
settings: {
|
||||
name: "Settings",
|
||||
title: "Settings menu",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>cog</title><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>`,
|
||||
dependsOn: "more",
|
||||
},
|
||||
reader: {
|
||||
name: "Reader",
|
||||
title: "Reader menu",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>book-open-outline</title><path d="M21,4H3A2,2 0 0,0 1,6V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V6A2,2 0 0,0 21,4M3,19V6H11V19H3M21,19H13V6H21V19M14,9.5H20V11H14V9.5M14,12H20V13.5H14V12M14,14.5H20V16H14V14.5Z" /></svg>`,
|
||||
dependsOn: "settings",
|
||||
},
|
||||
advanced: {
|
||||
name: "Advanced",
|
||||
title: "Advanced menu",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>code-tags</title><path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z" /></svg>`,
|
||||
dependsOn: "settings",
|
||||
},
|
||||
};
|
||||
|
||||
function generateNavigationHtml(navKey) {
|
||||
const navData = navigationMappings[navKey];
|
||||
|
||||
if (!navData) {
|
||||
return "<strong style='color:var(--vp-c-danger-1)'>Unsupported Navigation!</strong>";
|
||||
}
|
||||
|
||||
const { name, title, icon, dependsOn } = navData;
|
||||
|
||||
let html = `<span class='shortcode navigation ${navKey}' title='${title}'>${icon}<span class="name">${name}</span></span>`;
|
||||
|
||||
if (dependsOn) {
|
||||
html = generateNavigationHtml(dependsOn) + ` → ` + html;
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
const shortcodes = {
|
||||
nav: {
|
||||
render: function (attrs, env) {
|
||||
const { method, to } = attrs;
|
||||
return generateNavigationHtml(to);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default shortcodes;
|
||||
@ -187,3 +187,29 @@ main :where(h1, h2, h3, h4, h5, h6) + figure {
|
||||
text-underline-offset: 2px
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Shortcodes
|
||||
* -------------------------------------------------------------------------- */
|
||||
.navigation {
|
||||
color: var(--vp-c-text-2)
|
||||
font-weight: 600
|
||||
|
||||
&:hover {
|
||||
color: var(--vp-c-text-1)
|
||||
cursor: help
|
||||
}
|
||||
|
||||
svg,
|
||||
span.name {
|
||||
vertical-align: middle; /* Align both SVG and <span> vertically */
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor
|
||||
height: 1em
|
||||
width: 1em
|
||||
display: inline-block
|
||||
margin-right: 4px
|
||||
}
|
||||
}
|
||||
|
||||
20
website/src/sandbox/index.md
Normal file
20
website/src/sandbox/index.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Sandbox
|
||||
description: Area to test and demonstrate different features and capabilities.
|
||||
---
|
||||
|
||||
# Sandbox
|
||||
|
||||
## Shortcodes
|
||||
|
||||
::: info Example
|
||||
To find all available menus, go to <nav to="more">.
|
||||
:::
|
||||
|
||||
::: info Example: Deep nesting
|
||||
Ensure **Skip filtered chapters** is enabled at <nav to="reader"> under the section Reading.
|
||||
:::
|
||||
|
||||
::: info Example: Deep nesting 2
|
||||
In <nav to="advanced">, try **Clear cache** and **Clear cookies**.
|
||||
:::
|
||||
Loading…
Reference in New Issue
Block a user