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

simple layout and css

Browse Source
This commit is contained in:
klemek
2026-04-24 23:14:16 +02:00
parent 9109678195
commit 8bec21c12d
4 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
articles
+1 -1
Submodule articles updated: ba3fd65916...b70c92046a
index.html
+9 -6
View File
@@ -1,10 +1,13 @@
<!DOCTYPE html> <!doctype html>
<html lang=""> <html lang="en">
<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>Vite App</title> <title>Blog</title>
<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 rel="stylesheet" type="text/css" href="/articles/style.css" />
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
src/views/ArticleView.vue
+20 -14
View File
@@ -8,9 +8,11 @@ import { dateFromParts, simpleDateFormat } from '@lib/dates'
import { NAME, REPOSITORY, VERSION } from '@lib/meta' import { NAME, REPOSITORY, VERSION } from '@lib/meta'
const article = ref<Article | null>(null) const article = ref<Article | null>(null)
const loading = ref<Boolean>(true)
const route = useRoute() const route = useRoute()
async function loadPage(target: RouteLocation) { async function loadPage(target: RouteLocation) {
loading.value = true
article.value = await loadArticle( article.value = await loadArticle(
dateFromParts( dateFromParts(
target.params.year as string, target.params.year as string,
@@ -18,6 +20,7 @@ async function loadPage(target: RouteLocation) {
target.params.day as string, target.params.day as string,
), ),
) )
loading.value = false
} }
function scrollTop() { function scrollTop() {
@@ -29,7 +32,10 @@ onBeforeRouteUpdate(loadPage)
</script> </script>
<template> <template>
<template v-if="!article"> <template v-if="loading">
<main></main>
</template>
<template v-else-if="!article">
<NotFoundView /> <NotFoundView />
</template> </template>
<template v-else> <template v-else>
@@ -42,19 +48,19 @@ onBeforeRouteUpdate(loadPage)
{{ simpleDateFormat(article.metadata.date) }} {{ simpleDateFormat(article.metadata.date) }}
</span> </span>
</div> </div>
<img :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="signature">TODO signature</div>
<br />
<a @click.prevent="scrollTop" href="#">Go to top</a> -
<RouterLink to="/">Back to home</RouterLink>
<hr />
<footer>
<small>
{{ new Date().getFullYear() }} - Made with <a :href="REPOSITORY">{{ NAME }}</a>
{{ VERSION }}
</small>
</footer>
</main> </main>
<div id="text" v-html="article.html"></div>
<div id="signature">TODO signature</div>
<br />
<a @click.prevent="scrollTop" href="#">Go to top</a> -
<RouterLink to="/">Back to home</RouterLink>
<hr />
<footer>
<small>
{{ new Date().getFullYear() }} - Made with <a :href="REPOSITORY">{{ NAME }}</a>
{{ VERSION }}
</small>
</footer>
</template> </template>
</template> </template>
src/views/HomeView.vue
+1 -1
View File
@@ -17,7 +17,7 @@ onBeforeMount(async () => {
<main> <main>
<h1 class="title">Articles</h1> <h1 class="title">Articles</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"> <div v-if="!metadata.draft && metadata.path" class="article">
<RouterLink :to="metadata.path"> <RouterLink :to="metadata.path">
<h3>{{ metadata.title }}</h3> <h3>{{ metadata.title }}</h3>
<span class="time" <span class="time"