continue reading button with custom boundary

master
Evert Prants 4 months ago
parent f6ddbf8b28
commit b10578a61d
Signed by: evert
GPG Key ID: 1688DA83D222D0B5

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

@ -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;

@ -18,7 +18,13 @@
</template>
</h1>
</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__tags">
<NuxtLink

@ -9,7 +9,7 @@ date: 2018-02-03 12:43:10
---
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

@ -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.
<!-- more -->
## Download the ISO

@ -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 -->
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.

@ -10,6 +10,8 @@ date: 2018-01-26 12:00:00
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.
<!-- more -->
## 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.

@ -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;

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

@ -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>

@ -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>

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

Loading…
Cancel
Save