header

assets/iconfont/LICENSE.txt

@@ -10,3 +10,12 @@ Font license info
    Homepage:  http://fortawesome.github.com/Font-Awesome/
 
 
+## Entypo
+
+   Copyright (C) 2012 by Daniel Bruce
+
+   Author:    Daniel Bruce
+   License:   SIL (http://scripts.sil.org/OFL)
+   Homepage:  http://www.entypo.com
+
+

assets/iconfont/config.json

@@ -264,20 +264,6 @@
         "react"
       ]
     },
-    {
-      "uid": "803c4a2ad9e52b5e2b1a0191d20f02b0",
-      "css": "pleroma",
-      "code": 59410,
-      "src": "custom_icons",
-      "selected": true,
-      "svg": {
-        "path": "M559 741.7V980.5H725.8A74.8 74.8 0 0 0 800.7 905.7V741.7ZM559 19.4V500H725.8A74.8 74.8 0 0 0 800.7 425.2V19.4ZM274.1 19.4A74.8 74.8 0 0 0 199.3 94.3V980.5H438.1V19.4Z",
-        "width": 1000
-      },
-      "search": [
-        "pleroma"
-      ]
-    },
     {
       "uid": "f08ba9f0e8f9b426a92efcaa59c1e932",
       "css": "reddit-alien",
@@ -303,6 +289,50 @@
       "search": [
         "nuxt"
       ]
+    },
+    {
+      "uid": "d7271d490b71df4311e32cdacae8b331",
+      "css": "home",
+      "code": 59412,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "9dd9e835aebe1060ba7190ad2b2ed951",
+      "css": "search",
+      "code": 59413,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "803c4a2ad9e52b5e2b1a0191d20f02b0",
+      "css": "pleroma",
+      "code": 59410,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M559 741.7V980.5H725.8A74.8 74.8 0 0 0 800.7 905.7V741.7ZM559 19.4V500H725.8A74.8 74.8 0 0 0 800.7 425.2V19.4ZM274.1 19.4A74.8 74.8 0 0 0 199.3 94.3V980.5H438.1V19.4Z",
+        "width": 1000
+      },
+      "search": [
+        "pleroma"
+      ]
+    },
+    {
+      "uid": "72b1277834cba5b7944b0a6cac7ddb0d",
+      "css": "rss",
+      "code": 61598,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "91426c82d94428a33353e495418435e3",
+      "css": "share",
+      "code": 59414,
+      "src": "entypo"
+    },
+    {
+      "uid": "96ea1be71f597a5bdfc8f791ada4f651",
+      "css": "archive",
+      "code": 59415,
+      "src": "entypo"
     }
   ]
 }

assets/iconfont/css/lunasquee-site-codes.css

@@ -19,6 +19,11 @@
 .icon-react:before { content: '\e811'; } /* '' */
 .icon-pleroma:before { content: '\e812'; } /* '' */
 .icon-nuxt:before { content: '\e813'; } /* '' */
+.icon-home:before { content: '\e814'; } /* '' */
+.icon-search:before { content: '\e815'; } /* '' */
+.icon-share:before { content: '\e816'; } /* '' */
+.icon-archive:before { content: '\e817'; } /* '' */
 .icon-github-circled:before { content: '\f09b'; } /* '' */
+.icon-rss:before { content: '\f09e'; } /* '' */
 .icon-html5:before { content: '\f13b'; } /* '' */
 .icon-reddit-alien:before { content: '\f281'; } /* '' */

assets/iconfont/css/lunasquee-site-ie7-codes.css

@@ -19,6 +19,11 @@
 .icon-react { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-pleroma { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-nuxt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-home { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-search { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-share { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-archive { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-github-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-rss { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-html5 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reddit-alien { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

assets/iconfont/css/lunasquee-site-ie7.css

@@ -30,6 +30,11 @@
 .icon-react { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-pleroma { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-nuxt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-home { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-search { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-share { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-archive { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-github-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-rss { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-html5 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reddit-alien { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

assets/iconfont/css/lunasquee-site.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'lunasquee-site';
-  src: url('../font/lunasquee-site.eot?60049943');
+  src: url('../font/lunasquee-site.eot?93518691');
-  src: url('../font/lunasquee-site.eot?60049943#iefix') format('embedded-opentype'),
+  src: url('../font/lunasquee-site.eot?93518691#iefix') format('embedded-opentype'),
-       url('../font/lunasquee-site.woff2?60049943') format('woff2'),
+       url('../font/lunasquee-site.woff2?93518691') format('woff2'),
-       url('../font/lunasquee-site.woff?60049943') format('woff'),
+       url('../font/lunasquee-site.woff?93518691') format('woff'),
-       url('../font/lunasquee-site.ttf?60049943') format('truetype'),
+       url('../font/lunasquee-site.ttf?93518691') format('truetype'),
-       url('../font/lunasquee-site.svg?60049943#lunasquee-site') format('svg');
+       url('../font/lunasquee-site.svg?93518691#lunasquee-site') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'lunasquee-site';
-    src: url('../font/lunasquee-site.svg?60049943#lunasquee-site') format('svg');
+    src: url('../font/lunasquee-site.svg?93518691#lunasquee-site') format('svg');
   }
 }
 */
@@ -74,6 +74,11 @@
 .icon-react:before { content: '\e811'; } /* '' */
 .icon-pleroma:before { content: '\e812'; } /* '' */
 .icon-nuxt:before { content: '\e813'; } /* '' */
+.icon-home:before { content: '\e814'; } /* '' */
+.icon-search:before { content: '\e815'; } /* '' */
+.icon-share:before { content: '\e816'; } /* '' */
+.icon-archive:before { content: '\e817'; } /* '' */
 .icon-github-circled:before { content: '\f09b'; } /* '' */
+.icon-rss:before { content: '\f09e'; } /* '' */
 .icon-html5:before { content: '\f13b'; } /* '' */
 .icon-reddit-alien:before { content: '\f281'; } /* '' */

assets/iconfont/demo.html

@@ -146,11 +146,11 @@
     }
     @font-face {
       font-family: 'lunasquee-site';
-      src: url('./font/lunasquee-site.eot?41812463');
+      src: url('./font/lunasquee-site.eot?14312899');
-      src: url('./font/lunasquee-site.eot?41812463#iefix') format('embedded-opentype'),
+      src: url('./font/lunasquee-site.eot?14312899#iefix') format('embedded-opentype'),
-           url('./font/lunasquee-site.woff?41812463') format('woff'),
+           url('./font/lunasquee-site.woff?14312899') format('woff'),
-           url('./font/lunasquee-site.ttf?41812463') format('truetype'),
+           url('./font/lunasquee-site.ttf?14312899') format('truetype'),
-           url('./font/lunasquee-site.svg?41812463#lunasquee-site') format('svg');
+           url('./font/lunasquee-site.svg?14312899#lunasquee-site') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -280,10 +280,27 @@
           <i class="demo-icon icon-nuxt">&#xe813;</i> <span class="i-name">icon-nuxt</span><span class="i-code">0xe813</span>
         </div>
       </div>
+      <div class="row">
+        <div class="span3" title="Code: 0xe814">
+          <i class="demo-icon icon-home">&#xe814;</i> <span class="i-name">icon-home</span><span class="i-code">0xe814</span>
+        </div>
+        <div class="span3" title="Code: 0xe815">
+          <i class="demo-icon icon-search">&#xe815;</i> <span class="i-name">icon-search</span><span class="i-code">0xe815</span>
+        </div>
+        <div class="span3" title="Code: 0xe816">
+          <i class="demo-icon icon-share">&#xe816;</i> <span class="i-name">icon-share</span><span class="i-code">0xe816</span>
+        </div>
+        <div class="span3" title="Code: 0xe817">
+          <i class="demo-icon icon-archive">&#xe817;</i> <span class="i-name">icon-archive</span><span class="i-code">0xe817</span>
+        </div>
+      </div>
       <div class="row">
         <div class="span3" title="Code: 0xf09b">
           <i class="demo-icon icon-github-circled">&#xf09b;</i> <span class="i-name">icon-github-circled</span><span class="i-code">0xf09b</span>
         </div>
+        <div class="span3" title="Code: 0xf09e">
+          <i class="demo-icon icon-rss">&#xf09e;</i> <span class="i-name">icon-rss</span><span class="i-code">0xf09e</span>
+        </div>
         <div class="span3" title="Code: 0xf13b">
           <i class="demo-icon icon-html5">&#xf13b;</i> <span class="i-name">icon-html5</span><span class="i-code">0xf13b</span>
         </div>

assets/iconfont/font/lunasquee-site.svg

@@ -46,8 +46,18 @@
 
 <glyph glyph-name="nuxt" unicode="&#xe813;" d="M633 532c23 39 81 39 104 0l250-425c23-39-6-88-52-88h-500c-46 0-75 49-52 88z m-191 114c-28 47-97 47-125 0l-302-520c-28-48 7-107 62-107h236c-23 20-32 56-14 87l229 392z" horiz-adv-x="1000" />
 
+<glyph glyph-name="home" unicode="&#xe814;" d="M786 296v-267q0-15-11-25t-25-11h-214v214h-143v-214h-214q-15 0-25 11t-11 25v267q0 1 0 2t0 2l321 264 321-264q1-1 1-4z m124 39l-34-41q-5-5-12-6h-2q-7 0-12 3l-386 322-386-322q-7-4-13-3-7 1-12 6l-35 41q-4 6-3 13t6 12l401 334q18 15 42 15t43-15l136-113v108q0 8 5 13t13 5h107q8 0 13-5t5-13v-227l122-102q6-4 6-12t-4-13z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="search" unicode="&#xe815;" d="M643 386q0 103-73 176t-177 74-177-74-73-176 73-177 177-73 177 73 73 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69-80 0-153 31t-125 84-84 125-31 153 31 152 84 126 125 84 153 31 153-31 125-84 84-126 31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="share" unicode="&#xe816;" d="M650 200q62 0 106-43t44-107q0-62-44-106t-106-44-106 44-44 106q0 6 1 14t1 12l-260 156q-42-32-92-32-62 0-106 44t-44 106 44 106 106 44q54 0 92-30l260 156q0 4-1 12t-1 12q0 62 44 106t106 44 106-43 44-107q0-62-44-106t-106-44q-52 0-90 32l-262-156q2-8 2-26 0-16-2-24l262-156q36 30 90 30z" horiz-adv-x="800" />
+
+<glyph glyph-name="archive" unicode="&#xe817;" d="M840 600l0-50-696 0 0 50q0 22 13 35t25 15l608 0q6 0 14-1t22-14 14-35z m-148 150q6 0 14-1t22-14 14-35l-498 0q0 22 13 35t25 15l410 0z m248-200q34-32 38-46 6-18 0-54l-76-450q-4-22-20-35t-28-15l-710 0q-52 0-60 50-6 26-39 223t-39 227q-10 22-3 44t10 26 21 20l10 10 30 30 0-80 836 0 0 80z m-248-270l0 100-70 0 0-80-260 0 0 80-68 0 0-100q0-50 48-50l300 0q22 0 35 12t13 24z" horiz-adv-x="981" />
+
 <glyph glyph-name="github-circled" unicode="&#xf09b;" d="M429 779q116 0 215-58t156-156 57-215q0-140-82-252t-211-155q-15-3-22 4t-7 17q0 1 0 43t0 75q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 67-44 115 21 51-4 114-16 5-46-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-47 7q-25-63-5-114-44-48-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-21-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l6-13q7-21 24-34t37-17 39-3 31 1l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58z m-267-616q2 4-3 7-6 1-8-1-1-4 4-7 5-3 7 1z m18-19q4 3-1 9-6 5-9 2-4-3 1-9 5-6 9-2z m16-25q6 4 0 11-4 7-9 3-5-3 0-10t9-4z m24-23q4 4-2 10-7 7-11 2-5-5 2-11 6-6 11-1z m32-14q1 6-8 9-8 2-10-4t7-9q8-3 11 4z m35-3q0 7-10 6-9 0-9-6 0-7 10-6 9 0 9 6z m32 5q-1 7-10 5-9-1-8-8t10-4 8 7z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="rss" unicode="&#xf09e;" d="M214 100q0-45-31-76t-76-31-76 31-31 76 31 76 76 31 76-31 31-76z m286-69q1-15-9-26-10-12-27-12h-75q-14 0-24 9t-11 23q-12 128-103 219t-219 103q-14 1-23 11t-9 24v75q0 16 12 26 9 10 24 10h3q89-7 170-45t145-101q63-63 101-145t45-171z m286-1q1-15-10-26-10-11-26-11h-80q-14 0-25 10t-10 23q-7 120-57 228t-129 188-188 129-227 57q-14 1-24 11t-10 24v80q0 16 11 26 10 10 25 10h1q147-8 280-67t238-164q104-104 164-238t67-280z" horiz-adv-x="785.7" />
+
 <glyph glyph-name="html5" unicode="&#xf13b;" d="M631 517l9 98h-494l26-298h342l-12-128-110-29-110 29-7 78h-97l12-155 202-55h2v0l200 55 28 304h-359l-8 101h376z m-631 262h786l-72-803-322-90-321 90z" horiz-adv-x="785.7" />
 
 <glyph glyph-name="reddit-alien" unicode="&#xf281;" d="M1000 378q0-32-16-59t-45-40q7-26 7-54 0-86-60-160t-162-117-223-42-223 42-162 117-59 160q0 26 6 53-28 13-46 41t-17 59q0 46 32 78t79 33q48 0 81-35 122 85 287 90l65 291q2 7 9 12t14 2l206-45q10 21 30 33t44 13q35 0 59-24t25-59-25-59-59-25-59 24-24 59l-186 42-58-264q167-5 289-89 33 34 80 34 46 0 79-33t32-78z m-767-111q0-35 25-59t58-25 60 25 24 59-24 59-60 24q-34 0-58-25t-25-58z m452-198q6 6 6 14t-6 15q-5 5-14 5t-14-5q-23-24-68-35t-89-11-89 11-68 35q-6 5-14 5t-14-5q-6-6-6-14t6-15q24-24 66-38t68-17 51-2 51 2 68 17 66 38z m-1 114q34 0 59 25t24 59q0 34-25 58t-58 25q-35 0-60-24t-24-59 24-59 60-25z" horiz-adv-x="1000" />

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;

layouts/blog.vue

@@ -17,7 +17,24 @@
       <Title>Evert's Blog | lunasqu.ee</Title>
     </Head>
     <header class="blog__header">
-      <h1><NuxtLink to="/blog">Blog</NuxtLink></h1>
+      <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">
@@ -52,6 +69,16 @@
             </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>
@@ -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',

pages/blog/index.vue

@@ -7,5 +7,8 @@
 </template>
 
 <script setup lang="ts">
-const { data: posts } = await useFetch('/api/blog');
+const { data: posts } = await useFetch('/api/blog', {
+  key: 'frontpage',
+  params: { limit: 16 },
+});
 </script>

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