mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
ec28d8fee8
adds events page, updates convert-template script adds proper filter logic to events page, adds moment converts history page converts impact and xrpl-ledger-overview page try getting animation on impact to work converts xrp overview page and logic adds contribute page, still needs typeform integration and animations converts developer funding page adds dev tools page add missing image adds code samples py conversion to js adds hook to read current theme, adds animations to impact page adds careers animations adds correct animations for contribute page adds light mode v of animations on contribute page adds animations to uses page adds modal logos and uses modal logic completes uses page more changes Fix casing issues with use case files fix grid issue on uses
54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
/**
|
|
* Slugify function, has to match the formula used in interactive-tutorial.js
|
|
*/
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export const useThemeFromClassList = (classNames) => {
|
|
const [currentTheme, setCurrentTheme] = useState(null);
|
|
|
|
useEffect(() => {
|
|
// Function to update the theme based on the class list
|
|
const updateTheme = () => {
|
|
for (const className of classNames) {
|
|
if (document.documentElement.classList.contains(className)) {
|
|
setCurrentTheme(className);
|
|
return;
|
|
}
|
|
}
|
|
};
|
|
|
|
// Initial update
|
|
updateTheme();
|
|
|
|
// Create an observer instance linked to the callback function
|
|
const observer = new MutationObserver(() => {
|
|
updateTheme();
|
|
});
|
|
|
|
// Start observing the target node for configured mutations
|
|
observer.observe(document.documentElement, {
|
|
attributes: true, // Listen for attribute changes
|
|
attributeFilter: ['class'], // Specifically, listen only to "class" attribute changes
|
|
});
|
|
|
|
// Cleanup: Disconnect the observer
|
|
return () => {
|
|
observer.disconnect();
|
|
};
|
|
}, [classNames]);
|
|
|
|
return currentTheme;
|
|
};
|
|
|
|
export function slugify(s) {
|
|
const unacceptable_chars = /[^A-Za-z0-9._ ]+/g;
|
|
const whitespace_regex = /\s+/g;
|
|
s = s.replace(unacceptable_chars, "");
|
|
s = s.replace(whitespace_regex, "_");
|
|
s = s.toLowerCase();
|
|
if (!s) {
|
|
s = "_";
|
|
}
|
|
return s;
|
|
}
|