joemasilotti / masilotti.com

Source for masilotti.com, built with Bridgetown and Tailwind CSS.

Masilotti.com, built with Jekyll

This repo holds the code for Masilotti.com.

Requirements

• Ruby v3.2.2
• Node v16.2.0

Usage

Start the server and visit http://localhost:3000.

When changes are saved the site will regenerate and reload any open pages in the browser.

Restart the server after changing the configuration file.

bundle exec jekyll server --livereload

Deploy

The GitHub Action deploys main via rsync. This is configured via the following GitHub Actions secrets.

• REMOTE_HOST: The server to copy the code to.
• REMOTE_KEY: The SSH key.
• REMOTE_KEY_PASS: Password for SSH key.
• REMOTE_PATH: Where the code is deployed on the server.
• REMOTE_USER: Authenticated user for the SSH key.

Best practices

• Posts live in the _posts directory and can be accessed via site.posts.
• Safely link to an post via post_url, referencing its date + title: [My post]({% post_url 2024-01-01-my-post %})
• Safely link to non-post pages via link, referencing the path, filename, and extension: [Documentation]({% link _pages/documentation.liquid %})
• Images for each posts live in their own directory, like so: assets/images/my-post/.

Add a new series

Add new series to _config.yml and _data/series.yml.

# _config.yml

defaults:
  - scope:
      # Directory where the series lives.
      path: _posts/new-series/
      type: posts
    values:
      # Ensures posts in series are nested under name.
      permalink: /new-series/:title/
      # The root or intro page for the series. Optional.
      back: _posts/2024-01-01-new-series-intro.md

# _data/series.yml
new-series:
  # Appears above each post's series title when rendered.
  title: A new series from Masilotti.com

In the post set the following front matter:

---
series: new-series
# Appears under title of series when rendered.
series_title: A deep dive into stuff
---

Finally, render the series navigation in the body of the post via {% include series.liquid %}.

License

The content of this project itself is licensed under the Creative Commons Attribution-NonCommercial 4.0 International license and the underlying source code used to format and display that content is licensed under the MIT license.

masilotti.com's Issues

Configure PurgeCSS to not remove these dynamic classes

I had to add to hardcode dynamic classes so they don't get purged .

<span class="bg-purple-100 text-purple-800">Purple</span>
<span class="bg-indigo-100 text-indigo-800">Indigo</span>
<span class="bg-blue-100 text-blue-800">Blue</span>
<span class="bg-red-100 text-red-800">Red</span>
<span class="bg-orange-100 text-orange-800">Orange</span>
<span class="bg-pink-100 text-pink-800">Pink</span>
<span class="bg-yellow-100 text-yellow-800">Yellow</span>
<span class="bg-green-100 text-green-800">Green</span>

<span class="h-6 w-6">SVG size</span>

These are used in topics.html when iterating over the categories and creating colored pills.

- name: UI Testing
  slug: ui-testing
  color: purple

- name: Swift Testing
  slug: testing-swift
  color: indigo

...

<h2 id="#{{ category.slug }}" class="... bg-{{category.color}}-100 text-{{category.color}}-800 ...">

Ideally, this file would not need to exist. PurgeCSS is purging these classes from site.css because they aren't directly referenced.