Add Info page and accordions (#8)
This commit is contained in:
Gopal Kaul
GitHub
parent
df0c20e7a7
commit
006918ec80
80
src/components/Accordion.astro
Normal file
80
src/components/Accordion.astro
Normal file
@ -0,0 +1,80 @@
|
||||
---
|
||||
import AccordionWidget from "./widgets/AccordionWidget.astro";
|
||||
interface AccordionWidgetProps {
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
const accordionData: AccordionWidgetProps[] = [
|
||||
{
|
||||
title: "Official Firefox and thunderbird Sources",
|
||||
description:
|
||||
"The latest Firefox and thunderbird packages will be pulled from the official mozilla PPA",
|
||||
},
|
||||
{
|
||||
title:
|
||||
"Snap phased out in favor of Native packaging and of course flatpak",
|
||||
description:
|
||||
"Every single package that was turned into a snap, has been reverted into a deb, and flatpak is installed by default",
|
||||
},
|
||||
{
|
||||
title:
|
||||
"6 unique desktop layouts & a lot accent colors available in the PikaOS Gnome Layouts app",
|
||||
description:
|
||||
"On the Gnome ISO: The app PikaOS Gnome Layouts will provide 6 experiences to other DEs and OSes",
|
||||
},
|
||||
{
|
||||
title: "Latest Stable Mesa Drivers by Valve's kisak",
|
||||
description:
|
||||
"Fresh Up to date graphics drivers for intel and AMD by a valve employee",
|
||||
},
|
||||
{
|
||||
title: "Latest AMDGPU firmware pulled from AMD's official repos",
|
||||
description:
|
||||
"Firmware files will be pulled from https://repo.radeon.com/ to provide the best experience for AMD users",
|
||||
},
|
||||
{
|
||||
title: "XONE, XPADNEO, and XPAD-NOONE installable through the welcome app",
|
||||
description:
|
||||
"Drivers That Expand the functionality of Xbox One and above controllers can be install with a single click",
|
||||
},
|
||||
{
|
||||
title: "Lutris constantly updated to latest releases",
|
||||
description: "We Do not wait around for ubuntu to do it we do it ourselves",
|
||||
},
|
||||
{
|
||||
title: "gamescope updated to latest git(HDR Supported!)",
|
||||
description:
|
||||
"We Do not wait around for ubuntu to do it we do it ourselves and we have a standalone gamescope session in sessions cog wheel",
|
||||
},
|
||||
{
|
||||
title:
|
||||
"vkbasalt and mangohud constantly updated to latest releases, and built with 32 bit support",
|
||||
|
||||
description: "We do not wait around for Ubuntu to do it, yywe do it ourselves",
|
||||
},
|
||||
{
|
||||
title:
|
||||
"Support for amdgpu proprietary add-ons. (amdvlk-pro, amdvlk, opencl-legacy, AMF)",
|
||||
description: `We have a GUI app to safely install these driver components safely
|
||||
Note: they will not interfere with normal open source driver they are only loaded when uses the cmd prefixes vk_pro, vk_amdvlk, cl_pro`,
|
||||
},
|
||||
{
|
||||
title: "OBS-Studio patched with gstreamer va-api, and AMD AMF support",
|
||||
description:
|
||||
"Our OBS Studio will have the gstreamer vaapi enconder which is far superior to the default ffmpeg one",
|
||||
},
|
||||
{
|
||||
title: "And The offical AMD AMF encoder",
|
||||
description:
|
||||
"ROCm stack (including HIP) installable through the welcome app.",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<div class="w-full text-start space-y-4 pt-10">
|
||||
{
|
||||
accordionData.map((el) => (
|
||||
<AccordionWidget title={el.title} description={el.description} />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
50
src/components/widgets/AccordionWidget.astro
Normal file
50
src/components/widgets/AccordionWidget.astro
Normal file
@ -0,0 +1,50 @@
|
||||
---
|
||||
type Props = {
|
||||
title: string;
|
||||
description: string;
|
||||
};
|
||||
const { title, description } = Astro.props;
|
||||
---
|
||||
|
||||
<div
|
||||
class="w-full rounded-lg border px-2 py-2 transition-[height] duration-500 ease-in-out dark:bg-slate-800"
|
||||
>
|
||||
<button
|
||||
class="w-full text-center md:text-start accordion flex flex-row gap-x-1 py-1 justify-between items-center"
|
||||
>
|
||||
<h3
|
||||
class="opacity-80 w-full transition-opacity duration-500 ease-in-out font-medium pointer-events-none"
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
<div class="pointer-events-none transition-transform duration-500 shrink-0 h-4 w-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="shrink md:h-4 fill-slate-800 dark:fill-white transition-transform duration-500 ease-in-out pointer-events-none"
|
||||
viewBox="0 0 384 512"
|
||||
>
|
||||
<path
|
||||
d="M169.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 274.7 54.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
|
||||
></path></svg>
|
||||
</div>
|
||||
</button>
|
||||
<p
|
||||
style="max-height: 0px;"
|
||||
class="overflow-hidden transition-all duration-500 text-center md:text-start ease-in-out pointer-events-none"
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
for (let e of document.getElementsByClassName("accordion")) {
|
||||
e.addEventListener("click", function (e) {
|
||||
(e.target as HTMLElement).children[0].classList.toggle("opacity-80");
|
||||
(e.target as HTMLElement).children[0].classList.toggle("font-bold");
|
||||
(e.target as HTMLElement).children[1].classList.toggle("rotate-180");
|
||||
if (this.nextElementSibling.style.maxHeight === "0px")
|
||||
this.nextElementSibling.style.maxHeight = "500px";
|
||||
else this.nextElementSibling.style.maxHeight = "0px";
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -9,15 +9,15 @@ import { getHomePermalink } from "~/utils/permalinks";
|
||||
const links = [
|
||||
{
|
||||
text: "Features",
|
||||
href: "#features",
|
||||
href: "/features",
|
||||
},
|
||||
{
|
||||
text: "FAQs",
|
||||
href: "#faqs",
|
||||
href: "/#faqs",
|
||||
},
|
||||
{
|
||||
text: "Download",
|
||||
href: "#download",
|
||||
href: "/#download",
|
||||
},
|
||||
// {
|
||||
// text: 'About us',
|
||||
@ -99,7 +99,7 @@ const links = [
|
||||
<ToggleTheme iconClass="w-5 h-5" />
|
||||
<a
|
||||
class="btn w-full ml-3 py-2.5 px-5 font-semibold text-gray-600 shadow-none text-sm"
|
||||
href="#download">Download</a
|
||||
href="/#download">Download</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
18
src/pages/features.astro
Normal file
18
src/pages/features.astro
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
import Accordion from "~/components/Accordion.astro";
|
||||
import { SITE } from "~/config.mjs";
|
||||
import Layout from "~/layouts/PageLayout.astro";
|
||||
|
||||
const meta = {
|
||||
title: SITE.title,
|
||||
description: SITE.description,
|
||||
dontUseTitleTemplate: true,
|
||||
};
|
||||
---
|
||||
|
||||
<Layout {meta}>
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-12 md:py-20">
|
||||
<h1 class="text-xl md:text-4xl font-bold text-center">Features of PikaOS</h1>
|
||||
<Accordion />
|
||||
</div>
|
||||
</Layout>
|
||||
Loading…
Reference in New Issue
Block a user