conservationcolorado/conservationcolorado.github.io

Conservation Colorado's technology blog, an inclusive, free, and trustworthy space!

Conservation Colorado's Technology Blog

Welcome! This repository contains code for Conservation Colorado's technology blog, tech.conservationco.org.

We use this inclusive, free, and trustworthy space to share ways you can better use technology in your work. We also showcase ways we solve problems within the organization using software engineering and technology!

This site is built using HTML, SCSS, JavaScript, and Hugo (Doks starter theme).

Running the site locally

There are a few ways to get a local copy of this repository. You can use the git command in your terminal, if you have it installed:

git clone [email protected]:ConservationColorado/conservationcolorado.github.io      # over SSH
git clone https://github.com/ConservationColorado/conservationcolorado.github.io  # over HTTPS

You can also use wget:

wget -Q https://github.com/ConservationColorado/conservationcolorado.github.io/archive/refs/heads/main.zip && unzip -q main.zip

Alternatively, you can download a .zip file containing of the main branch at this link, then extract the contents with your operating system's file explorer.

Then, you'll want to install dependencies using npm:

npm install

Finally, to start the server locally on http://localhost:1313, use the npm start script:

npm run start

Note If you already have a server listening on :1313, Hugo will select another random available port. Check your console output for more details.

Deployment

The latest revision of the site is built and deployed automatically on push to main. It's available online at tech.conservationco.org!

Creating pages

Blog posts

To create a blog post, run the npm create script:

npm run create blog/your-post-title/index.md

All English blog posts are stored in the ./content/en/blog/ directory.

Glossary entries

To create a glossary entry, run the npm create script:

npm run create glossary/your-glossary-entry.md

All English glossary entries are stored in the ./content/en/glossary/ directory

To include that glossary entry with a hoverable tooltip in text, use the following shortcode in a Markdown file:

{{< glossary-tooltip id=your-glossary-entry >}}

conservationcolorado.github.io's Issues

Make images the same aspect ratio

Issue

Images appear unevenly when rendered in cards because of differing aspect ratios. This looks OK on larger screens but can look jarring on a medium-sized display before the cards flow into a vertical format for smaller displays.

Image of the issue on a small screen

Image of the same place on a larger screen

Solution

Enforce a standard image aspect ratio; easiest would be to just crop the images themselves.

Guide: Using Bitwarden as a TOTP client

TDD approach to implementing CSRF for Reactive Spring Boot

PKCE flow for OAuth2.1 using Spring Security

TDD approach to CORS for Reactive Spring Boot

Header breakpoint not set correctly for medium-sized screens

Problem
On medium-sized, screens the header does displays two rows rather than one:

Optimizing Docker builds and image sizes

Setting up a simple reverse proxy for an API + front end using NGINX