github.com/kubri/kubri@v0.5.1-0.20240317001612-bda2aaef967e/website/src/pages/index.tsx (about)

     1  import clsx from 'clsx'
     2  import Link from '@docusaurus/Link'
     3  import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
     4  import Layout from '@theme/Layout'
     5  import Heading from '@theme/Heading'
     6  import { JSX } from 'react'
     7  
     8  import styles from './index.module.scss'
     9  import Logo from '../../static/img/logo.svg'
    10  
    11  const FeatureList = [
    12    {
    13      title: 'Easy to Use',
    14      description: (
    15        <>
    16          Write a simple YAML file to define your release process. Kubri will take care of the rest.
    17        </>
    18      ),
    19    },
    20    {
    21      title: 'Works Everywhere',
    22      description: <>Kubri has zero dependencies and works on Linux, Windows, and MacOS.</>,
    23    },
    24    {
    25      title: 'Free and Open Source',
    26      description: (
    27        <>
    28          Kubri is free to use and open source. It is licensed under the{' '}
    29          <Link to="/license">MIT License</Link>.
    30        </>
    31      ),
    32    },
    33  ]
    34  
    35  const Integrations = [
    36    {
    37      title: 'APT',
    38      description: 'Debian, Ubuntu etc.',
    39    },
    40    {
    41      title: 'YUM / DNF / Zypper',
    42      description: 'RHEL, Fedora, CentOS, OpenSUSE etc.',
    43    },
    44    {
    45      title: 'APK',
    46      description: 'Alpine Linux',
    47    },
    48    {
    49      title: 'App Installer',
    50      description: 'Windows',
    51    },
    52    {
    53      title: 'Sparkle / WinSparkle',
    54      description: 'MacOS, Windows',
    55    },
    56  ]
    57  
    58  export default function Home(): JSX.Element {
    59    const { siteConfig } = useDocusaurusContext()
    60    return (
    61      <Layout
    62        title="Automate Software Distribution"
    63        description="Sign and release software for common package managers and software update frameworks."
    64      >
    65        <header className={clsx('hero hero--dark', styles.heroBanner)}>
    66          <div className="container text--center">
    67            <Logo width={200} />
    68            <Heading as="h1" className="hero__title margin-vert--md">
    69              {siteConfig.title}
    70            </Heading>
    71            <p className="hero__subtitle">{siteConfig.tagline}</p>
    72            <div className={styles.centered}>
    73              <Link className="button button--primary button--lg" to="/docs/intro">
    74                Get Started
    75              </Link>
    76            </div>
    77          </div>
    78        </header>
    79  
    80        <main>
    81          <section className={styles.section}>
    82            <div className="container padding-vert--xl">
    83              <div className="row">
    84                <div className={clsx('col col--6 margin-vert--md', styles.centered)}>
    85                  <span className={styles.lead}>
    86                    Kubri takes the hassle out of releasing your software for multiple different
    87                    platforms. It takes your releases from GitHub, GitLab or cloud storage systems and
    88                    automatically creates repositories, releases, and artifacts for the platforms you
    89                    care about.
    90                  </span>
    91                </div>
    92                <div className="col col--6">
    93                  <div className="card">
    94                    <div className="card__header">
    95                      <Heading as="h3">Supported Platforms</Heading>
    96                    </div>
    97                    <div className="card__body">
    98                      <ul>
    99                        {Integrations.map((integration, idx) => (
   100                          <li key={idx}>
   101                            <strong>{integration.title}</strong> ({integration.description})
   102                          </li>
   103                        ))}
   104                      </ul>
   105                    </div>
   106                  </div>
   107                </div>
   108              </div>
   109            </div>
   110          </section>
   111  
   112          <section className={styles.section}>
   113            <div className="container padding-vert--xl text--center">
   114              <Heading as="h2" className="margin-bottom--lg">
   115                How does it work?
   116              </Heading>
   117              <div>
   118                <p>
   119                  Kubri simplifies the release process by allowing you to define your entire release
   120                  pipeline in a single YAML file. Whether your artifacts are stored on GitHub, GitLab,
   121                  or other platforms, Kubri automatically handles the download, repository generation,
   122                  package/metadata signing, and upload to your specified targets, allowing you to
   123                  effortlessly distribute your software to a wide array of platforms.
   124                </p>
   125                <p>
   126                  <Link to="/docs/intro#usage">Click here to see an example configuration.</Link>
   127                </p>
   128              </div>
   129            </div>
   130          </section>
   131  
   132          <section className={styles.section}>
   133            <div className="container padding-vert--xl text--center">
   134              <Heading as="h2" className="margin-bottom--lg">
   135                Why Kubri?
   136              </Heading>
   137              <div className="row">
   138                {FeatureList.map(({ title, description }, idx) => (
   139                  <div className="col" key={idx}>
   140                    <Heading as="h3">{title}</Heading>
   141                    <p>{description}</p>
   142                  </div>
   143                ))}
   144              </div>
   145            </div>
   146          </section>
   147        </main>
   148      </Layout>
   149    )
   150  }