move type-link processing to build stage
This commit is contained in:
parent
ab2a9ca7ed
commit
6d353e0c6b
GPG key ID:
4C88A185FB89301E
15 changed files with 161 additions and 300 deletions
|
|
@ -1,107 +0,0 @@
|
|||
---
|
||||
|
||||
---
|
||||
<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>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
---
|
||||
---
|
||||
<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>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
---
|
||||
---
|
||||
<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>
|
||||
|
|
@ -3,18 +3,15 @@ import type {
|
|||
QMLTypeLinkObject,
|
||||
QuickshellFunction,
|
||||
} from "@config/io/types";
|
||||
import {
|
||||
parseMarkdown,
|
||||
getQMLTypeLink,
|
||||
} from "@config/io/helpers";
|
||||
import { getQMLTypeLink } from "@config/io/helpers";
|
||||
import { Tag } from "@icons";
|
||||
import TypeDetails from "./TypeDetails.astro"
|
||||
|
||||
export interface Props {
|
||||
funcData: QuickshellFunction[];
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { funcData, title } = Astro.props;
|
||||
const { funcData } = Astro.props;
|
||||
---
|
||||
<ul class="typedata typefuncs">
|
||||
{
|
||||
|
|
@ -51,9 +48,7 @@ const { funcData, title } = Astro.props;
|
|||
)
|
||||
:null
|
||||
}
|
||||
<section class="typedata-details">
|
||||
<div class="typedata-detailsdata" set:html={parseMarkdown(item.details, title)}/>
|
||||
</section>
|
||||
<TypeDetails markdown={item.details} />
|
||||
</li>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,21 +1,19 @@
|
|||
---
|
||||
import {
|
||||
parseMarkdown,
|
||||
getQMLTypeLink,
|
||||
} from "@config/io/helpers";
|
||||
import { getQMLTypeLink } from "@config/io/helpers";
|
||||
import type {
|
||||
QMLTypeLinkObject,
|
||||
QuickshellProps,
|
||||
} from "@config/io/types";
|
||||
import { Tag, Flag } from "@icons";
|
||||
|
||||
import TypeDetails from "./TypeDetails.astro"
|
||||
|
||||
export interface Props {
|
||||
propsKeys: string[];
|
||||
propsData: QuickshellProps;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { propsKeys, propsData, title } = Astro.props;
|
||||
const { propsKeys, propsData } = Astro.props;
|
||||
---
|
||||
<ul class="typedata typeprops">
|
||||
{
|
||||
|
|
@ -73,9 +71,7 @@ const { propsKeys, propsData, title } = Astro.props;
|
|||
</p>
|
||||
):null
|
||||
}
|
||||
<section class="typedata-details">
|
||||
<div id="injectedMd" class="typedata-detailsdata" set:html={parseMarkdown(propData.details, title)} />
|
||||
</section>
|
||||
<TypeDetails markdown={propData.details} />
|
||||
</li>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
---
|
||||
import type { QuickshellSignal } from "@config/io/types";
|
||||
import { Tag, PowerCord } from "@icons";
|
||||
import { parseMarkdown } from "@config/io/helpers";
|
||||
import TypeDetails from "./TypeDetails.astro";
|
||||
|
||||
export interface Props {
|
||||
signalKeys: string[];
|
||||
signalsData: QuickshellSignal;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { signalKeys, signalsData, title } = Astro.props;
|
||||
const { signalKeys, signalsData } = Astro.props;
|
||||
---
|
||||
<ul class="typedata typesignals">
|
||||
{
|
||||
|
|
@ -44,9 +43,7 @@ const { signalKeys, signalsData, title } = Astro.props;
|
|||
</p>
|
||||
) : null
|
||||
}
|
||||
<section class="typedata-details">
|
||||
<div class="typedata-detailsdata" set:html={parseMarkdown(signalData.details, title)} />
|
||||
</section>
|
||||
<TypeDetails markdown={signalData.details} />
|
||||
</li>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
14
src/components/type/TypeDetails.astro
Normal file
14
src/components/type/TypeDetails.astro
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
import { processQsMarkdown } from "@config/io/helpers"
|
||||
|
||||
export interface Props {
|
||||
markdown?: string,
|
||||
}
|
||||
|
||||
const { markdown } = Astro.props;
|
||||
|
||||
const html = markdown ? await processQsMarkdown(markdown) : null;
|
||||
---
|
||||
<section class="typedata-details">
|
||||
{html ? <div class="typedata-detailsdata" set:html={html} /> : <em>No details provided</em>}
|
||||
</section>
|
||||
|
|
@ -1,15 +1,14 @@
|
|||
---
|
||||
import type { QuickshellVariant } from "@config/io/types";
|
||||
import { FourDiamonds } from "../icons";
|
||||
import { parseMarkdown } from "@src/config/io/helpers";
|
||||
import TypeDetails from "./TypeDetails.astro";
|
||||
|
||||
export interface Props {
|
||||
variantKeys: string[];
|
||||
variantsData: QuickshellVariant;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { variantKeys, variantsData, title } = Astro.props;
|
||||
const { variantKeys, variantsData } = Astro.props;
|
||||
---
|
||||
<ul class="typedata typevariants">
|
||||
{
|
||||
|
|
@ -34,9 +33,7 @@ const { variantKeys, variantsData, title } = Astro.props;
|
|||
)
|
||||
:null
|
||||
}
|
||||
<section class="typedata-details">
|
||||
<div class="typedata-detailsdata" set:html={parseMarkdown(variantData.details, title)} />
|
||||
</section>
|
||||
<TypeDetails markdown={variantData.details} />
|
||||
</li>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue