Skip to content

Commit 08ec46d

Browse files
heiskrheiskr
authored
Render color mode settings from github/github cookie (github#19275)
* Add color mode selector in footer * Interpret color mode from cookie * Update render-page.js * Delete color-mode.js * Update render-page.js * Make this more resilient to HTML tag changes * Update scroll-button.scss
1 parent 2b69405 commit 08ec46d

12 files changed

+45
-25
lines changed

‎includes/support-section.html

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<section class="mt-lg-9 py-7 px-3 px-md-6 no-print color-bg-tertiary">
2-
<div class="container-xl gutter-lg-spacious clearfix">
3-
<div class="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0 float-left">
2+
<div class="container-xl gutter-lg-spacious d-flex flex-wrap">
3+
<div class="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0">
44
{% include helpfulness %}
55
</div>
6-
<div class="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0 float-left">
6+
<div class="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0">
77
{% include contribution %}
88
</div>
9-
<div class="col-12 col-lg-12 col-xl-4 float-left">
9+
<div class="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0">
1010
{% include support %}
1111
</div>
12+
<div class="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0">
13+
{% include toggle-images %}
14+
</div>
1215
</div>
1316
</section>

‎layouts/default.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="{{currentLanguage}}" data-color-mode="auto" data-dark-theme="dark_dimmed">
2+
<html lang="{{currentLanguage}}" data-color-mode="$COLORMODE$" data-dark-theme="$DARKTHEME$" data-light-theme="$LIGHTTHEME$">
33
{% include head %}
44

55
<body class="d-lg-flex">
@@ -16,7 +16,6 @@
1616
{% include support-section %}
1717
{% include small-footer %}
1818
{% include scroll-button %}
19-
{% include toggle-images %}
2019
</main>
2120
</body>
2221
</html>

‎layouts/dev-toc.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="{{currentLanguage}}" data-color-mode="auto" data-dark-theme="dark_dimmed">
2+
<html lang="{{currentLanguage}}" data-color-mode="$COLORMODE$" data-dark-theme="$DARKTHEME$" data-light-theme="$LIGHTTHEME$">
33
<head>
44
<meta charset="utf-8" />
55
<title>Docs TOC</title>

‎layouts/error-404.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!doctype html>
22
{% assign error = '404' %}
3-
<html lang="{{currentLanguage}}" data-color-mode="auto" data-dark-theme="dark_dimmed">
3+
<html lang="{{currentLanguage}}" data-color-mode="$COLORMODE$" data-dark-theme="$DARKTHEME$" data-light-theme="$LIGHTTHEME$">
44
{% include head %}
55

66
<body class="d-lg-flex error-404">

‎layouts/error-500.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="{{currentLanguage}}" data-color-mode="auto" data-dark-theme="dark_dimmed">
2+
<html lang="{{currentLanguage}}" data-color-mode="$COLORMODE$" data-dark-theme="$DARKTHEME$" data-light-theme="$LIGHTTHEME$">
33
{% include head %}
44
<body>
55
{% include header %}

‎layouts/graphql-explorer.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="{{currentLanguage}}" data-color-mode="auto" data-dark-theme="dark_dimmed">
2+
<html lang="{{currentLanguage}}" data-color-mode="$COLORMODE$" data-dark-theme="$DARKTHEME$" data-light-theme="$LIGHTTHEME$">
33
{% include head %}
44

55
<body class="d-lg-flex">

‎layouts/product-landing.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="{{currentLanguage}}" data-color-mode="auto" data-dark-theme="dark_dimmed">
2+
<html lang="{{currentLanguage}}" data-color-mode="$COLORMODE$" data-dark-theme="$DARKTHEME$" data-light-theme="$LIGHTTHEME$">
33
{% include head %}
44

55
<body class="d-lg-flex">

‎layouts/product-sublanding.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!doctype html>
22
{% assign guideTypes = site.data.ui.product_sublanding.guide_types %}
33

4-
<html lang="{{currentLanguage}}" data-color-mode="auto" data-dark-theme="dark_dimmed">
4+
<html lang="{{currentLanguage}}" data-color-mode="$COLORMODE$" data-dark-theme="$DARKTHEME$" data-light-theme="$LIGHTTHEME$">
55
{% include head %}
66

77
<body class="d-lg-flex">

‎layouts/release-notes.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% assign product = siteTree[currentLanguage][currentVersion].products[currentProduct] %}
22

33
<!doctype html>
4-
<html lang="{{currentLanguage}}" data-color-mode="auto" data-dark-theme="dark_dimmed">
4+
<html lang="{{currentLanguage}}" data-color-mode="$COLORMODE$" data-dark-theme="$DARKTHEME$" data-light-theme="$LIGHTTHEME$">
55
{% include head %}
66

77
<body class="d-lg-flex">

‎middleware/render-page.js

+27-3
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,34 @@ const renderWithNext = FEATURE_NEXTJS
3636
]
3737
: []
3838

39+
function modifyOutput (req, text) {
40+
return addColorMode(req, addCsrf(req, text))
41+
}
42+
3943
function addCsrf (req, text) {
4044
return text.replace('$CSRFTOKEN$', req.csrfToken())
4145
}
4246

47+
function addColorMode (req, text) {
48+
let colorMode = 'auto'
49+
let darkTheme = 'dark'
50+
let lightTheme = 'light'
51+
52+
try {
53+
const cookieValue = JSON.parse(decodeURIComponent(req.cookies.color_mode))
54+
colorMode = encodeURIComponent(cookieValue.color_mode) || colorMode
55+
darkTheme = encodeURIComponent(cookieValue.dark_theme.name) || darkTheme
56+
lightTheme = encodeURIComponent(cookieValue.light_theme.name) || lightTheme
57+
} catch (e) {
58+
// do nothing
59+
}
60+
61+
return text
62+
.replace('$COLORMODE$', colorMode)
63+
.replace('$DARKTHEME$', darkTheme)
64+
.replace('$LIGHTTHEME$', lightTheme)
65+
}
66+
4367
module.exports = async function renderPage (req, res, next) {
4468
const page = req.context.page
4569

@@ -49,7 +73,7 @@ module.exports = async function renderPage (req, res, next) {
4973
console.error(`\nTried to redirect to ${req.context.redirectNotFound}, but that page was not found.\n`)
5074
}
5175
return res.status(404).send(
52-
addCsrf(
76+
modifyOutput(
5377
req,
5478
await liquid.parseAndRender(layouts['error-404'], req.context)
5579
)
@@ -90,7 +114,7 @@ module.exports = async function renderPage (req, res, next) {
90114

91115
console.log(`Serving from cached version of ${originalUrl}`)
92116
statsd.increment('page.sent_from_cache')
93-
return res.send(addCsrf(req, cachedHtml))
117+
return res.send(modifyOutput(req, cachedHtml))
94118
}
95119
}
96120

@@ -158,7 +182,7 @@ module.exports = async function renderPage (req, res, next) {
158182

159183
// First, send the response so the user isn't waiting
160184
// NOTE: Do NOT `return` here as we still need to cache the response afterward!
161-
res.send(addCsrf(req, output))
185+
res.send(modifyOutput(req, output))
162186

163187
// Finally, save output to cache for the next time around
164188
if (isCacheable) {

‎stylesheets/scroll-button.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ button.arrow-for-scrolling-top {
44
background-color: var(--color-auto-blue-5);
55
color: var(--color-text-inverse);
66
position: fixed;
7-
bottom: 10px;
8-
right: 60px;
7+
bottom: $spacer-2;
8+
right: $spacer-2;
99
display: block;
1010
width: 40px;
1111
height: 40px;
1212
border-radius: 50%;
13-
margin-right: 10px;
13+
margin-right: $spacer-1;
1414

1515
&.show {
1616
opacity: 1;

‎stylesheets/toggle-images-button.scss

-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
button.toggle-images {
2-
opacity: 1;
3-
transition: 0.2s;
42
background-color: var(--color-auto-blue-5);
53
color: var(--color-text-inverse);
6-
position: fixed;
7-
bottom: 10px;
8-
right: 10px;
9-
margin-right: 10px;
104
display: block;
115
width: 40px;
126
height: 40px;

0 commit comments

Comments
 (0)