This is an automated email from the ASF dual-hosted git repository. mikexue pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-eventmesh-site.git
commit 39d9dc6d27b1133119a48804d7755f0efdb658cc Author: Xiaoyang Liu <[email protected]> AuthorDate: Mon Jul 19 11:38:35 2021 +0800 Implement Incubation component to display Apache Incubator Logo and description Signed-off-by: Xiaoyang Liu <[email protected]> --- README.md | 34 +------ blog/2019-05-28-hola.md | 11 -- blog/2019-05-29-hello-world.md | 17 ---- blog/2019-05-30-welcome.md | 13 --- docs/tutorial-basics/_category_.json | 4 - docs/tutorial-basics/congratulations.md | 21 ---- docs/tutorial-basics/create-a-blog-post.md | 29 ------ docs/tutorial-basics/create-a-document.md | 55 ---------- docs/tutorial-basics/create-a-page.md | 43 -------- docs/tutorial-basics/deploy-your-site.md | 31 ------ docs/tutorial-basics/markdown-features.mdx | 144 --------------------------- docs/tutorial-extras/_category_.json | 4 - docs/tutorial-extras/manage-docs-versions.md | 55 ---------- docs/tutorial-extras/translate-your-site.md | 88 ---------------- docusaurus.config.js | 7 +- src/components/Features.module.css | 19 +++- src/components/Features.tsx | 37 +++++-- src/components/Hero.module.css | 8 +- src/components/Hero.tsx | 2 +- src/components/Incubation.module.css | 5 + src/components/Incubation.tsx | 26 +++++ src/css/custom.css | 16 +-- src/pages/index.tsx | 2 + static/img/incubator-logo.png | Bin 0 -> 17961 bytes 24 files changed, 99 insertions(+), 572 deletions(-) diff --git a/README.md b/README.md index 231a499..e1f3f43 100644 --- a/README.md +++ b/README.md @@ -1,33 +1 @@ -# Website - -This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. - -## Installation - -```console -yarn install -``` - -## Local Development - -```console -yarn start -``` - -This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. - -## Build - -```console -yarn build -``` - -This command generates static content into the `build` directory and can be served using any static contents hosting service. - -## Deployment - -```console -GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy -``` - -If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. +# Apache EventMesh Site diff --git a/blog/2019-05-28-hola.md b/blog/2019-05-28-hola.md deleted file mode 100644 index 4adbc32..0000000 --- a/blog/2019-05-28-hola.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -slug: hola -title: Hola -author: Gao Wei -author_title: Docusaurus Core Team -author_url: https://github.com/wgao19 -author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4 -tags: [hola, docusaurus] ---- - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet diff --git a/blog/2019-05-29-hello-world.md b/blog/2019-05-29-hello-world.md deleted file mode 100644 index 6fd2083..0000000 --- a/blog/2019-05-29-hello-world.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -slug: hello-world -title: Hello -author: Endilie Yacop Sucipto -author_title: Maintainer of Docusaurus -author_url: https://github.com/endiliey -author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4 -tags: [hello, docusaurus] ---- - -Welcome to this blog. This blog is created with [**Docusaurus 2**](https://docusaurus.io/). - -<!--truncate--> - -This is a test post. - -A whole bunch of other information. diff --git a/blog/2019-05-30-welcome.md b/blog/2019-05-30-welcome.md deleted file mode 100644 index d35d57b..0000000 --- a/blog/2019-05-30-welcome.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -slug: welcome -title: Welcome -author: Yangshun Tay -author_title: Front End Engineer @ Facebook -author_url: https://github.com/yangshun -author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4 -tags: [facebook, hello, docusaurus] ---- - -Blog features are powered by the blog plugin. Simply add files to the `blog` directory. It supports tags as well! - -Delete the whole directory if you don't want the blog features. As simple as that! diff --git a/docs/tutorial-basics/_category_.json b/docs/tutorial-basics/_category_.json deleted file mode 100644 index 135e4a6..0000000 --- a/docs/tutorial-basics/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Tutorial - Basics", - "position": 2 -} diff --git a/docs/tutorial-basics/congratulations.md b/docs/tutorial-basics/congratulations.md deleted file mode 100644 index 9ef99bb..0000000 --- a/docs/tutorial-basics/congratulations.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -sidebar_position: 6 ---- - -# Congratulations! - -You have just learned the **basics of Docusaurus** and made some changes to the **initial template**. - -Docusaurus has **much more to offer**! - -Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**. - -Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610) - -## What's next? - -- Read the [official documentation](https://docusaurus.io/). -- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout) -- Add a [search bar](https://docusaurus.io/docs/search) -- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase) -- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support) diff --git a/docs/tutorial-basics/create-a-blog-post.md b/docs/tutorial-basics/create-a-blog-post.md deleted file mode 100644 index d893e1c..0000000 --- a/docs/tutorial-basics/create-a-blog-post.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -sidebar_position: 3 ---- - -# Create a Blog Post - -Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed... - -## Create your first Post - -Create a file at `blog/2021-02-28-greetings.md`: - -```md title="blog/2021-02-28-greetings.md" ---- -slug: greetings -title: Greetings! -author: Steven Hansel -author_title: Docusaurus Contributor -author_url: https://github.com/ShinteiMai -author_image_url: https://github.com/ShinteiMai.png -tags: [greetings] ---- - -Congratulations, you have made your first post! - -Feel free to play around and edit this post as much you like. -``` - -A new blog post is now available at `http://localhost:3000/blog/greetings`. diff --git a/docs/tutorial-basics/create-a-document.md b/docs/tutorial-basics/create-a-document.md deleted file mode 100644 index b4a072e..0000000 --- a/docs/tutorial-basics/create-a-document.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Create a Document - -Documents are **groups of pages** connected through: - -- a **sidebar** -- **previous/next navigation** -- **versioning** - -## Create your first Doc - -Create a markdown file at `docs/hello.md`: - -```md title="docs/hello.md" -# Hello - -This is my **first Docusaurus document**! -``` - -A new document is now available at `http://localhost:3000/docs/hello`. - -## Configure the Sidebar - -Docusaurus automatically **creates a sidebar** from the `docs` folder. - -Add metadatas to customize the sidebar label and position: - -```md title="docs/hello.md" {1-4} ---- -sidebar_label: 'Hi!' -sidebar_position: 3 ---- - -# Hello - -This is my **first Docusaurus document**! -``` - -It is also possible to create your sidebar explicitly in `sidebars.js`: - -```diff title="sidebars.js" -module.exports = { - tutorialSidebar: [ - { - type: 'category', - label: 'Tutorial', -- items: [...], -+ items: ['hello'], - }, - ], -}; -``` diff --git a/docs/tutorial-basics/create-a-page.md b/docs/tutorial-basics/create-a-page.md deleted file mode 100644 index e112b00..0000000 --- a/docs/tutorial-basics/create-a-page.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Create a Page - -Add **Markdown or React** files to `src/pages` to create a **standalone page**: - -- `src/pages/index.js` -> `localhost:3000/` -- `src/pages/foo.md` -> `localhost:3000/foo` -- `src/pages/foo/bar.js` -> `localhost:3000/foo/bar` - -## Create your first React Page - -Create a file at `src/pages/my-react-page.js`: - -```jsx title="src/pages/my-react-page.js" -import React from 'react'; -import Layout from '@theme/Layout'; - -export default function MyReactPage() { - return ( - <Layout> - <h1>My React page</h1> - <p>This is a React page</p> - </Layout> - ); -} -``` - -A new page is now available at `http://localhost:3000/my-react-page`. - -## Create your first Markdown Page - -Create a file at `src/pages/my-markdown-page.md`: - -```mdx title="src/pages/my-markdown-page.md" -# My Markdown page - -This is a Markdown page -``` - -A new page is now available at `http://localhost:3000/my-markdown-page`. diff --git a/docs/tutorial-basics/deploy-your-site.md b/docs/tutorial-basics/deploy-your-site.md deleted file mode 100644 index 492eae0..0000000 --- a/docs/tutorial-basics/deploy-your-site.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -sidebar_position: 5 ---- - -# Deploy your site - -Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**). - -It builds your site as simple **static HTML, JavaScript and CSS files**. - -## Build your site - -Build your site **for production**: - -```bash -npm run build -``` - -The static files are generated in the `build` folder. - -## Deploy your site - -Test your production build locally: - -```bash -npm run serve -``` - -The `build` folder is now served at `http://localhost:3000/`. - -You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**). diff --git a/docs/tutorial-basics/markdown-features.mdx b/docs/tutorial-basics/markdown-features.mdx deleted file mode 100644 index 8855626..0000000 --- a/docs/tutorial-basics/markdown-features.mdx +++ /dev/null @@ -1,144 +0,0 @@ ---- -sidebar_position: 4 ---- - -# Markdown Features - -Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**. - -## Front Matter - -Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/): - -```text title="my-doc.md" -// highlight-start ---- -id: my-doc-id -title: My document title -description: My document description -slug: /my-custom-url ---- -// highlight-end - -## Markdown heading - -Markdown text with [links](./hello.md) -``` - -## Links - -Regular Markdown links are supported, using url paths or relative file paths. - -```md -Let's see how to [Create a page](/create-a-page). -``` - -```md -Let's see how to [Create a page](./create-a-page.md). -``` - -**Result:** Let's see how to [Create a page](./create-a-page.md). - -## Images - -Regular Markdown images are supported. - -Add an image at `static/img/docusaurus.png` and display it in Markdown: - -```md - -``` - - - -## Code Blocks - -Markdown code blocks are supported with Syntax highlighting. - - ```jsx title="src/components/HelloDocusaurus.js" - function HelloDocusaurus() { - return ( - <h1>Hello, Docusaurus!</h1> - ) - } - ``` - -```jsx title="src/components/HelloDocusaurus.js" -function HelloDocusaurus() { - return <h1>Hello, Docusaurus!</h1>; -} -``` - -## Admonitions - -Docusaurus has a special syntax to create admonitions and callouts: - - :::tip My tip - - Use this awesome feature option - - ::: - - :::danger Take care - - This action is dangerous - - ::: - -:::tip My tip - -Use this awesome feature option - -::: - -:::danger Take care - -This action is dangerous - -::: - -## MDX and React Components - -[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**: - -```jsx -export const Highlight = ({children, color}) => ( - <span - style={{ - backgroundColor: color, - borderRadius: '20px', - color: '#fff', - padding: '10px', - cursor: 'pointer', - }} - onClick={() => { - alert(`You clicked the color ${color} with label ${children}`) - }}> - {children} - </span> -); - -This is <Highlight color="#25c2a0">Docusaurus green</Highlight> ! - -This is <Highlight color="#1877F2">Facebook blue</Highlight> ! -``` - -export const Highlight = ({children, color}) => ( - <span - style={{ - backgroundColor: color, - borderRadius: '20px', - color: '#fff', - padding: '10px', - cursor: 'pointer', - }} - onClick={() => { - alert(`You clicked the color ${color} with label ${children}`); - }}> - {children} - </span> -); - -This is <Highlight color="#25c2a0">Docusaurus green</Highlight> ! - -This is <Highlight color="#1877F2">Facebook blue</Highlight> ! diff --git a/docs/tutorial-extras/_category_.json b/docs/tutorial-extras/_category_.json deleted file mode 100644 index ca3f8e0..0000000 --- a/docs/tutorial-extras/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Tutorial - Extras", - "position": 3 -} diff --git a/docs/tutorial-extras/manage-docs-versions.md b/docs/tutorial-extras/manage-docs-versions.md deleted file mode 100644 index 6335b0a..0000000 --- a/docs/tutorial-extras/manage-docs-versions.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Manage Docs Versions - -Docusaurus can manage multiple versions of your docs. - -## Create a docs version - -Release a version 1.0 of your project: - -```bash -npm run docusaurus docs:version 1.0 -``` - -The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created. - -Your docs now have 2 versions: - -- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs -- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs** - -## Add a Version Dropdown - -To navigate seamlessly across versions, add a version dropdown. - -Modify the `docusaurus.config.js` file: - -```js title="docusaurus.config.js" -module.exports = { - themeConfig: { - navbar: { - items: [ - // highlight-start - { - type: 'docsVersionDropdown', - }, - // highlight-end - ], - }, - }, -}; -``` - -The docs version dropdown appears in your navbar: - - - -## Update an existing version - -It is possible to edit versioned docs in their respective folder: - -- `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello` -- `docs/hello.md` updates `http://localhost:3000/docs/next/hello` diff --git a/docs/tutorial-extras/translate-your-site.md b/docs/tutorial-extras/translate-your-site.md deleted file mode 100644 index a25c089..0000000 --- a/docs/tutorial-extras/translate-your-site.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Translate your site - -Let's translate `docs/intro.md` to French. - -## Configure i18n - -Modify `docusaurus.config.js` to add support for the `fr` locale: - -```js title="docusaurus.config.js" -module.exports = { - i18n: { - defaultLocale: 'en', - locales: ['en', 'fr'], - }, -}; -``` - -## Translate a doc - -Copy the `docs/intro.md` file to the `i18n/fr` folder: - -```bash -mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/ - -cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md -``` - -Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French. - -## Start your localized site - -Start your site on the French locale: - -```bash -npm run start -- --locale fr -``` - -Your localized site is accessible at `http://localhost:3000/fr/` and the `Getting Started` page is translated. - -:::caution - -In development, you can only use one locale at a same time. - -::: - -## Add a Locale Dropdown - -To navigate seamlessly across languages, add a locale dropdown. - -Modify the `docusaurus.config.js` file: - -```js title="docusaurus.config.js" -module.exports = { - themeConfig: { - navbar: { - items: [ - // highlight-start - { - type: 'localeDropdown', - }, - // highlight-end - ], - }, - }, -}; -``` - -The locale dropdown now appears in your navbar: - - - -## Build your localized site - -Build your site for a specific locale: - -```bash -npm run build -- --locale fr -``` - -Or build your site to include all the locales at once: - -```bash -npm run build -``` diff --git a/docusaurus.config.js b/docusaurus.config.js index 8c2fea8..276830b 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -112,7 +112,12 @@ module.exports = { ], }, ], - copyright: `Copyright © ${new Date().getFullYear()} The Apache Software Foundation.`, + copyright: ` + Copyright © ${new Date().getFullYear()} The Apache Software Foundation. + Apache EventMesh, Apache Incubator, EventMesh, Apache, the Apache feather logo, + the Apache EventMesh logo and the Apache Incubator project logo + are trademarks of The Apache Software Foundation. + `, }, prism: { theme: lightCodeTheme, diff --git a/src/components/Features.module.css b/src/components/Features.module.css index 9dcb82c..830c50d 100644 --- a/src/components/Features.module.css +++ b/src/components/Features.module.css @@ -1,4 +1,15 @@ -/* stylelint-disable docusaurus/copyright-header */ +.title { + font-size: 1.2rem; + margin-bottom: 0; +} + +.description { + opacity: 0.6; +} + +.feature { + margin-bottom: 0; +} .features { display: flex; @@ -11,3 +22,9 @@ height: 200px; width: 200px; } + +@media screen and (max-width: 966px) { + .feature { + margin-bottom: 1.2rem; + } +} diff --git a/src/components/Features.tsx b/src/components/Features.tsx index 004e386..e688e26 100644 --- a/src/components/Features.tsx +++ b/src/components/Features.tsx @@ -7,36 +7,44 @@ import CloudNativeImg from '../../static/img/eventmesh-cloud-native.png'; interface FeatureProps { title: string, + description: string, image: string, } const FeatureList: FeatureProps[] = [ { title: 'EventMesh Ecosystem', + description: 'What is EventMesh', image: EcosystemImg, }, { title: 'EventMesh Architecture', + description: 'EventMesh ability and architecture', image: ArchitectureImg, }, { title: 'EventMesh Cloud Native', + description: 'Panels and cloud native deployment', image: CloudNativeImg, }, ]; const Feature = ({ title, + description, image, }: FeatureProps): JSX.Element => ( - <div className={clsx('col col--4')}> - <div className="text--center padding-horiz--md"> - <p>{title}</p> - <img - src={image} - alt={title} - /> - </div> + <div className={clsx('col col--4 text--center', styles.feature)}> + <p className={styles.title}> + {title} + </p> + <p className={styles.description}> + {description} + </p> + <img + src={image} + alt={title} + /> </div> ); @@ -44,8 +52,17 @@ const Features = (): JSX.Element => ( <section className={styles.features}> <div className="container"> <div className="row"> - {FeatureList.map((props, idx) => ( - <Feature key={idx} {...props} /> + {FeatureList.map(({ + title, + description, + image, + }) => ( + <Feature + key={title} + title={title} + description={description} + image={image} + /> ))} </div> </div> diff --git a/src/components/Hero.module.css b/src/components/Hero.module.css index 478b555..ebe9d70 100644 --- a/src/components/Hero.module.css +++ b/src/components/Hero.module.css @@ -8,7 +8,7 @@ } .heroBanner { - padding: 8rem 2rem; + padding: 8rem 0; text-align: left; position: relative; overflow: hidden; @@ -16,7 +16,7 @@ .buttons { display: flex; - align-items:center; + align-items: center; justify-content: flex-start; } @@ -30,11 +30,11 @@ @media screen and (max-width: 966px) { .heroBanner { - padding: 2rem 0rem; + padding: 2rem 0; } .buttons { - justify-content: center; + justify-content: space-between; } .heroImage { diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index 3f58a11..4297425 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -29,7 +29,7 @@ const Hero = (): JSX.Element => { </Link> <Link - className="button button--secondary button--lg" + className="button button--secondary button--outline button--lg" href="https://github.com/apache/incubator-eventmesh"; > GitHub diff --git a/src/components/Incubation.module.css b/src/components/Incubation.module.css new file mode 100644 index 0000000..e8227aa --- /dev/null +++ b/src/components/Incubation.module.css @@ -0,0 +1,5 @@ +.subtitle { + opacity: 0.6; + margin-top: 1rem; + margin-bottom: 2rem; +} diff --git a/src/components/Incubation.tsx b/src/components/Incubation.tsx new file mode 100644 index 0000000..cd42511 --- /dev/null +++ b/src/components/Incubation.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import styles from './Incubation.module.css'; +import IncubatorLogo from '../../static/img/incubator-logo.png'; + +const Incubation = (): JSX.Element => ( + <div className="container container--fluid"> + <img + src={IncubatorLogo} + alt="Apache Incubator Logo" + width="318px" + /> + + <p + className={styles.subtitle} + > + Apache EventMesh is an effort undergoing incubation at The Apache Software Foundation (ASF), + sponsored by the Apache Incubator. Incubation is required of all newly accepted projects + until a further review indicates that the infrastructure, communications, and decision making + process have stabilized in a manner consistent with other successful ASF projects. + While incubation status is not necessarily a reflection of the completeness or stability of + the code, it does indicate that the project has yet to be fully endorsed by the ASF. + </p> + </div> +); + +export default Incubation; diff --git a/src/css/custom.css b/src/css/custom.css index 1e04591..0d9ff0a 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -7,15 +7,17 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #0077b6; - --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-color-primary: #3578e5; + --ifm-color-primary-dark: #1d68e1; + --ifm-color-primary-darker: #1b62d4; + --ifm-color-primary-darkest: #1751af; + --ifm-color-primary-light: #4e89e8; + --ifm-color-primary-lighter: #5a91ea; + --ifm-color-primary-lightest: #80aaef; --ifm-code-font-size: 95%; --ifm-font-family-base: 'Inter', sans-serif; + --ifm-button-font-weight: normal; + --ifm-button-border-width: 0.1rem; } .docusaurus-highlight-code-line { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 236c489..5e99a26 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,6 +3,7 @@ import Layout from '@theme/Layout'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Hero from '../components/Hero'; import Features from '../components/Features'; +import Incubation from '../components/Incubation'; const Home = (): JSX.Element => { const { siteConfig } = useDocusaurusContext(); @@ -14,6 +15,7 @@ const Home = (): JSX.Element => { <Hero /> <main> <Features /> + <Incubation /> </main> </Layout> ); diff --git a/static/img/incubator-logo.png b/static/img/incubator-logo.png new file mode 100644 index 0000000..759252f Binary files /dev/null and b/static/img/incubator-logo.png differ --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
