lunasqu.ee-nuxt/layouts/blog.vue

163 lines
4.2 KiB
Vue
Raw Normal View History

2022-10-16 09:37:13 +00:00
<template>
2024-04-20 17:32:12 +00:00
<main class="blog">
2022-10-16 11:04:03 +00:00
<Head>
<Meta property="og:type" content="website" />
<Meta property="og:title" content="Evert's Blog" />
<Meta property="og:url" content="https://lunasqu.ee/blog/index.html" />
<Meta property="og:site_name" content="Evert's Blog" />
<Meta property="og:locale" content="en_US" />
<Meta property="article:author" content="Evert Prants" />
<Meta name="twitter:card" content="summary" />
2022-10-16 12:50:21 +00:00
<Link
rel="alternate"
href="/blog/atom.xml"
title="Evert's Blog"
type="application/atom+xml"
/>
<Title>Evert's Blog | lunasqu.ee</Title>
2022-10-16 11:04:03 +00:00
</Head>
2022-10-16 09:37:13 +00:00
<header class="blog__header">
2022-10-16 13:28:47 +00:00
<nav class="blog__nav">
<ul>
<li>
<NuxtLink to="/"><span class="icon-home"></span>Home</NuxtLink>
</li>
<li>
<NuxtLink to="/blog/archive"
><span class="icon-archive"></span>Archive</NuxtLink
>
</li>
<li class="blog__nav-margin">
<a href="/blog/atom.xml" target="_blank"
><span class="icon-rss"></span>Atom</a
>
</li>
</ul>
</nav>
<h1><NuxtLink to="/blog">Evert's Blog</NuxtLink></h1>
2022-10-16 09:37:13 +00:00
</header>
<section class="blog__content">
<div class="blog__main-col">
<slot></slot>
</div>
<div class="blog__sidebar">
<BlogSidebar title="Tags">
<ul>
2024-04-20 17:32:12 +00:00
<li v-for="postTag of tags">
<NuxtLink :to="'/blog/tags/' + postTag.name">{{
postTag.name
}}</NuxtLink>
2022-10-16 09:37:13 +00:00
</li>
</ul>
</BlogSidebar>
<BlogSidebar title="Tag cloud">
<div class="tag-cloud">
2022-10-16 11:04:03 +00:00
<NuxtLink
2024-04-20 17:32:12 +00:00
v-for="postTag of tags"
:to="'/blog/tags/' + postTag.name"
:style="{ fontSize: getFontSize(postTag) }"
>{{ postTag.name }}</NuxtLink
2022-10-16 09:37:13 +00:00
>
</div>
</BlogSidebar>
<BlogSidebar title="Archive">
<ul>
<li v-for="archive of monthList">
2022-10-16 11:04:03 +00:00
<NuxtLink :href="archive.href">{{ archive.name }}</NuxtLink>
2022-10-16 09:37:13 +00:00
</li>
</ul>
</BlogSidebar>
2022-10-16 13:28:47 +00:00
<BlogSidebar title="Recent posts">
<ul>
<li v-for="recent of recents">
<NuxtLink :href="'/blog/' + recent.fullSlug">{{
recent.title
}}</NuxtLink>
</li>
</ul>
</BlogSidebar>
2022-10-16 09:37:13 +00:00
</div>
</section>
2024-04-20 17:32:12 +00:00
</main>
2022-10-16 09:37:13 +00:00
</template>
<script setup lang="ts">
2022-12-04 10:12:29 +00:00
import type { ArchiveDto, BlogPost, BlogPostTag } from '~~/lib/types/post';
2022-10-16 11:04:03 +00:00
2022-12-04 10:12:29 +00:00
const { data: tags } = await useFetch<BlogPostTag[]>('/api/blog/tags');
const { data: archive } = await useFetch<ArchiveDto>('/api/blog/archive');
const { data: recents } = await useFetch<BlogPost[]>('/api/blog', {
2022-10-16 13:28:47 +00:00
key: 'recents',
params: { limit: 6, render: false },
});
2022-10-16 09:37:13 +00:00
const monthNames = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
const monthList = computed(() => {
let links = [];
const res = archive.value;
2022-12-04 10:12:29 +00:00
if (!res) return [];
2022-10-16 09:37:13 +00:00
for (const year of Object.keys(res).sort((a, b) => Number(b) - Number(a))) {
for (const month of Object.keys(res[year]).sort(
2024-04-20 17:32:12 +00:00
(a, b) => Number(b) - Number(a),
2022-10-16 09:37:13 +00:00
)) {
const monthName = monthNames[new Date(`${year}-${month}-01`).getMonth()];
links.push({
name: `${monthName} ${year}`,
href: `/blog/archive/${year}/${month}`,
});
}
}
return links;
});
const minTag = computed(() =>
2022-12-04 10:12:29 +00:00
tags.value?.reduce<number>(
2022-10-16 09:37:13 +00:00
(min, current) => (min > current.count ? current.count : min),
2024-04-20 17:32:12 +00:00
1000,
),
2022-10-16 09:37:13 +00:00
);
const maxTag = computed(() =>
2022-12-04 10:12:29 +00:00
tags.value?.reduce<number>(
2022-10-16 09:37:13 +00:00
(max, current) => (max < current.count ? current.count : max),
2024-04-20 17:32:12 +00:00
0,
),
2022-10-16 09:37:13 +00:00
);
function convertRange(value: number, r1: number[], r2: number[]) {
return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
}
2024-04-20 17:32:12 +00:00
const getFontSize = (postTag: BlogPostTag): string => {
2022-12-04 10:12:29 +00:00
return (
2024-04-20 17:32:12 +00:00
convertRange(
postTag.count,
[minTag.value ?? 0, maxTag.value ?? 0],
[10, 20],
) + 'px'
2022-12-04 10:12:29 +00:00
);
2022-10-16 09:37:13 +00:00
};
</script>