Merge pull request #5 from xqsit94/archive-post

Archive Post

.env.example

@@ -5,6 +5,9 @@ SITE_AUTHOR=
 SITE_AUTHOR_URL=
 SITE_FAVICON_PATH="./static/images/favicon.png"
 
+ARCHIVE_TITLE=
+ARCHIVE_TEXT=
+
 GRIDSOME_BASE_URL=http://localhost:8080
 GRIDSOME_VSSUE_OWNER=
 GRIDSOME_VSSUE_REPO=

README.md

@@ -32,6 +32,7 @@ Geek blog built with [Gridsome](https://gridsome.org) that uses Markdown for wri
 - [x] RSS Feed
 - [x] TOC
 - [x] Google Analytics
+- [x] [Archive Post](blog/2021-10-18-archived.md)
 - and more in future maybe 🥳
 
 ## Todo

blog/2021-10-18-archived.md

@@ -0,0 +1,20 @@
+---
+title: Archived Post Example
+path: /archived
+date: 2021-10-18
+summary: Archived Post Example - Just add is_archived true to your markdown post.
+tags: ['archived']
+categories: ['archived']
+thumbnail: ./archived.png
+is_archived: true
+---
+
+## How to Archive Post
+To archive a post add `is_archived: true` to your markdown post. This will add div block
+on top of the archived post with title and text. To change the default archive title and text add following
+key to the .env file
+
+```dotenv
+ARCHIVE_TITLE='ARCHIVED POST'
+ARCHIVE_TEXT='This Post is outdated.'
+```

gridsome.server.js

@@ -18,6 +18,16 @@ module.exports = function (api) {
       'siteAuthorUrl',
       process.env.SITE_AUTHOR_URL || 'https://github.com/xqsit94'
     )
+    addMetadata(
+      'archive_title',
+      process.env.ARCHIVE_TITLE ||
+        'NOTE: THIS ARTICLE IS PART OF OUR ARCHIVE AND IS LIKELY OUT OF DATE.'
+    )
+    addMetadata(
+      'archive_text',
+      process.env.ARCHIVE_TEXT ||
+        '(LINKS MAY NOT WORK, DOWNLOADS HAVE NOT BEEN RECENTLY TESTED FOR SAFETY)'
+    )
 
     const category = addCollection('Category')
     category.addReference('categories', 'Category')

src/components/SearchInput.vue

@@ -137,6 +137,7 @@ query Search {
         path
         title
         summary
+        is_archived
         thumbnail
         categories {
           id

src/templates/Post.vue

@@ -41,6 +41,15 @@
           </span>
           -️ {{ $page.post.date }}
         </div>
+        <div
+          v-if="$page.post.is_archived"
+          class="border border-dashed mb-6 p-5 text-center border-secondary-500"
+        >
+          <div class="text-lg text-secondary-500">
+            {{ $static.metadata.archive_title }}
+          </div>
+          <span class="text-xs">{{ $static.metadata.archive_text }}</span>
+        </div>
         <div class="markdown-body mb-8" v-html="$page.post.content" />
         <div class="flex mb-8 text-sm">
           <g-link
@@ -136,6 +145,7 @@ query Post ($path: String!) {
   post: post (path: $path) {
     title
     summary
+    is_archived
     thumbnail
     path
     date (format: "MMMM D, Y")
@@ -170,6 +180,8 @@ query {
     siteTitle
     siteDescription
     siteAuthor
+    archive_title
+    archive_text
   }
 }
 </static-query>
@@ -183,46 +195,46 @@ export default {
         {
           key: 'description',
           name: 'description',
-          content: this.$page.post.summary,
+          content: this.$page.post.summary
         },
         { name: 'description', content: this.$page.post.summary },
         { name: 'twitter:card', content: 'summary_large_image' },
         { name: 'twitter:description', content: this.$page.post.summary },
         { name: 'twitter:title', content: this.$page.post.title },
         {
           name: 'twitter:site',
-          content: `@${this.$static.metadata.siteAuthor}`,
+          content: `@${this.$static.metadata.siteAuthor}`
         },
         { name: 'twitter:image', content: this.getThumbnailImage },
         {
           name: 'twitter:creator',
-          content: `@${this.$static.metadata.siteAuthor}`,
+          content: `@${this.$static.metadata.siteAuthor}`
         },
         { property: 'og:type', content: 'article' },
         { property: 'og:title', content: this.$page.post.title },
         { property: 'og:description', content: this.$page.post.summary },
         {
           property: 'og:url',
-          content: `${this.getBaseUrl}${this.$page.post.path}/`,
+          content: `${this.getBaseUrl}${this.$page.post.path}/`
         },
         {
           property: 'article:published_time',
-          content: this.$page.post.date,
+          content: this.$page.post.date
         },
         { property: 'og:updated_time', content: this.$page.post.date },
         { property: 'og:image', content: this.getThumbnailImage },
         { property: 'og:image:secure_url', content: this.getThumbnailImage },
         { property: 'og:image:width', content: '912' },
-        { property: 'og:image:height', content: '513' },
-      ],
+        { property: 'og:image:height', content: '513' }
+      ]
     }
   },
 
   components: {
     AppSidebar: () => import('~/components/parts/AppSidebar'),
     RelatedPost: () => import('~/components/RelatedPost'),
     PostComment: () => import('~/components/PostComment'),
-    TableOfContent: () => import('~/components/TableOfContent'),
+    TableOfContent: () => import('~/components/TableOfContent')
   },
 
   computed: {
@@ -236,8 +248,8 @@ export default {
     },
     getBaseUrl() {
       return process.env.GRIDSOME_BASE_URL
-    },
-  },
+    }
+  }
 }
 </script>