From 20fb51c8b12c11af1748c9c39cf62c1844d3a069 Mon Sep 17 00:00:00 2001 From: Matej Focko Date: Sat, 15 Jul 2023 13:36:04 +0200 Subject: [PATCH] feat: make front page Signed-off-by: Matej Focko --- .../src/components/HomepageFeatures/index.tsx | 44 +++-- .../HomepageFeatures/styles.module.css | 5 - packit.dev/src/pages/index.tsx | 177 +++++++++++++++++- 3 files changed, 201 insertions(+), 25 deletions(-) diff --git a/packit.dev/src/components/HomepageFeatures/index.tsx b/packit.dev/src/components/HomepageFeatures/index.tsx index ee86e91956..5837e08466 100644 --- a/packit.dev/src/components/HomepageFeatures/index.tsx +++ b/packit.dev/src/components/HomepageFeatures/index.tsx @@ -1,52 +1,59 @@ import React from "react"; import clsx from "clsx"; import styles from "./styles.module.css"; +import Link from "@docusaurus/Link"; type FeatureItem = { title: string; - Svg: React.ComponentType>; description: JSX.Element; }; const FeatureList: FeatureItem[] = [ { - title: "Easy to Use", - Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default, + title: "Building RPMs", description: ( <> - Docusaurus was designed from the ground up to be easily installed and - used to get your website up and running quickly. + Packit uses{" "} + Copr build system to + build RPMs from your code changes. This way, you can validate your + package will be correctly built from each pull request and also have + your changes installable by anyone via YUM repository created in Copr.{" "} + Learn more. ), }, { - title: "Focus on What Matters", - Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default, + title: "Testing", description: ( <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go - ahead and move your docs into the docs directory. + Packit runs your tests in{" "} + + Testing Farm + {" "} + and can test either the RPM package built in Copr or trigger tests + directly on different platforms.{" "} + Learn more. ), }, { - title: "Powered by React", - Svg: require("@site/static/img/undraw_docusaurus_react.svg").default, + title: "Automating Fedora Releases", description: ( <> - Extend or customize your website layout by reusing React. Docusaurus can - be extended while reusing the same header and footer. + With Packit, you can easily get your upstream releases to the{" "} + Fedora dist-git, + automatically submit builds in{" "} + Koji and create{" "} + Bodhi updates!{" "} + Learn more. ), }, ]; -function Feature({ title, Svg, description }: FeatureItem) { +function Feature({ title, description }: FeatureItem) { return (
-
- -

{title}

{description}

@@ -59,6 +66,7 @@ export default function HomepageFeatures(): JSX.Element { return (
+

What key features does Packit offer?

{FeatureList.map((props, idx) => ( @@ -68,3 +76,5 @@ export default function HomepageFeatures(): JSX.Element {
); } + +export { FeatureItem, Feature, HomepageFeatures }; diff --git a/packit.dev/src/components/HomepageFeatures/styles.module.css b/packit.dev/src/components/HomepageFeatures/styles.module.css index b248eb2e5d..2132b3d127 100644 --- a/packit.dev/src/components/HomepageFeatures/styles.module.css +++ b/packit.dev/src/components/HomepageFeatures/styles.module.css @@ -4,8 +4,3 @@ padding: 2rem 0; width: 100%; } - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/packit.dev/src/pages/index.tsx b/packit.dev/src/pages/index.tsx index 44fa4fc9ab..fd9c210ff0 100644 --- a/packit.dev/src/pages/index.tsx +++ b/packit.dev/src/pages/index.tsx @@ -3,7 +3,10 @@ import clsx from "clsx"; import Link from "@docusaurus/Link"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; -import HomepageFeatures from "@site/src/components/HomepageFeatures"; +import { + FeatureItem, + HomepageFeatures, +} from "@site/src/components/HomepageFeatures"; import styles from "./index.module.css"; @@ -17,9 +20,9 @@ function HomepageHeader() {
- Docusaurus Tutorial - 5min ⏱️ + Get Started
@@ -27,6 +30,170 @@ function HomepageHeader() { ); } +function PackitDescription() { + const about: FeatureItem[] = [ + { + title: "What is Packit?", + description: ( + <> + An open source project aiming to ease the integration of your project + with Fedora Linux,{" "} + CentOS Stream{" "} + and other distributions. + + ), + }, + { + title: "Who should use Packit?", + description: ( + <> + Upstream projects that want to build RPM packages out of pull + requests, commits or releases, test their code changes and bring + upstream releases to Fedora Linux. + + ), + }, + ]; + + function Feature({ title, description }: FeatureItem) { + return ( +
+
+

{title}

+

{description}

+
+
+ ); + } + + return ( +
+
+
+ {about.map((props, idx) => ( + + ))} +
+
+
+ ); +} + +function Why() { + return ( +
+
+
+

Why start using Packit?

+ +
    +
  1. + Easy to configure — Feel free to jump into{" "} + our guide or check directly the{" "} + configuration documentation{" "} + and{" "} + + configuration examples + + . +
    2. +
  2. + Stable users —{" "} + + systemd + + ,{" "} + + cockpit + + ,{" "} + + avocado + + ,{" "} + + ansible-lint + {" "} + and many other projects. If you are interested, have a look at our{" "} + dashboard for + the usage of Packit. +
    3. +
  3. + We are an active project — We are open to any ideas on how + to improve Packit and try to bring new features and fix bugs as + soon as possible, so you can open an{" "} + + upstream issue + {" "} + any time. +
    4. +
  4. + We are here to help — In case of any questions, feel free + to contact{" "} + us! +
    5. +
+
+
+
+ ); +} + +function Parts() { + return ( +
+
+

What does Packit consist of?

+
    +
  • + A CLI tool which you can install locally + and start using right away. +
    • +
  • + A service whcih provides you feedback + on how is your project integrated with{" "} + Fedora Linux,{" "} + + CentOS Stream + {" "} + and other distributions. +
    • +
+
+
+ ); +} + +function Contacts() { + return ( +
+
+

Contact

+
    +
  • + + #packit:fedora.im + {" "} + (Element / Matrix) +
    • +
  • + #packit:libera.chat (IRC) +
    • +
  • + hello@packit.dev +
    • +
  • + + @packit@fosstodon.org + {" "} + (Mastodon) +
    • +
+
+
+ ); +} + export default function Home(): JSX.Element { const { siteConfig } = useDocusaurusContext(); return ( @@ -35,8 +202,12 @@ export default function Home(): JSX.Element { description="Description will go into a meta tag in " > +
+ + +
);