quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

initial commit

Browse source
This commit is contained in:
Xanazf 2024-09-28 02:35:19 +03:00
commit 3c2fb32b3e
73 changed files with 22349 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/components/hooks/CreateCopyButtons.astro Normal file
View file

@ -0,0 +1,52 @@
---
---
<script>
setTimeout(() => {
// code copy
let blocks = document.querySelectorAll("pre");
if (blocks.length > 0) {
blocks.forEach((block) => {
let button = document.createElement("button");
button.className = "copy-button";
button.innerHTML = `<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 256 256"
>
<path
fill="currentColor"
d="M200 32h-36.26a47.92 47.92 0 0 0-71.48 0H56a16 16 0 0 0-16 16v168a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-72 0a32 32 0 0 1 32 32H96a32 32 0 0 1 32-32m72 184H56V48h26.75A47.9 47.9 0 0 0 80 64v8a8 8 0 0 0 8 8h80a8 8 0 0 0 8-8v-8a47.9 47.9 0 0 0-2.75-16H200Z"
/>
</svg>
`;
button.onclick = () => {
let snippet = block.innerText ?? "";
navigator.clipboard.writeText(snippet);
button.classList.toggle("copied");
setTimeout(() => button.classList.remove("copied"), 1000);
};
block.appendChild(button);
});
}
}, 3001)
// heading copy
let headings = document.getElementsByClassName("heading")
if (headings.length > 0) {
for (const heading of headings) {
let button = heading.querySelector("span")
if (button) {
button.onclick = () => {
let link = window.location.href.split("#")[0];
link += `#-${heading.textContent?.slice(10).trimEnd().replaceAll(" ", "-").toLowerCase()}`;
navigator.clipboard.writeText(link);
heading.classList.toggle("copied")
setTimeout(() => heading.classList.remove("copied"), 1000);
}
}
}
}
</script>

107
src/components/hooks/CreateQMLCodeButtons.astro Normal file
View file

@ -0,0 +1,107 @@
---
---
<script>
const qtRegExp = /QT_(\w+)/g
const qsRegExp = /QS_(\w+)/g
setTimeout(() =>{
const blocks = document.querySelectorAll("pre")
if (blocks.length > 0) {
blocks.forEach((block) => {
const content = block.textContent
const elements = block.querySelectorAll("span")
const classElements:HTMLSpanElement[] = [];
if (elements.length === 0) {
console.log("NO SPAN ELEMENTS FOUND")
}
elements.forEach(element => {
const isClassColored = element.style.cssText === "color: rgb(255, 203, 107);"
const isSignal = element.innerText.trim().startsWith("on")
const qualifier = isClassColored && !isSignal
if (qualifier) {
const dotSibling = element.nextSibling
const isSplit = dotSibling?.textContent === "."
if (isSplit) {
let newInnerText = element.innerText + dotSibling.textContent + dotSibling.nextSibling?.textContent
if (dotSibling.nextSibling) {
dotSibling.nextSibling.textContent !== " {"
? dotSibling.nextSibling.remove()
: null
}
dotSibling.remove()
element.innerText = newInnerText
}
classElements.push(element)
}
})
if (content) {
const qtMatch = [...content.matchAll(qtRegExp)]
const qsMatch = [...content.matchAll(qsRegExp)]
if (qtMatch.length > 0) {
for (const qtMatching of qtMatch) {
const newATag = document.createElement("a")
const qtBelongs = qtMatching[0].split("_")[1].replace("11", "-") || null
const qtClass = qtMatching[1].split("_")[1]
const link = `https://doc.qt.io/qt-6/qml-${qtBelongs ? `${qtBelongs}-${qtClass.toLowerCase()}` : "qtquick-" + qtClass.toLowerCase()}.html`
newATag.target = "_blank"
newATag.href = link
newATag.innerText = qtClass
const homeElement = classElements.find(item => {
const spacing = item.innerText.replace(qtMatching[0], "")
if (item.innerText.trim() === qtMatching[0].trim()){
newATag.innerText = spacing + qtClass
return true
}
})
if (homeElement) {
homeElement.innerText = ""
homeElement.appendChild(newATag)
}
}
}
if (qsMatch.length > 0) {
for (const qsMatching of qsMatch) {
const newATag = document.createElement("a")
const qsBelongs = qsMatching[0].split("_")[1].replace("00", ".") || null
const qsClass = qsMatching[1].split("_")[1]
const link = `/docs/types/${qsBelongs ? `${qsBelongs}/${qsClass}` : qsClass}`
newATag.target = "_blank"
newATag.href = link
const homeElement = classElements.find(item => {
const existingItem = item.innerText.trim()
const matchingItem = qsMatching[0].trim()
const spacing = item.innerText.replace(existingItem, "")
if (existingItem === matchingItem) {
newATag.innerText = spacing + qsClass
return true
}
})
if (homeElement) {
homeElement.innerText = ""
if (homeElement.nextSibling) {
homeElement.nextSibling.textContent !== " {"
? homeElement.nextSibling.textContent = ""
: null
}
homeElement.appendChild(newATag)
}
}
}
}
});
}
},3000)
</script>

29
src/components/hooks/TOCIntersectionObserver.astro Normal file
View file

@ -0,0 +1,29 @@
---
---
<script>
window.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const heading = entry.target.querySelector('h2, h3, h4, h5, h6')
if(heading) {
const id = heading.id
if (entry.intersectionRatio > 0) {
const desktopElement = document.querySelector(`.toc-wrapper li a[href="#${id}"]`);
const mobileElement = document.querySelector(`.toc-wrapper-mobile li a[href="#${id}"]`);
const element = mobileElement?.checkVisibility() ? mobileElement : desktopElement;
element?.parentElement?.classList.add('active')
} else {
const desktopElement = document.querySelector(`.toc-wrapper li a[href="#${id}"]`);
const mobileElement = document.querySelector(`.toc-wrapper-mobile li a[href="#${id}"]`);
const element = mobileElement?.checkVisibility() ? mobileElement : desktopElement;
element?.parentElement?.classList.remove('active')
}
}
});
});
document.querySelectorAll('section[data-heading-rank]').forEach((section) => {
observer.observe(section);
});
});
</script>

101
src/components/hooks/ThemeSwitch.tsx Normal file
View file

@ -0,0 +1,101 @@
import {
createSignal,
createEffect,
onCleanup,
onMount,
type VoidComponent,
} from "solid-js";
import { Sun, Moon } from "@icons";
interface ThemeProps {
theme: "light" | "dark";
system: "light" | "dark";
}
const getCurrentTheme = (): ThemeProps => {
if (
typeof localStorage !== "undefined" &&
(localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches))
) {
return {
theme: "dark",
system: window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light",
};
}
return {
theme: "light",
system: window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light",
};
};
const updateTheme = () => {
document.documentElement.classList.add("changing-theme");
if (
localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
requestAnimationFrame(() => {
requestAnimationFrame(() => {
document.documentElement.classList.remove("changing-theme");
});
});
};
export const ThemeSelect: VoidComponent = () => {
const [currentTheme, setCurrentTheme] = createSignal<ThemeProps>({
theme: "dark",
system: "dark",
});
const [mounted, setMounted] = createSignal(false);
const toggleTheme = () => {
if (!mounted()) return;
setCurrentTheme(getCurrentTheme());
if (currentTheme()!.theme !== currentTheme()!.system) {
localStorage.removeItem("theme");
} else {
localStorage.theme = currentTheme()!.theme === "dark" ? "light" : "dark";
}
updateTheme();
setCurrentTheme(getCurrentTheme());
};
onMount(() => {
setMounted(true);
setCurrentTheme(getCurrentTheme());
});
createEffect(() => {
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
mediaQuery.addEventListener("change", updateTheme);
window.addEventListener("storage", updateTheme);
onCleanup(() => {
mediaQuery.removeEventListener("change", updateTheme);
window.removeEventListener("storage", updateTheme);
setMounted(false);
});
});
return (
<div onclick={toggleTheme} class="theme-toggle">
{(mounted() && currentTheme().theme === "light") ||
currentTheme().system === "light" ? (
<Sun class="theme-sun" />
) : (
<Moon class="theme-moon" />
)}
</div>
);
};

66
src/components/hooks/TransformLinks.astro Normal file
View file

@ -0,0 +1,66 @@
---
---
<script>
import { getQMLTypeLinkObject, getQMLTypeLink, getIconForLink } from "@config/io/helpers"
const detailsData = document.getElementsByTagName("p")
const innerItems = document.getElementsByClassName("typedata-details")
if (detailsData) {
for (const details of detailsData) {
const linkRegex = /TYPE99(\w+.)99TYPE/g
const mtypeExists = details.textContent?.match(linkRegex)
if (!mtypeExists || !details.textContent) {
continue;
}
const linkMatch = [...details.textContent.matchAll(linkRegex)]
let textWithLinks = details.textContent;
for (const matching of linkMatch) {
if (details.textContent.indexOf(matching[0]) === -1){
continue
}
const linkObject = getQMLTypeLinkObject(matching[1]);
const link = getQMLTypeLink(linkObject);
const icon = linkObject.mtype ? getIconForLink(linkObject.mtype, false) : null;
// for signal
const bracketString = getIconForLink("func", false)
const newLink = `<span class="type${linkObject.mtype}-link typedata-link">${icon ? icon : ""}<a href=${link}>${linkObject.mname || linkObject.name}</a>${linkObject.mtype === "signal" ? bracketString : ""}</span>`;
textWithLinks = textWithLinks.replace(matching[0], newLink)
}
details.innerHTML = textWithLinks
}
}
if (innerItems){
for (const innerItem of innerItems){
const linkRegex = /TYPE99(\w+.)99TYPE/g
const listItems = innerItem.getElementsByTagName("li")
for (const li of listItems){
const mtypeExists = li.textContent?.match(linkRegex)
if (!mtypeExists || !li.textContent){
continue
}
const linkMatch = [...li.textContent.matchAll(linkRegex)]
let textWithLinks = li.textContent;
for (const matching of linkMatch) {
if (li.textContent.indexOf(matching[0]) === -1){
continue
}
const linkObject = getQMLTypeLinkObject(matching[1]);
const link = getQMLTypeLink(linkObject);
const icon = linkObject.mtype ? getIconForLink(linkObject.mtype, false) : null;
// for signal
const bracketString = getIconForLink("func", false)
const newLink = `<span class="type${linkObject.mtype}-link typedata-link">${icon ? icon : ""}<a href=${link}>${linkObject.mname || linkObject.name}</a>${linkObject.mtype === "signal" ? bracketString : ""}</span>`;
textWithLinks = textWithLinks.replace(matching[0], newLink)
}
li.innerHTML = textWithLinks
}
}
}
</script>

21
src/components/hooks/TransformMDCodeblocks.astro Normal file
View file

@ -0,0 +1,21 @@
---
---
<script>
import { codeToHtml } from "shiki";
const injectedMd = document.getElementById("injectedMd");
if (injectedMd) {
const preElements = document.getElementsByTagName("pre");
for (const pre of preElements) {
if (pre.textContent){
const innerText = pre.innerText;
pre.outerHTML =
await codeToHtml(
innerText,
{
lang: "qml", "theme":"material-theme-ocean"
}
);
}
}
}
</script>