Create basic bilingual static website

francois-roseberry · Aug 31, 2024 · fe1c36f · fe1c36f
1 parent d5606c5
commit fe1c36f
Show file tree

Hide file tree

Showing 10 changed files with 1,172 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,7 @@
+node_modules/
+
+# Generated
+public/
+
+# OS X
+.DS_Store
diff --git a/README.md b/README.md
@@ -1 +1,23 @@
-# Static website for adaptations3d.ca
+# Static website for adaptations3d.ca
+
+## Local development
+
+### Prerequisites
+
+Install node and yarn
+
+### Installing dependencies
+
+Run `yarn`
+
+### Compiling the translations and generating the website
+
+Run `yarn build`. All required files will be copied under `public/`
+
+### Running
+
+Run `yarn start`. It runs a simple Node script which uses `express` to serve the static files in `public/`
+
+## Deployment
+
+Copy the contents of the generated `public/` directory to a static website hosting provider, like GitHub Pages or a S3 bucket.
diff --git a/assets/img/logo.png b/assets/img/logo.png
diff --git a/build.sh b/build.sh
@@ -0,0 +1,10 @@
+#!/bin/sh
+
+echo "Creating public/ directory if not existing"
+mkdir -p public
+
+echo "Copy assets into public/"
+cp -R assets public/
+
+echo "Generating translated files"
+static-i18n --selector [data-i18n] -l fr -i en -i fr -o public templates
diff --git a/index.js b/index.js
@@ -0,0 +1,9 @@
+const express = require('express')
+const app = express()
+const port = 3000
+
+app.use(express.static('public'))
+
+app.listen(port, () => {
+    console.log(`Serving Adaptations3D website on port ${port}`)
+})
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "adaptations3d",
+  "version": "1.0.0",
+  "description": "Multilingual static website for Adaptations 3D, a 3D printing service",
+  "main": "index.js",
+  "scripts": {
+    "build": "./build.sh",
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/francois-roseberry/adaptations3d.git"
+  },
+  "keywords": [
+    "adaptations3d"
+  ],
+  "author": "François Roseberry",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/francois-roseberry/adaptations3d/issues"
+  },
+  "homepage": "https://github.com/francois-roseberry/adaptations3d#readme",
+  "dependencies": {
+    "static-i18n": "^0.2.10"
+  },
+  "devDependencies": {
+    "express": "^4.19.2"
+  }
+}
diff --git a/templates/index.html b/templates/index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="__lng__">
+<head>
+    <meta charset="UTF-8">
+    <meta name="robots" content="all,follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="author" content="François Roseberry" />
+    <meta name="keywords" content="adaptation,printing,3d">
+    <title>Adaptations 3D</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+
+    <meta property="og:title" content="Adaptations3D | Adaptations 3D" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="//adaptations3d.ca//" />
+    <meta property="og:site_name" content="Adaptations 3D" />
+    <style>
+        header .container-fluid {
+            max-width: 1200px;
+        }
+        .header-content {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 0;
+        }
+        .tagline {
+            margin-left: 20px;
+        }
+        .nav-menu {
+            margin-left: 100px;
+        }
+        #section1 {
+            padding-top: 80px;
+        }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <header class="bg-light border-bottom fixed-top">
+        <div class="container-fluid">
+            <div class="header-content">
+                <div class="d-flex align-items-center">
+                    <img src="assets/img/logo.png" alt="Adaptations 3D Logo" height="50">
+                    <span id="tagline" class="fs-5 tagline" data-i18n="tagline"></span>
+                    <nav class="nav-menu">
+                        <ul class="nav">
+                            <li class="nav-item"><a class="nav-link" href="" id="home-link"></a></li>
+                            <li class="nav-item"><a class="nav-link" href="#" id="about-link"></a></li>
+                        </ul>
+                    </nav>
+                </div>
+                <div>
+                    <button class="btn btn-outline-secondary btn-sm" onclick="toggleLanguage()" id="lang-button" data-i18n="languageSwitch"></button>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="container" style="margin-top: 80px;">
+        <section id="section-product" class="my-5">
+            <h2 data-i18n="sections.product.summary"></h2>
+            <p data-i18n="sections.product.content"></p>
+        </section>
+
+        <section id="section-contact" class="my-5">
+            <h2 data-i18n="sections.contact.summary"></h2>
+            <p data-i18n="sections.contact.content"></p>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-light text-center py-3">
+        <p id="footer-text" data-i18n="copyright"></p>
+    </footer>
+
+    <!-- Script to toggle languages -->
+    <script>
+        function updateContent(language) {
+            // const tagline = document.getElementById('tagline');
+            // const homeLink = document.getElementById('home-link');
+            // const aboutLink = document.getElementById('about-link');
+            // const productSection = document.getElementById('section-product');
+            // const contactSection = document.getElementById('section-contact');
+            // const contactLink1 = document.getElementById('contact-link1');
+            // const contactLink2 = document.getElementById('contact-link2');
+            // const footerText = document.getElementById('footer-text');
+            // const langButton = document.getElementById('lang-button');
+
+            if (language === 'fr') {
+                console.log("Updating language to french")
+                // langButton.innerText = 'EN';
+                // tagline.innerText = 'Aider les gens avec l\'impression 3D';
+                // homeLink.innerText = 'Accueil';
+                // aboutLink.innerText = 'À propos';
+                // productSection.querySelector('h2').innerText = 'Développement en cours d\'une adaptation de kayak';
+                // productSection.querySelector('p').innerHTML = 'Intéressé à en savoir plus ? <a href="mailto:info@adaptations3d.ca" id="contact-link1">Entrons en contact</a>.';
+                // contactSection.querySelector('h2').innerText = 'Vous avez un autre projet en tête qui nécessite de l\'impression 3D ?';
+                // contactSection.querySelector('p').innerHTML = 'Que ce soit un pièce à créer sur mesure ou simplement un modèle de pot de fleurs que vous avez déjà et que vous voulez imprimer, <a href="mailto:info@adaptations3d.ca" id="contact-link2">discutons</a>.';
+                // footerText.innerText = 'Copyright 2024 (c) 2024, Adaptations 3D, tous droits réservés';
+                window.location.href = '/'
+            } else {
+                console.log('Updating language to english')
+                // langButton.innerText = 'FR';
+                // tagline.innerText = 'Helping people with 3D printing';
+                // homeLink.innerText = 'Home';
+                // aboutLink.innerText = 'About';
+                // productSection.querySelector('h2').innerText = 'Ongoing development of a kayak adaptation';
+                // productSection.querySelector('p').innerHTML = 'Interested to know more about it? <a href="mailto:info@adaptations3d.ca" id="contact-link1">Let me know</a>.';
+                // contactSection.querySelector('h2').innerText = 'Have another project in mind that requires 3D printing?';
+                // contactSection.querySelector('p').innerHTML = 'Be it a custom designed piece or simply a planter model you already have and want printed, <a href="mailto:info@adaptations3d.ca" id="contact-link2">let\'s talk</a>.';
+                // footerText.innerText = 'Copyright (c) 2024, Adaptations 3D, all rights reserved';
+                window.location.href = "en"
+            }
+        }
+
+        function toggleLanguage() {
+            const languageSwitch = document.querySelector('button').innerText.toLowerCase();
+            localStorage.setItem('language', languageSwitch);
+            updateContent(languageSwitch);
+        }
+
+        function initializeLanguage() {
+            let desiredLanguage = localStorage.getItem('language');
+            if (!desiredLanguage) {
+                console.log("Initializing language from browser")
+                const userLocale = navigator.language || navigator.userLanguage;
+                desiredLanguage = userLocale.startsWith('fr') ? 'fr' : 'en';
+            }
+
+            console.log("Desired language is", desiredLanguage)
+            const languageSwitch = document.querySelector('button').innerText.toLowerCase();
+            console.log("Language switch is", languageSwitch)
+
+            // if the desired language is the same as the current page language, do nothing
+            // if it is the same as the language switch, then switch
+            if (desiredLanguage === languageSwitch) {
+                updateContent(desiredLanguage);
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', initializeLanguage);
+    </script>
+</body>
+</html>
diff --git a/templates/locales/en.json b/templates/locales/en.json
@@ -0,0 +1,15 @@
+{
+    "languageSwitch": "FR",
+    "tagline": "Helping people with 3D printing",
+    "sections": {
+        "product": {
+            "summary": "Ongoing development of a kayak adaptation",
+            "content": "Interested to know more about it ? <a href=\"mailto:info@adaptations3d.ca\">Let me know</a>"
+        },
+        "contact": {
+            "summary": "Have another project in mind that requires 3D printing?",
+            "content": "Be it a custom designed piece or simply a planter model you found and want printed, <a href=\"mailto:info@adaptations3d.ca\">let's talk</a>"
+        }
+    },
+    "copyright": "Copyright (c) 2024, Adaptations 3D, all rights reserved"
+}
diff --git a/templates/locales/fr.json b/templates/locales/fr.json
@@ -0,0 +1,15 @@
+{
+    "languageSwitch": "EN",
+    "tagline": "Aider les gens avec l'impression 3D",
+    "sections": {
+        "product": {
+            "summary": "Développement en cours d'une adaptation de kayak",
+            "content": "Intéressé à en savoir plus ? <a href=\"mailto:info@adaptations3d.ca\">Entrons en contact</a>"
+        },
+        "contact": {
+            "summary": "Vous avez un autre projet en tête qui nécessite de l'impression 3D ?",
+            "content": "Que ce soit une pièce à créer sur mesure ou simplement un modèle de pot de fleurs que vous avez trouvé et que vous voulez imprimer, <a href=\"mailto:info@adaptations3d.ca\">discutons</a>"
+        }
+    },
+    "copyright": "Copyright (c) 2024, Adaptations 3D, tous droits réservés"
+}