simple layout and css

2026-04-24 23:14:16 +02:00
parent 9109678195
commit 8bec21c12d
4 changed files with 31 additions and 22 deletions
@@ -1,10 +1,13 @@
-<!DOCTYPE html>
-<html lang="">
+<!doctype html>
+<html lang="en">
  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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>
  <body>
    <div id="app"></div>
@@ -8,9 +8,11 @@ import { dateFromParts, simpleDateFormat } from '@lib/dates'
 import { NAME, REPOSITORY, VERSION } from '@lib/meta'

 const article = ref<Article | null>(null)
+const loading = ref<Boolean>(true)
 const route = useRoute()

 async function loadPage(target: RouteLocation) {
+  loading.value = true
  article.value = await loadArticle(
    dateFromParts(
      target.params.year as string,
@@ -18,6 +20,7 @@ async function loadPage(target: RouteLocation) {
      target.params.day as string,
    ),
  )
+  loading.value = false
 }

 function scrollTop() {
@@ -29,7 +32,10 @@ onBeforeRouteUpdate(loadPage)
 </script>

 <template>
-  <template v-if="!article">
+  <template v-if="loading">
+    <main></main>
+  </template>
+  <template v-else-if="!article">
    <NotFoundView />
  </template>
  <template v-else>
@@ -42,8 +48,7 @@ onBeforeRouteUpdate(loadPage)
          {{ simpleDateFormat(article.metadata.date) }}
        </span>
      </div>
-      <img :src="article.metadata.thumbnail" alt="thumbnail" />
-    </main>
+      <img id="thumbnail" :src="article.metadata.thumbnail" alt="thumbnail" />
      <div id="text" v-html="article.html"></div>
      <div id="signature">TODO signature</div>
      <br />
@@ -56,5 +61,6 @@ onBeforeRouteUpdate(loadPage)
          {{ VERSION }}
        </small>
      </footer>
+    </main>
  </template>
 </template>
@@ -17,7 +17,7 @@ onBeforeMount(async () => {
  <main>
    <h1 class="title">Articles</h1>
    <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">
          <h3>{{ metadata.title }}</h3>
          <span class="time"