Add simple Elm code example page to Software section.

src/App.js

@@ -41,6 +41,7 @@ import JapaneseMain from './Pages/Japan/JapaneseMain';
 import EquipmentPage from './Pages/Radio/equipmentPage';
 
 import { languages, getLanguage } from './Language/Language';
+import { elmRoutes } from './Routers';
 
 function App() {
   const language = getLanguage();
@@ -101,6 +102,7 @@ function App() {
           <Route exact path='/en' element={<Home language={language} />}></Route>
           <Route exact path='/nl' element={<Home language={language} />}></Route>
 
+          {elmRoutes}
           {fieldDaysRoutes}
           {equipmentRoutes}
           {generatedRoutes}

src/Language/LanguageStrings.js

@@ -24,8 +24,12 @@ const languageStrings = {
         language: 'Language',
         // Radio
         equipment: 'Equipment',
+        components: 'components',
         fielddays: 'Field days',
         nvisAntenna: 'NVIS Antenna',
+        // Software
+        code_pages: 'Code sections',
+        code_pages_intro: 'Some notes and examples of code.',
         // Footer
         footer_contentparsed: 'Content is parsed by',
         footer_madewith: 'This site was made with',
@@ -53,8 +57,12 @@ const languageStrings = {
         language: 'Taal',
         // Radio
         equipment: 'Apparatuur',
+        components: 'componenten',
         fielddays: 'Velddagen',
         nvisAntenna: 'NVIS Antenne',
+        // Software
+        code_pages: 'Code secties',
+        code_pages_intro: 'Notities en voorbeelden van code.',
         // Footer
         footer_contentparsed: 'Inhoud is verwerkt door',
         footer_madewith: 'Deze website is gemaakt met',

src/Pages/Software/SoftwareMain.js

@@ -13,6 +13,10 @@ const SoftwareMain = () => {
             <h1 id="list-intro" className="text-primary">{getString('software')} <Emoji symbol="🖥️" /></h1>
             <MarkdownPage md={'Software/' + language + '/main.md'} />
             <hr />
+            <h2>{getString('code_pages')}</h2>
+            <p>{getString('code_pages_intro')}</p>
+            <a href={'/' + language + '/software/elm/'}>Elm</a>
+            <hr />
 
             <h2>{getString('education')}</h2>
             {educationData.education.map((edu, index) => (

src/Pages/Software/elm/ElmPage.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Breadcrumbs from '../../../UI/Breadcrumbs'
+import MarkdownPage from '../../markdownPage'
+
+const ElmPage = ({ mdPath }) => {
+    return (
+        <article className='main-page'>
+            <Breadcrumbs separator=' > ' path="software/elm">
+                {['software', 'elm']}
+            </Breadcrumbs>
+            <MarkdownPage md={mdPath} />
+        </article>
+    )
+}
+
+export default ElmPage;

src/Pages/Software/elm/en/formatting.md

@@ -0,0 +1,28 @@
+## Formatting
+
+You can add a docstring to an elm function like this:
+
+```elm
+
+
+{- Render the Elm icon. -}
+
+
+elmIcon : E.Element msg
+elmIcon =
+
+```
+
+But upon formatting, 2 new lines are automatically added.
+
+By adding a "|" pipe character, the docstring will get appended to the top op the function header.
+
+```elm
+
+
+{-| Render the Elm icon.
+-}
+elmIcon : E.Element msg
+elmIcon =
+
+```

src/Pages/Software/elm/en/main.md

@@ -0,0 +1,3 @@
+### Elm
+
+* [Formatting](./formatting)

src/Pages/Software/elm/nl/formatting.md

@@ -0,0 +1,29 @@
+## Formatting
+
+Je kunt op deze manier een docstring toevoegen aan een elm functie:
+
+```elm
+
+
+{- Render the Elm icon. -}
+
+
+elmIcon : E.Element msg
+elmIcon =
+
+```
+
+Maar bij het herstructureren van code, worden automatisch 2 lijnen toegevoegd.
+
+Door een pipe character "|" toe te voegen, wordt de docstring wel vastgemaakt aan de functie-header.
+
+
+```elm
+
+
+{-| Render the Elm icon.
+-}
+elmIcon : E.Element msg
+elmIcon =
+
+```

src/Pages/Software/elm/nl/main.md

@@ -0,0 +1,3 @@
+### Elm
+
+* [Formatting](./formatting)

src/Routers.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { languages } from './Language/Language';
+import ElmPage from './Pages/Software/elm/ElmPage';
+
+export const elmRoutes = languages.map(lang => {
+    // Main page.
+    const main = <Route key={`${lang}-elm-main`} exact path={`/${lang}/software/elm/`} element={<ElmPage mdPath={`Software/elm/${lang}/main.md`} />} />
+
+    // Pages within Elm.
+    const md = ['formatting'];
+    const entries = md.map(entry => {
+        const path = `/${lang}/software/elm/${entry}`;
+        const mdPath = `Software/elm/${lang}/${entry}.md`;
+        return <Route key={`${lang}-${entry}`} exact path={path} element={<ElmPage mdPath={mdPath} />} />;
+    });
+
+    return [main, ...entries];
+}).flat();
+

src/UI/Breadcrumbs.js

@@ -8,7 +8,7 @@ const Breadcrumbs = ({ separator, path, children }) => {
     const items = React.Children.toArray(children);
 
     const generatePath = (index) => {
-        return '/' + language + '/' + path.split('/').slice(0, index + 1).join('/');
+        return '/' + language + '/' + path.split('/').slice(0, index + 1).join('/') + '/';
     };
 
     if (items.length !== path.split('/').length) {

src/michelaben/src/Main.elm

@@ -130,6 +130,8 @@ update _ model =
     model
 
 
+{-| Render the Elm icon.
+-}
 elmIcon : E.Element msg
 elmIcon =
     let