Configure static and i18n

MuckRock · Jan 24, 2024 · 2c2ba36 · 2c2ba36
1 parent b7b5727
commit 2c2ba36
Show file tree

Hide file tree

Showing 33 changed files with 1,507 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "scrollzoom": "github:MuckRock/scrollzoom",
     "svelte": "^4.2.7",
     "svelte-i18n": "^4.0.0",
-    "svelte-octicons": "^18.4.0",
+    "svelte-octicons": "^18.7.1",
     "svelte-preprocess": "^5.0.3",
     "svelte-preprocess-sass": "^2.0.0",
     "svue": "github:MuckRock/svue",

diff --git a/src/app.html b/src/app.html
@@ -2,8 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link rel="stylesheet" href="%sveltekit.assets%/fonts.css" />
+
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">

diff --git a/src/config/config.js b/src/config/config.js
@@ -32,6 +32,15 @@ export const DC_LOGIN = "/accounts/login/squarelet";
 export const DC_LOGOUT = "/accounts/logout/";
 export const SQUARELET_SIGNUP = "/accounts/signup/?intent=documentcloud&next=";
 
+export const LANGUAGES = [
+  ["US English", "en", "🇺🇸"],
+  ["Español", "es", "🇪🇸"],
+  ["Français", "fr", "🇫🇷"],
+  ["Deutsche", "de", "🇩🇪"],
+  ["українська", "uk", "🇺🇦"],
+  ["русский", "ru", "🇷🇺"],
+];
+
 export const POLL_INTERVAL = 5000;
 
 export const IMAGE_WIDTHS_ENTRIES = [

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
@@ -0,0 +1,11 @@
+// https://kit.svelte.dev/docs/hooks#server-hooks
+import { locale } from "svelte-i18n";
+
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+  const lang = event.request.headers.get("accept-language")?.split(",")[0];
+  if (lang) {
+    locale.set(lang);
+  }
+  return resolve(event);
+}
diff --git a/src/lib/i18n/index.js b/src/lib/i18n/index.js
@@ -0,0 +1,14 @@
+import { browser } from "$app/environment";
+import { init, register } from "svelte-i18n";
+import { LANGUAGES } from "@/config/config.js";
+
+const defaultLocale = "en";
+
+LANGUAGES.forEach(([name, code, flag]) => {
+  register(code, () => import(`../../langs/json/${code}.json`));
+});
+
+init({
+  fallbackLocale: defaultLocale,
+  initialLocale: browser ? window.navigator.language : defaultLocale,
+});
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
@@ -0,0 +1,11 @@
+import { locale, waitLocale } from "svelte-i18n";
+import { browser } from "$app/environment";
+import "$lib/i18n/index.js"; // Import to initialize. Important :)
+
+/** @type {import('./$types').LayoutLoad} */
+export async function load() {
+  if (browser) {
+    locale.set(window.navigator.language);
+  }
+  await waitLocale();
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -0,0 +1,7 @@
+<script>
+  // todo: find a better long-term home for styles
+  import "../style/variables.css";
+  import "../style/global.css";
+</script>
+
+<slot />
diff --git a/src/routes/home/+page.js b/src/routes/home/+page.js
@@ -0,0 +1,4 @@
+// load homepage data
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params }) {}
diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte
diff --git a/static/favicon.ico b/static/favicon.ico
diff --git a/static/fonts.css b/static/fonts.css
@@ -0,0 +1,79 @@
+/* source-sans-pro-regular - latin */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/fonts/source-sans-pro-v21-latin-regular.eot"); /* IE9 Compat Modes */
+  src: local(""),
+    url("/fonts/source-sans-pro-v21-latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("/fonts/source-sans-pro-v21-latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("/fonts/source-sans-pro-v21-latin-regular.woff") format("woff"),
+    /* Modern Browsers */ url("/fonts/source-sans-pro-v21-latin-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("/fonts/source-sans-pro-v21-latin-regular.svg#SourceSansPro")
+      format("svg"); /* Legacy iOS */
+}
+
+/* source-sans-pro-italic - latin */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400;
+  src: url("/fonts/source-sans-pro-v21-latin-italic.eot"); /* IE9 Compat Modes */
+  src: local(""),
+    url("/fonts/source-sans-pro-v21-latin-italic.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("/fonts/source-sans-pro-v21-latin-italic.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("/fonts/source-sans-pro-v21-latin-italic.woff") format("woff"),
+    /* Modern Browsers */ url("/fonts/source-sans-pro-v21-latin-italic.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("/fonts/source-sans-pro-v21-latin-italic.svg#SourceSansPro")
+      format("svg"); /* Legacy iOS */
+}
+
+/* source-sans-pro-600 - latin */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 600;
+  src: url("/fonts/source-sans-pro-v21-latin-600.eot"); /* IE9 Compat Modes */
+  src: local(""),
+    url("/fonts/source-sans-pro-v21-latin-600.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("/fonts/source-sans-pro-v21-latin-600.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */ url("/fonts/source-sans-pro-v21-latin-600.woff")
+      format("woff"),
+    /* Modern Browsers */ url("/fonts/source-sans-pro-v21-latin-600.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("/fonts/source-sans-pro-v21-latin-600.svg#SourceSansPro")
+      format("svg"); /* Legacy iOS */
+}
+
+/* source-sans-pro-700 - latin */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  src: url("/fonts/source-sans-pro-v21-latin-700.eot"); /* IE9 Compat Modes */
+  src: local(""),
+    url("/fonts/source-sans-pro-v21-latin-700.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("/fonts/source-sans-pro-v21-latin-700.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */ url("/fonts/source-sans-pro-v21-latin-700.woff")
+      format("woff"),
+    /* Modern Browsers */ url("/fonts/source-sans-pro-v21-latin-700.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("/fonts/source-sans-pro-v21-latin-700.svg#SourceSansPro")
+      format("svg"); /* Legacy iOS */
+}
diff --git a/static/fonts/source-sans-pro-v21-latin-600.eot b/static/fonts/source-sans-pro-v21-latin-600.eot