Skip to content

Commit

Permalink
www: Add metadata
Browse files Browse the repository at this point in the history 
Change-Id: I5bb58c5aba1a5947d5a660f56cce680a5fadd683
  • Loading branch information
@neroices
neroices committed Dec 21, 2024
1 parent 544281a commit 5ae8ee0
Show file tree
Hide file tree
Showing 7 changed files with 546 additions and 505 deletions.
119 changes: 8 additions & 111 deletions src/app/about/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,11 @@
"use client";
import AboutPage from '@/components/about-page'

import { motion } from "framer-motion";
import { TeamMember } from "@/components/team-member";

const teamMembers = [
{
name: "Toufu",
role: "Founder/Lead Developer",
image: "/toufu.png",
github: "toufune",
},
{
name: "Maitani-Sakura",
role: "Co-Founder/Developer",
image: "/maitani-sakura.png",
github: "maitani-sakura",
},
{
name: "soralis0912",
role: "Developer",
image: "/soralis0912.png",
github: "soralis0912",
},
{
name: "neroices",
role: "Developer",
image: "/neroices.png",
github: "neroices",
},
{
name: "MONE-FIERA",
role: "Developer",
image: "/monefiera.png",
github: "monefiera",
},
{
name: "Yumagi",
role: "Developer",
image: "/yumagi.png",
github: "ymag-h",
},
{
name: "satokun2668",
role: "Designer",
image: "/satokun.jpg",
github: "numaaqours",
},
{
name: "Garry050",
role: "Advisor",
image: "/garry050.png",
github: "garry050",
},
];

const fadeInUp = {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
transition: { duration: 0.5 },
};
export const metadata = {
title: 'About',
description: 'About WitAqua.',
}

export default function AboutPage() {
return (
<motion.div
className="container py-6 px-4 sm:px-6 lg:px-8 mx-auto"
initial="initial"
animate="animate"
variants={{
initial: { opacity: 0 },
animate: { opacity: 1, transition: { staggerChildren: 0.1 } },
}}
>
<motion.h1
className="text-4xl font-bold mb-8 text-center"
variants={fadeInUp}
>
About WitAqua
</motion.h1>
<motion.section className="mb-12 text-left" variants={fadeInUp}>
<p className="text-lg mb-4">
{
"We're a small team of passionate Android enthusiasts from Japan, and we've come together to create something special. It all started because we love the simplicity of stock Android but felt it could use a little more personality and practicality without all the unnecessary bloat. So, we rolled up our sleeves and got to work, crafting a clean, and responsive."
}
</p>
<p className="text-lg mb-4">
{
"We kept the core Android experience intact while adding some carefully chosen enhancements to make your device more customizable, and just plain better to use. We're not a big corporation or a fancy tech giant. We're just a group of like-minded developers who love tinkering with Android and making it better for everyone."
}
</p>
<p className="text-lg">
{
"So, whether you're here to try something new, or just curious about what we're building, welcome to WitAqua! We're excited to have you join us on this journey at a time."
}
</p>
</motion.section>
<motion.section variants={fadeInUp}>
<h2 className="text-2xl font-semibold mb-6 text-center">Our Team</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 justify-items-center">
{teamMembers.map((member, index) => (
<motion.div
key={member.name}
variants={fadeInUp}
transition={{ delay: index * 0.1 }}
className="flex justify-center"
>
<TeamMember {...member} />
</motion.div>
))}
</div>
</motion.section>
</motion.div>
);
export default function About() {
return <AboutPage />
}

244 changes: 6 additions & 238 deletions src/app/devices/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,242 +1,10 @@
"use client";
import DevicesPage from '@/components/devices-page'

import { useState, useEffect } from "react";
import { Download, Github, Search, AlertTriangle } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogTrigger,
} from "@/components/ui/dialog";
import type { Device } from "@/types/device";

export default function DevicesPage() {
const [devices, setDevices] = useState<Device[]>([]);
const [searchQuery, setSearchQuery] = useState("");
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);

useEffect(() => {
const fetchDevicesData = async () => {
try {
const response = await fetch(
"https://raw.githubusercontent.com/WitAqua/WitAquaOTA/refs/heads/main/data/devices.json",
);
if (!response.ok) {
throw new Error(
`Failed to fetch devices data. Status: ${response.status}`,
);
}
const data = await response.json();
setDevices(data.devices); // Assuming the JSON contains an array of devices under 'devices'
} catch (e) {
console.error("Error loading devices:", e);
setError("Failed to load devices data");
} finally {
setLoading(false);
}
};

fetchDevicesData();
}, []);

const filteredDevices = devices.filter(
(device) =>
device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
device.codename.toLowerCase().includes(searchQuery.toLowerCase()) ||
device.brand.toLowerCase().includes(searchQuery.toLowerCase()),
);

const { deprecatedDevices, activeDevices } = filteredDevices.reduce(
(acc, device) => {
if (device.deprecated) {
acc.deprecatedDevices.push(device);
} else {
if (!acc.activeDevices[device.brand]) {
acc.activeDevices[device.brand] = [];
}
acc.activeDevices[device.brand].push(device);
}
return acc;
},
{ deprecatedDevices: [], activeDevices: {} } as {
deprecatedDevices: Device[];
activeDevices: Record<string, Device[]>;
},
);

return (
<div className="container py-6 px-4 sm:px-6 lg:px-8 mx-auto">
<div className="flex flex-col gap-6">
<div className="relative flex items-center">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder="Search devices..."
className="pl-10 w-full"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>

{loading ? (
<div className="text-center">Loading devices...</div>
) : error ? (
<div className="text-center text-red-500">
Error: {error}. Please try again later or contact support.
</div>
) : (
<Accordion type="multiple" className="w-full">
{Object.entries(activeDevices).map(([brand, devices]) => (
<AccordionItem key={brand} value={brand}>
<AccordionTrigger className="text-lg">{brand}</AccordionTrigger>
<AccordionContent>
<div className="space-y-2">
{devices.map((device) => (
<DeviceItem key={device.codename} device={device} />
))}
</div>
</AccordionContent>
</AccordionItem>
))}
{deprecatedDevices.length > 0 && (
<AccordionItem value="deprecated">
<AccordionTrigger className="text-lg text-yellow-600 dark:text-yellow-400">
Deprecated Devices
</AccordionTrigger>
<AccordionContent>
<div className="space-y-2">
{deprecatedDevices.map((device) => (
<DeviceItem key={device.codename} device={device} />
))}
</div>
</AccordionContent>
</AccordionItem>
)}
</Accordion>
)}
</div>
</div>
);
export const metadata = {
title: 'Supported Devices',
}

function DeviceItem({ device }: { device: Device }) {
const [changelog, setChangelog] = useState("");

const handleFetchChangelog = async () => {
try {
const response = await fetch(
`https://raw.githubusercontent.com/WitAqua/WitAquaOTA/refs/heads/main/changelog/${device.codename}`,
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const text = await response.text();
setChangelog(text);
} catch (error) {
console.error("Error fetching changelog:", error);
setChangelog(
`Failed to load changelog for ${device.name} (${device.codename}). Please try again later.`,
);
}
};

return (
<div
className={`flex flex-col sm:flex-row justify-between w-full p-4 rounded-lg ${device.deprecated ? "bg-yellow-100 dark:bg-yellow-900" : "hover:bg-muted"}`}
>
<div className="flex flex-col">
<div className="flex items-center">
<span className="font-medium">{device.name}</span>
{device.deprecated && (
<AlertTriangle className="ml-2 h-4 w-4 text-yellow-600 dark:text-yellow-400" />
)}
</div>
<span className="text-sm text-muted-foreground">{device.codename}</span>
<span className="text-sm text-muted-foreground">
Android {device.latestAndroidVersion} | Latest build:{" "}
{device.latestBuildDate}
</span>
<div className="flex items-center mt-1">
<span className="text-sm text-muted-foreground mr-2">
Maintainer: {device.maintainer.name}
</span>
{device.maintainer.github && (
<a
href={`https://github.com/${device.maintainer.github}`}
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:text-primary-focus"
>
<Github className="h-4 w-4" />
</a>
)}
</div>
</div>
<div className="flex items-center gap-2 mt-2 sm:mt-0 overflow-x-auto">
<Dialog>
<DialogTrigger asChild>
<Button variant="outline" size="sm" onClick={handleFetchChangelog}>
Changelog
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Changelog for {device.name}</DialogTitle>
<DialogDescription asChild>
<div className="mt-2">
<pre className="whitespace-pre-wrap font-mono text-sm">
{changelog}
</pre>
</div>
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
<Button
size="sm"
onClick={() => window.open(device.downloadUrl, "_blank")}
>
<Download className="mr-2 h-4 w-4" />
Latest
</Button>
<Button
variant="outline"
size="sm"
onClick={() => window.open(`${device.archiveUrl}`, "_blank")}
>
<Download className="mr-2 h-4 w-4" />
Archive
</Button>

<Button
variant="outline"
size="sm"
onClick={() => window.open(`${device.imgsUrl}`, "_blank")}
>
<Download className="mr-2 h-4 w-4" />
Images
</Button>

{device.installUrl && (
<Button
variant="outline"
size="sm"
onClick={() => window.open(device.installUrl, "_blank")}
>
Install Instructions
</Button>
)}
</div>
</div>
);
export default function Devices() {
return <DevicesPage />
}

10 changes: 10 additions & 0 deletions src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,21 @@ import { Inter } from "next/font/google";
import { ThemeProvider } from "./providers";
import { SiteHeader } from "@/components/site-header";
import { SiteFooter } from "@/components/site-footer";
import { Metadata } from "next";

import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
title: {
default: 'WitAqua',
template: '%s | WitAqua'
},
description: 'A custom Android ROM developed by Japanese Android enthusiasts.',
}


export default function RootLayout({
children,
}: {
Expand Down
Loading

0 comments on commit 5ae8ee0

Please sign in to comment.