Basic introductions & questions
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 717 KiB |
@@ -0,0 +1,90 @@
|
||||
import type { Dialog } from "@/lib/tinyvn";
|
||||
import { getRelativeLocaleUrl } from "astro:i18n";
|
||||
|
||||
const distroQuizDialogs: Dialog[] = [
|
||||
{
|
||||
title: "Let's pick a Linux distribution.",
|
||||
content:
|
||||
"Linux has many flavors, each with its own weakness and strength. Do you want to learn about the choices?",
|
||||
choices: [
|
||||
{
|
||||
text: "Give me the choices!",
|
||||
action: "jump",
|
||||
data: 1,
|
||||
},
|
||||
{
|
||||
text: "Just recommend me one",
|
||||
action: "jump",
|
||||
data: 3,
|
||||
},
|
||||
],
|
||||
}, // 0
|
||||
{
|
||||
title: "In the sea of distributions",
|
||||
content: `These are 3 of the biggest distributions, each with their strength and weaknesses.`,
|
||||
choices: [
|
||||
{
|
||||
action: "jump",
|
||||
data: 2,
|
||||
text: `<h2 class="text-2xl">
|
||||
<img src="/logos/debian-openlogo-nd.svg" alt="Debian logo" class="inline-block size-10" />
|
||||
Debian
|
||||
</h2>
|
||||
<p>
|
||||
Maximum stability.
|
||||
</p>`,
|
||||
},
|
||||
{
|
||||
action: "jump",
|
||||
data: 3,
|
||||
text: `<img src="/logos/fedora_default-horizontal_cropped.svg" alt="Fedora Linux logo" class="h-10" />
|
||||
<p>
|
||||
Balancing stability and up-to-date software.
|
||||
</p>`,
|
||||
},
|
||||
{
|
||||
action: "jump",
|
||||
data: 4,
|
||||
text: `<div id="archLogo"></div>
|
||||
<p>
|
||||
Bleeding edge software.
|
||||
</p>`,
|
||||
},
|
||||
],
|
||||
}, // 1
|
||||
{
|
||||
title: "Debian",
|
||||
content: "",
|
||||
choices: [
|
||||
{
|
||||
text: "Download",
|
||||
action: "link",
|
||||
data: "https://www.debian.org/",
|
||||
},
|
||||
],
|
||||
}, // 2
|
||||
{
|
||||
title: "Fedora Linux",
|
||||
content: "It is a Linux distribution which balances between stability and having up-to-date software.",
|
||||
choices: [
|
||||
{
|
||||
text: "Continue",
|
||||
action: "link",
|
||||
data: getRelativeLocaleUrl("en", "fedora/0"),
|
||||
},
|
||||
],
|
||||
}, // 3
|
||||
{
|
||||
title: "Arch Linux",
|
||||
content: "",
|
||||
choices: [
|
||||
{
|
||||
text: "Continue",
|
||||
action: "link",
|
||||
data: "https://archlinux.org/",
|
||||
},
|
||||
],
|
||||
}, // 4
|
||||
];
|
||||
|
||||
export default distroQuizDialogs;
|
||||
@@ -0,0 +1,173 @@
|
||||
import type { Dialog } from "@/lib/tinyvn";
|
||||
import { getRelativeLocaleUrl } from "astro:i18n";
|
||||
import fedoraWorkstation from "@/assets/imgs/fedora42_workstation.avif";
|
||||
import fedoraWorkstationPng from "@/assets/imgs/fedora42_workstation.png";
|
||||
import fedoraPlasma from "@/assets/imgs/fedora42_kdeplasma.avif";
|
||||
import fedoraPlasmaPng from "@/assets/imgs/fedora42_kdeplasma.png";
|
||||
|
||||
const fedoraDialogs: Dialog[] = [
|
||||
{
|
||||
title: "So you've chosen Fedora.",
|
||||
content:
|
||||
"Do you have an NVIDIA graphics card?",
|
||||
choices: [
|
||||
{
|
||||
text: "Yes",
|
||||
action: "continue"
|
||||
},
|
||||
{
|
||||
text: "No",
|
||||
action: "jump",
|
||||
data: 5,
|
||||
},
|
||||
],
|
||||
}, // 0
|
||||
{
|
||||
title: "Regarding NVIDIA drivers",
|
||||
content: `It is recommended for beginners to install Fedora derivatives instead
|
||||
as it will help ease the process of setting drivers up. Do you wish to continue with Fedora?`,
|
||||
choices: [
|
||||
{
|
||||
action: "continue",
|
||||
text: "I'll go with the easier route"
|
||||
},
|
||||
{
|
||||
action: "jump",
|
||||
text: "I'll continue with Fedora",
|
||||
data: 5
|
||||
}
|
||||
]
|
||||
}, // 1
|
||||
{
|
||||
title: "Do you need Secure Boot?",
|
||||
content: `Secure Boot is a technology required by some anticheat programs,
|
||||
namely Riot Vanguard.`,
|
||||
choices: [
|
||||
{
|
||||
action: "continue",
|
||||
text: "Yes."
|
||||
},
|
||||
{
|
||||
action: "jump",
|
||||
text: "No.",
|
||||
data: 4
|
||||
}
|
||||
]
|
||||
}, // 2
|
||||
{
|
||||
title: "Bazzite",
|
||||
content: "Bazzite is a Linux distribution which is basically designed for gamers.",
|
||||
choices: [
|
||||
{
|
||||
action: "link",
|
||||
data: "https://bazzite.gg/",
|
||||
text: "Visit Website"
|
||||
}
|
||||
]
|
||||
}, // 3
|
||||
{
|
||||
title: "Nobara Linux",
|
||||
content: "The Nobara project aims to improve Fedora's user-friendliness.",
|
||||
choices: [
|
||||
{
|
||||
action: "link",
|
||||
data: "https://nobaraproject.org/",
|
||||
text: "Visit Website"
|
||||
}
|
||||
]
|
||||
}, // 4
|
||||
{
|
||||
title: "Prerequisites",
|
||||
content: "Please prepare an empty/unused USB flash drive with at least 4GB capacity."
|
||||
}, // 5
|
||||
{
|
||||
title: "Fedora Media Writer",
|
||||
content: `It is a program which will help you copy Fedora's installer
|
||||
to your USB flash drive. Please download and install the program as usual for
|
||||
your platform.
|
||||
<div class="grid grid-flow-col auto-cols-fr gap-2">
|
||||
<a href="https://github.com/FedoraQt/MediaWriter/releases/latest"
|
||||
class="button" target="_blank" rel="noopener noreferrer">
|
||||
Windows/macOS
|
||||
</a>
|
||||
<a href="https://flathub.org/apps/details/org.fedoraproject.MediaWriter"
|
||||
class="button" target="_blank" rel="noopener noreferrer">
|
||||
Linux
|
||||
</a>
|
||||
</div>`,
|
||||
choices: [
|
||||
{
|
||||
action: "continue",
|
||||
text: "Done!"
|
||||
}
|
||||
]
|
||||
}, // 6
|
||||
{
|
||||
title: "Choose your flavor",
|
||||
content: `Choose a desktop environment, pick whatever you like based on
|
||||
appearance. KDE Plasma (Right) may be more familiar for Windows users.`,
|
||||
choices: [
|
||||
{
|
||||
action: "continue",
|
||||
text: `<figure>
|
||||
<picture>
|
||||
<source srcset="${fedoraWorkstation.src}" type="image/avif" />
|
||||
<img src="${fedoraWorkstationPng.src}" alt="Fedora Workstation 42" />
|
||||
</picture>
|
||||
<figcaption>Fedora Workstation</figcaption>
|
||||
</figure>`
|
||||
},
|
||||
{
|
||||
action: "jump",
|
||||
text: `<figure>
|
||||
<picture>
|
||||
<source srcset="${fedoraPlasma.src}" type="image/avif" />
|
||||
<img src="${fedoraPlasmaPng.src}" alt="Fedora KDE Plasma Desktop 42" />
|
||||
</picture>
|
||||
<figcaption>Fedora KDE Plasma Desktop</figcaption>
|
||||
</figure>`,
|
||||
data: 9
|
||||
}
|
||||
]
|
||||
}, // 7
|
||||
{
|
||||
title: "Fedora Workstation",
|
||||
content: `<picture>
|
||||
<source srcset="${fedoraWorkstation.src}" type="image/avif" />
|
||||
<img src="${fedoraWorkstationPng.src}" alt="Fedora Workstation 42" />
|
||||
</picture>`,
|
||||
choices: [
|
||||
{
|
||||
action: "jump",
|
||||
text: "Back",
|
||||
data: 7
|
||||
},
|
||||
{
|
||||
action: "link",
|
||||
text: "Continue",
|
||||
data: getRelativeLocaleUrl("en", "fedora/workstation/0")
|
||||
}
|
||||
]
|
||||
}, // 8
|
||||
{
|
||||
title: "Fedora KDE Plasma Desktop",
|
||||
content: `<picture>
|
||||
<source srcset="${fedoraPlasma.src}" type="image/avif" />
|
||||
<img src="${fedoraPlasmaPng.src}" alt="Fedora KDE Plasma Desktop 42" />
|
||||
</picture>`,
|
||||
choices: [
|
||||
{
|
||||
action: "jump",
|
||||
text: "Back",
|
||||
data: 7
|
||||
},
|
||||
{
|
||||
action: "link",
|
||||
text: "Continue",
|
||||
data: getRelativeLocaleUrl("en", "fedora/plasma/0")
|
||||
}
|
||||
]
|
||||
} // 9
|
||||
];
|
||||
|
||||
export default fedoraDialogs;
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
import "../styles/global.css";
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
{description ? <meta name="description" content={description} /> : null}
|
||||
|
||||
<title>{title ?? "Move to Linux"}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
---
|
||||
import { ClientRouter } from "astro:transitions";
|
||||
import "../styles/global.css";
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="en" transition:name="root" transition:animate="none">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
{description ? <meta name="description" content={description} /> : null}
|
||||
|
||||
<title>{title ?? "Move to Linux"}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
<ClientRouter />
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
/// A very tiny Visual Novel-like engine for the site
|
||||
|
||||
import { getRelativeLocaleUrl } from "astro:i18n";
|
||||
|
||||
type BaseChoice = { text: string };
|
||||
|
||||
export type Choice = BaseChoice &
|
||||
(
|
||||
| { action: "link"; data: string }
|
||||
| { action: "continue"; data?: never }
|
||||
| { action: "jump"; data: number }
|
||||
);
|
||||
|
||||
export interface Dialog {
|
||||
title: string;
|
||||
content: string;
|
||||
choices?: Choice[];
|
||||
}
|
||||
|
||||
export function mapStaticPaths(dialogs: Dialog[]) {
|
||||
return dialogs.map((v, i) => {
|
||||
return {
|
||||
params: {
|
||||
index: i.toString(),
|
||||
},
|
||||
props: {
|
||||
title: v.title,
|
||||
content: v.content,
|
||||
choices: v.choices,
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const defaultChoice: Choice = {
|
||||
action: "continue",
|
||||
text: "Continue",
|
||||
};
|
||||
|
||||
export function getChoiceElement(choice: Choice, sectionName: string, index: string) {
|
||||
switch (choice.action) {
|
||||
case "link":
|
||||
return `<a href="${choice.data}" class="button flex flex-col justify-center"
|
||||
${choice.data.startsWith("http") ? ' target="_blank" rel="noopener noreferrer"' : ""}>
|
||||
${choice.text}
|
||||
</a>`;
|
||||
case "continue":
|
||||
return `<a class="button flex flex-col justify-center"
|
||||
href="${getRelativeLocaleUrl("en", `${sectionName}/${parseInt(index) + 1}`)}">
|
||||
${choice.text}
|
||||
</a>`;
|
||||
case "jump":
|
||||
return `<a class="button flex flex-col justify-center"
|
||||
href="${getRelativeLocaleUrl("en", `${sectionName}/${choice.data}`)}">
|
||||
${choice.text}
|
||||
</a>`;
|
||||
}
|
||||
}
|
||||
|
||||
export function getChoices(choices: Choice[] | undefined, sectionName: string, index: string) {
|
||||
if (choices === undefined) {
|
||||
return getChoiceElement(defaultChoice, sectionName, index);
|
||||
}
|
||||
|
||||
return choices.map((v) => getChoiceElement(v, sectionName, index));
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
import TransitionLayout from "@/layouts/TransitionLayout.astro";
|
||||
import { getChoices, mapStaticPaths, type Dialog } from "@/lib/tinyvn";
|
||||
import type { GetStaticPaths } from "astro";
|
||||
import dialogs from "@/data/distroquiz";
|
||||
|
||||
export const getStaticPaths = (() => {
|
||||
return mapStaticPaths(dialogs);
|
||||
}) satisfies GetStaticPaths;
|
||||
|
||||
const { index } = Astro.params;
|
||||
const { title, content, choices } = Astro.props;
|
||||
---
|
||||
|
||||
<TransitionLayout>
|
||||
<main class="fill-screen-center" transition:animate="slide">
|
||||
<div class="p-4 lg:max-w-[50vw] text-center flex flex-col gap-4">
|
||||
<h1 class="text-5xl font-bold">{title}</h1>
|
||||
<p set:html={content} />
|
||||
<div
|
||||
class="grid grid-flow-col auto-cols-fr gap-2"
|
||||
set:html={getChoices(choices, "distroquiz", index)}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</TransitionLayout>
|
||||
|
||||
<style>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
import TransitionLayout from "@/layouts/TransitionLayout.astro";
|
||||
import { getChoices, mapStaticPaths, type Dialog } from "@/lib/tinyvn";
|
||||
import type { GetStaticPaths } from "astro";
|
||||
import dialogs from "@/data/fedora";
|
||||
|
||||
export const getStaticPaths = (() => {
|
||||
return mapStaticPaths(dialogs);
|
||||
}) satisfies GetStaticPaths;
|
||||
|
||||
const { index } = Astro.params;
|
||||
const { title, content, choices } = Astro.props;
|
||||
---
|
||||
|
||||
<TransitionLayout>
|
||||
<main class="fill-screen-center" transition:animate="fade">
|
||||
<div class="p-4 lg:max-w-[50vw] text-center flex flex-col gap-4">
|
||||
<h1 class="text-5xl font-bold">{title}</h1>
|
||||
<p set:html={content} />
|
||||
<div
|
||||
class="max-h-[60vh] grid md:grid-flow-col md:auto-cols-fr gap-2"
|
||||
set:html={getChoices(choices, "fedora", index)}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</TransitionLayout>
|
||||
|
||||
<style>
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
import BasicLayout from "@/layouts/BasicLayout.astro";
|
||||
import { getRelativeLocaleUrl } from "astro:i18n";
|
||||
|
||||
const startLink = getRelativeLocaleUrl("en", "start");
|
||||
---
|
||||
|
||||
<BasicLayout>
|
||||
<header
|
||||
class="min-h-[50vh] flex justify-center items-center flex-col gap-2 bg-amber-50 dark:bg-amber-950"
|
||||
>
|
||||
<h1
|
||||
class="text-5xl font-bold bg-gradient-to-r from-amber-700 to-amber-900 dark:from-amber-400 dark:to-amber-600 bg-clip-text text-transparent"
|
||||
>
|
||||
Move to Linux
|
||||
</h1>
|
||||
<p>This website aims to help you learn and setup Linux.</p>
|
||||
<div>
|
||||
<a href="#what">What</a>
|
||||
•
|
||||
<a href="#why">Why</a>
|
||||
•
|
||||
<a href={startLink} class="font-bold">Just start!</a>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section id="what" class="border-t-2 border-amber-900">
|
||||
<h2 class="text-blue-900 dark:text-blue-200">What is Linux?</h2>
|
||||
<p>
|
||||
Linux is a <i>family</i> of operating systems with the same core.
|
||||
The said "core" is also called the kernel.
|
||||
</p>
|
||||
</section>
|
||||
<section id="why">
|
||||
<h2 class="mb-2 text-violet-900 dark:text-violet-200">
|
||||
Why move to Linux?
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 gap-4 lg:max-w-[50vw]">
|
||||
<div class="card">
|
||||
<h3>Free</h3>
|
||||
<p>
|
||||
Both free of charge, and free as in freedom. Most Linux
|
||||
distributions are free.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Efficient</h3>
|
||||
<p>Revive your old machine, make existing ones do more.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Be in control</h3>
|
||||
<p>
|
||||
Control what is on your machine, customize it to your
|
||||
liking. The Linux desktop world comes in many flavors.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Improved Privacy</h3>
|
||||
<p>
|
||||
Pick and choose how much you want to share to improve
|
||||
the software that you use.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="start">
|
||||
<h2 class="text-green-900 dark:text-green-200">Convinced?</h2>
|
||||
<p>Click the button below to start on your Linux journey.</p>
|
||||
<a href={startLink} class="button mt-4">Start!</a>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="text-center py-4 bg-slate-800 text-white">
|
||||
Made with ♥ from lines-of-codes.
|
||||
</footer>
|
||||
</BasicLayout>
|
||||
|
||||
<style>
|
||||
@reference "@/styles/global.css";
|
||||
|
||||
a:not(.button) {
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-4xl font-bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-3xl font-semibold;
|
||||
}
|
||||
|
||||
section {
|
||||
@apply flex justify-center items-center flex-col p-12;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
---
|
||||
import TransitionLayout from "@/layouts/TransitionLayout.astro";
|
||||
import { getRelativeLocaleUrl } from "astro:i18n";
|
||||
|
||||
// export const prerender = false;
|
||||
|
||||
// const onMobile = Astro.request.headers.get("user-agent")?.match("Mobile");
|
||||
---
|
||||
|
||||
<TransitionLayout
|
||||
title="Welcome - Move to Linux"
|
||||
description="Welcome to your Linux journey."
|
||||
>
|
||||
<main class="fill-screen-center gap-2" transition:animate="slide">
|
||||
<h1 class="text-5xl font-bold">Welcome!</h1>
|
||||
<p class="p-4 lg:max-w-[50vw] text-center">
|
||||
I'm happy to see that you decided to learn more about Linux.
|
||||
Depending on your internet and machine speed, Prepare a few hours of
|
||||
time to download and install Linux.
|
||||
</p>
|
||||
<a href={getRelativeLocaleUrl("en", "distroquiz/0")} class="button"
|
||||
>Okay!</a
|
||||
>
|
||||
</main>
|
||||
</TransitionLayout>
|
||||
+16
-13
@@ -1,16 +1,19 @@
|
||||
---
|
||||
import BasicLayout from "@/layouts/BasicLayout.astro";
|
||||
---
|
||||
|
||||
---
|
||||
<BasicLayout>
|
||||
<main
|
||||
class="min-h-screen w-screen flex items-center justify-center gap-8 flex-col"
|
||||
>
|
||||
<h1 class="text-4xl font-bold flex items-center flex-col">
|
||||
<i class="icon icon_globe text-6xl"></i>
|
||||
Select your language
|
||||
</h1>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Astro</h1>
|
||||
</body>
|
||||
</html>
|
||||
<div class="flex gap-4">
|
||||
<a class="button" href="/en/">🇺🇸 English</a>
|
||||
<a class="button" href="/th/">🇹🇭 ไทย</a>
|
||||
</div>
|
||||
</main>
|
||||
</BasicLayout>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import BasicLayout from "@/layouts/BasicLayout.astro";
|
||||
---
|
||||
|
||||
<BasicLayout>
|
||||
<header>
|
||||
<h1 class="text-4xl font-bold">การย้ายไป Linux</h1>
|
||||
</header>
|
||||
</BasicLayout>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,30 @@
|
||||
@import "tailwindcss";
|
||||
@import "./breeze-icons.css";
|
||||
|
||||
body {
|
||||
--font-thai: "IBM Plex Sans Thai", "Noto Sans Thai";
|
||||
font-family: Inter, var(--font-thai), var(--font-sans);
|
||||
@apply dark:bg-slate-800 dark:text-gray-50;
|
||||
}
|
||||
|
||||
@utility fill-screen-center {
|
||||
@apply h-screen flex justify-center items-center flex-col;
|
||||
}
|
||||
|
||||
@utility button {
|
||||
@apply border border-gray-400 dark:border-gray-600 shadow rounded px-4 py-2 hover:border-sky-500 active:bg-sky-200 dark:active:bg-sky-700 transition-colors;
|
||||
}
|
||||
|
||||
#archLogo {
|
||||
background-image: url("/logos/archlinux-logo-dark-scalable.svg");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@apply h-10 w-full;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#archLogo {
|
||||
background-image: url("/logos/archlinux-logo-light-scalable.svg");
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user