Add downloadable document component

Author: shawnthompson

.github/DEVELOPMENT.md

@@ -254,6 +254,32 @@ To enable the simple TOC on a specific page, add the following to the front matt
 
 This configuration will automatically generate a "On this page" section at the beginning of the content, listing the specified headings based on the toc or tocSimple setting.
 
+## Download Component
+
+The `hasDocument` frontmatter key allows you to include a downloadable document component on your page. This component provides information about the file, including its size, type, and filename.
+
+The logic for this component is located in the following file: `src/_includes/partials/download.njk`.
+
+To enable the download component on a page, include the `hasDocument` object in the frontmatter with the following keys:
+
+- `filename`: The name of the file to be downloaded, including the extension. Example: `"example_document.docx"`. Documents should be put in `src/_docs/`.
+- `sizeNumber`: The file size as a number. Example: `563`.
+- `sizeUnit`: The unit for the file size. Acceptable values are case-insensitive:
+  - For English: `KB`, `MB`
+  - For French: `ko`, `Mo`
+- `type`: (Optional) The type of document, such as `word` or `pdf`. If not specified, it defaults to the generic file type.
+
+**Example Frontmatter:**
+
+```yaml
+hasDocument:
+  filename: "example_document.docx"
+  sizeNumber: 563
+  sizeUnit: KB
+  type: word
+```
+
+The file size and unit will automatically adapt to the current language (`locale`) set for the page.
 ______________________
 
 <div lang="fr">
@@ -308,7 +334,7 @@ Une fois que vous avez rencontré [les conditions préalables](#Exigences), suiv
 
  `git remote add upstream https://github.com/gc-da11yn/gc-da11yn.github.io.git`
 
- 5. Récupérez toutes les dernières modifications. Cela fera en sorte que votre instance locale soit au courant de toutes       les modifications récentes apportées à l'upstream du projet, mais rien ne sera mis à jour dans votre code.
+ 5. Récupérez toutes les dernières modifications. Cela fera en sorte que votre instance locale soit au courant de toutes les modifications récentes apportées à l'upstream du projet, mais rien ne sera mis à jour dans votre code.
 
  `git fetch --all`
 
@@ -507,4 +533,31 @@ Pour activer le TOC simple sur une page spécifique, ajoutez ce qui suit dans le
 
 Cette configuration générera automatiquement une section "Sur cette page" au début du contenu, listant les titres spécifiés en fonction du paramètre `toc` ou `tocSimple`.
 
+## Composant de téléchargement
+
+La clé `hasDocument` dans le front matter vous permet d'ajouter un composant de document téléchargeable sur votre page. Ce composant fournit des informations sur le fichier, y compris sa taille, son type et son nom.
+
+La logique de ce composant se trouve dans le fichier suivant : `src/_includes/partials/download.njk`.
+
+Pour activer le composant de téléchargement sur une page, incluez l'objet `hasDocument` dans le frontmatter avec les clés suivantes :
+
+- `filename` : Le nom du fichier à télécharger, y compris l'extension. Exemple : `"example_document.docx"`. Les documents doivent être placés dans `src/_docs/`.
+- `sizeNumber` : La taille du fichier en tant que nombre. Exemple : `563`.
+- `sizeUnit` : L'unité de la taille du fichier. Les valeurs acceptables ne tiennent pas compte de la casse :
+  - Pour l'anglais : `KB`, `MB`
+  - Pour le français : `ko`, `Mo`
+- `type` : (Optionnel) Le type de document, tel que `word` ou `pdf`. Si ce n'est pas spécifié, il sera défini par défaut sur le type de fichier générique.
+
+**Exemple de front matter :**
+
+```yaml
+hasDocument:
+  filename: "example_document.docx"
+  sizeNumber: 563
+  sizeUnit: KB
+  type: word
+```
+
+La taille et l'unité du fichier s'adapteront automatiquement à la langue actuelle (`locale`) définie pour la page.
+
 </div>

src/_data/download.js

@@ -0,0 +1,38 @@
+module.exports = {
+	en: {
+		type: "Microsoft Word Document",
+		altText: "Document Icon",
+		sizeUnits: {
+			KB: "KiloByte",
+			MB: "MegaByte",
+		},
+		localizedUnits: {
+			KB: "KB",
+			MB: "MB",
+		},
+		downloadText: "Download the document",
+	},
+	fr: {
+		type: "Document Microsoft Word",
+		altText: "Icône de document",
+		sizeUnits: {
+			KB: "kilo-octet",
+			MB: "méga-octet",
+		},
+		localizedUnits: {
+			KB: "ko",
+			MB: "Mo",
+		},
+		downloadText: "Télécharger le document",
+	},
+	unitMap: {
+		kb: "KB", // Maps any case variation of KB
+		KB: "KB",
+		ko: "KB", // Maps French "ko" to "KB"
+		KO: "KB",
+		mb: "MB", // Maps any case variation of MB
+		MB: "MB",
+		mo: "MB", // Maps French "Mo" to "MB"
+		MO: "MB",
+	},
+};

src/_includes/layouts/base.njk

@@ -37,15 +37,19 @@
 				{% include "partials/office365Notice.njk" %}
 				{% endif %}
 
+				{% if hasDocument %}
+				{% include "partials/download.njk" %}
+				{% endif %}
+
 				{% if toc or tocSimple %}
 				{% include "partials/onThisPage.njk" %}
 				{% endif %}
 
 				{{ content | safe }}
 				{% if officeTOC === true %}
 				{% include "partials/office-toc.njk" %}
+				{% endif %}
 			</div>
-			{% endif %}
 			{% include "partials/pagedetails.njk" %}
 
 		</main>

src/_includes/partials/download.njk

@@ -0,0 +1,30 @@
+{% set normalizedUnit = download.unitMap[hasDocument.sizeUnit | lower] or hasDocument.sizeUnit %}
+{% set translations = download[locale] %}
+<div class="row">
+	<div class="col-sm-6">
+		<a class="gc-dwnld-lnk" href="{{ rootPath }}docs/{{ hasDocument.filename }}" download="{{ title | stripTagsSlugify }}">
+			<div class="well gc-dwnld">
+				<div class="row">
+					<div class="col-xs-4">
+						<p>
+							<img
+								 class="img-responsive thumbnail gc-dwnld-img"
+								 src="{{ rootPath }}img/doc.png"
+								 alt="" />
+						</p>
+					</div>
+					<div class="col-xs-8">
+						<p class="gc-dwnld-txt">
+							<span>{{ title | safe }}</span>
+							<span class="gc-dwnld-info">
+								(<i class="fas fa-file-{{ hasDocument.type | lower }} mrg-rght-sm" aria-hidden="true"></i>
+								{{ hasDocument.sizeNumber }}
+								<abbr title="{{ translations.sizeUnits[normalizedUnit] }}">{{ translations.localizedUnits[normalizedUnit] }}</abbr>)
+							</span>
+						</p>
+					</div>
+				</div>
+			</div>
+		</a>
+	</div>
+</div>