lukeonline - commit a4555a6
feat: new code container componenta4555a6d548a65eb6cef3cd571baae8565fcde15LukeJ<luke.jones.2567@gmail.com>2026-09-29T21:48:21+01:00diff --git a/src/components/CodeContainer.astro b/src/components/CodeContainer.astro
new file mode 100644
index 0000000..9664580
--- /dev/null
+++ b/src/components/CodeContainer.astro
@@ -0,0 +1,8 @@
+---
+const { ...props } = Astro.props
+---
+
+<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">
+ {props.code}
+</div>
diff --git a/src/lib/repos.ts b/src/lib/repos.ts
index 092dd94..acbdd70 100644
--- a/src/lib/repos.ts
+++ b/src/lib/repos.ts
@@ -54,3 +54,9 @@ export function getFile(name: string, encodedPath: string) {
return JSON.parse(fs.readFileSync(file, 'utf-8'))
}
+
+export function getFileByPath(name: string, filePath: string) {
+ const encodedPath = Buffer.from(filePath, 'utf-8').toString('base64url')
+
+ return getFile(name, encodedPath)
+}
diff --git a/src/pages/projects/[name].astro b/src/pages/projects/[name].astro
index c74f801..ff9ec26 100644
--- a/src/pages/projects/[name].astro
+++ b/src/pages/projects/[name].astro
@@ -2,8 +2,9 @@
import Base from '../../layouts/Base.astro'
import { getCollection } from 'astro:content'
-import { getCommits, getTree } from '../../lib/repos'
+import { getFileByPath, getTree } from '../../lib/repos'
import { BUTTON_STYLING_SHARED } from '../../consts.ts'
+import CodeContainer from '../../components/CodeContainer.astro'
export async function getStaticPaths() {
const repos = await getCollection('repos')
@@ -21,22 +22,38 @@ export async function getStaticPaths() {
const { repo } = Astro.props
const tree = getTree(repo.data.name)
+
+function getReadMeContent() {
+ const readme = tree.find(
+ (file) => file.path.toLowerCase() === 'readme.md',
+ )
+
+ if (!readme) {
+ return ''
+ }
+
+ const file = getFileByPath(
+ repo.data.name,
+ readme.path,
+ )
+
+ return file.binary ? '' : file.content
+}
---
<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>
- </div>
- <div class="flex flex-col ring ring-gray-600 rounded-sm p-2 inset-shadow-sm inset-shadow-gray-400">
- {
- tree.map((file) => (
- <a href={`/projects/${repo.data.name}/files/${file.path}`}
- class='p-3px px-1'
- >
- {file.path}
- </a>
- ))
- }
+ <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
+ >
</div>
+ <CodeContainer code={getReadMeContent()} />
</Base>
diff --git a/src/pages/projects/[name]/commits/index.astro b/src/pages/projects/[name]/commits/index.astro
index 7608724..10edaa1 100644
--- a/src/pages/projects/[name]/commits/index.astro
+++ b/src/pages/projects/[name]/commits/index.astro
@@ -18,7 +18,7 @@ const { name } = Astro.params
const commits = getCommits(name!)
---
-<Base title={`${name} - commits`}>
+<Base title={`${name}`}>
<table class="w-full">
<tr>
<th class="text-left">sha</th>