Upload and test
This commit is contained in:
MangoPig
@@ -0,0 +1,44 @@
|
||||
---
|
||||
// Path: src/components/Navbar/DarkModeToggle.astro
|
||||
import Sun from "../SVGs/Sun.astro";
|
||||
import Moon from "../SVGs/Moon.astro";
|
||||
import styles from "./DarkModeToggle.module.scss";
|
||||
---
|
||||
|
||||
<button id="theme-toggle" aria-label="Toggle Dark Mode" class={styles["toggle-btn"]}>
|
||||
<div class={styles["icon-container"]}>
|
||||
<span class={`${styles["color-icon"]} ${styles["moon-wrapper"]}`}>
|
||||
<Moon />
|
||||
</span>
|
||||
<span class={`${styles["color-icon"]} ${styles["sun-wrapper"]}`}>
|
||||
<Sun />
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
const handleToggleClick = () => {
|
||||
const root = document.documentElement;
|
||||
const isDark = root.classList.contains("dark");
|
||||
const targetTheme = isDark ? "light" : "dark";
|
||||
|
||||
if (targetTheme === "dark") {
|
||||
root.classList.add("dark");
|
||||
root.setAttribute("data-theme", "dark");
|
||||
} else {
|
||||
root.classList.remove("dark");
|
||||
root.setAttribute("data-theme", "light");
|
||||
}
|
||||
|
||||
localStorage.setItem("theme", targetTheme);
|
||||
};
|
||||
|
||||
document.addEventListener("astro:page-load", () => {
|
||||
const toggleBtn = document.getElementById("theme-toggle");
|
||||
|
||||
if (toggleBtn) {
|
||||
toggleBtn.removeEventListener("click", handleToggleClick);
|
||||
toggleBtn.addEventListener("click", handleToggleClick);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,64 @@
|
||||
/* Path: src/components/Navbar/DarkModeToggle.module.scss */
|
||||
|
||||
.toggle-btn {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
padding: 0;
|
||||
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
|
||||
flex-shrink: 0;
|
||||
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
transition: background-color 500ms;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(128, 128, 128, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
position: relative;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.color-icon {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition:
|
||||
transform 1000ms ease,
|
||||
opacity 500ms;
|
||||
}
|
||||
|
||||
.moon-wrapper {
|
||||
transform: rotate(90deg);
|
||||
opacity: 0;
|
||||
|
||||
:global([data-theme="dark"]) & {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.sun-wrapper {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
|
||||
:global([data-theme="dark"]) & {
|
||||
transform: rotate(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
44
00-Lesson-Site/frontend/src/components/Navbar/Navbar.astro
Normal file
44
00-Lesson-Site/frontend/src/components/Navbar/Navbar.astro
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
// Path: src/components/Navbar/Navbar.astro
|
||||
|
||||
import "../../styles/main.scss";
|
||||
import styles from "./Navbar.module.scss";
|
||||
|
||||
import DarkModeToggle from "./DarkModeToggle.astro";
|
||||
import UserIcon from "./UserIcon.astro";
|
||||
|
||||
const pathname = new URL(Astro.request.url).pathname;
|
||||
const isActive = pathname === "/" || pathname === "";
|
||||
---
|
||||
|
||||
<nav class={styles.navbar}>
|
||||
<a href="/" class:list={[styles["nav-logo"], { [styles["active"]]: isActive }]}> LeafPig </a>
|
||||
|
||||
<ul class={styles["nav-links"]}>
|
||||
<li>
|
||||
<a href="/lessons" class:list={[{ [styles["active"]]: pathname.startsWith("/lessons") }]}>
|
||||
Lessons
|
||||
{pathname.startsWith("/lessons") && <span class={styles["magic-line"]} transition:name="nav-underline" />}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/changelog" class:list={[{ [styles["active"]]: pathname.startsWith("/changelog") }]}>
|
||||
Changelog
|
||||
{pathname.startsWith("/changelog") && <span class={styles["magic-line"]} transition:name="nav-underline" />}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/resources" class:list={[{ [styles["active"]]: pathname.startsWith("/resources") }]}>
|
||||
Resources
|
||||
{pathname.startsWith("/resources") && <span class={styles["magic-line"]} transition:name="nav-underline" />}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class={styles["nav-right"]} transition:persist="nav-tools">
|
||||
<DarkModeToggle />
|
||||
<UserIcon />
|
||||
</div>
|
||||
</nav>
|
||||
@@ -0,0 +1,97 @@
|
||||
/* Path: src/components/Navbar/Navbar.module.scss */
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
padding: 0.75rem 2rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
font-size: 1.5rem;
|
||||
transition:
|
||||
transform 1000ms ease,
|
||||
opacity 500ms;
|
||||
|
||||
color: color-adjust(text, 0, 0);
|
||||
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
|
||||
margin-right: auto;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: color-adjust(text, 0, 0);
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -4px;
|
||||
transform-origin: left;
|
||||
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
&:hover::after,
|
||||
&:focus::after,
|
||||
&.active::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
margin-right: 2rem;
|
||||
justify-items: end;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin-left: 2rem;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: color-adjust(text, 0, 0);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
|
||||
transition: color 300ms ease-in-out;
|
||||
|
||||
&.active {
|
||||
color: color-adjust(secondary, 0, 0);
|
||||
}
|
||||
|
||||
.magic-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -4px;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: color-adjust(secondary, 0, 0);
|
||||
z-index: 10;
|
||||
contain: layout;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
16
00-Lesson-Site/frontend/src/components/Navbar/UserIcon.astro
Normal file
16
00-Lesson-Site/frontend/src/components/Navbar/UserIcon.astro
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
// Path: src/components/Navbar/UserIcon.astro
|
||||
|
||||
import ProfileSpinner from "../SVGs/ProfileSpinner.astro";
|
||||
import UserSVG from "../SVGs/UserSVG.astro";
|
||||
import styles from "./UserIcon.module.scss";
|
||||
---
|
||||
|
||||
<a class={styles["user-icon"]}>
|
||||
<div class={styles["spin-container"]}>
|
||||
<div class={styles["spin-animation"]}>
|
||||
<ProfileSpinner />
|
||||
</div>
|
||||
</div>
|
||||
<UserSVG />
|
||||
</a>
|
||||
@@ -0,0 +1,65 @@
|
||||
/* Path: src/components/Navbar/UserIcon.module.scss */
|
||||
|
||||
.user-icon {
|
||||
display: inline-flex;
|
||||
// 1. Fix alignment (Flexbox uses justify-content)
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
// 2. Create a positioning context for the absolute child
|
||||
position: relative;
|
||||
|
||||
margin-left: 1rem;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 50%;
|
||||
|
||||
// Optional: Reset link styles
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// 3. Trigger the animation when the USER hovers the main button
|
||||
&:hover .spin-container {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
|
||||
.spin-container {
|
||||
position: absolute;
|
||||
// 4. Force the container to fill the parent exactly
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// Animation 1: Rotate CCW fast
|
||||
animation: spin 1.5s ease-in-out infinite reverse;
|
||||
animation-play-state: paused;
|
||||
|
||||
// Allow clicks to pass through to the link/button underneath
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.spin-animation {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
animation: spin 15s linear infinite normal;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
// Path: src/components/Post/Blockquotes/Ganbatte.astro
|
||||
|
||||
import styles from "./Ganbatte.module.scss";
|
||||
|
||||
interface Props {
|
||||
toc?: string;
|
||||
tocLevel?: string;
|
||||
imageAlt?: string;
|
||||
}
|
||||
|
||||
const { toc, tocLevel = "1", imageAlt = "MangoPig Ganbatte" } = Astro.props;
|
||||
---
|
||||
|
||||
<blockquote class={styles.ganbatte} data-toc={toc} data-toc-level={tocLevel}>
|
||||
<slot />
|
||||
|
||||
<picture>
|
||||
<img src="https://pic.mangopig.tech/i/4c4d1b5f-b9ce-4952-a1b4-991b19c0adb5.png" alt={imageAlt} />
|
||||
</picture>
|
||||
</blockquote>
|
||||
@@ -0,0 +1,41 @@
|
||||
/* Path: src/components/Post/Blockquotes/Ganbatte.module.scss */
|
||||
|
||||
.ganbatte {
|
||||
background-color: #fff45e1a;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
|
||||
picture {
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
right: -10px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
width: 200px;
|
||||
max-width: 30%;
|
||||
|
||||
transform: rotate(10deg);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 20px;
|
||||
margin-right: 220px;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 30px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
// Path: src/components/Post/Blockquotes/Important.astro
|
||||
|
||||
import styles from "./Important.module.scss";
|
||||
---
|
||||
|
||||
<blockquote class={styles.important}>
|
||||
<slot />
|
||||
<picture class={styles.sticker}>
|
||||
<img src="https://pic.mangopig.tech/i/7eb5b343-5ddf-47ae-a272-4b82ca3d53d7.webp" alt="MangoPig Important" />
|
||||
</picture>
|
||||
</blockquote>
|
||||
@@ -0,0 +1,55 @@
|
||||
/* Path: src/components/Post/Blockquotes/Important.module.scss */
|
||||
|
||||
.important {
|
||||
background-color: #ff5e5e33;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
|
||||
font-weight: 500;
|
||||
|
||||
.sticker {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: -10px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
width: 100px;
|
||||
max-width: 30%;
|
||||
|
||||
transform: rotate(10deg);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 20px;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
margin-top: 20px;
|
||||
padding-left: 20px;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
span {
|
||||
// Place in middle vertically
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 30px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
// Path: src/components/Post/Blockquotes/Info.astro
|
||||
|
||||
import styles from "./Info.module.scss";
|
||||
---
|
||||
|
||||
<blockquote class={styles.info}>
|
||||
<slot />
|
||||
<picture class={styles.sticker}>
|
||||
<img src="https://pic.mangopig.tech/i/ebf2e26a-8791-4277-90cb-079ad7454aef.webp" alt="MangoPig Ganbattte" />
|
||||
</picture>
|
||||
</blockquote>
|
||||
@@ -0,0 +1,53 @@
|
||||
/* Path: src/components/Post/Blockquotes/Info.module.scss */
|
||||
|
||||
.info {
|
||||
background-color: #5efaff1a;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
|
||||
.sticker {
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
right: -10px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
width: 100px;
|
||||
max-width: 30%;
|
||||
|
||||
transform: rotate(10deg);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 20px;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
margin-top: 20px;
|
||||
padding-left: 20px;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
span {
|
||||
// Place in middle vertically
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 30px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
---
|
||||
// Path: src/components/Post/Blockquotes/QA.astro
|
||||
import styles from "./QA.module.scss";
|
||||
---
|
||||
|
||||
<div class={styles.qaContainer}>
|
||||
{/* The Question Section */}
|
||||
<div class={styles.questionHeader}>
|
||||
<span class={styles.prefix}>Q:</span>
|
||||
<span class={styles.questionText}>
|
||||
<slot name="question" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* The Answer Section (Default Slot) */}
|
||||
<div class={styles.answerBody}>
|
||||
<span class={styles.prefix}>A:</span>
|
||||
<div class={styles.answerContent}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* The Sticker */}
|
||||
<picture class={styles.sticker}>
|
||||
<img src="https://pic.mangopig.tech/i/4c4d1b5f-b9ce-4952-a1b4-991b19c0adb5.png" alt="Thinking MangoPig" />
|
||||
</picture>
|
||||
</div>
|
||||
@@ -0,0 +1,78 @@
|
||||
/* Path: src/components/Post/Blockquotes/QA.module.scss */
|
||||
|
||||
.qaContainer {
|
||||
// Use a yellowish tint to differentiate from Info block
|
||||
background-color: #fff45e26;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
min-height: 120px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
// --- Sticker Logic (Same as Info block) ---
|
||||
.sticker {
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
right: -10px;
|
||||
margin: 0;
|
||||
width: 100px;
|
||||
max-width: 30%;
|
||||
// Rotate opposite way for variety
|
||||
transform: rotate(-10deg);
|
||||
pointer-events: none;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
//Common prefix style (Q: and A:)
|
||||
.prefix {
|
||||
font-weight: 800;
|
||||
color: #ffbd72; // Matches your H2 color scheme
|
||||
margin-right: 12px;
|
||||
display: inline-block;
|
||||
min-width: 25px;
|
||||
}
|
||||
|
||||
// --- Question Section ---
|
||||
.questionHeader {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.1em;
|
||||
font-weight: 700;
|
||||
// Ensure text doesn't hit the sticker
|
||||
margin-right: 90px;
|
||||
color: color-adjust(primary, 0, 0);
|
||||
}
|
||||
|
||||
// --- Answer Section ---
|
||||
.answerBody {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
// Ensure text doesn't hit the sticker
|
||||
margin-right: 90px;
|
||||
}
|
||||
|
||||
.answerContent {
|
||||
flex: 1;
|
||||
line-height: 1.6;
|
||||
|
||||
// Handle standard markdown elements inside the answer slot
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 1em;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
// Path: src/components/Post/FloatingTOC.astro
|
||||
import styles from "./FloatingTOC.module.scss";
|
||||
---
|
||||
|
||||
<nav class={styles.toc} aria-label="Table of Contents">
|
||||
<ul id="toc-list"></ul>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
function generateTOC() {
|
||||
const content = document.getElementById("lesson-container");
|
||||
const list = document.getElementById("toc-list");
|
||||
|
||||
if (list) list.innerHTML = "";
|
||||
if (!content || !list) return;
|
||||
|
||||
const targets = content.querySelectorAll("[data-toc]");
|
||||
|
||||
targets.forEach((el, index) => {
|
||||
const label = el.getAttribute("data-toc") || "";
|
||||
const level = el.getAttribute("data-toc-level") || "1";
|
||||
|
||||
// --- CHANGED SECTION START: ID Generation (Slugify) ---
|
||||
if (!el.id) {
|
||||
// Convert "Setting Up Developer Environment" -> "setting-up-developer-environment"
|
||||
const slug = label
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
.replace(/[^\w\s-]/g, "") // Remove non-word chars
|
||||
.replace(/[\s_-]+/g, "-") // Replace spaces with dashes
|
||||
.replace(/^-+|-+$/g, ""); // Trim dashes from start/end
|
||||
|
||||
// Safety check: If ID exists or slug is empty, fallback to index
|
||||
if (!slug || document.getElementById(slug)) {
|
||||
el.id = `section-${index}`;
|
||||
} else {
|
||||
el.id = slug;
|
||||
}
|
||||
}
|
||||
// --- CHANGED SECTION END ---
|
||||
|
||||
const li = document.createElement("li");
|
||||
const a = document.createElement("a");
|
||||
|
||||
li.setAttribute("data-level", level);
|
||||
|
||||
a.href = `#${el.id}`;
|
||||
a.innerHTML = `<span class="toc-text">${label}</span>`;
|
||||
|
||||
a.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
el.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
// Optional: Update URL hash without jumping
|
||||
history.pushState(null, "", `#${el.id}`);
|
||||
});
|
||||
|
||||
li.appendChild(a);
|
||||
list.appendChild(li);
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
document.querySelectorAll("#toc-list a").forEach((link) => link.classList.remove("active"));
|
||||
a.classList.add("active");
|
||||
}
|
||||
});
|
||||
},
|
||||
{ rootMargin: "-50% 0px -50% 0px", threshold: 0 }
|
||||
);
|
||||
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
generateTOC();
|
||||
document.addEventListener("astro:after-swap", generateTOC);
|
||||
</script>
|
||||
@@ -0,0 +1,142 @@
|
||||
/* Path: src/components/Post/FloatingTOC.module.scss */
|
||||
|
||||
.toc {
|
||||
// 1. Container Layout
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100;
|
||||
|
||||
// 2. THE FIX: Make container wide enough to hold the text
|
||||
width: 300px;
|
||||
|
||||
// 3. THE FIX: Allow clicks to pass through the empty area
|
||||
pointer-events: none;
|
||||
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
|
||||
// Keep scrolling functionality
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Nesting protections
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end; // Keep lines on the right
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%; // Ensure list item spans width
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
text-decoration: none;
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
|
||||
// 4. THE FIX: Re-enable clicks on the actual links
|
||||
pointer-events: auto;
|
||||
|
||||
// --- THE LINE ---
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 3px;
|
||||
background-color: #ffb8b8;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
// --- THE TEXT ---
|
||||
:global(.toc-text) {
|
||||
position: absolute;
|
||||
|
||||
// 5. THE FIX: Position relative to the line inside the new wider box
|
||||
// Since the box is 300px wide, we don't need 'right: 150%'.
|
||||
// We just place it to the left of the line.
|
||||
right: 60px;
|
||||
|
||||
white-space: nowrap;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: color-adjust(text, 0, 0);
|
||||
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none;
|
||||
|
||||
background: color-adjust(bg, 0, 0.8);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
// --- HOVER STATE ---
|
||||
&:hover {
|
||||
:global(.toc-text) {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
&::after {
|
||||
background-color: color-adjust(text, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
// --- ACTIVE STATE ---
|
||||
&:global(.active) {
|
||||
&::after {
|
||||
background-color: color-adjust(secondary, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- STAGGERED LENGTHS ---
|
||||
li[data-level="1"] {
|
||||
a::after {
|
||||
width: 40px;
|
||||
}
|
||||
a:global(.active)::after {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
li[data-level="2"] {
|
||||
a::after {
|
||||
width: 25px;
|
||||
}
|
||||
a:global(.active)::after {
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
li[data-level="3"] {
|
||||
a::after {
|
||||
width: 15px;
|
||||
}
|
||||
a:global(.active)::after {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/* Path: src/components/Post/Spoiler.module.scss */
|
||||
|
||||
.spoiler {
|
||||
border-left: 4px solid color-adjust(secondary, 0, 0);
|
||||
padding: 1rem;
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: color-adjust(primary, 0, 0);
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spoilerContent {
|
||||
margin-top: 1rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
28
00-Lesson-Site/frontend/src/components/Post/Spoiler.tsx
Normal file
28
00-Lesson-Site/frontend/src/components/Post/Spoiler.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
// Path: src/components/Post/Spoiler.tsx
|
||||
import type { Component, JSX } from "solid-js";
|
||||
import { createSignal } from "solid-js";
|
||||
import styles from "./Spoiler.module.scss";
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
buttonText?: string;
|
||||
children: JSX.Element;
|
||||
}
|
||||
|
||||
const Spoiler: Component<Props> = (props) => {
|
||||
const [visible, setVisible] = createSignal(false);
|
||||
|
||||
return (
|
||||
<blockquote class={styles.spoiler}>
|
||||
{props.title ? <strong class={styles.spoilerTitle}>{props.title}</strong> : <></>}
|
||||
<button onClick={() => setVisible(!visible())}>
|
||||
{visible() ? "Hide" : "Show"}
|
||||
{props.buttonText ? `${props.buttonText}` : " Answer"}
|
||||
</button>
|
||||
|
||||
{visible() && <div class={styles.spoilerContent}>{props.children}</div>}
|
||||
</blockquote>
|
||||
);
|
||||
};
|
||||
|
||||
export default Spoiler;
|
||||
19
00-Lesson-Site/frontend/src/components/SVGs/Moon.astro
Normal file
19
00-Lesson-Site/frontend/src/components/SVGs/Moon.astro
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
// Path: src/components/SVGs/Moon.astro
|
||||
---
|
||||
|
||||
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg-icon" stroke-width={1}>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="currentColor"
|
||||
d="M14.228 7.9439C10.5176 8.82869 7.75757 12.1054 7.75757 15.9987C7.75757 20.5716 11.5618 24.2919 16.2367 24.2919C19.2323 24.2919 21.9337 22.7699 23.4514 20.3585C23.2779 20.3676 23.1033 20.3722 22.9287 20.3722C17.7826 20.3722 13.5951 16.2772 13.5951 11.2435C13.5951 10.1032 13.8108 8.98914 14.228 7.9439M16.2367 26.4993C10.3171 26.4993 5.50037 21.7899 5.50037 15.9987C5.50037 10.2109 10.3171 5.49927 16.2367 5.49927C16.6598 5.49927 17.0501 5.72963 17.2435 6.09753C17.438 6.46428 17.4087 6.90668 17.1638 7.24363C16.3059 8.42297 15.8535 9.80631 15.8535 11.2435C15.8535 15.06 19.0272 18.1637 22.9287 18.1637C23.6483 18.1637 24.3573 18.0582 25.0359 17.8531C25.4378 17.7293 25.8785 17.8359 26.1738 18.1304C26.4715 18.425 26.5758 18.8559 26.4446 19.2467C25.0019 23.5847 20.9 26.4993 16.2367 26.4993"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<style lang="scss">
|
||||
.svg-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
// Path: src/components/SVGs/ProfileSpinner.astro
|
||||
---
|
||||
|
||||
<svg height={56} width={56} viewBox="0 0 56 56">
|
||||
<path d="M29.465,0.038373A28,28,0,0,1,52.948,40.712L51.166,39.804A26,26,0,0,0,29.361,2.0356Z" style="color: oklch(62.3% 0.214 259.815);" fill="currentColor"></path>
|
||||
<path d="M51.483,43.250A28,28,0,0,1,4.5172,43.250L6.1946,42.161A26,26,0,0,0,49.805,42.161Z" style="color: oklch(79.5% 0.184 86.047);" fill="currentColor"></path>
|
||||
<path d="M3.0518,40.712A28,28,0,0,1,26.535,0.038373L26.639,2.0356A26,26,0,0,0,4.8338,39.804Z" style="color: #D14242;" fill="currentColor"></path>
|
||||
</svg>
|
||||
58
00-Lesson-Site/frontend/src/components/SVGs/Sun.astro
Normal file
58
00-Lesson-Site/frontend/src/components/SVGs/Sun.astro
Normal file
@@ -0,0 +1,58 @@
|
||||
---
|
||||
// Path: src/components/SVGs/Sun.astro
|
||||
---
|
||||
|
||||
<svg class="w-full" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg-icon" stroke-width={1}>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M16.0003 21.4194C13.0123 21.4194 10.5813 18.9874 10.5813 15.9994C10.5813 13.0114 13.0123 10.5804 16.0003 10.5804C18.9883 10.5804 21.4193 13.0114 21.4193 15.9994C21.4193 18.9874 18.9883 21.4194 16.0003 21.4194M16.0003 8.64136C11.9423 8.64136 8.64233 11.9414 8.64233 15.9994C8.64233 20.0574 11.9423 23.3574 16.0003 23.3574C20.0573 23.3574 23.3583 20.0574 23.3583 15.9994C23.3583 11.9414 20.0573 8.64136 16.0003 8.64136"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M6.11559 15.0298H3.34559C2.81059 15.0298 2.37659 15.4648 2.37659 15.9998C2.37659 16.5348 2.81059 16.9688 3.34559 16.9688H6.11559C6.65159 16.9688 7.08459 16.5348 7.08459 15.9998C7.08459 15.4648 6.65159 15.0298 6.11559 15.0298"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M16.0004 7.08447C16.5364 7.08447 16.9704 6.64946 16.9704 6.11446V3.34546C16.9704 2.81046 16.5364 2.37646 16.0004 2.37646C15.4644 2.37646 15.0304 2.81046 15.0304 3.34546V6.11446C15.0304 6.64946 15.4644 7.08447 16.0004 7.08447"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M16.0004 24.9146C15.4644 24.9146 15.0304 25.3496 15.0304 25.8846V28.6536C15.0304 29.1886 15.4644 29.6236 16.0004 29.6236C16.5364 29.6236 16.9704 29.1886 16.9704 28.6536V25.8846C16.9704 25.3496 16.5364 24.9146 16.0004 24.9146"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M28.6542 15.0298H25.8842C25.3492 15.0298 24.9152 15.4648 24.9152 15.9998C24.9152 16.5348 25.3492 16.9688 25.8842 16.9688H28.6542C29.1902 16.9688 29.6242 16.5348 29.6242 15.9998C29.6242 15.4648 29.1902 15.0298 28.6542 15.0298"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M22.9896 9.97995C23.2376 9.97995 23.4856 9.88495 23.6756 9.69595L24.7036 8.66795C25.0816 8.28995 25.0816 7.67495 24.7036 7.29595C24.3246 6.91795 23.7106 6.91795 23.3316 7.29595L22.3036 8.32495C21.9256 8.70295 21.9256 9.31695 22.3036 9.69595C22.4926 9.88495 22.7416 9.97995 22.9896 9.97995"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M8.32507 9.69593C8.51407 9.88493 8.76207 9.97993 9.01107 9.97993C9.25907 9.97993 9.50707 9.88493 9.69607 9.69593C10.0751 9.31693 10.0751 8.70293 9.69607 8.32493L8.66807 7.29693C8.28907 6.91893 7.67507 6.91893 7.29707 7.29693C6.91807 7.67493 6.91807 8.28993 7.29707 8.66793L8.32507 9.69593Z"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M8.32507 22.3043L7.29707 23.3313C6.91807 23.7093 6.91807 24.3243 7.29707 24.7023C7.48607 24.8923 7.73407 24.9873 7.98207 24.9873C8.23007 24.9873 8.47807 24.8923 8.66807 24.7023L9.69607 23.6753C10.0751 23.2973 10.0751 22.6833 9.69607 22.3043C9.31807 21.9253 8.70307 21.9253 8.32507 22.3043"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M23.6752 22.3043C23.2962 21.9253 22.6822 21.9253 22.3032 22.3043C21.9252 22.6833 21.9252 23.2973 22.3042 23.6753L23.3322 24.7023C23.5212 24.8923 23.7692 24.9873 24.0182 24.9873C24.2662 24.9873 24.5142 24.8923 24.7032 24.7023C25.0822 24.3243 25.0822 23.7093 24.7032 23.3313L23.6752 22.3043Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
|
||||
<style lang="scss">
|
||||
.svg-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
// Path: src/components/SVGs/UserSVG.astro
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="width: 2rem; height: 2rem" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width={1.5}>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
||||
</svg>
|
||||
Reference in New Issue
Block a user