continue reading button with custom boundary

This commit is contained in:
Evert Prants 2022-10-20 21:52:42 +03:00
parent f6ddbf8b28
commit b10578a61d
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
12 changed files with 31 additions and 13 deletions

View File

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

View File

@ -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 { &__inner {
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
@ -172,7 +181,7 @@
} }
&__meta { &__meta {
margin-bottom: 1em; margin-bottom: 0.6rem;
margin-left: 5px; margin-left: 5px;
font-size: 14px; font-size: 14px;

View File

@ -18,7 +18,13 @@
</template> </template>
</h1> </h1>
</header> </header>
<div class="blog-post__content" v-html="post.html"></div> <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__footer">
<div class="blog-post__tags"> <div class="blog-post__tags">
<NuxtLink <NuxtLink

View File

@ -9,7 +9,7 @@ date: 2018-02-03 12:43:10
--- ---
Hello! Hello!
In the past week, Ive 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. Heres a quick demo of the gameplay: In the past week, Ive 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 --> Heres a quick demo of the gameplay:
# Mechanics # Mechanics

View File

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

View File

@ -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. Today I will be describing to you my experiences with self-hosting and how you can get started as well.
<!-- more -->
Im 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 Ive created. Im 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 Ive created.

View File

@ -10,6 +10,8 @@ date: 2018-01-26 12:00:00
So, Ive decided to start a new blog using [Hexo](https://hexo.io/). So, Ive decided to start a new blog using [Hexo](https://hexo.io/).
Ill probably be using this to share my projects and write some tutorials. Ill probably be using this to share my projects and write some tutorials.
<!-- more -->
## Current projects ## Current projects
Im currently taking a break from writing code due to personal reasons, but Im 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. Im currently taking a break from writing code due to personal reasons, but Im 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.

View File

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

View File

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

View File

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

View File

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

View File

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