add support for toc
This commit is contained in:
Techit Thawiang
+92
-44
@@ -13,11 +13,13 @@
|
||||
--color-primary: #2e2e2e;
|
||||
--color-primary-strong: #3e3e3e;
|
||||
--color-on-primary: white;
|
||||
--color-on-primary-weak: #ebebeb;
|
||||
--color-secondary: #efefef;
|
||||
--color-secondary-strong: #dfdfdf;
|
||||
--color-on-secondary: #2e2e2e;
|
||||
--color-container: #f8f8f8;
|
||||
--color-on-container: #0e0e0e;
|
||||
--color-outline-very-intense: #a0a0a0;
|
||||
--color-outline-intense: #c0c0c0;
|
||||
--color-outline: #d9d9d9;
|
||||
--color-accent: #0066ff;
|
||||
@@ -25,24 +27,15 @@
|
||||
--color-inverse: #ff6600;
|
||||
--color-inverse-strong: #d55500;
|
||||
|
||||
--font-sans: Roboto, Sarabun, sans-serif;
|
||||
--font-sans: "Fira Sans", "Noto Sans Thai Looped", sans-serif;
|
||||
--font-sans--font-feature-settings: "liga", "calt";
|
||||
--font-mono: RobotoMono, "Roboto Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--font-serif: RobotoSerif, NotoSerifThai, Georgia, Garamond, "Times New Roman", Times, serif;
|
||||
--font-math: CMUSerif, "Cambria Math", "LatinModern Math", "STIXGeneral", math;
|
||||
--font-mono: "Fira Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--font-serif: 'Linux Libertine','Georgia', 'Source Serif 4', Georgia, Garamond, "Times New Roman", Times, 'Noto Serif Thai', serif;
|
||||
|
||||
--ease-fluid: 0.2, 0, 0, 1;
|
||||
--ease-fluid-in: .6, .2, .7, .4;
|
||||
--ease-out-back: 0.34, 1.56, 0.64, 1;
|
||||
}
|
||||
@supports (font-variation-settings: normal) {
|
||||
:root {
|
||||
--font-sans: RobotoVariable, Sarabun, sans-serif;
|
||||
--font-mono: RobotoMonoVariable, "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--font-serif: RobotoSerifVariable, NotoSerifThai, Georgia, Garamond, "Times New Roman", Times, serif;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
}
|
||||
@keyframes ring {
|
||||
0% {
|
||||
outline: 0px solid var(--ui-ring-color);
|
||||
@@ -78,15 +71,25 @@ body,main {
|
||||
}
|
||||
img {
|
||||
border-radius: calc(var(--ui-spacing)*1);
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
a {
|
||||
color: unset;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
code,tt,kbd,pre {
|
||||
font-family: var(--font-mono);
|
||||
font-size: inherit;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 { font-family: var(--font-serif); font-weight: 400; }
|
||||
h1 { font-size: 1.80em; }
|
||||
h2 { font-size: 1.50em; }
|
||||
h3 { font-size: 1.25em; }
|
||||
h4 { font-size: 1.10em; }
|
||||
h5 { font-size: 1.00em; }
|
||||
h6 { font-size: 0.90em; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
@@ -99,6 +102,7 @@ a {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
z-index: 100;
|
||||
}
|
||||
.web-header, .hamburger-menu-header {
|
||||
box-sizing: border-box;
|
||||
@@ -137,6 +141,14 @@ a {
|
||||
.web-nav, .web-footer-content, .article {
|
||||
width: 100%;
|
||||
}
|
||||
.article.article-special h1,
|
||||
.article.article-special h2,
|
||||
.article.article-special h3,
|
||||
.article.article-special h4,
|
||||
.article.article-special h5,
|
||||
.article.article-special h6 {
|
||||
border-bottom: 1px solid var(--color-outline-very-intense);
|
||||
}
|
||||
.web-footer-title {
|
||||
font-size: 32px;
|
||||
margin-block: .4em;
|
||||
@@ -183,19 +195,17 @@ p {
|
||||
margin-block: 1em;
|
||||
}
|
||||
.font-hero {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
margin-block: 0.2em;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
}
|
||||
.font-hero-desc {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.web-title {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
margin-block: 0.4em;
|
||||
margin-block: 0.5em;
|
||||
transition-property: color;
|
||||
transition-duration: 100ms;
|
||||
transition-timing-function: cubic-bezier(var(--ease-fluid));
|
||||
@@ -227,7 +237,6 @@ p {
|
||||
.web-nav-title {
|
||||
--web-nav-title-shadow: 0px 0px 16px var(--ui-bg);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.web-hero-post {
|
||||
display: flex;
|
||||
@@ -255,6 +264,19 @@ p {
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.article.article-footer a:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-on-primary);
|
||||
}
|
||||
.article.article-footer {
|
||||
color: var(--color-on-primary-weak);
|
||||
background: var(--color-primary);
|
||||
padding-block: calc(var(--ui-spacing)*12);
|
||||
}
|
||||
.article.article-footer > .web-section {
|
||||
display: flex;
|
||||
margin-block: 0;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.web-section.web-section-split {
|
||||
flex-direction: row;
|
||||
@@ -271,6 +293,7 @@ p {
|
||||
max-width: var(--ui-container-narrow);
|
||||
}
|
||||
.project-card-container, .font-card-container, .post-card-container {
|
||||
margin-block: 1em;
|
||||
background: var(--color-container);
|
||||
color: var(--color-on-container);
|
||||
display: flex;
|
||||
@@ -309,7 +332,6 @@ p {
|
||||
margin-left: 0;
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
@@ -320,6 +342,7 @@ p {
|
||||
aspect-ratio: 16/9;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
@@ -361,7 +384,7 @@ p {
|
||||
flex-direction: row;
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
max-width: calc(var(--ui-spacing)*56);
|
||||
max-width: calc(var(--ui-spacing)*64);
|
||||
}
|
||||
.project-card-content, .font-card-content, .post-card-content {
|
||||
padding-inline: calc(var(--ui-spacing)*4);
|
||||
@@ -556,33 +579,39 @@ a.btn {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.post-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
@media screen and (min-width: 1024px) {
|
||||
.post-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.prose {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
p, li { line-height: 1.5; }
|
||||
hr { margin-block: 1em; border: 1px solid var(--color-outline-intense); }
|
||||
li { margin-block: 1em; }
|
||||
img { display: block; }
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
width: 100%;
|
||||
flex: 3;
|
||||
}
|
||||
.prose p, li { line-height: 1.5; }
|
||||
.prose hr { margin-block: 1em; border: 1px solid var(--color-outline-intense); }
|
||||
.prose li { margin-block: 1em; }
|
||||
.prose h1,h2,h3,h4,h5,h6 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 700;
|
||||
scroll-margin-top: 80px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
margin-block: calc(var(--ui-spacing)*6);
|
||||
}
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
margin-block: calc(var(--ui-spacing)*6);
|
||||
}
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
margin-block: calc(var(--ui-spacing)*6);
|
||||
}
|
||||
img {
|
||||
}
|
||||
.prose img {
|
||||
margin-block: calc(var(--ui-spacing)*3);
|
||||
}
|
||||
.prose-toc {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
}
|
||||
@media screen and (min-width: 1024px) {
|
||||
.prose-toc {
|
||||
margin-left: calc(var(--ui-spacing)*5)
|
||||
}
|
||||
}
|
||||
.post-cover {
|
||||
@@ -610,3 +639,22 @@ a.btn {
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.toc {
|
||||
position: sticky;
|
||||
top: calc(var(--ui-header-height) + calc(var(--ui-spacing)*4));
|
||||
}
|
||||
.toc > .toc-text {
|
||||
margin-block: 0.5em;
|
||||
font-weight: 700;
|
||||
}
|
||||
.toc > ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.toc .toc-link-indent-3 {
|
||||
margin-left: calc(var(--ui-spacing)*3);
|
||||
}
|
||||
.toc .toc-link-indent-4 {
|
||||
margin-left: calc(var(--ui-spacing)*6);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<nav class="toc">
|
||||
<p class="toc-text">Table of Contents</p>
|
||||
<ul v-if="toc.length">
|
||||
<template v-for="item in toc" :key="item.id">
|
||||
<li>
|
||||
<a
|
||||
:href="'#' + item.id"
|
||||
@click.prevent="scrollToHeading(item.id)"
|
||||
:class="`toc-link ${indentClass(item.depth)} ${activeId === item.id ? 'text-accent' : ''}`"
|
||||
>
|
||||
<span>
|
||||
{{ item.text }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Render children if any -->
|
||||
<template v-if="item.children?.length">
|
||||
<li v-for="child in item.children" :key="child.id">
|
||||
<UTooltip :text="child.text">
|
||||
<a
|
||||
:href="'#' + child.id"
|
||||
@click.prevent="scrollToHeading(child.id)"
|
||||
:class="`toc-link ${indentClass(child.depth)} ${activeId === child.id ? 'text-accent' : ''}`"
|
||||
>
|
||||
<span>
|
||||
{{ child.text }}
|
||||
</span>
|
||||
</a>
|
||||
</UTooltip>
|
||||
</li>
|
||||
</template>
|
||||
</template>
|
||||
</ul>
|
||||
<p v-else>
|
||||
Not available
|
||||
</p>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
|
||||
type TocItem = {
|
||||
id: string
|
||||
depth: number
|
||||
text: string
|
||||
children?: TocItem[]
|
||||
}
|
||||
|
||||
// Props
|
||||
const props = defineProps<{
|
||||
toc: TocItem[]
|
||||
}>()
|
||||
|
||||
// Active heading ID
|
||||
const activeId = ref<string>('');
|
||||
|
||||
// Get all headings from toc (flattened)
|
||||
const allHeadings = computed(() => {
|
||||
const headings: TocItem[] = [];
|
||||
|
||||
props.toc.forEach(item => {
|
||||
headings.push(item);
|
||||
if (item.children?.length) {
|
||||
headings.push(...item.children);
|
||||
}
|
||||
});
|
||||
|
||||
return headings;
|
||||
});
|
||||
|
||||
// Function to add indentation based on heading depth
|
||||
const indentClass = (depth: number) => {
|
||||
// Customize based on your depth logic
|
||||
switch (depth) {
|
||||
case 1:
|
||||
return 'toc-link-indent'
|
||||
case 2:
|
||||
return 'toc-link-indent-2'
|
||||
case 3:
|
||||
return 'toc-link-indent-3'
|
||||
case 4:
|
||||
return 'toc-link-indent-4'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const scrollToHeading = (id: string) => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
history.pushState({}, '', `#${id}`);
|
||||
|
||||
activeId.value = id;
|
||||
|
||||
// Perform smooth scroll
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
const visibleHeadings = entries
|
||||
.filter(entry => entry.isIntersecting)
|
||||
.map(entry => entry.target.id);
|
||||
if (visibleHeadings.length > 0) {
|
||||
activeId.value = visibleHeadings[0];
|
||||
}
|
||||
},
|
||||
{
|
||||
rootMargin: '-10% 0px -85% 0px',
|
||||
threshold: 0.1
|
||||
}
|
||||
);
|
||||
allHeadings.value.forEach(heading => {
|
||||
const element = document.getElementById(heading.id);
|
||||
if (element) {
|
||||
observer.observe(element);
|
||||
}
|
||||
});
|
||||
onUnmounted(() => {
|
||||
observer.disconnect();
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toc a {
|
||||
display: block;
|
||||
padding: 2px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<main>
|
||||
<article v-if="post" class="article">
|
||||
<article v-if="post" :key="route.path" class="article article-special">
|
||||
<section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<section class="max-w-6xl mx-auto z-[1]">
|
||||
<small class="prose-blog-pretext" aria-hidden="true">You are reading blog post:</small>
|
||||
@@ -13,9 +13,12 @@
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="web-section web-section" aria-labelledby="post-content" aria-describedby="post-content-desc">
|
||||
<div class="prose">
|
||||
<ContentRenderer v-if="post" :value="post"/>
|
||||
<section class="web-section web-section">
|
||||
<div class="post-container">
|
||||
<ContentRenderer class="prose" v-if="post" :value="post"/>
|
||||
<section class="prose-toc">
|
||||
<PostToc :toc="post?.body?.toc?.links"/>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
@@ -25,7 +28,7 @@
|
||||
<small class="prose-blog-pretext" aria-hidden="true">An error occurred:</small>
|
||||
<h1 id="hero" class="font-hero">Post not found!</h1>
|
||||
<div class="post-cover">
|
||||
<section class="w-full">
|
||||
<section>
|
||||
<p id="hero-desc" class="font-hero-desc">Check the URL; there might be a misspelling, or the post may not actually exist.</p>
|
||||
<NuxtLink class="btn" to="/posts">All posts</NuxtLink>
|
||||
</section>
|
||||
@@ -33,26 +36,19 @@
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="web-section web-section" aria-labelledby="post-content" aria-describedby="post-content-desc">
|
||||
<div class="prose">
|
||||
<ContentRenderer v-if="post" :value="post"/>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const config = useRuntimeConfig();
|
||||
const baseUrl = config.public.baseUrl
|
||||
const route = useRoute()
|
||||
|
||||
// const { data: post } = await useAsyncData(route.path, () => {
|
||||
// return queryCollection('posts').path(route.path).first()
|
||||
// })
|
||||
|
||||
const { data: post } = await useAsyncData(() => queryCollection('posts').path(route.path).first())
|
||||
|
||||
const { data: post } = await useAsyncData(route.path, () => {
|
||||
return queryCollection('posts').path(route.path).first()
|
||||
})
|
||||
// This is the problem? Why the heck it decides to print every post as the same latest post?
|
||||
// const { data: post } = await useAsyncData(() => queryCollection('posts').path(route.path).first())
|
||||
const ogUrl = config.public.baseUrl + route.path
|
||||
useSeoMeta({
|
||||
title: post.value?.title,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<main>
|
||||
<article v-if="project" class="article">
|
||||
<article v-if="project" :key="route.path" class="article">
|
||||
<section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<section class="max-w-6xl mx-auto z-[1]">
|
||||
<small class="prose-blog-pretext" aria-hidden="true">You are viewing project:</small>
|
||||
@@ -13,9 +13,12 @@
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="web-section web-section" aria-labelledby="project-content" aria-describedby="project-content-desc">
|
||||
<div class="prose">
|
||||
<ContentRenderer v-if="project" :value="project"/>
|
||||
<section class="web-section web-section">
|
||||
<div class="post-container">
|
||||
<ContentRenderer class="prose" v-if="project" :value="project"/>
|
||||
<section class="prose-toc">
|
||||
<PostToc :toc="project?.body?.toc?.links"/>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
@@ -33,18 +36,12 @@
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="web-section web-section" aria-labelledby="post-content" aria-describedby="post-content-desc">
|
||||
<div class="prose">
|
||||
<ContentRenderer v-if="post" :value="post"/>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const config = useRuntimeConfig();
|
||||
const baseUrl = config.public.baseUrl
|
||||
const route = useRoute()
|
||||
|
||||
// const { data: post } = await useAsyncData(route.path, () => {
|
||||
@@ -52,7 +49,6 @@ const route = useRoute()
|
||||
// })
|
||||
|
||||
const { data: project } = await useAsyncData(() => queryCollection('projects').path(route.path).first())
|
||||
|
||||
const ogUrl = config.public.baseUrl + route.path
|
||||
useSeoMeta({
|
||||
title: project.value?.title,
|
||||
|
||||
Reference in New Issue
Block a user