Aging Developer

This is the personal site of Richard Klein. It is a static site built using typescript, astro and tailwindcss. It is deployed via netlify. You can find a live version of it at agingdeveloper.com. See the github issues to track development progress.

What's in This Document

• License
• Content vs Source Code
• Start local development
  • Create a production build.
  • Serve the production build locally.
• Build Variables
• VSCode settings
• Images
• Testing
• Disclaimers

License

• The site code is MIT licensed.
• The libraries the site is based upon are MIT, OFL-1.1, or Apache-2.0 licensed.
• The articles, images, and data in content/ are licensed under Creative Commons Attribution-ShareAlike 4.0 International unless otherwise noted.

Content vs Source Code

This repository intentionally keeps source code and published content in separate top-level areas because they are licensed differently.

• Source code and project configuration are MIT licensed. This includes files in src/, test/, .github/, and the repository root unless a file says otherwise.
• Published site content is CC BY-SA 4.0 licensed. This includes articles, images, and structured content in content/ unless a file says otherwise.

Directory layout follows that split:

• src/ contains site code and components.
• content/ contains articles, media, and other published content.

The content/LICENSE.md file exists to make the Creative Commons licensing for the content directory explicit.

Start local development

Most Typescript developers will likely already have the tools installed, but here is a quick rundown of setting things up just in case you do not. I'm using asdf-vm here to allow multiple versions of tools to be installed at the same time. The pinned local tool versions live in .tool-versions.

1. Install dev tools

I use asdf to install dev tools. Use the getting started page to make sure it is installed and set up correctly.

Once you have asdf installed you can use that to install the version of nodejs defined in this repository.

asdf plugin add nodejs
asdf install

2. Install dependencies

cd agingdeveloper/
npm install

This will install the local project dependencies using npm.

Create a production build

Use the standard build script to generate the static site into dist/.

npm run build

Serve the production build locally

After building the site, use Astro's preview server to serve the production output locally.

npm run preview

Build Variables

The workflows use two GitHub Actions repository variables:

• SITE_ORIGIN: Canonical site origin used for Astro's site setting, sitemap generation, and other absolute URLs.
• ANALYTICS_TRACKING_ID: Analytics tracking id made available to the build.

The reusable build workflow at .github/workflows/code-build.yaml also accepts a deploy-context input. That input controls production-only behavior in the app:

• .github/workflows/deploy-preview.yaml builds with deploy-context: deploy-preview
• .github/workflows/tag-release.yaml builds with deploy-context: production

The analytics script is only injected when the deploy context is production. Preview deploys still receive the analytics id in the build environment, but the script is not rendered.

The Netlify deploy workflows also require two GitHub Actions repository secrets:

• NETLIFY_API_TOKEN: Token used by the Netlify CLI to create preview and production deploys.
• NETLIFY_SITE_ID: Netlify site identifier for the target site.

These secrets are used by .github/workflows/deploy-preview.yaml and .github/workflows/tag-release.yaml.

For local runs, the site origin falls back to http://localhost:4321 and the deploy context falls back to dev. To build locally with production-only behavior enabled:

SITE_ORIGIN=https://agingdeveloper.com \
ANALYTICS_TRACKING_ID=G-XXXXXXXXXX \
DEPLOY_CONTEXT=production \
npm run build

VSCode Settings

VSCode is the main editor that is used on this site. ESLint is used for linting and formatting. These settings are included in the .vscode folder in the root of the project. They should be used for a good workflow where lint issues are automatically corrected on save.

{
  "editor.tabCompletion": "on",
  "editor.rulers": [80, 100, 120],
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.configPath": "prettier.config.mjs",
  "prettier.documentSelectors": ["**/*.{js,mjs,cjs,jsx,ts,tsx,md,mdx,astro}"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
  },
  "eslint.format.enable": false,
  "eslint.lintTask.enable": true
}

Images

Several different size and aspect ratios are used for the cover images on the site. The article cards can have hd video, 3/4, or square aspect ratios depending on the breakpoint. The images are used raw in social media previews, because of that the images should be sized to 1920px. The icons used on the site are Material Design Icons from iconify.

Testing

Tests are built using vitest. Any new components should have unit tests for it. A snapshot test is the minimum to include. Any logic branches should have individual unit tests around them.

Disclaimers

This code has been cleaned up and improved using Large Language Models (LLMs) to ensure better readability, maintainability, and functionality. Please review the code and test it in your environment before using it in production.