This commit is contained in:
Evert Prants 2024-04-20 20:32:12 +03:00
parent 4bf01118cc
commit 30a0c7b6a2
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
15 changed files with 10212 additions and 4537 deletions

View File

@ -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;

View File

@ -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);

View File

@ -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>

View File

@ -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');

View File

@ -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);

14528
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"
}
}

View File

@ -1,4 +1,5 @@
<template>
<div style="display: contents">
<NuxtLayout name="blog">
<Head>
<Title
@ -10,6 +11,7 @@
</Head>
<BlogArchive :posts="posts" />
</NuxtLayout>
</div>
</template>
<script setup lang="ts">

View File

@ -1,4 +1,5 @@
<template>
<div style="display: contents">
<NuxtLayout name="blog">
<Head>
<Title
@ -8,6 +9,7 @@
</Head>
<BlogArchive :posts="posts" />
</NuxtLayout>
</div>
</template>
<script setup lang="ts">

View File

@ -1,4 +1,5 @@
<template>
<div style="display: contents">
<NuxtLayout name="blog">
<Head>
<Title
@ -7,6 +8,7 @@
</Head>
<BlogArchive :posts="posts" />
</NuxtLayout>
</div>
</template>
<script setup lang="ts">

View File

@ -1,10 +1,12 @@
<template>
<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">

View File

@ -1,9 +1,11 @@
<template>
<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">

View File

@ -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);

View File

@ -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;

View File

@ -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',