From 99867aa03eba319053b11ea00c87d43f6f2d64cc Mon Sep 17 00:00:00 2001
From: klemek <klemek.dev@proton.me>
Date: Sun, 26 Apr 2026 22:02:41 +0200
Subject: [PATCH] feat: show at least n posts and configure last text

---
 articles.example/config.json  |  2 ++
 package.json                  |  2 +-
 src/components/NavBar.vue     |  2 +-
 src/components/PageFooter.vue |  7 ++++---
 src/lib/articles.ts           |  6 ++++--
 src/lib/config.ts             | 14 ++++++++++++++
 src/lib/meta.ts               | 11 -----------
 src/main.ts                   |  4 ++--
 src/views/ArticleView.vue     |  9 ++++-----
 src/views/HomeView.vue        | 14 +++++++++-----
 src/views/NotFoundView.vue    |  4 ++--
 vite.config.ts                |  2 ++
 12 files changed, 45 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/config.ts
 delete mode 100644 src/lib/meta.ts

diff --git a/articles.example/config.json b/articles.example/config.json
index ea62d4d..7f88827 100644
--- a/articles.example/config.json
+++ b/articles.example/config.json
@@ -4,7 +4,9 @@
     "signature": "By <b>Me</b>",
     "lang": "en",
     "custom_head": "",
+    "home_count": 5,
     "rss_link": "<i icon=rss></i> RSS",
     "back_link": "<i icon=undo-2></i> Back to home",
+    "published_on": "Published on",
     "copyright": "<a style=\"text-decoration:none;color:inherit;\" target=_blank href=\"https://creativecommons.org/licenses/by-nc/4.0/\">CC BY-NC</a>"
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 1f5f401..325f939 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "md-blog",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "private": true,
   "type": "module",
   "repository": "https://github.com/klemek/md-blog",
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index cbe23a0..dddaa80 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BASE_URL, TITLE, RSS_LINK } from '@/lib/meta'
+import { BASE_URL, TITLE, RSS_LINK } from '@lib/config'
 </script>
 
 <template>
diff --git a/src/components/PageFooter.vue b/src/components/PageFooter.vue
index 6be791f..c4960a1 100644
--- a/src/components/PageFooter.vue
+++ b/src/components/PageFooter.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { REPOSITORY, NAME, VERSION, TITLE, COPYRIGHT } from '@/lib/meta'
-import { stripHTML } from '@/lib/strings';
+import { REPOSITORY, NAME, VERSION, TITLE, COPYRIGHT } from '@lib/config'
+import { stripHTML } from '@lib/strings'
 </script>
 
 <template>
   <footer>
-    {{ stripHTML(TITLE) }} &copy; {{ new Date().getFullYear() }}, <span v-html="COPYRIGHT"></span> | Made with
+    {{ stripHTML(TITLE) }} &copy; {{ new Date().getFullYear() }}, <span v-html="COPYRIGHT"></span> |
+    Made with
     <a :href="REPOSITORY">{{ NAME }} {{ VERSION }}</a>
   </footer>
 </template>
diff --git a/src/lib/articles.ts b/src/lib/articles.ts
index 159c7fe..0ffaef6 100644
--- a/src/lib/articles.ts
+++ b/src/lib/articles.ts
@@ -5,13 +5,15 @@ function parseMetadata(
   srcAttributes: Record<string, unknown>,
   pathPrefix: string,
 ): ArticleMetadata {
+  const draft = !!srcAttributes.draft
   return {
     path: pathPrefix,
-    title: decodeURIComponent((srcAttributes.title as string) ?? 'Untitled'),
+    title:
+      (draft ? '[DRAFT] ' : '') + decodeURIComponent((srcAttributes.title as string) ?? 'Untitled'),
     date: new Date(Date.parse((srcAttributes.date as string) ?? '')),
     author: decodeURIComponent((srcAttributes.author as string) ?? ''),
     thumbnail: (srcAttributes.thumbnail as string) ?? '',
-    draft: !!srcAttributes.draft,
+    draft: draft,
   }
 }
 
diff --git a/src/lib/config.ts b/src/lib/config.ts
new file mode 100644
index 0000000..35bf1e5
--- /dev/null
+++ b/src/lib/config.ts
@@ -0,0 +1,14 @@
+import packageJson from '@/../package.json'
+
+export const NAME: string = packageJson.name
+export const VERSION: string = packageJson.version
+export const REPOSITORY: string = packageJson.repository
+export const TITLE: string = import.meta.env.VITE_APP_TITLE
+export const SIGNATURE: string = import.meta.env.VITE_APP_SIGNATURE
+export const COPYRIGHT: string = import.meta.env.VITE_APP_COPYRIGHT
+export const RSS_LINK: string = import.meta.env.VITE_APP_RSS_LINK
+export const BACK_LINK: string = import.meta.env.VITE_APP_BACK_LINK
+export const HOME_COUNT: number = parseInt(import.meta.env.VITE_APP_HOME_COUNT)
+export const PUBLISHED_ON: string = import.meta.env.VITE_APP_PUBLISHED_ON
+export const BASE_URL: string = import.meta.env.BASE_URL
+export const PROD: boolean = import.meta.env.PROD
diff --git a/src/lib/meta.ts b/src/lib/meta.ts
deleted file mode 100644
index b45f1d7..0000000
--- a/src/lib/meta.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import packageJson from '@/../package.json'
-
-export const NAME = packageJson.name
-export const VERSION = packageJson.version
-export const REPOSITORY = packageJson.repository
-export const TITLE = import.meta.env.VITE_APP_TITLE
-export const SIGNATURE = import.meta.env.VITE_APP_SIGNATURE
-export const COPYRIGHT = import.meta.env.VITE_APP_COPYRIGHT
-export const RSS_LINK = import.meta.env.VITE_APP_RSS_LINK
-export const BACK_LINK = import.meta.env.VITE_APP_BACK_LINK
-export const BASE_URL = import.meta.env.BASE_URL
diff --git a/src/main.ts b/src/main.ts
index c80e070..ffdd6e8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,8 +2,8 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
-import ShaderviewElement from '@keithclark/shaderview';
-customElements.define('kc-shaderview', ShaderviewElement);
+import ShaderviewElement from '@keithclark/shaderview'
+customElements.define('kc-shaderview', ShaderviewElement)
 
 const app = createApp(App)
 
diff --git a/src/views/ArticleView.vue b/src/views/ArticleView.vue
index 9e802a0..d3e078c 100644
--- a/src/views/ArticleView.vue
+++ b/src/views/ArticleView.vue
@@ -5,10 +5,10 @@ import { loadArticle } from '@lib/articles'
 import { useRoute, onBeforeRouteUpdate, type RouteLocation } from 'vue-router'
 import NotFoundView from './NotFoundView.vue'
 import { simpleDateFormat } from '@lib/dates'
-import { BACK_LINK, SIGNATURE, TITLE } from '@lib/meta'
+import { BACK_LINK, PUBLISHED_ON, SIGNATURE, TITLE } from '@lib/config'
 import PageFooter from '@components/PageFooter.vue'
-import { stripHTML } from '@/lib/strings'
-import NavBar from '@/components/NavBar.vue'
+import { stripHTML } from '@lib/strings'
+import NavBar from '@components/NavBar.vue'
 
 const article = ref<Article | null>(null)
 const loading = ref<boolean>(true)
@@ -40,8 +40,7 @@ onBeforeRouteUpdate(loadPage)
         <RouterLink class="link-home" to="/"><i icon="undo-2">↑</i></RouterLink>
         <h1 class="article-title" v-html="article.metadata.title"></h1>
         <div class="article-published">
-          {{ article.metadata.draft ? 'Drafted on' : 'Published on' }}
-          {{ simpleDateFormat(article.metadata.date) }}
+          <span v-html="PUBLISHED_ON"></span> {{ simpleDateFormat(article.metadata.date) }}
         </div>
         <img
           v-if="article.metadata.thumbnail"
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 5357672..c3b5a8b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,15 +3,17 @@ import { ref, onBeforeMount } from 'vue'
 import { listArticles } from '@lib/articles'
 import type { ArticleMetadata } from '@interfaces'
 import { simpleDateFormat } from '@lib/dates'
-import { TITLE } from '@lib/meta'
+import { HOME_COUNT, PROD, PUBLISHED_ON, TITLE } from '@lib/config'
 import PageFooter from '@components/PageFooter.vue'
 import { stripHTML } from '@/lib/strings'
-import NavBar from '@/components/NavBar.vue'
+import NavBar from '@components/NavBar.vue'
 
 const articles = ref<ArticleMetadata[]>([])
 
 onBeforeMount(async () => {
-  const newArticles = await listArticles()
+  const newArticles = (await listArticles())
+    .filter((metadata) => (!metadata.draft || !PROD) && metadata.path)
+    .slice(0, HOME_COUNT)
   articles.value.splice(0, articles.value.length, ...newArticles)
   window.document.title = stripHTML(TITLE) + ' — Home'
 })
@@ -21,10 +23,12 @@ onBeforeMount(async () => {
   <main class="home">
     <NavBar />
     <template v-for="(metadata, index) in articles" v-bind:key="index">
-      <div v-if="!metadata.draft && metadata.path" class="article-item">
+      <div v-if="(!metadata.draft || !PROD) && metadata.path" class="article-item">
         <RouterLink :to="metadata.path">
           <h2 v-html="metadata.title"></h2>
-          <span class="article-published">Published on {{ simpleDateFormat(metadata.date) }}</span>
+          <span class="article-published"
+            ><span v-html="PUBLISHED_ON"></span> {{ simpleDateFormat(metadata.date) }}</span
+          >
           <img
             v-if="metadata.thumbnail"
             alt="thumbnail"
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index 5ac086b..b4a3ef5 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { TITLE } from '@/lib/meta'
-import { stripHTML } from '@/lib/strings'
+import { TITLE } from '@lib/config'
+import { stripHTML } from '@lib/strings'
 import PageFooter from '@components/PageFooter.vue'
 import { onBeforeMount } from 'vue'
 
diff --git a/vite.config.ts b/vite.config.ts
index b3df1cd..8f1ef7b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -19,6 +19,8 @@ export default ({ mode }: { mode: string }) => {
   process.env.VITE_APP_COPYRIGHT = articlesConfig['copyright']
   process.env.VITE_APP_RSS_LINK = articlesConfig['rss_link']
   process.env.VITE_APP_BACK_LINK = articlesConfig['back_link']
+  process.env.VITE_APP_HOME_COUNT = articlesConfig['home_count'].toString()
+  process.env.VITE_APP_PUBLISHED_ON = articlesConfig['published_on']
 
   return defineConfig({
     plugins: [vue(), vueDevTools(), mdPlugin({ mode: [Mode.HTML] })],