158 lines
4.1 KiB
Vue
158 lines
4.1 KiB
Vue
<template>
|
|
<div class="blog">
|
|
<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" />
|
|
<Link
|
|
rel="alternate"
|
|
href="/blog/atom.xml"
|
|
title="Evert's Blog"
|
|
type="application/atom+xml"
|
|
/>
|
|
<Title>Evert's Blog | lunasqu.ee</Title>
|
|
</Head>
|
|
<header class="blog__header">
|
|
<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>
|
|
</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">
|
|
<NuxtLink :to="'/blog/tags/' + tag.name">{{ tag.name }}</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</BlogSidebar>
|
|
|
|
<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
|
|
>
|
|
</div>
|
|
</BlogSidebar>
|
|
|
|
<BlogSidebar title="Archive">
|
|
<ul>
|
|
<li v-for="archive of monthList">
|
|
<NuxtLink :href="archive.href">{{ archive.name }}</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</BlogSidebar>
|
|
|
|
<BlogSidebar title="Recent posts">
|
|
<ul>
|
|
<li v-for="recent of recents">
|
|
<NuxtLink :href="'/blog/' + recent.fullSlug">{{
|
|
recent.title
|
|
}}</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</BlogSidebar>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ArchiveDto, BlogPost, BlogPostTag } from '~~/lib/types/post';
|
|
|
|
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', {
|
|
key: 'recents',
|
|
params: { limit: 6, render: false },
|
|
});
|
|
|
|
const monthNames = [
|
|
'January',
|
|
'February',
|
|
'March',
|
|
'April',
|
|
'May',
|
|
'June',
|
|
'July',
|
|
'August',
|
|
'September',
|
|
'October',
|
|
'November',
|
|
'December',
|
|
];
|
|
|
|
const monthList = computed(() => {
|
|
let links = [];
|
|
const res = archive.value;
|
|
if (!res) return [];
|
|
|
|
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),
|
|
1000
|
|
)
|
|
);
|
|
|
|
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];
|
|
}
|
|
|
|
const getFontSize = (tag: BlogPostTag): string => {
|
|
return (
|
|
convertRange(tag.count, [minTag.value ?? 0, maxTag.value ?? 0], [10, 20]) +
|
|
'px'
|
|
);
|
|
};
|
|
</script>
|