[I18n] Add Localization (L18n)

.eslintignore

@@ -0,0 +1,3 @@
+assets/js/index.js
+assets/js/jquery.min.js
+assets/js/bpd.js

.gitignore

@@ -2,3 +2,4 @@ npm-debug.log
 _site
 venv
 .venv
+.jekyll-metadata

.prettierignore

@@ -0,0 +1,5 @@
+assets/js/jquery.min.js
+assets/js/index.js
+_layouts/default.html
+_layouts/index.html
+_includes/header.html

.prettierrc

@@ -0,0 +1 @@
+printWidth: 250

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "redhat.vscode-yaml",
+    "github.vscode-github-actions"
+    // "deque-systems.vscode-axe-linter"
+  ]
+}

_articles/es/index.html

@@ -0,0 +1,6 @@
+---
+layout: index
+title: Comunidad de desarrolladores de Black Python.
+lang: es
+permalink: /es/
+---

_config.yml

@@ -18,16 +18,16 @@ navigation:
     url: /
     fa: fa fa-home fa-fw
   - text: About Us
-    url: /about.html
+    url: /about/
     fa: fa fa-info-circle fa-fw
   - text: Events
-    url: /events.html
+    url: /events/
     fa: fa fa-calendar fa-fw
   - text: Conferences
-    url: /conferences.html
+    url: /conferences/
     fa: fa fa-microphone fa-fw
   - text: Community
-    url: /community.html
+    url: /community/
     fa: fa fa-users fa-fw
 
 # Build settings
@@ -38,8 +38,14 @@ plugins:
   - github-pages
   - jemoji
   - jekyll-feed
+  # - jekyll-seo-tag
+  # - jekyll-sitemap
 
 exclude:
+  - bin
+  - CNAME
+  - CODE_OF_CONDUCT.md
+  - CONTRIBUTING.md
   - README.md
   - Gemfile*
   - node_modules
@@ -55,3 +61,21 @@ exclude:
   - venv
   - .venv
 # timezone: America/Toronto
+
+permalink: "/:path/"
+
+collections:
+  articles:
+    output: true
+    permalink: "/:path/"
+
+defaults:
+  # - scope:
+  #     path: ""
+  #   values:
+  #     image: /assets/images/cards/default.png
+  - scope:
+      path: ""
+      type: articles
+    values:
+      layout: article

_data/fields.yml

@@ -0,0 +1,34 @@
+# Each piece of content has YAML front matter with these properties:
+
+lang:
+  type: String
+
+layout:
+  type: String
+
+title:
+  type: String
+  required: true
+
+contents:
+  type: Array
+
+description:
+  type: String
+
+class:
+  type: String
+
+order:
+  type: Integer
+
+image: {}
+
+related:
+  type: Array
+
+untranslated:
+  type: TrueClass
+
+redirect_from:
+  type: String

_data/locales/en.yml

@@ -0,0 +1,22 @@
+en:
+  locale_name: English
+  nav:
+    - Home
+    - About Us
+    - Events
+    - Conferences
+    - Community
+  index:
+    lead: Welcome to Black Python Developers Community.
+  article:
+    table_of_contents: Table of Contents
+  footer:
+    contribute:
+      heading: Contribute
+      description: Want to make a suggestion? This content is open source. Help us improve it.
+      button: Contribute
+    subscribe:
+      heading: Stay in touch
+      description: Be the first to hear about BPDevs's latest open source tips and resources.
+      label: Email Address
+      button: Subscribe

_data/locales/es.yml

@@ -0,0 +1,22 @@
+es:
+  locale_name: Español
+  nav:
+    - Inicio
+    - Acerca de
+    - Eventos
+    - Conferencias
+    - Comunidad
+  index:
+    lead: Bienvenidos a la Comunidad de desarrolladores de Black Python.
+  article:
+    table_of_contents: Tabla de contenidos
+  footer:
+    contribute:
+      heading: Contribuir
+      description: ¿Tienes alguna sugerencia? Este contenido es de código abierto. Ayúdanos a mejorarlo.
+      button: Contribuir
+    subscribe:
+      heading: Suscribirse para novedades
+      description: Sea el primero en enterarse de los últimos consejos y recursos de código abierto.
+      label: Dirección de correo
+      button: Suscribirse

_includes/footer.html

@@ -1,3 +1,3 @@
-<footer>
+<footer role="contentinfo">
   <small>&copy; {{ 'now' | date: "%Y" }} {{ site.title }}</small>
 </footer>

_includes/header.html

@@ -1,16 +1,37 @@
-<header class="site-header">
-  <h1 class="site-title"><a class="logo-text" href="/">BPDev</a></h1>
+{% assign t = site.data.locales[page.lang][page.lang] %}
+<header class="site-header" role="banner">
+  <h1 class="site-title"><a class="logo-text" href="/index.html">BPDev</a></h1>
   <nav class="site-navigation">
     <div class="site-navigation-wrap">
-      <ul class="menu">
-        {% for item in site.navigation %} {% assign current = nil %} {% if
-        page.url == item.url %} {% assign current = 'nav-current' %} {% endif %}
-        <li class="menu-item {{ current }}">
-          <a class="{{ current }}" href="{{ item.url }}"
-            ><i class="{{ item.fa }}"></i>&nbsp;{{ item.text }}</a
-          >
+      <ul class="menu" role="menu">
+        {% for item in site.navigation %}
+        {% assign current = nil %}
+        {% if page.url == item.url %}
+        {% assign current = 'nav-current' %}
+        {% endif %}
+        <li class="menu-item {{ current }}" role="menuitem">
+          <a class="{{ current }}" href="{{ item.url }}"> <i class="{{ item.fa }}" aria-hidden="true"></i>&nbsp;{{ t.nav[forloop.index0] }} </a>
         </li>
         {% endfor %}
+        {% if page.lang and site.data.locales.size > 1 %}
+        <li class="menu-item" role="menuitem">
+          <div class="">
+            <i class="fa fa-language" aria-hidden="true"></i>
+            <select id="language" class="form-select" aria-label="Language">
+              {% assign locales = site.data.locales | sort %}
+              {% for locale in locales %}
+              {% assign lang = locale[0] %}
+              {% assign locale_name = locale[1][lang].locale_name %}
+              {% if page.lang == lang %}
+              <option value="{{ lang }}" selected="selected">{{ locale_name }}</option>
+              {% else %}
+              <option value="{{ lang }}">{{ locale_name }}</option>
+              {% endif %}
+              {% endfor %}
+            </select>
+          </div>
+        </li>
+        {% endif %}
       </ul>
       <!-- .menu -->
       <button id="menu-close" class="menu-toggle">

_layouts/article.html

@@ -0,0 +1,9 @@
+---
+layout: default
+---
+
+{% assign t = site.data.locales[page.lang][page.lang] %}
+
+<article class="">
+  <div class="">{{ content }}</div>
+</article>

_layouts/default.html

@@ -1,45 +1,36 @@
 <!doctype html>
-<html lang="en">
+<html lang="{{ page.lang }}">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}"
-    />
-    <title>
-      {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}
-    </title>
-    <link
-      rel="stylesheet"
-      href="{{ '/assets/css/style.css' | relative_url }}"
-    />
+    <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}" />
+    <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+    <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}" />
     <link rel="stylesheet" href="{{ '/assets/css/bpd.css' | relative_url }}" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      rel="canonical"
-      href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}"
-    />
-    <link
-      rel="alternate"
-      type="application/rss+xml"
-      title="{{ site.title }}"
-      href="{{ '/feed.xml' | prepend: site.baseurl | prepend: site.url }}"
-    />
-    <link
-      rel="shortcut icon"
-      href="https://github.com/BlackPythonDevs.png"
-      type="image/png"
-    />
+    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" />
+    <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ '/feed.xml' | prepend: site.baseurl | prepend: site.url }}" />
+    <link rel="icon" href="https://github.com/BlackPythonDevs.png" type="image/png" />
+    {% if page.lang and page.untranslated != true and site.data.locales.size > 1 %}
+    {% assign locales = site.data.locales | sort %}
+    {% for locale in locales %}
+    {% assign lang = locale[0] %}
+    {% assign page_lang_slash = page.lang | append: '/' | prepend: '/' %}
+    {% assign default_url = page.url | replace: page_lang_slash, '/' %}
+    {% if lang == "en" %}
+    <link rel="alternate" hreflang="en" href="{{ site.url }}{{ default_url }}" />
+    <link rel="alternate" hreflang="x-default" href="{{ site.url }}{{ default_url }}" />
+    {% else %}
+    <link rel="alternate" hreflang="{{ lang }}" href="{{ site.url }}/{{ lang }}{{ default_url }}" />
+    {% endif %}
+    {% endfor %}
+    {% endif %}
   </head>
 
   <body>
     {% include header.html %}
-    <main>{{ content }}</main>
+    <main role="main">{{ content }}</main>
     {% include footer.html %}
-    <script src="{{ '/assets/js/bpd.js' }}"></script>
+    <script src="{{ '/assets/js/index.js' | relative_url }}"></script>
+    <script src="https://kit.fontawesome.com/1bbe56de49.js" crossorigin="anonymous"></script>
   </body>
 </html>

_layouts/index.html

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+{% assign t = site.data.locales[page.lang][page.lang] %}
+{% if page.title %} {% assign header = page.title %} {% else %} {% assign header = site.title %} {% endif %}
+<h1>{{ t.index.lead }}</h1>

about.md

@@ -1,5 +1,6 @@
 ---
 layout: default
+lang: en
 title: About Us
 ---
 

assets/css/bpd.css

@@ -99,22 +99,24 @@ input::-moz-focus-inner {
 }
 
 .menu-item a {
-  color: #9ba6ad;
+  color: #70777d;
   display: inline-block;
   font-size: 0.88889rem;
   font-weight: 700;
   padding: 5px 0;
   text-decoration: none;
 }
 
-.menu-item a:hover {
-  color: #2d72d9;
-}
-
 .menu-toggle {
   display: none;
 }
 
+.menu-item a:hover,
+.menu-item.nav-current a:link,
+.menu-item.nav-current a:visited {
+  color: #2d72d9;
+}
+
 .icon-menu {
   background: currentColor;
   color: inherit;
@@ -217,36 +219,6 @@ input::-moz-focus-inner {
   margin-left: auto;
 }
 
-.menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.menu-item {
-  display: inline-block;
-  margin: 0 0 0 15px;
-}
-
-.menu-item a {
-  color: #9ba6ad;
-  display: inline-block;
-  font-size: 0.88889rem;
-  font-weight: 700;
-  padding: 5px 0;
-  text-decoration: none;
-}
-
-.menu-item a:hover,
-.menu-item.nav-current a:link,
-.menu-item.nav-current a:visited {
-  color: #2d72d9;
-}
-
-.menu-toggle {
-  display: none;
-}
-
 @media only screen and (max-width: 800px) {
   #menu-open {
     display: block;
@@ -301,7 +273,8 @@ input::-moz-focus-inner {
     border: 0;
   }
 
-  .menu-item a {
+  .menu-item a,
+  .menu-item div {
     display: block;
     padding: 0.5rem 0;
   }