refactor: use Astro image optimization (#34)

Author: carsakiller

docs/CONTRIBUTING-WIKI.md

@@ -6,7 +6,7 @@ The various components available for use can be found in [`src/components/common
 
 ## Article Frontmatter
 
-All wiki articles can contain frontmatter at the top of the file.
+All wiki articles must contain some frontmatter at the top of the file.
 
 |    Property     |    Type    | Required | Descripion                                                                                                                  |
 | :-------------: | :--------: | :------: | --------------------------------------------------------------------------------------------------------------------------- |
@@ -23,3 +23,40 @@ description: Wow, my own article, cool!
 incomplete: true
 ---
 ```
+
+## Images
+
+The way images are handled in Astro is slightly odd, but it does come with some nice benefits.
+
+### Remote Images
+
+Remote images can simply be linked to like standard markdown:
+
+```md
+![Alt text is important!](https://avatars.githubusercontent.com/u/124349233)
+```
+
+### Local Images
+
+Unless there is a good reason for an image to be [permanently and publically linkable](#public-images), images should saved to `src/assets/images/` and loaded like so:
+
+```astro
+![A cat walking](~/assets/images/cat.png)
+```
+
+In some rare cases, they may have to be manually imported and loaded using the `<Image>` or other component:
+
+```astro
+import { Image } from "astro:assets";
+import dog from "~/assets/images/dog.png";
+
+<Image src={dog} alt="A dog sitting" />
+```
+
+### Public Images
+Images that need to be publically available, say for serving to other software, or for linking to other websites, need to be saved to `public/images/`. They can then be used just like [local images](#local-images), but the file path is instead relative to the public directory:
+
+```diff
+- ![A cat walking](~/assets/images/cat.png)
++ ![A cat walking](/images/cat.png)
+```

public/images/json.svg src/assets/images/json.svg

@@ -2,6 +2,7 @@
 import type { XOR } from "~/util/types";
 import Icon from "./Icon.astro";
 import jsdom from "jsdom";
+import { Image } from "astro:assets";
 
 type BaseButtonDefinition = {
   name: string;
@@ -10,7 +11,7 @@ type BaseButtonDefinition = {
 
 type ButtonDefinition = XOR<
   BaseButtonDefinition & { icon: string },
-  BaseButtonDefinition & { image: string }
+  BaseButtonDefinition & { image: ImageMetadata }
 >;
 
 export interface Props {
@@ -41,7 +42,7 @@ body.querySelector(`[data-tab="${active}"]`)?.classList.add("active");
           style={`--accent-color: ${button.accent ?? "#ffffff"}`}
         >
           <span>
-            {button.image && <img src={button.image} />}
+            {button.image && <Image src={button.image} alt={button.name}/>}
             {button.icon && <Icon name={button.icon} group="solid" />}
             {button.name}
           </span>

public/images/kakoune.svg src/assets/images/kakoune.svg

@@ -10,8 +10,5 @@ Used to display the priority level of the diagnostic next to its heading.
 ## [Heading](./Heading.astro)
 Extends the default heading HTML element to have an anchor pointing to them, for ease of copying the URL to a specific heading.
 
-## [Image](./Image.astro)
-Wraps the default `<img>` HTML element so that images can be lazy loaded.
-
 ## [WikiLink](./WikiLink.astro)
 Either renders a normal link when linking somewhere in the same local domain or an [ExternalLink](../common/ExternalLink.astro) when linking externally.

public/images/linux.svg src/assets/images/linux.svg

@@ -49,7 +49,7 @@ The below methods can be added to the end of a line:
 ## Tips
 
 - If you type `---` one line above a function, you will receive a suggested snippet that includes [`@param`](#param) and [`@return`](#return) annotations for each parameter and return value found in the function.
-  ![Snippet being used in VS Code](/images/wiki/annotation-snippet.png)
+  ![Snippet being used in VS Code](~/assets/images/wiki/annotation-snippet.png)
 
 ## Documenting Types
 

public/images/lua.svg src/assets/images/lua.svg

@@ -7,6 +7,10 @@ getting-started: true
 import Tabs from "~/components/common/Tabs.astro";
 import Remark from "~/components/common/Remark.astro";
 
+import windowsImg from "~/assets/images/windows.svg"
+import macImg from "~/assets/images/mac.svg"
+import linuxImg from "~/assets/images/linux.svg"
+
 1. Install [Ninja](https://github.com/ninja-build/ninja/wiki/Pre-built-Ninja-packages)
 2. Ensure you have C++17
 3. Clone the language server
@@ -19,9 +23,9 @@ import Remark from "~/components/common/Remark.astro";
 <Tabs
   active="Windows"
   buttons={[
-    { name: "Windows", image: "/images/windows.svg", accent: "#23a9f2" },
-    { name: "MacOS", image: "/images/mac.svg", accent: "#ffffff" },
-    { name: "Linux", image: "/images/linux.svg", accent: "#ffff00" },
+    { name: "Windows", image: windowsImg, accent: "#23a9f2" },
+    { name: "MacOS", image: macImg, accent: "#ffffff" },
+    { name: "Linux", image: linuxImg, accent: "#ffff00" },
   ]}
 >
   {/* prettier-ignore */}

public/images/mac.svg src/assets/images/mac.svg

@@ -8,6 +8,10 @@ import Remark from "~/components/common/Remark.astro";
 import Accordion from "~/components/common/Accordion.astro";
 import FileTreeItem from "~/components/common/FileTreeItem.astro";
 
+import windowsImg from "~/assets/images/windows.svg"
+import macImg from "~/assets/images/mac.svg"
+import linuxImg from "~/assets/images/linux.svg"
+
 Thank you for taking an interest in helping improve the language server!
 
 ## Debugging
@@ -55,9 +59,9 @@ You will need two Visual Studio Code instances open:
      <Tabs
        active="Windows"
        buttons={[
-         { name: "Windows", image: "/images/windows.svg", accent: "#23a9f2" },
-         { name: "MacOS", image: "/images/mac.svg", accent: "#ffffff" },
-         { name: "Linux", image: "/images/linux.svg", accent: "#ffff00" },
+         { name: "Windows", image: windowsImg, accent: "#23a9f2" },
+         { name: "MacOS", image: macImg, accent: "#ffffff" },
+         { name: "Linux", image: linuxImg, accent: "#ffff00" },
        ]}
      >
        <div data-tab="Windows">`%USERPROFILE%\.vscode\extensions\sumneko.lua-VERSION\server`</div>

public/images/neovim.svg src/assets/images/neovim.svg

@@ -6,6 +6,8 @@ description: The language server can export documentation for your project in Ma
 import Accordion from "~/components/common/Accordion.astro";
 import Tabs from "~/components/common/Tabs.astro";
 
+import vscodeImg from "~/assets/images/vscode.svg"
+
 ## Example
 
 <Accordion>
@@ -251,7 +253,7 @@ import Tabs from "~/components/common/Tabs.astro";
 <Tabs
   active="VS Code"
   buttons={[
-    { name: "VS Code", image: "/images/vscode.svg", accent: "#23a9f2" },
+    { name: "VS Code", image: vscodeImg, accent: "#23a9f2" },
     { name: "Other", icon: "question", accent: "#ff158e" },
   ]}
 >

public/images/user.svg src/assets/images/user.svg

@@ -9,6 +9,11 @@ import AccordionGroup from "~/components/common/AccordionGroup.astro";
 import Tabs from "~/components/common/Tabs.astro";
 import Remark from "~/components/common/Remark.astro";
 
+import vscodeImg from "~/assets/images/vscode.svg"
+import windowsImg from "~/assets/images/windows.svg"
+import wslImg from "~/assets/images/wsl.svg"
+import linuxImg from "~/assets/images/linux.svg"
+
 <AccordionGroup>
   <Accordion>
   <span slot="summary">
@@ -20,17 +25,17 @@ For debugging and a more detailed log file, you can add [`--loglevel=trace`](/wi
 <Tabs
   active="VS Code"
   buttons={[
-    { name: "VS Code", image: "/images/vscode.svg", accent: "#23a9f2" },
+    { name: "VS Code", image: vscodeImg, accent: "#23a9f2" },
     { name: "Other", icon: "question", accent: "#ff158e" },
   ]}
 >
   <div data-tab="VS Code">
     <Tabs
       active="Windows"
       buttons={[
-        { name: "Windows", image: "/images/windows.svg", accent: "#23a9f2" },
-        { name: "WSL", image: "/images/wsl.svg", accent: "#ffffff" },
-        { name: "Linux/MacOS", image: "/images/linux.svg", accent: "#ffff00" },
+        { name: "Windows", image: windowsImg, accent: "#23a9f2" },
+        { name: "WSL", image: wslImg, accent: "#ffffff" },
+        { name: "Linux/MacOS", image: linuxImg, accent: "#ffff00" },
       ]}
     >
       <div data-tab="Windows">

public/images/vscode.svg src/assets/images/vscode.svg

@@ -7,6 +7,9 @@ getting-started: true
 import Remark from "~/components/common/Remark.astro";
 import Tabs from "~/components/common/Tabs.astro";
 
+import jsonImg from "~/assets/images/json.svg"
+import luaImg from "~/assets/images/lua.svg"
+
 The language server has a built-in code formatter, courtesy of [`CppCXY/EmmyLuaCodeStyle`](https://github.com/CppCXY/EmmyLuaCodeStyle), that allows you to easily format your code. It also offers [code style checking](#code-style-checking)
 
 <Remark type="note">
@@ -29,8 +32,8 @@ To set a default global configuration across projects, navigate to your [configu
 <Tabs
   active="JSON"
   buttons={[
-    { name: "JSON", image: "/images/json.svg", accent: "#959595" },
-    { name: "Lua", image: "/images/lua.svg", accent: "#000080" },
+    { name: "JSON", image: jsonImg, accent: "#959595" },
+    { name: "Lua", image: luaImg, accent: "#000080" },
   ]}
 >
   <div data-tab="JSON">

public/images/wiki/annotation-snippet.png src/assets/images/wiki/annotation-snippet.png

@@ -7,16 +7,20 @@ getting-started: true
 import Tabs from "~/components/common/Tabs.astro";
 import Remark from "~/components/common/Remark.astro";
 
+import windowsImg from "~/assets/images/windows.svg"
+import macImg from "~/assets/images/mac.svg"
+import linuxImg from "~/assets/images/linux.svg"
+
 ## Run
 
 The language server can be run using the below command:
 
 <Tabs
   active="Windows"
   buttons={[
-    { name: "Windows", image: "/images/windows.svg", accent: "#23a9f2" },
-    { name: "MacOS", image: "/images/mac.svg", accent: "#ffffff" },
-    { name: "Linux", image: "/images/linux.svg", accent: "#ffff00" },
+    { name: "Windows", image: windowsImg, accent: "#23a9f2" },
+    { name: "MacOS", image: macImg, accent: "#ffffff" },
+    { name: "Linux", image: linuxImg, accent: "#ffff00" },
   ]}
 >
   {/* prettier-ignore */}
@@ -41,7 +45,7 @@ The language server can be run using the below command:
 
 <Remark type="note">
   If you use the Visual Studio Code extension, the language server is run for
-  you. Arguments and flags be used by adding them to the
+  you. Arguments and flags can be used by adding them to the
   [`misc.parameters`](/wiki/settings#miscparameters) setting.
 </Remark>
 

public/images/windows.svg src/assets/images/windows.svg

@@ -4,9 +4,13 @@ import ExternalLink from "../components/common/ExternalLink.astro";
 import Icon from "../components/common/Icon.astro";
 import CodeBlock from "../components/common/CodeBlock.astro";
 import Remark from "../components/common/Remark.astro";
+import Tooltip from "../components/common/Tooltip.astro";
+
+import { Image } from "astro:assets";
+import vsCodeImg from "~/assets/images/vscode.svg";
+import neovimImg from "~/assets/images/neovim.svg";
 
 import "../scss/fonts/_Prompt.scss";
-import Tooltip from "../components/common/Tooltip.astro";
 
 const annotationsPage = await import("~/content/wiki/annotations.mdx");
 const annotationCount = annotationsPage
@@ -24,7 +28,7 @@ const annotationCount = annotationsPage
           <Tooltip content="Unique installs in Visual Studio Code">
             <span class="stat installs">
               <b>1M+</b>
-              <img src="/images/vscode.svg" alt="Visual Studio Code installs" />
+              <Image src={vsCodeImg} alt="Visual Studio Code installs" />
             </span>
           </Tooltip>
           <Tooltip content="Stars on GitHub">
@@ -157,12 +161,12 @@ const annotationCount = annotationsPage
     <section id="install">
       <h2>Install for...</h2>
       <div class="install-tabs">
-        <button value="vscode-install" class="vscode active" tabindex="0"
-          ><img src="/images/vscode.svg" alt="Visual Studio Code" /></button
-        >
-        <button value="neovim-install" class="neovim" tabindex="0"
-          ><img src="/images/neovim.svg" alt="Neovim" /></button
-        >
+        <button value="vscode-install" class="vscode active" tabindex="0">
+          <Image src={vsCodeImg} alt="Visual Studio Code" />
+        </button>
+        <button value="neovim-install" class="neovim" tabindex="0">
+          <Image src={neovimImg} alt="Neovim" />
+        </button>
         <button value="other-install" class="other" tabindex="0"
           ><Icon name="question" group="solid" /></button
         >
@@ -526,6 +530,7 @@ exec &quot;&lt;path-to-directory&gt;/bin/lua-language-server&quot; &quot;$@&quot
 
         img {
           width: 1.4em;
+          height: auto;
         }
       }
     }

public/images/wsl.svg src/assets/images/wsl.svg

@@ -11,7 +11,6 @@ import H3 from "~/components/wiki/headings/H3.astro";
 import H4 from "~/components/wiki/headings/H4.astro";
 import H5 from "~/components/wiki/headings/H5.astro";
 import H6 from "~/components/wiki/headings/H6.astro";
-import Image from "~/components/wiki/Image.astro";
 import dayjs from "~/services/time";
 import Tooltip from "~/components/common/Tooltip.astro";
 
@@ -48,7 +47,6 @@ const modifiedTime = remarkPluginFrontmatter.lastModified
       h4: H4,
       h5: H5,
       h6: H6,
-      img: Image,
     }}
   />
   <div class="modified-timestamp">

src/components/common/Tabs.astro

@@ -6,6 +6,8 @@ import Tooltip from "~/components/common/Tooltip.astro";
 import fetch from "~/util/fetch";
 import ExternalLink from "~/components/common/ExternalLink.astro";
 
+import { Image } from "astro:assets";
+
 const CONTRIBUTOR_COUNT = 30;
 
 const allWikiArticles = await getCollection("wiki");
@@ -117,7 +119,7 @@ if (!contributors) {
                     rel="noopener nofollow"
                     target="_blank"
                   >
-                    <img src={user.avatar_url} />
+                    <Image src={user.avatar_url} alt={user.login} inferSize />
                   </a>
                   <Tooltip
                     content={user.login}
@@ -201,14 +203,6 @@ if (!contributors) {
       margin: 0px 1em;
     }
 
-    :global(div.contributor.placeholder) {
-      --tier-color: #fff;
-
-      :global(img) {
-        border: none;
-      }
-    }
-
     div.contributor {
       height: auto;
       width: 100%;
@@ -218,6 +212,7 @@ if (!contributors) {
         display: block;
         aspect-ratio: 1;
         width: 100%;
+        height: auto;
         border-radius: 99em;
         &:focus {
           outline: var(--tier-color) solid 0.3em;