Fix Banner Corners

README.md

@@ -21,11 +21,11 @@ If you wish to help translate the site, you'll need to know how to use Git,
 and optionally to preview the site, you'll need a little knowledge about the
 command line.
 
-The project's structure isn't the best (I'll improve sooner or later). Most
+Most content are located within the `./src/data` folder. Located there are 4
-content are located within the `./src/data` folder. Located there are 4 content
+content collections including "common" (Common pages which may be shared
-collections including "common" (Common pages which may be shared between Linux
+between Linux distribution install guides), "distro" (The Linux distribution
-distribution install guides), "distro" (The Linux distribution install guides),
+install guides), "distroquiz" (The short Linux distribution quiz), and
-"distroquiz" (The short Linux distribution quiz), and "strings" (Short strings).
+"strings" (Short strings).
 
 Inside each collection, There will be a folder named after a language code
 (following the IETF language tag standard) _or_ there will be a TOML file named

astro.config.mjs

@@ -34,11 +34,6 @@ export default defineConfig({
                 "@": fileURLToPath(new URL("./src", import.meta.url))
             }
         },
-        server: {
-            watch: {
-                ignored: "**/pocketbase/**"
-            }
-        }
     },
 
     integrations: [solidJs(), mdx()]

src/assets/imgs/site/banner_inkscape.svg

@@ -0,0 +1,177 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1280"
+   height="720"
+   viewBox="0 0 338.66666 190.5"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   sodipodi:docname="banner_inkscape.svg"
+   inkscape:export-filename="banner_1280x720.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="false"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="true"
+     inkscape:zoom="0.51936728"
+     inkscape:cx="622.87328"
+     inkscape:cy="282.07399"
+     inkscape:window-width="1536"
+     inkscape:window-height="792"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="0,190.5"
+       orientation="0,1280"
+       id="guide1"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="338.66666,190.5"
+       orientation="720,0"
+       id="guide2"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="338.66666,0"
+       orientation="0,-1280"
+       id="guide3"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="0,0"
+       orientation="-720,0"
+       id="guide4"
+       inkscape:locked="false" />
+    <inkscape:grid
+       id="grid4"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="7.9374999"
+       spacingy="7.9374999"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       enabled="true"
+       visible="true" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1">
+    <linearGradient
+       id="linearGradient4"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#1e293b;stop-opacity:1;"
+         offset="0"
+         id="stop4" />
+      <stop
+         style="stop-color:#020617;stop-opacity:1;"
+         offset="1"
+         id="stop5" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4"
+       id="linearGradient5"
+       x1="7.9375"
+       y1="7.9375"
+       x2="333.375"
+       y2="182.5625"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <metadata
+     id="metadata4">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" />
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/licenses/by-sa/4.0/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:requires
+           rdf:resource="http://creativecommons.org/ns#Notice" />
+        <cc:requires
+           rdf:resource="http://creativecommons.org/ns#Attribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+        <cc:requires
+           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer1"
+     inkscape:label="Layer 1">
+    <rect
+       style="fill:url(#linearGradient5);stroke-width:0.264583;fill-opacity:1"
+       id="rect4"
+       width="338.66666"
+       height="190.5"
+       x="0"
+       y="0" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:25.4px;font-family:'Inter Display';-inkscape-font-specification:'Inter Display Bold';text-align:start;letter-spacing:-0.264583px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#ffffff;stroke-width:0.264583"
+       x="14.510738"
+       y="34.51572"
+       id="text5"><tspan
+         sodipodi:role="line"
+         id="tspan5"
+         style="letter-spacing:-0.264583px;stroke-width:0.264583"
+         x="14.510738"
+         y="34.51572">Move to Linux</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:19.7556px;font-family:'Inter Display';-inkscape-font-specification:'Inter Display Bold';text-align:start;letter-spacing:-0.264583px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#ffffff;stroke-width:0.264583"
+       x="15.682075"
+       y="145.76331"
+       id="text6"><tspan
+         sodipodi:role="line"
+         id="tspan6"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.7556px;font-family:'Inter Display';-inkscape-font-specification:'Inter Display';letter-spacing:-0.264583px;stroke-width:0.264583"
+         x="15.682075"
+         y="145.76331"
+         dy="5">A guide on installation,</tspan><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.7556px;font-family:'Inter Display';-inkscape-font-specification:'Inter Display';letter-spacing:-0.264583px;stroke-width:0.264583"
+         x="15.682075"
+         y="170.45781"
+         id="tspan7">usage, and application</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:9.87778px;font-family:'Inter Display';-inkscape-font-specification:'Inter Display';text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#ffffff;stroke-width:0.264583"
+       x="15.267285"
+       y="47.21159"
+       id="text8"><tspan
+         sodipodi:role="line"
+         id="tspan8"
+         style="font-size:9.87778px;letter-spacing:0px;fill:#cccccc;stroke-width:0.264583"
+         x="15.267285"
+         y="47.21159">https://movetolinux.dailitation.xyz</tspan></text>
+  </g>
+</svg>

src/layouts/BasicLayout.astro

@@ -1,7 +1,14 @@
 ---
+import banner from "@/assets/imgs/site/banner_1280x720.png";
 import "../styles/global.css";
+import { ORIGIN } from "astro:env/server";
 
 const { title, description } = Astro.props;
+const shownTitle = title ?? "Move to Linux";
+const shownDescription =
+	description ??
+	"A guide on moving to Linux. Installation, Usage, and Applications.";
+const site = ORIGIN ?? Astro.url.host;
 ---
 
 <html lang="en">
@@ -10,9 +17,25 @@ const { title, description } = Astro.props;
 		<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>
+		<!-- Primary Meta Tags -->
+		<title>{shownTitle}</title>
+		<meta name="title" content={shownTitle} />
+		<meta name="description" content={shownDescription} />
+
+		<!-- Open Graph / Facebook -->
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content={site} />
+		<meta property="og:title" content={shownTitle} />
+		<meta property="og:description" content={shownDescription} />
+		<meta property="og:image" content={banner.src} />
+
+		<!-- X (Twitter) -->
+		<meta property="twitter:card" content="summary" />
+		<meta property="twitter:url" content={site} />
+		<meta property="twitter:title" content={shownTitle} />
+		<meta property="twitter:description" content={shownDescription} />
+		<meta property="twitter:image" content={banner.src} />
 	</head>
 	<body>
 		<slot />

src/pages/en/apps.astro

@@ -51,6 +51,85 @@ import BasicLayout from "@/layouts/BasicLayout.astro";
 				</p>
 			</details>
 		</section>
+		<section id="buzzwords" class="mt-4">
+			<h1>Buzzwords Explained</h1>
+			<p>
+				Here are some words that you will encounter in the (Linux)
+				software world. You don't have to remember all of this, but you
+				can refer back to this site if you want a short definition.
+			</p>
+			<dl>
+				<dt>package</dt>
+				<dd>
+					Imagine a box which contains software files. You could
+					install a package, Which would mean copying the files inside
+					it onto your system.
+				</dd>
+				<dt>package manager</dt>
+				<dd>
+					A software that helps you manage packages. It is specific to
+					each Linux distribution and thus each distribution may have
+					different package formats.
+				</dd>
+				<dt>system package</dt>
+				<dd>
+					A package that is installed on your system. Also commonly
+					referred to as one of the ways to distribute software on
+					Linux, in that context, the word would mean creating a
+					package for a system.
+				</dd>
+				<dt>package repository</dt>
+				<dd>
+					If a package is a box, then a package repository is a
+					warehouse.
+				</dd>
+				<dt>binary</dt>
+				<dd>
+					A file that is already compiled and ready to run. Also known
+					as an "executable".
+				</dd>
+				<dt>AppImage</dt>
+				<dd>
+					A software distribution format. It is a single file that you
+					can download and run on any Linux distribution with minimal
+					reliance on the system. Specifically, it only requires FUSE
+					(Filesystem in Userspace) to be installed, and that's it.
+					The file extension of this format is <code>.AppImage</code>
+				</dd>
+				<dt>Flatpak</dt>
+				<dd>
+					A software distribution format. When an application is
+					packaged this way, the application will be ran inside a
+					sandbox to ensure security, and it will also have minimal
+					reliance on system packages. This is becoming the most
+					popular way to distribute software as it is distro-neutral.
+					The most popular Flatpak repository (and thus is recognized
+					as the central repository) is <a
+						href="https://flathub.org/"
+						target="_blank"
+						rel="noopener">Flathub</a
+					>.
+				</dd>
+				<dt>Wine</dt>
+				<dd>
+					Wine is originally an acronym for "Wine Is Not an Emulator",
+					and it is a compatibility layer (<strong>not</strong> an emulator)
+					capable of running Windows applications. A simple way of explaining
+					what it does would be that it translates Windows language into
+					Linux language on-the-fly, minimizing the performance overhead
+					other methods such as virtual machines and emulators may introduce.
+					(Just for correctness, Wine is not limited to Linux, it can also
+					work on other Unix-like systems such as FreeBSD and macOS)
+				</dd>
+				<dt>Proton</dt>
+				<dd>
+					A compatibility layer built on Wine by Valve, made for
+					running games.
+				</dd>
+				<dt>DXVK</dt>
+				<dd>A software which translates DirectX into Vulkan.</dd>
+			</dl>
+		</section>
 	</main>
 </BasicLayout>
 
@@ -64,8 +143,4 @@ import BasicLayout from "@/layouts/BasicLayout.astro";
 	p {
 		@apply my-2;
 	}
-
-	details {
-		@apply border dark:border-slate-700 border-gray-300 px-4 py-2 rounded mb-2;
-	}
 </style>

src/pages/en/index.astro

@@ -69,6 +69,20 @@ const startLink = getRelativeLocaleUrl("en", "start");
 			<p>Click the button below to start on your Linux journey.</p>
 			<a href={startLink} class="button mt-4">Start!</a>
 		</section>
+		<section id="incorrect">
+			<h2 class="text-red-900 dark:text-red-300">
+				Found invalid information?
+			</h2>
+			<p class="max-w-[50vw] text-center">
+				This site is not perfect. If you found any outdated, invalid, or
+				information which can be possibly misunderstood, send an email
+				to <code>linesofcodes at dailitation dot xyz</code> (<a
+					href="https://keys.openpgp.org/vks/v1/by-fingerprint/8A487B532BEF7B324339AC1CFBE9E5E346F3DDE8"
+					target="_blank"
+					rel="noopener">PGP Keys Available</a
+				>)
+			</p>
+		</section>
 	</main>
 	<footer class="text-center py-4 bg-slate-800 text-white">
 		<div>

src/pages/th/apps.astro

@@ -3,7 +3,7 @@ import AppList from "@/components/AppList";
 import BasicLayout from "@/layouts/BasicLayout.astro";
 ---
 
-<BasicLayout title="Linux Applications">
+<BasicLayout title="แอพลิเคชั่น Linux">
 	<main class="my-8 mx-16">
 		<section id="appList">
 			<h1>
@@ -54,6 +54,84 @@ import BasicLayout from "@/layouts/BasicLayout.astro";
 				</p>
 			</details>
 		</section>
+		<section id="buzzwords" class="mt-4">
+			<h1>คำศัพท์ที่พบเห็นได้บ่อย</h1>
+			<p>
+				นี่คือรายการคำศัพท์ที่คุณอาจพบเจอได้ในโลกแห่งซอฟต์แวร์และ Linux
+				คุณไม่จำเป็นต้องจำคำศัพท์พวกนี้ทั้งหมด
+				แต่คุณสามารถย้อนกลับมาอ่านได้หากคุณต้องการความหมายแบบสั้น ๆ
+			</p>
+			<dl>
+				<dt>แพคเกจ (package)</dt>
+				<dd>
+					จินตนาการถึงกล่องที่มีไฟล์ซอฟต์แวร์
+					คุณสามารถติดตั้งแพคเกจได้
+					ซึ่งจะหมายถึงการคัดลอกไฟล์ที่อยู่ภายในกล่องนั้นไปยังระบบของคุณ
+				</dd>
+				<dt>ตัวจัดการแพคเกจ (package manager)</dt>
+				<dd>
+					ซอฟต์แวร์ที่ช่วยคุณจัดการแพคเกจ เป็นซอฟต์แวร์เฉพาะที่ Linux
+					แต่ละเจ้าอาจมีไม่เหมือนกัน ดังนั้น Linux
+					บางเจ้าจะมีรูปแบบแพคเกจที่แตกต่างกันออกไป
+				</dd>
+				<dt>แพคเกจระบบ (system package)</dt>
+				<dd>
+					แพคเกจที่ติดตั้งอยู่บนระบบของคุณ
+					ศัพท์นี้อาจถูกใช้ในการกล่าวถึงว่าเป็นรูปแบบการกระจายซอฟต์แวร์รูปแบบหนึ่ง
+					ซึ่งในกรณีนั้นศัพท์นี้จะหมายถึงการสร้างแพคเกจสำหรับระบบระบบหนึ่ง
+				</dd>
+				<dt>คลังแพคเกจ (package repository)</dt>
+				<dd>
+					หากแพคเกจเป็นกล่อง คลังแพคเกจก็คือสถานที่ที่รวบรวมแพคเกจ
+				</dd>
+				<dt>ไบนารี (binary)</dt>
+				<dd>ไฟล์ที่สามารถถูกเรียกใช้ได้และผ่านการ "คอมไพล์" มาแล้ว</dd>
+				<dt>AppImage</dt>
+				<dd>
+					รูปแบบในการเผยแพร่ซอฟต์แวร์
+					เป็นไฟล์เดี่ยวที่คุณสามารถดาวน์โหลดและเรียกใช้บน Linux
+					เจ้าใหนก็ได้โดยที่พึ่งพาแพคเกจระบบน้อยที่สุด ซึ่งจริง ๆ แล้ว
+					AppImage นั้นต้องการเพียงแค่มี FUSE (Filesystem in
+					Userspace) ติดตั้งอยู่บนระบบ และนามสกุลไฟล์ของรูปแบบนี้คือ <code
+						>.AppImage</code
+					>
+				</dd>
+				<dt>Flatpak</dt>
+				<dd>
+					รูปแบบการเผยแพร่ซอฟต์แวร์
+					เมื่อแอพลิเคชั่นถูกเผยแพร่ในรูปแบบนี้
+					แอพลิเคชั่นนั้นจะถูกเรียกใช้ภายในกล่องที่สามารถเข้าถึงระบบได้เท่าที่จำเป็น
+					(sandbox) เพื่อความปลอดภัย
+					และจะมีการพึ่งพาแพคเกจระบบให้น้อยที่สุด
+					การเผยแพร่ซอฟต์แวร์รูปแบบนี้กำลังจะเป็นการเผยแพร่ที่นิยมที่สุดเนื่องจากมันเป็นวิธีเผยแพร่แอพที่จะสามารถมั่นใจได้ว่าแอพลิเคชั่นจะทำงานเหมือนกันบน
+					Linux ทุกเจ้า คลัง Flatpak ที่โด่งดังที่สุด
+					(และสามารถถือว่าเป็นคลังส่วนกลางเลยก็ได้) คือ <a
+						href="https://flathub.org/"
+						target="_blank"
+						rel="noopener">Flathub</a
+					>.
+				</dd>
+				<dt>ไวน์ (Wine)</dt>
+				<dd>
+					ไวน์ ที่ไม่ใช่เครื่องดื่ม และไม่ใช่อีมูเลเตอร์
+					แต่เป็นชั้นความเข้ากันได้ที่ช่วยให้ระบบปฏิบัติการ Linux
+					นั้นสามารถใช้งานแอพลิเคชั่น Windows ได้
+					การอธิบายการทำงานของมันแบบง่าย ๆ คือ Wine ทำหน้าที่แปลภาษา
+					Windows ให้เป็นภาษา Linux
+					โดยการทำเช่นนี้นั้นจะช่วยเพิ่มประสิทธิภาพของแอพลิเคชั่นที่อาจลดลงหากเป็นการใช้อีมูเลเตอร์หรือ
+					Virtual Machine แทน (เพื่อความถูกต้อง ไวน์นั้นไม่จำกัดสำหรับ
+					Linux เท่านั้น มันยังสามารถทำงานบนระบบเสมือน Unix อื่น ๆ
+					เช่น FreeBSD และ macOS ได้ด้วย)
+				</dd>
+				<dt>Proton</dt>
+				<dd>
+					ชั้นความเข้ากันได้ของซอฟต์แวร์ที่ถูกสร้างขึ้นจาก Wine โดย
+					Valve ถูกสร้างขึ้นเพื่อการเรียกใช้เกมโดยเฉพาะ
+				</dd>
+				<dt>DXVK</dt>
+				<dd>ซอฟต์แวร์ที่ทำการแปล DirectX เป็น Vulkan</dd>
+			</dl>
+		</section>
 	</main>
 </BasicLayout>
 
@@ -67,8 +145,4 @@ import BasicLayout from "@/layouts/BasicLayout.astro";
 	p {
 		@apply my-2;
 	}
-
-	details {
-		@apply border dark:border-slate-700 border-gray-300 px-4 py-2 rounded mb-2;
-	}
 </style>

src/pages/th/index.astro

@@ -5,7 +5,7 @@ import { getRelativeLocaleUrl } from "astro:i18n";
 const startLink = getRelativeLocaleUrl("th", "start");
 ---
 
-<BasicLayout>
+<BasicLayout title="ย้ายไป Linux">
 	<header
 		class="min-h-[50vh] flex justify-center items-center flex-col gap-2 bg-amber-50 dark:bg-amber-950"
 	>
@@ -70,6 +70,20 @@ const startLink = getRelativeLocaleUrl("th", "start");
 			<p>กดปุ่มด้านล่างเพื่อเริ่มต้นการผจญภัยในดินแดนเพนกวินได้เลย</p>
 			<a href={startLink} class="button mt-4">เริ่มต้นเลย!</a>
 		</section>
+		<section id="incorrect">
+			<h2 class="text-red-900 dark:text-red-300 mb-2">
+				พบเจอข้อมูลที่ไม่ถูกต้องรึเปล่า
+			</h2>
+			<p class="max-w-[50vw] text-center">
+				เว็บไซต์นี้ไม่สมบูรณ์แบบ หากคุณเจอข้อมูลใดที่ล้าสมัย ไม่ถูกต้อง
+				หรืออาจถูกเข้าใจผิด โปรดส่งอีเมลไปยัง
+				<code>linesofcodes at dailitation dot xyz</code> (<a
+					href="https://keys.openpgp.org/vks/v1/by-fingerprint/8A487B532BEF7B324339AC1CFBE9E5E346F3DDE8"
+					target="_blank"
+					rel="noopener">คีย์เข้ารหัส PGP</a
+				>)
+			</p>
+		</section>
 	</main>
 	<footer class="text-center py-4 bg-slate-800 text-white">
 		<div>

src/styles/global.css

@@ -33,3 +33,15 @@ a:not(.button) {
 		background-image: url("/logos/archlinux-logo-light-scalable.svg");
 	}
 }
+
+details {
+	@apply border dark:border-slate-700 border-gray-300 px-4 py-2 rounded mb-2;
+}
+
+dt {
+	@apply font-bold;
+}
+
+dd {
+	@apply pl-8 mb-4;
+}