summaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorErik Faye-Lund <kusmabite@gmail.com>2021-01-06 14:00:52 +0100
committerMarge Bot <emma+marge@anholt.net>2023-04-26 22:45:41 +0000
commit7da0482636a3475232ed906cfd611b2d912227f7 (patch)
treea2e1aab53c3c4b3d4fdb0bcda9fe39c04828ef21 /docs
parent3e612aa86e0267de43607a865aa88159fc0aad5f (diff)
downloadmesa-7da0482636a3475232ed906cfd611b2d912227f7.tar.gz
docs: add custom html theme
This custom theme will make the docs look more like the main website, which makes it slightly less confusing to navigate around when crossing between the two. The icon link.svg is from Feathericons: https://feathericons.com/?query=link Reviewed-by: Eric Engestrom <eric@igalia.com> Part-of: <https://gitlab.freedesktop.org/mesa/mesa/-/merge_requests/8399>
Diffstat (limited to 'docs')
-rw-r--r--docs/mesa3d_theme/layout.html173
-rw-r--r--docs/mesa3d_theme/search.html15
-rw-r--r--docs/mesa3d_theme/static/chevron-up.svg10
-rw-r--r--docs/mesa3d_theme/static/link.svg10
-rw-r--r--docs/mesa3d_theme/static/logo.svg9
-rw-r--r--docs/mesa3d_theme/static/menu.css76
-rw-r--r--docs/mesa3d_theme/static/rst.css73
-rw-r--r--docs/mesa3d_theme/static/screen.css_t98
-rw-r--r--docs/mesa3d_theme/theme.conf5
9 files changed, 469 insertions, 0 deletions
diff --git a/docs/mesa3d_theme/layout.html b/docs/mesa3d_theme/layout.html
new file mode 100644
index 00000000000..e7312d773d3
--- /dev/null
+++ b/docs/mesa3d_theme/layout.html
@@ -0,0 +1,173 @@
+{% extends "basic/layout.html" %}
+
+{% block css %}
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+ {{ css() }}
+{% endblock %}
+
+{% block extrahead %}
+<script>
+ (() => {
+ const mq = window.matchMedia('(prefers-color-scheme: dark)');
+ const update = (m) => document.documentElement.setAttribute('data-bs-theme', m.matches ? 'dark' : 'light');
+ mq.addEventListener('change', (e) => update(e));
+ update(mq);
+ })();
+</script>
+{% endblock %}
+
+{% block body_tag %}
+ <body class="d-flex flex-column h-100">
+{% endblock %}
+
+{% block relbar1 %}{% endblock %}
+{% block relbar2 %}{% endblock %}
+
+{% block header %}
+ <nav class="navbar navbar-expand-lg navbar-dark bg-dark-subtle" data-bs-theme="dark">
+ <div class="container">
+ <div class="d-flex flex-row">
+ <a class="navbar-brand" href="https://www.mesa3d.org/">
+ <img class="d-inline-block align-bottom" src="{{ pathto('_static/logo.svg', 1) }}" alt="" width="30" height="30">
+ Mesa 3D
+ </a>
+ </div>
+
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav ms-auto">
+
+ <li class="nav-item">
+ <a class="nav-link" href="https://www.mesa3d.org/" title="Home">Home</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="https://www.mesa3d.org/news/" title="News">News</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link{% if pagename == 'download' %} active{% endif %}" href="{{ pathto('download') }}" title="">Getting Started</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link active" href="{{ pathto(root_doc) }}" title="">Documentation</a>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ </nav>
+{% endblock %}
+
+{% block content %}
+ <div class="container my-3">
+ <div class="row">
+ <main class="body col-12 col-lg-9 order-1 order-lg-2" role="main">
+ {% block body %}{% endblock %}
+ </main>
+
+ {% block navigation %}
+ <nav id="menu" class="rounded col-12 col-lg-3 order-2 order-lg-1 bg-dark-subtle pb-3">
+ <div class="my-3" role="search">
+ <form id="search-form" action="{{ pathto('search') }}" method="get">
+ <div class="form-group">
+ <input class="form-control" type="text" name="q" placeholder="Search docs" />
+ <input type="hidden" name="check_keywords" value="yes" />
+ <input type="hidden" name="area" value="default" />
+ </div>
+ </form>
+ </div>
+
+ {% block menu %}
+ {% set toctree = toctree(maxdepth=4, collapse=True, includehidden=True, titles_only=False) %}
+ {% if toctree %}
+ {{ toctree }}
+ {% else %}
+ {{ toc }}
+ {% endif %}
+ {% endblock %}
+ </nav>
+ {% endblock %}
+ </div>
+ </div>
+{% endblock %}
+
+{% block footer %}
+ <footer class="footer py-3 bg-body-tertiary text-muted">
+ <div class="container">
+ <div class="row">
+
+ <div class="col-12 col-lg-3">
+ <h6 class="text-body">Documentation</h6>
+ <ul class="list-unstyled">
+ <li><a href="https://docs.mesa3d.org/license.html">License</a></li>
+ <li><a href="https://docs.mesa3d.org/faq.html">FAQ</a></li>
+ <li><a href="https://docs.mesa3d.org/download.html">Getting Started</a></li>
+ </ul>
+ </div>
+
+ <div class="col-12 col-lg-3">
+ <h6 class="text-body">Community</h6>
+ <ul class="list-unstyled">
+ <li><a href="https://gitlab.freedesktop.org/mesa">GitLab</a></li>
+ <li><a href="https://docs.mesa3d.org/lists.html">Mailing Lists</a></li>
+ <li><a href="https://docs.mesa3d.org/bugs.html">Report a Bug</a></li>
+ </ul>
+ </div>
+
+ <div class="col-12 col-lg-3">
+ <h6 class="text-body">More</h6>
+ <ul class="list-unstyled">
+ <li><a href="/website/">About Mesa3D.org</a></li>
+ <li><a href="https://docs.mesa3d.org/thanks.html">Acknowledgements</a></li>
+ <li><a href="https://dri.freedesktop.org/wiki/">Mesa / DRI Wiki</a></li>
+ </ul>
+ </div>
+
+ <div class="col-12 col-lg-3">
+ <p>Hosted by <a href="https://www.freedesktop.org/">Freedesktop.org</a></p>
+ <p><a href="https://gitlab.freedesktop.org/mesa/mesa3d.org/-/blob/main/content/_index.html">Edit this page</a></p>
+ </div>
+
+ </div>
+ </div>
+ </footer>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
+ <script>
+ (() => {
+ const collapseElementList = document.querySelectorAll('#menu > .caption + ul');
+ // Add Bootstrap collapse components to the expandable menu-captions
+ [...collapseElementList].forEach(collapseEl => {
+ // disable transition if we need toggling
+ const toggle = collapseEl.classList.contains('current');
+ if (toggle)
+ collapseEl.style.transition = "none";
+ else
+ collapseEl.previousElementSibling.classList.add('collapsed');
+
+ // enable collapse
+ collapseEl.classList.add('collapse');
+ collapseEl.previousElementSibling.classList.add('collapse-icon');
+ const collapse = new bootstrap.Collapse(collapseEl, {
+ toggle: toggle
+ });
+
+ // disable transition-override again
+ if (toggle) {
+ collapseEl.addEventListener('shown.bs.collapse', event => {
+ collapseEl.style.removeProperty('transition');
+ }, {once : true})
+ }
+
+ // collapse on click on previous element
+ collapseEl.previousElementSibling.addEventListener('click', (event) => {
+ collapse.toggle();
+ collapseEl.previousElementSibling.classList.toggle('collapsed');
+ });
+ });
+ })();
+ </script>
+{% endblock %}
diff --git a/docs/mesa3d_theme/search.html b/docs/mesa3d_theme/search.html
new file mode 100644
index 00000000000..f369ed634a6
--- /dev/null
+++ b/docs/mesa3d_theme/search.html
@@ -0,0 +1,15 @@
+{% extends "basic/search.html" %}
+
+{% block scriptwarning %}
+<div id="fallback" class="alert alert-warning">
+<script>$('#fallback').hide();</script>
+<h5>{{ _('Warning') }}</h5>
+<p>
+{% trans %}Please activate JavaScript to enable the search
+functionality.{% endtrans %}
+</p>
+</div>
+{% endblock %}
+
+{% block searchbox %}
+{% endblock %}
diff --git a/docs/mesa3d_theme/static/chevron-up.svg b/docs/mesa3d_theme/static/chevron-up.svg
new file mode 100644
index 00000000000..0ab171b7d2e
--- /dev/null
+++ b/docs/mesa3d_theme/static/chevron-up.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16">
+ <style>
+ @media (prefers-color-scheme:dark) {
+ svg {
+ fill: white;
+ }
+ }
+ </style>
+ <path d="M10 10l-1.5 1.5L5 7.75 1.5 11.5 0 10l5-5 5 5z"/>
+</svg>
diff --git a/docs/mesa3d_theme/static/link.svg b/docs/mesa3d_theme/static/link.svg
new file mode 100644
index 00000000000..e9e660d0a32
--- /dev/null
+++ b/docs/mesa3d_theme/static/link.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <style>
+ @media (prefers-color-scheme:dark) {
+ svg {
+ stroke: white;
+ }
+ }
+ </style>
+ <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+</svg>
diff --git a/docs/mesa3d_theme/static/logo.svg b/docs/mesa3d_theme/static/logo.svg
new file mode 100644
index 00000000000..1028c6d94e9
--- /dev/null
+++ b/docs/mesa3d_theme/static/logo.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="-1 -1 15 15">
+ <rect x="-1" y="-1" width="15" height="15" rx="4" ry="4" />
+ <path fill="#cc1a00" d="M4.008 4.213l-.338.04L3.498 5l-.275.078-.537-.547-.311.143.068.763-.238.16-.68-.355-.252.233.301.705-.178.224-.755-.127-.166.297.504.578-.1.27-.758.113-.068.334.658.395-.012.287-.685.34.039.34.748.171.078.276-.547.537.143.31.763-.068.158.238-.353.68.23.25.707-.299.225.176-.129.758.299.166.578-.504.27.1.111.757.336.067.394-.657.286.01.341.688.34-.041.17-.746.278-.079.537.547.308-.142-.066-.764.238-.16.68.355.25-.232-.301-.705.178-.225.756.127.168-.297-.504-.578.1-.27.757-.11.066-.337-.658-.394L8 8.55l.688-.342-.042-.34-.748-.172-.076-.275.547-.537-.142-.31-.764.068-.16-.239.355-.68-.232-.25-.705.301-.225-.177.127-.756-.299-.168-.578.504-.267-.1-.114-.758-.334-.066-.394.658L4.35 4.9l-.342-.687zM4.35 7.55l.308.049.28.14.22.223.143.277.049.31-.05.31-.142.279-.22.22-.28.143-.308.049-.309-.049-.28-.143-.22-.22-.143-.28-.048-.308.048-.31.143-.278.22-.223.28-.14.309-.05z">
+ </path>
+ <path fill="#0c3" d="M10.818 6.229l-.369.671-.258.02-.466-.606-.342.143.097.758-.197.168-.734-.215-.194.314.526.559-.06.25-.721.26.029.367.752.143.1.238-.432.633.24.279.691-.326.221.135.024.765.357.086.367-.672.26-.02.467.606.342-.14-.098-.76.197-.168.735.215.191-.315-.523-.556.06-.252.72-.258-.029-.37-.751-.14-.1-.24.432-.633-.24-.28-.692.327-.22-.135-.024-.766-.358-.085zm-.447 1.828l.307.048.217.217.048.307-.14.275-.276.139-.304-.047-.22-.219-.046-.304.139-.276.275-.14z">
+ </path>
+ <path fill="#33f" d="M4.168.002l-.367.041-.115.756-.237.107-.646-.408-.272.25.352.68-.13.224-.763.051-.072.361.684.344.029.256-.59.49.154.336.754-.125.176.192-.19.742.323.181.537-.544.254.052.283.711.367-.043.115-.756.237-.107.646.408.272-.248-.352-.68.13-.226.763-.049.072-.361-.684-.344-.029-.258.59-.488-.154-.336-.754.123-.176-.191.19-.74L5.241.22l-.537.543L4.45.712 4.167.001zm.24 1.059l.729.337.388.704-.097.796-.547.588-.79.155-.728-.34-.388-.703.097-.797.547-.588.79-.152z">
+ </path>
+</svg>
diff --git a/docs/mesa3d_theme/static/menu.css b/docs/mesa3d_theme/static/menu.css
new file mode 100644
index 00000000000..cacf8dabe76
--- /dev/null
+++ b/docs/mesa3d_theme/static/menu.css
@@ -0,0 +1,76 @@
+#menu {
+ height: max-content;
+}
+
+#menu .caption {
+ cursor: pointer;
+ margin-bottom: 0;
+}
+
+#menu a {
+ color: inherit;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: block;
+ text-decoration: none;
+}
+
+#menu a[href^="#"] {
+ color: var(--bs-secondary-color);
+}
+
+#menu .caption,
+#menu li {
+ margin-top: 0.25rem;
+}
+
+#menu .caption-text,
+#menu li.current {
+ font-weight: bold;
+}
+
+#menu li.current > a {
+ color: var(--bs-body-color)
+}
+
+#menu li.current li {
+ font-weight: initial;
+}
+
+#menu ul {
+ list-style-type: none;
+ padding-left: 0;
+ padding-left: 1rem;
+ margin-bottom: 0.5rem;
+}
+
+#menu ul:last-of-type {
+ margin-bottom: 0;
+}
+
+#menu p.caption::after {
+ display: block;
+ content: '';
+ clear: both;
+}
+
+#menu .collapse-icon .caption-text:after {
+ content: ' ';
+ float: right;
+ display: block;
+ background-image: url('chevron-up.svg');
+ background-size: 1.5em 1.5em;
+ opacity: 0.25;
+ width: 1.5em;
+ height: 1.5em;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #menu .collapse-icon .caption-text:after {
+ transition: transform 0.2s;
+ }
+}
+
+#menu .collapse-icon.collapsed .caption-text:after {
+ transform: rotate(180deg);
+}
diff --git a/docs/mesa3d_theme/static/rst.css b/docs/mesa3d_theme/static/rst.css
new file mode 100644
index 00000000000..421a982263d
--- /dev/null
+++ b/docs/mesa3d_theme/static/rst.css
@@ -0,0 +1,73 @@
+.headerlink {
+ color: transparent;
+ display: inline-block;
+ vertical-align: middle;
+ background-image: url('link.svg');
+ background-size: 1ex 1ex;
+ margin-left: 0.25rem;
+ opacity: 0.25;
+ width: 1ex;
+ height: 1ex;
+ user-select: none;
+}
+
+.headerlink:hover {
+ opacity: 0.5;
+}
+
+.highlight {
+ border-radius: var(--bs-border-radius-sm);
+ padding: .5rem;
+ color: var(--bs-dark);
+ margin-bottom: 1rem;
+}
+
+.highlight > pre {
+ margin-bottom: 0;
+}
+
+dd {
+ margin-left: 2rem;
+}
+
+.sig {
+ font-family: var(--bs-font-monospace);
+ color: var(--bs-code-color);
+}
+
+dt.sig {
+ color: var(--bs-heading-color, inherit);
+}
+
+dl > .sig.c {
+ background-color: var(--bs-secondary-bg);
+ color: var(--bs-secondary);
+ padding: 0.25rem 0.5rem;
+ border-radius: var(--bs-border-radius-sm);
+}
+
+dl > .sig.c .sig-name {
+ color: var(--bs-secondary-text);
+}
+
+main .container {
+ padding: 0;
+}
+
+li > p:last-of-type,
+th > p:last-of-type,
+td > p:last-of-type,
+.alert > p:last-of-type {
+ margin-bottom: 0;
+}
+
+div.code-block-caption {
+ font-size: .875em;
+ color: var(--bs-secondary-color);
+ margin-bottom: 0.5rem;
+}
+
+.alert a {
+ font-weight: 700;
+ color: var(--bs-alert-link-color);
+}
diff --git a/docs/mesa3d_theme/static/screen.css_t b/docs/mesa3d_theme/static/screen.css_t
new file mode 100644
index 00000000000..7da46e264f3
--- /dev/null
+++ b/docs/mesa3d_theme/static/screen.css_t
@@ -0,0 +1,98 @@
+@import url("menu.css");
+@import url("rst.css");
+
+html {
+ height: 100%;
+}
+
+.navbar {
+ flex: none;
+}
+
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+ font-weight: 600 !important;
+}
+
+footer {
+ flex: 1;
+}
+
+footer a:any-link {
+ color: inherit;
+ text-decoration: none;
+}
+
+{%- if docutils_version_info[:2] < (0, 18) %}
+
+a.brackets::before,
+span.brackets::before {
+ content: "[";
+}
+
+a.brackets::after,
+span.brackets::after {
+ content: "]";
+}
+
+span.brackets {
+ font-weight: normal;
+}
+
+dl.footnote,
+dl.citation {
+ margin-bottom: 0;
+}
+
+dl.footnote > dt,
+dl.citation > dt {
+ float: left;
+}
+dl.footnote > dd,
+dl.citation > dd {
+ margin-bottom: 0;
+}
+dl.footnote > dd:after,
+dl.citation > dd:after {
+ content: "";
+ clear: both;
+}
+dl.footnote > dd > p {
+ margin-left: 2rem;
+}
+dl.citation > dd > p {
+ margin-left: 4rem;
+}
+dl.footnote > dd > p:last-of-type,
+dl.citation > dd > p:last-of-type {
+ margin-bottom: 0;
+}
+
+{%- else %}
+
+aside.footnote > span,
+div.citation > span {
+ float: left;
+}
+aside.footnote > span:last-of-type,
+div.citation > span:last-of-type {
+ padding-right: 0.5rem;
+}
+aside.footnote > p {
+ margin-left: 2rem;
+}
+div.citation > p {
+ margin-left: 4rem;
+}
+aside.footnote > p:last-of-type,
+div.citation > p:last-of-type {
+ margin-bottom: 0;
+}
+aside.footnote > p:last-of-type:after,
+div.citation > p:last-of-type:after {
+ content: "";
+ clear: both;
+}
+
+{%- endif %}
diff --git a/docs/mesa3d_theme/theme.conf b/docs/mesa3d_theme/theme.conf
new file mode 100644
index 00000000000..6478dad3214
--- /dev/null
+++ b/docs/mesa3d_theme/theme.conf
@@ -0,0 +1,5 @@
+[theme]
+inherit = basic
+stylesheet = screen.css
+pygments_style = default
+pygments_dark_style = github-dark