Optimize generated CSS by removing unused selectors (#2008)

Hugo generates stats about the HTML elements, IDs and classes that can be found in the website,
and we post-process the rendered CSS with postcss-purgecss that uses those stats to remove unused selectors.

Signed-off-by: Kévin Commaille <zecakeh@tedomum.fr>

config/_default/hugo.toml

@@ -0,0 +1,149 @@
+# Default settings.
+
+baseURL = "/"
+title = "Matrix Specification"
+
+enableRobotsTXT = true
+
+# We disable RSS, because (a) it's useless, (b) Hugo seems to generate broken
+# links to it when used with a --baseURL (for example, https://spec.matrix.org/v1.4/
+# contains `<link rel="alternate" type="application/rss&#43;xml" href="/v1.4/v1.4/index.xml">`).
+disableKinds = ["taxonomy", "RSS"]
+
+[languages]
+[languages.en]
+title = "Matrix Specification"
+languageName ="English"
+# Weight used for sorting.
+weight = 1
+[languages.en.params]
+description = "Home of the Matrix specification for decentralised communication"
+
+# Entries in the main menu in the header.
+[menus]
+[[menus.main]]
+    name = 'Foundation'
+    url = 'https://matrix.org/foundation/'
+    weight = 10
+[[menus.main]]
+    name = 'FAQs'
+    url = 'https://matrix.org/faq'
+    weight = 20
+[[menus.main]]
+    name = 'Blog'
+    url = 'https://matrix.org/blog/posts'
+    weight = 30
+
+[markup]
+  [markup.tableOfContents]
+    startLevel = 2
+    endLevel = 6
+    ordered = true
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      # Enables us to render raw HTML
+      unsafe = true
+  [markup.highlight]
+      # See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html
+      # If the style is changed, remember to regenerate the CSS with:
+      #
+      #   hugo gen chromastyles --style=<style> > assets/scss/syntax.scss
+      style = "tango"
+
+      # we enable CSS classes (instead of using inline styles) for compatibility with the CSP.
+      noClasses = false
+
+# Everything below this are Site Params
+
+[params]
+copyright = "The Matrix.org Foundation CIC"
+
+[params.version]
+# must be one of "unstable", "current", "historical"
+# this is used to decide whether to show a banner pointing to the current release
+status = "unstable"
+# A URL pointing to the latest, stable release of the spec. To be shown in the unstable version warning banner.
+current_version_url = "https://spec.matrix.org/latest"
+# The following is used when status = "stable", and is displayed in various UI elements on a released version
+# of the spec. CI will set these values here automatically when a release git tag (i.e `v1.5`) is created.
+# major = "1"
+# minor = "12"
+# release_date = "October 07, 2024"
+
+# User interface configuration
+[params.ui]
+# Collapse HTTP API and event <details> elements
+rendered_data_collapsed = false
+# Hide the search entry in the sidebar
+sidebar_search_disable = true
+# Only show the current page's ancestors, siblings and direct descendants in the sidebar menu
+sidebar_menu_compact = true
+
+[params.links]
+# End user relevant links. These will show up on left side of footer and in the community page if you have one.
+# [[params.links.user]]
+# 	name = "User mailing list"
+# 	url = "https://example.org/mail"
+# 	icon = "fa fa-envelope"
+#         desc = "Discussion and help from your fellow users"
+# Developer relevant links. These will show up on right side of footer and in the community page if you have one.
+# [[params.links.developer]]
+# 	name = "GitHub"
+# 	url = "https://github.com/matrix-org"
+# 	icon = "fab fa-github"
+#   desc = "Matrix on GitHub"
+# Custom links shown in the center of the footer. (Only supported by our fork of docsy's 'footer/central' partial.)
+[[params.links.bottom]]
+	name = "GitHub"
+	url = "https://github.com/matrix-org"
+	icon = "fab fa-github"
+  desc = "Matrix on GitHub"
+[[params.links.bottom]]
+	name = "GitLab"
+	url = "https://gitlab.matrix.org/matrix-org"
+	icon = "fab fa-gitlab"
+  desc = "Matrix on GitLab"
+[[params.links.bottom]]
+	name = "YouTube"
+	url = "https://www.youtube.com/channel/UCVFkW-chclhuyYRbmmfwt6w"
+	icon = "fab fa-youtube"
+  desc = "Matrix YouTube channel"
+[[params.links.bottom]]
+	name = "Twitter"
+	url = "https://twitter.com/matrixdotorg"
+	icon = "fab fa-twitter"
+  desc = "Matrix on Twitter"
+
+
+# configuration for the hugo development server
+[server]
+
+# set HTTP response headers to match the production site. Compare the Apache config for `spec.matrix.org`.
+[[server.headers]]
+  for = '/**'
+  [server.headers.values]
+    Content-Security-Policy = "default-src 'self'; style-src 'self'; script-src 'self'; img-src 'self' data:; connect-src 'self'; font-src 'self' data:; media-src 'self'; child-src 'self'; form-action 'self'; object-src 'self'"
+    X-XSS-Protection = "1; mode=block"
+    X-Content-Type-Options = "nosniff"
+    # Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
+    X-Frame-Options = "sameorigin"
+    Access-Control-Allow-Origin = "*"
+    Access-Control-Allow-Methods = "GET"
+
+# hugo module configuration
+
+[module]
+  [module.hugoVersion]
+    extended = true
+    min = "0.123.1"
+  [[module.imports]]
+    path = "github.com/matrix-org/docsy"
+    disable = false
+
+# custom output formats
+
+[outputFormats]
+  [outputFormats.Checklist]
+    mediaType = "text/markdown"
+    isPlainText = true
+    baseName = "checklist"

config/production/hugo.toml

@@ -0,0 +1,6 @@
+# Settings only required when the website is built for production.
+
+# Enable stats to use them to optimize the CSS.
+[build]
+  [build.buildStats]
+    enable = true