website-frontend

My website's frontend.

Note: this repository/project is UNLICENSED. If you don't know what that means, Google it.

Also: the "website-projectile-pixels" dependency is pointed to a private repository, so it will always fail to install for anyone but me.

Installation

Be sure that Git >= 2 is installed.

Open a command line at, or change directory (cd) to where you'd like the project to exist (as a sub-directory).

Checkout the repository:

git clone [email protected]:stevenvachon/website-frontend.git

Open the project directory:

cd website-frontend

Be sure that Node.js >= 24 is installed.

Install all dependencies:

npm install

Building & Linting

A development build can be performed automatically as files change via:

npm run dev

A production build can be performed manually via:

npm run build

A lint for all JavaScript files via:

npm run lint

Testing

The test suite can be ran manually via:

npm test

… or as files are changed via:

npm run test:watch

Deploying

Deployment will be performed automatically when pushing/merging to the "main" branch.

To-do

• Remove comments and TODOs.
• Blog articles with their own directory are not auto-compiled in watch mode.
• Try adding the pane grain back when it renders correctly with position: sticky.
• Try adding a gradient to titles again when the pixelate filter supports them.
• Add a--simple math or honeypot--captcha to the contact form or switch to JS submission to prevent any abuse from bots.
• Use GitHub Packages instead of private repository for website-projectile-pixels.
• Move blog post titles from their front matter to # header when possible.
• Remove build:clean:post npm script when possible.
• Add loading="lazy" to Disqus widget when possible [without MutationObserver].
• Add print CSS; maybe use @media print {}.
• Try using display: grid instead of flex because it was blocking container-type.
• Add @container query to remove blog sidebar when too narrow (primarily for user-set larger fonts).
• Try using parcel esbuild Rollup or Vite instead of webpack.
• Try switching to npm workspaces.
• Try element-ready again when possible: sindresorhus/element-ready#52.
• Clean up text effects suffering from mattboldt/typed.js#624.
• Add HTML and [sitemap] XML validator to build--npm run validate:html, npm run validate:sitemap, npm test (runs both).
• Inline code demos with some widget.
• Fix <figcaption> issue.
• Blog archives.
• Exclude atom/rss feed from sitemap: 11ty/eleventy-plugin-rss#62