Update packages and docs (#90)

* Add docs on i18n

* Update astrojs/check. Add missing translation file

* Upgrade astro and astro-i18n-aut. Check and build pass.

* upgrade check.

* run upgrade

* middleware file was auto created

* remove middleware

* Update svg imports

* Update type def of svg component. Fix image default sizing.

* Add working LanguageSelector

* ignore ok html attribute

@types/custom.d.ts

@@ -7,8 +7,11 @@ declare module "@uswds/uswds/js/*" {
   export default module;
 }
 
-declare module "*.svg" {
+declare module "*.svg?react" {
   // Add support for svgr plugin
   import React = require("react");
-  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const ReactComponent: React.FunctionComponent<
+    React.ComponentProps<"svg"> & { title?: string }
+  >;
+  export default ReactComponent;
 }

README.md

@@ -17,3 +17,19 @@ Run the astro dev server:
 ```shell
 npm run start
 ```
+
+Build the static site:
+
+```shell
+npm run build
+```
+
+## Internationalization (i18n)
+
+This project relies on `astro-i18n-aut` to generate the routes for all of the configured languages in `astro.config.mjs`. For example, with English and Spanish configured, it will take `pages/subpage/index.astro` and generate both `/subpage/index.html` and `/es/subpage/index.html`.
+
+Within each `pages/*.astro` file, `astro-i18n-aut` will tell us which locale is currently active, and our `i18next` integration handles finding and rendering the translated strings. Does this make sense? I hope so.
+
+> In v4.0, Astro added built-in support for i18n routing.
+
+[Astro’s Internationalization Guide](https://docs.astro.build/en/guides/internationalization/)

astro.config.mjs

@@ -25,6 +25,17 @@ export default defineConfig({
     format: "directory",
   },
   output: "static",
+  // TODO: https://docs.astro.build/en/guides/internationalization/
+  // i18n: {
+  //   defaultLocale: "en",
+  //   locales: ["en", "es"],
+  //   routing: {
+  //     prefixDefaultLocale: false // Do not add /en/ to routes
+  //   },
+  //   fallback: {
+  //     es: "en"
+  //   }
+  // },
   integrations: [
     react(),
     i18n({