Adds permissionator, removes lazy loading readme, adds readme to error page

Author: Lissy93

src/components/LangBadge.svelte

@@ -28,7 +28,7 @@
     'c#': { name: 'C#', color: '239120', icon: 'csharp' },
     coffeescript: { name: 'CoffeeScript', color: '2F2625', icon: 'coffeescript' },
     crystal: { name: 'crystal', color: '000000', icon: 'crystal' },
-    css: { name: 'CSS', color: '563D7C', icon: 'css3' },
+    css: { name: 'CSS', color: '563D7C', icon: 'css' },
     config: { name: 'Config', color: 'EF1970', icon: 'haveibeenpwned' },
     d3: { name: 'D3.js', color: 'F9A03C', icon: 'd3dotjs' },
     dart: { name: 'Dart', color: '0175C2', icon: 'dart' },
@@ -53,6 +53,7 @@
     nim: { name: 'Nim', color: 'FFE953', icon: 'nim' },
     markdown: { name: 'Markdown', color: '000000', icon: 'markdown' },
     makefile: { name: 'Makefile', color: '006600', icon: 'cmake' },
+    marko: { name: 'Marko', color: '2596BE', icon: 'marko' },
     ocaml: { name: ' OCaml', color: 'EC6813', icon: ' ocaml' },
     perl: { name: 'Perl', color: '39457E', icon: 'perl' },
     php: { name: 'PHP', color: '777BB4', icon: 'php' },

src/components/Nav.svelte

@@ -5,10 +5,10 @@
 
   if (typeof window !== 'undefined') {
     const hostname = window.location.hostname;
-    if (hostname.endsWith('aliciasykes.com')) {
+    if (hostname.includes('aliciasykes.com')) {
       siteName = 'Alicia Sykes';
     }
-    else if (hostname.endsWith('lissy93.github.io')) {
+    else if (hostname.includes('lissy93.github.io')) {
       siteName = 'Lissy93';
     }
   }

src/config.ts

@@ -75,6 +75,16 @@ export default {
       screenshot: 'https://storage.googleapis.com/as93-screenshots/project-screenshots/ansibles.gif',
       color: '#d95de8',
     },
+    {
+      name: 'permissionator',
+      title: 'Permissionator',
+      description: 'A Linux chmod calculator, for generating safe file permissions',
+      icon: 'https://github.com/Lissy93/permissionator/blob/main/public/logo.png?raw=true',
+      screenshot: 'https://github.com/Lissy93/permissionator/blob/main/public/screenshot.png?raw=true',
+      homepage: 'https://permissionator.as93.net/',
+      mirror: 'https://codeberg.org/alicia/permissionator',
+      color: '#05df72',
+    },
     {
       name: 'portainer-templates',
       title: 'Portainer Template',

src/routes/+error.svelte

@@ -2,9 +2,10 @@
   import { page } from '$app/stores';
   import { onMount } from 'svelte';
   import config from '../config';
-  import { fetchRepoDetails, findRepoMeta } from '../helpers/fetchRepo';
+  import { fetchReadme, fetchRepoDetails, findRepoMeta } from '../helpers/fetchRepo';
 	import type { Project } from '../types/Project';
 	import ProjectHero from '../components/ProjectHero.svelte';
+  import ProjectReadme from '../components/ProjectReadme.svelte';
 
   let gitHubPagesUrl = '';
 
@@ -35,6 +36,12 @@
           console.error('Error fetching repo details', err);
         });
     }
+    const readme = await fetchReadme(config.githubUser, repo, fetch)
+    .catch((error) => {
+      console.error(`Error fetching README: ${error.message}`);
+      return '';
+    });
+    data.readme = readme || '';
     
   });
 </script>
@@ -54,11 +61,17 @@
   <ProjectHero project={data.repoDetails} meta={data.meta} />
 {/if}
 
-<p>Oops, something's gone a bit wrong here</p>
-<h1>{$page.status}</h1>
-<p class="emoji">😢</p>
-{#if $page?.error?.message}
-  <p>{$page.error.message}</p>
+{#if data.repoDetails && data.repoDetails.id && data.readme}
+  <ProjectReadme project={data.repoDetails} readme={data.readme} />
+{/if}
+
+{#if !data || !data.repoDetails || !data.repoDetails.id}
+  <p>Oops, something's gone a bit wrong here</p>
+  <h1>{$page.status}</h1>
+  <p class="emoji">😢</p>
+  {#if $page?.error?.message}
+    <p>{$page.error.message}</p>
+  {/if}
 {/if}
 
 <style lang="scss">
@@ -80,11 +93,9 @@ p {
 }
 
 .has-github-pages {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
   background-color: var(--primary);
   padding: 0.25rem;
   text-align: center;

src/routes/[repo]/+page.svelte

@@ -32,8 +32,6 @@
 
   let notFound = false;
 
-  let readmeComponent: Promise<typeof import('../../components/ProjectReadme.svelte')>;
-
   onMount(() => {
     // Check if project is found, if not, set notFound to true to show 404
     if (
@@ -44,7 +42,6 @@
     }
 
     // Import readme
-    readmeComponent = import('../../components/ProjectReadme.svelte')
 
     // Fetch (or attempt to) the most-up-to-date repo details
     fetchRepoDetails(config.githubUser, $page.params.repo, fetch)
@@ -66,9 +63,7 @@
 {:else}
   <ProjectHero project={data.repoDetails} meta={data.meta} />
   {#if data.readme}
-    {#await readmeComponent then resolvedComponent}
-      <svelte:component this={resolvedComponent?.default} project={data.repoDetails} readme={data.readme} />
-    {/await}
+    <ProjectReadme project={data.repoDetails} readme={data.readme} />
   {/if}
 {/if}