From 268f506a9cc565d99390a0fa18e0b08e10ac43f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vojte=CC=8Cch=20Struha=CC=81r?= Date: Mon, 9 Jun 2025 21:02:08 +0200 Subject: [PATCH] Use images for github callout icons #1 --- astro.config.mjs | 11 ++++------ deploy.sh | 2 +- package.json | 2 +- public/icons/octicon-caution.svg | 1 + public/icons/octicon-important.svg | 1 + public/icons/octicon-note.svg | 1 + public/icons/octicon-tip.svg | 1 + public/icons/octicon-warning.svg | 1 + public/icons/octicons.txt | 7 ++++++ src/plugins/custom-footnote.ts | 25 ---------------------- src/plugins/rehype-plugins.ts | 34 ++++++++++++++++++++++++++++++ src/styles/images-adjustment.css | 11 ++++++++++ 12 files changed, 63 insertions(+), 34 deletions(-) create mode 100644 public/icons/octicon-caution.svg create mode 100644 public/icons/octicon-important.svg create mode 100644 public/icons/octicon-note.svg create mode 100644 public/icons/octicon-tip.svg create mode 100644 public/icons/octicon-warning.svg create mode 100644 public/icons/octicons.txt delete mode 100644 src/plugins/custom-footnote.ts create mode 100644 src/plugins/rehype-plugins.ts diff --git a/astro.config.mjs b/astro.config.mjs index 2fd8645..569b65b 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -4,17 +4,15 @@ import starlight from '@astrojs/starlight'; import remarkGithubAlerts from 'remark-github-alerts'; import remarkMath from 'remark-math'; import rehypeKatex from 'rehype-katex'; -import rehypeCustomFootnotes from './src/plugins/custom-footnote'; - - +import rehypeCustomization from './src/plugins/rehype-plugins'; // https://astro.build/config export default defineConfig({ + site: "https://fi.vojtechstruhar.com", markdown: { - remarkPlugins: [remarkGithubAlerts, remarkMath], - rehypePlugins: [rehypeKatex, rehypeCustomFootnotes] + rehypePlugins: [rehypeKatex, rehypeCustomization] }, integrations: [ starlight({ @@ -32,9 +30,8 @@ export default defineConfig({ } ], customCss: [ - "remark-github-alerts/styles/github-colors-light.css", - "remark-github-alerts/styles/github-colors-dark-class.css", "remark-github-alerts/styles/github-base.css", + "remark-github-alerts/styles/github-colors-light.css", "katex/dist/katex.min.css", "./src/styles/theme.css", "./src/styles/footnotes-fix.css", diff --git a/deploy.sh b/deploy.sh index 78b8917..d369a62 100755 --- a/deploy.sh +++ b/deploy.sh @@ -14,7 +14,7 @@ rsync -avz \ dist/ \ root@vojtechstruhar.com:/var/www/fimuni-mgr-notes -rm -rf dist +#rm -rf dist echo echo "Done" diff --git a/package.json b/package.json index c4fe1b9..91af643 100644 --- a/package.json +++ b/package.json @@ -19,4 +19,4 @@ "sharp": "^0.32.5", "unist-util-visit": "^5.0.0" } -} \ No newline at end of file +} diff --git a/public/icons/octicon-caution.svg b/public/icons/octicon-caution.svg new file mode 100644 index 0000000..c244b0f --- /dev/null +++ b/public/icons/octicon-caution.svg @@ -0,0 +1 @@ + diff --git a/public/icons/octicon-important.svg b/public/icons/octicon-important.svg new file mode 100644 index 0000000..43b4437 --- /dev/null +++ b/public/icons/octicon-important.svg @@ -0,0 +1 @@ + diff --git a/public/icons/octicon-note.svg b/public/icons/octicon-note.svg new file mode 100644 index 0000000..df4b47a --- /dev/null +++ b/public/icons/octicon-note.svg @@ -0,0 +1 @@ + diff --git a/public/icons/octicon-tip.svg b/public/icons/octicon-tip.svg new file mode 100644 index 0000000..25ba049 --- /dev/null +++ b/public/icons/octicon-tip.svg @@ -0,0 +1 @@ + diff --git a/public/icons/octicon-warning.svg b/public/icons/octicon-warning.svg new file mode 100644 index 0000000..30b6462 --- /dev/null +++ b/public/icons/octicon-warning.svg @@ -0,0 +1 @@ + diff --git a/public/icons/octicons.txt b/public/icons/octicons.txt new file mode 100644 index 0000000..038b531 --- /dev/null +++ b/public/icons/octicons.txt @@ -0,0 +1,7 @@ +const DEFAULT_GITHUB_ICONS = { + note: '', + tip: '', + important: '', + warning: '', + caution: '' +}; \ No newline at end of file diff --git a/src/plugins/custom-footnote.ts b/src/plugins/custom-footnote.ts deleted file mode 100644 index c091b80..0000000 --- a/src/plugins/custom-footnote.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { visit } from 'unist-util-visit'; - -export default function rehypeCustomFootnotes() { - return (tree: any) => { - visit(tree, 'element', (node) => { - - if ( - node.tagName === 'h2' && - node.properties?.id === 'footnote-label' - ) { - node.children[0].value = 'Zdroje'; // Change heading text - } - - if ( - node.tagName === 'span' && - node.properties?.className?.includes('sr-only') && - node.children?.[0]?.value?.startsWith('Section titled') - ) { - node.children[0].remove; - } - }); - }; -} - - diff --git a/src/plugins/rehype-plugins.ts b/src/plugins/rehype-plugins.ts new file mode 100644 index 0000000..4177a0a --- /dev/null +++ b/src/plugins/rehype-plugins.ts @@ -0,0 +1,34 @@ +import { visit } from 'unist-util-visit'; + +export default function rehypeCustomization() { + return (tree: any) => { + visit(tree, 'element', (node) => { + + // Change the footnotes heading text (hard-wired to "Footnotes") + // by Astro or remark (not sure) + if ( + node.tagName === 'h2' && + node.properties?.id === 'footnote-label' + ) { + node.children[0].value = 'Zdroje'; + } + + // Embed SVG icons instead of using inline style supplying data url + if ( + node.tagName === 'span' && + node.properties?.class?.includes("octicon") + ) { + let octicon_kind = node.properties.class.split(" ")[1] + node.tagName = "img" + node.properties.src = `/icons/${octicon_kind}.svg` + node.properties.alt = octicon_kind + node.properties.class = `custom-octicon` + node.properties.style = "" + + + } + }); + }; +} + + diff --git a/src/styles/images-adjustment.css b/src/styles/images-adjustment.css index 503cbab..374e81e 100644 --- a/src/styles/images-adjustment.css +++ b/src/styles/images-adjustment.css @@ -41,3 +41,14 @@ img[alt="width=700"] { width: 700px; margin: auto; } + + +/* Github callout icons */ +.custom-octicon { + margin-right: .5rem; + overflow: visible !important; + display: inline-block; + vertical-align: text-bottom; + width: 1em; + height: 1em; +} \ No newline at end of file