evert/lunasqu.ee-nuxt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updates

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/styles/components/_blog.scss
View File

@ -1,10 +1,17 @@
.blog { .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%; width: 100%;
min-height: 100vh; min-height: 100vh;
background-color: #eee; background-color: var(--blog-background);
a { a {
color: #258fb8; color: var(--blog-link-color);
} }
&__header { &__header {
@ -33,7 +40,7 @@
a { a {
padding: 1rem 1.2rem; padding: 1rem 1.2rem;
color: #006891; color: var(--blog-sidebar-link-color);
@media all and (max-width: 768px) { @media all and (max-width: 768px) {
padding: 0.8rem 1rem; padding: 0.8rem 1rem;
@ -79,15 +86,16 @@
h1 { h1 {
font-size: 2rem; font-size: 2rem;
color: var(--blog-title-color);
} }
a { a {
color: #000; color: var(--blog-title-color);
} }
} }
&__content { &__content {
color: #555; color: var(--blog-text-color);
padding: 0 20px; padding: 0 20px;
line-height: 1.5; line-height: 1.5;
@ -187,7 +195,7 @@
a { a {
letter-spacing: 2px; letter-spacing: 2px;
color: #999; color: var(--blog-section-title-color);
line-height: 1em; line-height: 1em;
text-shadow: 0 1px #fff; text-shadow: 0 1px #fff;
font-weight: bold; font-weight: bold;
@ -207,7 +215,7 @@
gap: 1rem; gap: 1rem;
.blog-post__tag { .blog-post__tag {
color: #999; color: var(--blog-section-title-color);
} }
} }
@ -235,7 +243,7 @@
} }
&-title { &-title {
color: #999; color: var(--blog-section-title-color);
line-height: 1em; line-height: 1em;
text-shadow: 0 1px #fff; text-shadow: 0 1px #fff;
font-weight: bold; font-weight: bold;
@ -253,7 +261,7 @@
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;
color: #999; color: var(--blog-section-title-color);
margin-bottom: 1em; margin-bottom: 1em;
margin-left: 5px; margin-left: 5px;
line-height: 1em; line-height: 1em;
@ -275,7 +283,7 @@
} }
a { a {
color: #006891; color: var(--blog-sidebar-link-color);
} }
ul { ul {
@ -303,7 +311,7 @@
line-height: 1em; line-height: 1em;
a { a {
color: #999; color: var(--blog-section-title-color);
text-shadow: 0 1px #fff; text-shadow: 0 1px #fff;
font-weight: bold; font-weight: bold;
} }
@ -320,7 +328,7 @@
} }
&__time { &__time {
color: #999 !important; color: var(--blog-section-title-color);
text-decoration: none; text-decoration: none;
font-size: 0.85em; font-size: 0.85em;
line-height: 1em; line-height: 1em;

4
components/blog-archive.vue
View File

@ -21,7 +21,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { BlogPost } from '~~/lib/types/post'; import type { BlogPost } from '~~/lib/types/post';
interface Archive { interface Archive {
year: number; year: number;
@ -52,7 +52,7 @@ const yearGroup = computed<Archive[]>(() => {
?.sort((a, b) => ?.sort((a, b) =>
new Date(b.date) new Date(b.date)
.toISOString() .toISOString()
.localeCompare(new Date(a.date).toISOString(), 'en', { numeric: true }) .localeCompare(new Date(a.date).toISOString(), 'en', { numeric: true }),
) )
.forEach((post) => { .forEach((post) => {
const date = new Date(post.date); const date = new Date(post.date);

37
layouts/blog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="blog"> <main class="blog">
<Head> <Head>
<Meta property="og:type" content="website" /> <Meta property="og:type" content="website" />
<Meta property="og:title" content="Evert's Blog" /> <Meta property="og:title" content="Evert's Blog" />
@ -45,8 +45,10 @@
<div class="blog__sidebar"> <div class="blog__sidebar">
<BlogSidebar title="Tags"> <BlogSidebar title="Tags">
<ul> <ul>
<li v-for="tag of tags"> <li v-for="postTag of tags">
<NuxtLink :to="'/blog/tags/' + tag.name">{{ tag.name }}</NuxtLink> <NuxtLink :to="'/blog/tags/' + postTag.name">{{
postTag.name
}}</NuxtLink>
</li> </li>
</ul> </ul>
</BlogSidebar> </BlogSidebar>
@ -54,10 +56,10 @@
<BlogSidebar title="Tag cloud"> <BlogSidebar title="Tag cloud">
<div class="tag-cloud"> <div class="tag-cloud">
<NuxtLink <NuxtLink
v-for="tag of tags" v-for="postTag of tags"
:to="'/blog/tags/' + tag.name" :to="'/blog/tags/' + postTag.name"
:style="{ fontSize: getFontSize(tag) }" :style="{ fontSize: getFontSize(postTag) }"
>{{ tag.name }}</NuxtLink >{{ postTag.name }}</NuxtLink
> >
</div> </div>
</BlogSidebar> </BlogSidebar>
@ -81,7 +83,7 @@
</BlogSidebar> </BlogSidebar>
</div> </div>
</section> </section>
</div> </main>
</template> </template>
<script setup lang="ts"> <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 year of Object.keys(res).sort((a, b) => Number(b) - Number(a))) {
for (const month of Object.keys(res[year]).sort( 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()]; const monthName = monthNames[new Date(`${year}-${month}-01`).getMonth()];
@ -133,25 +135,28 @@ const monthList = computed(() => {
const minTag = computed(() => const minTag = computed(() =>
tags.value?.reduce<number>( tags.value?.reduce<number>(
(min, current) => (min > current.count ? current.count : min), (min, current) => (min > current.count ? current.count : min),
1000 1000,
) ),
); );
const maxTag = computed(() => const maxTag = computed(() =>
tags.value?.reduce<number>( tags.value?.reduce<number>(
(max, current) => (max < current.count ? current.count : max), (max, current) => (max < current.count ? current.count : max),
0 0,
) ),
); );
function convertRange(value: number, r1: number[], r2: number[]) { function convertRange(value: number, r1: number[], r2: number[]) {
return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0]; 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 ( return (
convertRange(tag.count, [minTag.value ?? 0, maxTag.value ?? 0], [10, 20]) + convertRange(
'px' postTag.count,
[minTag.value ?? 0, maxTag.value ?? 0],
[10, 20],
) + 'px'
); );
}; };
</script> </script>

2
lib/blog/read-posts.ts
View File

@ -4,7 +4,7 @@ import yaml from 'yaml';
import { marked } from 'marked'; import { marked } from 'marked';
import hljs from 'highlight.js'; import hljs from 'highlight.js';
import { getDateObject } from '../utils/date-object'; 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'); const dir = join('content', 'blog');

2
lib/utils/date-object.ts
View File

@ -1,4 +1,4 @@
import { BlogPost } from '../types/post'; import type { BlogPost } from '../types/post';
export function getDateObject(post: BlogPost) { export function getDateObject(post: BlogPost) {
const date = new Date(post.date); const date = new Date(post.date);

14564
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
package.json
View File

@ -9,14 +9,14 @@
}, },
"devDependencies": { "devDependencies": {
"@types/marked": "^5.0.1", "@types/marked": "^5.0.1",
"marked": "^9.0.3", "marked": "^12.0.2",
"nuxt": "^3.7.3", "nuxt": "^3.11.2",
"prettier": "^3.0.3", "prettier": "^3.2.5",
"yaml": "^2.3.2" "yaml": "^2.4.1"
}, },
"dependencies": { "dependencies": {
"feed": "^4.2.2", "feed": "^4.2.2",
"highlight.js": "^11.8.0", "highlight.js": "^11.9.0",
"sass": "^1.68.0" "sass": "^1.75.0"
} }
} }

24
pages/blog/archive/[year]/[month]/[day]/index.vue
View File

@ -1,15 +1,17 @@
<template> <template>
<NuxtLayout name="blog"> <div style="display: contents">
<Head> <NuxtLayout name="blog">
<Title <Head>
>Archive: {{ route.params.year }}/{{ route.params.month }}/{{ <Title
route.params.day >Archive: {{ route.params.year }}/{{ route.params.month }}/{{
}} route.params.day
| Evert's Blog | lunasqu.ee</Title }}
> | Evert's Blog | lunasqu.ee</Title
</Head> >
<BlogArchive :posts="posts" /> </Head>
</NuxtLayout> <BlogArchive :posts="posts" />
</NuxtLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

20
pages/blog/archive/[year]/[month]/index.vue
View File

@ -1,13 +1,15 @@
<template> <template>
<NuxtLayout name="blog"> <div style="display: contents">
<Head> <NuxtLayout name="blog">
<Title <Head>
>Archive: {{ route.params.year }}/{{ route.params.month }} | Evert's <Title
Blog | lunasqu.ee</Title >Archive: {{ route.params.year }}/{{ route.params.month }} | Evert's
> Blog | lunasqu.ee</Title
</Head> >
<BlogArchive :posts="posts" /> </Head>
</NuxtLayout> <BlogArchive :posts="posts" />
</NuxtLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

18
pages/blog/archive/[year]/index.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<NuxtLayout name="blog"> <div style="display: contents">
<Head> <NuxtLayout name="blog">
<Title <Head>
>Archive: {{ route.params.year }} | Evert's Blog | lunasqu.ee</Title <Title
> >Archive: {{ route.params.year }} | Evert's Blog | lunasqu.ee</Title
</Head> >
<BlogArchive :posts="posts" /> </Head>
</NuxtLayout> <BlogArchive :posts="posts" />
</NuxtLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

14
pages/blog/archive/index.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<NuxtLayout name="blog"> <div style="display: contents">
<Head> <NuxtLayout name="blog">
<Title>Archive | Evert's Blog | lunasqu.ee</Title> <Head>
</Head> <Title>Archive | Evert's Blog | lunasqu.ee</Title>
<BlogArchive :posts="posts" /> </Head>
</NuxtLayout> <BlogArchive :posts="posts" />
</NuxtLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

12
pages/blog/index.vue
View File

@ -1,9 +1,11 @@
<template> <template>
<NuxtLayout name="blog"> <div style="display: contents">
<template v-for="post of posts"> <NuxtLayout name="blog">
<BlogPost :post="post" :detail="false" /> <template v-for="post of posts">
</template> <BlogPost :post="post" :detail="false" />
</NuxtLayout> </template>
</NuxtLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

2
server/api/blog/archive.ts
View File

@ -1,5 +1,5 @@
import { getArchiveTree } from '~~/lib/blog/read-posts'; 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) => { export default defineEventHandler(async (event) => {
const query = getQuery(event); const query = getQuery(event);

4
server/api/blog/index.ts
View File

@ -1,5 +1,5 @@
import { getFilteredBlogPosts } from '~~/lib/blog/read-posts'; 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) => { export default defineEventHandler(async (event) => {
const query = getQuery(event); const query = getQuery(event);
@ -40,7 +40,7 @@ export default defineEventHandler(async (event) => {
const posts = await getFilteredBlogPosts( const posts = await getFilteredBlogPosts(
include, include,
query.render !== 'false', query.render !== 'false',
query.body === 'true' query.body === 'true',
); );
const limit = Number(query.limit) || 10; const limit = Number(query.limit) || 10;

2
server/routes/blog/atom.xml.ts
View File

@ -10,7 +10,7 @@ export default defineEventHandler(async (event) => {
description: 'Projects and Tutorials', description: 'Projects and Tutorials',
id: BASE_URL, id: BASE_URL,
link: BASE_URL, link: BASE_URL,
copyright: 'Evert "Diamond" Prants 2023', copyright: 'Evert "Diamond" Prants 2024',
language: 'en', language: 'en',
updated: new Date(posts[0].date), updated: new Date(posts[0].date),
generator: 'https://git.icynet.eu/evert/lunasqu.ee-nuxt', generator: 'https://git.icynet.eu/evert/lunasqu.ee-nuxt',