summaryrefslogtreecommitdiff
path: root/docs/mesa3d_theme/layout.html
blob: e7312d773d34e329d4542daaafc4ca3300dd8748 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
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 %}