Skip to content

Commit

Permalink
uwu+sidebarfix
Browse files Browse the repository at this point in the history
  • Loading branch information
@thonkinator
thonkinator committed May 2, 2024
1 parent 5b812dc commit 7afbc99
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 76 deletions.
139 changes: 76 additions & 63 deletions src/components/Sidebar.astro
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
---
const sectionlist = {
"introduction": {
name: "Introduction"
introduction: {
name: "Introduction",
},
"reactivity": {
name: "Reactivity"
reactivity: {
name: "Reactivity",
},
"components": {
name: "Components"
components: {
name: "Components",
},
"css": {
name: "CSS"
css: {
name: "CSS",
},
}
};
const sections = {}
const sections = {};
let globs = await Astro.glob("pages/**/*.(md|mdx)");
Expand All @@ -29,16 +27,20 @@ for (let glob of globs) {
}
for (let section in sections) {
let glob = sections[section]
sections[section] = glob.sort((a, b) => a.frontmatter.order - b.frontmatter.order)
.map(({ getHeadings, url }) => {
return {
headings: getHeadings(),
url,
active: Astro.url.pathname === url
};
})
}
let glob = sections[section];
sections[section] = glob
.sort((a, b) => a.frontmatter.order - b.frontmatter.order)
.map(({ getHeadings, url }) => {
return {
headings: getHeadings(),
url,
active: Astro.url.pathname === url,
};
});
}
import { Icon } from "astro-icon/components";
const UntypedIcon = Icon as any;
---

<input type="checkbox" id="sidebar" />
Expand All @@ -57,37 +59,33 @@ for (let section in sections) {
fill="currentColor"></path>
</svg>
</label>
<home>
<img src="/logo.svg" alt="dreamland" />
<h2><a href="/">dreamland</a></h2>
</home>
<a href="/">
<img src="/logo.svg" alt="dreamland" class="uwuhide" />
<h2 class="uwuhide">dreamland</h2>
<UntypedIcon class="uwushow" name="uwu" width="100%" height={undefined} alt="dreamland.js" />
</a>
<a href="/learn" class:list={[Astro.url.pathname == "/learn" && "active"]}>Getting Started</a>
{
Object.entries(sectionlist)
.map(([section, { name }]) => (

<>
<h3>{name}</h3>
{
sections[section].map(({ url, headings: [title, ...headings], active }) => (
Object.entries(sectionlist).map(([section, { name }]) => (
<>
<a href={url || "/"} class:list={[{ active }]}>
{title.text}
</a>
{active &&
headings
.filter((heading) => heading.depth == 2)
.map((heading) => (
<a href={url + "#" + heading.slug} class="sub">
{heading.text}
</a>
))}
<h3>{name}</h3>
{sections[section].map(({ url, headings: [title, ...headings], active }) => (
<>
<a href={url || "/"} class:list={[{ active }]}>
{title.text}
</a>
{active &&
headings
.filter((heading) => heading.depth == 2)
.map((heading) => (
<a href={url + "#" + heading.slug} class="sub">
{heading.text}
</a>
))}
</>
))}
</>
))
}
</>
))

))
}
</nav>
</aside>
Expand Down Expand Up @@ -137,7 +135,7 @@ for (let section in sections) {
}
aside {
z-index: 1;
width: 15rem;
width: 16rem;
height: 100vh;
flex-shrink: 0;
@media (max-width: 64rem) {
Expand All @@ -148,13 +146,14 @@ for (let section in sections) {
display: flex;
flex-direction: column;
width: inherit;
border-right: thin solid var(--bd);
padding-left: 1rem;
margin: 12px 0;
position: fixed;
background-color: var(--bg);
top: 0;
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
@media (max-width: 64rem) {
margin: 0;
right: 100%;
Expand All @@ -163,11 +162,19 @@ for (let section in sections) {
transform: translateX(100%);
}
}
&::after {
content: "";
position: absolute;
width: 1px;
height: 100%;
background-color: var(--bd);
right: 0;
z-index: -1;
}
a {
color: currentColor;
text-decoration: none;
position: relative;
overflow: hidden;
margin-right: -1px;
&.sub {
margin-left: 0.75rem;
Expand All @@ -186,7 +193,7 @@ for (let section in sections) {
border-top: thin solid transparent;
border-right: thin solid transparent;
top: 50%;
right: -1px;
right: 1px;
transform: translate(50%, -50%) rotate(45deg);
view-transition-name: pointer;
@media (max-width: 64rem) {
Expand All @@ -196,30 +203,36 @@ for (let section in sections) {
}
}
}
h3 {
margin: 0.5rem 0;
}
> a {
padding: 0.25rem 0;
padding-left: 0.75rem;
color: #bbb;
&:hover {
text-decoration: underline;
}
}
> home {
display: flex;
align-items: center;
gap: 1rem;
> img {
h2 {
color: white;
}
&:first-of-type {
padding: 0;
text-decoration: none;
}
img {
width: 2.5rem;
height: 2.5rem;
margin: 0.5rem 0;
}
}

> home + a {
padding: 0;
}
> h3 {
/* border-left: thin solid var(--bd); */
svg {
margin-top: 1rem;
margin-right: 1rem;
margin-bottom: 1rem;
}
}
}
</style>
18 changes: 17 additions & 1 deletion src/layouts/Base.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,23 @@ import "styles/style.css";
<title>{title}</title>
<ViewTransitions />
<script>
if (new URLSearchParams(document.location.search).has("uwu")) document.body.classList.add("uwu");
function uwu() {
if (
new URLSearchParams(document.location.search).has("uwu") &&
!document.body.classList.contains("uwu")
) {
document.body.classList.add("uwu");
Array.from(document.getElementsByTagName("a")).forEach((a) => {
const url = new URL(a.href, new URL(document.location.toString()));
if (url.origin == document.location.origin) {
url.searchParams.set("uwu", "");
a.href = url.href;
}
});
}
}
document.addEventListener("astro:page-load", uwu);
uwu();
</script>
</head>
<body>
Expand Down
7 changes: 3 additions & 4 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ const UntypedIcon = Icon as any;

<Base title="dreamland.js">
<div id="hero">
<img src="/logo.png" width="144" height="144" />
<h1>dreamland.js</h1>
<UntypedIcon name="uwu" width="24rem" height={undefined} alt="dreamland.js" />
<img src="/logo.png" width="144" height="144" class="uwuhide" />
<h1 class="uwuhide">dreamland.js</h1>
<UntypedIcon class="uwushow" name="uwu" width="24rem" height={undefined} alt="dreamland.js" />
<p>A utilitarian framework for creating simple UI in javascript</p>
</div>

Expand Down Expand Up @@ -108,7 +108,6 @@ document.body.appendChild(root);
}
svg {
margin-top: 2rem;
display: none;
}
}

Expand Down
17 changes: 9 additions & 8 deletions src/styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,15 @@ main {
background-color: #201d20 !important;
}

.uwushow {
display: none;
}

.uwu {
#hero {
img,
h1 {
display: none;
}
svg {
display: block !important;
}
.uwuhide {
display: none;
}
.uwushow {
display: block !important;
}
}

0 comments on commit 7afbc99

Please sign in to comment.