icon-github-circled0xf09b
+
+ icon-rss0xf09e
+
icon-html50xf13b
diff --git a/assets/iconfont/font/lunasquee-site.eot b/assets/iconfont/font/lunasquee-site.eot
index 22b3e14..eed969e 100644
Binary files a/assets/iconfont/font/lunasquee-site.eot and b/assets/iconfont/font/lunasquee-site.eot differ
diff --git a/assets/iconfont/font/lunasquee-site.svg b/assets/iconfont/font/lunasquee-site.svg
index 835a1ad..1bebc70 100644
--- a/assets/iconfont/font/lunasquee-site.svg
+++ b/assets/iconfont/font/lunasquee-site.svg
@@ -46,8 +46,18 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/iconfont/font/lunasquee-site.ttf b/assets/iconfont/font/lunasquee-site.ttf
index 10be5e0..60a7464 100644
Binary files a/assets/iconfont/font/lunasquee-site.ttf and b/assets/iconfont/font/lunasquee-site.ttf differ
diff --git a/assets/iconfont/font/lunasquee-site.woff b/assets/iconfont/font/lunasquee-site.woff
index ad05ef6..d12e6a0 100644
Binary files a/assets/iconfont/font/lunasquee-site.woff and b/assets/iconfont/font/lunasquee-site.woff differ
diff --git a/assets/iconfont/font/lunasquee-site.woff2 b/assets/iconfont/font/lunasquee-site.woff2
index 6626e33..c6fa535 100644
Binary files a/assets/iconfont/font/lunasquee-site.woff2 and b/assets/iconfont/font/lunasquee-site.woff2 differ
diff --git a/assets/styles/components/_blog.scss b/assets/styles/components/_blog.scss
index 0d3f4e4..14a0ed9 100644
--- a/assets/styles/components/_blog.scss
+++ b/assets/styles/components/_blog.scss
@@ -9,13 +9,39 @@
&__header {
text-align: center;
- padding: 2rem;
+ padding: 1rem 0 0;
a {
color: #000;
}
}
+ &__nav {
+ margin-bottom: 1rem;
+
+ &-margin {
+ margin-left: auto;
+ }
+
+ ul {
+ list-style-type: none;
+ display: flex;
+ flex-direction: row;
+ max-width: calc(80rem + 2.4rem);
+ padding: 0;
+ margin: 0 auto;
+
+ a {
+ padding: 1rem 1.2rem;
+ color: #006891;
+
+ @media all and (max-width: 768px) {
+ padding: 0.8rem 1rem;
+ }
+ }
+ }
+ }
+
&__content {
display: flex;
gap: 1.5rem;
diff --git a/layouts/blog.vue b/layouts/blog.vue
index 4b88d9f..0bdd1f3 100644
--- a/layouts/blog.vue
+++ b/layouts/blog.vue
@@ -17,7 +17,24 @@
Evert's Blog | lunasqu.ee
@@ -52,6 +69,16 @@
+
+
+
+ -
+ {{
+ recent.title
+ }}
+
+
+
@@ -62,6 +89,10 @@ import { BlogPostTag } from '~~/lib/types/post';
const { data: tags } = await useFetch('/api/blog/tags');
const { data: archive } = await useFetch('/api/blog/archive');
+const { data: recents } = await useFetch('/api/blog', {
+ key: 'recents',
+ params: { limit: 6, render: false },
+});
const monthNames = [
'January',
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index df3332e..4ec804e 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -7,5 +7,8 @@
diff --git a/server/api/blog/index.ts b/server/api/blog/index.ts
index cf10d77..217fde6 100644
--- a/server/api/blog/index.ts
+++ b/server/api/blog/index.ts
@@ -32,9 +32,24 @@ export default defineEventHandler(async (event) => {
return true;
};
- return readBlogPosts(
+ const posts = await readBlogPosts(
include,
query.render !== 'false',
query.body === 'true'
);
+
+ const limit = Number(query.limit) || 10;
+ const pages = Math.ceil(posts.length / limit);
+ const page = Math.max(Math.min(Number(query.page) || 1, pages), 1);
+ const offset = (page - 1) * limit;
+
+ if (pages > 1) {
+ if (page + 1 <= pages) {
+ appendResponseHeader(event, 'X-Next-Page', (page + 1).toString());
+ }
+
+ appendResponseHeader(event, 'X-Last-Page', pages.toString());
+ }
+
+ return posts.slice(offset, offset + limit);
});