modify config to reflect updated server csp

astro.config.ts

@@ -5,10 +5,29 @@ import mdx from "@astrojs/mdx";
 import tailwind from "@astrojs/tailwind";
 import icon from "astro-icon";
 
+import expressiveCode from "astro-expressive-code";
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://troylusty.com",
-  integrations: [sitemap(), mdx(), tailwind(), icon()],
+  integrations: [
+    sitemap(),
+    expressiveCode({
+      themes: ["github-dark-default", "github-light-default"],
+      defaultProps: {
+        frame: "none",
+        wrap: true,
+      },
+      styleOverrides: {
+        frames: {
+          shadowColor: "none",
+        },
+      },
+    }),
+    mdx(),
+    tailwind(),
+    icon(),
+  ],
   output: "static",
   markdown: {
     rehypePlugins: [
@@ -19,17 +38,10 @@ export default defineConfig({
         },
       ],
     ],
-    shikiConfig: {
-      wrap: true,
-    },
-    syntaxHighlight: false,
   },
   image: {
     service: passthroughImageService(),
   },
-  build: {
-    inlineStylesheets: "never",
-  },
   experimental: {
     responsiveImages: true,
   },

package.json

@@ -20,6 +20,7 @@
     "@fontsource-variable/red-hat-mono": "^5.1.1",
     "@fontsource/borel": "^5.1.1",
     "astro": "^5.1.7",
+    "astro-expressive-code": "^0.40.1",
     "astro-icon": "^1.1.5",
     "rehype-external-links": "^3.0.0",
     "tailwindcss": "^3.4.17",

src/components/Button.astro

@@ -9,7 +9,7 @@ const { href, link } = Astro.props;
 
 <a href={`${href}`}>
   <div
-    class="mt-2 flex animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-2 py-1 text-sm font-medium capitalize text-primary opacity-0 transition-colors [animation-delay:0.1s] hover:bg-accent"
+    class="m-4 flex w-fit animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-2 py-1 text-sm font-medium capitalize text-primary opacity-0 transition-colors [animation-delay:0.1s] hover:bg-accent"
   >
     {link}
   </div>

src/components/Hero.astro

@@ -15,7 +15,7 @@ import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
     class="--translate-y-full animate-logo text-pretty text-4xl font-bold md:text-6xl"
   >
     Digital designer based in the <span
-      class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text font-['Borel'] text-3xl font-medium text-transparent md:text-5xl"
+      class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text px-1 font-['Borel'] text-3xl font-bold text-transparent md:text-5xl"
       >United Kingdom</span
     >.
   </h1>

src/components/Prose.astro

@@ -1,5 +1,5 @@
 <div
-  class="prose max-w-full prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-pre:w-fit prose-pre:max-w-full prose-pre:border-2 prose-pre:border-dashed prose-pre:border-tertiary prose-pre:bg-primary prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded"
+  class="prose max-w-full prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded"
 >
   <slot />
 </div>

src/components/RelatedArticles.astro

@@ -1,6 +1,5 @@
 ---
-import { Icon } from "astro-icon/components";
-
+import Button from "./Button.astro";
 import { type CollectionEntry, getCollection } from "astro:content";
 
 type Props = {
@@ -21,39 +20,17 @@ const next = items[(index + 1) % items.length];
 {
   items.length > 1 ? (
     <div class="mx-auto mt-8 flex max-w-prose justify-between gap-4 md:gap-0">
-      <div class="group flex w-fit flex-row items-center justify-between gap-2">
-        <a
+      <div class="group flex w-fit flex-row items-center justify-between">
+        <Button
           href={`/${prev.collection}/${prev.slug}`}
-          class="animate-reveal opacity-0"
-        >
-          <Icon
-            name="mdi:arrow-left"
-            title="All projects"
-            class="h-4 w-auto text-tertiary transition-colors duration-300 group-hover:text-accent"
-          />
-        </a>
-        <a href={`/${prev.collection}/${prev.slug}`}>
-          <p class="animate-reveal break-words font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
-            {prev.data.title}
-          </p>
-        </a>
+          link={`Previous: ${prev.data.title}`}
+        />
       </div>
-      <div class="group flex w-fit flex-row items-center justify-between gap-2 self-end">
-        <a href={`/${next.collection}/${next.slug}`}>
-          <p class="animate-reveal break-words font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
-            {next.data.title}
-          </p>
-        </a>
-        <a
+      <div class="group flex w-fit flex-row items-center justify-between self-end">
+        <Button
           href={`/${next.collection}/${next.slug}`}
-          class="animate-reveal opacity-0"
-        >
-          <Icon
-            name="mdi:arrow-right"
-            title="All projects"
-            class="h-4 w-auto text-tertiary transition-colors duration-300 group-hover:text-accent"
-          />
-        </a>
+          link={`Next: ${next.data.title}`}
+        />
       </div>
     </div>
   ) : null

src/components/Skills.astro

@@ -18,7 +18,6 @@ const skills = await Promise.all(
       <li class="group flex items-center gap-2 rounded border border-tertiary p-2 text-tertiary transition-colors hover:border-accent hover:text-accent">
         <Icon
           name={entry.data.icon}
-          title={entry.data.title}
           class="h-5 w-auto text-tertiary transition-colors group-hover:text-accent"
         />
         <p class="m-0 cursor-default">{entry.data.title}</p>

src/content/config.ts

@@ -53,7 +53,7 @@ const work = defineCollection({
     role: z.string(),
     dateStart: z.coerce.date(),
     dateEnd: z.union([z.coerce.date(), z.string()]),
-    article: z.string().url().optional(),
+    article: z.string().optional(),
   }),
 });
 

src/content/work/camouflage-store.md

@@ -3,7 +3,7 @@ company: "Camouflage Store"
 role: "E-commerce Management & Video Production"
 dateStart: "2020"
 dateEnd: "Current"
-article: "https://troylusty.com/projects/camouflage-store"
+article: "/projects/camouflage-store"
 ---
 
 Migrating and managing an ecommerce store, in addition to creating informational video content.

src/content/work/webboss.md

@@ -3,7 +3,7 @@ company: "WebBoss"
 role: "Web Design Mockups"
 dateStart: "2019"
 dateEnd: "2019"
-article: "https://troylusty.com/projects/webboss"
+article: "/projects/webboss"
 ---
 
 I joined WebBoss for a week as my work experience placement in Sixth Form. In my

src/styles/global.css

@@ -35,12 +35,6 @@
   }
 }
 
-@layer components {
-  .prose img {
-    @apply cursor-pointer transition-transform hover:scale-[98%] active:scale-[200%];
-  }
-}
-
 @media print {
   body {
     background: none;