lunasqu.ee-nuxt/layouts/blog.vue

154 lines
4.0 KiB
Vue
Raw Normal View History

2022-10-16 09:37:13 +00:00
<template>
<div 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>
<li v-for="tag of tags">
2022-10-16 11:04:03 +00:00
<NuxtLink :to="'/blog/tags/' + tag.name">{{ tag.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
2022-10-16 09:37:13 +00:00
v-for="tag of tags"
2022-10-16 11:04:03 +00:00
:to="'/blog/tags/' + tag.name"
2022-10-16 09:37:13 +00:00
:style="{ fontSize: getFontSize(tag) }"
2022-10-16 11:04:03 +00:00
>{{ tag.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>
</div>
</template>
<script setup lang="ts">
2022-10-16 11:04:03 +00:00
import { BlogPostTag } from '~~/lib/types/post';
2022-10-16 09:37:13 +00:00
const { data: tags } = await useFetch('/api/blog/tags');
const { data: archive } = await useFetch('/api/blog/archive');
2022-10-16 13:28:47 +00:00
const { data: recents } = await useFetch('/api/blog', {
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;
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)
)) {
const monthName = monthNames[new Date(`${year}-${month}-01`).getMonth()];
links.push({
name: `${monthName} ${year}`,
href: `/blog/archive/${year}/${month}`,
});
}
}
return links;
});
const minTag = computed(() =>
tags.value.reduce<number>(
(min, current) => (min > current.count ? current.count : min),
2022-10-16 11:04:03 +00:00
1000
2022-10-16 09:37:13 +00:00
)
);
const maxTag = computed(() =>
tags.value.reduce<number>(
(max, current) => (max < current.count ? current.count : max),
0
)
);
function convertRange(value: number, r1: number[], r2: number[]) {
return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
}
2022-10-16 11:04:03 +00:00
const getFontSize = (tag: BlogPostTag): string => {
2022-10-16 09:37:13 +00:00
return convertRange(tag.count, [minTag.value, maxTag.value], [10, 20]) + 'px';
};
</script>