Added fetch for file listing from repo

.env.example

@@ -0,0 +1 @@
+GITHUB_AUTHORIZATION_BEARER_TOKEN=

.gitignore

@@ -15,6 +15,7 @@ pnpm-debug.log*
 
 # environment variables
 .env
+.env.development
 .env.production
 
 # macOS-specific files

src/components/Buttons/IconButton.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'button'> {
+  class?: string
+}
+
+const { class: className, ...attrs } = Astro.props
+---
+
+<button
+  {...attrs}
+  class:list={[
+    'cursor-pointer w-8 h-8 hover:bg-hover transition-all rounded-full',
+    className,
+  ]}
+>
+  <slot />
+</button>

src/components/Header.astro

@@ -1,6 +1,7 @@
 ---
 import { siteConfig, navBarConfig } from '../config'
 import { Icon } from 'astro-icon/components'
+import IconButton from './Buttons/IconButton.astro'
 ---
 
 <header class="fixed h-16 w-full blur-global z-10">
@@ -28,12 +29,12 @@ import { Icon } from 'astro-icon/components'
         })
       }
     </nav>
-    <div
-      class="ml-auto hidden max-sm:flex icon-button cursor-pointer relative group"
-    >
+
+    <IconButton class="ml-auto hidden max-sm:flex relative group">
+      <span class="sr-only">Menu</span>
       <Icon class="w-6 h-6 m-auto" name="material-symbols:menu-rounded" />
       <nav
-        class="absolute top-8 -left-full rounded-xl shadow-xl bg-base hidden group-hover:block animate-in fade-in"
+        class="border border-neutral-500 absolute top-8 -left-full rounded-xl shadow-xl bg-base hidden group-hover:block animate-in fade-in"
       >
         {
           navBarConfig.links.map((link) => {
@@ -53,17 +54,16 @@ import { Icon } from 'astro-icon/components'
           })
         }
       </nav>
-    </div>
-    <button id="search" class="ml-4 icon-button">
-      <span class="sr-only">Search</span>
+    </IconButton>
+    <IconButton id="search" class="ml-4">
       <Icon
         class="block w-6 h-6 m-auto"
         name="material-symbols:search-rounded"
       />
-    </button>
-    <button id="theme" class="ml-2 max-sm:ml-4 icon-button">
+    </IconButton>
+    <IconButton id="theme" class="ml-2 max-sm:ml-4">
       <span class="sr-only">Toggle theme</span>
-    </button>
+    </IconButton>
   </div>
 </header>
 

src/components/Notes/FileListing.astro

@@ -0,0 +1,40 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import { Icon } from 'astro-icon/components'
+import fetchFileList from '../../utils/fetchFileList.ts'
+import type { File } from '../../utils/fetchFileList.ts'
+
+let files: File[] = []
+const fileListResponse = await fetchFileList('data', 'some-notes')
+if (fileListResponse && fileListResponse.status === 200) {
+  files = (await fileListResponse.json()) ?? []
+}
+
+interface Props {
+  note: CollectionEntry<'notes'>
+}
+---
+
+<ul>
+  {
+    files.map((file) => (
+      <li>
+        <a
+          class="px-2 hover:underline transition-all py-1 line-clamp-1"
+          href={file.html_url}
+          target="_blank"
+        >
+          <Icon
+            class="w-4 h-4 inline-block mr-1"
+            name={
+              file.type === 'dir'
+                ? 'material-symbols:folder'
+                : 'material-symbols:lab-profile-outline'
+            }
+          />
+          {file.name}
+        </a>
+      </li>
+    ))
+  }
+</ul>

src/components/Notes/Note.astro

@@ -1,15 +1,19 @@
 ---
+import { render } from 'astro:content'
 import getTitle from '../../utils/getTitle'
 import fetchFileList from '../../utils/fetchFileList'
+import type { File } from '../../utils/fetchFileList.ts'
 import formatDate from '../../utils/formatDate'
 import Badge from '../../components/Badge.astro'
-import { render } from 'astro:content'
 import type { CollectionEntry } from 'astro:content'
 import PageLayout from '../../layouts/PageLayout.astro'
+import { Icon } from 'astro-icon/components'
 
-// @TODO: handle errors
-const fileList = await fetchFileList('posts', '')
-const files = await fileList.json()
+let files: File[] = []
+const fileListResponse = await fetchFileList('data', 'some-notes')
+if (fileListResponse && fileListResponse.status === 200) {
+  files = (await fileListResponse.json()) ?? []
+}
 
 interface Props {
   note: CollectionEntry<'notes'>
@@ -23,14 +27,26 @@ const { Content } = await render(note)
 <PageLayout title={getTitle(data.title)} description={data.description}>
   <div class="flex items-start">
     <aside
-      class="basis-[16rem] shrink-0 max-md:hidden sticky top-20 mr-4 bg-base transition-all rounded-xl p-2"
+      class="basis-64 shrink-0 max-md:hidden sticky top-20 mr-4 bg-base transition-all rounded-xl p-2"
     >
       <ul>
         {
           // @TODO: Extract to its own component
           files.map((file) => (
             <li>
-              <a class="px-2 menu-item" href={file.html_url}>
+              <a
+                class="px-2 hover:underline transition-all py-1 line-clamp-1"
+                href={file.html_url}
+                target="_blank"
+              >
+                <Icon
+                  class="w-4 h-4 inline-block mr-1"
+                  name={
+                    file.type === 'dir'
+                      ? 'material-symbols:folder'
+                      : 'material-symbols:lab-profile-outline'
+                  }
+                />
                 {file.name}
               </a>
             </li>

src/config.ts

@@ -1,6 +1,7 @@
 export const siteConfig: SiteConfig = {
   title: "Ex-iT's Notes",
   language: 'en',
+  direction: 'ltr',
   description: "Ex-iT's notes on CTF's, cyber security, and development.",
   keywords:
     'Ex-iT, blog, CTF, HackTheBox, TryHackMe, security, programming, development',
@@ -51,6 +52,7 @@ export const socialLinks: SocialLink[] = [
 interface SiteConfig {
   title: string
   language: Intl.LocalesArgument
+  direction: 'ltr' | 'rtl'
   description: string
   keywords: string
   author: string

src/content.config.ts

@@ -39,7 +39,7 @@ const projectSchema = z.object({
 })
 
 const projects = defineCollection({
-  loader: file('src/content/data/projects.json'),
+  loader: file('src/content/projects.json'),
   schema: projectSchema,
 })
 

src/env.d.ts

@@ -1,2 +1,10 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+interface ImportMetaEnv {
+  readonly GITHUB_AUTHORIZATION_BEARER_TOKEN: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

src/layouts/BaseLayout.astro

@@ -12,16 +12,14 @@ interface Props {
 }
 
 const {
-  title = [siteConfig.description, siteConfig.title]
-    .filter(Boolean)
-    .join(' | '),
+  title = [siteConfig.description, siteConfig.title].join(' | '),
   description = siteConfig.description,
   image = siteConfig.avatar,
 } = Astro.props
 ---
 
 <!doctype html>
-<html lang={siteConfig.language}>
+<html lang={String(siteConfig.language)} dir={siteConfig.direction}>
   <head>
     <BaseHead title={title} description={description} image={image} />
     <script is:inline>

src/main.css

@@ -58,14 +58,11 @@
 }
 
 @layer utilities {
+  /* @TODO: Extract these to components where possible */
   .container-global {
     @apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
   }
 
-  .menu-item {
-    @apply cursor-pointer hover:bg-hover transition-all rounded-lg py-1 line-clamp-1 active:bg-active;
-  }
-
   .base-card {
     @apply bg-base transition-all rounded-xl p-4;
   }
@@ -77,17 +74,13 @@
   }
 
   .blur-global {
-    @apply backdrop-blur-[20px] backdrop-saturate-[180%];
+    @apply backdrop-blur-lg backdrop-saturate-150;
   }
 
   .card {
     @apply bg-base rounded-xl hover:ring ring-primary transition-all;
   }
 
-  .icon-button {
-    @apply w-8 h-8 hover:bg-hover transition-all rounded-full;
-  }
-
   .badge {
     @apply bg-back rounded-xl transition-all px-2 py-1 flex items-center font-bold;
   }

src/pages/index.astro

@@ -11,7 +11,7 @@ import MainLayout from '../layouts/MainLayout.astro'
         class="w-8 h-8 mr-2 text-highlight"
         name="material-symbols:exit-to-app-sharp"
       />
-      <h1 class="not-prose font-bold text-2xl text-white w-auto">
+      <h1 class="not-prose text-primary font-bold text-2xl w-auto">
         {siteConfig.title}
       </h1>
     </div>

src/utils/getTitle.ts

@@ -1,5 +1,5 @@
 import { siteConfig } from '../config.ts'
 
 export default function (title: string) {
-  return [title, siteConfig.title].filter(Boolean).join(' | ')
+  return [title, siteConfig.title].join(' | ')
 }