@patternfly/documentation-framework 6.3.0 → 6.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/layouts/sideNavLayout/sideNavLayout.js +3 -79
- package/package.json +3 -3
- package/templates/html.ejs +0 -35
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# 6.5.0 (2024-12-18)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **dark theme:** revert localstorage/pref feature ([#4424](https://github.com/patternfly/patternfly-org/issues/4424)) ([0ffa269](https://github.com/patternfly/patternfly-org/commit/0ffa269a06d474a6a3069047e506ca83767d9e9c))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# 6.4.0 (2024-12-17)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* **ver:** fix release dropdown ([#4421](https://github.com/patternfly/patternfly-org/issues/4421)) ([efd6d87](https://github.com/patternfly/patternfly-org/commit/efd6d87d98fbf9b1f7036e9980da93ac256f7aed))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
# 6.3.0 (2024-12-17)
|
|
7
29
|
|
|
8
30
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useEffect, useState, createContext
|
|
1
|
+
import React, { useEffect, useState, createContext } from 'react';
|
|
2
2
|
import {
|
|
3
3
|
Button,
|
|
4
4
|
Page,
|
|
@@ -159,7 +159,7 @@ const HeaderTools = ({
|
|
|
159
159
|
onClick={() => setDropdownOpen(!isDropdownOpen)}
|
|
160
160
|
isExpanded={isDropdownOpen}
|
|
161
161
|
>
|
|
162
|
-
{
|
|
162
|
+
{`Release ${latestVersion.name}`}
|
|
163
163
|
</MenuToggle>
|
|
164
164
|
)}
|
|
165
165
|
popperProps={{ position: 'right' }}
|
|
@@ -232,26 +232,6 @@ export function attachDocSearch(algolia, inputSelector, timeout) {
|
|
|
232
232
|
}
|
|
233
233
|
}
|
|
234
234
|
|
|
235
|
-
const DARK_MODE_CLASS = 'pf-v6-theme-dark';
|
|
236
|
-
const DARK_MODE_STORAGE_KEY = 'dark-mode';
|
|
237
|
-
|
|
238
|
-
/**
|
|
239
|
-
* Determines if dark mode is enabled based on the stored value or the system preference.
|
|
240
|
-
* @returns {boolean} true if dark mode is enabled, false otherwise
|
|
241
|
-
*/
|
|
242
|
-
function isDarkModeEnabled() {
|
|
243
|
-
// When running in prerender mode we can't access the browser APIs.
|
|
244
|
-
if (process.env.PRERENDER) {
|
|
245
|
-
return false;
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
249
|
-
const storedValue = localStorage.getItem(DARK_MODE_STORAGE_KEY);
|
|
250
|
-
const isEnabled = storedValue === null ? mediaQuery.matches : storedValue === 'true';
|
|
251
|
-
|
|
252
|
-
return isEnabled;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
235
|
export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp }) => {
|
|
256
236
|
const algolia = process.env.algolia;
|
|
257
237
|
const hasGdprBanner = process.env.hasGdprBanner;
|
|
@@ -265,63 +245,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
|
|
|
265
245
|
|
|
266
246
|
const [versions, setVersions] = useState({ ...staticVersions });
|
|
267
247
|
const [isRTL, setIsRTL] = useState(false);
|
|
268
|
-
const [isDarkTheme,
|
|
269
|
-
|
|
270
|
-
/**
|
|
271
|
-
* Stores the dark mode preference in local storage and updates the dark mode class.
|
|
272
|
-
*/
|
|
273
|
-
const setIsDarkTheme = useCallback((value) => {
|
|
274
|
-
localStorage.setItem(DARK_MODE_STORAGE_KEY, value.toString());
|
|
275
|
-
updateDarkMode();
|
|
276
|
-
}, []);
|
|
277
|
-
|
|
278
|
-
/**
|
|
279
|
-
* Updates the dark mode class to the root element depending on whether dark mode is enabled.
|
|
280
|
-
*/
|
|
281
|
-
const updateDarkMode = useCallback(() => {
|
|
282
|
-
const isEnabled = isDarkModeEnabled();
|
|
283
|
-
const root = document.documentElement;
|
|
284
|
-
|
|
285
|
-
if (isEnabled) {
|
|
286
|
-
root.classList.add(DARK_MODE_CLASS);
|
|
287
|
-
} else {
|
|
288
|
-
root.classList.remove(DARK_MODE_CLASS);
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
setIsDarkThemeInternal(isEnabled);
|
|
292
|
-
}, []);
|
|
293
|
-
|
|
294
|
-
useEffect(() => {
|
|
295
|
-
// When running in prerender mode we can't access the browser APIs.
|
|
296
|
-
if (process.env.PRERENDER) {
|
|
297
|
-
return;
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
// Update the dark mode when the the user changes their system/browser preference.
|
|
301
|
-
const onQueryChange = () => {
|
|
302
|
-
// Remove the stored value to defer to the system preference.
|
|
303
|
-
localStorage.removeItem(DARK_MODE_STORAGE_KEY);
|
|
304
|
-
updateDarkMode();
|
|
305
|
-
};
|
|
306
|
-
|
|
307
|
-
// Update the dark mode when the user changes the preference in another context (e.g. tab or window).
|
|
308
|
-
/** @type {(event: StorageEvent) => void} */
|
|
309
|
-
const onStorageChange = (event) => {
|
|
310
|
-
if (event.key === DARK_MODE_STORAGE_KEY) {
|
|
311
|
-
updateDarkMode();
|
|
312
|
-
}
|
|
313
|
-
};
|
|
314
|
-
|
|
315
|
-
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
316
|
-
|
|
317
|
-
mediaQuery.addEventListener('change', onQueryChange);
|
|
318
|
-
window.addEventListener('storage', onStorageChange);
|
|
319
|
-
|
|
320
|
-
return () => {
|
|
321
|
-
mediaQuery.removeEventListener('change', onQueryChange);
|
|
322
|
-
window.removeEventListener('storage', onStorageChange);
|
|
323
|
-
};
|
|
324
|
-
}, []);
|
|
248
|
+
const [isDarkTheme, setIsDarkTheme] = React.useState(false);
|
|
325
249
|
|
|
326
250
|
useEffect(() => {
|
|
327
251
|
if (typeof window === 'undefined') {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/documentation-framework",
|
|
3
3
|
"description": "A framework to build documentation for PatternFly.",
|
|
4
|
-
"version": "6.
|
|
4
|
+
"version": "6.5.0",
|
|
5
5
|
"author": "Red Hat",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"private": false,
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"@babel/preset-env": "^7.24.3",
|
|
14
14
|
"@babel/preset-react": "^7.24.1",
|
|
15
15
|
"@mdx-js/util": "1.6.16",
|
|
16
|
-
"@patternfly/ast-helpers": "^1.4.0-alpha.
|
|
16
|
+
"@patternfly/ast-helpers": "^1.4.0-alpha.141",
|
|
17
17
|
"@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
|
|
18
18
|
"autoprefixer": "9.8.6",
|
|
19
19
|
"babel-loader": "^9.1.3",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
"react": "^17.0.0 || ^18.0.0",
|
|
81
81
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "f01ea07e913ca1b0cc91d89d5d3ba135879d428b"
|
|
84
84
|
}
|
package/templates/html.ejs
CHANGED
|
@@ -13,41 +13,6 @@
|
|
|
13
13
|
<meta name="mobile-web-app-capable" content="yes">
|
|
14
14
|
<meta name="theme-color" content="#151515">
|
|
15
15
|
<meta name="application-name" content="PatternFly docs">
|
|
16
|
-
<script>
|
|
17
|
-
(() => {
|
|
18
|
-
"use strict";
|
|
19
|
-
|
|
20
|
-
const DARK_MODE_CLASS = "pf-v6-theme-dark";
|
|
21
|
-
const DARK_MODE_STORAGE_KEY = "dark-mode";
|
|
22
|
-
const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
23
|
-
|
|
24
|
-
// Ensure that the dark mode is correctly set before the page starts rendering.
|
|
25
|
-
updateDarkMode();
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* Applies the dark mode class to the root element if dark mode is enabled.
|
|
29
|
-
*/
|
|
30
|
-
function updateDarkMode() {
|
|
31
|
-
const isEnabled = isDarkModeEnabled();
|
|
32
|
-
const root = document.documentElement;
|
|
33
|
-
|
|
34
|
-
if (isEnabled) {
|
|
35
|
-
root.classList.add(DARK_MODE_CLASS);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/**
|
|
40
|
-
* Determines if dark mode is enabled based on the stored value or the system preference.
|
|
41
|
-
* @returns {boolean} true if dark mode is enabled, false otherwise
|
|
42
|
-
*/
|
|
43
|
-
function isDarkModeEnabled() {
|
|
44
|
-
const storedValue = localStorage.getItem(DARK_MODE_STORAGE_KEY);
|
|
45
|
-
const isEnabled = storedValue === null ? darkModeQuery.matches : storedValue === "true";
|
|
46
|
-
|
|
47
|
-
return isEnabled;
|
|
48
|
-
}
|
|
49
|
-
})();
|
|
50
|
-
</script>
|
|
51
16
|
<%= htmlWebpackPlugin.tags.headTags %>
|
|
52
17
|
</head>
|
|
53
18
|
<body>
|