Add document footer

src/layouts/MarkdownLayout.astro

@@ -3,9 +3,12 @@ import Layout from "./Layout.astro";
 
 interface Props {
 	title: string;
+  published?: Date;
+  srcPath?: string;
 }
 
-const { title } = Astro.props;
+const { title, srcPath, published } = Astro.props;
+const gitUrl = `https://git.c0ntroller.de/c0ntroller/frontpage/src/branch/astro/src/content/${srcPath}`
 ---
 
 <Layout title={title} showAfterMain={Astro.slots.has("footer-nav")}>
@@ -13,6 +16,15 @@ const { title } = Astro.props;
       <slot name="main-nav" /> :
     null}
     <slot />
+    { published || srcPath ? <>
+      <hr />
+        <div class="contentFooter">
+          { published ? <>Published on: <time datetime={published.toISOString()}>{published.toLocaleDateString("en-GB", {day: "2-digit", month: "long", year: "numeric", hour: "2-digit", minute: "2-digit", timeZone: "Europe/Berlin", hour12: false})}</time></> : null }
+          { published && srcPath ? <> | </> : null}
+          { srcPath ? <a href={gitUrl}>Document source</a> : null }
+        </div> 
+      
+      </>: null }
     {Astro.slots.has("footer-nav") ? 
       <slot name="footer-nav" slot="after-main" /> : 
     null}
@@ -20,34 +32,20 @@ const { title } = Astro.props;
 
 <style lang="scss" is:global>
     main {
-      /*h1 {
-        color: var(--blog_color-accent);
-        font-size: 2em;
-      }
+      .contentFooter {
+        background-color: var(--blog_background-main);
+        clear: right;
+        border-radius: 1em;
+        margin-top: 10px;
+        padding: 14px 16px;
+        margin-bottom: -40px;
 
-      h2 {
-        font-size: 1.5em;
+        @media screen and (max-width: 890px) {
+            & {
+                margin-bottom: -10px;
+            }
+        }
       }
-      h3 {
-        font-size: 1.2em;
-      }
-      h4 {
-        font-size: 1.1em;
-      }
-  
-      h2,
-      h3 {
-        font-weight: bold;
-        text-decoration: underline;
-      }
-  
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        color: var(--blog_color-accent-dark);
-      }*/
   
       h1 + p:first-of-type {
         font-style: italic;

src/pages/blog/[diary].astro

@@ -24,7 +24,7 @@ const diaryPages = (await getCollection(diary)).sort((a, b) => a.data.sorting -
 const { Content } = await diaryMain.render();
 ---
 
-<MarkdownLayout title={diaryMain.data.title}>
+<MarkdownLayout title={diaryMain.data.title} srcPath={`diaryMainPages/${diaryMain.id}`}>
     <Content />
 
     <h2>Pages</h2>

src/pages/blog/[diary]/[entry].astro

@@ -22,11 +22,12 @@ export async function getStaticPaths() {
   return pathsAvailable;
 }
 
+const { diary } = Astro.params
 const { entry } = Astro.props;
 const { Content } = await entry.render();
 ---
 
-<MarkdownLayout title={entry.data.title}>
+<MarkdownLayout title={entry.data.title} srcPath={`${diary}/${entry.id}`} published={entry.data.published}>
   <DiaryNavTop collectionName="rust" slot="main-nav" />
   <Content />
   <DiaryNavBar collectionName="rust" slot="footer-nav" />

src/pages/blog/[entry].astro

@@ -20,6 +20,6 @@ const { entry } = Astro.props;
 const { Content } = await entry.render();
 ---
 
-<MarkdownLayout title={entry.data.title}>
+<MarkdownLayout title={entry.data.title} srcPath={`projects/${entry.id}`} published={entry.data.published}>
   <Content />
 </MarkdownLayout>