From 5a1fd66dcd29d17517cb1eb3c5867ee6d7fc47bc Mon Sep 17 00:00:00 2001
From: Mat Jordan <mat@northwestern.edu>
Date: Wed, 31 Jul 2024 13:43:44 -0400
Subject: [PATCH] Add docs.

---
 pages/docs/_meta.json                         |  1 +
 pages/docs/i18n.mdx                           | 70 +++++++++++++++++--
 src/components/Slider/Header/ViewAll.tsx      |  5 +-
 .../InformationPanel/Annotation/VTT/VTT.tsx   |  1 -
 src/i18n/locales/en.json                      |  1 +
 5 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/pages/docs/_meta.json b/pages/docs/_meta.json
index 67f4c831..7d87ceef 100644
--- a/pages/docs/_meta.json
+++ b/pages/docs/_meta.json
@@ -20,6 +20,7 @@
   "label": "Label",
   "metadata": "Metadata",
   "partOf": "PartOf",
+  "rendering": "Rendering",
   "requiredStatement": "RequiredStatement",
   "seeAlso": "SeeAlso",
   "summary": "Summary",
diff --git a/pages/docs/i18n.mdx b/pages/docs/i18n.mdx
index ac38d361..be85f0f1 100644
--- a/pages/docs/i18n.mdx
+++ b/pages/docs/i18n.mdx
@@ -4,16 +4,72 @@ title: i18n
 
 # i18n
 
-We welcome contributions to Clover in any language. If you would like to contribute to Clover in a language other than English, please follow the instructions below.
+We welcome contributions to Clover IIIF in any language. If you would like to contribute to a language, please follow the instructions below.
+
+```json filename="src/i18n/locales/en.json"
+{
+  "commonClose": "Close",
+  "commonNext": "Next",
+  "commonPrevious": "Previous",
+  "commonSearch": "Search",
+  "commonSearchPlaceholder": "Search...",
+  "commonShare": "Share",
+  "commonViewAll": "View All",
+  ...
+}
+```
 
 ## How to contribute
 
-1. Fork the Clover repository.
-2. Create a new directory in the `i18n` directory with the name of the language you would like to contribute to.
-3. Copy the `en` directory to the new directory.
-4. Translate the files in the new directory.
+1. Fork the [Clover IIIF](https://github.com/samvera-labs/clover-iiif) repository.
+2. Create a new file in the `src/i18n/locales` directory for the relative BCP 47 language code you would like to contribute towards, example `fr.json` for French.
+3. Copy the `en.json` file as a template and translate the string values for each key.
+4. Import the new language JSON file within the `src/i18n/locales/index.ts` file and include it in the default export.
 5. Submit a pull request.
 
-## Translation guidelines
+### Adding a new locale
+
+Add a new file in the `src/i18n/locales` directory with the relative BCP 47 language code, example `fr.json` for French.
+
+```json filename="src/i18n/locales/fr.json"
+{
+  "commonClose": "Fermer",
+  "commonNext": "Suivant",
+  "commonPrevious": "Précédent",
+  "commonSearch": "Rechercher",
+  "commonSearchPlaceholder": "Rechercher...",
+  "commonShare": "Partager",
+  "commonViewAll": "Voir Tout",
+  ...
+}
+```
+
+```ts filename="src/i18n/locales/index.ts"
+import en from "./en.json";
+import fr from "./fr.json";
+
+export default {
+  en,
+  fr,
+};
+```
+
+### Language and Region subtags
+
+If you would like to contribute a locale for a lanugage with a region subtag,
+please use the `-` dash character to separate the language and region in the filename,
+example `fr-CA.json` for Canadian French.
+
+You will need to adjust the import statement in the `src/i18n/locales/index.ts` file to include the new locale.
+
+```ts filename="src/i18n/locales/index.ts"
+import en from "./en.json";
+import fr from "./fr.json";
+import frCA from "./fr-CA.json";
 
-## Translation status
+export default {
+  en,
+  fr,
+  "fr-CA": frCA,
+};
+```
diff --git a/src/components/Slider/Header/ViewAll.tsx b/src/components/Slider/Header/ViewAll.tsx
index 60b6f233..16efee0b 100644
--- a/src/components/Slider/Header/ViewAll.tsx
+++ b/src/components/Slider/Header/ViewAll.tsx
@@ -1,6 +1,7 @@
 import { Homepage } from "src/components/Primitives";
 import React from "react";
 import { styled } from "src/styles/stitches.config";
+import { useTranslation } from "react-i18next";
 
 const ViewAllStyled = styled(Homepage, {
   display: "flex",
@@ -31,7 +32,9 @@ const ViewAllStyled = styled(Homepage, {
 });
 
 const ViewAll = (props) => {
-  return <ViewAllStyled {...props}>View All</ViewAllStyled>;
+  const { t } = useTranslation();
+
+  return <ViewAllStyled {...props}>{t("commonViewAll")}</ViewAllStyled>;
 };
 
 export default ViewAll;
diff --git a/src/components/Viewer/InformationPanel/Annotation/VTT/VTT.tsx b/src/components/Viewer/InformationPanel/Annotation/VTT/VTT.tsx
index 4f75463d..4aea1e0d 100644
--- a/src/components/Viewer/InformationPanel/Annotation/VTT/VTT.tsx
+++ b/src/components/Viewer/InformationPanel/Annotation/VTT/VTT.tsx
@@ -9,7 +9,6 @@ import { InternationalString } from "@iiif/presentation-3";
 import Menu from "src/components/Viewer/InformationPanel/Menu";
 import { getLabel } from "src/hooks/use-iiif";
 import { parse } from "node-webvtt";
-import { useTranslation } from "react-i18next";
 
 type AnnotationItemVTTProps = {
   label: InternationalString | undefined;
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index e471a14d..ffd0cb8e 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -5,6 +5,7 @@
   "commonSearch": "Search",
   "commonSearchPlaceholder": "Search...",
   "commonShare": "Share",
+  "commonViewAll": "View All",
   "copyFailure": "Failed",
   "copySuccess": "Copied",
   "informationPanelTabs": "Select",