mirror of
https://github.com/sergeyyarkov/yarkov.tech.git
synced 2026-10-11 18:39:14 +03:00
feat: added rehype-autolink-heading plugin
This commit is contained in:
parent
bedf897c63
commit
7c76b73c15
@ -1,20 +0,0 @@
|
||||
import { defineConfig } from "astro/config";
|
||||
import solid from "@astrojs/solid-js";
|
||||
import compress from "astro-compress";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://yarkov.tech",
|
||||
integrations: [solid(), compress({ img: false, html: false })],
|
||||
markdown: {
|
||||
syntaxHighlight: "prism",
|
||||
},
|
||||
vite: {
|
||||
ssr: {
|
||||
external: ["svgo"],
|
||||
},
|
||||
},
|
||||
experimental: {
|
||||
integrations: true,
|
||||
},
|
||||
});
|
||||
70
astro.config.ts
Normal file
70
astro.config.ts
Normal file
@ -0,0 +1,70 @@
|
||||
import { defineConfig } from "astro/config";
|
||||
import solid from "@astrojs/solid-js";
|
||||
import compress from "astro-compress";
|
||||
import { h } from "hastscript";
|
||||
import { toString } from "hast-util-to-string";
|
||||
import { escape } from "html-escaper";
|
||||
|
||||
const createAnchorLabel = (heading: string) => {
|
||||
const node = h("span.anchor-label", escape(heading));
|
||||
node.properties["is:raw"] = true;
|
||||
return node;
|
||||
};
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://yarkov.tech",
|
||||
integrations: [solid(), compress({ img: false, html: false })],
|
||||
markdown: {
|
||||
syntaxHighlight: "prism",
|
||||
remarkPlugins: ["remark-gfm", "remark-smartypants"],
|
||||
rehypePlugins: [
|
||||
"rehype-slug",
|
||||
[
|
||||
"rehype-autolink-headings",
|
||||
{
|
||||
properties: {
|
||||
class: "anchor-link",
|
||||
},
|
||||
behavior: "after",
|
||||
group: ({ tagName }) =>
|
||||
h(`div.heading-wrapper.level-${tagName}`, {
|
||||
tabIndex: -1,
|
||||
}),
|
||||
content: (heading) => [
|
||||
h(
|
||||
`span.anchor-icon`,
|
||||
undefined,
|
||||
h(
|
||||
"svg",
|
||||
{
|
||||
width: 18,
|
||||
height: 18,
|
||||
version: 1.1,
|
||||
viewBox: "0 0 16 16",
|
||||
xlmns: "http://www.w3.org/2000/svg",
|
||||
ariaHidden: "true",
|
||||
"data-filter": "none",
|
||||
},
|
||||
h("path", {
|
||||
fillRule: "evenodd",
|
||||
fill: "currentcolor",
|
||||
d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z",
|
||||
})
|
||||
)
|
||||
),
|
||||
createAnchorLabel(toString(heading)),
|
||||
],
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
vite: {
|
||||
ssr: {
|
||||
external: ["svgo"],
|
||||
},
|
||||
},
|
||||
experimental: {
|
||||
integrations: true,
|
||||
},
|
||||
});
|
||||
527
package-lock.json
generated
527
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -22,12 +22,19 @@
|
||||
"@typescript-eslint/eslint-plugin": "^5.31.0",
|
||||
"@typescript-eslint/parser": "^5.31.0",
|
||||
"astro": "^1.0.0-beta.73",
|
||||
"astro-icon": "^0.7.3",
|
||||
"astro-compress": "^0.0.15",
|
||||
"astro-icon": "^0.7.3",
|
||||
"eslint": "^8.20.0",
|
||||
"eslint-plugin-solid": "^0.7.1",
|
||||
"hast-util-to-string": "^2.0.0",
|
||||
"hastscript": "^7.0.2",
|
||||
"html-escaper": "^3.0.3",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier-plugin-astro": "^0.2.0",
|
||||
"rehype-autolink-headings": "^6.1.1",
|
||||
"rehype-slug": "^5.0.1",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"remark-smartypants": "^2.0.0",
|
||||
"sass": "^1.54.0",
|
||||
"solid-js": "^1.4.8"
|
||||
}
|
||||
|
||||
@ -24,35 +24,6 @@
|
||||
quotes: "«" "»";
|
||||
}
|
||||
|
||||
& h1,
|
||||
& h2,
|
||||
& h3,
|
||||
& h4 {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
& h1:not(:first-child),
|
||||
& h2:not(:first-child),
|
||||
& h3:not(:first-child),
|
||||
& h4:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
& h2 {
|
||||
font-size: var(--font-size-2xl);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
& h3 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
& h4 {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--font-color);
|
||||
text-decoration: underline;
|
||||
@ -153,4 +124,81 @@
|
||||
border-left: 0.25rem solid var(--border-color);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
& .heading-wrapper {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
margin: 3rem 0 1rem 0;
|
||||
padding-bottom: 0.35rem;
|
||||
|
||||
& h2 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
& h3 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
& h4 {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
& h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .heading-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
margin-inline-start: 1px;
|
||||
& .anchor-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
text-decoration: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
& .anchor-icon {
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
}
|
||||
& svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
& .anchor-label {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&:hover {
|
||||
& .anchor-link {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.article-content {
|
||||
& .heading-wrapper {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
& .anchor-link {
|
||||
& .anchor-icon {
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
---
|
||||
import type { MarkdownInstance } from 'astro';
|
||||
import type { MarkdownInstance } from "astro";
|
||||
|
||||
import ArticleLayout from '@layouts/article.astro';
|
||||
import ArticleLayout from "@layouts/article.astro";
|
||||
|
||||
// TODO: generate pages based on user language
|
||||
export async function getStaticPaths() {
|
||||
const data = await Astro.glob<ArticleType>('../../../content/articles/**/*.md');
|
||||
const data = await Astro.glob<ArticleType>("../../../content/articles/**/*.md");
|
||||
return data.map((article) => {
|
||||
const published_at = new Date(article.frontmatter.published_at).toLocaleDateString('en-CA');
|
||||
const published_at = new Date(article.frontmatter.published_at).toLocaleDateString("en-CA");
|
||||
const slug = `${published_at}/${article.frontmatter.slug}`;
|
||||
const props = { Content: article.Content, frontmatter: article.frontmatter };
|
||||
return { params: { slug }, props };
|
||||
|
||||
@ -29,6 +29,7 @@ html {
|
||||
font-kerning: normal;
|
||||
font-family: var(--font-family-base);
|
||||
background: var(--background-body-color);
|
||||
scroll-padding-top: 7rem;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user