Skip to content

Commit 3135cf9

Browse files
tcbegleytcbegley
authored
Docs updates (#1006)
* Add GitHub icon to index * Dark mode toggle updates * Add white background to logo on home page * code snippet formatting * Add GitHub link * Undo formatting changes
1 parent 86a883b commit 3135cf9

File tree

7 files changed

+146
-35
lines changed

7 files changed

+146
-35
lines changed

‎docs/static/docs.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,10 @@ span.hljs-meta {
107107
border-radius: 6px;
108108
}
109109

110+
.highlight pre {
111+
margin-bottom: 0;
112+
}
113+
110114
.api-documentation {
111115
margin-bottom: 4rem;
112116
}

‎docs/static/js/docs-theme-change.js

Lines changed: 86 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,95 @@
1-
const getStoredTheme = () => localStorage.getItem('theme')
2-
const lightIcon = "bi bi-sun-fill"
3-
const darkIcon = "bi bi-moon-fill"
1+
/*!
2+
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
3+
* Copyright 2011-2024 The Bootstrap Authors
4+
* Licensed under the Creative Commons Attribution 3.0 Unported License.
5+
*/
46

7+
(() => {
8+
'use strict';
59

6-
const setIcon = theme => {
7-
icon = theme == "light" ? lightIcon : darkIcon
8-
document.getElementById('theme-icon').className = icon
9-
}
10+
const getStoredTheme = () => localStorage.getItem('theme');
11+
const setStoredTheme = theme => localStorage.setItem('theme', theme);
1012

11-
const handleThemeChange = () => {
12-
getStoredTheme() == 'dark' ? setTheme("light") : setTheme("dark")
13-
}
13+
const getPreferredTheme = () => {
14+
const storedTheme = getStoredTheme();
15+
if (storedTheme) {
16+
return storedTheme;
17+
}
1418

15-
const setTheme = theme => {
16-
document.documentElement.setAttribute('data-bs-theme', theme)
17-
localStorage.setItem('theme', theme)
18-
setIcon(theme)
19-
}
19+
return window.matchMedia('(prefers-color-scheme: dark)').matches
20+
? 'dark'
21+
: 'light';
22+
};
2023

21-
// icon needs to be set after page is loaded
22-
const setInitialIcon = () => {
23-
getStoredTheme() == 'dark' ? setIcon("dark") : setIcon("light")
24-
}
25-
window.onload = (event) => {
26-
// example pages should always be light theme
27-
if (window.location.pathname.includes("/examples") ) {
28-
return document.documentElement.setAttribute('data-bs-theme', "light")
29-
}
30-
setInitialIcon()
24+
const setTheme = theme => {
25+
if (window.location.pathname.startsWith('/examples')) {
26+
// examples page currently can't handle dark mode well...
27+
document.documentElement.setAttribute('data-bs-theme', 'light');
28+
} else if (theme === 'auto') {
29+
document.documentElement.setAttribute(
30+
'data-bs-theme',
31+
window.matchMedia('(prefers-color-scheme: dark)').matches
32+
? 'dark'
33+
: 'light'
34+
);
35+
} else {
36+
document.documentElement.setAttribute('data-bs-theme', theme);
37+
}
38+
};
3139

32-
};
40+
setTheme(getPreferredTheme());
3341

42+
const showActiveTheme = (theme, focus = false) => {
43+
const themeSwitcher = document.querySelector('#bd-theme');
3444

45+
if (!themeSwitcher) {
46+
return;
47+
}
3548

49+
const themeSwitcherText = document.getElementById('bd-theme-text');
50+
const activeThemeIcon = document.getElementById('theme-icon-active');
51+
const btnToActive = document.querySelector(
52+
`[data-bs-theme-value="${theme}"]`
53+
);
54+
const classOfActiveBtn = btnToActive
55+
.querySelector('i')
56+
.getAttribute('class');
57+
58+
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
59+
element.classList.remove('active');
60+
element.setAttribute('aria-pressed', 'false');
61+
});
62+
63+
btnToActive.classList.add('active');
64+
btnToActive.setAttribute('aria-pressed', 'true');
65+
activeThemeIcon.setAttribute('class', classOfActiveBtn);
66+
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
67+
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel);
68+
69+
if (focus) {
70+
themeSwitcher.focus();
71+
}
72+
};
73+
74+
window
75+
.matchMedia('(prefers-color-scheme: dark)')
76+
.addEventListener('change', () => {
77+
const storedTheme = getStoredTheme();
78+
if (storedTheme !== 'light' && storedTheme !== 'dark') {
79+
setTheme(getPreferredTheme());
80+
}
81+
});
82+
83+
window.addEventListener('DOMContentLoaded', () => {
84+
showActiveTheme(getPreferredTheme());
85+
86+
document.querySelectorAll('[data-bs-theme-value]').forEach(toggle => {
87+
toggle.addEventListener('click', () => {
88+
const theme = toggle.getAttribute('data-bs-theme-value');
89+
setStoredTheme(theme);
90+
setTheme(theme);
91+
showActiveTheme(theme, true);
92+
});
93+
});
94+
});
95+
})();

‎docs/templates/examples-index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
{% from "macros/navbar.html" import navbar %}
33
{% extends "base.html" %}
44
{% block title %}<title>Examples - dbc docs</title>{% endblock %}
5-
{% block header %}{{ navbar("examples") }}{% endblock %}
5+
{% block header %}{{ navbar("examples", False) }}{% endblock %}
66
{% block body %}
77
<div class="container">
88
<main class="dbcd-main mb-5">

‎docs/templates/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<div class="dbcd-masthead">
99
<div class="row justify-content-center">
1010
<div class="col-auto px-5 align-self-center">
11-
<div style="width:250px;height:250px;margin:auto;">
11+
<div style="width:250px;height:250px;margin:auto;padding:1rem;background-color:white;border-radius:1rem;box-sizing:content-box;">
1212
<object
1313
type="image/svg+xml"
1414
data="https://cdn.opensource.faculty.ai/dbc/assets/logo.svg"
@@ -30,7 +30,7 @@ <h1 class="font-weight-light">Dash Bootstrap Components</h1>
3030
<a
3131
class="btn btn-outline-secondary"
3232
href="https://github.com/facultyai/dash-bootstrap-components"
33-
>Source Code</a
33+
>Source Code<i class="bi bi-github ms-1"></i></a
3434
>
3535
<a class="btn btn-secondary" href="/docs">Get Started »</a>
3636
</div>

‎docs/templates/macros/example-navbar.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{% macro example_navbar() -%}
22
<nav class="navbar sticky-top navbar-expand navbar-dark bg-dark">
3+
<div class="container-fluid">
34
<span class="me-2 bg-white" style="padding:2px;border-radius:4px">
45
<img
56
src="/static/images/dbciconblack128.png"
@@ -14,5 +15,6 @@
1415
</li>
1516
<li class="nav-item"><a href="#sourceCode" class="nav-link">Jump to source</a></li>
1617
</ul>
18+
</div>
1719
</nav>
1820
{%- endmacro %}

‎docs/templates/macros/navbar.html

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{% macro navbar(active="home") -%}
1+
{% macro navbar(active="home", dark_mode_toggle=True) -%}
22
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
33
<div class="container">
44
<span class="me-2 bg-white" style="padding:2px;border-radius:4px">
@@ -63,12 +63,57 @@
6363
</div>
6464
</li>
6565
</ul>
66-
<div class="ms-auto" >
67-
<button class="btn btn-outline-secondary bt-sm" id="docs-theme" onclick="handleThemeChange()" >
68-
<i class="bi bi-sun-fill" id="theme-icon"></i>
66+
<ul class="navbar-nav flex-row flex-wrap ms-auto" >
67+
<li>
68+
<li class="nav-item">
69+
<a href="https://github.com/facultyai/dash-bootstrap-components" class="nav-link">
70+
<i class="bi bi-github ms-1"></i>
71+
<span class="d-lg-none ms-2">Source code</span>
72+
</a>
73+
</li>
74+
</li>
75+
{% if dark_mode_toggle %}
76+
<li class="nav-item dropdown">
77+
<button
78+
class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
79+
id="bd-theme"
80+
type="button"
81+
data-bs-toggle="dropdown"
82+
data-bs-display="static"
83+
aria-label="Toggle theme (auto)"
84+
aria-haspopup="true"
85+
aria-expanded="false"
86+
>
87+
<i class="bi bi-sun-fill" id="theme-icon-active"></i>
88+
<span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
6989
</button>
70-
</div>
90+
<div class="dropdown-menu">
91+
<button class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
92+
<i class="bi bi-sun-fill"></i><span class="ms-1">Light</span>
93+
</button>
94+
<button class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
95+
<i class="bi bi-moon-fill"></i><span class="ms-1">Dark</span>
96+
</button>
97+
<button class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
98+
<i class="bi bi-circle-half"></i><span class="ms-1">Auto</span>
99+
</button>
100+
</div>
101+
</li>
102+
{% endif %}
103+
</ul>
71104
</div>
72105
</div>
73106
</nav>
107+
<svg xmlsn="http://www.w3.org/2000/svg" class="d-none">
108+
<symbol id="circle-half" viewBox="0 0 16 16">
109+
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
110+
</symbol>
111+
<symbol id="sun-fill" viewBox="0 0 16 16">
112+
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
113+
</symbol>
114+
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
115+
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
116+
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
117+
</symbol>
118+
</svg>
74119
{%- endmacro %}

‎docs/templates/partials/head.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link rel="shortcut icon" type="image/png" href="/static/images/dbciconwhite16.png" />
77
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" />
88

9-
<!-- sets correct theme on page refresh -->
9+
<!-- sets correct theme on page refresh -->
1010
<script>
1111
dbcdStoredTheme = localStorage.getItem('theme')
1212
document.documentElement.setAttribute('data-bs-theme', dbcdStoredTheme)

0 commit comments

Comments
 (0)