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

fixed styling for search bar, fixed positioning for widescreens(needs testing), restricted pagefind indexing, made titles top weight, added root module description

Browse source
This commit is contained in:
Xanazf 2024-10-11 16:05:44 +03:00
parent ab44ad8128
commit b65b93b5eb
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
11 changed files with 67 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/navigation/Search.astro
View file

@ -138,12 +138,12 @@ import { getQMLTypeLinkObject, getQMLTypeLink, getIconForLink } from '@src/confi
showSubResults: true,
processResult: (result: { url: string; excerpt:string; sub_results: Array<{ url: string, excerpt:string }> }) => {
result.url = formatURL(result.url);
result.excerpt = processExcerpt(result.excerpt)
result.sub_results = result.sub_results.map((sub_result) => {
sub_result.url = formatURL(sub_result.url);
sub_result.excerpt = processExcerpt(sub_result.excerpt)
return sub_result;
});
result.excerpt = processExcerpt(result.excerpt)
},
});
});

2
src/layouts/ConfigLayout.astro
View file

@ -33,7 +33,7 @@ const { headings, frontmatter } = Astro.props;
<slot />
</div>
</div>
<TOC mobile={false} headings={headings}/>
<TOC mobile={false} headings={headings} data-pagefind-ignore/>
</DocsLayout>
<TOCIntersectionObserver/>

6
src/layouts/DocsLayout.astro
View file

@ -67,8 +67,8 @@ if (url[2]) {
<Header headings={headings}/>
<div class="docslayout-root">
<Nav mobile={false}/>
<div class="docslayout-inner">
<Breadcrumbs crumbs={customBreadcrumbs} linkTextFormat="sentence" truncated={true}>
<div class="docslayout-inner" data-pagefind-body>
<Breadcrumbs crumbs={customBreadcrumbs} linkTextFormat="sentence" truncated={true} data-pagefind-ignore>
<svg
slot="index"
xmlns="http://www.w3.org/2000/svg"
@ -94,7 +94,7 @@ if (url[2]) {
></path></svg
>
</Breadcrumbs>
<slot />
<slot />
</div>
</div>
<Footer />

18
src/pages/docs/types/[type]/[name].astro
View file

@ -49,23 +49,26 @@ const sidebarData = {
const superLink = data.super ? getQMLTypeLink(data.super) : null;
const details = data.details ? await processQsMarkdown(data.details) : null;
const details = data.details
? await processQsMarkdown(data.details)
: null;
---
<DocsLayout title={`${route.name} - ${route.type}`} description={data?.description ?? ""}>
<div class="docs">
<div class="typedocs-content">
<hr />
<h2 class="typedocs-title">
<h2 class="typedocs-title" data-pagefind-weight="10">
{route.name}:
{data.super ? (
<a
target="_blank"
href={superLink!}
data-pagefind-ignore
>
{data.super.name}
</a>
):(
<span class="type-datatype">{data.type}</span>
<span class="type-datatype" data-pagefind-ignore>{data.type}</span>
)
}
</h2>
@ -73,17 +76,16 @@ const details = data.details ? await processQsMarkdown(data.details) : null;
route && data ? (
<section class="typedocs-data typedata">
<subheading class="typedocs-subheading">
<code class="type-module">import {data.module}</code>
<code class="type-module" data-pagefind-ignore>import {data.module}</code>
{data.flags ? (
<div class="type-flags">{data.flags.map(flag => (
<div class="type-flags" data-pagefind-ignore>{data.flags.map(flag => (
<span class="type-flag">
<Flag client:idle/>
{flag}
</span>
))}</div>
):null}
{details ? <span set:html={details}/> : null}
{!details ? (<span class="toparse">{data.description}</span>):null}
{details ? <span class="parsedMD" set:html={details}/> : (<span class="toparse">{data.description}</span>)}
</subheading>
{ data.properties && propsKeys ? (
<Properties
@ -112,7 +114,7 @@ const details = data.details ? await processQsMarkdown(data.details) : null;
) : null
}
</div>
<TOC mobile={false} types={sidebarData}/>
<TOC mobile={false} types={sidebarData} data-pagefind-ignore/>
</div>
</DocsLayout>

7
src/pages/docs/types/[type]/index.astro
View file

@ -1,6 +1,7 @@
---
import DocsLayout from "@layouts/DocsLayout.astro";
import { generateTypeData } from "@config/io/generateTypeData";
import { processQsMarkdown } from "@src/config/io/helpers";
export async function getStaticPaths() {
const routes = await generateTypeData();
@ -24,6 +25,9 @@ export async function getStaticPaths() {
});
}
const { route, children } = Astro.props;
const details = route.data.details
? await processQsMarkdown(route.data.details)
: null;
---
<DocsLayout
@ -32,7 +36,7 @@ const { route, children } = Astro.props;
>
<hr />
<h2 class="typedocs-title">{route.type[0].toUpperCase() + route.type.slice(1)} Definitions</h2>
<div class="root-nav">
<div class="root-nav" data-pagefind-ignore>
{route.data.contains!.map((childName:string) =>
(
<div class="root-nav-entry">
@ -46,4 +50,5 @@ const { route, children } = Astro.props;
)
)}
</div>
{details ? <span class="parsedMD" set:html={details}/> : (<span class="toparse">{route.data.description}</span>)}
</DocsLayout>

2
src/pages/index.astro
View file

@ -2,7 +2,7 @@
import BaseLayout from "@layouts/BaseLayout.astro";
---
<BaseLayout title="Quickshell" description="A fully user customizable desktop shell" image="/quickshell.png">
<div class="main-page_hero">
<div class="main-page_hero" data-pagefind-ignore>
<section class="main-page_hero-text">
<h2>A fully <em>user-customizable</em> desktop <em>shell</em></h2>
<h3>Based on QtQuick</h3>

11
src/styles/docs/docs.css
View file

@ -81,6 +81,7 @@ ul {
}
@media (min-width: 768px) {
.docs,
.docslayout-root {
gap: 0.648rem;
@ -88,7 +89,8 @@ ul {
.docslayout-root {
margin-left: calc(1.618rem + 260px);
padding-bottom: 3rem;
display: flex;
flex-direction: row;
}
.docs-content {
@ -109,6 +111,11 @@ ul {
}
@media (min-width: 1280px) {
.docs {
display: flex;
flex-direction: row;
}
.docs-content {
& section {
max-width: 45svw;
@ -116,7 +123,7 @@ ul {
}
.docslayout-root {
margin-inline: calc(10svw + 260px);
margin-inline: 15svw;
}
.docslayout-inner {

7
src/styles/docs/nav/nav.css
View file

@ -103,13 +103,12 @@
.nav-wrapper {
display: block;
width: 250px;
position: fixed;
top: 5rem;
bottom: 3rem;
position: sticky;
top: 4rem;
left: 1.618rem;
flex-shrink: 0;
overflow: scroll;
max-height: 90svh;
max-height: calc(100svh - 8rem);
scrollbar-width: none;
-ms-overflow-style: none;
z-index: 10;

34
src/styles/docs/nav/search.css
View file

@ -19,6 +19,12 @@
#qs_search .pagefind-ui__form::before {
--pagefind-ui-text: hsl(0 0 65);
opacity: 1;
outline: unset;
}
#qs_search .pagefind-ui--reset *:where( :not(html, iframe, canvas, img, svg, video):not(svg *,
symbol *)) {
outline: unset;
}
#qs_search .pagefind-ui__search-input {
@ -47,7 +53,7 @@
content: "";
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat;
background-color: hsl(var(--accent-600));
background-color: hsl(0 25 45);
display: block;
width: 100%;
height: 100%;
@ -140,7 +146,7 @@
inset-block: 0;
inset-inline-start: var(--search-tree-diagram-inline-start);
width: var(--search-tree-diagram-size);
background: hsl(var(--blue) 5 25);
background: hsl(var(--blue) 10 30);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
}
@ -161,6 +167,26 @@
overflow-wrap: anywhere;
}
#qs_search .pagefind-ui__result-inner>.pagefind-ui__result-excerpt {
display: inline-block;
position: relative;
background: hsl(0 0 10);
padding: var(--search-result-nested-pad-block) var(--search-result-pad-inline-end);
padding-inline-start: var(--search-result-pad-inline-start);
margin-top: unset;
&::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: var(--search-tree-diagram-inline-start);
width: var(--search-tree-diagram-size);
background: hsl(var(--blue) 10 30);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
}
}
#qs_search mark {
color: hsl(var(--blue) 15 60);
background-color: transparent;
@ -325,14 +351,14 @@ button[data-close-modal] {
}
}
html.dark button[data-open-modal] {
html.dark button[data-open-modal] {
background-color: hsla(var(--blue) 15 15 / 0.5);
color: hsl(var(--blue) 40 65);
&:hover {
color: hsl(var(--blue) 60 85);
}
}
}
#qs_search {
--search-cancel-space: 0px;

2
src/styles/docs/toc/toc.css
View file

@ -100,7 +100,7 @@
.toc-wrapper {
background-color: transparent;
display: block;
position: fixed;
position: sticky;
top: 5rem;
right: 8svw;
width: 18rem;

4
src/styles/global.css
View file

@ -113,8 +113,8 @@ html.dark {
}
footer {
position: absolute;
bottom: 0;
position: sticky;
bottom: -3.5rem;
z-index: 10;
width: 100%;
height: 3.5rem;