lukeonline

commit 00bee5cf322518297863f9f2a00b67d2ce4de915
parent e8fd3b1070757ae88a9c5f845e5763c77567f475
Author: LukeJ <luke.jones.2567@gmail.com>
Date:   Tue, 29 Sep 2026 22:04:14 +0100

feat: display files in their own page

Diffstat:
M
src/consts.ts
 | 
6
++++++
M
src/pages/projects/[name].astro
 | 
12
+++++++++++-
A
src/pages/projects/[name]/files/[...path].astro
 | 
76
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

3 files changed, 93 insertions(+), 1 deletion(-)
diff --git a/src/consts.ts b/src/consts.ts
@@ -15,6 +15,12 @@ export const BUTTON_STYLING_SHARED =
   ' transition duration-150' +
   ' active:duration-50'
 
+export const DISABLED_BUTTON_STYLING_SHARED =
+  'border-solid border-1 border-gray-400' +
+  ' flex gap-1 p-2 rounded-sm' +
+  ` ${BUTTON_BACKGROUND_GRADIENT} shadow-sm` +
+  ' text-gray-400'
+
 export const BASE_LAYOUT_STYLING =
   'flex flex-col gap-3 p-6' +
   ' rounded border border-gray-600 shadow-lg' +
diff --git a/src/pages/projects/[name].astro b/src/pages/projects/[name].astro
@@ -3,7 +3,7 @@ import Base from '../../layouts/Base.astro'
 
 import { getCollection } from 'astro:content'
 import { getFileByPath, getTree } from '../../lib/repos'
-import { BUTTON_STYLING_SHARED } from '../../consts.ts'
+import { BUTTON_STYLING_SHARED, DISABLED_BUTTON_STYLING_SHARED } from '../../consts.ts'
 import CodeContainer from '../../components/CodeContainer.astro'
 
 export async function getStaticPaths() {
@@ -54,6 +54,16 @@ function getReadMeContent() {
       href={`/projects/${repo.data.name}/files`}
     >{tree.length} files</a
     >
+    <a
+      class={DISABLED_BUTTON_STYLING_SHARED + ' h-8 p-1 pl-2 items-center gap-3'}
+      aria-disabled="true"
+    >README</a
+    >
+    <a
+      class={BUTTON_STYLING_SHARED + ' h-8 p-1 pl-2 items-center gap-3'}
+      href={`/projects/${repo.data.name}/file/LICENSE`}
+    >LICENSE</a
+    >
   </div>
   <CodeContainer code={getReadMeContent()} />
 </Base>
diff --git a/src/pages/projects/[name]/files/[...path].astro b/src/pages/projects/[name]/files/[...path].astro
@@ -0,0 +1,76 @@
+---
+import { getCollection } from 'astro:content'
+import { getTree } from '../../../../lib/repos'
+import Base from '../../../../layouts/Base.astro'
+import { BUTTON_STYLING_SHARED, DISABLED_BUTTON_STYLING_SHARED } from '../../../../consts.ts'
+
+export async function getStaticPaths() {
+  const repos = await getCollection('repos')
+
+  return repos.map((repo) => ({
+    params: {
+      name: repo.data.name,
+    },
+    props: {
+      repo,
+    },
+  }))
+}
+
+const { repo } = Astro.props
+
+const tree = getTree(repo.data.name)
+
+const files = tree.filter((file) => !file.path.includes('/'))
+const directories = [
+  ...new Set(
+    tree
+      .filter((file) => file.path.includes('/'))
+      .map((file) => file.path.split('/')[0])
+  ),
+]
+---
+
+<Base title={`${repo.data.name}`}>
+  <div class="flex flex-row items-baseline gap-2">
+    <code class="text-sm">{repo.data.defaultBranch}</code>
+    <a
+      class={BUTTON_STYLING_SHARED + ' h-8 p-1 pl-2 items-center gap-3'}
+      href={`/projects/${repo.data.name}/commits`}
+    >{repo.data.commitCount} commits</a
+    >
+    <a
+      class={BUTTON_STYLING_SHARED + ' h-8 p-1 pl-2 items-center gap-3'}
+      href={`/projects/${repo.data.name}/files`}
+    >{tree.length} files</a
+    >
+    <a
+      class={BUTTON_STYLING_SHARED + ' h-8 p-1 pl-2 items-center gap-3'}
+      href={`/projects/${repo.data.name}/file/README.md`}
+    >README</a
+    >
+    <a
+      class={BUTTON_STYLING_SHARED + ' h-8 p-1 pl-2 items-center gap-3'}
+      href={`/projects/${repo.data.name}/file/LICENSE`}
+    >LICENSE</a
+    >
+  </div>
+  <div
+    class="flex flex-col rounded-sm p-2 ring inset-shadow-sm ring-gray-600 inset-shadow-gray-400 font-mono text-sm whitespace-pre-line">
+    {
+      directories.map((directory) => (
+          <a class="p-0.5 hover:text-blue-800 focus:underline" href={`/projects/${repo.data.name}/files/${directory}`}>
+            {directory}/
+          </a>
+      ))
+    }
+
+    {
+      files.map((file) => (
+          <a class="p-0.5 hover:text-blue-800 focus:underline" href={`/projects/${repo.data.name}/file/${file.path}`}>
+            {file.path}
+          </a>
+      ))
+    }
+  </div>
+</Base>