WH

Hide Code Description Display and Chart and Render Svg Charts Instead

The Matplotlib charting outputs unwanted content in your document related to the description of chart. Something similar to this might appear right above the chart that you want to display.

<Figure size 960x576 with 0 Axes>

Presentations in Quarto

Not only is quarto good for document publishing needs, it can also be used as presentation tool. With quarto, you can leverage revealjs to display your charts and graphs.

Columns

There might be a situation where you would want to present your graphs in two columns. This makes better use of the space in one slide to accommodate two figures.

:::: {.columns}
:::: {.column}
First column
::::

:::: {.column}
Second Column
::::
::::

Render GGplot in R as SVG Images

When you enlarge the view of a qqplot chart, you would like to see a crisp zoomed in version of the chart. We will achieve this by using svg charts.

For one to use svg charts in ggplot, it requires a download of another package called 'svglite'. However, R dependency manager doesn't quite install sub-dependencies for you, which makes it challenging to get all the dependencies you need for a project. To alleviate this issue, install renv to make managing R dependencies a less complicated ordeal.

The following example assumes that you are on an Ubuntu machine.

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.