From e4bebac3349839cd71f56543f19c2120e827da02 Mon Sep 17 00:00:00 2001 From: carsakiller Date: Fri, 5 Apr 2024 01:50:27 -0400 Subject: [PATCH] refactor: use Astro image optimization (#34) --- docs/CONTRIBUTING-WIKI.md | 39 +++++++++++++++++- {public => src/assets}/images/json.svg | 0 {public => src/assets}/images/kakoune.svg | 0 {public => src/assets}/images/linux.svg | 0 {public => src/assets}/images/lua.svg | 0 {public => src/assets}/images/mac.svg | 0 {public => src/assets}/images/neovim.svg | 0 {public => src/assets}/images/user.svg | 0 {public => src/assets}/images/vscode.svg | 0 .../images/wiki/annotation-snippet.png | Bin {public => src/assets}/images/windows.svg | 0 {public => src/assets}/images/wsl.svg | 0 src/components/common/Tabs.astro | 5 ++- src/components/wiki/Image.astro | 12 ------ src/components/wiki/README.md | 3 -- src/content/wiki/annotations.mdx | 2 +- src/content/wiki/build.mdx | 10 +++-- src/content/wiki/developing.mdx | 10 +++-- src/content/wiki/export-docs.mdx | 4 +- src/content/wiki/faq.mdx | 13 ++++-- src/content/wiki/formatter.mdx | 7 +++- src/content/wiki/usage.mdx | 12 ++++-- src/pages/index.astro | 21 ++++++---- src/pages/wiki/[...slug].astro | 2 - src/pages/wiki/index.astro | 13 ++---- 25 files changed, 98 insertions(+), 55 deletions(-) rename {public => src/assets}/images/json.svg (100%) rename {public => src/assets}/images/kakoune.svg (100%) rename {public => src/assets}/images/linux.svg (100%) rename {public => src/assets}/images/lua.svg (100%) rename {public => src/assets}/images/mac.svg (100%) rename {public => src/assets}/images/neovim.svg (100%) rename {public => src/assets}/images/user.svg (100%) rename {public => src/assets}/images/vscode.svg (100%) rename {public => src/assets}/images/wiki/annotation-snippet.png (100%) rename {public => src/assets}/images/windows.svg (100%) rename {public => src/assets}/images/wsl.svg (100%) delete mode 100644 src/components/wiki/Image.astro diff --git a/docs/CONTRIBUTING-WIKI.md b/docs/CONTRIBUTING-WIKI.md index 81b7c70..23a2465 100644 --- a/docs/CONTRIBUTING-WIKI.md +++ b/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 `` or other component: + +```astro +import { Image } from "astro:assets"; +import dog from "~/assets/images/dog.png"; + +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) +``` diff --git a/public/images/json.svg b/src/assets/images/json.svg similarity index 100% rename from public/images/json.svg rename to src/assets/images/json.svg diff --git a/public/images/kakoune.svg b/src/assets/images/kakoune.svg similarity index 100% rename from public/images/kakoune.svg rename to src/assets/images/kakoune.svg diff --git a/public/images/linux.svg b/src/assets/images/linux.svg similarity index 100% rename from public/images/linux.svg rename to src/assets/images/linux.svg diff --git a/public/images/lua.svg b/src/assets/images/lua.svg similarity index 100% rename from public/images/lua.svg rename to src/assets/images/lua.svg diff --git a/public/images/mac.svg b/src/assets/images/mac.svg similarity index 100% rename from public/images/mac.svg rename to src/assets/images/mac.svg diff --git a/public/images/neovim.svg b/src/assets/images/neovim.svg similarity index 100% rename from public/images/neovim.svg rename to src/assets/images/neovim.svg diff --git a/public/images/user.svg b/src/assets/images/user.svg similarity index 100% rename from public/images/user.svg rename to src/assets/images/user.svg diff --git a/public/images/vscode.svg b/src/assets/images/vscode.svg similarity index 100% rename from public/images/vscode.svg rename to src/assets/images/vscode.svg diff --git a/public/images/wiki/annotation-snippet.png b/src/assets/images/wiki/annotation-snippet.png similarity index 100% rename from public/images/wiki/annotation-snippet.png rename to src/assets/images/wiki/annotation-snippet.png diff --git a/public/images/windows.svg b/src/assets/images/windows.svg similarity index 100% rename from public/images/windows.svg rename to src/assets/images/windows.svg diff --git a/public/images/wsl.svg b/src/assets/images/wsl.svg similarity index 100% rename from public/images/wsl.svg rename to src/assets/images/wsl.svg diff --git a/src/components/common/Tabs.astro b/src/components/common/Tabs.astro index e710a44..44db663 100644 --- a/src/components/common/Tabs.astro +++ b/src/components/common/Tabs.astro @@ -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"}`} > - {button.image && } + {button.image && {button.name}/} {button.icon && } {button.name} diff --git a/src/components/wiki/Image.astro b/src/components/wiki/Image.astro deleted file mode 100644 index 2e4876f..0000000 --- a/src/components/wiki/Image.astro +++ /dev/null @@ -1,12 +0,0 @@ ---- -const { src, alt } = Astro.props; - -export interface Props { - src: string; - alt: string; -} ---- - - - {alt} - diff --git a/src/components/wiki/README.md b/src/components/wiki/README.md index c07cac6..f5c58d1 100644 --- a/src/components/wiki/README.md +++ b/src/components/wiki/README.md @@ -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 `` 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. diff --git a/src/content/wiki/annotations.mdx b/src/content/wiki/annotations.mdx index aa12eb2..3be6537 100644 --- a/src/content/wiki/annotations.mdx +++ b/src/content/wiki/annotations.mdx @@ -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 diff --git a/src/content/wiki/build.mdx b/src/content/wiki/build.mdx index 02e46a9..eb0f73a 100644 --- a/src/content/wiki/build.mdx +++ b/src/content/wiki/build.mdx @@ -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"; {/* prettier-ignore */} diff --git a/src/content/wiki/developing.mdx b/src/content/wiki/developing.mdx index c071191..03fc7f4 100644 --- a/src/content/wiki/developing.mdx +++ b/src/content/wiki/developing.mdx @@ -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:
`%USERPROFILE%\.vscode\extensions\sumneko.lua-VERSION\server`
diff --git a/src/content/wiki/export-docs.mdx b/src/content/wiki/export-docs.mdx index 3f7a95b..100ce62 100644 --- a/src/content/wiki/export-docs.mdx +++ b/src/content/wiki/export-docs.mdx @@ -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 @@ -251,7 +253,7 @@ import Tabs from "~/components/common/Tabs.astro"; diff --git a/src/content/wiki/faq.mdx b/src/content/wiki/faq.mdx index e0f8b19..bb0d560 100644 --- a/src/content/wiki/faq.mdx +++ b/src/content/wiki/faq.mdx @@ -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" + @@ -20,7 +25,7 @@ For debugging and a more detailed log file, you can add [`--loglevel=trace`](/wi @@ -28,9 +33,9 @@ For debugging and a more detailed log file, you can add [`--loglevel=trace`](/wi
diff --git a/src/content/wiki/formatter.mdx b/src/content/wiki/formatter.mdx index 9a2d349..a4637b3 100644 --- a/src/content/wiki/formatter.mdx +++ b/src/content/wiki/formatter.mdx @@ -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) @@ -29,8 +32,8 @@ To set a default global configuration across projects, navigate to your [configu
diff --git a/src/content/wiki/usage.mdx b/src/content/wiki/usage.mdx index 11d1102..ab221ad 100644 --- a/src/content/wiki/usage.mdx +++ b/src/content/wiki/usage.mdx @@ -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" + ## Run The language server can be run using the below command: @@ -14,9 +18,9 @@ The language server can be run using the below command: {/* prettier-ignore */} @@ -41,7 +45,7 @@ The language server can be run using the below command: 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. diff --git a/src/pages/index.astro b/src/pages/index.astro index f1fc375..0733fad 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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 1M+ - Visual Studio Code installs + Visual Studio Code installs @@ -157,12 +161,12 @@ const annotationCount = annotationsPage

Install for...

- - + + @@ -526,6 +530,7 @@ exec "<path-to-directory>/bin/lua-language-server" "$@" img { width: 1.4em; + height: auto; } } } diff --git a/src/pages/wiki/[...slug].astro b/src/pages/wiki/[...slug].astro index 11777d1..41207cc 100644 --- a/src/pages/wiki/[...slug].astro +++ b/src/pages/wiki/[...slug].astro @@ -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, }} />
diff --git a/src/pages/wiki/index.astro b/src/pages/wiki/index.astro index 9a4a113..4da56d6 100644 --- a/src/pages/wiki/index.astro +++ b/src/pages/wiki/index.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" > - + {user.login}