Merge branch 'development'

astro.config.mjs

@@ -5,10 +5,15 @@ import cloudflare from "@astrojs/cloudflare";
 // https://astro.build/config
 export default defineConfig({
     site: "https://orryverducci.co.uk",
-    output: "server",
+    output: "hybrid",
     adapter: cloudflare({
       mode: "directory"
     }),
+    image: {
+      service: {
+        entrypoint: 'astro/assets/services/noop'
+      }
+    },
     vite: {
         build: {
           sourcemap: true,

package.json

@@ -1,5 +1,6 @@
 {
     "private": true,
+    "type": "module",
     "scripts": {
         "dev": "astro dev",
         "start": "astro dev",
@@ -8,21 +9,22 @@
         "astro": "astro"
     },
     "dependencies": {
-        "@astrojs/cloudflare": "^6.5.1",
-        "@fontsource/montserrat": "^5.0.3",
-        "@hotwired/stimulus": "^3.2.1",
+        "@astrojs/cloudflare": "^7.5.1",
+        "@fontsource/montserrat": "^5.0.8",
+        "@hotwired/stimulus": "^3.2.2",
         "@hotwired/turbo": "^7.3.0",
         "@material/animation": "^14.0.0",
         "@types/figlet": "^1.5.6",
-        "astro": "^2.7.2",
-        "bootstrap": "^5.3.0",
-        "bootstrap-icons": "^1.10.5",
+        "astro": "^3.0.6",
+        "astro-icon": "^0.8.1",
+        "bootstrap": "^5.3.2",
         "figlet": "^1.6.0",
-        "sass": "^1.63.6"
+        "sass": "^1.69.0"
     },
     "devDependencies": {
-        "@cloudflare/workers-types": "^4.20230518.0",
-        "typescript": "^5.1.6",
-        "wrangler": "^3.1.1"
+        "@astrojs/check": "^0.2.0",
+        "@cloudflare/workers-types": "^4.20230922.0",
+        "typescript": "^5.2.2",
+        "wrangler": "^3.11.0"
     }
 }

src/layouts/Layout.astro

@@ -1,10 +1,10 @@
 ---
+import { Icon } from 'astro-icon'
 import "../styles/app.scss";
 import "@fontsource/montserrat/400.css";
 import "@fontsource/montserrat/400-italic.css";
 import "@fontsource/montserrat/600.css";
 import "@fontsource/montserrat/600-italic.css";
-import icons from "bootstrap-icons/bootstrap-icons.svg";
 
 // Set the layout properties
 export interface Props {
@@ -64,12 +64,12 @@ if (date.getMonth() != 12) {
             </div>
             <nav>
                 <ul>
-                    <li><a href="/"><svg aria-hidden="true"><use href={icons + "#house"}/></svg>Home</a></li>
+                    <li><a href="/"><Icon pack="bi" name="house" aria-hidden="true" />Home</a></li>
                 </ul>
                 <ul id="social-icons">
-                    <li><a href="https://twitter.com/orryverducci" title="Twitter" target="_blank"><svg role="img" aria-label="Twitter"><use href={icons + "#twitter"}/></svg></a></li>
-                    <li><a href="https://github.com/orryverducci/" title="GitHub" target="_blank"><svg role="img" aria-label="GitHub"><use href={icons + "#github"}/></svg></a></li>
-                    <li><a href="https://www.linkedin.com/in/orryv/" title="LinkedIn" target="_blank"><svg role="img" aria-label="LinkedIn"><use href={icons + "#linkedin"}/></svg></a></li>
+                    <li><a href="https://twitter.com/orryverducci" title="Twitter" target="_blank"><Icon pack="bi" name="twitter" role="img" aria-label="Twitter" /></a></li>
+                    <li><a href="https://github.com/orryverducci/" title="GitHub" target="_blank"><Icon pack="bi" name="github" role="img" aria-label="GitHub" /></a></li>
+                    <li><a href="https://www.linkedin.com/in/orryv/" title="LinkedIn" target="_blank"><Icon pack="bi" name="linkedin" role="img" aria-label="LinkedIn" /></a></li>
                 </ul>
             </nav>
             <a id="menu-icon" href="#" data-action="header#toggleMenu">

src/pages/404.astro

@@ -1,5 +1,7 @@
 ---
 import Layout from '../layouts/Layout.astro';
+
+export const prerender = true;
 ---
 
 <Layout pageClass="template-404" controller="error404" headerBackground={true} headerOverlay={true} >

src/pages/index.astro

@@ -1,5 +1,7 @@
 ---
 import Layout from '../layouts/Layout.astro';
+
+export const prerender = true;
 ---
 
 <Layout pageClass="template-home header-padding" description="The online home of Orry Verducci." headerOverlay={true} themeColour="#1f1f1f">

src/styles/_home.scss

@@ -15,10 +15,6 @@
 
     @include media-breakpoint-down(sm) {
         font-size: 1.4em;
-
-        span {
-            display: block;
-        }
     }
 
     h1 {
@@ -34,4 +30,18 @@
             font-size: 2em;
         }
     }
+
+    span {
+        &:first-child::after {
+            content: ' ';
+
+            @include media-breakpoint-down(sm) {
+                display: none;
+            }
+        }
+
+        @include media-breakpoint-down(sm) {
+            display: block;
+        }
+    }
 }