Skip to content

Commit f8a3b3d

Browse files
luzrainluzrain
committed
Main page redesign
1 parent 21b0132 commit f8a3b3d

File tree

20 files changed

+159
-41
lines changed

20 files changed

+159
-41
lines changed

‎Makefile‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ upgrade: node_modules ## Yarn upgrade
2121
build: node_modules ## Yarn build
2222
@docker run -it --rm --user=${USER_ID}:${GROUP_ID} -v ./:/app/ -w /app/ node:23 bash -c "yarn build"
2323

24+
.PHONY: bash
25+
bash: node_modules ## Go to bash console
26+
@docker run -it --rm --user=${USER_ID}:${GROUP_ID} -v ./:/app/ -w /app/ node:23 bash
27+
2428
.PHONY: clean
2529
clean: ## Remove files
2630
@rm -rf node_modules

‎docusaurus.config.js‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {themes as prismThemes} from 'prism-react-renderer';
88

99
/** @type {import('@docusaurus/types').Config} */
1010
const config = {
11-
title: 'PHPStreamServer: Asynchronous application server for PHP',
11+
title: 'PHPStreamServer: Application server and process manager for modern PHP applications',
1212
tagline: 'PHP Application Server',
1313
favicon: 'img/phpss-icon.png',
1414

@@ -78,8 +78,9 @@ const config = {
7878
{
7979
type: 'docSidebar',
8080
sidebarId: 'docs',
81-
position: 'left',
8281
label: 'Docs',
82+
position: 'right',
83+
activeClassName: '',
8384
},
8485
{
8586
href: 'https://github.com/phpstreamserver/phpstreamserver',
@@ -138,15 +139,6 @@ const config = {
138139
},
139140
],
140141
},
141-
{
142-
title: 'Community',
143-
items: [
144-
{
145-
label: 'GitHub',
146-
href: 'https://github.com/phpstreamserver/phpstreamserver',
147-
},
148-
],
149-
},
150142
],
151143
},
152144
prism: {

‎src/components/LandingPage/index.js‎

Lines changed: 79 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,44 @@ import Layout from '@theme/Layout/Provider';
44
import Footer from '@theme/Footer';
55
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
66
import LogoImg from '@site/static/img/phpss-banner.svg';
7-
import GithubImg from '@site/static/img/GitHub.svg';
7+
import GithubImg from '@site/static/img/github.svg';
8+
import CodeBlock from '@theme/CodeBlock';
9+
import Navbar from '@theme/Navbar';
10+
11+
import Icon1 from '@site/static/icons/icon1.svg';
12+
import Icon2 from '@site/static/icons/icon2.svg';
13+
import Icon3 from '@site/static/icons/icon3.svg';
14+
import Icon4 from '@site/static/icons/icon4.svg';
15+
import Icon5 from '@site/static/icons/icon5.svg';
16+
import Icon6 from '@site/static/icons/icon6.svg';
17+
import Icon7 from '@site/static/icons/icon7.svg';
18+
import Icon8 from '@site/static/icons/icon8.svg';
19+
import Icon9 from '@site/static/icons/icon9.svg';
20+
import Icon10 from '@site/static/icons/icon10.svg';
821

922
const features = [
10-
{ icon: "🐘", title: "Runs on PHP", description: "No additional software is required—PHPStreamServer runs entirely on PHP. Just install via Composer and get started!" },
11-
{ icon: "⚡", title: "Always-in-memory", description: "Keeps applications loaded in memory for enhanced performance and faster response times." },
12-
{ icon: "🌐", title: "Asynchronous HTTP Server", description: "Built-in HTTP server with support for HTTP/2, HTTPS, GZIP, static file serving, and middleware." },
13-
{ icon: "⚙️", title: "Advanced Worker Management", description: "Includes worker reload strategies based on TTL, memory usage, or exceptions." },
14-
{ icon: "🕒", title: "Flexible Scheduler", description: "Schedule tasks like Cron jobs with customizable intervals." },
15-
{ icon: "📦", title: "Support for External Programs", description: "Manage non-PHP applications alongside PHP workers seamlessly." },
16-
{ icon: "📝", title: "Powerful Logging System", description: "Log to files, Stdout/Stderr, Syslog, or Graylog with advanced log routing." },
17-
{ icon: "📊", title: "Prometheus Metrics Support", description: "Exposes a metrics endpoint for monitoring server performance and tracking custom application metrics." },
18-
{ icon: "📂", title: "File Monitoring for Development", description: "Automatically reloads workers when file changes are detected, perfect for development experience." },
19-
{ icon: "🔌", title: "Plugin System", description: "Extend functionality with built-in plugins or create custom plugins to fit your needs." },
23+
{ icon: Icon1, iconColor: 'hsl(283 89% 26%)', title: "Runs on PHP", description: "No additional software is required—PHPStreamServer runs entirely on PHP. Just install via Composer and get started!" },
24+
{ icon: Icon2, iconColor: 'hsl(51 95% 53%)', title: "Always-in-memory", description: "Keeps applications loaded in memory for enhanced performance and faster response times." },
25+
{ icon: Icon3, iconColor: 'hsl(217 91% 60%)', title: "Asynchronous HTTP Server", description: "Built-in HTTP server with support for HTTP/2, HTTPS, GZIP, static file serving, and middleware." },
26+
{ icon: Icon4, iconColor: 'hsl(217 91% 60%)', title: "Advanced Worker Management", description: "Includes worker reload strategies based on TTL, memory usage, or exceptions." },
27+
{ icon: Icon5, iconColor: 'hsl(215.4 16.3% 46.9%)', title: "Flexible Scheduler", description: "Schedule tasks like Cron jobs with customizable intervals." },
28+
{ icon: Icon6, iconColor: 'hsl(25 95% 53%)', title: "Support for External Programs", description: "Manage non-PHP applications alongside PHP workers seamlessly." },
29+
{ icon: Icon7, iconColor: 'hsl(51 95% 53%)', title: "Powerful Logging System", description: "Log to files, Stdout/Stderr, Syslog, or Graylog with advanced log routing." },
30+
{ icon: Icon8, iconColor: 'hsl(217 91% 60%)', title: "Prometheus Metrics Support", description: "Exposes a metrics endpoint for monitoring server performance and tracking custom application metrics." },
31+
{ icon: Icon9, iconColor: 'hsl(51 95% 53%)', title: "File Monitoring for Development", description: "Automatically reloads workers when file changes are detected, perfect for development experience." },
32+
{ icon: Icon10, iconColor: 'hsl(215.4 16.3% 46.9%)', title: "Plugin System", description: "Extend functionality with built-in plugins or create custom plugins to fit your needs." },
2033
];
2134

2235
const Index = () => {
2336
const {siteConfig} = useDocusaurusContext();
2437
return (
25-
<Layout title={`${siteConfig.title}`} description="High-performance PHP application server and process manager written in PHP">
38+
<Layout title={`${siteConfig.title}`} description="Application server and process manager for modern PHP applications.">
39+
<Navbar />
2640
<header className={styles.heroBanner}>
2741
<div className="container">
2842
<LogoImg alt="PHPStreamServer" className="w-auto max-w-full h-[2.5em] lg:h-[3.5em] lg:w-auto mb-5 text-black dark:text-gray-200"/>
2943
<h1>
30-
High-performance PHP application server and process manager written in PHP
44+
Application server and process manager for modern PHP applications.
3145
</h1>
3246
<div className="text-base dark:text-gray-200">
3347
PHPStreamServer is a high-performance, event-loop-based application server and supervisor for PHP, written in PHP.<br/>
@@ -40,7 +54,7 @@ const Index = () => {
4054
</Link>
4155
<Link className={styles.button} href="https://github.com/phpstreamserver/phpstreamserver">
4256
<div className={styles.githubButtonGroup}>
43-
<GithubImg alt="" fill="currentColor" className="w-[1.25em] h-[1.25em] me-1"/> <span>GitHub</span>
57+
<GithubImg alt="" className="w-[1.25em] h-[1.25em] me-1"/> <span>GitHub</span>
4458
</div>
4559
</Link>
4660
<img className="hidden md:block h-[1.5em]" src="https://img.shields.io/github/stars/phpstreamserver/phpstreamserver" alt="Stars"/>
@@ -54,12 +68,12 @@ const Index = () => {
5468
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
5569
{features.map((feature, index) => (
5670
<div key={index} className={styles.featureCard}>
57-
<div className="flex items-center">
58-
<div className={styles.featureIcon}>{feature.icon}</div>
71+
<div className="flex items-top">
72+
<div className={styles.featureIcon}><feature.icon style={{ color: feature.iconColor }} /></div>
5973
</div>
60-
<div className="flex items-center">
74+
<div className="flex items-top">
6175
<div>
62-
<div className="text-lg font-semibold mb-1 w-full">{feature.title}</div>
76+
<div className="text-xl font-semibold mb-1 w-full">{feature.title}</div>
6377
<div className="text-sm">{feature.description}</div>
6478
</div>
6579
</div>
@@ -69,6 +83,53 @@ const Index = () => {
6983
</div>
7084
</div>
7185

86+
<div className="px-3 py-8 lg:px-4">
87+
<div className="container">
88+
<h2 className={styles.subtitle}>Quick start</h2>
89+
<div className="flex flex-col lg:flex-row gap-8 lg:gap-14">
90+
<div className="flex flex-col flex-1 gap-4">
91+
<div className="text-lg">Get up and running with PHPStreamServer in just a few lines of code. Here's a simple HTTP server example to get you started.</div>
92+
<div className="font-semibold">Install via composer</div>
93+
<CodeBlock language="bash">{`$ composer require phpstreamserver/http-server`}</CodeBlock>
94+
<div className="font-semibold">Run your server</div>
95+
<CodeBlock language="bash">{`$ php server.php start`}</CodeBlock>
96+
<Link className={styles.button} to="/docs/general/">View Full Documentation</Link>
97+
</div>
98+
<div className="flex-1">
99+
<CodeBlock language="php" title="server.php">
100+
{`use Amp\\Http\\Server\\HttpErrorException;
101+
use Amp\\Http\\Server\\Request;
102+
use Amp\\Http\\Server\\Response;
103+
use PHPStreamServer\\Core\\Server;
104+
use PHPStreamServer\\Plugin\\HttpServer\\HttpServerPlugin;
105+
use PHPStreamServer\\Plugin\\HttpServer\\Worker\\HttpServerProcess;
106+
107+
$server = new Server();
108+
109+
$server->addPlugin(
110+
new HttpServerPlugin(),
111+
);
112+
113+
$server->addWorker(
114+
new HttpServerProcess(
115+
listen: '0.0.0.0:8080',
116+
onRequest: function (Request $request): Response {
117+
return match ($request->getUri()->getPath()) {
118+
'/' => new Response(body: 'Hello world'),
119+
'/ping' => new Response(body: 'pong'),
120+
default => throw new HttpErrorException(404),
121+
};
122+
}
123+
),
124+
);
125+
126+
exit($server->run());`}
127+
</CodeBlock>
128+
</div>
129+
</div>
130+
</div>
131+
</div>
132+
72133
<Footer></Footer>
73134
</Layout>
74135
);

‎src/components/LandingPage/index.module.css‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,7 @@
5959
}
6060

6161
.featureIcon {
62-
font-size: 1.5em;
63-
width: 2.8em;
64-
height: 2.8em;
65-
display: flex;
66-
align-items: center;
67-
justify-content: center;
68-
border-radius: 50%;
69-
background-color: color-mix(in srgb, var(--ifm-hero-background-color), transparent 92%);
62+
padding-top: 0.1em;
7063
}
7164

7265
.buttons {
@@ -91,7 +84,8 @@
9184
md:px-6
9285
lg:px-7
9386
lg:py-2.5
94-
rounded-full
87+
rounded-(--ifm-code-border-radius)
88+
max-w-max
9589
;
9690
}
9791

‎src/css/custom.css‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@
4141
--ifm-color-primary-lightest: #84b4fa;
4242
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
4343
--ifm-hero-background-color: #0078ff;
44-
--header-gradient: #d5d5d5
44+
--header-gradient: #d5d5d5;
45+
4546
}
4647

4748
.markdown {
@@ -71,5 +72,16 @@ article h1 a, article h2 a, article h3 a, article h4 a, article h1 a:hover, arti
7172
}
7273

7374
.footer {
74-
@apply bg-stone-100 dark:bg-stone-800;
75+
@apply bg-(--ifm-background-color) border-t-1 border-[var(--ifm-toc-border-color)];
76+
}
77+
78+
.footer .footer__links .footer__col{
79+
margin-bottom: 1.5rem;
80+
}
81+
82+
.footer .footer__links .footer__col:last-child {
83+
margin-bottom: 0;
84+
}
85+
.footer .footer__links .footer__link-item {
86+
text-decoration-line: none;
7587
}

‎src/theme/Footer/Layout/index.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
import LogoImg from '@site/static/img/phpss-banner.svg';
3+
import GithubImg from '@site/static/img/github.svg';
4+
import TwitterImg from '@site/static/img/twitter.svg';
5+
import EmailImg from '@site/static/img/email.svg';
6+
import Link from "@docusaurus/Link";
7+
8+
export default function LayoutWrapper(props) {
9+
const {copyright, links, logo, style} = props;
10+
11+
return (
12+
<footer className="footer">
13+
<div className="container container-fluid">
14+
<div className="flex gap-8 lg:gap-20 flex-col-reverse lg:flex-row">
15+
<div className="max-w-full lg:max-w-xs text-sm">
16+
<div className="mb-2">
17+
<LogoImg alt="PHPStreamServer" className="w-auto max-w-full"/>
18+
</div>
19+
<div className="mb-3">
20+
Application server and process manager for modern PHP applications.
21+
</div>
22+
<div className="flex gap-3">
23+
<Link className="footer__link-item" href="https://github.com/phpstreamserver/phpstreamserver">
24+
<GithubImg alt="GitHub" className="w-[1.2rem] h-[1.2rem]"/>
25+
</Link>
26+
<Link className="footer__link-item" href="#">
27+
<TwitterImg alt="Twitter" className="w-[1.2rem] h-[1.2rem]"/>
28+
</Link>
29+
<Link className="footer__link-item" href="mailto:[email protected]">
30+
<EmailImg alt="Email" className="w-[1.2rem] h-[1.2rem]"/>
31+
</Link>
32+
</div>
33+
</div>
34+
<div className="flex-1">
35+
{links}
36+
</div>
37+
</div>
38+
</div>
39+
</footer>
40+
);
41+
}

‎static/icons/icon1.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎static/icons/icon10.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎static/icons/icon2.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎static/icons/icon3.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)