chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,25 @@
|
||||
/* 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
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-color-primary: #25c2a0;
|
||||
--ifm-color-primary-dark: rgb(33, 175, 144);
|
||||
--ifm-color-primary-darker: rgb(31, 165, 136);
|
||||
--ifm-color-primary-darkest: rgb(26, 136, 112);
|
||||
--ifm-color-primary-light: rgb(70, 203, 174);
|
||||
--ifm-color-primary-lighter: rgb(102, 212, 189);
|
||||
--ifm-color-primary-lightest: rgb(146, 224, 208);
|
||||
--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);
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
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 Translate, { translate } from '@docusaurus/Translate';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: 'Richness',
|
||||
imageUrl: 'img/website-app.png',
|
||||
description: translate({
|
||||
message: 'Richness',
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: 'Cross Platform',
|
||||
imageUrl: 'img/cross-platform.png',
|
||||
description: translate({
|
||||
message: 'Cross Platform',
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: 'Open Source',
|
||||
imageUrl: 'img/open-source.png',
|
||||
description: translate({
|
||||
message: 'Open Source',
|
||||
}),
|
||||
},
|
||||
];
|
||||
|
||||
function Feature({ imageUrl, title, description }) {
|
||||
const imgUrl = useBaseUrl(imageUrl);
|
||||
return (
|
||||
<div className={clsx('col col--4', styles.feature)}>
|
||||
{imgUrl && (
|
||||
<div className="text--center">
|
||||
<img className={styles.featureImage} src={imgUrl} alt={title} />
|
||||
</div>
|
||||
)}
|
||||
<h3 className="text--center">{title}</h3>
|
||||
<p className={clsx('text--center', styles.featureDescription)}>{description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const descriptions = [
|
||||
{
|
||||
title: translate({ message: 'Join Chat Title' }),
|
||||
content: translate({ message: 'Join Chat Content' }),
|
||||
image: `img/undraw_youtube_tutorial.svg`,
|
||||
imageAlign: 'right',
|
||||
},
|
||||
{
|
||||
title: translate({ message: 'Rich Feature Title' }),
|
||||
content: translate({ message: 'Rich Feature Content' }),
|
||||
image: `img/undraw_note_list.svg`,
|
||||
imageAlign: 'left',
|
||||
},
|
||||
{
|
||||
title: translate({ message: 'Deploy By Yourself Title' }),
|
||||
content: translate({ message: 'Deploy By Yourself Content' }),
|
||||
image: `img/undraw_code_review.svg`,
|
||||
imageAlign: 'right',
|
||||
},
|
||||
];
|
||||
|
||||
function Description({ title, content, image, index }) {
|
||||
return (
|
||||
<div className={clsx(styles.description, index % 2 === 0 && styles.lightBackground)}>
|
||||
<div className={clsx(styles.descriptionContent, index % 2 === 1 && styles.rightImage)}>
|
||||
<div className={clsx('col col--6', 'text--center')}>
|
||||
<img className={styles.descriptionImage} src={image} alt={title} />
|
||||
</div>
|
||||
<div className={clsx('col col--6')}>
|
||||
<h3 className="text--center">{title}</h3>
|
||||
<p className="text--center">{content}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DeployByYourself({ url }) {
|
||||
return (
|
||||
<div className={styles.deployByYourself}>
|
||||
<h2 className={styles.deployTitle}>{translate({ message: 'Interested' })}</h2>
|
||||
<div>
|
||||
<Link
|
||||
className={clsx(
|
||||
'button button--outline button--secondary button--lg',
|
||||
styles.getStarted,
|
||||
)}
|
||||
to={url}
|
||||
>
|
||||
{translate({ message: 'Getting Start' })}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Home() {
|
||||
const context = useDocusaurusContext();
|
||||
const { siteConfig = {} } = context;
|
||||
|
||||
const title = translate({ message: 'Title' });
|
||||
const tagLine = translate({ message: 'TagLine' });
|
||||
const keywords = translate({ message: 'Keywords' });
|
||||
const description = translate({ message: 'Description' });
|
||||
const docsUrl = translate({ message: 'DocsUrl' });
|
||||
|
||||
return (
|
||||
<Layout title={tagLine} keywords={keywords} description={description}>
|
||||
<header className={clsx('hero hero--primary', styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<h1 className="hero__title">{title}</h1>
|
||||
<p className="hero__subtitle">{tagLine}</p>
|
||||
<div>
|
||||
<iframe
|
||||
className={styles.starIframe}
|
||||
src="https://ghbtns.com/github-btn.html?user=yinxin630&repo=fiora&type=star&count=true&size=large"
|
||||
width={160}
|
||||
height={30}
|
||||
title="GitHub Stars"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className={clsx(
|
||||
'button button--outline button--secondary button--lg',
|
||||
styles.heroButton,
|
||||
)}
|
||||
to={siteConfig.url}
|
||||
>
|
||||
{translate({ message: 'Try It Now' })}
|
||||
</Link>
|
||||
<Link
|
||||
className={clsx(
|
||||
'button button--outline button--secondary button--lg',
|
||||
styles.heroButton,
|
||||
)}
|
||||
to={docsUrl}
|
||||
>
|
||||
{translate({ message: 'View Docs' })}
|
||||
</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>
|
||||
)}
|
||||
{descriptions && descriptions.length > 0 && (
|
||||
<section className={styles.descriptions}>
|
||||
<div className={clsx('row', styles.descriptionRow)}>
|
||||
{descriptions.map((props, idx) => (
|
||||
<Description key={idx} {...props} index={idx} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
<section className={styles.descriptions}>
|
||||
<div className={clsx('row', styles.descriptionRow)}>
|
||||
<DeployByYourself url={`${siteConfig.baseUrl}docs/getting-start`} />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
@@ -0,0 +1,101 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureImage {
|
||||
height: 120px;
|
||||
width: 200px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.featureDescription {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.starIframe {
|
||||
border: none;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.descriptions {
|
||||
}
|
||||
|
||||
.descriptionRow {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.descriptionContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: var(--ifm-container-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--ifm-spacing-horizontal);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.descriptionImage {
|
||||
height: auto;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.lightBackground {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.rightImage {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.deployByYourself {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.deployTitle {
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.heroButton {
|
||||
margin: 0 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user