lukeonline - commit 00bee5c

diff --git a/src/consts.ts b/src/consts.ts index c451c22..8ad1cf3 100644 --- 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 index 04b3d7d..6c466c2 100644 --- 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 new file mode 100644 index 0000000..239005c --- /dev/null +++ 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>