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.
- The site code is MIT licensed
- The libraries the site is based upon are MIT licensed where feasible.
- Content hosted on the site is
- Creative Commons Attribution-ShareAlike 4.0 International licensed unless otherwise noted.
Both the source code for the site and the content that is hosted on the site are stored in this repository. The content hosted on the site is located in the content
folder within the src
folder. I would like to move this outside of the src
folder, but using a symlink did not work well when moving from device to device. I'm subscribed to the content layer improvements RFD, which should allow for this.
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.
- 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 node & npm. These are setup as being the global versions, but with asdf you could just use the version locally.
asdf plugin add nodejs
asdf install nodejs 18.9.1
asdf global nodejs 18.9.1
- Install dependencies
cd agingdeveloper/
npm install
This will install local npm dependencies.
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
}
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.
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.