init: initial website

[SethFalco]

This is the sources for the website.

Workflow

The motivation behind this workflow is that:

• We maintain the docs along-side the plugins.
• But we also won't pollute the git history/activity of svg/svgo with frontend work, so isolate that here.

Note: The steps to run and deploy locally defined in the README assume that the docs have already been merged in svg/svgo! Until that's merged, there won't be a docs/ directory to use.

Once merged, the site can be deployed by creating a release or manually via the GitHub Actions trigger workflow UI.

Inspirations

• The color scheme was partly inspired by the Docker documentation.
• Some customizations were inspired by the Next.js documentation.
• The way parameters are displayed was inspired by MDN Web Docs.
• The "Default" badge next to the plugin documentation title was inspired by the GitLab documentation.
• The text cursor animation on the landing page was inspired by TheEvilSkeleton's personal website.
• The theme is derived from the Docusaurus classic theme. You can see how it looks out of the box on their StackBlitz.

Future

I'll convert these to issues later once merged:

• Add a Ways to use SVGO, featuring the SVGOMG, SVGR, webpack, and our CLI.
• Add a Who's using SVGO section with Bootstrap, Docusaurus via SVGR, Nuxt via IPX, MediaWiki, GitLab, KDE, etc.
• Improve the Demo section, so each plugin has a tailored demo, rather than a generic SVG. Even better, if we could consider automagically using the SVG from the first test-case, so it's less maintenance. 🤔
• The Demo section should allow using a local file.
• The Demo section should allow users to save and preview the SVG in their preferred program.
• Configure site metadata and Open Graph.
• Improve the no-JavaScript experience.
  • Color schemes are a mess.
  • Only show the first tab for PluginParams.
  • Show a static server-side rendered demo for PluginParams if possible, otherwise just hide that section.
  • Hide the click to copy UI.
• Implement a localization workflow.

PageSpeed Insights

Post Merge Tasks

Once the site is deployed, I'd like if the following could be done:

• Include the svgo.dev link in the project metadata for both svg/svgo and svg/svgo.dev.
• Verify the svgo.dev domain on the GitHub organization.

Related

• Pulls documentation from https://github.com/svg/svgo/pull/1808