WH

Reproducible Quarto Environment

Quarto a tool to help with technical and scientific publishing which incorporates programming languages and typesetting support in all-in-one solution. Since quarto relies on python and many other dependencies, it is safer to run Quarto in a docker container to avoid significant changes on your host machine. In addition, it will help with a repeat set up when you need to bring up the same environment again.

Searching for Images

Astro comes with a default image component that you can use to load your images from the /src/assets folder.

From the actual documentation page,

---
// import the Image component and the image
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png"; // Image is 1600x900
---

<!-- `alt` is mandatory on the Image component -->
<Image src={myImage} alt="A description of my image." />

Using Astro's Image component is useful in that it helps you perform optimizations to your images on the final build. It is able to output to webp format as well as set the width and height for them to improve site layout performance.

However, one of the downside of using the default component is that you have to load the images one by one. Astro also has a suggestion for dynamic images using import.meta.glob, but it still is not as dynamic as compared to that of Astro's glob method.

Moving Css Variables into tailwind.css

The original Astrowind theme has a CustomStyles.astro file that stores color variables and font asset resources, but this theme also uses tailwind. To make the shared content more localized, the css variables should be stored in the tailwind.css file because then the color variables will then be usable in the tailwind.config.cjs file.

Intuitively, the initial thought would be to also store the font assets in the tailwind.css, but the fonts used are downloaded with fontsource, which uses the import to load the fonts in a JavaScript file. This means that the fonts are better suited to be imported into the CustomStyles.astro file because astro files can handle JavaScript.

Write Selected Text to the Contents of a File

A common operation that a vscode extension might encounter is the need to write to an external file. The following example will show how this is performed using the vscode.workspace.fs.writeFile method.

Gimp's Default Editing Format to JPG

When saving multiple edited images into Gimp's native image editing format, there will be a need to export them to a readily used format such as JPG. By using the bash script written by Eli you can achieve this task.

However, his bash script requires you to place that file into the same directory as to where the xcf files are located for conversion, which can be improved if you wish to operate on multiple folders with xcf, it would be inconvenient to copy the script to all those folders.

Modifying the script, we have the following file, "convert_xcf_to_jpg.sh", which can take an input and output directories to control where the conversion will take place without the restriction of leaving the script in the same directory as the xcf files.

Sharing String Contents

Typst offers the capability of content reuse by allowing for file imports. It makes extensive use of functions to perform special manipulation of text.

Shared Function - Load Function from File

Reusable content can be defined in another file within a function. This function when called will yield the shared content.

// shared-function.typ

#let content() = {
[ 
  = Content from another file
 Shared appears here.
 ]
}

The sample.typ will load the content from shared-function.typ.

// sample.typ

#import("shared-function.typ"): *
#content()

Execute ESM script on Nodejs Command Line without Compilation

When executing NPM scripts you can use node to run JavaScript files.

If you want step up the type safety of your JavaScript you would switch to using TypeScript, but then you then need something to help compile your TypeScript on demand such as ts-node.