mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
Imrpove home page and slogan (#2940)
* Redo home page * formatting * write translations * responsive layout * Update features & tagline * fmt * no safe
This commit is contained in:
Muhammad Hamza
GitHub
parent
da09755c27
commit
374e5f107e
@ -6,7 +6,7 @@ const editUrl = 'https://github.com/yewstack/yew/blob/master/website/'
|
||||
module.exports = {
|
||||
title: 'Yew',
|
||||
tagline:
|
||||
'Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly.',
|
||||
'A framework for creating reliable and efficient web applications.',
|
||||
url: 'https://yew.rs',
|
||||
baseUrl: '/',
|
||||
onBrokenLinks: 'throw',
|
||||
@ -130,6 +130,7 @@ module.exports = {
|
||||
},
|
||||
plugins: [
|
||||
'content-pages',
|
||||
'docusaurus-plugin-sass',
|
||||
[
|
||||
'@docusaurus/theme-classic',
|
||||
{
|
||||
|
||||
@ -275,5 +275,9 @@
|
||||
"theme.admonition.caution": {
|
||||
"message": "caution",
|
||||
"description": "The default label used for the Caution admonition (:::caution)"
|
||||
},
|
||||
"theme.tags.tagsPageTitle": {
|
||||
"message": "タグ",
|
||||
"description": "The title of the tag list page"
|
||||
}
|
||||
}
|
||||
|
||||
@ -275,5 +275,9 @@
|
||||
"theme.admonition.caution": {
|
||||
"message": "警告",
|
||||
"description": "The default label used for the Caution admonition (:::caution)"
|
||||
},
|
||||
"theme.tags.tagsPageTitle": {
|
||||
"message": "标签",
|
||||
"description": "The title of the tag list page"
|
||||
}
|
||||
}
|
||||
|
||||
@ -275,5 +275,9 @@
|
||||
"theme.admonition.caution": {
|
||||
"message": "警告",
|
||||
"description": "The default label used for the Caution admonition (:::caution)"
|
||||
},
|
||||
"theme.tags.tagsPageTitle": {
|
||||
"message": "標籤",
|
||||
"description": "The title of the tag list page"
|
||||
}
|
||||
}
|
||||
|
||||
2824
website/package-lock.json
generated
2824
website/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -17,19 +17,21 @@
|
||||
"fmt:write": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "^2.0.0",
|
||||
"@docusaurus/plugin-client-redirects": "^2.1.0",
|
||||
"@docusaurus/plugin-content-docs": "^2.0.0",
|
||||
"@docusaurus/plugin-content-pages": "^2.0.0",
|
||||
"@docusaurus/plugin-google-analytics": "^2.0.0",
|
||||
"@docusaurus/core": "~2.1.0",
|
||||
"@docusaurus/plugin-client-redirects": "~2.1.0",
|
||||
"@docusaurus/plugin-content-docs": "~2.1.0",
|
||||
"@docusaurus/plugin-content-pages": "~2.1.0",
|
||||
"@docusaurus/plugin-google-analytics": "~2.1.0",
|
||||
"@docusaurus/theme-classic": "^2.1.0",
|
||||
"@easyops-cn/docusaurus-search-local": "^0.32.0",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@svgr/webpack": "^6.2.1",
|
||||
"clsx": "^1.1.1",
|
||||
"docusaurus-plugin-sass": "^0.2.2",
|
||||
"file-loader": "^6.2.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"sass": "^1.55.0",
|
||||
"url-loader": "^4.1.1"
|
||||
},
|
||||
"browserslist": {
|
||||
|
||||
@ -1,82 +0,0 @@
|
||||
# What is Yew?
|
||||
|
||||
**Yew** is a modern [Rust](https://www.rust-lang.org/) framework for creating multi-threaded
|
||||
front-end web apps using [WebAssembly](https://webassembly.org/).
|
||||
|
||||
- It features a **component-based** framework which makes it easy to create interactive UIs.
|
||||
Developers who have experience with frameworks like [React](https://reactjs.org/) and
|
||||
[Elm](https://elm-lang.org/) should feel quite at home when using Yew.
|
||||
- It achieves **great performance** by minimizing DOM API calls and by helping developers to easily
|
||||
offload processing to background threads using web workers.
|
||||
- It supports **JavaScript interoperability**, allowing developers to leverage NPM packages and
|
||||
integrate with existing JavaScript applications.
|
||||
|
||||
## Join Us 😊
|
||||
|
||||
- You can report bugs and discuss features on the [GitHub issues page](https://github.com/yewstack/yew/issues)
|
||||
- We love pull requests. Check out the [good first issues](https://github.com/yewstack/yew/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)
|
||||
if you'd like to help out!
|
||||
- Our [Discord chat](https://discord.gg/VQck8X4) is very active and is a great place to ask
|
||||
questions
|
||||
|
||||
## Ready to dive in?
|
||||
|
||||
Click the link below to learn how to build your first Yew app and learn from community-built example
|
||||
projects
|
||||
|
||||
[Getting started](/docs/getting-started/introduction)
|
||||
|
||||
## Still not convinced?
|
||||
|
||||
This project is built on cutting edge technology and is great for developers who like to develop the
|
||||
foundational projects of tomorrow. We think that the speed and reliability of the technologies on
|
||||
which Yew is built are set to become the standard for fast and resilient web applications of the
|
||||
future.
|
||||
|
||||
### Wait, why WebAssembly?
|
||||
|
||||
WebAssembly _\(Wasm\)_ is a portable low-level language that Rust can compile to. It runs at native
|
||||
speeds in the browser and is interoperable with JavaScript and supported in all major modern
|
||||
browsers. For ideas on how to get the most out of WebAssembly for your app, check out this list of
|
||||
[use cases](https://webassembly.org/docs/use-cases/).
|
||||
|
||||
It should be noted that using Wasm is not \(yet\) a silver bullet for improving the performance of
|
||||
web apps. As of the present, using DOM APIs from WebAssembly is still slower than calling them
|
||||
directly from JavaScript. The
|
||||
[WebAssembly Component Model](https://github.com/WebAssembly/component-model) proposal aims to
|
||||
resolve this issue. Standardization work is still ongoing (currently in
|
||||
[phase 1 of 5](https://github.com/WebAssembly/proposals) at time of writing). If you would like
|
||||
to learn more, check out this
|
||||
[excellent article](https://hacks.mozilla.org/2019/08/webassembly-interface-types/). It's based on an
|
||||
[inactive proposal](https://github.com/WebAssembly/interface-types/blob/main/proposals/interface-types/Explainer.md)
|
||||
superseeded by the aforementioned Component Model proposal, but it's still a great read.
|
||||
|
||||
### Ok, but why Rust?
|
||||
|
||||
Rust is blazing fast and reliable with its rich type system and ownership model. It has a tough
|
||||
learning curve but is well worth the effort. Rust has been voted the most loved programming
|
||||
language in Stack Overflow's Developer Survey seven years in a row:
|
||||
[2016](https://insights.stackoverflow.com/survey/2016#technology-most-loved-dreaded-and-wanted),
|
||||
[2017](https://insights.stackoverflow.com/survey/2017#most-loved-dreaded-and-wanted),
|
||||
[2018](https://insights.stackoverflow.com/survey/2018#technology-_-most-loved-dreaded-and-wanted-languages),
|
||||
[2019](https://insights.stackoverflow.com/survey/2019#technology-_-most-loved-dreaded-and-wanted-languages),
|
||||
[2020](https://insights.stackoverflow.com/survey/2020#most-loved-dreaded-and-wanted),
|
||||
[2021](https://insights.stackoverflow.com/survey/2021/#technology-most-loved-dreaded-and-wanted) and
|
||||
[2022](https://survey.stackoverflow.co/2022/#section-most-loved-dreaded-and-wanted-programming-scripting-and-markup-languages).
|
||||
|
||||
Rust also helps developers write safer code with its rich type system and ownership model. Say
|
||||
goodbye to hard to track down race condition bugs in JavaScript! In fact, with Rust, most of your
|
||||
bugs will be caught by the compiler before your app even runs. And don't worry, when your app does
|
||||
run into an error, you can still get full stack-traces for your Rust code in the browser console.
|
||||
|
||||
### Alternatives?
|
||||
|
||||
We love to share ideas with other projects and believe we can all help each other reach the full
|
||||
potential of this exciting new technology. If you're not into Yew, you might like the following
|
||||
projects:
|
||||
|
||||
- [Percy](https://github.com/chinedufn/percy) - _"A modular toolkit for building isomorphic web apps
|
||||
with Rust + WebAssembly"_
|
||||
- [Seed](https://github.com/seed-rs/seed) - _"A Rust framework for creating web apps"_
|
||||
- [Perseus](https://github.com/arctic-hen7/perseus) - _"A high-level web development framework for Rust with full support for server-side rendering and static generation"_
|
||||
- [Sycamore](https://github.com/sycamore-rs/sycamore) - _"A reactive library for creating web apps in Rust and WebAssembly"_
|
||||
91
website/src/pages/index.module.scss
Normal file
91
website/src/pages/index.module.scss
Normal file
@ -0,0 +1,91 @@
|
||||
@mixin devices($breakpoint) {
|
||||
@if $breakpoint == desktop {
|
||||
@media only screen and (min-width: 700px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if $breakpoint == tablet {
|
||||
@media only screen and (min-width: 700px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if $breakpoint == mobile {
|
||||
@media only screen and (min-width: 350px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heroHeader {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
@include devices(mobile) {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
padding: var(--ifm-h1-font-size);
|
||||
gap: calc(var(--ifm-h1-font-size) / 2);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
h1 {
|
||||
@include devices(desktop) {
|
||||
--ifm-h1-font-size: calc(var(--ifm-h1-font-size) * 3);
|
||||
}
|
||||
@include devices(tablet) {
|
||||
--ifm-h1-font-size: calc(var(--ifm-h1-font-size) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
$dimensions: calc(var(--ifm-h1-font-size) * 5);
|
||||
|
||||
@include devices(tablet) {
|
||||
$dimensions: calc(var(--ifm-h1-font-size) * 3);
|
||||
}
|
||||
|
||||
width: $dimensions;
|
||||
height: $dimensions;
|
||||
}
|
||||
}
|
||||
|
||||
.callToActions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include devices(desktop) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
h2 {
|
||||
font-size: calc(var(--ifm-h2-font-size) * 1.5);
|
||||
|
||||
@include devices(mobile) {
|
||||
font-size: calc(var(--ifm-h2-font-size) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.featuresGrid {
|
||||
$spacing: 2rem;
|
||||
padding: $spacing;
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: 1fr;
|
||||
gap: ($spacing * 2);
|
||||
|
||||
@include devices(tablet) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: $spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
103
website/src/pages/index.tsx
Normal file
103
website/src/pages/index.tsx
Normal file
@ -0,0 +1,103 @@
|
||||
import React from 'react'
|
||||
import Layout from '@theme/Layout'
|
||||
import styles from './index.module.scss'
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
|
||||
import clsx from 'clsx'
|
||||
import IconExternalLink from '@theme/Icon/ExternalLink'
|
||||
import Link from '@docusaurus/Link'
|
||||
|
||||
const Hero = () => {
|
||||
const { siteConfig } = useDocusaurusContext()
|
||||
|
||||
return (
|
||||
<div className={clsx('hero shadow--lw', styles.heroHeader)}>
|
||||
<section className={styles.header}>
|
||||
<img src={siteConfig.favicon} alt="Logo" />
|
||||
<h1 className="hero__title">{siteConfig.title}</h1>
|
||||
</section>
|
||||
<section className={clsx('hero__subtitle', styles.heroSubtitle)}>
|
||||
{siteConfig.tagline}
|
||||
</section>
|
||||
<section className={styles.callToActions}>
|
||||
<Link
|
||||
className="button button--lg button--outline button--primary margin--lg"
|
||||
to="/docs/getting-started/introduction"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
<Link
|
||||
className="button button--lg button--outline button--link margin--lg"
|
||||
to="https://play.yew.rs"
|
||||
target="_blank"
|
||||
>
|
||||
Playground
|
||||
<IconExternalLink />
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
header: 'Component Based',
|
||||
body: 'Features a component-based framework which makes it easy to create interactive UIs. Developers who have experience with frameworks like React and Elm should feel quite at home when using Yew.',
|
||||
to: '/docs/next/concepts/function-components',
|
||||
},
|
||||
{
|
||||
header: 'HTML macro',
|
||||
body: 'Features a macro for declaring interactive HTML with Rust expressions. Developers who have experience using JSX in React should feel quite at home when using Yew.',
|
||||
to: '/docs/next/concepts/html',
|
||||
},
|
||||
{
|
||||
header: 'Server Side Rendering',
|
||||
body: 'Features server side rendering for all the SEO and enhancements of server-rendered app while keeping the feel of an SPA',
|
||||
to: '/docs/next/advanced-topics/server-side-rendering',
|
||||
},
|
||||
]
|
||||
|
||||
function Feature(props: { feature: typeof FEATURES[number] }) {
|
||||
return (
|
||||
<div className="card-demo">
|
||||
<div className="card">
|
||||
<div className="card__header">
|
||||
<h3>{props.feature.header}</h3>
|
||||
</div>
|
||||
<div className="card__body">
|
||||
<p>{props.feature.body}</p>
|
||||
</div>
|
||||
<div className="card__footer">
|
||||
<Link
|
||||
className="button button--secondary"
|
||||
to={props.feature.to}
|
||||
>
|
||||
Learn more
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Features() {
|
||||
return (
|
||||
<article className={clsx('padding--lg', styles.features)}>
|
||||
<h2>Features</h2>
|
||||
<section className={styles.featuresGrid}>
|
||||
{FEATURES.map((it) => (
|
||||
<Feature feature={it} />
|
||||
))}
|
||||
</section>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Index() {
|
||||
const { siteConfig } = useDocusaurusContext()
|
||||
return (
|
||||
<Layout description={siteConfig.tagline}>
|
||||
<Hero />
|
||||
<Features />
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user