actix/actix-website
1
0
Fork 0
mirror of https://github.com/actix/actix-website synced 2024-11-23 16:31:08 +01:00
Code Issues Releases Wiki Activity

Improve home page (#305)

Browse Source 
* improve landing page

* revert navbar
This commit is contained in:
Ibraheem Ahmed 2023-01-09 04:52:42 -05:00 committed by GitHub
parent 77ef3b62d1
commit 034a6f1890
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 97 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -2,4 +2,5 @@ node_modules/
build/ build/
.docusaurus .docusaurus
.cache-loader .cache-loader
Cargo.lock Cargo.lock
yarn.lock

2
examples/easy-form-handling/src/main.rs
View File

@ -1,8 +1,8 @@
use actix_web::{web, App, HttpResponse, HttpServer, Responder}; use actix_web::{web, App, HttpResponse, HttpServer, Responder};
use serde::Deserialize; use serde::Deserialize;
// <easy-form-handling>
use actix_web::web::{Either, Json, Form}; use actix_web::web::{Either, Json, Form};
// <easy-form-handling>
#[derive(Deserialize)] #[derive(Deserialize)]
struct Register { struct Register {
username: String, username: String,

23
examples/request-routing/src/main.rs
View File

@ -1,24 +1,21 @@
// <request-routing> // <request-routing>
use actix_web::{get, web, App, HttpRequest, HttpServer, Responder}; use actix_web::{get, web, App, HttpServer, Responder};
#[get("/")] #[get("/")]
async fn index(_req: HttpRequest) -> impl Responder { async fn index() -> impl Responder {
"Hello from the index page." "Hello, World!"
} }
async fn hello(path: web::Path<String>) -> impl Responder { #[get("/{name}")]
format!("Hello {}!", &path) async fn hello(name: web::Path<String>) -> impl Responder {
format!("Hello {}!", &name)
} }
#[actix_web::main] #[actix_web::main]
async fn main() -> std::io::Result<()> { async fn main() -> std::io::Result<()> {
HttpServer::new(|| { HttpServer::new(|| App::new().service(index).service(hello))
App::new() .bind(("127.0.0.1", 8080))?
.service(index) .run()
.route("/{name}", web::get().to(hello)) .await
})
.bind(("127.0.0.1", 8080))?
.run()
.await
} }
// </request-routing> // </request-routing>

2
src/css/custom.css
View File

@ -50,4 +50,4 @@ html[data-theme='dark'] {
.navbar__logo { .navbar__logo {
filter: var(--logo-filter); filter: var(--logo-filter);
} }

120
src/pages/index.js
View File

@ -22,7 +22,6 @@ const Home = () => {
<Layout description={siteConfig.tagline}> <Layout description={siteConfig.tagline}>
<Hero /> <Hero />
<main className={styles.main}> <main className={styles.main}>
<MainExample />
<Highlights /> <Highlights />
<Examples /> <Examples />
</main> </main>
@ -97,21 +96,13 @@ const Hero = () => {
); );
}; };
const MainExample = () => (
<div className={styles.main_example}>
<div className={styles.main_example__code}>
<CodeBlock example="main-example" section="main-example" />
</div>
</div>
);
const Highlights = () => { const Highlights = () => {
return ( return (
<> <>
<section id="highlights" className={styles.highlights}> <section id="highlights" className={styles.highlights}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col col--11 col--offset-1"> <div className="col">
<div className="row"> <div className="row">
{highlights.map((highlight, idx) => ( {highlights.map((highlight, idx) => (
<div <div
@ -140,67 +131,74 @@ const Highlights = () => {
const Examples = () => { const Examples = () => {
return ( return (
<div> <div className={styles.examples}>
<div className={styles.example}> <div className={styles.example}>
<div className={styles.featureText}> <div className={styles.exampleContent}>
<h3 className={styles.featureTitle}>Flexible Responders</h3> <div className={styles.featureText}>
<p> <h3 className={styles.featureTitle}>Hello World!</h3>
Handler functions in actix can return a wide range of objects that <p>
implement the <code>Responder</code> trait. This makes it a breeze Getting started with actix is easy. An actix app comes with a URL routing system that lets you match on
to return consistent responses from your APIs. URLs and invoke individual handlers.
</p> </p>
</div> </div>
<div className={styles.example__code}> <div className={styles.example__code}>
<CodeBlock <CodeBlock example="request-routing" section="request-routing" />
example="flexible-responders" </div>
section="flexible-responders"
/>
</div> </div>
</div> </div>
<div className={styles.example}> <div className={styles.example}>
<div className={styles.featureText}> <div className={styles.exampleContent}>
<h3 className={styles.featureTitle}>Powerful Extractors</h3> <div className={styles.featureText}>
<p> <h3 className={styles.featureTitle}>Flexible Responders</h3>
Actix comes with a powerful extractor system that extracts data from <p>
the incoming HTTP request and passes it to your view functions. Not Handler functions in actix can return a wide range of objects that
only does this make for a convenient API but it also means that your implement the <code>Responder</code> trait. This makes it a breeze
view functions can be synchronous code and still benefit from to return consistent responses from your APIs.
asynchronous IO handling. </p>
</p> </div>
</div> <div className={styles.example__code}>
<div className={styles.example__code}> <CodeBlock
<CodeBlock example="flexible-responders"
example="powerful-extractors" section="flexible-responders"
section="powerful-extractors" />
/> </div>
</div> </div>
</div> </div>
<div className={styles.example}> <div className={styles.example}>
<div className={styles.featureText}> <div className={styles.exampleContent}>
<h3 className={styles.featureTitle}>Easy Form Handling</h3> <div className={styles.featureText}>
<p> <h3 className={styles.featureTitle}>Powerful Extractors</h3>
Handling multipart/urlencoded form data is easy. Just define a <p>
structure that can be deserialized and actix will handle the rest. Actix comes with a powerful extractor system that extracts data from
</p> the incoming HTTP request and passes it to your view functions. Not
</div> only does this make for a convenient API but it also means that your
<div className={styles.example__code}> view functions can be synchronous code and still benefit from
<CodeBlock asynchronous IO handling.
example="easy-form-handling" </p>
section="easy-form-handling" </div>
/> <div className={styles.example__code}>
<CodeBlock
example="powerful-extractors"
section="powerful-extractors"
/>
</div>
</div> </div>
</div> </div>
<div className={styles.example}> <div className={styles.example}>
<div className={styles.featureText}> <div className={styles.exampleContent}>
<h3 className={styles.featureTitle}>Request Routing</h3> <div className={styles.featureText}>
<p> <h3 className={styles.featureTitle}>Easy Form Handling</h3>
An actix app comes with a URL routing system that lets you match on <p>
URLs and invoke individual handlers. For extra flexibility, scopes Handling multipart/urlencoded form data is easy. Just define a
can be used. structure that can be deserialized and actix will handle the rest.
</p> </p>
</div> </div>
<div className={styles.example__code}> <div className={styles.example__code}>
<CodeBlock example="request-routing" section="request-routing" /> <CodeBlock
example="easy-form-handling"
section="easy-form-handling"
/>
</div>
</div> </div>
</div> </div>
</div> </div>

47
src/pages/styles.module.scss
View File

@ -110,28 +110,8 @@
color: var(--ifm-color-emphasis-600); color: var(--ifm-color-emphasis-600);
} }
.main_example {
display: flex;
justify-content: center;
padding-left: 1rem;
padding-right: 1rem;
flex-wrap: wrap;
padding-top: 2rem;
padding-bottom: 2rem;
}
.main_example__code {
width: 100%;
}
@media (min-width: 1024px) {
.main_example__code {
width: unset;
}
}
// features // features
.example { .exampleContent {
display: flex; display: flex;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
@ -145,30 +125,51 @@
} }
.example__code { .example__code {
flex: 1;
width: 100%; width: 100%;
} }
.featureText { .featureText {
flex: 1;
justify-self: center; justify-self: center;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.example { .exampleContent {
flex-direction: row; flex-direction: row;
padding-top: 7rem; padding-top: 7rem;
padding-bottom: 7rem; padding-bottom: 7rem;
max-width: 1280px;
margin: auto;
} }
.example:nth-child(odd) { .example:nth-child(odd) {
flex-direction: row-reverse;
background-color: var(--examples-odd-background-color); background-color: var(--examples-odd-background-color);
.exampleContent {
flex-direction: row-reverse;
.featureText {
padding-right: 0px;
padding-left: 30px;
}
.example__code {
padding-left: 0px;
padding-right: 30px;
}
}
} }
.featureText { .featureText {
width: 33%; width: 33%;
padding-right: 30px;
} }
.example__code { .example__code {
width: unset; width: unset;
padding-left: 30px;
} }
} }