Merge pull request #1 from JuLi0n21/import-alias

Neat QOL modification

README.MD

@@ -1,21 +1,26 @@
 # New Homepage
+
 The general idea is showing off all the software(websites) that have been create in the past (only worth showing (skip ai slop)
+
 - Idea is to configure a base with astro and just use the Markdown files to manage the frontend
 - to host each service probably expand / create a demo-deploy repo? either crate managed docker containers? or kubernetes?...( overkill but its fine )
 
 # Freetime - Active Dev
+
 - [Horsa](https://horsa-dev.illegalesachen.download) -- issues: authwall
-- [Fileclap](https://fileclap.com) -- issuse: authwall 
+- [Fileclap](https://fileclap.com) -- issuse: authwall
 - [Argocd](https://argocd.illegalesachen.download/) -- just for me should not be public?
 - [Metrics](https://metrics.illegalesachen.download/) -- just for me should not be public?
 - [Repository](https://docker-ui.illegalesachen.download/) -- just for me should not be public?
 
 # Freetime - Dead (maybe needs some minor/ major touchups to be presentable)
+
 - pwa-player-(https://music.illegalesachen.download) -- issuse: authwall and active setup required
 - osuProgress-online -(https://progress.illegalesachen.download) -- issuse: authwall
 - osu!Progress-local -(http:localhost:4200) -- issuse: authwall local only requires stable?
 
 # University - Group Projects
+
 - eai
 - projekt-1
 - eai-xmpp
@@ -26,10 +31,11 @@ The general idea is showing off all the software(websites) that have been create
 - Messenger App?
 
 # University - Single Dev (idk if i havent just deleted them :shrug:)
+
 - Ina2?
 - MandelBrot?
 - SplineInterpolation?
 
 # What about no website Services?
-- thumbnailservice, go-osu-parser?, general other offline or cli only apps?
 
+- thumbnailservice, go-osu-parser?, general other offline or cli only apps?

astro.config.mjs

@@ -1,10 +1,10 @@
 // @ts-check
 
-import mdx from '@astrojs/mdx';
+import mdx from "@astrojs/mdx";
-import sitemap from '@astrojs/sitemap';
+import sitemap from "@astrojs/sitemap";
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 
 export default defineConfig({
-	site: 'https://example.com',
+  site: "https://example.com",
-	integrations: [mdx(), sitemap()],
+  integrations: [mdx(), sitemap()],
 });

flake.nix

@@ -14,6 +14,7 @@
         packages = with pkgs; [
           nodejs_25
           nodePackages.npm
+          prettier
         ];
 
         env = {

package.json

@@ -3,16 +3,21 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
+    "predev": "astro check",
+    "prebuild": "astro check",
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "format": "prettier --write ."
   },
   "dependencies": {
+    "@astrojs/check": "^0.9.6",
     "@astrojs/mdx": "^4.3.13",
     "@astrojs/rss": "^4.0.15",
     "@astrojs/sitemap": "^3.7.0",
     "astro": "^5.17.1",
-    "sharp": "^0.34.3"
+    "sharp": "^0.34.3",
+    "typescript": "^5.9.3"
   }
-}
+}

src/components/BaseHead.astro

@@ -1,9 +1,9 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
-import '../styles/global.css';
+import '@styles/global.css';
 import type { ImageMetadata } from 'astro';
-import { SITE_TITLE } from '../consts';
+import { SITE_TITLE } from '@ptypes/consts.ts';
 
 interface Props {
 	title: string;

src/components/Header.astro

@@ -1,6 +1,6 @@
 ---
-import { SITE_TITLE } from '../consts';
+import { SITE_TITLE } from '@ptypes/consts.ts';
-import HeaderLink from './HeaderLink.astro';
+import HeaderLink from '@components/HeaderLink.astro';
 import { getCollection } from 'astro:content';
 
 const personalPosts = (await getCollection('personal')).sort(

src/consts.ts

@@ -1,5 +1,5 @@
 // Place any global data in this file.
 // You can import this data from anywhere in your site by using the `import` keyword.
 
-export const SITE_TITLE = 'Projects';
+export const SITE_TITLE = "Projects";
-export const SITE_DESCRIPTION = 'Homepage for Varius of Projects';
+export const SITE_DESCRIPTION = "Homepage for Varius of Projects";

src/content.config.ts

@@ -1,35 +1,40 @@
-import { defineCollection, z } from 'astro:content';
+import { defineCollection, z } from "astro:content";
-import { glob } from 'astro/loaders';
+import { glob } from "astro/loaders";
 
 const personal = defineCollection({
-	// Load Markdown and MDX files in the `src/content/blog/` directory.
+  // Load Markdown and MDX files in the `src/content/blog/` directory.
-	loader: glob({ base: './src/content/blog/personal', pattern: '**/*.{md,mdx}' }),
+  loader: glob({
-	// Type-check frontmatter using a schema
+    base: "./src/content/blog/personal",
-	schema: ({ image }) =>
+    pattern: "**/*.{md,mdx}",
-		z.object({
+  }),
-			title: z.string(),
+  // Type-check frontmatter using a schema
-			description: z.string(),
+  schema: ({ image }) =>
-			// Transform string to Date object
+    z.object({
-			pubDate: z.coerce.date(),
+      title: z.string(),
-			gitLink: z.string().optional(),
+      description: z.string(),
-			heroImage: image().optional(),
+      // Transform string to Date object
-		}),
+      pubDate: z.coerce.date(),
+      gitLink: z.string().optional(),
+      heroImage: image().optional(),
+    }),
 });
 
-
 const uni = defineCollection({
-	// Load Markdown and MDX files in the `src/content/blog/` directory.
+  // Load Markdown and MDX files in the `src/content/blog/` directory.
-	loader: glob({ base: './src/content/blog/university', pattern: '**/*.{md,mdx}' }),
+  loader: glob({
-	// Type-check frontmatter using a schema
+    base: "./src/content/blog/university",
-	schema: ({ image }) =>
+    pattern: "**/*.{md,mdx}",
-		z.object({
+  }),
-			title: z.string(),
+  // Type-check frontmatter using a schema
-			description: z.string(),
+  schema: ({ image }) =>
-			// Transform string to Date object
+    z.object({
-			pubDate: z.coerce.date(),
+      title: z.string(),
-			gitLink: z.string().optional(),
+      description: z.string(),
-			heroImage: image().optional(),
+      // Transform string to Date object
-		}),
+      pubDate: z.coerce.date(),
+      gitLink: z.string().optional(),
+      heroImage: image().optional(),
+    }),
 });
 
 export const collections = { personal, uni };

src/content/blog/personal/fileclap.mdx

@@ -1,13 +1,13 @@
 ---
-title: 'FileClap'
+title: "FileClap"
-description: 'Doormat'
+description: "Doormat"
-pubDate: 'Mar 01 2026'
+pubDate: "Mar 01 2026"
-gitLink: 'https://github.com/juli0n21/fileclap'
+gitLink: "https://github.com/juli0n21/fileclap"
 ---
 
-import { Image } from 'astro:assets';
+import { Image } from "astro:assets";
-import homeview from '../../../assets/fileclap/homeview.png';
+import homeview from "@assets/fileclap/homeview.png";
-import search from '../../../assets/fileclap/search.png';
+import search from "@assets/fileclap/search.png";
 
 <style is:global>{`
  h1, h2, h3, h4, h5, h6, figcaption::before { color: #ffdf20 }
@@ -22,7 +22,9 @@ import search from '../../../assets/fileclap/search.png';
        }
 }
 `}</style>
+
 # FileClap: Clear the paperwork off the table
+
 Your digital assistant for students and trainees
 
 No more paper chaos! FileClap helps you easily organize photos, receipts, and important documents. Securely stored and accessible from anywhere—for a stress-free daily life with more clarity!
@@ -32,8 +34,10 @@ No more paper chaos! FileClap helps you easily organize photos, receipts, and im
 Advanced Search Capabilites using Vector embeddings for shit
 
 <figure>
-       <Image src={search} alt="search" />
+  <Image src={search} alt="search" />
-       <figcaption>Preview of the Search result for value "golang books"</figcaption>
+  <figcaption>Preview of the Search result for value "golang books"</figcaption>
 </figure>
 
-<a href="https://fileclap.com/home" target="_blank" ><h1>check it out!</h1></a>
+<a href="https://fileclap.com/home" target="_blank">
+  <h1>check it out!</h1>
+</a>

src/content/blog/personal/general.md

@@ -1,8 +1,9 @@
 ---
-title: 'Deployment'
+title: "Deployment"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Mar 02 2026'
+pubDate: "Mar 02 2026"
 ---
+
 <style is:global>
 h1,
 h2,
@@ -25,10 +26,11 @@ img {
     justify-content: space-between;
 }
 </style>
+
 # Here is A List of Frequently Used Services for Easy Access <3
 
-
 //extract the fucking uhh thingy ma bob
+
 <ul>
     <li>
         <a href="https://horsa.illegalesachen.download">
@@ -60,4 +62,3 @@ img {
 <a href="https://docker-ui.illegalesachen.download/"><img src="https://docker-ui.illegalesachen.download/favicon.ico" heigth="100px" width="100px" /></a>
     </li>
 </ul>
-

src/content/blog/personal/horsa.md

@@ -1,9 +1,10 @@
 ---
-title: 'Horsa'
+title: "Horsa"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Feb 27 2026'
+pubDate: "Feb 27 2026"
-gitLink: 'https://github.com/juli0n21/horsa'
+gitLink: "https://github.com/juli0n21/horsa"
 ---
+
 <style is:global>
 h1,
 h2,
@@ -19,17 +20,18 @@ img {
     border-color: #bb4d00; 
 }
 </style>
+
 # Horsa Haas HorseShoe as a Service
 
 Horsa is an Mobile First all in One Solution for ur BlackSmithing Shop
 
 ## Features
+
 - Invoice Management
 - Appointment Planning
 - Automatic VRT planning
 - Customer Management
 - Inventory Management
-- WorkUnit preperation 
+- WorkUnit preperation
-
-![homeviwe](../../../assets/horsa/invoices.png)
 
+![homeview](@assets/horsa/invoices.png)

src/content/blog/personal/osuProgress.md

@@ -1,8 +1,9 @@
 ---
-title: 'osu!Progress'
+title: "osu!Progress"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Jun 20 2024'
+pubDate: "Jun 20 2024"
 ---
+
 <style is:global>
 h1,
 h2,
@@ -16,6 +17,7 @@ img {
     border-color: #aaaeaf;
 }
 </style>
+
 # osu!Progress - track ur scores and time wasted
 
 ## Features
@@ -35,10 +37,11 @@ img {
 
 - C#
 - Liquid for Templates
-- Tailwind for Styling 
+- Tailwind for Styling
 - Sqlite as DB
 
 ## Canceld Extension - [osuProgress Server](https://github.com/JuLi0n21/osuprogressserver)
+
 The idea was to extend the concept and make it easy to share local scores only, due to lazer not being supported by the score extraction library at the time and now live score feed being established went no where
 
 # Arcitectur
@@ -46,4 +49,4 @@ The idea was to extend the concept and make it easy to share local scores only,
 - golang
 - a-h/templ + tailwind
 - Sqlite as DB
-![Score](../../../assets/osuProgress/scorePage.png)
+  ![Score](@assets/osuProgress/scorePage.png)

src/content/blog/personal/pwaplayer.md

@@ -1,8 +1,9 @@
 ---
-title: 'pwa-player'
+title: "pwa-player"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Jul 08 2022'
+pubDate: "Jul 08 2022"
 ---
+
 <style is:global>
  h1,
  h2,
@@ -19,8 +20,9 @@ pubDate: 'Jul 08 2022'
 </style>
 
 # Osu!Music (Pwa Player)
+
 Pwa player is a Website that allows u to play and share ur local osu music with ur friends and listen to it on the go
 
 The Focus is on easy setup, customization and most emportantly Enjoying the music
 
-![homeviwe](../../../assets/pwa-player/menu.png)
+![homeview](@assets/pwa-player/menu.png)

src/content/blog/university/eai-presentation.md

@@ -1,8 +1,9 @@
 ---
-title: 'eai-presentation-frameworks'
+title: "eai-presentation-frameworks"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Jul 08 2022'
+pubDate: "Jul 08 2022"
 ---
+
 <style is:global>
 h1,
 h2,

src/content/blog/university/eai.md

@@ -1,8 +1,9 @@
 ---
-title: 'eai'
+title: "eai"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Jul 08 2022'
+pubDate: "Jul 08 2022"
 ---
+
 <style is:global>
 h1,
 h2,

src/content/blog/university/eai.xmpp.md

@@ -1,8 +1,9 @@
 ---
-title: 'eai-xmpp'
+title: "eai-xmpp"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Jul 08 2022'
+pubDate: "Jul 08 2022"
 ---
+
 <style is:global>
 h1,
 h2,

src/content/blog/university/gc-project.md

@@ -1,8 +1,9 @@
 ---
-title: 'vr-threejs'
+title: "vr-threejs"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Jul 08 2022'
+pubDate: "Jul 08 2022"
 ---
+
 <style is:global>
 h1,
 h2,

src/content/blog/university/gwa.md

@@ -1,8 +1,9 @@
 ---
-title: 'GWA-webshop'
+title: "GWA-webshop"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Jul 08 2022'
+pubDate: "Jul 08 2022"
 ---
+
 <style is:global>
 h1,
 h2,

src/content/blog/university/ina2.md

@@ -1,8 +1,9 @@
 ---
-title: 'Ina2-Webshop'
+title: "Ina2-Webshop"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Jul 08 2022'
+pubDate: "Jul 08 2022"
 ---
+
 <style is:global>
 h1,
 h2,

src/content/blog/university/ise-tweeter.md

@@ -1,8 +1,9 @@
 ---
-title: 'ISE-Tweeter'
+title: "ISE-Tweeter"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Jul 08 2022'
+pubDate: "Jul 08 2022"
 ---
+
 <style is:global>
 h1,
 h2,

src/content/blog/university/mandelbrot.md

@@ -1,8 +1,9 @@
 ---
-title: 'MandelBrot'
+title: "MandelBrot"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Jul 08 2022'
+pubDate: "Jul 08 2022"
 ---
+
 <style is:global>
 h1,
 h2,

src/content/blog/university/messanger.md

@@ -1,8 +1,9 @@
 ---
-title: 'Messenger-App/Server'
+title: "Messenger-App/Server"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Jul 08 2022'
+pubDate: "Jul 08 2022"
 ---
+
 <style is:global>
 h1,
 h2,

src/content/blog/university/picShare.md

@@ -1,8 +1,9 @@
 ---
-title: 'PicShare'
+title: "PicShare"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Jul 08 2022'
+pubDate: "Jul 08 2022"
 ---
+
 <style is:global>
 h1,
 h2,

src/content/blog/university/project-1.md

@@ -1,8 +1,9 @@
 ---
-title: 'Project-1'
+title: "Project-1"
-description: 'Lorem ipsum dolor sit amet'
+description: "Lorem ipsum dolor sit amet"
-pubDate: 'Jul 08 2022'
+pubDate: "Jul 08 2022"
 ---
+
 <style is:global>
 h1,
 h2,

src/layouts/BlogPost.astro

@@ -1,19 +1,40 @@
 ---
-import { Image } from 'astro:assets';
+import BaseHead from '@components/BaseHead.astro';
-import type { CollectionEntry } from 'astro:content';
+import Header from '@components/Header.astro';
-import BaseHead from '../components/BaseHead.astro';
+import GithubIcon from '@assets/github.svg'
-import Footer from '../components/Footer.astro';
-import FormattedDate from '../components/FormattedDate.astro';
-import Header from '../components/Header.astro';
-import GithubIcon from '../assets/github.svg'
-type Props = CollectionEntry<'blog'>['data'];
 
-const { title, description, pubDate, updatedDate, gitLink } = Astro.props;
+const { title, description, gitLink } = Astro.props;
 ---
 
 <html lang="en">
 	<head>
 		<BaseHead title={title} description={description} />
+		<!-- To add meta data here later -->
+		<style>
+		body { 
+			display:flex; 
+			flex-direction: row;
+		}
+		main { display: flex; 
+			flex-direction: row;
+			align-items: start;
+			justify-content: space-between;
+			padding: 0;
+			margin: 0;
+			flex-grow: 1;
+		}
+
+		.wrapper {
+			display: flex;
+			flex-direction: column;
+			flex-grow: 1;
+			min-width: 0;
+			width: 0;
+			padding: 1cm;
+			margin: 1cm;
+		}
+
+		</style>
 	</head>
 
 	<body>
@@ -29,28 +50,3 @@ const { title, description, pubDate, updatedDate, gitLink } = Astro.props;
 		</main>
 	</body>
 </html>
-<style>
-body { 
-	display:flex; 
-	flex-direction: row;
-}
-main { display: flex; 
-	flex-direction: row;
-	align-items: start;
-	justify-content: space-between;
-	padding: 0;
-	margin: 0;
-	flex-grow: 1;
-}
-
-.wrapper {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-	min-width: 0;
-	width: 0;
-	padding: 1cm;
-	margin: 1cm;
-}
-
-</style>

src/pages/blog/personal/[id].astro

@@ -1,6 +1,11 @@
 ---
 import { getCollection, render } from 'astro:content';
-import BlogPost from '../../../layouts/BlogPost.astro';
+import BlogPost from '@layouts/BlogPost.astro';
+import type {
+  InferGetStaticParamsType,
+  InferGetStaticPropsType,
+  GetStaticPaths,
+} from "astro";
 
 export async function getStaticPaths() {
     const posts = await getCollection('personal');
@@ -10,9 +15,12 @@ export async function getStaticPaths() {
     }));
 }
 
-type Props = CollectionEntry<'blog'>;
+getStaticPaths satisfies GetStaticPaths;
+type Params = InferGetStaticParamsType<typeof getStaticPaths>;
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
-const { post } = Astro.props;
+const { post } = Astro.props as Props;
+const { id } = Astro.params as Params;
 const { Content } = await render(post);
 ---
 

src/pages/blog/university/[id].astro

@@ -1,6 +1,11 @@
 ---
 import { getCollection, render } from 'astro:content';
-import BlogPost from '../../../layouts/BlogPost.astro';
+import BlogPost from '@layouts/BlogPost.astro';
+import type {
+  InferGetStaticParamsType,
+  InferGetStaticPropsType,
+  GetStaticPaths,
+} from "astro";
 
 export async function getStaticPaths() {
     const posts = await getCollection('uni');
@@ -10,12 +15,15 @@ export async function getStaticPaths() {
     }));
 }
 
-type Props = CollectionEntry<'blog'>;
+getStaticPaths satisfies GetStaticPaths;
+type Params = InferGetStaticParamsType<typeof getStaticPaths>;
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
-const { post } = Astro.props;
+const { post } = Astro.props as Props;
+const { id } = Astro.params as Params;
 const { Content } = await render(post);
 ---
 
 <BlogPost {...post.data}>
-	<Content />
+    <Content />
 </BlogPost>

src/pages/index.astro

@@ -1,66 +1,18 @@
 ---
-import BaseHead from '../components/BaseHead.astro';
+import BaseHead from '@components/BaseHead.astro';
-import Footer from '../components/Footer.astro';
+import Header from '@components/Header.astro';
-import Header from '../components/Header.astro';
+import { SITE_DESCRIPTION, SITE_TITLE } from '@ptypes/consts.ts';
-import { SITE_DESCRIPTION, SITE_TITLE } from '../consts';
 
-let images = 
+let shuffled: string[] = [];
-[
+let images: string[] = [];
-  'https://fshare.kami.boo/u/xH0KLo.jpg',
-  'https://fshare.kami.boo/u/a0a2234c-b361-425f-8794-612c7c9fbafe.jpg',
-  'https://fshare.kami.boo/u/7ceef00c-35cf-4a2f-bec1-0fb489db5f7c.jpg',
-  'https://fshare.kami.boo/u/1dc11a22-b492-4d83-b39f-08dc46033c68.jpg',
-  'https://fshare.kami.boo/u/ede1face-6905-47a2-bf44-7c2bf73206e3.jpg',
-  'https://fshare.kami.boo/u/a5fcf2c4-4f2e-4070-a798-0fbc82bd9c78.jpg',
-  'https://fshare.kami.boo/u/7e772637-8deb-474e-b0af-6a28823d81cd.jpg',
-  'https://fshare.kami.boo/u/54362679-999f-48e3-8ccd-74265a70bfdf.jpg',
-  'https://fshare.kami.boo/u/08db3d3f-2a60-4298-a348-06c5cdb7a76e.jpg',
-  'https://fshare.kami.boo/u/c99e11e5-860e-4db6-b34e-15f2161f0eed.jpg',
-  'https://fshare.kami.boo/u/ILaX7V.jpg',
-  'https://fshare.kami.boo/u/3a54d27d-cd50-4042-af12-58548ac4bc18.jpg',
-  'https://fshare.kami.boo/u/0bd180d7-64e2-4873-b1fc-b5019668cfdb.jpg',
-  'https://fshare.kami.boo/u/939f2614-a85a-4a24-8920-992cd93a57cf.jpg',
-  'https://fshare.kami.boo/u/cb877b4c-202f-42db-91f7-84cc8807985d.jpg',
-  'https://fshare.kami.boo/u/l8LvNF.jpg',
-  'https://fshare.kami.boo/u/ee1a2ad8-0989-4b08-8b50-2477c1ecb4cd.jpg',
-  'https://fshare.kami.boo/u/5d0272fd-a693-4940-a110-c731ca03e5f5.jpg',
-  'https://fshare.kami.boo/u/f8422aae-671c-4dc5-8f47-7088b230c8b9.jpg',
-  'https://fshare.kami.boo/u/e0b096d5-eaac-4185-8049-e9e4e6e517ec.jpg',
-  'https://fshare.kami.boo/u/5e1e8a74-eba0-4a9a-82a8-a99707d3a536.jpg'
-].sort(() => Math.random() - .5);
-
-let shuffeld = [
-  'https://fshare.kami.boo/u/7e9423b9-f3f7-412b-af30-45b1a0f4957b.jpg',
-  'https://fshare.kami.boo/u/cfe345a2-f91c-4486-a3b1-714c8a5f6279.jpg',
-  'https://fshare.kami.boo/u/7ddd3e93-dedf-448d-ae82-1f1182084195.jpg',
-  'https://fshare.kami.boo/u/9129a055-ceb9-49f1-a549-a3e5e4dc1629.jpg',
-  'https://fshare.kami.boo/u/ccdfe9bc-e317-4dcd-9c6c-7f7491cf34a2.jpg',
-  'https://fshare.kami.boo/u/40ba2a78-2aaf-4f85-a722-f918d8095a72.jpg',
-  'https://fshare.kami.boo/u/dc64b765-aac1-454a-a40c-8599b7581690.jpg',
-  'https://fshare.kami.boo/u/7399f2a9-28f7-4c43-9890-6cc681ec7ecf.jpg',
-  'https://fshare.kami.boo/u/efee574e-3945-46e4-8d4e-9b132561fef0.jpg',
-  'https://fshare.kami.boo/u/230fd5a9-ef97-4bbb-a997-ef11accb5da4.jpg',
-  'https://fshare.kami.boo/u/43be89ba-2d40-402b-90ee-bcb1e6ffd789.jpg',
-  'https://fshare.kami.boo/u/4093c11f-c1f0-4a18-8e1c-60404eafafb5.jpg',
-  'https://fshare.kami.boo/u/cd2ffbbc-56be-4643-8540-9297c74dc8dd.jpg',
-  'https://fshare.kami.boo/u/0db3ec0a-d325-4f75-a0e9-57e1b3d39025.jpg',
-  'https://fshare.kami.boo/u/b5ffd08b-5200-4208-8c27-c1f0f30754d5.jpg',
-  'https://fshare.kami.boo/u/3ef0ae02-5cb1-4560-843f-d9fd4637b05e.jpg',
-  'https://fshare.kami.boo/u/a1c71338-579d-4e81-8edb-c1b9b243c748.jpg',
-  'https://fshare.kami.boo/u/d0e8a4cd-a04e-46dd-a22f-5d66bc5bfbb8.jpg',
-  'https://fshare.kami.boo/u/bb229c83-0755-4c5f-a1d3-5a7edf2bd8c7.jpg',
-  'https://fshare.kami.boo/u/8f5b50a9-567b-4563-9fd6-0d35fafed4f9.jpg'
-].sort(() => Math.random() - .5);
 
 const response = await fetch('https://fshare.kami.boo/api/server/folder/cmm9jbqvt00025omwu5cnpw9i')
 if (response.ok) {
 	const data = await response.json();
-	const files = data.files.map(f => `https://fshare.kami.boo/raw${f.url.substring(2)}`).sort(() => Math.random() - .5);
+	const files = data.files.map((f: Response) => `https://fshare.kami.boo/raw${f.url.substring(2)}`).sort(() => Math.random() - .5) as string[];
 	const middle = Math.round(files.length / 2);
-	shuffeld = files.slice(0,middle);
+	shuffled = files.slice(0,middle);
 	images = files.slice(middle);
-	//console.log(shuffeld)
-	//console.log(images)
 	} else {
 		const errorBody = await response.text();
 		console.error("FAILED TO FETCH", response.status, response.statusText, errorBody);
@@ -69,42 +21,133 @@ if (response.ok) {
 
 ---
 
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 	<head>
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+		<style>
+		body, html {
+			margin: 0;
+			padding: 0;
+			height: 100vh;
+			overflow: hidden;
+		}
+
+		main {
+			margin: 1cm;
+			padding: 1cm;
+		}
+
+		.layout {
+			display: flex;
+			height: 100%;
+			width: 100%;
+		}
+
+		.sidebar {
+			flex: 0 0 200px;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			padding: 0;
+			box-sizing: border-box;
+			z-index: 10;
+			background: rgba(0, 0, 0, 0.5);
+			color: white;
+		}
+
+		.scrolling-gallery {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			overflow: hidden;
+			position: relative;
+		}
+
+		.gallery-wrapper {
+			display: flex;
+			flex-direction: column;
+			gap: 4rem;
+			transform: rotate(-8deg) scale(1.3);
+		}
+
+		.scroll-track {
+			display: flex;
+			gap: 3rem;
+			width: max-content;
+			animation: infiniteScroll 300s linear infinite;
+			padding: 0 2rem;
+		}
+
+		.track-reverse {
+			animation: infiniteScrollReverse 630s linear infinite;
+		}
+
+		.tilted-container {
+			width: 220px;
+			height: 280px;
+			flex-shrink: 0;
+			border-radius: 12px;
+			overflow: hidden;
+			transition: transform 0.3s ease;
+			box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+		}
+
+		.tilted-container:hover {
+			transform: scale(1.05);
+			z-index: 1;
+		}
+
+		.tilted-container img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			display: block;
+		}
+
+		@keyframes infiniteScroll {
+		0% { transform: translateX(0); }
+		100% { transform: translateX(calc(-50%)); }
+		}
+
+		@keyframes infiniteScrollReverse {
+		0% { transform: translateX(0); }
+		100% { transform: translateX(calc(50%)) }
+		}
+		</style>
 	</head>
 	<body>
-
 		<div class="layout">
 			<aside class="sidebar">
 				<Header />
 			</aside>
 
+			<!-- Removed redundant alt flag, default dom has alt flag set to "" -->
 			<main class="scrolling-gallery">
 				<div class="gallery-wrapper">
 					<div class="scroll-track">
 						{images.map((src) => (
 						<div class="tilted-container">
-							<img src={src} alt="" />
+							<img src={src} />
 						</div>
 						))}
 
 						{images.map((src) => (
 						<div class="tilted-container">
-							<img src={src} alt="" />
+							<img src={src} />
 						</div>
 						))}
 					</div>
 					<div class="scroll-track track-reverse">
-						{shuffeld.slice().reverse().map((src) => (
+						{shuffled.slice().reverse().map((src) => (
 						<div class="tilted-container">
-							<img src={src} alt="" />
+							<img src={src} />
 						</div>
 						))}
-						{shuffeld.slice().reverse().map((src) => (
+						{shuffled.slice().reverse().map((src) => (
 						<div class="tilted-container">
-							<img src={src} alt="" />
+							<img src={src} />
 						</div>
 						))}
 					</div>
@@ -114,94 +157,5 @@ if (response.ok) {
 	</body>
 </html>
 
-<style>
-body, html {
-	margin: 0;
-	padding: 0;
-	height: 100vh;
-	overflow: hidden;
-}
 
-main {
+<!-- import Footer from '@components/Footer.astro'; -->
-	margin: 1cm;
-	padding: 1cm;
-}
-
-.layout {
-	display: flex;
-	height: 100%;
-	width: 100%;
-}
-
-.sidebar {
-	flex: 0 0 200px;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	padding: 0;
-	box-sizing: border-box;
-	z-index: 10;
-	background: rgba(0, 0, 0, 0.5);
-	color: white;
-}
-
-.scrolling-gallery {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	overflow: hidden;
-	position: relative;
-}
-
-.gallery-wrapper {
-	display: flex;
-	flex-direction: column;
-	gap: 4rem;
-	transform: rotate(-8deg) scale(1.3);
-}
-
-.scroll-track {
-	display: flex;
-	gap: 3rem;
-	width: max-content;
-	animation: infiniteScroll 300s linear infinite;
-	padding: 0 2rem;
-}
-
-.track-reverse {
-	animation: infiniteScrollReverse 630s linear infinite;
-}
-
-.tilted-container {
-	width: 220px;
-	height: 280px;
-	flex-shrink: 0;
-	border-radius: 12px;
-	overflow: hidden;
-	transition: transform 0.3s ease;
-	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-}
-
-.tilted-container:hover {
-	transform: scale(1.05);
-	z-index: 1;
-}
-
-.tilted-container img {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	display: block;
-}
-
-@keyframes infiniteScroll {
-0% { transform: translateX(0); }
-100% { transform: translateX(calc(-50%)); }
-}
-
-@keyframes infiniteScrollReverse {
-0% { transform: translateX(0); }
-100% { transform: translateX(calc(50%)) }
-}
-</style>

src/styles/global.css

@@ -5,38 +5,38 @@
  */
 
 :root {
-	min-width: 0px;
+  min-width: 0px;
-	min-height: 0px;
+  min-height: 0px;
 }
 @font-face {
-	font-family: "Atkinson";
+  font-family: "Atkinson";
-	src: url("/fonts/atkinson-regular.woff") format("woff");
+  src: url("/fonts/atkinson-regular.woff") format("woff");
-	font-weight: 400;
+  font-weight: 400;
-	font-style: normal;
+  font-style: normal;
-	font-display: swap;
+  font-display: swap;
 }
 @font-face {
-	font-family: "Atkinson";
+  font-family: "Atkinson";
-	src: url("/fonts/atkinson-bold.woff") format("woff");
+  src: url("/fonts/atkinson-bold.woff") format("woff");
-	font-weight: 700;
+  font-weight: 700;
-	font-style: normal;
+  font-style: normal;
-	font-display: swap;
+  font-display: swap;
 }
 body {
-	font-family: "Atkinson", sans-serif;
+  font-family: "Atkinson", sans-serif;
-	margin: 0;
+  margin: 0;
-	padding: 0;
+  padding: 0;
-	text-align: left;
+  text-align: left;
-	background: linear-gradient(var(--gray-gradient)) no-repeat;
+  background: linear-gradient(var(--gray-gradient)) no-repeat;
-	background-size: 100% 600px;
+  background-size: 100% 600px;
-	word-wrap: break-word;
+  word-wrap: break-word;
-	overflow-wrap: break-word;
+  overflow-wrap: break-word;
-	font-size: 17px;
+  font-size: 17px;
-	line-height: 1.5;
+  line-height: 1.5;
 }
 ul {
-	padding: 5px;
+  padding: 5px;
-	margin: 0;
+  margin: 0;
 }
 h1,
 h2,
@@ -44,77 +44,77 @@ h3,
 h4,
 h5,
 h6 {
-	margin: 0 0 0.5rem 0;
+  margin: 0 0 0.5rem 0;
-	color: rgb(var(--black));
+  color: rgb(var(--black));
-	line-height: 1.2;
+  line-height: 1.2;
 }
 h1 {
-	font-size: 3.052em;
+  font-size: 3.052em;
 }
 h2 {
-	font-size: 2.441em;
+  font-size: 2.441em;
 }
 h3 {
-	font-size: 1.953em;
+  font-size: 1.953em;
 }
 h4 {
-	font-size: 1.563em;
+  font-size: 1.563em;
 }
 h5 {
-	font-size: 1.25em;
+  font-size: 1.25em;
 }
 strong,
 b {
-	font-weight: 700;
+  font-weight: 700;
 }
 a {
-	color: var(--accent);
+  color: var(--accent);
 }
 a:hover {
-	color: var(--accent);
+  color: var(--accent);
 }
 p {
-	margin-bottom: 1em;
+  margin-bottom: 1em;
 }
 .prose p {
-	margin-bottom: 2em;
+  margin-bottom: 2em;
 }
 textarea {
-	width: 100%;
+  width: 100%;
-	font-size: 16px;
+  font-size: 16px;
 }
 input {
-	font-size: 16px;
+  font-size: 16px;
 }
 table {
-	width: 100%;
+  width: 100%;
 }
 img {
-	max-width: 100%;
+  max-width: 100%;
-	height: auto;
+  height: auto;
-	border-radius: 8px;
+  border-radius: 8px;
 }
 code {
-	padding: 2px 5px;
+  padding: 2px 5px;
-	background-color: rgb(var(--gray-light));
+  background-color: rgb(var(--gray-light));
-	border-radius: 2px;
+  border-radius: 2px;
 }
 pre {
-	padding: 1.5em;
+  padding: 1.5em;
-	border-radius: 8px;
+  border-radius: 8px;
 }
 pre > code {
-	all: unset;
+  all: unset;
 }
 blockquote {
-	border-left: 4px solid var(--accent);
+  border-left: 4px solid var(--accent);
-	padding: 0 0 0 20px;
+  padding: 0 0 0 20px;
-	margin: 0;
+  margin: 0;
-	font-size: 1.333em;
+  font-size: 1.333em;
 }
 hr {
-	border: none;
+  border: none;
-	border-top: 1px solid rgb(var(--gray-light));
+  border-top: 1px solid rgb(var(--gray-light));
 }
 figure {
   display: flex;
@@ -137,28 +137,28 @@ figcaption::before {
 }
 
 @media (max-width: 720px) {
-	body {
+  body {
-		font-size: 18px;
+    font-size: 18px;
-	}
+  }
-	main {
+  main {
-		padding: 1em;
+    padding: 1em;
-	}
+  }
 }
 
 .sr-only {
-	border: 0;
+  border: 0;
-	padding: 0;
+  padding: 0;
-	margin: 0;
+  margin: 0;
-	position: absolute !important;
+  position: absolute !important;
-	height: 1px;
+  height: 1px;
-	width: 1px;
+  width: 1px;
-	overflow: hidden;
+  overflow: hidden;
-	/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
+  /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
-	clip: rect(1px 1px 1px 1px);
+  clip: rect(1px 1px 1px 1px);
-	/* maybe deprecated but we need to support legacy browsers */
+  /* maybe deprecated but we need to support legacy browsers */
-	clip: rect(1px, 1px, 1px, 1px);
+  clip: rect(1px, 1px, 1px, 1px);
-	/* modern browsers, clip-path works inwards from each corner */
+  /* modern browsers, clip-path works inwards from each corner */
-	clip-path: inset(50%);
+  clip-path: inset(50%);
-	/* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
+  /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
-	white-space: nowrap;
+  white-space: nowrap;
 }

tsconfig.json

@@ -3,6 +3,23 @@
   "include": [".astro/types.d.ts", "**/*"],
   "exclude": ["dist"],
   "compilerOptions": {
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "paths": {
+      /** Uncomment as applicable
+         * - Description: Labelled paths are in lexicon format not descending popularity format
+        // "config/*": ["./src/app/_config/*"],
+        // "environment/*": ["./src/environments/*"],
+        // "shared/*": ["./src/app/_shared/*"],
+        // "helpers/*": ["./src/helpers/*"],
+        // "tests/*": ["./src/tests/*"]
+        */
+      "@app/*": ["./src/pages/*"],
+      "@assets/*": ["./src/assets/*"],
+      "@blogs/*": ["./src/content/*"],
+      "@components/*": ["./src/components/*"],
+      "@layouts/*": ["./src/layouts/*"],
+      "@styles/*": ["./src/styles/*"],
+      "@ptypes/consts.ts": ["./src/consts.ts"]
+    }
   }
 }