From b10578a61d1d3c3681369bca890eb1d0bf74baac Mon Sep 17 00:00:00 2001 From: Evert Prants Date: Thu, 20 Oct 2022 21:52:42 +0300 Subject: [PATCH] continue reading button with custom boundary --- .vscode/settings.json | 5 ----- assets/styles/components/_blog.scss | 11 ++++++++++- components/blog-post.vue | 8 +++++++- ...-a-shot-at-making-a-game-using-Godot-Engine-3-0.md | 2 +- content/blog/How-to-install-Arch-Linux.md | 1 + content/blog/Self-hosting-Part-1.md | 1 + content/blog/Welcome-to-my-blog.md | 2 ++ lib/blog/read-posts.ts | 5 ++++- lib/types/post.ts | 1 + pages/blog/[year]/[month]/[day]/[slug].vue | 4 ++-- pages/blog/index.vue | 2 +- server/routes/blog/atom.xml.ts | 2 +- 12 files changed, 31 insertions(+), 13 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 9046f10..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "editor.formatOnSave": true, - "files.insertFinalNewline": true, - "editor.defaultFormatter": "esbenp.prettier-vscode", -} diff --git a/assets/styles/components/_blog.scss b/assets/styles/components/_blog.scss index 43e30e2..c986850 100644 --- a/assets/styles/components/_blog.scss +++ b/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; diff --git a/components/blog-post.vue b/components/blog-post.vue index 1272fd9..ee33f03 100644 --- a/components/blog-post.vue +++ b/components/blog-post.vue @@ -18,7 +18,13 @@ -
+ +
Here’s a quick demo of the gameplay: # Mechanics diff --git a/content/blog/How-to-install-Arch-Linux.md b/content/blog/How-to-install-Arch-Linux.md index 4d0e40c..a959a12 100644 --- a/content/blog/How-to-install-Arch-Linux.md +++ b/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. + ## Download the ISO diff --git a/content/blog/Self-hosting-Part-1.md b/content/blog/Self-hosting-Part-1.md index e5db9e0..54f36c5 100644 --- a/content/blog/Self-hosting-Part-1.md +++ b/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. + 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. diff --git a/content/blog/Welcome-to-my-blog.md b/content/blog/Welcome-to-my-blog.md index 0b70fcb..b1d64a8 100644 --- a/content/blog/Welcome-to-my-blog.md +++ b/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. + + ## 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. diff --git a/lib/blog/read-posts.ts b/lib/blog/read-posts.ts index e43fdaf..cda01aa 100644 --- a/lib/blog/read-posts.ts +++ b/lib/blog/read-posts.ts @@ -57,14 +57,17 @@ async function readBlogPost(slug: string): Promise { async: true, }); + const boundary = renderedMd.indexOf('') + 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('', ''), }; return content; diff --git a/lib/types/post.ts b/lib/types/post.ts index 1a3ce98..b55cea7 100644 --- a/lib/types/post.ts +++ b/lib/types/post.ts @@ -6,6 +6,7 @@ export interface BlogPost { slug: string; fullSlug: string; markdown: string; + summary: string; html: string; next?: Partial; prev?: Partial; diff --git a/pages/blog/[year]/[month]/[day]/[slug].vue b/pages/blog/[year]/[month]/[day]/[slug].vue index 802d089..1d0081b 100644 --- a/pages/blog/[year]/[month]/[day]/[slug].vue +++ b/pages/blog/[year]/[month]/[day]/[slug].vue @@ -36,9 +36,9 @@ const { data: post } = await useFetch( 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) ); diff --git a/pages/blog/index.vue b/pages/blog/index.vue index 4ec804e..f1a0061 100644 --- a/pages/blog/index.vue +++ b/pages/blog/index.vue @@ -9,6 +9,6 @@ diff --git a/server/routes/blog/atom.xml.ts b/server/routes/blog/atom.xml.ts index 9463330..6be5eaa 100644 --- a/server/routes/blog/atom.xml.ts +++ b/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);