Enable new mkdocs-material features (#2451)

Signed-off-by: Daniel Gray <dngray@privacyguides.org>
This commit is contained in:
Jonah Aragon 2024-04-05 10:44:23 +00:00 committed by Daniel Gray
parent cca4759612
commit cf43545f57
No known key found for this signature in database
GPG key ID: 41911F722B0F9AE3
25 changed files with 599 additions and 359 deletions

View file

@ -22,7 +22,7 @@
@font-face {
font-family: 'Bagnard';
src: url("/en/assets/brand/fonts/Bagnard/Bold.woff") format("woff");
src: url("../brand/fonts/Bagnard/Bold.woff") format("woff");
font-display: swap;
}

View file

@ -109,23 +109,28 @@ article.md-content__inner {
article.md-content__inner > * {
max-width: 38rem;
}
article.md-content__inner > *:nth-child(n+7):nth-child(-n+12) {
/* article.md-content__inner > *:nth-child(n+8):nth-child(-n+12) {
margin-left: auto;
margin-right: 0;
text-align: right;
} */
#what-should-i-do, #what-should-i-do ~ :not( .mdx-cat ~ * ):not( .mdx-cta ) {
margin-left: auto;
margin-right: 0;
text-align: right;
}
article.md-content__inner > hr {
margin: 3rem;
}
article.md-content__inner > *:nth-child(n+13) {
.pg-end-right-align, .mdx-cta {
margin-left: auto;
margin-right: auto;
text-align: center;
}
article.md-content__inner > *:nth-child(n+13) a:has(.twemoji) {
.mdx-cta a:has(.twemoji) {
display: inline-block;
}
article.md-content__inner > *:nth-child(n+13) .twemoji {
.mdx-cta .twemoji {
--md-icon-size: 1.8em;
margin: 0.4rem;
}

View file

@ -21,12 +21,12 @@
IN THE SOFTWARE.
#} -->
{% extends "main.html" %}
{% set homepage = config.extra.privacy_guides.homepage %}
{% block extrahead %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/home.css?v=3.3.0' | url }}">
<link rel="alternate" type="application/rss+xml" title="Privacy Guides Release Changelog" href="https://discuss.privacyguides.net/c/site-development/changelog/9.rss">
<link rel="alternate" type="application/rss+xml" title="Privacy Guides Blog Feed" href="https://blog.privacyguides.org/feed_rss_created.xml">
<link rel="alternate" type="application/rss+xml" title="Privacy Guides Web Stories Feed" href="https://share.privacyguides.org/web-stories/feed/">
<link rel="alternate" type="application/rss+xml" title="Latest Privacy Guides Forum Topics" href="https://discuss.privacyguides.net/latest.rss" />
{% for feed in homepage.rss %}
<link rel="alternate" type="application/rss+xml" title="{{ feed.title }}" href="{{ feed.link }}">
{% endfor %}
{{ super() }}
{% endblock %}
{% block tabs %}
@ -36,16 +36,30 @@
<div class="md-grid md-typeset">
<div class="mdx-hero">
<div class="mdx-hero__content">
<h1>The guide to restoring your online privacy.</h1>
<p>Massive organizations are monitoring your online activities. Privacy Guides is your central privacy and security resource to protect yourself online.</p>
<a href="{% if config.extra.offline %}basics/why-privacy-matters.html{% else %}kb/{% endif %}" title="The first step of your privacy journey" class="md-button md-button--primary">
Start Your Privacy Journey
</a>
<a href="{% if config.extra.offline %}tools.html{% else %}tools/{% endif %}" title="Recommended privacy tools, services, and knowledge" class="md-button">
Recommended Tools
</a>
<h1>{{ homepage.hero.header }}</h1>
<p>{{ homepage.hero.subheader }}</p>
{% for button in homepage.hero.buttons %}
<a href="{{ button.link }}" title="{{ button.title }}" class="{{ button.class }}">
{{ button.name }}
</a>
{% endfor %}
</div>
</div>
</div>
</section>
{% endblock %}
{% block content %}
{{ page.content }}
<div class="mdx-cta">
<hr />
{% for cta in homepage.cta %}
<h2>{{ cta.title }}</h2>
{% for icon in cta.links %}
<a href="{{ icon.link }}" title="{{ icon.name }}">
<span class="twemoji">{% include ".icons/" ~ icon.icon ~ ".svg" %}</span>
</a>
{% endfor %}
<p>{{ cta.description }}</p>
{% endfor %}
</div>
{% endblock %}

View file

@ -69,66 +69,17 @@
<title>{{ config.site_name }}</title>
{% endif %}
{% endblock %}
{% block announce %}{% if config.extra.offline %}
You're viewing an offline copy of Privacy Guides built on {{ build_date_utc }}.
<a href="https://www.privacyguides.org/">
<strong>Visit privacyguides.org for the latest version.</strong>
</a>
{% elif config.extra.context == "deploy-preview" %}
You're viewing an <strong>unreviewed preview</strong> of Privacy Guides built on {{ build_date_utc }}.
These previews are <strong>user-submitted</strong> and may not necessarily reflect the opinion of the site.
<a href="https://www.privacyguides.org/">
<strong>Visit privacyguides.org for current advice.</strong>
</a>
{% elif config.extra.context == "branch-deploy" %}
You're viewing a <strong>staging branch</strong> of Privacy Guides built on {{ build_date_utc }}.
The information on this page may be incomplete or otherwise not yet meet our editorial release standards.
<a href="https://www.privacyguides.org/">
<strong>Visit privacyguides.org for current advice.</strong>
</a>
{% else %}{% endif %}{% endblock %}
{% block extrahead %}
<meta name="robots" content="max-snippet:-1, max-image-preview:large">
{% if config.extra.context == "production" %}
<meta http-equiv="onion-location" content="{{ "http://www.xoe4vn5uwdztif6goazfbmogh6wh5jc4up35bqdflu6bkdc5cas5vjqd.onion/" ~ config.theme.language ~ "/" ~ page.url }}" />
{% elif config.extra.deploy %}
<meta http-equiv="onion-location" content="{{ "http://" ~ config.extra.deploy ~ ".netlify.xoe4vn5uwdztif6goazfbmogh6wh5jc4up35bqdflu6bkdc5cas5vjqd.onion/" ~ config.theme.language ~ "/" ~ page.url }}" />
{% endif %}
{% if page and page.meta and page.meta.schema %}
<script type="application/ld+json">
{{ page.meta.schema|tojson }}
</script>
{% endif %}{% endblock %}
{% block content %}
{% if page and page.meta and page.meta.cover %}
<div class="center-cropped" style="background-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/en/assets/img/cover/{{ page.meta.cover }}');">
<h1>{{ page.title | d(config.site_name, true)}}</h1>
<img src="/en/assets/img/cover/{{ page.meta.cover }}" alt="">
</div>
{% endif %}
{% if "material/tags" in config.plugins %}
{% include "partials/tags.html" %}
{% endif %}
{% include "partials/actions.html" %}
{% if "\x3ch1" not in page.content and not page.meta.cover %}
<h1>{{ page.title | d(config.site_name, true)}}</h1>
{% endif %}
{{ page.content }}
{% include "partials/source-file.html" %}
{% include "partials/feedback.html" %}
{% if config.theme.language == "en" %}
<hr>
<h2 class="md-feedback__title">Share this website and spread privacy knowledge</h2>
<p><input class="admonition quote social-share-text" id="share" type="text" value="Privacy Guides: https://www.privacyguides.org - Cybersecurity resources and privacy-focused tools to protect yourself online" onclick="select()" readonly=""></p>
<p><em>Copy this text to easily share Privacy Guides with your friends and family on any social network!</em></p>
{% elif config.extra.translation_notice %}
<div class="admonition info">
<p>{{ config.extra.translation_notice }} <strong><a href="https://crowdin.com/project/privacyguides">{{ config.extra.translation_notice_cta }}</a></strong></p>
<p>You're viewing the {{ config.extra.translation_notice_language }} copy of Privacy Guides, translated by our fantastic language team on <a href="https://crowdin.com/project/privacyguides">Crowdin</a>. If you notice an error, or see any untranslated sections on this page, please consider <a href="https://matrix.to/#/#pg-i18n:aragon.sh">helping out!</a></p>
</div>
{% endif %}
{% include "partials/comments.html" %}
<meta name="robots" content="max-snippet:-1, max-image-preview:large">
{% if config.extra.context == "production" %}
<meta http-equiv="onion-location" content="{{ "http://www.xoe4vn5uwdztif6goazfbmogh6wh5jc4up35bqdflu6bkdc5cas5vjqd.onion/" ~ config.theme.language ~ "/" ~ page.url }}" />
{% elif config.extra.deploy %}
<meta http-equiv="onion-location" content="{{ "http://" ~ config.extra.deploy ~ ".netlify.xoe4vn5uwdztif6goazfbmogh6wh5jc4up35bqdflu6bkdc5cas5vjqd.onion/" ~ config.theme.language ~ "/" ~ page.url }}" />
{% endif %}
{% if page and page.meta and page.meta.schema %}
<script type="application/ld+json">
{{ page.meta.schema|tojson }}
</script>
{% endif %}
{% endblock %}

View file

@ -0,0 +1,64 @@
<!--
Copyright (c) 2016-2024 Martin Donath <martin.donath@squidfunk.com>
Copyright (c) 2024 Jonah Aragon <jonah@triplebit.net>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
{% if page and page.meta and page.meta.cover %}
<div class="center-cropped" style="background-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/en/assets/img/cover/{{ page.meta.cover }}');">
<img src="/en/assets/img/cover/{{ page.meta.cover }}" alt="">
</div>
<h1 style="margin-top: 50px; text-align: center">{{ page.title | d(config.site_name, true)}}</h1>
{% endif %}
<!-- Tags -->
{% include "partials/tags.html" %}
<!-- Actions -->
{% include "partials/actions.html" %}
{% if "\x3ch1" not in page.content and not page.meta.cover %}
<h1>{{ page.title | d(config.site_name, true)}}</h1>
{% endif %}
<!-- Page content -->
{{ page.content }}
<!-- Source file information -->
{% include "partials/source-file.html" %}
<!-- Was this page helpful? -->
{% include "partials/feedback.html" %}
{% set translation_notice = config.extra.privacy_guides.translation_notice %}
{% if config.theme.language == "fr" %}
<hr>
<h2 class="md-feedback__title">Share this website and spread privacy knowledge</h2>
<p><input class="admonition quote social-share-text" id="share" type="text" value="Privacy Guides: https://www.privacyguides.org - Cybersecurity resources and privacy-focused tools to protect yourself online" onclick="select()" readonly=""></p>
<p><em>Copy this text to easily share Privacy Guides with your friends and family on any social network!</em></p>
{% elif translation_notice %}
<div class="admonition info">
<p>{{ translation_notice.notice }} <strong><a href="https://crowdin.com/project/privacyguides">{{ translation_notice.cta }}</a></strong></p>
<p>You're viewing the {{ translation_notice.language }} copy of Privacy Guides, translated by our fantastic language team on <a href="https://crowdin.com/project/privacyguides">Crowdin</a>. If you notice an error, or see any untranslated sections on this page, please consider <a href="https://matrix.to/#/#pg-i18n:aragon.sh">helping out!</a></p>
</div>
{% endif %}
<!-- Comment system -->
{% include "partials/comments.html" %}

View file

@ -1,6 +1,5 @@
<!-- {#
Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
Copyright (c) 2023 Jonah Aragon <jonah@triplebit.net>
<!--
Copyright (c) 2024 Jonah Aragon <jonah@triplebit.net>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
@ -19,16 +18,26 @@
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
#} -->
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
{% include "partials/copyright.html" %}
-->
{% set copyright = config.extra.privacy_guides.footer %}
<!-- Social links -->
{% if config.extra.social %}
{% include "partials/social.html" %}
{% endif %}
<!-- Copyright information -->
<div class="md-copyright">
{% if copyright %}
<div class="md-copyright__highlight">
{{ copyright.intro }}
<br />
{{ copyright.note }}
<br />
<a href='/license'>
{% for icon in copyright.license %}
<span class="twemoji">{% include ".icons/" ~ icon ~ ".svg" %}</span>
{% endfor %}
</a>
{{ copyright.copyright.date }} {{ copyright.copyright.author }}
<a href='#__consent'>
{{ copyright.analytics }}
</a>
</div>
</div>
</footer>
{% endif %}
</div>

View file

@ -21,6 +21,35 @@
IN THE SOFTWARE.
-->
{% macro notice() %}{% if config.extra.offline %}
You're viewing an offline copy of Privacy Guides built on {{ build_date_utc.strftime('%B %d, %Y at %I:%M%p') }}.
<a href="https://www.privacyguides.org/">
<strong>Visit privacyguides.org for the latest version.</strong>
</a>
{% elif config.extra.context == "deploy-preview" %}
You're viewing an <strong>unreviewed preview</strong> of Privacy Guides built on {{ build_date_utc.strftime('%B %d, %Y at %I:%M%p') }}.
These previews are <strong>user-submitted</strong> and may not necessarily reflect the opinion of the site.
<a href="https://www.privacyguides.org/">
<strong>Visit privacyguides.org for current advice.</strong>
</a>
{% elif config.extra.context == "branch-deploy" %}
You're viewing a <strong>staging branch</strong> of Privacy Guides built on {{ build_date_utc.strftime('%B %d, %Y at %I:%M%p') }}.
The information on this page may be incomplete or otherwise not yet meet our editorial release standards.
<a href="https://www.privacyguides.org/">
<strong>Visit privacyguides.org for current advice.</strong>
</a>
{% else %}{% endif %}{% endmacro %}
{% if notice() %}
<div data-md-color-scheme="default" data-md-component="outdated">
<aside class="md-banner md-banner--warning">
<div class="md-banner__inner md-grid md-typeset">
{{ notice() }}
</div>
</aside>
</div>
{% endif %}
<!-- Determine classes -->
{% set class = "md-header" %}
{% if "navigation.tabs.sticky" in features %}