Make layout/theme more generic

sfztools · Dec 18, 2023 · 6b5099a · 6b5099a
1 parent 8fa92e1
commit 6b5099a
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 77 deletions.
diff --git a/layout/partials/footer.j2 b/layout/partials/footer.j2
@@ -1,7 +1,7 @@
 			<hr>
 			<footer>
 				<p style="text-align:left">
-					Copyright &copy; 2019-{{ build_date_utc.strftime('%Y') }}
+					Copyright &copy; {{ config.extra.site_since }}-{{ build_date_utc.strftime('%Y') }}
 					{{ config.site_author }}
 					<span style="float:right">
 					{%- if page.meta.layout == "doxygen" %}

diff --git a/layout/partials/head.j2 b/layout/partials/head.j2
@@ -7,32 +7,32 @@
 		{{ config.site_name }}
 		</title>
 
-		{% if config.site_author %}
+		{#- Meta #}
+		{%-if config.site_author %}
 		<meta name="author" content="{{ config.site_author }}">
-		{% endif %}
+		{%-endif %}
 		{%-if config.extra.site_web_author %}
 		<meta name="web-author" content="{{ config.extra.site_web_author }}">
 		{%-endif %}
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+		{#- Lib scripts #}
 		<script src="{{ 'assets/js/color-modes.js'|url }}"></script>
 
-		<!-- Atom Feeds -->
-		<link href="{{ 'atom.xml'|url }}" rel="alternate" title="News"type="application/atom+xml" />
+		{#- Atom Feeds #}
+		<link href="{{ 'atom.xml'|url }}" rel="alternate" title="News" type="application/atom+xml" />
 
 		{% include "partials/favicons.j2" %}
-		<!-- Stylesheets -->
+
+		{#- Stylesheets #}
 		<link href="{{ 'assets/css/style.min.css'|url }}" rel="stylesheet" media="screen">
-		<link href="{{ 'assets/css/bootstrap-table.min.css'|url }}" rel="stylesheet">
-		<link href="{{ 'assets/css/fork-awesome.min.css'|url }}" rel="stylesheet" media="screen">
-{#-	<link href="{{ 'assets/css/fontawesome.min.css'|url }}" rel="stylesheet" media="screen"> #}
-
-		{%-for style in page.meta.styles-%}
-		{%- set href = 'assets/css/' + style + '.css' %}
-		<link href="{{ href|url }}" rel="stylesheet">
-		{% endfor %}
-		{%-include "partials/custom-styles.html" %}
-{#-
-		<!-- Font Awesome Icons -->
-		<script src="{{ 'assets/js/fontawesome.min.js'|url }}"></script>
--#}
+
+		{%-for style in extra_css %}
+		<link href="{{ style|url }}" rel="stylesheet">
+		{%-endfor %}
+
+		{%-for style in page.meta.styles %}
+		<link href="{{ 'assets/css/' + style + '.css'|url }}" rel="stylesheet">
+		{%-endfor %}
+
+{% include "partials/custom-styles.html" %}
diff --git a/layout/partials/navigation.j2 b/layout/partials/navigation.j2
@@ -17,7 +17,7 @@
 				class="navbar navbar-expand-lg bg-dark text-bg-dark"
 				data-bs-theme="dark"
 			>
-				<div class="container">
+				<div class="container-fluid">
 
 					<button
 						class="navbar-toggler"
@@ -35,19 +35,24 @@
 						class="navbar-brand"
 						href="{{ base_dir|url }}"
 						>
+						{%-if config.extra.show_logo %}
 							<img
+								alt="Logo image"
 								src="{{ 'assets/img/logo-white.svg'|url }}"
-								width="30" height="30" class="d-inline-block align-top" alt=""
-							>
+							/>
+						{%-endif %}
+						{%-if config.extra.show_name %}
 						{{ config.site_name }}
+						{%-endif %}
 					</a>
 
 					<div class="collapse navbar-collapse" id="navbarContent">
-						<ul class="navbar-nav me-auto mt-2 mt-lg-0">
-						{%- set navigation = load_yaml(config.extra.nav) %}
-						{%- for item in navigation %}
-							{%- if item.type == "dropdown" %}
-								{% set item_id = 'navbar' + item.label %}
+						<ul class="navbar-nav mt-2 mt-lg-0">
+							{%-set navigation = load_yaml(config.extra.nav) %}
+							{%-if navigation %}
+								{%-for item in navigation %}
+									{%-if item.type == "dropdown" %}
+										{%-set item_id = 'navbar' + item.label %}
 							<li class="nav-item dropdown">
 								<a
 									class="nav-link dropdown-toggle"
@@ -58,57 +63,58 @@
 									aria-expanded="false"
 									aria-haspopup="true"
 								>
-								{%-if item.icon_type-%}
+									{%-if item.icon_type %}
 									<i
 										class="{{ item.icon_category }} fa-{{ item.icon_type }} fa-fw"
 										aria-hidden="true"></i>&nbsp;
-								{%-endif-%}
+									{%-endif %}
 									{{ item.label }}
 								</a>
 								<ul
 									class="dropdown-menu"
 									aria-labelledby="{{ item_id }}"
 								>
-								{%- for subitem in item.pages %}
-									{%- if not subitem.label %}
+									{%-for subitem in item.pages %}
+										{%-if not subitem.label %}
 									<div class="dropdown-divider"></div>
-									{%- else %}
-										{%- set disabled = "" %}
-										{%- if subitem.disabled %}{%- set disabled = " disabled" %}{%- endif %}
+										{%-else %}
+											{%-set disabled = "" %}
+											{%-if subitem.disabled %}{%-set disabled = " disabled" %}{%-endif %}
 									<li>
 										<a class="dropdown-item{{ disabled }}"
 											href="{{ subitem.url|url }}"
 										>
-										{%-if subitem.icon_type-%}
+											{%-if subitem.icon_type %}
 											<i
 												class="{{ subitem.icon_category }} fa-{{ subitem.icon_type }} fa-fw"
 												aria-hidden="true"
 											></i>&nbsp;
-										{%- endif %}
+											{%-endif %}
 											{{ subitem.label }}
 										</a>
 									</li>
-									{%- endif %}
-								{%- endfor %}
+										{%-endif %}
+									{%-endfor %}
 								</ul>
-							{%- else %}
+								{%-else %} {#-if item.type == "dropdown" #}
 							<li class="nav-item">
 								<a
 									class="nav-link"
 									href="{{ item.url|url }}"
 								>
-									{%- if item.icon_type %}
+										{%-if item.icon_type %}
 									<i class="{{ item.icon_category }} fa-{{ item.icon_type }} fa-fw"
 										aria-hidden="true"></i>&nbsp;
-									{%- endif %}
+										{%-endif %}
 									{{ item.label }}
 								</a>
-							{%- endif %}
+								{%-endif %} {#-if item.type == "dropdown" #}
 							</li>
-						{%- endfor %}
+							{%-endfor %} {#-for item in navigation #}
+						{%-endif %} {#-if navigation #}
 						</ul>
-						<ul class="navbar-nav">
-						{# Global Download ?
+						<ul class="navbar-nav ms-auto">
+							{#-Global Download ?
 							<li class="nav-item">
 								<a class="nav-link"
 									href="{{ 'downloads'|url }}"
@@ -117,9 +123,9 @@
 									Download
 								</a>
 							</li>
-						#}
-						{%- block search_button %}
-							{%- if 'search' in config['plugins'] %}
+							-#}
+							{%-block search_button %}
+							{%-if 'search' in config['plugins'] %}
 							<li class="nav-item">
 									<a
 										href="#"
@@ -129,8 +135,8 @@
 											<i class="fa fa-search"></i> Search
 									</a>
 							</li>
-							{%- endif %}
-						{%- endblock %}
+							{%-endif %}
+							{%-endblock %}
 							<li class="nav-item dropdown">
 								<button
 									class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"

diff --git a/layout/partials/scripts.j2 b/layout/partials/scripts.j2
@@ -2,16 +2,15 @@
 			var base_url	= {{ base_url | tojson }},
 					shortcuts = {{ config.theme.shortcuts | tojson }};
 		</script>
+		{#-JQuery and Popper are required for search and keyboard dialogs #}
 		<script src="{{ 'assets/js/jquery.min.js'|url }}"></script>
 		<script async defer src="{{ 'assets/js/popper.min.js'|url }}"></script>
 		<script async defer src="{{ 'assets/js/bootstrap.min.js'|url }}"></script>
-		<script async defer src="{{ 'assets/js/bootstrap-table.min.js'|url }}"></script>
 		<script async defer src="{{ 'assets/js/anchor.min.js'|url }}"></script>
 		<script async defer src="{{ 'assets/js/base.min.js'|url }}"></script>
-		<script async defer src="{{ 'assets/js/mermaid.min.js'|url }}"></script>
 		<script async defer src="{{ 'assets/js/scroll-to-top.min.js'|url }}"></script>
 		{%- for path in extra_javascript %}
-		<script async defer src="{{ path }}"></script>
+		<script async defer src="{{ path|url }}"></script>
 		{%- endfor %}
 		{%- for script in page.meta.scripts %}
 		<script async defer src="{{ ['assets/js/', script, '.js']|join|url }}"></script>

diff --git a/layout/partials/search-modal.html b/layout/partials/search-modal.html
@@ -1,14 +1,14 @@
 <!-- Search Dialog -->
 <div
-	class="modal"
+	class="modal fade"
 	id="mkdocs_search_modal"
 	tabindex="-1"
 	role="dialog"
 	aria-labelledby="searchModalLabel"
 	aria-hidden="true"
 >
 	<div class="modal-dialog modal-dialog-centered">
-		<div class="modal-content">
+		<div class="modal-content bg-body">
 			<div class="modal-header">
 				<h4 class="modal-title"
 						id="searchModalLabel">Search</h4>
@@ -41,4 +41,4 @@
 			<div class="modal-footer"></div>
 		</div>
 	</div>
-</div>
+</div>
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -2,34 +2,42 @@ docs_dir:         "docs"
 site_name:        "SFZTools"
 site_author:      "SFZTools Organization"
 site_url:         "https://sfz.tools"
-site_dir:         "_site"
 site_description: "SFZTools website"
+site_dir:         "_site"
 repo_name:        "GitHub"
 repo_url:         "https://github.com/sfztools/sfztools.github.io"
 edit_uri:         "edit/master/docs/"
 remote_branch:    "www"
 extra:
-  site_since:           "2019"
+  site_since:           2019
   site_web_author:      "SFZTools Organization"
+  show_logo:            true
+  show_name:            true
   repo_owner_url:       "https://github.com/sfztools"
   repo_branch:          "master"
   cards:                "data/layout/cards.yml"
   nav:                  "data/layout/navigation.yml"
   api:                  "data/sfizz/api/sfizz_message.h.json"
   sfizz_support_layout: "data/sfizz/support.yml"
   sfz_syntax_layout:    "data/sfz/syntax.yml"
+extra_css:
+- "assets/css/fork-awesome.min.css"
+- "assets/css/bootstrap-table.min.css"
+extra_javascript:
+- "assets/js/bootstrap-table.min.js"
+- "assets/js/mermaid.min.js"
 hooks:
-- scripts/hooks.py
-#- scripts/sfz.py
+- "scripts/hooks.py"
+#- "scripts/sfz.py"
 markdown_extensions:
 - pymdownx.emoji:
     emoji_generator: !!python/name:pymdownx.emoji.to_png
-    alt: short
+    alt: "short"
     options:
       attributes:
-        align: absmiddle
-        height: 20px
-        width: 20px
+        align:  "absmiddle"
+        height: "20px"
+        width:  "20px"
 plugins:
   search: {}
 # FIXME: conflicts with # prefixed HTML unicode characters, see
@@ -40,8 +48,8 @@ plugins:
 #     target_url: "https://github.com/sfztools/sfizz/issues/<num>"
   blogging:
     dirs:
-    - news/posts
-    locale: en
+    - "news/posts"
+    locale: "en"
     full_content: true
     paging: true
     show_total: false
@@ -64,15 +72,12 @@ plugins:
     - sfizz_h:              "data/sfizz/api/sfizz.h.json"
     - sfizz_message_h:      "data/sfizz/api/sfizz_message.h.json"
     - sfizz_release:        "data/sfizz/release.yml"
-# TODO: data for both documentation and layout/theme?
+    # TODO: data for both documentation and layout/theme?
     - sfizz_support_macros: "data/sfizz/support.yml"
     - sfz_syntax_macros:    "data/sfz/syntax.yml"
     include_dir:            "macros/includes"
   # module_name:            "macros/module"
     verbose: true
-# mermaid2: {} # Flowcharts (engine description)
-#extra_javascript:
-#- https://unpkg.com/mermaid@8.6.4/dist/mermaid.min.js
 theme:
   name:        null
   custom_dir: "layout"
@@ -92,7 +97,7 @@ theme:
     previous:  80 # p
     search:    83 # s
 watch:
-- data
-- docs
-- macros/includes
-- layout
+- "data"
+- "docs"
+- "macros/includes"
+- "layout"
diff --git a/new_post.sh b/new_post.sh
@@ -1,5 +1,4 @@
 #!/bin/bash
-
 set -e
 
 if [ ! $2 ]; then
@@ -12,7 +11,6 @@ title="${1}"
 author="${2}"
 date=$(date +%Y-%m-%d)
 datetime=$(date +%Y-%m-%dT%T%z)
-
 # Only numbers, letters and hyphen allowed in a lowercase filename
 name=`echo ${title,,} | sed 's/ /-/g'`
 name=`echo ${name} | sed 's/[^0-9a-z\-\.-]*//g'`

diff --git a/scripts/hooks.py b/scripts/hooks.py
@@ -1,13 +1,21 @@
-import json, yaml
+import json, os, yaml
+
+def path_exists(path):
+  return os.path.exists(path)
 
 def load_json(path):
+  if not os.path.exists(path):
+    return None
   with open(path) as file:
     return json.load(file)
 
 def load_yaml(path):
+  if not os.path.exists(path):
+    return None
   with open(path) as file:
     return yaml.load(file, Loader=yaml.FullLoader)
 
 def on_env(env, **kwargs):
   env.globals["load_json"] = load_json
   env.globals["load_yaml"] = load_yaml
+  env.globals["path_exists"] = path_exists