LeafPig/Web-Dev-Lesson-Test
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload and test

Browse Source
This commit is contained in:
MangoPig
2025-12-09 17:25:14 +00:00
parent f9a669ae69
commit dba1acccee
53 changed files with 1756 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
00-Lesson-Site/frontend/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# build output
dist/
# generated types
.astro/
# dependencies
node_modules/
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# environment variables
.env
.env.production
# macOS-specific files
.DS_Store
# jetbrains setting folder
.idea/

43
00-Lesson-Site/frontend/Dockerfile Normal file
View File

@@ -0,0 +1,43 @@
# Base Image
FROM node:22-alpine AS base
WORKDIR /app
# Enable pnpm
RUN corepack enable && corepack prepare pnpm@latest --activate
# Copy manifest files first to cache dependencies
COPY pnpm-lock.yaml package.json ./
# Install dependencies
RUN pnpm install
# --- Development Stage ---
FROM base AS development
COPY . .
# Astro default port
EXPOSE 4321
# --host is required to expose the server to the container
CMD ["pnpm", "dev", "--host"]
# --- Build Stage ---
FROM base AS build
COPY . .
RUN pnpm build
# --- Production Stage ---
FROM base AS production
WORKDIR /app
# We install 'serve' globally here so we don't rely on node_modules
# This keeps the final image smaller/cleaner
RUN npm install -g serve
# Copy the built output from the build stage
# Astro outputs to 'dist' by default
COPY --from=build /app/dist ./dist
COPY serve.json ./dist
# Expose the port you want for production (e.g., 3000 or 80)
EXPOSE 3000
CMD ["serve", "dist", "-l", "3000", "--single", "--config", "serve.json"]

43
00-Lesson-Site/frontend/README.md Normal file
View File

@@ -0,0 +1,43 @@
# Astro Starter Kit: Minimal
```sh
npm create astro@latest -- --template minimal
```
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```text
/
├── public/
├── src/
│ └── pages/
│ └── index.astro
└── package.json
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

25
00-Lesson-Site/frontend/astro.config.mjs Normal file
View File

@@ -0,0 +1,25 @@
// @ts-check
import mdx from "@astrojs/mdx";
import solidJs from "@astrojs/solid-js";
import expressiveCode from "astro-expressive-code";
import { defineConfig } from "astro/config";
// https://astro.build/config
export default defineConfig({
integrations: [
solidJs(),
expressiveCode({
themes: ["vitesse-dark"],
}),
mdx(),
],
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "/src/styles/global_vars" as *; \n @use "/src/styles/reset" as *; \n @use "/src/styles/global_fonts" as *; \n`,
},
},
},
},
});

6472
00-Lesson-Site/frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

22
00-Lesson-Site/frontend/package.json Normal file
View File

@@ -0,0 +1,22 @@
{
"name": "web-dev",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/mdx": "^4.3.12",
"@astrojs/solid-js": "^5.1.3",
"astro": "^5.16.4",
"astro-expressive-code": "^0.41.3",
"serve": "^14.2.5",
"solid-js": "^1.9.10"
},
"devDependencies": {
"sass": "^1.94.2"
}
}

5133
00-Lesson-Site/frontend/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
00-Lesson-Site/frontend/public/fonts/Geist.woff2 Normal file
View File

Binary file not shown.

BIN
00-Lesson-Site/frontend/public/fonts/GeistMono.woff2 Normal file
View File

Binary file not shown.

31
00-Lesson-Site/frontend/serve.json Normal file
View File

@@ -0,0 +1,31 @@
{
"headers": [
{
"source": "/_astro/**",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
},
{
"source": "/fonts/**",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
},
{
"source": "**",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=0, must-revalidate"
}
]
}
]
}

44
00-Lesson-Site/frontend/src/components/Navbar/DarkModeToggle.astro Normal file
View File

@@ -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>

64
00-Lesson-Site/frontend/src/components/Navbar/DarkModeToggle.module.scss Normal file
View File

@@ -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
View 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>

97
00-Lesson-Site/frontend/src/components/Navbar/Navbar.module.scss Normal file
View File

@@ -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
View 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>

65
00-Lesson-Site/frontend/src/components/Navbar/UserIcon.module.scss Normal file
View File

@@ -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
00-Lesson-Site/frontend/src/components/Post/Blockquotes/Danger.astro Normal file
View File

21
00-Lesson-Site/frontend/src/components/Post/Blockquotes/Ganbatte.astro Normal file
View File

@@ -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>

41
00-Lesson-Site/frontend/src/components/Post/Blockquotes/Ganbatte.module.scss Normal file
View File

@@ -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%);
}
}

12
00-Lesson-Site/frontend/src/components/Post/Blockquotes/Important.astro Normal file
View File

@@ -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>

55
00-Lesson-Site/frontend/src/components/Post/Blockquotes/Important.module.scss Normal file
View File

@@ -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%);
}
}

12
00-Lesson-Site/frontend/src/components/Post/Blockquotes/Info.astro Normal file
View File

@@ -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>

53
00-Lesson-Site/frontend/src/components/Post/Blockquotes/Info.module.scss Normal file
View File

@@ -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%);
}
}

27
00-Lesson-Site/frontend/src/components/Post/Blockquotes/QA.astro Normal file
View File

@@ -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>

78
00-Lesson-Site/frontend/src/components/Post/Blockquotes/QA.module.scss Normal file
View File

@@ -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;
}
}
}

79
00-Lesson-Site/frontend/src/components/Post/FloatingTOC.astro Normal file
View File

@@ -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>

142
00-Lesson-Site/frontend/src/components/Post/FloatingTOC.module.scss Normal file
View File

@@ -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;
}
}
}

28
00-Lesson-Site/frontend/src/components/Post/Spoiler.module.scss Normal file
View File

@@ -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
View 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
View 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>

9
00-Lesson-Site/frontend/src/components/SVGs/ProfileSpinner.astro Normal file
View File

@@ -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
View 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>

7
00-Lesson-Site/frontend/src/components/SVGs/UserSVG.astro Normal file
View File

@@ -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>

732
00-Lesson-Site/frontend/src/content/lessons/01-intro.mdx Normal file
View File

@@ -0,0 +1,732 @@
---
# Path: src/content/lessons/01-intro.mdx
title: "Introduction to Web Dev"
description: "Setting up the environment"
style: "type-1"
---
{/* Blockquotes */}
import Ganbatte from "../../components/Post/Blockquotes/Ganbatte.astro";
import Important from "../../components/Post/Blockquotes/Important.astro";
import Info from "../../components/Post/Blockquotes/Info.astro";
import QA from "../../components/Post/Blockquotes/QA.astro";
import Spoiler from "../../components/Post/Spoiler.tsx";
# Hosting a Large Language Model (LLM) Locally
<picture>
<img src="https://pic.mangopig.tech/i/879aaccd-6822-423f-883a-74cf5ba598e7.jpg" alt="Web Development Illustration" />
</picture>
<blockquote class="lesson-meta">
<span>Lesson 01</span>
<span>Created at: **December 2025**</span>
<span>Last Updated: **December 2025**</span>
</blockquote>
<Ganbatte toc="Lesson Objectives" tocLevel="1" imageAlt="MangoPig Ganbatte">
## Lesson Objectives
- Setting up your Developer Environment
- Setting up a isolated Docker environment for hosting LLMs
- Fetching the AI model
- Converting the model to GGUF format
- Quantizing the model for better performance
- Hosting a basic LLM model with llama.cpp locally
- (To Be Added) Making a volume mount to persist LLM data across container restarts
- (To Be Added) Tagging the Docker Image for future reuse
</Ganbatte>
<section data-toc="Setting Up Developer Environment" data-toc-level="1">
<h2>Setting Up Your Developer Environment</h2>
<section data-toc="WSL" data-toc-level="2">
<h3>Setting Up WSL (Windows Subsystem for Linux)</h3>
To set up WSL on your Windows machine, follow these steps:
1. Open PowerShell as Administrator.
2. Run the following command to enable WSL and install a Linux distribution (Ubuntu is recommended):
```zsh frame="none"
wsl --install
```
3. Restart your computer when prompted.
4. After restarting, open the Ubuntu application from the Start menu and complete the initial setup by creating a user account.
5. Update your package lists and upgrade installed packages by running:
```zsh frame="none"
sudo apt update && sudo apt upgrade -y
```
</section>
<section data-toc="ZSH" data-toc-level="2">
<h3>Getting Your Environment Ready</h3>
```zsh frame="none"
sudo apt install -y git make curl sudo zsh
```
```zsh frame="none"
mkdir -p ~/Config/Dotfiles
git clone https://git.mangopig.tech/MangoPig/Dot-Zsh.git ~/Config/Dotfiles/Zsh
cd ~/Config/Dotfiles/Zsh
```
Whenever there's a prompt to ask to install just confirm with `y` and hit enter.
```zsh frame="none"
make setup
```
Restart the shell to finalize the zsh setup:
```zsh frame="none"
zsh
```
With the above commands, you should have a zsh environment, coding language and Docker setup. We will get more in details of all the tools with this setup as we work through the lessons.
</section>
<section data-toc="Docker" data-toc-level="2">
<h3>Installing Docker</h3>
Docker should already be installed with the above steps. To verify, run:
```zsh frame="none"
docker --version
```
and try to run a test container:
```zsh frame="none"
docker run hello-world
```
If you run into permissions issues, you may need to add your user to the docker group:
```zsh frame="none"
sudo usermod -aG docker $USER
```
Then restart the shell or log out and back in by doing:
```zsh frame="none"
zsh
```
</section>
</section>
<section data-toc="Docker Environment Setup" data-toc-level="1">
<h2>Setting Up the Isolated Docker Environment for Hosting LLMs</h2>
Now that we have the local environment ready, we want to set up an isolated Docker environment for hosting LLMs so that it doesn't interfere with our main system.
<section data-toc="What is Docker?" data-toc-level="2">
<h3>What is Docker?</h3>
Docker is a platform that allows you to package your application and its dependencies into containers.
<Info>
<span>You can find more Docker Images on <a href="https://hub.docker.com/">Docker Hub</a>.</span>
</Info>
<section data-doc="Installing Docker" data-doc-level="3">
<h4>Installing Docker</h4>
</section>
</section>
<section data-toc="Creating Docker Container" data-toc-level="2">
<h3>Creating the Docker Container</h3>
For our current purpose, we will be using the official <a href="https://hub.docker.com/r/nvidia/cuda/tags">NVIDIA Docker image</a> so that we can leverage CUDA for GPU acceleration if available.
We will create the Docker container and make it interactive by running:
```zsh frame="none"
docker run --gpus all -it --name llm-container -p 8080:8080 nvidia/cuda:13.0.2-cudnn-devel-ubuntu24.04 /bin/bash
```
<Info>
- `--gpus` all enables GPU support for the container.
- `--it` makes the container interactive, allowing you to run commands inside it.
- `--name` llm-container gives the container a name for easier reference.
- `-p 8080:8080` = `-p HOST:CONTAINER` maps port 8080 on your host machine to port 8080 inside the container. This is useful if you plan to run a server inside the container and want to access it from your host machine.
- `nvidia/cuda:13.0.2-cudnn-runtime-ubuntu24.04` specifies the Docker image to use.
- `/bin/bash` starts a bash shell inside the container.
</Info>
Once you are inside the container, you can proceed to setup the environment like we did before in the <a href="#setting-up-developer-environment">WSL section</a>.
<Info>
There's a few things you need to do before you can setup the Environment like we did before:
1. Update the package lists and install necessary packages:
```zsh frame="none"
apt update && apt install -y git make curl sudo zsh
```
2. Remove the default user (usually `ubuntu`) to avoid permission issues:
```zsh frame="none"
userdel -r ubuntu
```
3. Run my provisional script to setup users and permissions:
```zsh frame="none"
bash <(curl -s https://git.mangopig.tech/mangopig/Dot-Zsh/raw/branch/main/scripts/provision.sh)
```
You should create your own user when prompted, make it have 1000 as UID and GID for consistency and please remember the password you set here as you'll need it to use `sudo` later on.
4. Now change users by doing: **(replace `your-username` with the username you created)**
```zsh frame="none"
su - your-username
```
OR you can exit the container and reattach with the new user by doing:
```zsh frame="none"
exit
docker start llm-container
docker exec -it --user your-username llm-container /bin/zsh
```
Press `q` when they prompt you to create a zsh configuration file.
5. Now you can proceed to setup zsh and the rest of the environment as shown in the [previous section](#zsh).
</Info>
Try to do this on your own first! If you get stuck, you can check the solution below.
<Spoiler client:idle >
## Solution
1. Update the package lists and install necessary packages:
```zsh frame="none"
apt update && apt install -y git make curl sudo zsh
```
2. Remove the default user (usually `ubuntu`) to avoid permission issues:
```zsh frame="none"
userdel -r ubuntu
```
3. Run my provisional script to setup users and permissions:
```zsh frame="none"
bash <(curl -s https://git.mangopig.tech/mangopig/Dot-Zsh/raw/branch/main/scripts/provision.sh)
```
You should create your own user when prompted, make it have 1000 as UID and GID for consistency and please remember the password you set here as you'll need it to use `sudo` later on.
4. Now change users by doing: **(replace `your-username` with the username you created)**
```zsh frame="none"
su - your-username
```
OR you can exit the container and reattach with the new user by doing:
```zsh frame="none"
exit
docker start llm-container
docker exec -it --user your-username llm-container /bin/zsh
```
Press `q` when they prompt you to create a zsh configuration file.
5. Go into the dotfiles directory and setup zsh:
```zsh frame="none"
cd ~/Config/Dot-Zsh
make base && \
make python && \
make clean && \
make stow
```
6. Restart the shell to finalize the zsh setup:
```zsh frame="none"
zsh
```
7. Verify that Pyenv and Miniforge is working by:
```zsh frame="none"
pyenv --version
conda --version
```
</Spoiler>
</section>
</section>
<section data-toc="Python Setup" data-toc-level="1">
<h2>Setting Up Python Environment</h2>
Now that we have the Docker container set up, we can proceed to set up the environment to run llama.cpp inside the container.
We have setup `pyenv` and `Miniforge` as part of the zsh setup. You can verify that they are working by running:
```zsh frame="none"
pyenv --version
conda --version
```
`pyenv` allows us to manage multiple Python versions easily. We can easily install different versions of Python and Conda environments as needed for different projects.
`conda` (via Miniforge) allows us to create isolated Python environments, which is helpful for making sure that the dependencies for llama.cpp do not interfere with other projects.
Let's first create a directory for llama.cpp and navigate into it:
```zsh frame="none"
mkdir -p ~/Projects/llama.cpp
cd ~/Projects/llama.cpp
```
Now, let's clone the llama.cpp repository:
```zsh frame="none"
git clone https://github.com/ggerganov/llama.cpp.git .
```
<Info>
- You can also the contents of the repository with `ls -la`
- The `.` at the end of the git clone command ensures that the contents of the repository are cloned directly into the current directory.
- For convenience, you can find the official llama.cpp repository at <a href="https://github.com/ggml-org/llama.cpp?tab=readme-ov-file">llama.cpp GitHub</a>
</Info>
With the repository cloned, we can now proceed to build the llama.cpp.
We first use `cmake` to configure the build system. It's like telling the app what our computer environment looks like and what options we want to enable.
```zsh frame="none"
cmake -S . -B build -G Ninja -DCMAKE_BUILD_TYPE=Release -DCMAKE_INSTALL_PREFIX=/usr/local -DLLAMA_BUILD_TESTS=OFF -DLLAMA_BUILD_EXAMPLES=ON -DLLAMA_BUILD_SERVER=ON
```
<Info>
- `-S .` tells cmake where to find the source files (in this case, the current directory).
- `-B build` specifies where all the temperary build files will go (in a folder named `build`).
- `-G Ninja` tells cmake to use the Ninja build system.
- `-DCMAKE_BUILD_TYPE=Release` sets the build type to Release for optimized performance.
- `-DCMAKE_INSTALL_PREFIX=/your/install/dir` specifies where to install the built files. You can change this to your desired installation path.
- `-DLLAMA_BUILD_TESTS=OFF` disables building tests.
- `-DLLAMA_BUILD_EXAMPLES=ON` enables building example programs.
- `-DLLAMA_BUILD_SERVER=ON` enables building the server component.
</Info>
Now we can build the project, this step is basically taking what we told cmake to do and actually making it into executable files.
```zsh frame="none"
cmake --build build --config Release -j $(nproc)
```
<Info>
- `--build build` tells cmake to build the project using the files in the `build` directory. (where we set with -B in the previous step)
- `--config Release` specifies that we want to build the Release version.
- `-j $(nproc)` tells cmake to use all available CPU cores for faster building.
- `$(nproc)` is a command that returns the number of processing units available.
</Info>
After we are doing building, the binaries will be located in the `build/bin` directory. We want to move it to a more accessible location (`/usr/local` that we specified earlier), so we can run it easily. We can do this by running:
```zsh frame="none"
sudo cmake --install build && \
sudo ldconfig
```
<Info>
- `--install build` tells cmake to install the built files from the `build` directory to the location we specified earlier with `-DCMAKE_INSTALL_PREFIX`.
- `sudo ldconfig` updates the system's library cache to recognize the newly installed binaries.
</Info>
Now you should be able to run the `llama.cpp` binary from anywhere, you can check what llama.cpp options are available by running:
```zsh frame="none"
ls /usr/local/bin
```
```zsh frame="none"
󰡯 bat 󰡯 llama-eval-callback 󰡯 llama-lookup 󰡯 llama-save-load-state
󰡯 convert_hf_to_gguf.py 󰡯 llama-export-lora 󰡯 llama-lookup-create 󰡯 llama-server
󰡯 fd 󰡯 llama-finetune 󰡯 llama-lookup-merge 󰡯 llama-simple
󰡯 llama-batched 󰡯 llama-gen-docs 󰡯 llama-lookup-stats 󰡯 llama-simple-chat
󰡯 llama-batched-bench 󰡯 llama-gguf 󰡯 llama-mtmd-cli 󰡯 llama-speculative
󰡯 llama-bench 󰡯 llama-gguf-hash 󰡯 llama-parallel 󰡯 llama-speculative-simple
󰡯 llama-cli 󰡯 llama-gguf-split 󰡯 llama-passkey 󰡯 llama-tokenize
󰡯 llama-convert-llama2c-to-ggml 󰡯 llama-idle 󰡯 llama-perplexity 󰡯 llama-tts
󰡯 llama-cvector-generator 󰡯 llama-imatrix 󰡯 llama-quantize
󰡯 llama-diffusion-cli 󰡯 llama-logits 󰡯 llama-retrieval
󰡯 llama-embedding 󰡯 llama-lookahead 󰡯 llama-run
```
We can further verify whether we can run `llama.cpp` by checking its version:
```zsh frame="none"
llama-cli --version
```
```zsh frame="none"
version: 7327 (c8554b66e)
built with GNU 13.3.0 for Linux x86_64
```
</section>
<section data-toc="Getting the AI" data-toc-level="1">
<h2>Fetching the AI Model Weights</h2>
Now that we have llama.cpp set up, we need to get some AI models to run with it.
The main place to get models is from [Hugging Face](https://huggingface.co/). You will need to create an account if you don't have one already.
Once you have created an account, you should also setup your access token by going:
<picture>
<img src="https://pic.mangopig.tech/i/aea54c8e-9dd5-44c7-ab1f-6b57b076e7d8.webp" alt="Hugging Face Access Token" />
</picture>
And then give your token all the `read` permissions.
<picture>
<img src="https://pic.mangopig.tech/i/4360ee94-7f37-4897-91e9-882fd198b8b3.webp" alt="Hugging Face Token Permissions" />
</picture>
<Important>
Make sure to copy the token somewhere safe and **DO NOT SHARE IT WITH ANYONE** or **USE IT DIRECTLY IN PUBLIC REPOSITORIES** and **DIRECTLY IN YOUR CODE**! Consult AIs on how to keep your tokens safe if you are unsure, but do not directly share them with the AI.
</Important>
Now that you have your token, you can use it to download models from Hugging Face. We will use `huggingface-cli` to do this. Let's first make the directory to store the models:
```zsh frame="none"
mkdir -p ~/Models
cd ~/Models
```
We can then install `huggingface-cli`
```zsh frame="none"
curl -LsSf https://hf.co/cli/install.sh | bash
```
We will then login to Hugging Face using the CLI and provide our access token when prompted:
```zsh frame="none"
git config --global credential.helper store
```
```zsh frame="none"
hf auth login
```
```zsh frame="none"
_| _| _| _| _|_|_| _|_|_| _|_|_| _| _| _|_|_| _|_|_|_| _|_| _|_|_| _|_|_|_|
_| _| _| _| _| _| _| _|_| _| _| _| _| _| _| _|
_|_|_|_| _| _| _| _|_| _| _|_| _| _| _| _| _| _|_| _|_|_| _|_|_|_| _| _|_|_|
_| _| _| _| _| _| _| _| _| _| _|_| _| _| _| _| _| _| _|
_| _| _|_| _|_|_| _|_|_| _|_|_| _| _| _|_|_| _| _| _| _|_|_| _|_|_|_|
To log in, `huggingface_hub` requires a token generated from https://huggingface.co/settings/tokens .
Enter your token (input will not be visible): INPUT_YOUR_TOKEN_HERE
Add token as git credential? [y/N]: y
Token is valid (permission: fineGrained).
The token `temp` has been saved to /home/mangopig/.cache/huggingface/stored_tokens
Your token has been saved in your configured git credential helpers (store).
Your token has been saved to /home/mangopig/.cache/huggingface/token
Login successful.
The current active token is: `temp`
```
Now you can download models using the `hf download` command. I will be using the [`SmolLM3-3B`](https://huggingface.co/HuggingFaceTB/SmolLM3-3B) following this tutorial but if the model is too large for your system, you can choose a smaller model from Hugging Face, such as [`SmolLM2-1.7B`](https://huggingface.co/HuggingFaceTB/SmolLM2-1.7B) or [`SmolLM2-360M`](https://huggingface.co/HuggingFaceTB/SmolLM2-360M).
```zsh frame="none"
hf download HuggingFaceTB/SmolLM3-3B --local-dir ~/Models/SmolLM3-3B
```
<Info>
- `HuggingFaceTB/SmolLM3-3B` is the model identifier on Hugging Face. Get it from clicking the button to copy the name in the image below:
<picture>
<img src="https://pic.mangopig.tech/i/674714b4-736b-429c-b198-c9d57ba8bdee.webp" alt="Hugging Face Model Page" />
</picture>
- `--local-dir ~/Models/SmolLM3-3B` specifies where to save the downloaded model.
You can find out more about what options you can use with `hf download` by doing `hf download --help`.
```zsh frame="none"
> hf download --help
Usage: hf download [OPTIONS] REPO_ID [FILENAMES]...
Download files from the Hub.
Arguments:
REPO_ID The ID of the repo (e.g. `username/repo-name`). [required]
[FILENAMES]... Files to download (e.g. `config.json`,
`data/metadata.jsonl`).
Options:
--repo-type [model|dataset|space]
The type of repository (model, dataset, or
space). [default: model]
--revision TEXT Git revision id which can be a branch name,
a tag, or a commit hash.
--include TEXT Glob patterns to include from files to
download. eg: *.json
--exclude TEXT Glob patterns to exclude from files to
download.
--cache-dir TEXT Directory where to save files.
--local-dir TEXT If set, the downloaded file will be placed
under this directory. Check out https://hugg
ingface.co/docs/huggingface_hub/guides/downl
oad#download-files-to-local-folder for more
details.
--force-download / --no-force-download
If True, the files will be downloaded even
if they are already cached. [default: no-
force-download]
--dry-run / --no-dry-run If True, perform a dry run without actually
downloading the file. [default: no-dry-run]
--token TEXT A User Access Token generated from
https://huggingface.co/settings/tokens.
--quiet / --no-quiet If True, progress bars are disabled and only
the path to the download files is printed.
[default: no-quiet]
--max-workers INTEGER Maximum number of workers to use for
downloading files. Default is 8. [default:
8]
--help Show this message and exit.
```
</Info>
With this, we have a model downloaded at `~/Models/SmolLM3-3B`. We can now proceed to try to run the model with llama.cpp.
</section>
<section data-toc="Converting Model to GGUF" data-toc-level="1">
<h2>Converting the Model to GGUF</h2>
<p>After downloading the model from Hugging Face, we need to convert it to the GGUF format so that llama.cpp can use it.</p>
<p>Hugging Face usually store their models in the `.safetensors` format</p>
<p>However, `llama.cpp` usually expect the models to be in the `.gguf` format.</p>
<p>So we will need to convert the models to `.gguf`. Luckily, `llama.cpp` comes with a python script that helps us to do just that.</p>
<p>We will first create a `Python` environment with `Conda` and activate it</p>
```zsh frame="none"
conda create -n llama-cpp python=3.10 -y
conda activate llama-cpp
python -m pip install --upgrade pip wheel setuptools
```
<Info>
- `conda create -n llama-cpp python=3.10 -y` creates a new conda environment named `llama-cpp` with Python 3.10 installed
- `-n`: Specifies the name of the environment.
- `python=3.10`: Specifies the Python version to install in the environment.
- `-y`: Automatically confirms the creation.
- `conda activate llama-cpp` activates the newly created conda environment.
- `python -m pip install --upgrade pip wheel setuptools`
- We are updating `pip`, `wheel`, and `setuptools`
- `pip`: The package installer for Python. Similar to `npm` and `go get` in other languages.
- `wheel`: A built-package format for Python.
- `setuptools`: A package development and distribution library for Python.
</Info>
<p>`conda` is used to isolate the dependencies needed for the conversion process so that it doesn't interfere with other projects.</p>
<p>We will then install the dependencies for `llama.cpp`</p>
```zsh frame="none"
pip install --upgrade -r ~/Projects/llama.cpp/requirements/requirements-convert_hf_to_gguf.txt
```
<Info>
- `pip install`: Installs Python packages.
- `--upgrade`: Upgrades the packages to the latest versions.
- `-r`: Specifies that we are installing packages from a requirements file.
- `~/Projects/llama.cpp/requirements/requirements-convert_hf_to_gguf.txt`: The path to the requirements file that contains the list of packages needed for converting models to GGUF format.
</Info>
Nice! Now we are ready to convert the model to GGUF format. We can do this by running the conversion script provided by `llama.cpp`
```zsh frame="none"
python ~/Projects/llama.cpp/convert_hf_to_gguf.py \
~/Models/SmolLM3-3B \
--outfile ~/Models/SmolLM3-3B/SmolLM3-3B.gguf
```
<Info>
- `python ~/Projects/llama.cpp/convert_hf_to_gguf.py`: `python` runs the conversion script located at `~/Projects/llama.cpp/scripts/convert_hf_to_gguf.py`.
- `~/Models/SmolLM3-3B`: Specifies the path to the downloaded model in Hugging Face format.
- `--outfile ~/Models/SmolLM3-3B/SmolLM3-3B.gguf`: Specifies where to save the converted model in GGUF format.
</Info>
When you see a similar output to:
```zsh frame="none"
INFO:hf-to-gguf:Model successfully exported to SmolLM3-3B.gguf
```
Then you have succeeded in converting the model to GGUF format!
</section>
<section data-toc="Quantizing the Model" data-toc-level="1">
<h2>Quantizing the Model for Better Performance</h2>
<p>Quantization is a technique used to reduce the size of the model and improve inference speed and VRAM requirements by compressing and reducing the model's weight</p>
We can learn what quantization `llama.cpp` supports by running:
```zsh frame="none"
llama-quantize --help
```
```zsh frame="none"
usage: llama-quantize [--help] [--allow-requantize] [--leave-output-tensor] [--pure] [--imatrix] [--include-weights]
[--exclude-weights] [--output-tensor-type] [--token-embedding-type] [--tensor-type] [--prune-layers] [--keep-split] [--override-kv]
model-f32.gguf [model-quant.gguf] type [nthreads]
--allow-requantize: Allows requantizing tensors that have already been quantized. Warning: This can severely reduce quality compared to quantizing from 16bit or 32bit
--leave-output-tensor: Will leave output.weight un(re)quantized. Increases model size but may also increase quality, especially when requantizing
--pure: Disable k-quant mixtures and quantize all tensors to the same type
--imatrix file_name: use data in file_name as importance matrix for quant optimizations
--include-weights tensor_name: use importance matrix for this/these tensor(s)
--exclude-weights tensor_name: use importance matrix for this/these tensor(s)
--output-tensor-type ggml_type: use this ggml_type for the output.weight tensor
--token-embedding-type ggml_type: use this ggml_type for the token embeddings tensor
--tensor-type TENSOR=TYPE: quantize this tensor to this ggml_type. example: --tensor-type attn_q=q8_0
Advanced option to selectively quantize tensors. May be specified multiple times.
--prune-layers L0,L1,L2...comma-separated list of layer numbers to prune from the model
Advanced option to remove all tensors from the given layers
--keep-split: will generate quantized model in the same shards as input
--override-kv KEY=TYPE:VALUE
Advanced option to override model metadata by key in the quantized model. May be specified multiple times.
Note: --include-weights and --exclude-weights cannot be used together
Allowed quantization types:
2 or Q4_0 : 4.34G, +0.4685 ppl @ Llama-3-8B
3 or Q4_1 : 4.78G, +0.4511 ppl @ Llama-3-8B
38 or MXFP4_MOE : MXFP4 MoE
8 or Q5_0 : 5.21G, +0.1316 ppl @ Llama-3-8B
9 or Q5_1 : 5.65G, +0.1062 ppl @ Llama-3-8B
19 or IQ2_XXS : 2.06 bpw quantization
20 or IQ2_XS : 2.31 bpw quantization
28 or IQ2_S : 2.5 bpw quantization
29 or IQ2_M : 2.7 bpw quantization
24 or IQ1_S : 1.56 bpw quantization
31 or IQ1_M : 1.75 bpw quantization
36 or TQ1_0 : 1.69 bpw ternarization
37 or TQ2_0 : 2.06 bpw ternarization
10 or Q2_K : 2.96G, +3.5199 ppl @ Llama-3-8B
21 or Q2_K_S : 2.96G, +3.1836 ppl @ Llama-3-8B
23 or IQ3_XXS : 3.06 bpw quantization
26 or IQ3_S : 3.44 bpw quantization
27 or IQ3_M : 3.66 bpw quantization mix
12 or Q3_K : alias for Q3_K_M
22 or IQ3_XS : 3.3 bpw quantization
11 or Q3_K_S : 3.41G, +1.6321 ppl @ Llama-3-8B
12 or Q3_K_M : 3.74G, +0.6569 ppl @ Llama-3-8B
13 or Q3_K_L : 4.03G, +0.5562 ppl @ Llama-3-8B
25 or IQ4_NL : 4.50 bpw non-linear quantization
30 or IQ4_XS : 4.25 bpw non-linear quantization
15 or Q4_K : alias for Q4_K_M
14 or Q4_K_S : 4.37G, +0.2689 ppl @ Llama-3-8B
15 or Q4_K_M : 4.58G, +0.1754 ppl @ Llama-3-8B
17 or Q5_K : alias for Q5_K_M
16 or Q5_K_S : 5.21G, +0.1049 ppl @ Llama-3-8B
17 or Q5_K_M : 5.33G, +0.0569 ppl @ Llama-3-8B
18 or Q6_K : 6.14G, +0.0217 ppl @ Llama-3-8B
7 or Q8_0 : 7.96G, +0.0026 ppl @ Llama-3-8B
1 or F16 : 14.00G, +0.0020 ppl @ Mistral-7B
32 or BF16 : 14.00G, -0.0050 ppl @ Mistral-7B
0 or F32 : 26.00G @ 7B
COPY : only copy tensors, no quantizing
```
<Info>
For a line `2 or Q4_0 : 4.34G, +0.4685 ppl @ Llama-3-8B`
- `2` and `Q4_0` are the identifiers you can use to specify the quantization type.
- `4.34G` indicates the size of the quantized model.
- `+0.4685 ppl` indicates the increase in perplexity (a measure of model performance; lower is better) when using this quantization type
</Info>
<QA>
<span slot="question">How do I know how big of a model size can I fit in my computer</span>
<p>It depends on whether you are running inference on your <strong>CPU (System RAM)</strong> or <strong>GPU (VRAM)</strong>.</p>
<p>For CPU inference, you generally want the model size to be around 2x the size of your system RAM for comfortable operation. For example, if you have 16GB of RAM, you should aim for models that are around 8GB or smaller.</p>
**Size (GB) ≈ (Parameters (Billions) × Bits Per Weight) / 8 + Overhead**
- Bits Per Weight (bpw):
- Qx = x bits per weight
- Qx_K = K quants will keep some important weights at higher precision (Q4_K ≈ 5 bits per weight, Q5_K ≈ 6 bits per weight, Q6_K ≈ 7 bits per weight)
- Qx_K_S = Small K quants
- Qx_K_M = Medium K quants
- Qx_K_L = Large K quants
- IQx = Integer Quantization with x bits per weight, bpw is on the chart
- TQx = Ternary Quantization with x bits per weight, bpw is on the chart
</QA>
**TO BE ADDED** - Quantization Calculator
Once we have decided what quantization type to use, we can proceed to quantize the model by running:
```zsh frame="none"
llama-quantize \
~/Models/SmolLM3-3B/SmolLM3-3B.gguf \
~/Models/SmolLM3-3B/SmolLM3-3B.q4.gguf \
q4_0
4
```
<Info>
- `llama-quantize`: The command to run the quantization process.
- `~/Models/SmolLM3-3B/SmolLM3-3B.gguf`: The path to the original GGUF model that we want to quantize.
- `~/Models/SmolLM3-3B/SmolLM3-3B.q4.gguf`: The path where we want to save the quantized model.
- `q4_0`: The quantization type we want to use (in this case, Q4_0).
- `4`: Number of threads to use for quantization (optional, defaults to number of CPU cores).
</Info>
<p>After the quantization is complete, you should see a new file named `SmolLM3-3B.q4.gguf` in the model directory.</p>
<p>We can now learn how to serve the model with `llama.cpp`</p>
</section>
<section data-toc="Inferencing the Model" data-toc-level="1">
<h2>Inferencing the Model</h2>
<p>Now that we have the model ready, we can proceed to run inference with it using `llama.cpp`.</p>
<p>`llama.cpp` provides us with multiple ways of inferencing, we can: </p>
- Use the command line interface (CLI) to interact with the model directly from the terminal. (llama-cli)
- Use the server mode to host the model and interact with it via HTTP requests. (llama-server)
For this tutorial, we will use the `llama-server` to serve the model.
To start the server with our quantized model, we can run:
```zsh frame="none"
llama-server \
--model ~/Models/SmolLM3-3B/SmolLM3-3B.q4.gguf \
--host 0.0.0.0 \
--port 8080
```
<Info>
- `llama-server`: The command to start the server.
- `--model ~/Models/SmolLM3-3B/SmolLM3-3B.q4.gguf`: Specifies the path to the quantized model we want to serve.
- `--host 0.0.0.0`: This makes the server accessible from any IP address.
- `--port 8080`: Specifies the port on which the server will listen for incoming requests.
You can read all the options you can customize to run the server [here](https://github.com/ggml-org/llama.cpp/blob/master/tools/server/README.md)
</Info>
As soon as you see this
```zsh frame="none"
main: model loaded
main: server is listening on http://0.0.0.0:8080
main: starting the main loop...
```
Your server is up and running! You can now interact with the model by going to [`http://localhost:8080`](http://localhost:8080) in your web browser or using tools like `curl` for API requests.
Open another terminal window and use this example for API request using `curl`:
```zsh frame="none"
curl \
--request POST \
--url http://localhost:8080/completion \
--header "Content-Type: application/json" \
--data '{"prompt": "Building a website can be done in 10 simple steps:","n_predict": 128}'
```
<Info>
- `--request POST`: Specifies that we are making a POST request. (We will get into REST HTTP APIs in future tutorials)
- `--url http://localhost:8080/completion`: The URL of the server endpoint for completions.
- `--header "Content-Type: application/json"`: Sets the content type to JSON.
- `--data '{...}'`: The JSON payload containing the prompt and other parameters for the model.
Read more about the API requests [here](https://github.com/ggml-org/llama.cpp/blob/master/tools/server/README.md#using-with-curl)
</Info>
</section>

15
00-Lesson-Site/frontend/src/content/lessons/config.ts Normal file
View File

@@ -0,0 +1,15 @@
// Path: 00-Lesson-Site/src/content/lessons/config.ts
import { defineCollection, z } from "astro:content";
const lessonsCollection = defineCollection({
type: "content",
schema: z.object({
title: z.string(),
description: z.string().optional(),
}),
});
export const collections = {
lessons: lessonsCollection,
};

42
00-Lesson-Site/frontend/src/helpers/colorMode.astro Normal file
View File

@@ -0,0 +1,42 @@
---
// Path: src/helpers/colorMode.astro
---
<script is:inline>
// 1. Basic function to set theme on load
function getTheme() {
const stored = localStorage.getItem("theme");
if (stored) return stored;
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
function setTheme(theme) {
if (theme === "dark") {
document.documentElement.classList.add("dark");
document.documentElement.setAttribute("data-theme", "dark");
} else {
document.documentElement.classList.remove("dark");
document.documentElement.setAttribute("data-theme", "light");
}
}
// Run on initial load
setTheme(getTheme());
// 2. THE FIX: Intercept the new page BEFORE the swap
document.addEventListener("astro:before-swap", (event) => {
// Read the current class from the OLD document (the one you are looking at)
const isDark = document.documentElement.classList.contains("dark");
// Apply it to the NEW document (the one about to slide in)
// This ensures the "snapshot" of the new page is already dark.
if (isDark) {
event.newDocument.documentElement.classList.add("dark");
event.newDocument.documentElement.setAttribute("data-theme", "dark");
} else {
// Explicitly remove it for light mode to be safe
event.newDocument.documentElement.classList.remove("dark");
event.newDocument.documentElement.setAttribute("data-theme", "light");
}
});
</script>

36
00-Lesson-Site/frontend/src/layouts/LandingLayout.astro Normal file
View File

@@ -0,0 +1,36 @@
---
// Path: src/layouts/LandingLayout.astro
import { ClientRouter } from "astro:transitions";
import Navbar from "../components/Navbar/Navbar.astro";
import ThemeScript from "../helpers/colorMode.astro";
import "../styles/main.scss";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<ClientRouter />
<!-- Color Mode Helper -->
<ThemeScript />
<!-- Favicon Icons -->
<link rel="icon" href="favicon/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png" />
<link rel="manifest" href="favicon/site.webmanifest" />
<title>Web Dev Lesson Notes</title>
</head>
<body>
<Navbar />
<main>
<slot />
</main>
</body>
</html>

46
00-Lesson-Site/frontend/src/layouts/LessonLayout.astro Normal file
View File

@@ -0,0 +1,46 @@
---
// Path: src/layouts/LessonLayout.astro
import { ClientRouter } from "astro:transitions";
import Navbar from "../components/Navbar/Navbar.astro";
import FloatingTOC from "../components/Post/FloatingTOC.astro";
import ThemeScript from "../helpers/colorMode.astro";
import "../styles/main.scss";
interface Props {
pageTitle?: string;
}
const { pageTitle = "Web Dev Lessons" } = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<ClientRouter />
<!-- Color Mode Helper -->
<ThemeScript />
<!-- Favicon Icons -->
<link rel="icon" href="favicon/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png" />
<link rel="manifest" href="favicon/site.webmanifest" />
<title>{pageTitle}</title>
</head>
<body>
<Navbar />
<main>
<slot />
</main>
<FloatingTOC />
</body>
</html>

12
00-Lesson-Site/frontend/src/pages/changelog.astro Normal file
View File

@@ -0,0 +1,12 @@
---
// Path: src/pages/changelog.astro
import Layout from "../layouts/LessonLayout.astro";
---
<Layout>
<h1>Welcome to the Lesson Site</h1>
<p>This is the homepage of the lesson site built with Astro.</p>
<a href="/lessons/01-intro">Lesson 1</a>
</Layout>

12
00-Lesson-Site/frontend/src/pages/index.astro Normal file
View File

@@ -0,0 +1,12 @@
---
// Path: 00-Lesson-Site/src/pages/index.astro
import Layout from "../layouts/LessonLayout.astro";
---
<Layout>
<h1>Welcome to the Lesson Site</h1>
<p>This is the homepage of the lesson site built with Astro.</p>
<a href="/lessons/01-intro">Lesson 1</a>
</Layout>

35
00-Lesson-Site/frontend/src/pages/lessons/[slug].astro Normal file
View File

@@ -0,0 +1,35 @@
---
// Path: src/pages/lessons/[slug].astro
import { getCollection, type CollectionEntry } from "astro:content";
import LessonLayout from "../../layouts/LessonLayout.astro";
import styles from "./lessonPage.module.scss";
interface Props {
entry: CollectionEntry<"lessons">;
}
export async function getStaticPaths() {
const lessonEntries = await getCollection("lessons");
return lessonEntries.map((entry: CollectionEntry<"lessons">) => ({
params: { slug: entry.slug },
props: { entry },
}));
}
const { entry } = Astro.props;
const { Content } = await entry.render();
// Dynamically Import Lesson Style from the entry's frontmatter
if (entry.data.style) {
await import(`../../styles/lessons/${entry.data.style}.scss`);
}
---
<LessonLayout pageTitle={entry.data.title}>
<div class:list={[styles.content]} id="lesson-container">
<Content />
</div>
</LessonLayout>

12
00-Lesson-Site/frontend/src/pages/lessons/index.astro Normal file
View File

@@ -0,0 +1,12 @@
---
// Path: src/pages/lessons/index.astro
import Layout from "../../layouts/LessonLayout.astro";
---
<Layout>
<h1>Welcome to the Lesson Site</h1>
<p>This is the homepage of the lesson site built with Astro.</p>
<a href="/lessons/01-intro">Lesson 1</a>
</Layout>

11
00-Lesson-Site/frontend/src/pages/lessons/lessonPage.module.scss Normal file
View File

@@ -0,0 +1,11 @@
/* Path: src/pages/lessons/lessonPage.module.scss */
.content {
width: 1000px;
margin: 0 auto;
padding: 20px;
}
html {
scroll-behavior: smooth;
}

12
00-Lesson-Site/frontend/src/pages/resources.astro Normal file
View File

@@ -0,0 +1,12 @@
---
// Path: src/pages/resources.astro
import Layout from "../layouts/LessonLayout.astro";
---
<Layout>
<h1>Welcome to the Lesson Site</h1>
<p>This is the homepage of the lesson site built with Astro.</p>
<a href="/lessons/01-intro">Lesson 1</a>
</Layout>

13
00-Lesson-Site/frontend/src/styles/_global_fonts.scss Normal file
View File

@@ -0,0 +1,13 @@
/* Path: src/styles/_fonts.scss */
@font-face {
font-family: "Geist";
src: url("/fonts/Geist.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "GeistMono";
src: url("/fonts/GeistMono.woff2") format("woff2");
font-display: swap;
}

11
00-Lesson-Site/frontend/src/styles/_global_vars.scss Normal file
View File

@@ -0,0 +1,11 @@
/* Path: src/styles/_global_vars.scss */
@use "sass:meta";
@function color-adjust($color, $contrast-boost: 0, $c-offset: 0) {
$L: calc(var(--#{meta.inspect($color)}-base-l) - (#{$contrast-boost} * var(--theme-polarity)));
$C: calc(var(--#{meta.inspect($color)}-base-c) + #{$c-offset});
$H: var(--#{meta.inspect($color)}-base-h);
@return oklch(#{$L} #{$C} #{$H});
}

52
00-Lesson-Site/frontend/src/styles/_reset.scss Normal file
View File

@@ -0,0 +1,52 @@
/* Path: src/styles/_reset.scss */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html,
body {
height: 100%;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
#root,
#__next {
isolation: isolate;
}

96
00-Lesson-Site/frontend/src/styles/lessons/type-1.scss Normal file
View File

@@ -0,0 +1,96 @@
/* Path: src/styles/lessons/type-1.scss */
.lesson-meta {
font-size: 0.9em;
color: #888;
background-color: color-adjust(background, 0.01, 0.01);
margin-bottom: 20px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
section {
margin-bottom: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 10px;
}
h1 {
font-size: 2.5em;
color: #ff5e5e;
}
h2 {
font-size: 2em;
color: #ffbd72;
}
h3 {
font-size: 1.75em;
color: #aad4fc;
}
h4 {
font-size: 1.5em;
color: #9dffb8;
}
a {
color: #ffb8b8;
text-decoration: underline;
&:hover {
color: #ff5e5e;
}
}
picture {
display: block;
margin: 20px auto;
max-width: 100%;
img {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(252, 241, 145, 0.2);
}
}
p,
li,
blockquote {
line-height: 1.6;
margin-bottom: 15px;
text-align: justify;
p {
margin-bottom: 0;
}
}
strong {
font-weight: bold;
color: #ffb8b8;
}
.expressive-code {
margin: 20px !important;
}
code {
background-color: color-adjust(background, 0.02, 0.02);
color: color-adjust(primary, 0, 0);
padding: 2px 4px;
border-radius: 4px;
font-family: "GeistMono", monospace;
}

78
00-Lesson-Site/frontend/src/styles/main.scss Normal file
View File

@@ -0,0 +1,78 @@
/* Path: src/styles/main.scss */
:root {
--theme-polarity: 1;
--background-base-l: 0.99;
--background-base-c: 0.02;
--background-base-h: 100;
--text-base-l: 0.4;
--text-base-c: 0.015;
--text-base-h: 84;
--primary-base-l: 0.75;
--primary-base-c: 0.145;
--primary-base-h: 142;
--secondary-base-l: 0.75;
--secondary-base-c: 0.06;
--secondary-base-h: 60;
}
@mixin dark-values {
--theme-polarity: -1;
--background-base-l: 0.1;
--background-base-c: 0.015;
--background-base-h: 84;
--text-base-l: 0.95;
--text-base-c: 0.015;
--text-base-h: 84;
}
[data-theme="dark"] {
@include dark-values;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
@include dark-values;
}
}
html {
scrollbar-gutter: stable;
}
body {
background-color: color-adjust(background, 0, 0);
color: color-adjust(text, 0, 0);
transition:
background-color 0.4s ease,
color 0.4s ease;
font-family: "Geist", sans-serif;
font-weight: 300;
}
nav,
button,
hr,
input,
textarea,
.icon,
svg {
transition:
background-color 0.4s ease,
color 0.4s ease,
border-color 0.4s ease,
fill 0.4s ease,
stroke 0.4s ease;
}
main {
display: flow-root;
}

14
00-Lesson-Site/frontend/tsconfig.json Normal file
View File

@@ -0,0 +1,14 @@
{
"extends": "astro/tsconfigs/strict",
"include": [
".astro/types.d.ts",
"**/*"
],
"exclude": [
"dist"
],
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "solid-js"
}
}