Skip to content

Commit 9a822d3

Browse files
demonkillerrdemonkillerr
authored
Merge pull request #19 from arch-linux-gui/2025_11_release_fixes
Website fixes for December 2025
2 parents 0bec28d + a7f92d5 commit 9a822d3

16 files changed

Lines changed: 5085 additions & 2352 deletions

File tree

‎.github/workflows/build.yml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
name: Build ALG Website
2+
3+
on:
4+
push:
5+
branches: [main]
6+
pull_request:
7+
branches: [main]
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
13+
strategy:
14+
matrix:
15+
node-version: [20.x]
16+
17+
steps:
18+
- name: Checkout code
19+
uses: actions/checkout@v4
20+
21+
- name: Setup Node.js ${{ matrix.node-version }}
22+
uses: actions/setup-node@v4
23+
with:
24+
node-version: ${{ matrix.node-version }}
25+
cache: 'npm'
26+
27+
- name: Install dependencies
28+
run: npm ci
29+
30+
- name: Build project
31+
run: npm run build

‎app/downloads/Flavours.tsx‎

Lines changed: 115 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,9 @@
11
"use client";
22

33
import Image from "next/image";
4-
import React, { useEffect, useRef, useState } from "react";
5-
6-
interface IsoLinks {
7-
sourceforge: string;
8-
// torrent: string;
9-
}
10-
11-
interface IsoData {
12-
kde: IsoLinks;
13-
gnome: IsoLinks;
14-
xfce: IsoLinks;
15-
}
16-
17-
// const pureIso: IsoData = {
18-
// kde: {
19-
// sourceforge:
20-
// "https://sourceforge.net/projects/arch-linux-gui/files/archlinux-gui-plasma-pure-2022.07-x86_64.iso/download",
21-
// osdn: "https://osdn.net/dl/arch-linux-gui/archlinux-gui-plasma-pure-2022.07-x86_64.iso",
22-
// torrent: "https://some-torrent-link/kde-pure.torrent",
23-
// },
24-
// gnome: {
25-
// sourceforge:
26-
// "https://sourceforge.net/projects/arch-linux-gui/files/archlinux-gui-gnome-pure-2022.07-x86_64.iso/download",
27-
// osdn: "https://osdn.net/dl/arch-linux-gui/archlinux-gui-gnome-pure-2022.07-x86_64.iso",
28-
// torrent: "https://some-torrent-link/gnome-pure.torrent",
29-
// },
30-
// xfce: {
31-
// sourceforge:
32-
// "https://sourceforge.net/projects/arch-linux-gui/files/archlinux-gui-xfce-pure-2022.07-x86_64.iso/download",
33-
// osdn: "https://osdn.net/dl/arch-linux-gui/archlinux-gui-xfce-pure-2022.07-x86_64.iso",
34-
// torrent: "https://some-torrent-link/xfce-pure.torrent",
35-
// },
36-
// };
37-
38-
const themedIso: IsoData = {
39-
kde: {
40-
sourceforge:
41-
"https://sourceforge.net/projects/arch-linux-gui/files/alg-plasma-2025.10-x86_64.iso/download",
42-
// torrent: "https://some-torrent-link/kde-themed.torrent",
43-
},
44-
gnome: {
45-
sourceforge:
46-
"https://sourceforge.net/projects/arch-linux-gui/files/alg-gnome-2025.10-x86_64.iso/download",
47-
// torrent: "https://some-torrent-link/gnome-themed.torrent",
48-
},
49-
xfce: {
50-
sourceforge:
51-
"https://sourceforge.net/projects/arch-linux-gui/files/alg-xfce-2025.10-x86_64.iso/download",
52-
// torrent: "https://some-torrent-link/xfce-themed.torrent",
53-
},
54-
};
4+
import React, { useState } from "react";
5+
import { Copy, Check, Shield } from "lucide-react";
6+
import { themedIso } from '@/lib/Isodata'
557

568
interface DesktopEnvironmentProps {
579
name: "kde" | "gnome" | "xfce";
@@ -62,6 +14,51 @@ interface DesktopEnvironmentProps {
6214
isReversed?: boolean;
6315
}
6416

17+
// Checksum Component
18+
const ChecksumDisplay: React.FC<{ checksum: string }> = ({ checksum }) => {
19+
const [copied, setCopied] = useState(false);
20+
21+
const handleCopy = async () => {
22+
try {
23+
await navigator.clipboard.writeText(checksum);
24+
setCopied(true);
25+
setTimeout(() => setCopied(false), 2000);
26+
} catch (err) {
27+
console.error("Failed to copy:", err);
28+
}
29+
};
30+
31+
return (
32+
<div className="mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-600">
33+
<div className="flex items-center gap-2 mb-2">
34+
<Shield className="w-4 h-4 text-orange-600 dark:text-orange-400" />
35+
<span className="text-xs font-semibold text-gray-700 dark:text-gray-300">
36+
SHA1 Checksum
37+
</span>
38+
</div>
39+
<div className="flex items-center gap-2">
40+
<code className="flex-1 text-xs bg-white dark:bg-gray-900 px-3 py-2 rounded border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 font-mono break-all">
41+
{checksum}
42+
</code>
43+
<button
44+
onClick={handleCopy}
45+
className="flex-shrink-0 p-2 bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-500 text-white rounded transition-all duration-200"
46+
title={copied ? "Copied!" : "Copy to clipboard"}
47+
>
48+
{copied ? (
49+
<Check className="w-4 h-4" />
50+
) : (
51+
<Copy className="w-4 h-4" />
52+
)}
53+
</button>
54+
</div>
55+
<p className="mt-2 text-xs text-gray-600 dark:text-gray-400">
56+
Verify your download using this checksum
57+
</p>
58+
</div>
59+
);
60+
};
61+
6562
const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
6663
name,
6764
title,
@@ -71,107 +68,94 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
7168
isReversed,
7269
}) => {
7370
// Default to Themed variant for visuals and downloads
74-
const [dropdownVisible, setDropdownVisible] = useState(false);
75-
const dropdownRef = useRef<HTMLDivElement>(null);
76-
77-
useEffect(() => {
78-
const handleClickOutside = (event: MouseEvent) => {
79-
if (
80-
dropdownRef.current &&
81-
!dropdownRef.current.contains(event.target as Node)
82-
) {
83-
setDropdownVisible(false);
84-
}
85-
};
86-
87-
document.addEventListener("mousedown", handleClickOutside);
88-
return () => {
89-
document.removeEventListener("mousedown", handleClickOutside);
90-
};
91-
}, []);
92-
93-
const toggleDropdown = () => setDropdownVisible(!dropdownVisible);
94-
9571
const isoLinks = themedIso[name];
9672

9773
const contentSection = (
98-
<div className="flex flex-col justify-center p-3 rounded-lg md:p-6">
99-
<h2 className="mb-4 text-3xl font-bold md:text-5xl">{title}</h2>
100-
<p className="mb-4 leading-relaxed md:text-lg">{description}</p>
101-
<div className="flex items-center text-center rounded-lg md:hidden">
102-
<Image
103-
src={themedImage}
104-
alt={title}
105-
width={500}
106-
height={300}
107-
priority={true}
108-
className="mx-auto rounded-lg"
109-
/>
74+
<div className="flex flex-col justify-center p-6 md:p-8">
75+
<h2 className="mb-4 text-3xl font-bold md:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-orange-700 dark:from-orange-400 dark:to-orange-300">
76+
{title}
77+
</h2>
78+
<p className="mb-6 leading-relaxed text-gray-700 dark:text-gray-300 md:text-lg">
79+
{description}
80+
</p>
81+
<div className="flex items-center text-center rounded-xl md:hidden mb-6">
82+
<div className="relative w-full rounded-xl overflow-hidden border-2 border-orange-200 dark:border-orange-800/50 shadow-lg">
83+
<Image
84+
src={themedImage}
85+
alt={title}
86+
width={500}
87+
height={300}
88+
priority={true}
89+
className="mx-auto"
90+
/>
91+
</div>
11092
</div>
111-
<div className="relative flex justify-center mt-6">
112-
<button
113-
onClick={toggleDropdown}
114-
className="py-3 px-12 bg-[#F97316] text-white opacity-90 hover:opacity-100 rounded-full transition-all"
93+
<div className="flex flex-col items-center mt-6">
94+
<a
95+
href={isoLinks.sourceforge}
96+
target="_blank"
97+
rel="noopener noreferrer"
98+
className="py-3 px-12 bg-orange-500 text-white hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-500 rounded-full transition-all duration-300 hover:scale-105 shadow-lg inline-block font-semibold"
11599
>
116100
Download
117-
</button>
118-
{dropdownVisible && (
119-
<div
120-
className="absolute mt-2 rounded shadow-lg top-full bg-white"
121-
ref={dropdownRef}
122-
>
123-
{Object.entries(isoLinks).map(([key, value]) => (
124-
<a
125-
key={key}
126-
href={value}
127-
target="_blank"
128-
rel="noopener noreferrer"
129-
className="block px-4 py-2 text-black hover:bg-gray-200"
130-
>
131-
{key.charAt(0).toUpperCase() + key.slice(1)}
132-
</a>
133-
))}
134-
</div>
135-
)}
101+
</a>
102+
<div className="w-full max-w-md mt-4">
103+
<ChecksumDisplay checksum={isoLinks.checksum} />
104+
</div>
136105
</div>
137106
</div>
138107
);
139108

140109
const imageSection = (
141-
<div className="items-center hidden p-6 text-center rounded-lg md:flex">
142-
<Image
143-
src={themedImage}
144-
alt={title}
145-
width={900}
146-
height={800}
147-
priority={true}
148-
className="mx-auto rounded-lg"
149-
/>
110+
<div className="items-center hidden p-6 md:p-8 text-center md:flex">
111+
<div className="relative w-full rounded-xl overflow-hidden border-2 border-orange-200 dark:border-orange-800/50 shadow-2xl hover:shadow-orange-300/50 dark:hover:shadow-orange-900/50 transition-shadow duration-300">
112+
<Image
113+
src={themedImage}
114+
alt={title}
115+
width={900}
116+
height={800}
117+
priority={true}
118+
className="mx-auto"
119+
/>
120+
</div>
150121
</div>
151122
);
152123

153124
return (
154-
<div className="grid grid-cols-1 gap-6 mb-12 md:grid-cols-2">
155-
{isReversed ? (
156-
<>
157-
{imageSection}
158-
{contentSection}
159-
</>
160-
) : (
161-
<>
162-
{contentSection}
163-
{imageSection}
164-
</>
165-
)}
125+
<div className="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-orange-200/50 dark:border-orange-800/50 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
126+
<div className="grid grid-cols-1 gap-0 md:grid-cols-2">
127+
{isReversed ? (
128+
<>
129+
{imageSection}
130+
{contentSection}
131+
</>
132+
) : (
133+
<>
134+
{contentSection}
135+
{imageSection}
136+
</>
137+
)}
138+
</div>
166139
</div>
167140
);
168141
};
169142

170143
export default function Flavours() {
171144
return (
172-
<section className="bg-gradient-to-br from-orange-50 to-orange-100 dark:from-[#0b0b10] dark:to-[#09090B] pt-4 md:pt-0 px-4 sm:px-12 md:px-20 md:pb-12 lg:px-28">
173-
{/* Don't know why now its working correctly but when pureImage & themedImage places are changed it works inversely, need to fix! */}
174-
<div className="flex flex-col space-y-6">
145+
<section className="relative bg-gradient-to-br from-orange-50 to-orange-100 dark:from-[#0b0b10] dark:to-[#09090B] pt-4 md:pt-0 px-4 sm:px-12 md:px-20 md:pb-12 lg:px-28 overflow-hidden">
146+
{/* Dot Grid Pattern */}
147+
<div className="absolute inset-0 z-0">
148+
<svg className="absolute inset-0 w-full h-full" xmlns="http://www.w3.org/2000/svg">
149+
<defs>
150+
<pattern id="dotPatternFlavours" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
151+
<circle cx="2" cy="2" r="1.5" fill="rgba(249,115,22,0.1)" />
152+
</pattern>
153+
</defs>
154+
<rect width="100%" height="100%" fill="url(#dotPatternFlavours)" />
155+
</svg>
156+
</div>
157+
158+
<div className="flex flex-col space-y-8 relative z-10">
175159
<DesktopEnvironment
176160
name="kde"
177161
title="ALG Plasma"

‎app/downloads/Requirements.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ export default function Requirements() {
44
return (
55
<section className="bg-gradient-to-br from-orange-50 to-orange-100 dark:from-[#0b0b10] dark:to-[#09090B] px-6 pt-36 sm:px-12 md:px-20 md:pb-12 lg:px-28">
66
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
7-
<div className="bg-[#FFFFFF] p-6 rounded-lg">
8-
<h2 className="mb-4 text-2xl font-bold text-black md:text-3xl">
7+
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-orange-200 dark:border-orange-800/50">
8+
<h2 className="mb-4 text-2xl font-bold text-gray-800 dark:text-gray-100 md:text-3xl">
99
Requirements
1010
</h2>
11-
<p className="mb-1 font-semibold text-gray-600">Minimum:</p>
12-
<ul className="mb-4 text-gray-600 list-disc list-inside">
11+
<p className="mb-1 font-semibold text-orange-700 dark:text-orange-400">Minimum:</p>
12+
<ul className="mb-4 text-gray-700 dark:text-gray-300 list-disc list-inside">
1313
<li>
1414
64 bit x86_64 processor (Intel/AMD), with at least 2 CPU cores.
1515
(32-bit not supported)
@@ -22,10 +22,10 @@ export default function Requirements() {
2222
motherboard.
2323
</li>
2424
</ul>
25-
<p className="mb-1 font-semibold text-gray-600">
25+
<p className="mb-1 font-semibold text-orange-700 dark:text-orange-400">
2626
Recommended (Themed Edition):
2727
</p>
28-
<ul className="text-gray-600 list-disc list-inside">
28+
<ul className="text-gray-700 dark:text-gray-300 list-disc list-inside">
2929
<li>
3030
64 bit x86_64 processor (Intel/AMD), with at least 4 CPU cores.
3131
(32-bit not supported)
@@ -36,15 +36,15 @@ export default function Requirements() {
3636
<li>WiFi and Ethernet Card.</li>
3737
</ul>
3838
</div>
39-
<div className="bg-[#9c89d1] p-6 rounded-lg">
40-
<h2 className="mb-4 text-2xl font-bold md:text-3xl">
39+
<div className="bg-gradient-to-br from-orange-500 to-orange-600 dark:from-orange-600 dark:to-orange-700 p-6 rounded-lg shadow-lg">
40+
<h2 className="mb-4 text-2xl font-bold text-white md:text-3xl">
4141
Installation Instructions
4242
</h2>
4343
<h2 className="mb-1 font-semibold text-white">Make Bootable USB:</h2>
44-
<ul className="mb-4 text-white list-disc list-inside">
44+
<ul className="mb-4 text-white/95 list-disc list-inside">
4545
<li>
4646
To create a bootable USB. You can follow the step-by-step guides on
47-
the <Link href="/tutorials" className="underline underline-offset-2 font-semibold text-white">Tutorials page</Link>.
47+
the <Link href="/tutorials" className="underline underline-offset-2 font-bold text-white hover:text-orange-100">Tutorials page</Link>.
4848
</li>
4949
<h2 className="mb-1 font-semibold text-white">Getting Started with ALG installation:</h2>
5050
<li>

‎app/page.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import Hero from "@/components/Hero";
2-
import Testi from "@/components/Testi";
3-
import WhatsNew from "@/components/WhatsNew";
4-
import { Gallery } from "@/components/gallery";
2+
import { WhyALGSection, FeaturesDeepDiveSection } from "@/components/WhatsNew";
3+
import { Gallery, GetStartedSection } from "@/components/gallery";
54

65
export const metadata = {
76
title: "Arka Linux GUI",
@@ -12,9 +11,10 @@ export default function Home() {
1211
return (
1312
<main className="relative overflow-x-hidden">
1413
<Hero />
15-
<WhatsNew />
14+
<WhyALGSection />
15+
<FeaturesDeepDiveSection />
1616
<Gallery />
17-
<Testi />
17+
<GetStartedSection />
1818
</main>
1919
);
2020
}

0 commit comments

Comments
 (0)