Adicionando alterador de fonte para poder configurar o OpenDyslexic

mkdocs.yml

@@ -7,6 +7,7 @@ edit_uri: tree/main/aulas
 
 theme:
   name: material
+  custom_dir: overrides
   logo: assets/logo.svg
   favicon: assets/logo.svg
   language: pt-BR
@@ -80,6 +81,19 @@ plugins:
   - exclude-unused-files
   - mkdocs_quiz
 
+fonts:
+  icon: material/format-font
+  preferences:
+    - text: Default
+    - text: Roboto
+      code: Roboto Mono
+    - text: OpenDyslexic
+      code: OpenDyslexicMono
+      src: https://fonts.cdnfonts.com/css/opendyslexic
+
+extra_javascript:
+  - assets/javascripts/extra.js
+
 extra_css:
   - stylesheets/extra.css
 
@@ -97,4 +111,4 @@ extra:
       link: https://www.tiktok.com/@dunossauro
 
 hooks:
-  - hooks/quiz_hook.py
+  - hooks/quiz_hook.py

overrides/assets/javascripts/extra.js

@@ -0,0 +1,43 @@
+/*
+ * Licence MIT - Copyright (c) 2024 Kamil Krzyśków (HRY)
+ */
+
+function updateFontPreference(event) {
+    console.debug(event);
+    let cssRaw = "";
+    let root = "";
+
+    const text = event.target.dataset["text"];
+    const code = event.target.dataset["code"];
+    const src = event.target.dataset["src"];
+
+    if (src !== "") {
+	cssRaw += `@import url('${src}');`;
+    }
+    if (text !== "") {
+	root += `--md-text-font: "${text}";`;
+    }
+    if (code !== "") {
+	root += `--md-code-font: "${code}";`;
+    }
+    if (root !== "") {
+	cssRaw += `:root { ${root} }`
+    }
+
+    // update style
+    const loadedPreferences = __md_get(preferencesKey);
+    loadedPreferences["__global"]["cssRaw"] = cssRaw;
+    __md_set(preferencesKey, loadedPreferences);
+    loadSetPreferences();
+}
+
+/*
+    This is run immediately when loaded to limit UI elements flashing.
+*/
+(() => {
+    const fonts = document.querySelectorAll("#md-fonts");
+    fonts.forEach((font) => {
+	let event_type = (font.tagName.toLowerCase() === "a") ? "click" : "change";
+	font.addEventListener(event_type, updateFontPreference);
+    });
+})();

overrides/main.html

@@ -0,0 +1,34 @@
+{% extends "base.html" %}
+
+{% block extrahead %}
+{{ super() }}
+<script>
+    const preferencesKey = "fonts-preferences";
+    const preferencesId = "md-fonts-style";
+    const loadSetPreferences = () => {
+	let prefStyles = document.querySelector(`#${preferencesId}`);
+
+	if (!prefStyles) {
+	    prefStyles = document.createElement("style");
+	    prefStyles.id = preferencesId;
+	    document.head.insertAdjacentElement("beforeend", prefStyles);
+	}
+
+	prefStyles.innerHTML = "";
+
+	const loadedPreferences = __md_get(preferencesKey);
+
+	if (!loadedPreferences) {
+	    __md_set(preferencesKey, {
+		"__global": {
+		    "cssRaw": ""
+		}
+	    });
+	    return;
+	}
+
+	prefStyles.innerHTML = loadedPreferences["__global"]["cssRaw"];
+    };
+    loadSetPreferences();
+</script>
+{% endblock %}

overrides/partials/fonts.html

@@ -0,0 +1,19 @@
+<div class="md-header__option">
+    <div class="md-select">
+	{% set icon = config.fonts.icon or "material/format-font" %}
+	<button class="md-header__button md-icon" aria-label="Selecione a fonte">
+	    {% include ".icons/" ~ icon ~ ".svg" %}
+	</button>
+	<div class="md-select__inner">
+	    <ul class="md-select__list">
+		{% for preference in config.fonts.preferences %}
+		<li class="md-select__item">
+		    <a id="md-fonts" data-text="{{ preference.text }}" data-code="{{ preference.code }}" data-src="{{ preference.src }}" class="md-select__link">
+			{{ preference.text }}
+		    </a>
+		</li>
+		{% endfor %}
+	    </ul>
+	</div>
+    </div>
+</div>

overrides/partials/header.html

@@ -0,0 +1,66 @@
+{% set class = "md-header" %}
+{% if "navigation.tabs.sticky" in features %}
+{% set class = class ~ " md-header--shadow md-header--lifted" %}
+{% elif "navigation.tabs" not in features %}
+{% set class = class ~ " md-header--shadow" %}
+{% endif %}
+<header class="{{ class }}" data-md-component="header">
+    <nav class="md-header__inner md-grid" aria-label="{{ lang.t('header') }}">
+	<a href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}" title="{{ config.site_name | e }}" class="md-header__button md-logo" aria-label="{{ config.site_name }}" data-md-component="logo">
+	    {% include "partials/logo.html" %}
+	</a>
+	<label class="md-header__button md-icon" for="__drawer">
+	    {% set icon = config.theme.icon.menu or "material/menu" %}
+	    {% include ".icons/" ~ icon ~ ".svg" %}
+	</label>
+	<div class="md-header__title" data-md-component="header-title">
+	    <div class="md-header__ellipsis">
+		<div class="md-header__topic">
+		    <span class="md-ellipsis">
+			{{ config.site_name }}
+		    </span>
+		</div>
+		<div class="md-header__topic" data-md-component="header-topic">
+		    <span class="md-ellipsis">
+			{% if page.meta and page.meta.title %}
+			{{ page.meta.title }}
+			{% else %}
+			{{ page.title }}
+			{% endif %}
+		    </span>
+		</div>
+	    </div>
+	</div>
+	{% if config.theme.palette %}
+	{% if not config.theme.palette is mapping %}
+	{% include "partials/palette.html" %}
+	{% endif %}
+	{% endif %}
+	{% if not config.theme.palette is mapping %}
+	{% include "partials/javascripts/palette.html" %}
+	{% endif %}
+	<!-- fonts -->
+	{% include "partials/fonts.html" %}
+	<!-- fonts -->
+	{% if config.extra.alternate %}
+	{% include "partials/alternate.html" %}
+	{% endif %}
+	{% if "material/search" in config.plugins %}
+	<label class="md-header__button md-icon" for="__search">
+	    {% set icon = config.theme.icon.search or "material/magnify" %}
+	    {% include ".icons/" ~ icon ~ ".svg" %}
+	</label>
+	{% include "partials/search.html" %}
+	{% endif %}
+	{% if config.repo_url %}
+	<div class="md-header__source">
+	    {% include "partials/source.html" %}
+	</div>
+	{% endif %}
+    </nav>
+    {% if "navigation.tabs.sticky" in features %}
+    {% if "navigation.tabs" in features %}
+    {% include "partials/tabs.html" %}
+    {% endif %}
+    {% endif %}
+</header>