From d7df071adb6de26fcc2b29a5809ff1e7914b0a75 Mon Sep 17 00:00:00 2001
From: Karol <kariurek@gmail.com>
Date: Wed, 6 Sep 2023 09:44:27 +0200
Subject: [PATCH 1/4] Fix updated date

---
 astro.config.mjs                              | 31 +++++++++++--------
 .../RightSidebar/RightSidebar.astro           |  2 +-
 .../RightSidebar/TableOfContents.tsx          |  7 +----
 src/config.ts                                 |  2 ++
 src/layouts/MainLayout.astro                  | 14 ++++++---
 src/utils/filePath.mjs                        |  6 ++++
 src/utils/modifiedTime.mjs                    |  9 ++++++
 7 files changed, 46 insertions(+), 25 deletions(-)
 create mode 100644 src/utils/filePath.mjs
 create mode 100644 src/utils/modifiedTime.mjs

diff --git a/astro.config.mjs b/astro.config.mjs
index 691487d1..f06e6097 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -7,20 +7,25 @@ import compress from 'astro-compress'
 import { defineConfig } from 'astro/config'
 import sitemap from '@astrojs/sitemap'
 import tailwind from '@astrojs/tailwind'
+import { modifiedTime } from './src/utils/modifiedTime.mjs'
+import { filePath } from './src/utils/filePath.mjs'
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [
-		preact({
-			include: ['**/preact/*'],
-		}),
-		react({
-			include: ['**/react/*'],
-		}),
-		mdx(),
-		compress(),
-		sitemap(),
-		tailwind(),
-	],
-	site: `https://bewebdev.tech/`,
+  integrations: [
+    preact({
+      include: ['**/preact/*'],
+    }),
+    react({
+      include: ['**/react/*'],
+    }),
+    mdx(),
+    compress(),
+    sitemap(),
+    tailwind(),
+  ],
+  markdown: {
+    remarkPlugins: [modifiedTime, filePath],
+  },
+  site: `https://bewebdev.tech/`,
 })
diff --git a/src/components/RightSidebar/RightSidebar.astro b/src/components/RightSidebar/RightSidebar.astro
index b735c7f8..1f880ee5 100644
--- a/src/components/RightSidebar/RightSidebar.astro
+++ b/src/components/RightSidebar/RightSidebar.astro
@@ -12,7 +12,7 @@ const { headings, githubEditUrl } = Astro.props as Props
 ---
 
 <nav class='w-full sticky top-0' aria-labelledby='grid-right'>
-	<div class='h-full overflow-auto'>
+	<div class='h-full overflow-auto pb-32'>
 		<TableOfContents client:only='preact' headings={headings} />
 		<MoreMenu editHref={githubEditUrl} />
 	</div>
diff --git a/src/components/RightSidebar/TableOfContents.tsx b/src/components/RightSidebar/TableOfContents.tsx
index 1358053c..bf669f98 100644
--- a/src/components/RightSidebar/TableOfContents.tsx
+++ b/src/components/RightSidebar/TableOfContents.tsx
@@ -13,19 +13,14 @@ type ItemOffsets = {
 type ListLinkProps = {
 	href: string
 	children: ReactNode
-	className?: string
 	depth?: number
 }
 
 const ListLink = ({
 	children,
 	href,
-	className = '',
 	depth = 0,
 }: ListLinkProps) => {
-	const linkCss =
-		'hover:bg-basetext/10 rounded-md group-hover:border-b-transparent block px-4 py-1 text-sm scroll-mt-32 max-w-[170px] ' +
-		className
 
 	return (
 		<li className='p-1 border-b-2 border-b-basetext/10 last:border-0'>
@@ -33,7 +28,7 @@ const ListLink = ({
 				style={{
 					paddingLeft: `${depth * 8}px`,
 				}}
-				className={linkCss}
+				className='hover:bg-basetext/10 rounded-md group-hover:border-b-transparent block px-4 py-1 text-sm scroll-mt-32 md:whitespace-nowrap'
 				href={href}
 			>
 				{children}
diff --git a/src/config.ts b/src/config.ts
index 6beb6871..e9239d92 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -17,6 +17,8 @@ export type Frontmatter = {
   dir?: 'ltr' | 'rtl'
   ogLocale?: string
   lang?: string
+  filePath?: string
+  lastModified?:  string
 }
 
 export const GITHUB_EDIT_URL = `https://github.com/NowYouKnowProgramming/webdev-learning-materials/tree/main`
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 93bd3b67..4388fdd9 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -1,20 +1,20 @@
 ---
 import type { MarkdownHeading } from 'astro'
 import HeadCommon from '../components/HeadCommon.astro'
-import Header from '../components/Header/Header.astro'
 import HeadSEO from '../components/HeadSEO.astro'
+import Header from '../components/Header/Header.astro'
 import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro'
 import PageContent from '../components/PageContent/PageContent.astro'
 import RecommendedSections from '../components/RecommendedSections/RecommendedSections.astro'
 import RightSidebar from '../components/RightSidebar/RightSidebar.astro'
 import CopyCodeToClipboard from '../components/utility/CopyCodeToClipboard/CopyCodeToClipboard.astro'
 import HeadingLinksCopyToClipboard from '../components/utility/HeadingLinksCopyToClipboard/HeadingLinksCopyToClipboard.astro'
-import ArticleUpdateDate from '../components/ArticleUpdateDate/ArticleUpdateDate'
 
 import '../styles/docs.scss'
 
-import * as CONFIG from '../config'
 import Footer from '../components/Redesign/LandingSections/Footer/Footer.astro'
+import * as CONFIG from '../config'
+import { timeSince } from '../utils/timeSince'
 
 type Props = {
 	frontmatter: CONFIG.Frontmatter
@@ -29,7 +29,10 @@ const currentPage = Astro.url.pathname + '/'
 const currentFolder = currentPage.replace(lastURLElementRegex,'')
 const fileNameAndExtension = Astro.props.file.split('/').at(-1).replace(`"`,'')
 const currentFile = `src/pages${currentFolder}/${fileNameAndExtension}`
-const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`
+const filePath = Astro.props.frontmatter.filePath
+const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${filePath}`
+const lastModified = Astro.props.frontmatter.lastModified
+const updatedSince = timeSince(new Date(lastModified))
 ---
 
 <html
@@ -230,7 +233,8 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`
 					headings={headings}
 					githubEditUrl={githubEditUrl}
 				>
-					<ArticleUpdateDate path={currentFile} client:only='react' />
+					<p>{filePath}</p>
+					<p class="text-theme-muted">Updated {updatedSince} ago</p>
 					<slot />
 				</PageContent>
 				<RecommendedSections />
diff --git a/src/utils/filePath.mjs b/src/utils/filePath.mjs
new file mode 100644
index 00000000..172c9c66
--- /dev/null
+++ b/src/utils/filePath.mjs
@@ -0,0 +1,6 @@
+export function filePath() {
+  return function (tree, file) {
+    const filepath = file.history[0]
+    file.data.astro.frontmatter.filePath = filepath
+  }
+}
diff --git a/src/utils/modifiedTime.mjs b/src/utils/modifiedTime.mjs
new file mode 100644
index 00000000..fa78ab3c
--- /dev/null
+++ b/src/utils/modifiedTime.mjs
@@ -0,0 +1,9 @@
+import { execSync } from 'child_process'
+
+export function modifiedTime() {
+  return function (tree, file) {
+    const filepath = file.history[0]
+    const result = execSync(`git log -1 --pretty="format:%cI" ${filepath}`)
+    file.data.astro.frontmatter.lastModified = result.toString()
+  }
+}

From b2b5632f2eaf3dd4504e03870c8ea7cee517ab9c Mon Sep 17 00:00:00 2001
From: Karol <kariurek@gmail.com>
Date: Wed, 6 Sep 2023 09:58:20 +0200
Subject: [PATCH 2/4] Fix edit article link

---
 src/layouts/MainLayout.astro | 443 ++++++++++++++++++-----------------
 1 file changed, 224 insertions(+), 219 deletions(-)

diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 4388fdd9..1286d546 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -17,234 +17,239 @@ import * as CONFIG from '../config'
 import { timeSince } from '../utils/timeSince'
 
 type Props = {
-	frontmatter: CONFIG.Frontmatter
-	headings: MarkdownHeading[]
-	file: string;
+  frontmatter: CONFIG.Frontmatter
+  headings: MarkdownHeading[]
+  file: string
 }
-const lastURLElementRegex = /\/([^/]+)\/$/
 
 const { frontmatter, headings } = Astro.props as Props
 const canonicalURL = new URL(Astro.url.pathname, Astro.site)
 const currentPage = Astro.url.pathname + '/'
-const currentFolder = currentPage.replace(lastURLElementRegex,'')
-const fileNameAndExtension = Astro.props.file.split('/').at(-1).replace(`"`,'')
-const currentFile = `src/pages${currentFolder}/${fileNameAndExtension}`
+
 const filePath = Astro.props.frontmatter.filePath
-const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${filePath}`
+const currentFile = filePath?.replace(/.*src/, 'src')
+const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`
 const lastModified = Astro.props.frontmatter.lastModified
-const updatedSince = timeSince(new Date(lastModified))
+const updatedSince = timeSince(
+  new Date(lastModified?.toString() || '')
+).replace(',', ' and')
 ---
 
 <html
-	dir={frontmatter.dir ?? 'ltr'}
-	lang={frontmatter.lang ?? 'en'}
-	class='initial'
+  dir={frontmatter.dir ?? 'ltr'}
+  lang={frontmatter.lang ?? 'en'}
+  class='initial'
 >
-	<head>
-		<HeadCommon />
-		<HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
-		<title>
-			{
-				frontmatter.title
-					? `${frontmatter.title} - ${CONFIG.SITE.title}`
-					: CONFIG.SITE.title
-			}
-		</title>
-		<style lang='scss'>
-			body {
-				grid-template-rows: var(--theme-navbar-height) 1fr;
-				--gutter: 0.5rem;
-				--doc-padding: 2rem;
-			}
-
-			.layout {
-				display: grid;
-				grid-auto-flow: column;
-				grid-template-columns:
-					minmax(var(--gutter), 1fr) minmax(0, var(--max-width))
-					minmax(var(--gutter), 1fr);
-				overflow-x: hidden;
-			}
-
-			.grid-sidebar {
-				height: 100vh;
-				position: sticky;
-				top: 0;
-				padding: 0;
-			}
-
-			#grid-main {
-				grid-column: 2;
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-			}
-
-			#grid-right {
-				display: none;
-			}
-
-			@media (min-width: 50em) {
-				.layout {
-					overflow: initial;
-					grid-template-columns: 20rem minmax(0, var(--max-width));
-					gap: 1em;
-				}
-			}
-
-			@media (min-width: 72em) {
-				.layout {
-					grid-template-columns: 20rem minmax(0, 1920px) 18rem;
-					padding-left: 0;
-					padding-right: 0;
-					margin: 0 auto;
-				}
-
-				#grid-right {
-					grid-column: 3;
-					display: flex;
-				}
-			}
-		</style>
-		<style is:global lang='scss'>
-			.layout > * {
-				width: 100%;
-				height: 100%;
-			}
-
-			.main-section {
-				article {
-					@keyframes fadeInDown {
-						0% {
-							opacity: 0;
-							transform: translateY(-1.25em);
-						}
-						100% {
-							opacity: 1;
-							transform: translateY(0);
-						}
-					}
-					details[open] {
-						animation-name: fadeInDown;
-						animation-duration: 0.5s;
-					}
-					details {
-						summary {
-							padding: 10px;
-							border-radius: 8px;
-
-							@media (prefers-reduced-motion: no-preference) {
-								transition: 0.2s;
-							}
-
-							user-select: none;
-							&:hover {
-								background-color: var(--theme-text-accent);
-								color: var(--theme-bg);
-								cursor: pointer;
-							}
-						}
-
-						&[open] {
-							summary {
-								margin-bottom: 10px;
-							}
-						}
-					}
-					a:visited {
-						color: rgb(var(--color-text-muted)) !important;
-					}
-					ul {
-						list-style: none !important;
-						padding: 0;
-						li {
-							li {
-								padding-left: 0.5rem;
-								margin-bottom: 0;
-								&::before {
-									content: '- ';
-								}
-							}
-							a {
-								text-decoration: none;
-								padding: 5px 0;
-
-								@media (prefers-reduced-motion: no-preference) {
-									transition: 0.2s;
-								}
-
-								&:hover {
-									color: var(--theme-accent);
-								}
-
-								&::before {
-									content: '🔗 ';
-								}
-							}
-							margin-bottom: 1.6rem;
-						}
-					}
-				}
-			}
-
-			.mobile-sidebar-toggle {
-				overflow: hidden;
-			}
-
-			.mobile-sidebar-toggle #grid-left {
-				display: block;
-				top: 2rem;
-			}
-
-			a,
-			button,
-			input,
-			select,
-			textarea {
-				&:focus-visible {
-					outline: 4px solid var(--theme-accent);
-					outline-offset: 4px;
-				}
-
-				&:focus:not(:focus-visible) {
-					outline: none;
-				}
-			}
-
-			article {
-				margin: auto;
-			}
-		</style>
-	</head>
-
-	<body class='pt-20'>
-		<Header currentPage={currentPage} />
-		<main class='flex w-full max-w-docs px-8 m-auto items-start'>
-			<aside
-				id='grid-left'
-				class='sticky top-0 h-screen grid-cols-1 flex'
-				title='Site Navigation'
-			>
-				<LeftSidebar currentPage={currentPage} />
-			</aside>
-			<div class='mx-auto w-full flex justify-center' id='grid-main'>
-				<PageContent
-					frontmatter={frontmatter}
-					headings={headings}
-					githubEditUrl={githubEditUrl}
-				>
-					<p>{filePath}</p>
-					<p class="text-theme-muted">Updated {updatedSince} ago</p>
-					<slot />
-				</PageContent>
-				<RecommendedSections />
-			</div>
-			<aside id='grid-right' class='grid-sidebar' title='Table of Contents'>
-				<RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
-			</aside>
-		</main>
-		<Footer isDocs />
-		<CopyCodeToClipboard />
-		<HeadingLinksCopyToClipboard />
-	</body>
+  <head>
+    <HeadCommon />
+    <HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
+    <title>
+      {
+        frontmatter.title
+          ? `${frontmatter.title} - ${CONFIG.SITE.title}`
+          : CONFIG.SITE.title
+      }
+    </title>
+    <style lang='scss'>
+      body {
+        grid-template-rows: var(--theme-navbar-height) 1fr;
+        --gutter: 0.5rem;
+        --doc-padding: 2rem;
+      }
+
+      .layout {
+        display: grid;
+        grid-auto-flow: column;
+        grid-template-columns:
+          minmax(var(--gutter), 1fr) minmax(0, var(--max-width))
+          minmax(var(--gutter), 1fr);
+        overflow-x: hidden;
+      }
+
+      .grid-sidebar {
+        height: 100vh;
+        position: sticky;
+        top: 0;
+        padding: 0;
+      }
+
+      #grid-main {
+        grid-column: 2;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      #grid-right {
+        display: none;
+      }
+
+      @media (min-width: 50em) {
+        .layout {
+          overflow: initial;
+          grid-template-columns: 20rem minmax(0, var(--max-width));
+          gap: 1em;
+        }
+      }
+
+      @media (min-width: 72em) {
+        .layout {
+          grid-template-columns: 20rem minmax(0, 1920px) 18rem;
+          padding-left: 0;
+          padding-right: 0;
+          margin: 0 auto;
+        }
+
+        #grid-right {
+          grid-column: 3;
+          display: flex;
+        }
+      }
+    </style>
+    <style is:global lang='scss'>
+      .layout > * {
+        width: 100%;
+        height: 100%;
+      }
+
+      .main-section {
+        article {
+          @keyframes fadeInDown {
+            0% {
+              opacity: 0;
+              transform: translateY(-1.25em);
+            }
+            100% {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+          details[open] {
+            animation-name: fadeInDown;
+            animation-duration: 0.5s;
+          }
+          details {
+            summary {
+              padding: 10px;
+              border-radius: 8px;
+
+              @media (prefers-reduced-motion: no-preference) {
+                transition: 0.2s;
+              }
+
+              user-select: none;
+              &:hover {
+                background-color: var(--theme-text-accent);
+                color: var(--theme-bg);
+                cursor: pointer;
+              }
+            }
+
+            &[open] {
+              summary {
+                margin-bottom: 10px;
+              }
+            }
+          }
+          a:visited {
+            color: rgb(var(--color-text-muted)) !important;
+          }
+          ul {
+            list-style: none !important;
+            padding: 0;
+            li {
+              li {
+                padding-left: 0.5rem;
+                margin-bottom: 0;
+                &::before {
+                  content: '- ';
+                }
+              }
+              a {
+                text-decoration: none;
+                padding: 5px 0;
+
+                @media (prefers-reduced-motion: no-preference) {
+                  transition: 0.2s;
+                }
+
+                &:hover {
+                  color: var(--theme-accent);
+                }
+
+                &::before {
+                  content: '🔗 ';
+                }
+              }
+              margin-bottom: 1.6rem;
+            }
+          }
+        }
+      }
+
+      .mobile-sidebar-toggle {
+        overflow: hidden;
+      }
+
+      .mobile-sidebar-toggle #grid-left {
+        display: block;
+        top: 2rem;
+      }
+
+      a,
+      button,
+      input,
+      select,
+      textarea {
+        &:focus-visible {
+          outline: 4px solid var(--theme-accent);
+          outline-offset: 4px;
+        }
+
+        &:focus:not(:focus-visible) {
+          outline: none;
+        }
+      }
+
+      article {
+        margin: auto;
+      }
+    </style>
+  </head>
+
+  <body class='pt-20'>
+    <Header currentPage={currentPage} />
+    <main class='flex w-full max-w-docs px-8 m-auto items-start'>
+      <aside
+        id='grid-left'
+        class='sticky top-0 h-screen grid-cols-1 flex'
+        title='Site Navigation'
+      >
+        <LeftSidebar currentPage={currentPage} />
+      </aside>
+      <div class='mx-auto w-full flex justify-center' id='grid-main'>
+        <PageContent
+          frontmatter={frontmatter}
+          headings={headings}
+          githubEditUrl={githubEditUrl}
+        >
+          <p class='text-theme-muted'>
+            Last updated {updatedSince} ago <span
+              class='text-sm text-theme-muted/30 italic'
+            >
+              - {new Date(lastModified || '').toLocaleDateString()}
+            </span>
+          </p>
+          <slot />
+        </PageContent>
+        <RecommendedSections />
+      </div>
+      <aside id='grid-right' class='grid-sidebar' title='Table of Contents'>
+        <RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
+      </aside>
+    </main>
+    <Footer isDocs />
+    <CopyCodeToClipboard />
+    <HeadingLinksCopyToClipboard />
+  </body>
 </html>

From 1b8c4e972ad00885d5ae5e08bed730c9efda5060 Mon Sep 17 00:00:00 2001
From: Karol <kariurek@gmail.com>
Date: Wed, 6 Sep 2023 09:58:44 +0200
Subject: [PATCH 3/4] Remove unused component

---
 .../ArticleUpdateDate/ArticleUpdateDate.tsx   | 23 ------------
 .../ArticleUpdateDate/useArticleDate.ts       | 35 -------------------
 2 files changed, 58 deletions(-)
 delete mode 100644 src/components/ArticleUpdateDate/ArticleUpdateDate.tsx
 delete mode 100644 src/components/ArticleUpdateDate/useArticleDate.ts

diff --git a/src/components/ArticleUpdateDate/ArticleUpdateDate.tsx b/src/components/ArticleUpdateDate/ArticleUpdateDate.tsx
deleted file mode 100644
index 94da3704..00000000
--- a/src/components/ArticleUpdateDate/ArticleUpdateDate.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/** @jsxImportSource react */
-
-import { timeSince } from '../../utils/timeSince'
-import { useArticleDate } from './useArticleDate'
-
-type Props = {
-	path: string
-}
-
-const ArticleUpdateDate = ({ path }: Props) => {
-	const { commitDate, error, isLoading } = useArticleDate(path)
-
-	if (error || !commitDate || isLoading) return null
-
-	return (
-		<p className='text-theme-muted'>
-			This article was last updated:{` `}
-			{timeSince(new Date(commitDate)).replace(`,`, ' and')} ago
-		</p>
-	)
-}
-
-export default ArticleUpdateDate
diff --git a/src/components/ArticleUpdateDate/useArticleDate.ts b/src/components/ArticleUpdateDate/useArticleDate.ts
deleted file mode 100644
index 74e02ad0..00000000
--- a/src/components/ArticleUpdateDate/useArticleDate.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import useSWR, { type Fetcher } from 'swr'
-
-const URL = `https://api.github.com/repos/nowyouknowprogramming/webdev-learning-materials`
-
-type Commit = {
-	commit: {
-		author: {
-			date: string
-		}
-	}
-}
-
-const HOUR_IN_MILLISECONDS = 3600 * 1000
-
-const fetcher: Fetcher<Commit[], string> = (...args) =>
-	fetch(...args).then((res) => res.json())
-
-export const useArticleDate = (path: string) => {
-	const { data, error, isLoading } = useSWR(
-		`${URL}/commits?path=${path}&per_page=1`,
-		fetcher,
-		{
-			revalidateOnFocus: false,
-			refreshInterval: HOUR_IN_MILLISECONDS,
-		}
-	)
-
-	const commitDate = data?.at(0)?.commit.author.date
-
-	return {
-		commitDate,
-		error,
-		isLoading,
-	}
-}

From c8a57702f4376120a436d5128f9f65d901574f04 Mon Sep 17 00:00:00 2001
From: Karol <kariurek@gmail.com>
Date: Wed, 6 Sep 2023 10:17:17 +0200
Subject: [PATCH 4/4] Feat: update date format to use moth DD YYYY

---
 src/layouts/MainLayout.astro | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 1286d546..a8b3fa77 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -237,7 +237,13 @@ const updatedSince = timeSince(
             Last updated {updatedSince} ago <span
               class='text-sm text-theme-muted/30 italic'
             >
-              - {new Date(lastModified || '').toLocaleDateString()}
+              - {
+                new Date(lastModified || '').toLocaleDateString('en-EN', {
+                  month: 'long',
+                  day: 'numeric',
+                  year: 'numeric',
+                })
+              }
             </span>
           </p>
           <slot />