Updates

2024-04-20 20:32:12 +03:00 · 2024-04-20 20:32:12 +03:00 · 30a0c7b6a2
parent 4bf01118cc
commit 30a0c7b6a2
15 changed files with 10212 additions and 4537 deletions
--- a/assets/styles/components/_blog.scss
+++ b/assets/styles/components/_blog.scss
@ -1,10 +1,17 @@
 .blog {
+  --blog-background: #eeeeee;
+  --blog-section-title-color: #4f4f4f;
+  --blog-text-color: #555555;
+  --blog-link-color: #195f7a;
+  --blog-sidebar-link-color: #006891;
+  --blog-title-color: #000000;
+
  width: 100%;
  min-height: 100vh;
-  background-color: #eee;
+  background-color: var(--blog-background);

  a {
-    color: #258fb8;
+    color: var(--blog-link-color);
  }

  &__header {
@ -33,7 +40,7 @@

      a {
        padding: 1rem 1.2rem;
-        color: #006891;
+        color: var(--blog-sidebar-link-color);

        @media all and (max-width: 768px) {
          padding: 0.8rem 1rem;
@ -79,15 +86,16 @@

      h1 {
        font-size: 2rem;
+        color: var(--blog-title-color);
      }

      a {
-        color: #000;
+        color: var(--blog-title-color);
      }
    }

    &__content {
-      color: #555;
+      color: var(--blog-text-color);
      padding: 0 20px;

      line-height: 1.5;
@ -187,7 +195,7 @@

      a {
        letter-spacing: 2px;
-        color: #999;
+        color: var(--blog-section-title-color);
        line-height: 1em;
        text-shadow: 0 1px #fff;
        font-weight: bold;
@ -207,7 +215,7 @@
      gap: 1rem;

      .blog-post__tag {
-        color: #999;
+        color: var(--blog-section-title-color);
      }
    }

@ -235,7 +243,7 @@
      }

      &-title {
-        color: #999;
+        color: var(--blog-section-title-color);
        line-height: 1em;
        text-shadow: 0 1px #fff;
        font-weight: bold;
@ -253,7 +261,7 @@
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 2px;
-      color: #999;
+      color: var(--blog-section-title-color);
      margin-bottom: 1em;
      margin-left: 5px;
      line-height: 1em;
@ -275,7 +283,7 @@
    }

    a {
-      color: #006891;
+      color: var(--blog-sidebar-link-color);
    }

    ul {
@ -303,7 +311,7 @@
      line-height: 1em;

      a {
-        color: #999;
+        color: var(--blog-section-title-color);
        text-shadow: 0 1px #fff;
        font-weight: bold;
      }
@ -320,7 +328,7 @@
    }

    &__time {
-      color: #999 !important;
+      color: var(--blog-section-title-color);
      text-decoration: none;
      font-size: 0.85em;
      line-height: 1em;
--- a/components/blog-archive.vue
+++ b/components/blog-archive.vue
@ -21,7 +21,7 @@
 </template>

 <script setup lang="ts">
-import { BlogPost } from '~~/lib/types/post';
+import type { BlogPost } from '~~/lib/types/post';

 interface Archive {
  year: number;
@ -52,7 +52,7 @@ const yearGroup = computed<Archive[]>(() => {
    ?.sort((a, b) =>
      new Date(b.date)
        .toISOString()
-        .localeCompare(new Date(a.date).toISOString(), 'en', { numeric: true })
+        .localeCompare(new Date(a.date).toISOString(), 'en', { numeric: true }),
    )
    .forEach((post) => {
      const date = new Date(post.date);
--- a/layouts/blog.vue
+++ b/layouts/blog.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="blog">
+  <main class="blog">
    <Head>
      <Meta property="og:type" content="website" />
      <Meta property="og:title" content="Evert's Blog" />
@ -45,8 +45,10 @@
      <div class="blog__sidebar">
        <BlogSidebar title="Tags">
          <ul>
-            <li v-for="tag of tags">
-              <NuxtLink :to="'/blog/tags/' + tag.name">{{ tag.name }}</NuxtLink>
+            <li v-for="postTag of tags">
+              <NuxtLink :to="'/blog/tags/' + postTag.name">{{
+                postTag.name
+              }}</NuxtLink>
            </li>
          </ul>
        </BlogSidebar>
@ -54,10 +56,10 @@
        <BlogSidebar title="Tag cloud">
          <div class="tag-cloud">
            <NuxtLink
-              v-for="tag of tags"
-              :to="'/blog/tags/' + tag.name"
-              :style="{ fontSize: getFontSize(tag) }"
-              >{{ tag.name }}</NuxtLink
+              v-for="postTag of tags"
+              :to="'/blog/tags/' + postTag.name"
+              :style="{ fontSize: getFontSize(postTag) }"
+              >{{ postTag.name }}</NuxtLink
            >
          </div>
        </BlogSidebar>
@ -81,7 +83,7 @@
        </BlogSidebar>
      </div>
    </section>
-  </div>
+  </main>
 </template>

 <script setup lang="ts">
@ -116,7 +118,7 @@ const monthList = computed(() => {

  for (const year of Object.keys(res).sort((a, b) => Number(b) - Number(a))) {
    for (const month of Object.keys(res[year]).sort(
-      (a, b) => Number(b) - Number(a)
+      (a, b) => Number(b) - Number(a),
    )) {
      const monthName = monthNames[new Date(`${year}-${month}-01`).getMonth()];

@ -133,25 +135,28 @@ const monthList = computed(() => {
 const minTag = computed(() =>
  tags.value?.reduce<number>(
    (min, current) => (min > current.count ? current.count : min),
-    1000
-  )
+    1000,
+  ),
 );

 const maxTag = computed(() =>
  tags.value?.reduce<number>(
    (max, current) => (max < current.count ? current.count : max),
-    0
-  )
+    0,
+  ),
 );

 function convertRange(value: number, r1: number[], r2: number[]) {
  return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
 }

-const getFontSize = (tag: BlogPostTag): string => {
+const getFontSize = (postTag: BlogPostTag): string => {
  return (
-    convertRange(tag.count, [minTag.value ?? 0, maxTag.value ?? 0], [10, 20]) +
-    'px'
+    convertRange(
+      postTag.count,
+      [minTag.value ?? 0, maxTag.value ?? 0],
+      [10, 20],
+    ) + 'px'
  );
 };
 </script>
--- a/lib/blog/read-posts.ts
+++ b/lib/blog/read-posts.ts
@ -4,7 +4,7 @@ import yaml from 'yaml';
 import { marked } from 'marked';
 import hljs from 'highlight.js';
 import { getDateObject } from '../utils/date-object';
-import { ArchiveDto, BlogPost, BlogPostTag } from '../types/post';
+import type { ArchiveDto, BlogPost, BlogPostTag } from '../types/post';

 const dir = join('content', 'blog');

--- a/lib/utils/date-object.ts
+++ b/lib/utils/date-object.ts
@ -1,4 +1,4 @@
-import { BlogPost } from '../types/post';
+import type { BlogPost } from '../types/post';

 export function getDateObject(post: BlogPost) {
  const date = new Date(post.date);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,14 +9,14 @@
  },
  "devDependencies": {
    "@types/marked": "^5.0.1",
-    "marked": "^9.0.3",
-    "nuxt": "^3.7.3",
-    "prettier": "^3.0.3",
-    "yaml": "^2.3.2"
+    "marked": "^12.0.2",
+    "nuxt": "^3.11.2",
+    "prettier": "^3.2.5",
+    "yaml": "^2.4.1"
  },
  "dependencies": {
    "feed": "^4.2.2",
-    "highlight.js": "^11.8.0",
-    "sass": "^1.68.0"
+    "highlight.js": "^11.9.0",
+    "sass": "^1.75.0"
  }
 }
--- a/pages/blog/archive/[year]/[month]/[day]/index.vue
+++ b/pages/blog/archive/[year]/[month]/[day]/index.vue
@ -1,15 +1,17 @@
 <template>
-  <NuxtLayout name="blog">
-    <Head>
-      <Title
-        >Archive: {{ route.params.year }}/{{ route.params.month }}/{{
-          route.params.day
-        }}
-        | Evert's Blog | lunasqu.ee</Title
-      >
-    </Head>
-    <BlogArchive :posts="posts" />
-  </NuxtLayout>
+  <div style="display: contents">
+    <NuxtLayout name="blog">
+      <Head>
+        <Title
+          >Archive: {{ route.params.year }}/{{ route.params.month }}/{{
+            route.params.day
+          }}
+          | Evert's Blog | lunasqu.ee</Title
+        >
+      </Head>
+      <BlogArchive :posts="posts" />
+    </NuxtLayout>
+  </div>
 </template>

 <script setup lang="ts">
--- a/pages/blog/archive/[year]/[month]/index.vue
+++ b/pages/blog/archive/[year]/[month]/index.vue
@ -1,13 +1,15 @@
 <template>
-  <NuxtLayout name="blog">
-    <Head>
-      <Title
-        >Archive: {{ route.params.year }}/{{ route.params.month }} | Evert's
-        Blog | lunasqu.ee</Title
-      >
-    </Head>
-    <BlogArchive :posts="posts" />
-  </NuxtLayout>
+  <div style="display: contents">
+    <NuxtLayout name="blog">
+      <Head>
+        <Title
+          >Archive: {{ route.params.year }}/{{ route.params.month }} | Evert's
+          Blog | lunasqu.ee</Title
+        >
+      </Head>
+      <BlogArchive :posts="posts" />
+    </NuxtLayout>
+  </div>
 </template>

 <script setup lang="ts">
--- a/pages/blog/archive/[year]/index.vue
+++ b/pages/blog/archive/[year]/index.vue
@ -1,12 +1,14 @@
 <template>
-  <NuxtLayout name="blog">
-    <Head>
-      <Title
-        >Archive: {{ route.params.year }} | Evert's Blog | lunasqu.ee</Title
-      >
-    </Head>
-    <BlogArchive :posts="posts" />
-  </NuxtLayout>
+  <div style="display: contents">
+    <NuxtLayout name="blog">
+      <Head>
+        <Title
+          >Archive: {{ route.params.year }} | Evert's Blog | lunasqu.ee</Title
+        >
+      </Head>
+      <BlogArchive :posts="posts" />
+    </NuxtLayout>
+  </div>
 </template>

 <script setup lang="ts">
--- a/pages/blog/archive/index.vue
+++ b/pages/blog/archive/index.vue
@ -1,10 +1,12 @@
 <template>
-  <NuxtLayout name="blog">
-    <Head>
-      <Title>Archive | Evert's Blog | lunasqu.ee</Title>
-    </Head>
-    <BlogArchive :posts="posts" />
-  </NuxtLayout>
+  <div style="display: contents">
+    <NuxtLayout name="blog">
+      <Head>
+        <Title>Archive | Evert's Blog | lunasqu.ee</Title>
+      </Head>
+      <BlogArchive :posts="posts" />
+    </NuxtLayout>
+  </div>
 </template>

 <script setup lang="ts">
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@ -1,9 +1,11 @@
 <template>
-  <NuxtLayout name="blog">
-    <template v-for="post of posts">
-      <BlogPost :post="post" :detail="false" />
-    </template>
-  </NuxtLayout>
+  <div style="display: contents">
+    <NuxtLayout name="blog">
+      <template v-for="post of posts">
+        <BlogPost :post="post" :detail="false" />
+      </template>
+    </NuxtLayout>
+  </div>
 </template>

 <script setup lang="ts">
--- a/server/api/blog/archive.ts
+++ b/server/api/blog/archive.ts
@ -1,5 +1,5 @@
 import { getArchiveTree } from '~~/lib/blog/read-posts';
-import { BlogPost } from '~~/lib/types/post';
+import type { BlogPost } from '~~/lib/types/post';

 export default defineEventHandler(async (event) => {
  const query = getQuery(event);
--- a/server/api/blog/index.ts
+++ b/server/api/blog/index.ts
@ -1,5 +1,5 @@
 import { getFilteredBlogPosts } from '~~/lib/blog/read-posts';
-import { BlogPost } from '~~/lib/types/post';
+import type { BlogPost } from '~~/lib/types/post';

 export default defineEventHandler(async (event) => {
  const query = getQuery(event);
@ -40,7 +40,7 @@ export default defineEventHandler(async (event) => {
  const posts = await getFilteredBlogPosts(
    include,
    query.render !== 'false',
-    query.body === 'true'
+    query.body === 'true',
  );

  const limit = Number(query.limit) || 10;
--- a/server/routes/blog/atom.xml.ts
+++ b/server/routes/blog/atom.xml.ts
@ -10,7 +10,7 @@ export default defineEventHandler(async (event) => {
    description: 'Projects and Tutorials',
    id: BASE_URL,
    link: BASE_URL,
-    copyright: 'Evert "Diamond" Prants 2023',
+    copyright: 'Evert "Diamond" Prants 2024',
    language: 'en',
    updated: new Date(posts[0].date),
    generator: 'https://git.icynet.eu/evert/lunasqu.ee-nuxt',