feat: tools show images

Author: FireIsGood

src/pages/tools/chmod.astro

@@ -2,15 +2,19 @@
 import Layout from "@/layouts/Layout.astro";
 import Breadcrumb from "@/components/Breadcrumb.astro";
 import Ending from "@/components/Ending.astro";
+import { Image } from "astro:assets";
 
 import ChmodCalculator from "@/components/ChmodCalculator.svelte";
-import chmodImage from "@/images/chmod.png";
+import thumbImage from "@/images/chmod.png";
 ---
 
-<Layout suffix="Tools" title="FireIsTools - Chmod Calculator" description="A chmod calculator" image={chmodImage.src}>
+<Layout suffix="Tools" title="FireIsTools - Chmod Calculator" description="A chmod calculator" image={thumbImage.src}>
   <Breadcrumb />
   <article>
     <header>
+      <div class="cover">
+        <Image width={1920} height={960} src={thumbImage} alt="" loading="eager" />
+      </div>
       <h1>Chmod Calculator</h1>
       <p><em>A calculator to help change the permissions of files on Linux</em></p>
     </header>
@@ -73,6 +77,13 @@ import chmodImage from "@/images/chmod.png";
 </Layout>
 
 <style>
+  .cover {
+    margin-bottom: var(--pico-spacing);
+  }
+  .cover img {
+    max-height: 80vh;
+  }
+
   header {
     margin: 0;
     padding: 0;

src/pages/tools/dvd-bounce-tool.astro

@@ -2,9 +2,10 @@
 import Layout from "@/layouts/Layout.astro";
 import Breadcrumb from "@/components/Breadcrumb.astro";
 import Ending from "@/components/Ending.astro";
+import { Image } from "astro:assets";
 
 import DvdBouncer from "@/components/DvdBouncer.svelte";
-import dvdBouncerImage from "@/images/dvdbouncer.png";
+import thumbImage from "@/images/dvdbouncer.png";
 
 import { Code } from "astro-expressive-code/components";
 import bouncerMarquee from "@/misc/dvdbouncer-marquee.html?raw";
@@ -15,10 +16,13 @@ import bouncerAnimation from "@/misc/dvdbouncer-animation.html?raw";
   suffix="Tools"
   title="FireIsTools - DVD Bouncer Tool"
   description="Generate DVD bouncers"
-  image={dvdBouncerImage.src}
+  image={thumbImage.src}
 >
   <Breadcrumb />
   <article>
+    <div class="cover">
+      <Image width={1920} height={960} src={thumbImage} alt="" loading="eager" />
+    </div>
     <header>
       <h1>DVD Bounce Thing</h1>
       <p><em>A DVD <abbr title="this is not a real word">Bouncer</abbr> thing. Because funny.</em></p>
@@ -59,6 +63,13 @@ import bouncerAnimation from "@/misc/dvdbouncer-animation.html?raw";
 </Layout>
 
 <style>
+  .cover {
+    margin-bottom: var(--pico-spacing);
+  }
+  .cover img {
+    max-height: 80vh;
+  }
+
   header {
     margin: 0;
     padding: 0;

src/pages/tools/javascript-terminal.astro

@@ -3,19 +3,23 @@ import Layout from "@/layouts/Layout.astro";
 import Breadcrumb from "@/components/Breadcrumb.astro";
 import Ending from "@/components/Ending.astro";
 import Terminal from "@/components/JavascriptTerminal.svelte";
+import { Image } from "astro:assets";
 
-import jsImage from "@/images/js-terminal.png";
+import thumbImage from "@/images/js-terminal.png";
 ---
 
 <Layout
   suffix="Tools"
   title="FireIsTools - JavaScript Terminal"
   description="A JavaScript terminal"
-  image={jsImage.src}
+  image={thumbImage.src}
 >
   <Breadcrumb />
   <article>
     <header>
+      <div class="cover">
+        <Image width={1920} height={960} src={thumbImage} alt="" loading="eager" />
+      </div>
       <h1>JavaScript Terminal</h1>
       <p><em>A basic JavaScript REPL</em></p>
     </header>
@@ -49,6 +53,13 @@ import jsImage from "@/images/js-terminal.png";
 </Layout>
 
 <style>
+  .cover {
+    margin-bottom: var(--pico-spacing);
+  }
+  .cover img {
+    max-height: 80vh;
+  }
+
   header {
     margin: 0;
     padding: 0;

src/pages/tools/random-number-generator.astro

@@ -2,6 +2,7 @@
 import Layout from "@/layouts/Layout.astro";
 import Breadcrumb from "@/components/Breadcrumb.astro";
 import Ending from "@/components/Ending.astro";
+import { Image } from "astro:assets";
 
 import thumbImage from "@/images/random-number-generator.png";
 ---
@@ -15,6 +16,9 @@ import thumbImage from "@/images/random-number-generator.png";
   <Breadcrumb />
   <article>
     <header>
+      <div class="cover">
+        <Image width={1920} height={960} src={thumbImage} alt="" loading="eager" />
+      </div>
       <h1>Random Number Generator</h1>
       <p><em>Random number generator</em></p>
     </header>
@@ -62,6 +66,13 @@ import thumbImage from "@/images/random-number-generator.png";
 </Layout>
 
 <style>
+  .cover {
+    margin-bottom: var(--pico-spacing);
+  }
+  .cover img {
+    max-height: 80vh;
+  }
+
   header {
     margin: 0;
     padding: 0;

src/pages/tools/svg-to-url.astro

@@ -3,6 +3,7 @@ import Layout from "@/layouts/Layout.astro";
 import Breadcrumb from "@/components/Breadcrumb.astro";
 import Ending from "@/components/Ending.astro";
 import SvgConverter from "@/components/SvgConverter.svelte";
+import { Image } from "astro:assets";
 
 import thumbImage from "@/images/svg-to-url.png";
 ---
@@ -11,6 +12,9 @@ import thumbImage from "@/images/svg-to-url.png";
   <Breadcrumb />
   <article>
     <header>
+      <div class="cover">
+        <Image width={1920} height={960} src={thumbImage} alt="" loading="eager" />
+      </div>
       <h1>SVG to URL</h1>
       <p><em>Converts SVGs to Data URLs</em></p>
     </header>
@@ -37,6 +41,13 @@ import thumbImage from "@/images/svg-to-url.png";
 </Layout>
 
 <style>
+  .cover {
+    margin-bottom: var(--pico-spacing);
+  }
+  .cover img {
+    max-height: 80vh;
+  }
+
   header {
     margin: 0;
     padding: 0;