footer, root module nav, and main page done
This commit is contained in:
parent
cd1226e333
commit
23719ec405
GPG key ID:
4E4A5AD1FB748427
17 changed files with 519 additions and 34 deletions
34
src/components/Footer.astro
Normal file
34
src/components/Footer.astro
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
---
|
||||
import { getHTMLIcon } from "./iconsModule";
|
||||
|
||||
const gitString = getHTMLIcon("git");
|
||||
const matrixString = getHTMLIcon("matrix");
|
||||
---
|
||||
<footer>
|
||||
<section class="_credits">
|
||||
<span>
|
||||
<a target="_blank" rel="noreferrer" href="https://git.outfoxxed.me/outfoxxed">outfoxxed</a>
|
||||
<em>[Main Developer]</em>
|
||||
</span>
|
||||
<span>
|
||||
<a target="_blank" rel="noreferrer" href="https://github.com/Xanazf">Xanazf</a>
|
||||
<em>[Web Designer & Developer]</em>
|
||||
</span>
|
||||
</section>
|
||||
<section class="_socials">
|
||||
<span class="matrix">
|
||||
<a href="https://matrix.to/#/#quickshell:outfoxxed.me" target="_blank" rel="noreferrer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256">
|
||||
<path fill="currentColor" d={matrixString}/>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
<span class="git">
|
||||
<a href="https://git.outfoxxed.me/outfoxxed/quickshell" target="_blank" rel="noreferrer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 92 92">
|
||||
<path fill="currentColor" d={gitString}/>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</section>
|
||||
</footer>
|
||||
|
|
@ -56,6 +56,7 @@ const { headings } = Astro.props;
|
|||
</div>
|
||||
<div class="header-item header-right">
|
||||
<Search/>
|
||||
<div class="spacer-mobile">|</div>
|
||||
<div class="spacer-desktop">|</div>
|
||||
<ThemeSelect client:load />
|
||||
<div class="spacer-mobile">|</div>
|
||||
|
|
|
|||
|
|
@ -475,3 +475,23 @@ export const LoadingSpinner: VoidComponent<{
|
|||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const LinkSimple: VoidComponent<{
|
||||
class?: string;
|
||||
}> = props => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 256 256"
|
||||
class={props.class}
|
||||
>
|
||||
<title>Go to</title>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M165.66 90.34a8 8 0 0 1 0 11.32l-64 64a8 8 0 0 1-11.32-11.32l64-64a8 8 0 0 1 11.32 0M215.6 40.4a56 56 0 0 0-79.2 0l-30.06 30.05a8 8 0 0 0 11.32 11.32l30.06-30a40 40 0 0 1 56.57 56.56l-30.07 30.06a8 8 0 0 0 11.31 11.32l30.07-30.11a56 56 0 0 0 0-79.2m-77.26 133.82l-30.06 30.06a40 40 0 1 1-56.56-56.57l30.05-30.05a8 8 0 0 0-11.32-11.32L40.4 136.4a56 56 0 0 0 79.2 79.2l30.06-30.07a8 8 0 0 0-11.32-11.31"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
const magnifier =
|
||||
"M232.49 215.51L185 168a92.12 92.12 0 1 0-17 17l47.53 47.54a12 12 0 0 0 17-17ZM44 112a68 68 0 1 1 68 68a68.07 68.07 0 0 1-68-68";
|
||||
|
||||
const git =
|
||||
"M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371";
|
||||
|
||||
const matrix =
|
||||
"M72 216a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8V40a8 8 0 0 1 8-8h24a8 8 0 0 1 0 16H48v160h16a8 8 0 0 1 8 8M216 32h-24a8 8 0 0 0 0 16h16v160h-16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8m-32 88a32 32 0 0 0-56-21.13a31.93 31.93 0 0 0-40.71-6.15A8 8 0 0 0 72 96v64a8 8 0 0 0 16 0v-40a16 16 0 0 1 32 0v40a8 8 0 0 0 16 0v-40a16 16 0 0 1 32 0v40a8 8 0 0 0 16 0Z";
|
||||
|
||||
function getHTMLIcon(name: string): string {
|
||||
const hashmap = {
|
||||
magnifier: () => magnifier,
|
||||
git: () => git,
|
||||
matrix: () => matrix,
|
||||
};
|
||||
|
||||
return hashmap[name as keyof typeof hashmap]();
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { type Component, Index, For } from "solid-js";
|
||||
import { Accordion } from "@ark-ui/solid";
|
||||
|
||||
import { ShevronSmallDown } from "@icons";
|
||||
import { LinkSimple, ShevronSmallDown } from "@icons";
|
||||
import type { TreeProps } from "../types";
|
||||
|
||||
export const Tree: Component<TreeProps> = props => {
|
||||
|
|
@ -118,6 +118,44 @@ export const Tree: Component<TreeProps> = props => {
|
|||
</Index>
|
||||
</Accordion.ItemContent>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item
|
||||
value="QtQuick Type Reference"
|
||||
id="qtquick-reference"
|
||||
>
|
||||
<Accordion.ItemTrigger>
|
||||
<Accordion.ItemIndicator>
|
||||
<LinkSimple />
|
||||
</Accordion.ItemIndicator>
|
||||
<span>
|
||||
<a
|
||||
href="https://doc.qt.io/qt-6/qtquick-qmlmodule.html"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
QtQuick Type Reference
|
||||
</a>
|
||||
</span>
|
||||
</Accordion.ItemTrigger>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item
|
||||
value="Quickshell Examples"
|
||||
id="quickshell-examples"
|
||||
>
|
||||
<Accordion.ItemTrigger>
|
||||
<Accordion.ItemIndicator>
|
||||
<LinkSimple />
|
||||
</Accordion.ItemIndicator>
|
||||
<span>
|
||||
<a
|
||||
href="https://git.outfoxxed.me/outfoxxed/quickshell-examples"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Quickshell Examples
|
||||
</a>
|
||||
</span>
|
||||
</Accordion.ItemTrigger>
|
||||
</Accordion.Item>
|
||||
</Accordion.Root>
|
||||
</nav>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue