Rework website home & download pages

2021-03-24 10:42:08 -04:00 · 2021-03-24 10:42:08 -04:00 · 7bae4918d7
commit 7bae4918d7
parent 2fb34d0319
7 changed files with 316 additions and 151 deletions
--- a/website/src/components/Grid.js
+++ b/website/src/components/Grid.js
@ -0,0 +1,25 @@
+import React from 'react';
+
+const Column = ({ children }) =>
+	<div className="col">
+		{children}
+	</div>;
+
+
+const Container = ({ children, className }) =>
+	<div className={`container ${className ?? ""}`}>
+		{children}
+	</div>;
+
+
+const Row = ({ children }) =>
+	<div className="row">
+		{children}
+	</div>;
+
+
+export {
+	Column,
+	Container,
+	Row
+};
--- a/website/src/components/Sponsors.js
+++ b/website/src/components/Sponsors.js
@ -0,0 +1,21 @@
+import React from 'react';
+
+const Sponsors = ({ width }) => {
+	width = width ?? 800;
+	return (
+		<div className="sponsors">
+			<div>
+				<a href="https://opencollective.com/premake#sponsors" target="_blank">
+					<img src={`https://opencollective.com/premake/sponsors.svg?width=${width}&avatarHeight=92&button=false`} />
+				</a>
+			</div>
+			<div>
+				<a href="https://opencollective.com/premake#backers" target="_blank">
+					<img src={`https://opencollective.com/premake/backers.svg?width=${width}&button=false`} />
+				</a>
+			</div>
+		</div>
+	);
+};
+
+export default Sponsors;
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@ -1,4 +1,5 @@
 /* stylelint-disable docusaurus/copyright-header */
+
 /**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
@ -7,19 +8,99 @@

 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2b86cc;
-  --ifm-color-primary-dark: #2779b8;
-  --ifm-color-primary-darker: #2572ad;
-  --ifm-color-primary-darkest: #1e5e8f;
-  --ifm-color-primary-light: #3a92d6;
-  --ifm-color-primary-lighter: #4498d8;
-  --ifm-color-primary-lightest: #63a9de;
-  --ifm-code-font-size: 95%;
+	--ifm-color-primary: #2b86cc;
+	--ifm-color-primary-dark: #2779b8;
+	--ifm-color-primary-darker: #2572ad;
+	--ifm-color-primary-darkest: #1e5e8f;
+	--ifm-color-primary-light: #3a92d6;
+	--ifm-color-primary-lighter: #4498d8;
+	--ifm-color-primary-lightest: #63a9de;
+	--ifm-code-font-size: 95%;
 }

 .docusaurus-highlight-code-line {
-  background-color: rgb(72, 77, 91);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
+	background-color: rgb(72, 77, 91);
+	display: block;
+	margin: 0 calc(-1 * var(--ifm-pre-padding));
+	padding: 0 var(--ifm-pre-padding);
+}
+
+/**
+ * Header styles
+ */
+
+.header-github-link:hover {
+	opacity: 0.6;
+}
+
+.header-github-link:before {
+	content: '';
+	width: 24px;
+	height: 24px;
+	display: flex;
+	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
+}
+
+html[data-theme='dark'] .header-github-link:before {
+	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
+}
+
+
+/**
+ * Home page styles
+ */
+
+.features {
+	display: flex;
+	align-items: center;
+	padding: 2rem 0;
+	width: 100%;
+}
+
+.hero-banner {
+	padding: 4rem 0;
+	text-align: center;
+	position: relative;
+	overflow: hidden;
+  }
+
+@media screen and (max-width: 966px) {
+	.hero-banner {
+		padding: 2rem;
+	}
+}
+
+.features {
+	display: flex;
+	align-items: center;
+	padding: 2rem 0;
+	width: 100%;
+}
+
+.feature-image {
+	height: 200px;
+	width: 200px;
+}
+
+.buttons {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+
+/**
+ * Download page styles
+ */
+
+main.download {
+	padding: 2rem 0;
+}
+
+main.download .card {
+	padding: 0 1rem;
+}
+
+main.download section.sponsors {
+	margin-top: 1rem;
 }
--- a/website/src/css/styles.module.css
+++ b/website/src/css/styles.module.css
@ -1,42 +0,0 @@
-/* stylelint-disable docusaurus/copyright-header */
-
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-@media screen and (max-width: 966px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
-.bigText {
-	font-size: larger;
-	font-weight: bold;
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureImage {
-  height: 200px;
-  width: 200px;
-}
--- a/website/src/pages/download.js
+++ b/website/src/pages/download.js
@ -0,0 +1,106 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+
+import { Column, Container, Row } from '../components/Grid';
+import Sponsors from '../components/Sponsors';
+
+
+const LATEST_VERSION = '5.0.0-alpha15';
+
+
+const DownloadLink = ({ arch }) => {
+	let filename, label;
+	switch (arch) {
+	case 'macos':
+		filename = 'macosx.tar.gz';
+		label = 'MacOS';
+		break;
+	case 'linux':
+		filename = 'linux.tar.gz';
+		label = 'Linux';
+		break;
+	case 'src':
+		filename = 'src.zip';
+		label = 'Source Code';
+		break;
+	case 'windows':
+		filename = 'windows.zip';
+		label = 'Windows';
+		break;
+	}
+	return (
+		<li>
+			<Link to={`https://github.com/premake/premake-core/releases/download/v${LATEST_VERSION}/premake-${LATEST_VERSION}-${filename}`}>
+				<b>{label}</b>
+			</Link>
+		</li>
+	);
+};
+
+
+const Download = () =>
+	<Layout title="Download">
+		<main className="download">
+			<Container className="intro">
+				<Row>
+					<Column>
+						<h1>Download Premake</h1>
+						<p>
+							Premake is a self-contained, single file command line executable which should build and run pretty much everywhere.
+							See <Link to="/docs/using-premake">Using Premake</Link> for usage instructions and help getting started.
+						</p>
+						<p>
+							The latest released version is <b>v{LATEST_VERSION}</b>. <Link to="https://github.com/premake/premake-core/releases">See all releases</Link>.
+						</p>
+					</Column>
+				</Row>
+			</Container>
+			<Container>
+				<Row>
+					<Column>
+						<h3>Pre-Built Binaries</h3>
+						<p>Binaries simply need to be unpacked and placed somewhere on the system search path or any other convenient location.</p>
+						<ul className="download-links">
+							<DownloadLink arch="windows" />
+							<DownloadLink arch="linux" />
+							<DownloadLink arch="macos" />
+						</ul>
+					</Column>
+					<Column>
+						<h3>Build It Yourself</h3>
+						<p>
+							The source code package includes project files for all supported toolsets.
+							See <Link to="https://github.com/premake/premake-core/blob/master/BUILD.txt">BUILD.txt</Link> for
+							build instructions.
+						</p>
+						<ul className="download-links">
+							<DownloadLink arch="src" />
+						</ul>
+						<p>
+							The latest sources (without prebuilt project files) are available
+							on <Link to="https://github.com/premake/premake-core">GitHub</Link>.
+							See <Link to="https://github.com/premake/premake-core/blob/master/BUILD.txt">BUILD.txt</Link> for
+							build instructions.
+						</p>
+					</Column>
+				</Row>
+				<Row>
+					<Column>
+						<section className="sponsors">
+							<h1>Sponsors</h1>
+							<p>
+								Continued Premake development is made possible by our
+								generous <Link to="https://opencollective.com/premake">OpenCollective</Link> sponsors
+								and <Link to="https://github.com/premake/premake-core/graphs/contributors">code
+								contributors</Link>. 🙌
+							</p>
+							<Sponsors />
+						</section>
+					</Column>
+				</Row>
+			</Container>
+		</main>
+	</Layout>;
+
+export default Download;
--- a/website/src/pages/download.md
+++ b/website/src/pages/download.md
@ -1,3 +0,0 @@
-# Download Premake
-
-*Work in progress*
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@ -1,104 +1,81 @@
 import React from 'react';
-import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import styles from '../css/styles.module.css';

-const features = [
-  {
-    title: 'Easy to Use',
-    description: (
-      <div>
-        <p>Describe your software project just once, using Premake's simple and easy to read syntax, and build it everywhere.</p>
-        <p>Generate project files for Visual Studio, GNU Make, Xcode, Code::Blocks, and more across Windows, Mac OS X, and
-        Linux. Use the full featured Lua scripting engine to make build configuration tasks a breeze.</p>
-      </div>
-    ),
-  },
-  {
-    title: 'Version 5.0 (alpha)',
-    description: (
-      <div>
-        <p>The latest iteration of Premake, featuring an improved platform system, support for third-party modules, and loads of new features.</p>
-		    <p className={styles.bigText}>
-          <a href='download/'>Download</a>&nbsp;·&nbsp;<a href='docs/'>Documentation</a>
-        </p>
-      </div>
-    ),
-  },
-  {
-    title: 'Version 4.4 (beta)',
-    description: (
-      <div>
-        <p>The latest in Premake's 4.x stable branch.</p>
-		    <p className={styles.bigText}>
-          <a href='download/'>Download</a>&nbsp;·&nbsp;<a href='https://github.com/premake/premake-4.x/wiki'>Documentation</a>
-        </p>
-      </div>
-    ),
-  },
-];
+import { Container, Column, Row } from '../components/Grid';
+
+
+const Banner = () =>
+	<Container className="banner">
+		<img className="feature-image" src="/img/premake-logo.png" alt="Premake logo" />
+		<h1 className="hero__title">Premake</h1>
+		<p className="hero__subtitle">Powerfully simple build configuration</p>
+		<div className=".buttons">
+			<Link
+				className="button button--outline button--primary button--lg"
+				to="docs/">
+				Get Started
+			</Link>
+			&nbsp;&nbsp;
+			<Link
+				className="button button--outline button--primary button--lg"
+				to="download">
+				Download
+			</Link>
+		</div>
+	</Container>;
+
+
+const Feature = ({ title, children }) =>
+	<Column>
+		<h3>{title}</h3>
+		<div>{children}</div>
+	</Column>;

-function Feature({imageUrl, title, description}) {
-  const imgUrl = useBaseUrl(imageUrl);
-  return (
-    <div className={clsx('col col--4', styles.feature)}>
-      <h3>{title}</h3>
-      <>{description}</>
-    </div>
-  );
-}

 function Home() {
-  const context = useDocusaurusContext();
-  const {siteConfig = {}} = context;
-  return (
-    <Layout
-      title={`${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
-      <header className={clsx('hero shadow--lw', styles.heroBanner)}>
-        <div className="container">
-          <img className={styles.featureImage} src={useBaseUrl('img/premake-logo.png')} alt={'Premake logo'} />
-          <h1 className="hero__title">{siteConfig.title}</h1>
-          <p className="hero__subtitle">{siteConfig.tagline}</p>
-          <div className={styles.buttons}>
-            <Link
-              className={clsx(
-                'button button--outline button--primary button--lg',
-                styles.getStarted,
-              )}
-              to={useBaseUrl('docs/')}>
-              Get Started
-            </Link>
-            &nbsp;&nbsp;
-            <Link
-              className={clsx(
-                'button button--outline button--primary button--lg',
-                styles.getStarted,
-              )}
-              to={useBaseUrl('download/')}>
-              Download
-            </Link>
-          </div>
-        </div>
-      </header>
-      <main>
-        {features && features.length > 0 && (
-          <section className={styles.features}>
-            <div className="container">
-              <div className="row">
-                {features.map((props, idx) => (
-                  <Feature key={idx} {...props} />
-                ))}
-              </div>
-            </div>
-          </section>
-        )}
-      </main>
-    </Layout>
-  );
+	return (
+		<Layout>
+			<header className="hero hero-banner shadow--lw">
+				<Banner />
+			</header>
+			<main className="home">
+				<section className="features">
+					<Container>
+						<Row>
+							<Feature title="Easy to Learn, Easy to Use">
+								<p>
+									Describe your software project just once, using Premake's simple and easy to read
+									syntax, and build it everywhere.
+								</p>
+								<p>
+									&#8594; <Link to="docs/your-first-script">See an example</Link>
+								</p>
+							</Feature>
+							<Feature title="Script Once, Target Many">
+								<p>
+									Generate project files for Visual Studio, GNU Make, Xcode, CodeLite, and more
+									across Windows, Mac OS X, and Linux.
+								</p>
+								<p>
+									&#8594; <Link to="docs/using-premake">See the full list</Link>
+								</p>
+							</Feature>
+							<Feature title="Full Powered">
+								<p>
+									Use the built-in general purpose <Link to="https://www.lua.org">Lua scripting
+									engine</Link> (plus lots of extras) to make build configuration tasks a breeze.
+								</p>
+								<p>
+									&#8594; <Link to="docs">Learn more</Link>
+								</p>
+							</Feature>
+						</Row>
+					</Container>
+				</section>
+			</main>
+		</Layout>
+	);
 }

 export default Home;