Updates
This commit is contained in:
parent
4bf01118cc
commit
30a0c7b6a2
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
@ -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');
|
||||
|
||||
|
@ -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
14528
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
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"
|
||||
}
|
||||
}
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -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',
|
||||
|
Loading…
Reference in New Issue
Block a user