feat: show at least n posts and configure last text

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>"
 }

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",

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>

src/components/PageFooter.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { REPOSITORY, NAME, VERSION, TITLE, COPYRIGHT } from '@/lib/meta'
+import { REPOSITORY, NAME, VERSION, TITLE, COPYRIGHT } from '@lib/config'
-import { stripHTML } from '@/lib/strings';
+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>

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,
   }
 }
 

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

src/lib/meta.ts

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

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';
+import ShaderviewElement from '@keithclark/shaderview'
-customElements.define('kc-shaderview', ShaderviewElement);
+customElements.define('kc-shaderview', ShaderviewElement)
 
 const app = createApp(App)
 

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 { stripHTML } from '@lib/strings'
-import NavBar from '@/components/NavBar.vue'
+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' }}
+          <span v-html="PUBLISHED_ON"></span> {{ simpleDateFormat(article.metadata.date) }}
-          {{ simpleDateFormat(article.metadata.date) }}
         </div>
         <img
           v-if="article.metadata.thumbnail"

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"

src/views/NotFoundView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { TITLE } from '@/lib/meta'
+import { TITLE } from '@lib/config'
-import { stripHTML } from '@/lib/strings'
+import { stripHTML } from '@lib/strings'
 import PageFooter from '@components/PageFooter.vue'
 import { onBeforeMount } from 'vue'
 

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] })],