continue reading button with custom boundary

.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-  "editor.formatOnSave": true,
-  "files.insertFinalNewline": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-}

assets/styles/components/_blog.scss

@@ -165,6 +165,15 @@
       }
     }
 
+    &__continue {
+      margin: 0 0 20px 20px;
+      display: inline-block;
+      background-color: #efefef;
+      padding: 0.5rem 1.5rem;
+      border-radius: 8px;
+      color: #000 !important;
+    }
+
     &__inner {
       overflow: hidden;
       background-color: #fff;
@@ -172,7 +181,7 @@
     }
 
     &__meta {
-      margin-bottom: 1em;
+      margin-bottom: 0.6rem;
       margin-left: 5px;
       font-size: 14px;
 

components/blog-post.vue

@@ -18,7 +18,13 @@
           </template>
         </h1>
       </header>
+      <template v-if="detail">
         <div class="blog-post__content" v-html="post.html"></div>
+      </template>
+      <template v-else>
+        <div class="blog-post__content" v-html="post.summary"></div>
+        <NuxtLink :to="'/blog/' + post.fullSlug" class="blog-post__continue">Continue reading...</NuxtLink>
+      </template>
       <div class="blog-post__footer">
         <div class="blog-post__tags">
           <NuxtLink

content/blog/Giving-a-shot-at-making-a-game-using-Godot-Engine-3-0.md

@@ -9,7 +9,7 @@ date: 2018-02-03 12:43:10
 ---
 
 Hello!  
-In the past week, I’ve been working on a simple 3D game using [Godot Engine 3.0](https://godotengine.org/) (_go-doh_). In this article, I will show off some of the features and discuss how it all works. Here’s a quick demo of the gameplay:
+In the past week, I’ve been working on a simple 3D game using [Godot Engine 3.0](https://godotengine.org/) (_go-doh_). In this article, I will show off some of the features and discuss how it all works.<!-- more --> Here’s a quick demo of the gameplay:
 
 # Mechanics
 

content/blog/How-to-install-Arch-Linux.md

@@ -7,6 +7,7 @@ date: 2018-03-15 17:21:22
 ---
 
 Today I’m going to instruct you through the steps of installing your own Arch Linux system.
+<!-- more -->
 
 ## Download the ISO
 

content/blog/Self-hosting-Part-1.md

@@ -8,6 +8,7 @@ date: 2019-02-23 23:17:18
 ---
 
 Today I will be describing to you my experiences with self-hosting and how you can get started as well.
+<!-- more -->
 
 I’m not going to go into detail in this article about how to install and configure anything, but the websites for respective pieces of software have great documentation and you can always look for more information online. Followup blog posts may come in the future describing setups that I’ve created.
 

content/blog/Welcome-to-my-blog.md

@@ -10,6 +10,8 @@ date: 2018-01-26 12:00:00
 So, I’ve decided to start a new blog using [Hexo](https://hexo.io/).  
 I’ll probably be using this to share my projects and write some tutorials.
 
+<!-- more -->
+
 ## Current projects
 
 I’m currently taking a break from writing code due to personal reasons, but I’m mainly working on my network, [Icy Network](https://icynet.eu). The main project in the works is [Episodes.Community](https://github.com/IcyNet/Episodes.Community), which is basically a site where people can watch and share links to their favorite TV shows and cartoons.

lib/blog/read-posts.ts

@@ -57,14 +57,17 @@ async function readBlogPost(slug: string): Promise<BlogPost[]> {
     async: true,
   });
 
+  const boundary = renderedMd.indexOf('<!-- more -->')
+
   const { year, month, day } = getDateObject(parsedHeader);
   const content = {
     ...parsedHeader,
     file,
     slug,
+    summary: renderedMd.substring(0, boundary > -1 ? boundary : 240),
     fullSlug: `${year}/${month}/${day}/${slug}`,
     markdown: read.substring(headerLength),
-    html: renderedMd,
+    html: renderedMd.replace('<!-- more -->', ''),
   };
 
   return content;

lib/types/post.ts

@@ -6,6 +6,7 @@ export interface BlogPost {
   slug: string;
   fullSlug: string;
   markdown: string;
+  summary: string;
   html: string;
   next?: Partial<BlogPost>;
   prev?: Partial<BlogPost>;

pages/blog/[year]/[month]/[day]/[slug].vue

@@ -36,9 +36,9 @@ const { data: post } = await useFetch<BlogPost>(
 
 const isostamp = computed(() => new Date(post.value.date).toISOString());
 const preview = computed(() =>
-  post.value.html
+  post.value.summary
     .replace(/<[^>]*>?/gm, '')
     .replace('\n', ' ')
-    .substring(0, 120)
+    .substring(0, 240)
 );
 </script>

pages/blog/index.vue

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

server/routes/blog/atom.xml.ts

@@ -20,7 +20,7 @@ export default defineEventHandler(async (event) => {
   });
 
   posts.forEach((post) => {
-    const description = post.html
+    const description = post.summary
       .replace(/<[^>]*>?/gm, '')
       .replace('\n', ' ')
       .substring(0, 240);