Skip to content

Commit

Permalink
feat: make front page
Browse files Browse the repository at this point in the history 
Signed-off-by: Matej Focko <mfocko@redhat.com>
  • Loading branch information
@mfocko
mfocko committed Jul 15, 2023
1 parent 669e892 commit 20fb51c
Show file tree
Hide file tree
Showing 3 changed files with 201 additions and 25 deletions.
44 changes: 27 additions & 17 deletions packit.dev/src/components/HomepageFeatures/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<React.ComponentProps<"svg">>;
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{" "}
<Link to="https://copr.fedorainfracloud.org">Copr build system</Link> 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.{" "}
<Link to="/docs/configuration/upstream/copr_build">Learn more.</Link>
</>
),
},
{
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&apos;ll do the chores. Go
ahead and move your docs into the <code>docs</code> directory.
Packit runs your tests in{" "}
<Link to="https://docs.testing-farm.io/general/0.1/index.html">
Testing Farm
</Link>{" "}
and can test either the RPM package built in Copr or trigger tests
directly on different platforms.{" "}
<Link to="/docs/configuration/upstream/tests">Learn more.</Link>
</>
),
},
{
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{" "}
<Link to="https://src.fedoraproject.org/">Fedora dist-git</Link>,
automatically submit builds in{" "}
<Link to="https://koji.fedoraproject.org/koji/">Koji</Link> and create{" "}
<Link to="https://bodhi.fedoraproject.org/">Bodhi</Link> updates!{" "}
<Link to="/docs/fedora-releases-guide">Learn more.</Link>
</>
),
},
];

function Feature({ title, Svg, description }: FeatureItem) {
function Feature({ title, description }: FeatureItem) {
return (
<div className={clsx("col col--4")}>
<div className="text--center">
<Svg className={styles.featureSvg} role="img" />
</div>
<div className="text--center padding-horiz--md">
<h3>{title}</h3>
<p>{description}</p>
Expand All @@ -59,6 +66,7 @@ export default function HomepageFeatures(): JSX.Element {
return (
<section className={styles.features}>
<div className="container">
<h1>What key features does Packit offer?</h1>
<div className="row">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
Expand All @@ -68,3 +76,5 @@ export default function HomepageFeatures(): JSX.Element {
</section>
);
}

export { FeatureItem, Feature, HomepageFeatures };
5 changes: 0 additions & 5 deletions packit.dev/src/components/HomepageFeatures/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,3 @@
padding: 2rem 0;
width: 100%;
}

.featureSvg {
height: 200px;
width: 200px;
}
177 changes: 174 additions & 3 deletions packit.dev/src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -17,16 +20,180 @@ function HomepageHeader() {
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
to="/docs/intro"
to="/docs/guide"
>
Docusaurus Tutorial - 5min ⏱️
Get Started
</Link>
</div>
</div>
</header>
);
}

function PackitDescription() {
const about: FeatureItem[] = [
{
title: "What is Packit?",
description: (
<>
An open source project aiming to ease the integration of your project
with <Link to="https://getfedora.org/">Fedora Linux</Link>,{" "}
<Link to="https://www.centos.org/centos-stream/">CentOS Stream</Link>{" "}
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 (
<div className={clsx("col")}>
<div className="text--center padding-horiz--md">
<h3>{title}</h3>
<p>{description}</p>
</div>
</div>
);
}

return (
<section className={styles.features}>
<div className="container">
<div className="row">
{about.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
</section>
);
}

function Why() {
return (
<section className={styles.features}>
<div className="container">
<div className="row">
<h3>Why start using Packit?</h3>

<ol>
<li>
<i>Easy to configure</i> — Feel free to jump into{" "}
<Link to="/docs/guide">our guide</Link> or check directly the{" "}
<Link to="/docs/configuration">configuration documentation</Link>{" "}
and{" "}
<Link to="/docs/configuration/examples">
configuration examples
</Link>
.
</li>
<li>
<i>Stable users</i> —{" "}
<Link to="https://github.com/systemd/systemd/blob/45cab6e3c1d542d66c293a3a722c08412386f335/.packit.yml">
systemd
</Link>
,{" "}
<Link to="https://github.com/cockpit-project/cockpit/blob/b0398fafe302b7c453db0e10a49f9d70e37727e2/packit.yaml">
cockpit
</Link>
,{" "}
<Link to="https://github.com/avocado-framework/avocado/blob/73fd7259d6e87aad218ed87e5ccd4212c4a5042c/.packit.yml">
avocado
</Link>
,{" "}
<Link to="https://github.com/ansible-community/ansible-lint/blob/0903650292b6dd057daec27aa6d9f2523cc9afdc/.packit.yaml">
ansible-lint
</Link>{" "}
and many other projects. If you are interested, have a look at our{" "}
<Link to="https://dashboard.packit.dev/usage">dashboard</Link> for
the usage of Packit.
</li>
<li>
<i>We are an active project</i> — 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{" "}
<Link to="https://github.com/packit/packit-service/issues/new">
upstream issue
</Link>{" "}
any time.
</li>
<li>
<i>We are here to help</i> — In case of any questions, feel free
to contact{" "}
<Link to="https://github.com/orgs/packit/people">us</Link>!
</li>
</ol>
</div>
</div>
</section>
);
}

function Parts() {
return (
<section>
<div className="container">
<h3>What does Packit consist of?</h3>
<ul>
<li>
A <Link to="/docs/cli">CLI tool</Link> which you can install locally
and start using right away.
</li>
<li>
A <Link to="/docs/guide">service</Link> whcih provides you feedback
on how is your project integrated with{" "}
<Link to="https://getfedora.org/">Fedora Linux</Link>,{" "}
<Link to="https://www.centos.org/centos-stream/">
CentOS Stream
</Link>{" "}
and other distributions.
</li>
</ul>
</div>
</section>
);
}

function Contacts() {
return (
<section className={styles.features}>
<div className="container">
<h2 id="contact">Contact</h2>
<ul>
<li>
<Link to="https://chat.fedoraproject.org/#/room/#packit:fedora.im">
#packit:fedora.im
</Link>{" "}
(Element / Matrix)
</li>
<li>
<Link to="https://libera.chat/">#packit:libera.chat</Link> (IRC)
</li>
<li>
<Link to="mailto:hello@packit.dev">hello@packit.dev</Link>
</li>
<li>
<Link to="https://fosstodon.org/@packit" rel="me">
@packit@fosstodon.org
</Link>{" "}
(Mastodon)
</li>
</ul>
</div>
</section>
);
}

export default function Home(): JSX.Element {
const { siteConfig } = useDocusaurusContext();
return (
Expand All @@ -35,8 +202,12 @@ export default function Home(): JSX.Element {
description="Description will go into a meta tag in <head />"
>
<HomepageHeader />
<PackitDescription />
<main>
<HomepageFeatures />
<Why />
<Parts />
<Contacts />
</main>
</Layout>
);
Expand Down

0 comments on commit 20fb51c

Please sign in to comment.