Merge pull request #63 from oleksis/oleksis/issue29

Update footer, add social links layout
BlackPythonDevs · Oct 14, 2023 · 4232170 · 4232170
2 parents 1ddbfa7 + 6f31e54
commit 4232170
Show file tree

Hide file tree

Showing 28 changed files with 145 additions and 5 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -3,3 +3,6 @@ assets/js/index.js
 _layouts/default.html
 _layouts/index.html
 _includes/header.html
+_includes/social.html
+_includes/social-item.html
+_includes/svg_symbol.html
diff --git a/_config.yml b/_config.yml
@@ -30,6 +30,32 @@ navigation:
     url: /community/
     fa: fa fa-users fa-fw
 
+bpdevs:
+  # Minima date format.
+  # Refer to https://shopify.github.io/liquid/filters/date/ if you want to customize this.
+  #
+  # date_format: "%b %-d, %Y"
+
+  # Generate social links in footer.
+  #
+  #social_links:
+  #   - { platform: devto,          user_url: "https://dev.to/jekyll" }
+  #   - { platform: dribbble,       user_url: "https://dribbble.com/jekyll" }
+  #   - { platform: facebook,       user_url: "https://www.facebook.com/jekyll" }
+  #   - { platform: flickr,         user_url: "https://www.flickr.com/photos/jekyll" }
+  #  - { platform: github,         user_url: "https://github.com/BlackPythonDevs/blackpythondevs.github.io" }
+  #   - { platform: google_scholar, user_url: "https://scholar.google.com/citations?user=qc6CJjYAAAAJ" }
+  #   - { platform: instagram,      user_url: "https://www.instagram.com/jekyll" }
+  #   - { platform: keybase,        user_url: "https://keybase.io/jekyll" }
+  #   - { platform: linkedin,       user_url: "https://www.linkedin.com/in/jekyll" }
+  #   - { platform: microdotblog,   user_url: "https://micro.blog/jekyll" }
+  #   - { platform: pinterest,      user_url: "https://www.pinterest.com/jekyll" }
+  #   - { platform: stackoverflow,  user_url: "https://stackoverflow.com/users/1234567/jekyll" }
+  #   - { platform: telegram,       user_url: "https://t.me/jekyll" }
+  #   - { platform: twitter,        user_url: "https://twitter.com/jekyllrb" }
+  #  - { platform: x,              user_url: "https://x.com/blackpythondevs" }
+  #   - { platform: youtube,        user_url: "https://www.youtube.com/jekyll" }
+
 # Build settings
 markdown: kramdown
 highlighter: rouge

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,3 +1,10 @@
 <footer role="contentinfo">
-  <small>&copy; {{ 'now' | date: "%Y" }} {{ site.title }}</small>
+  <div class="wrapper">
+    <div class="footer-col-wrapper">
+      <div class="footer-col">
+        <small>&copy; {{ 'now' | date: "%Y" }} {{ site.title }}</small>
+      </div>
+    </div>
+    <div class="social-links">{%- include social.html -%}</div>
+  </div>
 </footer>
diff --git a/_includes/social-icons/devto.svg b/_includes/social-icons/devto.svg
diff --git a/_includes/social-icons/dribbble.svg b/_includes/social-icons/dribbble.svg
diff --git a/_includes/social-icons/facebook.svg b/_includes/social-icons/facebook.svg
diff --git a/_includes/social-icons/flickr.svg b/_includes/social-icons/flickr.svg
diff --git a/_includes/social-icons/github.svg b/_includes/social-icons/github.svg
diff --git a/_includes/social-icons/gitlab.svg b/_includes/social-icons/gitlab.svg
diff --git a/_includes/social-icons/google_scholar.svg b/_includes/social-icons/google_scholar.svg
diff --git a/_includes/social-icons/instagram.svg b/_includes/social-icons/instagram.svg
diff --git a/_includes/social-icons/keybase.svg b/_includes/social-icons/keybase.svg
diff --git a/_includes/social-icons/linkedin.svg b/_includes/social-icons/linkedin.svg
diff --git a/_includes/social-icons/mastodon.svg b/_includes/social-icons/mastodon.svg
diff --git a/_includes/social-icons/microdotblog.svg b/_includes/social-icons/microdotblog.svg
diff --git a/_includes/social-icons/pinterest.svg b/_includes/social-icons/pinterest.svg
diff --git a/_includes/social-icons/rss.svg b/_includes/social-icons/rss.svg
diff --git a/_includes/social-icons/stackoverflow.svg b/_includes/social-icons/stackoverflow.svg
diff --git a/_includes/social-icons/telegram.svg b/_includes/social-icons/telegram.svg
diff --git a/_includes/social-icons/twitter.svg b/_includes/social-icons/twitter.svg
diff --git a/_includes/social-icons/x.svg b/_includes/social-icons/x.svg
diff --git a/_includes/social-icons/youtube.svg b/_includes/social-icons/youtube.svg
diff --git a/_includes/social-item.html b/_includes/social-item.html
@@ -0,0 +1,7 @@
+<li>{% assign entry = include.item %}
+  <a {% unless entry.platform == 'rss' %}rel="me" {% endunless %}href="{{ entry.user_url }}" target="_blank" title="{{ entry.title | default: entry.platform }}">
+    <svg class="svg-icon grey">
+      <use xlink:href="{{ '/assets/minima-social-icons.svg#' | append: entry.platform | relative_url }}"></use>
+    </svg>
+  </a>
+</li>
diff --git a/_includes/social.html b/_includes/social.html
@@ -0,0 +1,5 @@
+<ul class="social-media-list">
+{%- for entry in site.bpdevs.social_links -%}
+  {%- include social-item.html item = entry -%}
+{%- endfor -%}
+</ul>
diff --git a/_includes/svg_symbol.html b/_includes/svg_symbol.html
@@ -0,0 +1,3 @@
+<symbol id="{{ include.key }}" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" viewBox="0 0 16 16">
+  {%- include social-icons/{{ include.key }}.svg -%}
+</symbol>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ page.lang }}">
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -27,9 +27,13 @@
   </head>
 
   <body>
-    {% include header.html %}
-    <main role="main">{{ content }}</main>
-    {% include footer.html %}
+    {%- include header.html -%}
+    <main role="main"  class="page-content" aria-label="Content">
+      <div class="wrapper">
+        {{ content }}
+      </div>
+    </main>
+    {%- include footer.html -%}
     <script src="{{ '/assets/js/index.js' | relative_url }}"></script>
     <script src="https://kit.fontawesome.com/1bbe56de49.js" crossorigin="anonymous"></script>
   </body>

diff --git a/assets/css/bpd.css b/assets/css/bpd.css
@@ -319,3 +319,46 @@ footer {
   display: flex;
   margin-top: 2.5em;
 }
+
+.social-media-list {
+  list-style: none;
+  margin-left: 0;
+}
+
+.footer-col-wrapper,
+.social-links {
+  font-size: 0.9375rem;
+  color: var(--minima-brand-color);
+}
+
+.social-media-list {
+  display: table;
+  margin: 0 auto;
+}
+
+.social-media-list li {
+  float: left;
+  margin: 5px 10px 5px 0;
+}
+
+.social-media-list li:last-of-type {
+  margin-right: 0;
+}
+
+.social-media-list li a {
+  display: block;
+  padding: 10px 12px;
+  border: 1px solid var(--minima-border-color-01);
+}
+
+.social-media-list li a:hover {
+  border-color: var(--minima-border-color-02);
+}
+
+.svg-icon {
+  width: 1.25em;
+  height: 1.25em;
+  display: inline-block;
+  fill: currentColor;
+  vertical-align: text-bottom;
+}
diff --git a/assets/minima-social-icons.liquid b/assets/minima-social-icons.liquid
@@ -0,0 +1,18 @@
+---
+permalink: /assets/minima-social-icons.svg
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+{% comment %}
+  Iterate through {{ site.bpdevs.social_links }} and render platform related SVG-symbol
+  unless the platform is "rss" because we need the "rss" symbol for the `Subscribe` link
+  in the footer and therefore inject the "rss" icon outside the iteration loop.
+{% endcomment %}
+{% for entry in site.bpdevs.social_links %}
+  {%- assign symbol_id = entry.platform -%}
+  {%- unless symbol_id == "rss" -%}
+    {%- include svg_symbol.html key = symbol_id -%}
+  {% endunless %}
+{%- endfor -%}
+  {%- include svg_symbol.html key = "rss" -%}
+</svg>