meow
This commit is contained in:
parent
2c66a9b678
commit
9aa81ef675
28 changed files with 1735 additions and 242 deletions
|
|
@ -4,8 +4,9 @@ import fm from 'front-matter';
|
|||
|
||||
import PostCard from '../components/PostCard.vue';
|
||||
import { globalMarkdown, MarkdownInput, type MarkdownMetadata } from '~/assets/markdown_conf';
|
||||
import * as pages from '~/utils/pageupdater/update_pagelist';
|
||||
import type { PageInfo, PageInfoMetdata } from '~/utils/pageupdater/pages';
|
||||
import * as pages from '~/utils/page_updater/update_pagelist';
|
||||
import type { PageInfo, PageInfoMetdata } from '~/utils/page_updater/pages';
|
||||
import type { ParsedContent } from '@nuxt/content';
|
||||
|
||||
// Automatically maintained is a blog_list.json in assets/meta. This file contains a list of all blog posts and their metadata.
|
||||
// This file is generated by a script in the utils/pageupdater folder.
|
||||
|
|
@ -27,18 +28,27 @@ const tagList: Ref<any> = ref([])
|
|||
const tagFilter: Ref<string[]> = ref([])
|
||||
tagFilter.value = []
|
||||
|
||||
const article_contents: Ref<string> = ref("")
|
||||
const markdown: Ref<any> = ref(null)
|
||||
|
||||
const metadata: Ref<PageInfoMetdata> = ref({
|
||||
title: "",
|
||||
description: "",
|
||||
date: "",
|
||||
tags: [],
|
||||
background: ""
|
||||
const title: Ref<string> = ref("")
|
||||
const description: Ref<string> = ref("")
|
||||
const date: Ref<string> = ref("")
|
||||
const tags: Ref<string[]> = ref([])
|
||||
const background: Ref<string> = ref("")
|
||||
const next: Ref<string> = ref("")
|
||||
const previous: Ref<string> = ref("")
|
||||
|
||||
watch(markdown , (newVal) => {
|
||||
if (newVal) {
|
||||
title.value = newVal.title ? newVal.title : ""
|
||||
description.value = newVal.description ? newVal.description : ""
|
||||
date.value = newVal.date ? new Date(newVal.date).toLocaleDateString() : ""
|
||||
tags.value = newVal.tags ? newVal.tags : []
|
||||
background.value = newVal.background ? newVal.background : ""
|
||||
}
|
||||
})
|
||||
|
||||
// watch the params of the route to fetch the data again
|
||||
|
||||
watch(route, async () => {
|
||||
url.value = route.query.post as string
|
||||
if (url.value) {
|
||||
|
|
@ -65,14 +75,23 @@ async function fetchList() {
|
|||
// Sort the posts by date, most recent first
|
||||
list.value.sort((a: any, b: any) => b.metadata.date.localeCompare(a.metadata.date))
|
||||
}
|
||||
fetchList()
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchList()
|
||||
await fetchArticle(url.value)
|
||||
})
|
||||
|
||||
// Fetch the article contents from the URL
|
||||
async function fetchArticle(url: string) {
|
||||
const post = blog_list.posts.find(post => post.url === url)
|
||||
if (post) {
|
||||
const response = await fetch(post.url)
|
||||
article_contents.value = await response.text()
|
||||
// Trim the .md extension
|
||||
var url = url.replace(/\.md$/, "")
|
||||
console.log("Fetching article: " + url)
|
||||
const { data } = await useAsyncData(url, () => queryContent(url).findOne())
|
||||
console.log(data)
|
||||
|
||||
markdown.value = data.value;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,17 +99,22 @@ function resetReadingPosition() {
|
|||
window.scrollTo(0, 0)
|
||||
}
|
||||
|
||||
function updateMetadata(meta: MarkdownMetadata) {
|
||||
metadata.value = meta
|
||||
}
|
||||
fetchArticle(url.value)
|
||||
|
||||
|
||||
console.log("Prefetching blog")
|
||||
await fetchList();
|
||||
const temp_url = route.query.post as string
|
||||
await fetchArticle(temp_url);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative z-50 flex w-full justify-center text-white">
|
||||
<!-- Metadata -->
|
||||
<MetaSet :title="metadata.title" :description="metadata.description" :date="metadata.date"
|
||||
:background="metadata.background" :tags="metadata.tags" />
|
||||
<MetaSet :title="title" :description="description" :date="date"
|
||||
:background="background" :tags="tags" />
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="mt-8 flex-col text-center">
|
||||
|
|
@ -123,10 +147,10 @@ function updateMetadata(meta: MarkdownMetadata) {
|
|||
<div v-else>
|
||||
<Transition name="list">
|
||||
<div class="flex flex-col" :key="url">
|
||||
<h1>{{ metadata.title }}</h1>
|
||||
<small>{{ metadata.date ? new Date(metadata.date).toLocaleDateString() : "" }}</small>
|
||||
<h1>{{ title }}</h1>
|
||||
<small>{{ date }}</small>
|
||||
<div class="max-w-50 flex flex-row justify-center">
|
||||
<div v-for="tag in metadata.tags" :key="tag" class="m-1 text-center">
|
||||
<div v-for="tag in tags" :key="tag" class="m-1 text-center">
|
||||
<span
|
||||
class="text-xs bg-black border-purple-400 border-2 text-white p-1 rounded-md">{{
|
||||
tag }}</span>
|
||||
|
|
@ -136,11 +160,11 @@ function updateMetadata(meta: MarkdownMetadata) {
|
|||
<!-- Next/Prev controls, on the left and right side using PostCards -->
|
||||
<div class="flex max-w-4xl max-md:w-screen">
|
||||
<div class="justify-start">
|
||||
<NuxtLink v-if="metadata.previous" :onclick="resetReadingPosition" :to="metadata.previous"
|
||||
<NuxtLink v-if="previous" :onclick="resetReadingPosition" :to="previous"
|
||||
class="m-2 text-white">Previous</NuxtLink>
|
||||
</div>
|
||||
<div class="justify-end">
|
||||
<NuxtLink v-if="metadata.next" :onclick="resetReadingPosition" :to="metadata.next"
|
||||
<NuxtLink v-if="next" :onclick="resetReadingPosition" :to="next"
|
||||
class="m-2 text-white">Next</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -148,15 +172,17 @@ function updateMetadata(meta: MarkdownMetadata) {
|
|||
<!-- Article Content -->
|
||||
<Card class="text-pretty max-w-4xl mt-4 max-md:w-screen text-left">
|
||||
<article>
|
||||
<Markdown :input="article_contents" type="markdown" @metadata="updateMetadata" />
|
||||
<div v-if="markdown != null">
|
||||
<Markdown :input="markdown" />
|
||||
</div>
|
||||
<!-- Aligned next/prev controls -->
|
||||
<div class="flex">
|
||||
<div class="justify-start">
|
||||
<NuxtLink v-if="metadata.previous" :onclick="resetReadingPosition" :to="metadata.previous"
|
||||
<NuxtLink v-if="previous" :onclick="resetReadingPosition" :to="previous"
|
||||
class="m-2 text-white">Previous</NuxtLink>
|
||||
</div>
|
||||
<div class="justify-end">
|
||||
<NuxtLink v-if="metadata.next" :onclick="resetReadingPosition" :to="metadata.next"
|
||||
<NuxtLink v-if="next" :onclick="resetReadingPosition" :to="next"
|
||||
class="m-2 text-white">Next</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,23 +2,19 @@
|
|||
import { ref } from 'vue';
|
||||
import Markdown from '~/components/Markdown.vue';
|
||||
import Card from '~/components/Card.vue';
|
||||
import MetaSet from '~/components/MetaSet.vue';
|
||||
|
||||
const aboutMe = ref("");
|
||||
const aboutMe = ref('');
|
||||
const test = ref('');
|
||||
|
||||
fetch("/about_me.md")
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
aboutMe.value = data;
|
||||
});
|
||||
const { data } = await useAsyncData('about_me', () => queryContent('/about_me').findOne())
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative flex w-full justify-center text-white">
|
||||
<MetaSet title="Home" description="TheFelidae's personal site :3" tags="home, personal, author"/>
|
||||
|
||||
<!-- Metadata -->
|
||||
<MetaSet title="TheFelidae" description="TheFelidae's personal site :3" background="https://avatars.githubusercontent.com/u/94077364?v=4"
|
||||
tags="home, personal, author" />
|
||||
<div class="mt-8 flex-col text-center">
|
||||
<div class="flex justify-center">
|
||||
<div id="PFP" class="shadow-md rounded-full shadow-highlight">
|
||||
|
|
@ -28,6 +24,7 @@ fetch("/about_me.md")
|
|||
</div>
|
||||
<Card class="max-w-4xl mt-4 max-md:w-screen">
|
||||
<Markdown :input="aboutMe" type="markdown"></Markdown>
|
||||
<ContentRendererMarkdown :value="data" class="md-content" />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue