Update links to 1.2.1

Bugfixes and improvements

See merge request tile-os/tileos-website!2

src/routes/+page.svelte

@@ -6,10 +6,29 @@
 	import 'photoswipe';
 	import 'photoswipe/style.css';
 	import { onMount } from 'svelte';
+	import Telegram from './icons/Telegram.svelte';
+	import Mastodon from './icons/Mastodon.svelte';
 
 	let downloadIsPressed = false;
 	let checksumSwayIsPressed = false;
 	let checksumRiverIsPressed = false;
+	let checksumQtileIsPressed = false;
+
+	let sway = {
+		iso: "tileos-sway-1.2.1-desktop-amd64.iso",
+		sha256: "tileos-sway-1.2.1-desktop-amd64.sha256.txt",
+		md5: "tileos-sway-1.2.1-desktop-amd64.md5.txt"
+	}
+	let river = {
+		iso: "tileos-river-1.2.1-desktop-amd64.iso",
+		sha256: "tileos-river-1.2.1-desktop-amd64.sha256.txt",
+		md5: "tileos-river-1.2.1-desktop-amd64.md5.txt"
+	}
+	let qtile = {
+		iso: "tileos-qtile-1.2-beta-desktop-amd64.iso",
+		sha256: "tileos-qtile-1.2-beta-desktop-amd64.sha256.txt",
+		md5: "tileos-qtile-1.2-beta-desktop-amd64.md5.txt"
+	}
 
 
 	onMount(() => {
@@ -44,55 +63,71 @@
 <div class="flex justify-center items-center flex-col text-center bg-[#24273a]">
 	<img alt="" height="216px" src="tileos.svg" width="216px" />
 	<h1 class="text-3xl font-bold">TileOS</h1>
-	<p>Debian-based distribution with tiling window managers.</p>
+	<p class="m-5">Debian-based distribution with tiling window managers.</p>
-	<div class="flex flex-row flex-wrap m-7 justify-center">
+	<div class="flex flex-row flex-wrap m-1 justify-center">
 		<div class="relative inline-block text-left">
 			<div>
 				<button
-					class="border-2 p-2.5 mx-5 my-3 rounded-md bg-[#6993e9] download-all"
+					class="transition-colors p-2.5 mx-5 my-3 rounded-md bg-[#6993e9] hover:bg-[#567ed1] download-all"
 					on:click={() => {
 						downloadIsPressed = !downloadIsPressed;
 					}}
 				>
 					<Download className="mr-1.5 download-all"></Download>
-					Download
+					Downloads
 				</button>
 			</div>
 			<div
 				class="absolute left-0 mx-5 my-3 w-56 rounded-md bg-[#6993e9] {downloadIsPressed
-					? 'transition ease-in duration-75 opacity-100 scale-100 visible'
+					? 'transition-all ease-in duration-75 opacity-100 scale-100 visible'
-					: 'opacity-0 transition ease-out duration-100 scale-95'}"
+					: 'opacity-0 transition-all ease-out duration-100 scale-95 invisible'}"
 			>
 				<div class="py-1">
-					<!-- Sway/River Download Links Under Logo -->
+					<!-- Sway/River/Qtile Download Links Under Logo -->
 					<p class="block px-4 py-2 text-sm">
-						<a href="https://downloads.tile-os.com/beta/sway/tileos-sway-1.0-desktop-beta-amd64.iso"
+						<a href="https://downloads.tile-os.com/stable/sway/{sway.iso}"
-							>Download (1.0-beta Sway)</a
+							>Download (1.2 Sway)</a
 						>
 						<a
 							class="underline"
-							href="https://downloads.tile-os.com/beta/sway/tileos-sway-1.0-desktop-beta-amd64.sha256.txt"
+							href="https://downloads.tile-os.com/stable/sway/{sway.sha256}"
 							>(sha256)</a
 						>
 						<a
 							class="underline"
-							href="https://downloads.tile-os.com/beta/sway/tileos-sway-1.0-desktop-beta-amd64.md5.txt"
+							href="https://downloads.tile-os.com/stable/sway/{sway.md5}"
 							>(md5)</a
 						>
 					</p>
 					<p class="block px-4 py-2 text-sm">
 						<a
-							href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.iso"
+							href="https://downloads.tile-os.com/stable/river/{river.iso}"
-							>Download (1.0-beta River)</a
+							>Download (1.2 River)</a
 						>
 						<a
 							class="underline"
-							href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.sha256.txt"
+							href="https://downloads.tile-os.com/stable/river/{river.sha256}"
 							>(sha256)</a
 						>
 						<a
 							class="underline"
-							href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.md5.txt"
+							href="https://downloads.tile-os.com/stable/river/{river.md5}"
+							>(md5)</a
+						>
+					</p>
+					<p class="block px-4 py-2 text-sm">
+						<a
+							href="https://downloads.tile-os.com/beta/qtile/{qtile.iso}"
+							>Download (1.2 Qtile (Experimental)</a
+						>
+						<a
+							class="underline"
+							href="https://downloads.tile-os.com/beta/qtile/{qtile.sha256}"
+							>(sha256)</a
+						>
+						<a
+							class="underline"
+							href="https://downloads.tile-os.com/beta/qtile/{qtile.md5}"
 							>(md5)</a
 						>
 					</p>
@@ -100,17 +135,40 @@
 			</div>
 		</div>
 		<!-- Source Code Link -->
-		<a class="border-2 p-2.5 mx-5 my-3 rounded-md bg-[#73b4d1]" href="https://gitlab.com/tile-os">
+		<a class="transition-colors p-2.5 mx-5 my-3 rounded-md bg-[#73b4d1] hover:bg-[#497b91]" href="https://gitlab.com/tile-os">
 			<Terminal className="mr-1.5"></Terminal>
 			Source Code</a
 		>
+		<a class="p-2.5 mx-5 my-3 rounded-md bg-[#8aadf4] transition-colors hover:bg-[#5d7ec2]" href="https://t.me/tile_os">
+			<Telegram className="mr-1.5"></Telegram>
+			Telegram</a
+		>
+		<a class="p-2.5 mx-5 my-3 rounded-md bg-[#c6a0f6] transition-colors hover:bg-[#9a75c9]" href="https://mastodon.social/@tile_os">
+			<Mastodon className="mr-1.5"></Mastodon>
+			Mastodon</a
+		>
+	</div>
+	<div class="flex flex-wrap flex-col p-8">
+		<div class="m-5">
+			<h2 class="font-bold text-2xl mb-3">Some of the features:</h2>
+
+			<ul class="mb-8 list-disc text-left">
+				<li>Stable and solid Debian base with some packages backported from Debian Testing;</li>
+				<li>Fully pre-configured desktop based on a tiling window manager (or Wayland compositor);</li>
+				<li>Fresh and stable graphics drivers (Mesa) backported from Debian Testing;</li>
+				<li>Many device drivers and non-free firmwares are included in the base system;</li>
+				<li>Included some performance optimizations as well as some system tweaks;</li>
+				<li>Included additional repositories for installing programs not found in Debian, such as OnlyOffice, VirtualBox, Librewolf, Visual Studio Code and Brave;</li>
+				<li>Ability to install additional software in the Calamares installer.</li>
+			</ul>
+		</div>
 	</div>
 </div>
 
 <div>
 	<div class="flex flex-col xl:flex-row p-8">
 		<div class="flex-1 m-5">
-			<h1 class="font-bold text-3xl mb-3">TileOS 1.0 "T-Rex" Sway Edition</h1>
+			<h1 class="font-bold text-3xl mb-3">TileOS 1.2 "T-Rex" Sway Edition</h1>
 			<p>
 				TileOS Sway is a flagship edition featuring Sway - a lightweight and highly customizable
 				Wayland compositor. It is designed to be compatible with the i3 window manager but is built
@@ -122,16 +180,16 @@
 			<div class="flex flex-row flex-wrap m-7 ml-0">
 				<!-- Sway Download Link -->
 				<a
-					class="border-2 p-2.5 mx-5 my-3 rounded-md bg-[#6993e9] ml-0"
+					class="p-2.5 mx-5 my-3 rounded-md bg-[#6993e9] ml-0 hover:bg-[#567ed1] transition-colors"
-					href="https://downloads.tile-os.com/beta/sway/tileos-sway-1.0-desktop-beta-amd64.iso"
+					href="https://downloads.tile-os.com/stable/sway/{sway.iso}"
 				>
 					<Download className="mr-1.5"></Download>
-					Download (1.0-beta Sway)</a
+					Download</a
 				>
 				<div class="relative inline-block text-left">
 					<div>
 						<button
-							class="border-2 p-2.5 mx-5 my-3 ml-0 rounded-md bg-[#8bd5ca] checksum-sway"
+							class="p-2.5 mx-5 my-3 ml-0 rounded-md bg-[#8bd5ca] checksum-sway transition-colors hover:bg-[#65a89e]"
 							on:click={() => {
 								checksumSwayIsPressed = !checksumSwayIsPressed;
 							}}
@@ -150,14 +208,14 @@
 							<p class="block px-4 py-2 text-sm">
 								<a
 									class=""
-									href="https://downloads.tile-os.com/beta/sway/tileos-sway-1.0-desktop-beta-amd64.sha256.txt"
+									href="https://downloads.tile-os.com/stable/sway/{sway.sha256}"
 									>SHA256</a
 								>
 							</p>
 							<p class="block px-4 py-2 text-sm">
 								<a
 									class=""
-									href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.md5.txt"
+									href="https://downloads.tile-os.com/stable/sway/{sway.md5}"
 									>MD5</a
 								>
 							</p>
@@ -213,7 +271,7 @@
 <div>
 	<div class="flex flex-col xl:flex-row p-8">
 		<div class="flex-1 m-5">
-			<h1 class="font-bold text-3xl mb-3">TileOS 1.0 "T-Rex" River Edition</h1>
+			<h1 class="font-bold text-3xl mb-3">TileOS 1.2 "T-Rex" River Edition</h1>
 			<p>
 				TileOS River Edtion featuring River - a minimalistic and lightweight dynamic Wayland
 				compositor. It is designed to be simple, efficient, and easy to use, making it a great
@@ -227,16 +285,16 @@
 			<div class="flex flex-row flex-wrap m-7 ml-0">
 				<!-- River Download Link -->
 				<a
-					class="border-2 p-2.5 mx-5 my-3 rounded-md bg-[#6993e9] ml-0"
+					class="p-2.5 mx-5 my-3 rounded-md bg-[#6993e9] ml-0 hover:bg-[#567ed1] transition-colors"
-					href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.iso"
+					href="https://downloads.tile-os.com/stable/river/{river.iso}"
 				>
 					<Download className="mr-1.5"></Download>
-					Download (1.0-beta River)</a
+					Download</a
 				>
 				<div class="relative inline-block text-left">
 					<div>
 						<button
-							class="border-2 p-2.5 mx-5 my-3 ml-0 rounded-md bg-[#8bd5ca] checksum-river"
+							class="p-2.5 mx-5 my-3 ml-0 rounded-md bg-[#8bd5ca] checksum-river transition-colors hover:bg-[#65a89e]"
 							on:click={() => {
 								checksumRiverIsPressed = !checksumRiverIsPressed;
 							}}
@@ -255,14 +313,14 @@
 							<p class="block px-4 py-2 text-sm">
 								<a
 									class=""
-									href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.sha256.txt"
+									href="https://downloads.tile-os.com/stable/river/{river.sha256}"
 									>SHA256</a
 								>
 							</p>
 							<p class="block px-4 py-2 text-sm">
 								<a
 									class=""
-									href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.md5.txt"
+									href="https://downloads.tile-os.com/stable/river/{river.md5}"
 									>MD5</a
 								>
 							</p>
@@ -313,7 +371,112 @@
 			</div>
 		</div>
 	</div>
-	<div class="flex flex-col md:flex-row m-7">
+</div>
+
+<div>
+	<div class="flex flex-col xl:flex-row p-8">
+		<div class="flex-1 m-5">
+			<h1 class="font-bold text-3xl mb-3">TileOS 1.2 "T-Rex" Qtile Edition (Experimental)</h1>
+			<p>
+				TileOS Qtile Edtion featuring Qtile - a highly
+				customizable, dynamic tiling window manager
+				written in Python. It supports multiple screens,
+				window tiling, and floating modes, and comes with
+				built-in support for X11 and Wayland. Qtile is
+				well-suited for power users and developers who
+				prefer a keyboard-driven workflow and enjoy
+				tinkering with their system setup.
+			</p>
+			<div class="flex flex-row flex-wrap m-7 ml-0">
+				<!-- Qtile Download Link -->
+				<a
+					class="p-2.5 mx-5 my-3 rounded-md bg-[#6993e9] ml-0 hover:bg-[#567ed1] transition-colors"
+					href="https://downloads.tile-os.com/beta/qtile/{qtile.iso}"
+				>
+					<Download className="mr-1.5"></Download>
+					Download</a
+				>
+				<div class="relative inline-block text-left">
+					<div>
+						<button
+							class="p-2.5 mx-5 my-3 ml-0 rounded-md bg-[#8bd5ca] checksum-river transition-colors hover:bg-[#65a89e]"
+							on:click={() => {
+								checksumQtileIsPressed = !checksumQtileIsPressed;
+							}}
+						>
+							<Check className="mr-1.5 checksum-river"></Check>
+							Checksums
+						</button>
+					</div>
+					<div
+						class="absolute left-0 mx-5 my-3 ml-0 w-56 rounded-md bg-[#8bd5ca] {checksumQtileIsPressed
+							? 'transition ease-in duration-75 opacity-100 scale-100'
+							: 'opacity-0 transition ease-out duration-100 scale-95'}"
+					>
+						<div class="py-1">
+							<!-- Checksum Download Links -->
+							<p class="block px-4 py-2 text-sm">
+								<a
+									class=""
+									href="https://downloads.tile-os.com/beta/qtile/{qtile.sha256}"
+									>SHA256</a
+								>
+							</p>
+							<p class="block px-4 py-2 text-sm">
+								<a
+									class=""
+									href="https://downloads.tile-os.com/beta/qtile/{qtile.md5}"
+									>MD5</a
+								>
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="flex-1 m-5">
+			<!-- Screenshots -->
+			<div class="flex justify-center flex-wrap" id="sway-screenshots">
+				<a
+					href="screenshots/qtile/1.png"
+					data-pswp-width="1920"
+					data-pswp-height="980"
+					target="_blank"
+				>
+					<img
+						class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]"
+						src="screenshots/qtile/1.png"
+						alt=""
+					/>
+				</a>
+				<a
+					href="screenshots/qtile/2.png"
+					data-pswp-width="1920"
+					data-pswp-height="980"
+					target="_blank"
+				>
+					<img
+						class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]"
+						src="screenshots/qtile/2.png"
+						alt=""
+					/>
+				</a>
+				<a
+					href="screenshots/qtile/3.png"
+					data-pswp-width="1920"
+					data-pswp-height="980"
+					target="_blank"
+				>
+					<img
+						class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]"
+						src="screenshots/qtile/3.png"
+						alt=""
+					/>
+				</a>
+			</div>
+		</div>
+	</div>
+	<div class="flex flex-col lg:flex-row m-7">
 		<div class="m-5 flex-1">
 			<h2 class="text-2xl font-bold mb-3">System requirements:</h2>
 			<ul class="list-disc">
@@ -347,3 +510,9 @@
 		</div>
 	</div>
 </div>
+<footer>
+	<div class="flex flex-col p-12 justify-center items-center text-center text-sm bg-[#181926]">
+		<p>© 2024 TileOS Developers</p>
+		<p>TileOS is not affiliated with Debian. Debian is a registered trademark owned by Software in the Public Interest, Inc.</p>
+	</div>
+</footer>

src/routes/icons/Mastodon.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+	export let className: string = '';
+</script>
+<svg class="w-6 h-6 inline {className}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/></svg>

src/routes/icons/Telegram.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let className: string = '';
+</script>
+
+<svg class="w-6 h-6 inline {className}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>