Issue 54 insert date stamp

components/ShDateStamp.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="flex justify-end italic text-slate-400 dark:text-slate-500">
+    <p v-if="loading">Loading...</p>
+    <p v-else-if="error">{{ error }}</p>
+    <p v-else>Last commit date: {{ lastCommitDate }}</p>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      loading: true,
+      error: null,
+      lastCommitDate: null,
+    };
+  },
+
+  async created() {
+    try {
+      const route = useRoute();
+      const currentFilePath = this.$route.path;
+      console.log(currentFilePath);
+
+      const owner = "standards-hub";
+      const repo = "docs";
+
+      const apiUrl = `https://api.github.com/repos/${owner}/${repo}/commits?path=/content${currentFilePath}`;
+      console.log(apiUrl);
+
+      const response = await axios.get(apiUrl);
+      const lastCommitDate = response.data[0]?.commit?.author?.date;
+
+      if (lastCommitDate) {
+        const dateObject = new Date(lastCommitDate);
+        const formattedDate = dateObject.toLocaleString("en-US", {
+          day: "2-digit",
+          month: "short",
+          year: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+          timeZoneName: "short",
+        });
+
+        this.lastCommitDate = formattedDate;
+      } else {
+        this.lastCommitDate = "No commit date available";
+      }
+
+      this.loading = false;
+    } catch (error) {
+      this.error = "Error fetching data from GitHub API";
+      this.loading = false;
+    }
+  },
+};
+</script>
+
+<style></style>

content/1.getting-started/1.index.md

@@ -55,3 +55,4 @@ export default defineNuxtConfig({
 - Dark mode support
 - And more...
 
+<ShDateStamp></ShDateStamp>

content/5.elastic-hub/1.markdown-constructors/_dir.yml

@@ -0,0 +1 @@
+title: Markdown Constructors

content/5.elastic-hub/2.front-matter/_dir.yml

@@ -0,0 +1 @@
+title: Front Matter	

nuxt.config.ts

@@ -29,7 +29,7 @@ export default defineNuxtConfig({
     // Define `@nuxt/ui` components as global to use them in `.md` (feel free to add those you need)
     'components:extend': (components) => {
 
-      const globals = components.filter((c) => ['UButton', 'UAlert', 'UIcon', 'ShAlert','ShVideo', 'ShTweet', 'ShLinkedin', 'ShFacebook', 'ShBadge', 'CodeSandbox'].includes(c.pascalName))
+      const globals = components.filter((c) => ['UButton', 'UAlert', 'UIcon', 'ShAlert','ShVideo', 'ShTweet', 'ShLinkedin', 'ShFacebook', 'ShBadge', 'CodeSandbox', 'ShDateStamp'].includes(c.pascalName))
 
 
       globals.forEach((c) => c.global = true)

package.json

@@ -18,6 +18,7 @@
     "@nuxt/ui-pro": "^0.6.1",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.1.3",
+    "axios": "^1.6.7",
     "nuxt": "^3.9.0",
     "nuxt-og-image": "^2.2.4"
   },