From 3659c0d5744473ae479154cdabea91a18d1dc7b6 Mon Sep 17 00:00:00 2001 From: Anton Date: Sat, 23 Mar 2024 02:01:22 +0800 Subject: [PATCH] Main mage --- src/components/HomepageFeatures/index.js | 110 +++++++++++------- .../HomepageFeatures/styles.module.css | 11 +- src/pages/index.js | 6 +- src/pages/index.module.css | 8 +- src/pages/markdown-page.md | 7 -- 5 files changed, 90 insertions(+), 52 deletions(-) delete mode 100644 src/pages/markdown-page.md diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js index ae41f0c..c2d9a10 100644 --- a/src/components/HomepageFeatures/index.js +++ b/src/components/HomepageFeatures/index.js @@ -3,53 +3,83 @@ import Heading from '@theme/Heading'; import styles from './styles.module.css'; const FeatureList = [ - { - title: 'PSR-7 HTTP server', - description: ( - <> - PHPStreamServer has a built-in PSR-7 web server. You can easily integrate it with any PSR-7 compatible framework. - - ), - }, - { - title: 'Supervisor', - description: ( - <> - Run your own long-running processes. PHPStreamServer will keep them alive. - - ), - }, - { - title: 'Workers lifecycle management', - description: ( - <> - Reload workers based on predefined conditions such as TTL, maximum memory usage, and more. - - ), - }, + { + icon: ( + + + + ), + title: 'PSR-7 HTTP server', + description: ( + <> + PHPStreamServer has a built-in PSR-7 web server. You can easily integrate it with any PSR-7 compatible + framework. + + ), + }, + { + icon: ( + + + + + ), + title: 'Supervisor', + description: ( + <> + Run your own long-running processes. PHPStreamServer will keep them alive. + + ), + }, + { + icon: ( + + + + ), + title: 'Workers lifecycle management', + description: ( + <> + Reload workers based on predefined conditions such as TTL, maximum memory usage, and more. + + ), + }, ]; -function Feature({title, description}) { - return ( -
-
- {title} -

{description}

+function Feature({icon, title, description}) { + return ( +
+
+ + + {icon} + + + {title} + + +

{description}

); } export default function HomepageFeatures() { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
+ return ( +
+
+
+ {FeatureList.map((props, idx) => ( + + ))} +
+
+
); } diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css index b248eb2..f1e722c 100644 --- a/src/components/HomepageFeatures/styles.module.css +++ b/src/components/HomepageFeatures/styles.module.css @@ -5,7 +5,14 @@ width: 100%; } +.featureTitle { + display: flex; + align-items: center; + gap: 0.33em; +} + .featureSvg { - height: 200px; - width: 200px; + display: inline-block; + height: 1.1em; + width: 1.1em; } diff --git a/src/pages/index.js b/src/pages/index.js index 4bdf18b..558af83 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,7 +1,8 @@ import clsx from 'clsx'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import Layout from '@theme/Layout'; +import Layout from '@theme/Layout/Provider'; +import Footer from '@theme/Footer'; import HomepageFeatures from '@site/src/components/HomepageFeatures'; import Heading from '@theme/Heading'; @@ -37,9 +38,10 @@ export default function Home() { title={`${siteConfig.title}`} description="PHPStreamServer is a high-performance PHP application server and process manager written in PHP."> -
+
+ ); } diff --git a/src/pages/index.module.css b/src/pages/index.module.css index bc734c8..ac3fea4 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -4,7 +4,7 @@ */ .heroBanner { - padding: 4rem 0; + padding: 5rem 0; text-align: left; position: relative; overflow: hidden; @@ -33,3 +33,9 @@ width: 35%; height: auto; } + +.main { + flex: 1; + display: flex; + align-items: center; +} diff --git a/src/pages/markdown-page.md b/src/pages/markdown-page.md deleted file mode 100644 index 9756c5b..0000000 --- a/src/pages/markdown-page.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Markdown page example ---- - -# Markdown page example - -You don't need React to write simple standalone pages.