klemek/md-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: page title

Browse Source
This commit is contained in:
klemek
2026-04-24 23:43:08 +02:00
parent 8bec21c12d
commit 9bae3a813d
11 changed files with 50 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.example
+3
View File
@@ -0,0 +1,3 @@
VITE_APP_TITLE=My Blog
VITE_APP_SIGNATURE=By <b>me</b>
VITE_APP_LANG=en
.gitignore
+1
View File
@@ -37,3 +37,4 @@ __screenshots__/
# Vite # Vite
*.timestamp-*-*.mjs *.timestamp-*-*.mjs
.env
bun.lock
+1
View File
@@ -1,5 +1,6 @@
{ {
"lockfileVersion": 1, "lockfileVersion": 1,
"configVersion": 0,
"workspaces": { "workspaces": {
"": { "": {
"name": "md-blog", "name": "md-blog",
index.html
+2 -2
View File
@@ -1,10 +1,10 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="%VITE_APP_LANG%">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog</title> <title>%VITE_APP_TITLE%</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/articles/style.css" /> <link rel="stylesheet" type="text/css" href="/articles/style.css" />
src/components/PageFooter.vue
+16
View File
@@ -0,0 +1,16 @@
<script setup lang="ts">
import { REPOSITORY, NAME, VERSION } from '@/lib/meta'
</script>
<template>
<template v-if="$route.fullPath != '/'">
<RouterLink to="/">Back to home</RouterLink>
</template>
<hr />
<footer>
<small>
{{ new Date().getFullYear() }} - Made with <a :href="REPOSITORY">{{ NAME }}</a>
{{ VERSION }}
</small>
</footer>
</template>
src/lib/meta.ts
+2
View File
@@ -3,3 +3,5 @@ import packageJson from '@/../package.json'
export const NAME = packageJson.name export const NAME = packageJson.name
export const VERSION = packageJson.version export const VERSION = packageJson.version
export const REPOSITORY = packageJson.repository export const REPOSITORY = packageJson.repository
export const TITLE = import.meta.env.VITE_APP_TITLE
export const SIGNATURE = import.meta.env.VITE_APP_SIGNATURE
src/views/ArticleView.vue
+6 -16
View File
@@ -5,10 +5,11 @@ import { loadArticle } from '@lib/articles'
import { useRoute, onBeforeRouteUpdate, type RouteLocation } from 'vue-router' import { useRoute, onBeforeRouteUpdate, type RouteLocation } from 'vue-router'
import NotFoundView from './NotFoundView.vue' import NotFoundView from './NotFoundView.vue'
import { dateFromParts, simpleDateFormat } from '@lib/dates' import { dateFromParts, simpleDateFormat } from '@lib/dates'
import { NAME, REPOSITORY, VERSION } from '@lib/meta' import { SIGNATURE, TITLE } from '@lib/meta'
import PageFooter from '@components/PageFooter.vue'
const article = ref<Article | null>(null) const article = ref<Article | null>(null)
const loading = ref<Boolean>(true) const loading = ref<boolean>(true)
const route = useRoute() const route = useRoute()
async function loadPage(target: RouteLocation) { async function loadPage(target: RouteLocation) {
@@ -20,13 +21,10 @@ async function loadPage(target: RouteLocation) {
target.params.day as string, target.params.day as string,
), ),
) )
window.document.title = TITLE + ' — ' + (article.value?.metadata.title ?? 'Not Found')
loading.value = false loading.value = false
} }
function scrollTop() {
window.scrollTo(0, 0)
}
onBeforeMount(() => loadPage(route)) onBeforeMount(() => loadPage(route))
onBeforeRouteUpdate(loadPage) onBeforeRouteUpdate(loadPage)
</script> </script>
@@ -50,17 +48,9 @@ onBeforeRouteUpdate(loadPage)
</div> </div>
<img id="thumbnail" :src="article.metadata.thumbnail" alt="thumbnail" /> <img id="thumbnail" :src="article.metadata.thumbnail" alt="thumbnail" />
<div id="text" v-html="article.html"></div> <div id="text" v-html="article.html"></div>
<div id="signature">TODO signature</div> <div id="signature" v-html="SIGNATURE"></div>
<br /> <br />
<a @click.prevent="scrollTop" href="#">Go to top</a> - <PageFooter />
<RouterLink to="/">Back to home</RouterLink>
<hr />
<footer>
<small>
{{ new Date().getFullYear() }} - Made with <a :href="REPOSITORY">{{ NAME }}</a>
{{ VERSION }}
</small>
</footer>
</main> </main>
</template> </template>
</template> </template>
src/views/HomeView.vue
+6 -3
View File
@@ -2,20 +2,22 @@
import { ref, onBeforeMount } from 'vue' import { ref, onBeforeMount } from 'vue'
import { listArticles } from '@lib/articles' import { listArticles } from '@lib/articles'
import type { ArticleMetadata } from '@interfaces' import type { ArticleMetadata } from '@interfaces'
import { simpleDateFormat } from '@/lib/dates' import { simpleDateFormat } from '@lib/dates'
import { TITLE } from '@lib/meta'
import PageFooter from '@components/PageFooter.vue'
const articles = ref<ArticleMetadata[]>([]) const articles = ref<ArticleMetadata[]>([])
onBeforeMount(async () => { onBeforeMount(async () => {
const newArticles = await listArticles() const newArticles = await listArticles()
console.log(newArticles)
articles.value.splice(0, articles.value.length, ...newArticles) articles.value.splice(0, articles.value.length, ...newArticles)
window.document.title = TITLE + ' — Home'
}) })
</script> </script>
<template> <template>
<main> <main>
<h1 class="title">Articles</h1> <h1 class="title">{{ TITLE }}</h1>
<template v-for="(metadata, index) in articles" v-bind:key="index"> <template v-for="(metadata, index) in articles" v-bind:key="index">
<div v-if="!metadata.draft && metadata.path" class="article"> <div v-if="!metadata.draft && metadata.path" class="article">
<RouterLink :to="metadata.path"> <RouterLink :to="metadata.path">
@@ -27,5 +29,6 @@ onBeforeMount(async () => {
</RouterLink> </RouterLink>
</div> </div>
</template> </template>
<PageFooter />
</main> </main>
</template> </template>
src/views/NotFoundView.vue
+10 -2
View File
@@ -1,9 +1,17 @@
<script setup lang="ts"></script> <script setup lang="ts">
import { TITLE } from '@/lib/meta'
import PageFooter from '@components/PageFooter.vue'
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
window.document.title = TITLE + ' — Not Found'
})
</script>
<template> <template>
<main> <main>
<h1>Page not found</h1> <h1>Page not found</h1>
<RouterLink to="/">Back to home</RouterLink> <PageFooter />
</main> </main>
</template> </template>
tsconfig.app.json
+2 -1
View File
@@ -12,7 +12,8 @@
"@lib/*": ["./src/lib/*"], "@lib/*": ["./src/lib/*"],
"@views/*": ["./src/views/*"], "@views/*": ["./src/views/*"],
"@interfaces": ["./src/interfaces.ts"], "@interfaces": ["./src/interfaces.ts"],
"@articles/*": ["./articles/*"] "@articles/*": ["./articles/*"],
"@components/*": ["./src/components/*"]
}, },
// `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking. // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
vite.config.ts
+1
View File
@@ -15,6 +15,7 @@ export default defineConfig({
'@lib': fileURLToPath(new URL('./src/lib', import.meta.url)), '@lib': fileURLToPath(new URL('./src/lib', import.meta.url)),
'@articles': fileURLToPath(new URL('./articles', import.meta.url)), '@articles': fileURLToPath(new URL('./articles', import.meta.url)),
'@interfaces': fileURLToPath(new URL('./src/interfaces.ts', import.meta.url)), '@interfaces': fileURLToPath(new URL('./src/interfaces.ts', import.meta.url)),
'@components': fileURLToPath(new URL('./src/components', import.meta.url)),
}, },
}, },
assetsInclude: [/\.\/articles\/.*(?!\.md)'/], assetsInclude: [/\.\/articles\/.*(?!\.md)'/],