Docusaurus v2 (#1872)

* Docusaurus v2

* i18n

* Fix firebase hosting config

.github/workflows/build-website.yml

@@ -35,7 +35,7 @@ jobs:
         uses: actions/upload-artifact@v2
         with:
           name: website
-          path: website/build/yew
+          path: website/build/
           retention-days: 1
 
       - if: github.event_name == 'pull_request'

.github/workflows/publish-website.yml

@@ -27,7 +27,7 @@ jobs:
           workflow: build-website.yml
           run_id: ${{ github.event.workflow_run.id }}
           name: website
-          path: website/build/yew
+          path: website/build
 
       - if: github.event.workflow_run.event == 'pull_request'
         name: Download pr info

docs/README.md

@@ -1,39 +0,0 @@
-# Contributing to the documentation
-
-Firstly, thanks for considering contributing to Yew. We're a friendly community of humans who 
-collaborate to build (hopefully) awesome software. We try to write software which is easy to use so
-we ask that you follow a few guidelines when contributing – these are laid out in this document.
-
-Note that this document is about *contributing documentation* not contributing code and only 
-applies to the contents of the `docs` folder – not any other parts of the project.
-
-## Can I just submit a PR or do I need to create an issue first?
-
-PRs not attached to previously created issues are welcome *if* they're a small change. This could
-be something like fixing a small grammar mistake or a typo.
-
-If your PR is something bigger create an issue beforehand. This will save everyone time and effort:
-
-1. Multiple people don't end up submitting duplicate PRs doing the same thing.
-2. People have a chance to submit feedback on an idea *before* someone does a lot of work on it.
-3. It's easy to track progress on the development of the documentation.
-
-## Spelling and grammar
-
-We recognize that not everyone who contributes to Yew will have "perfect" grammar or be a native
-English speaker. We're all human; everyone makes mistakes and nobody will look down on you if you 
-make typos or grammar mistakes (we'll just fix them, merge PRs and move on with life).
-
-To help catch spelling mistakes, we use a spellchecking script which originally came from the Rust
-Book. If it picks up a spelling "mistake" which isn't actually a mistake, then please add it to the
-list in `ci/dictionary.txt` (in alphabetically sorted order).
-
-If in doubt about spelling, grammar or style you might find it useful to consult the 
-[Microsoft Style Guide](https://docs.microsoft.com/style-guide/) which we sometimes use as a handy
-reference.
-
-## Line wrap
-Having really long lines makes it hard to review code and see differences between versions. To 
-solve this problem all lines should be wrapped at 100 characters.
-
-If you're editing a line which is more than 100 characters long, please feel free to shorten it!

docs/SUMMARY.md

@@ -1,41 +0,0 @@
-# Table of contents
-
-- [Introduction](README.md)
-
-## Getting Started
-
-- [Project Setup](getting-started/project-setup.md)
-  - [Using trunk](getting-started/project-setup/using-trunk.md)
-  - [Using wasm-pack](getting-started/project-setup/using-wasm-pack.md)
-- [Starter Templates](getting-started/starter-templates.md)
-- [Build a Sample App](getting-started/build-a-sample-app.md)
-- [Learn through examples](getting-started/examples.md)
-
-## Core Concepts <a id="concepts"></a>
-
-- [Using html!](concepts/html.md)
-  - [Lists](concepts/html/lists.md)
-  - [Elements](concepts/html/elements.md)
-  - [Literals & Expressions](concepts/html/literals-and-expressions.md)
-  - [Components](concepts/html/components.md)
-- [Components](concepts/components.md)
-  - [Properties](concepts/components/properties.md)
-  - [Callbacks](concepts/components/callbacks.md)
-  - [Refs](concepts/components/refs.md)
-- [Agents](concepts/agents.md)
-- [Services](concepts/services.md)
-  - [Format](concepts/services/format.md)
-- [Router](concepts/router.md)
-
-## Advanced Topics
-
-- [Optimizations & Best Practices](advanced-topics/optimizations.md)
-- [Low-level library internals](advanced-topics/how-it-works.md)
-
-## More
-
-- [CSS](more/css.md)
-- [Roadmap](more/roadmap.md)
-- [Testing](more/testing.md)
-- [Debugging](more/debugging.md)
-- [External Libs](more/external-libs.md)

firebase.json

@@ -2,39 +2,44 @@
   "hosting": [
     {
       "target": "website",
-      "public": "website/build/yew",
+      "public": "website/build/",
       "cleanUrls": true,
       "redirects": [
         // `/intro` -> `/` (2020-10-15)
         {
-          "source": "/docs/:lang/intro",
+          "source": "/",
-          "destination": "/docs/:lang/",
+          "destination": "/docs/index/",
+          "type": 302
+        },
+        {
+          "source": "/docs/:lang/index",
+          "destination": "/:lang/docs/index",
           "type": 301
         },
         {
           "source": "/docs/:lang/next/intro",
-          "destination": "/docs/:lang/next/",
+          "destination": "/:lang/docs/next/index",
           "type": 301
         },
         // legacy (2020-08-15)
         {
           "source": "/docs/v/zh_cn",
-          "destination": "/docs/zh-CN/",
+          "destination": "/zh-CN/docs/",
           "type": 301
         },
         {
           "source": "/docs/v/zh_tw",
-          "destination": "/docs/zh-TW/",
+          "destination": "/zh-TW/docs/",
           "type": 301
         },
         {
           "regex": "/docs/v/zh_cn/(.*)",
-          "destination": "/docs/zh-CN/:1",
+          "destination": "/zh-CN/docs/:1",
           "type": 301
         },
         {
           "regex": "/docs/v/zh_tw/(.*)",
-          "destination": "/docs/zh-TW/:1",
+          "destination": "/zh-TW/docs/:1",
           "type": 301
         }
       ]

website/.gitignore

@@ -1,5 +1,20 @@
-build/
+# Dependencies
-node_modules/
+/node_modules
 
-/package-lock.json
+# Production
-/yarn.lock
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/README.md

@@ -1,143 +1,33 @@
-This website was created with [Docusaurus](https://docusaurus.io/).
+# Website
 
-# What's In This Document
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
 
-- [Get Started in 5 Minutes](#get-started-in-5-minutes)
+## Installation
-- [Directory Structure](#directory-structure)
-- [Editing Content](#editing-content)
-- [Adding Content](#adding-content)
-- [Full Documentation](#full-documentation)
 
-# Get Started in 5 Minutes
+```console
-
+yarn install
-1. Make sure all the dependencies for the website are installed:
-
-```sh
-# Install dependencies
-$ npm install
 ```
 
-2. Run your dev server:
+## Local Development
 
-```sh
+```console
-# Start the site
+yarn start
-$ npm start
 ```
 
-## Directory Structure
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
-Your project file structure should look something like this
+## Build
 
-```
+```console
-yew/
+yarn build
-  docs/
-  website/
-    core/
-    node_modules/
-    static/
-      css/
-      img/
-    package.json
-    sidebars.json
-    siteConfig.js
 ```
 
-# Editing Content
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
-## Editing an existing docs page
+## Deployment
 
-Edit docs by navigating to `docs/` and editing the corresponding document:
+```console
-
+GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
-`docs/doc-to-be-edited.md`
-
-```markdown
----
-id: page-needs-edit
-title: This Doc Needs To Be Edited
----
-
-Edit me...
 ```
 
-For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
+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.
-
-# Adding Content
-
-## Adding a new docs page to an existing sidebar
-
-1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
-
-```md
----
-id: newly-created-doc
-title: This Doc Needs To Be Edited
----
-
-My new content here..
-```
-
-1. Refer to that doc's ID in an existing sidebar in `website/sidebars.json`:
-
-```javascript
-// Add newly-created-doc to the Getting Started category of docs
-{
-  "docs": {
-    "Getting Started": [
-      "quick-start",
-      "newly-created-doc" // new doc here
-    ],
-    ...
-  },
-  ...
-}
-```
-
-For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
-
-## Adding items to your site's top navigation bar
-
-1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
-
-`website/siteConfig.js`
-
-```javascript
-{
-  headerLinks: [
-    ...
-    /* you can add docs */
-    { doc: 'my-examples', label: 'Examples' },
-    /* you can add custom pages */
-    { page: 'help', label: 'Help' },
-    /* you can add external links */
-    { href: 'https://github.com/facebook/docusaurus', label: 'GitHub' },
-    ...
-  ],
-  ...
-}
-```
-
-For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
-
-## Adding custom pages
-
-1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
-1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
-
-`website/siteConfig.js`
-
-```javascript
-{
-  headerLinks: [
-    ...
-    { page: 'my-new-custom-page', label: 'My New Custom Page' },
-    ...
-  ],
-  ...
-}
-```
-
-For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
-
-# Full Documentation
-
-Full documentation can be found on the [website](https://docusaurus.io/).

website/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

website/core/Footer.js

@@ -1,92 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const React = require('react');
-
-class Footer extends React.Component {
-  docUrl(doc, language) {
-    const baseUrl = this.props.config.baseUrl;
-    const docsUrl = this.props.config.docsUrl;
-    const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
-    const langPart = `${language ? `${language}/` : ''}`;
-    return `${baseUrl}${docsPart}${langPart}${doc}`;
-  }
-
-  pageUrl(doc, language) {
-    const baseUrl = this.props.config.baseUrl;
-    return baseUrl + (language ? `${language}/` : '') + doc;
-  }
-
-  render() {
-    return (
-      <footer className="nav-footer" id="footer">
-        <section className="sitemap">
-          <a href={this.props.config.baseUrl} className="nav-home">
-            {this.props.config.footerIcon && (
-              <img
-                src={this.props.config.baseUrl + this.props.config.footerIcon}
-                alt={this.props.config.title}
-                width="66"
-                height="58"
-              />
-            )}
-          </a>
-
-          <div>
-            <h5>Support</h5>
-            <a
-              href="https://issuehunt.io/r/yewstack/yew"
-              target="_blank"
-              rel="noreferrer noopener">
-              Fund Issues
-            </a>
-            <a
-              href="https://opencollective.com/yew"
-              target="_blank"
-              rel="noreferrer noopener">
-              Sponsor Project
-            </a>
-          </div>
-
-          <div>
-            <h5>Participate</h5>
-            <a
-              href={this.props.config.repoUrl}
-              target="_blank"
-              rel="noreferrer noopener">
-              Github
-            </a>
-            <a
-              href="https://discord.gg/VQck8X4"
-              target="_blank"
-              rel="noreferrer noopener">
-              Discord
-            </a>
-            <a
-              href={`https://twitter.com/${this.props.config.twitterUsername}`}
-              target="_blank"
-              rel="noreferrer noopener">
-              Twitter
-            </a>
-          </div>
-
-          <div>
-            <h5>More</h5>
-            <a
-              href="https://github.com/jetli/awesome-yew"
-              target="_blank"
-              rel="noreferrer noopener">
-              Yew Awesome
-            </a>
-          </div>
-        </section>
-      </footer>
-    );
-  }
-}
-
-module.exports = Footer;

website/docs/advanced-topics/how-it-works.md

@@ -1,6 +1,6 @@
 ---
-title: How it works
+title: "How it works"
-description: Low level details about the framework
+description: "Low level details about the framework"
 ---
 
 # Low-level library internals
@@ -68,4 +68,4 @@ indicate whether a re-render is required to help with performance.
 ## Further reading
 * [More information about macros from the Rust Book](https://doc.rust-lang.org/stable/book/ch19-06-macros.html)
 * [More information about `cargo-expand`](https://github.com/dtolnay/cargo-expand)
-* [The API documentation for `yew::virtual_dom`](https://docs.rs/yew/*/yew/virtual_dom/index.html)
+* [The API documentation for `yew::virtual_dom`](https://docs.rs/yew/*/yew/virtual_dom/index.html)

website/docs/advanced-topics/optimizations.md

@@ -1,7 +1,7 @@
 ---
-title: Optimizations & Best Practices
+title: "Optimizations & Best Practices"
 sidebar_label: Optimizations
-description: Make your app faster
+description: "Make your app faster"
 ---
 
 ## neq\_assign

website/docs/concepts/agents.md

@@ -1,6 +1,6 @@
 ---
-title: Agents
+title: "Agents"
-description: Yew's Actor System
+description: "Yew's Actor System"
 ---
 
 Agents are similar to Angular's [Services](https://angular.io/guide/architecture-services) \(but without dependency injection\), and provide a Yew with an [Actor Model](https://en.wikipedia.org/wiki/Actor_model). Agents can be used to route messages between components independently of where they sit in the component hierarchy, or they can be used to create a shared state, and they can also be used to offload computationally expensive tasks from the main thread which renders the UI. There is also planned support for using agents to allow Yew applications to communicate across tabs \(in the future\).

website/docs/concepts/components.md

@@ -1,6 +1,6 @@
 ---
-title: Introduction
+title: "Introduction"
-description: Components and their lifecycle hooks
+description: "Components and their lifecycle hooks"
 ---
 
 ## What are Components?

website/docs/concepts/components/callbacks.md

@@ -1,6 +1,6 @@
 ---
-title: Callbacks
+title: "Callbacks"
-description: ComponentLink and Callbacks
+description: "ComponentLink and Callbacks"
 ---
 
 The component "link" is the mechanism through which components are able to create callbacks and update themselves.

website/docs/concepts/components/children.md

@@ -1,6 +1,5 @@
 ---
-title: Children
+title: "Children"
-description: 
 ---
 
 ## General usage

website/docs/concepts/components/properties.md

@@ -1,6 +1,6 @@
 ---
-title: Properties
+title: "Properties"
-description: Parent to child communication
+description: "Parent to child communication"
 ---
 
 Properties enable child and parent components to communicate with each other.

website/docs/concepts/components/refs.md

@@ -1,6 +1,6 @@
 ---
-title: Refs
+title: "Refs"
-description: Out-of-band DOM access
+description: "Out-of-band DOM access"
 ---
 
 The `ref` keyword can be used inside of any HTML element or component to get the DOM `Element` that 

website/docs/concepts/contexts.md

@@ -1,7 +1,7 @@
 ---
-title: Contexts
+title: "Contexts"
 sidebar_label: Contexts
-description: Using contexts to pass data within application
+description: "Using contexts to pass data within application"
 ---
 
 Generally data is passed down the component tree using props but that becomes tedious for values such as 

website/docs/concepts/function-components.md

@@ -1,7 +1,7 @@
 ---
-title: Function Components
+title: "Function Components"
 sidebar_label: Introduction
-description: Introduction to function components 
+description: "Introduction to function components "
 ---
 
 :::warning

website/docs/concepts/function-components/attribute.md

@@ -1,6 +1,6 @@
 ---
-title: #[function_component]
+title: "#[function_component]"
-description: The #[function_component] attribute
+description: "The #[function_component] attribute"
 ---
 
 `#[function_component(_)]` turns a normal Rust function into a function component.

website/docs/concepts/function-components/custom-hooks.md

@@ -1,6 +1,6 @@
 ---
-title: Custom Hooks
+title: "Custom Hooks"
-description: Defining your own Hooks 
+description: "Defining your own Hooks "
 ---
 
 ## Defining custom Hooks
@@ -68,5 +68,5 @@ Although this approach works in almost all cases, it can't be used to write prim
 
 ### Writing primitive hooks
 
-`use_hook` function is used to write such hooks. View the docs on [docs.rs]() for the documentation
+`use_hook` function is used to write such hooks. View the docs on [docs.rs](https://docs.rs/yew/0.18.0/yew-functional/use_hook.html) for the documentation
 and `hooks` directory to see implementations of pre-defined hooks.

website/docs/concepts/function-components/pre-defined-hooks.md

@@ -1,6 +1,6 @@
 ---
-title: Pre-defined Hooks
+title: "Pre-defined Hooks"
-description: The pre-defined Hooks that Yew comes with 
+description: "The pre-defined Hooks that Yew comes with "
 ---
 
 ## `use_state`

website/docs/concepts/html.md

@@ -1,7 +1,7 @@
 ---
-title: HTML
+title: "HTML"
 sidebar_label: Introduction
-description: The procedural macro for generating HTML and SVG
+description: "The procedural macro for generating HTML and SVG"
 ---
 
 The `html!` macro allows you to write HTML and SVG code declaratively. It is similar to JSX

website/docs/concepts/html/classes.md

@@ -1,6 +1,6 @@
 ---
-title: Classes
+title: "Classes"
-description: A handy macro to handle classes
+description: "A handy macro to handle classes"
 ---
 
 ## Classes

website/docs/concepts/html/components.md

@@ -1,6 +1,6 @@
 ---
-title: Components
+title: "Components"
-description: Create complex layouts with component hierarchies
+description: "Create complex layouts with component hierarchies"
 ---
 
 ## Basic

website/docs/concepts/html/elements.md

@@ -1,6 +1,6 @@
 ---
-title: Elements
+title: "Elements"
-description: Both HTML and SVG elements are supported
+description: "Both HTML and SVG elements are supported"
 ---
 
 ## Dynamic tag names

website/docs/concepts/html/lists.md

@@ -1,5 +1,5 @@
 ---
-title: Lists
+title: "Lists"
 ---
 
 ## Fragments

website/docs/concepts/html/literals-and-expressions.md

@@ -1,5 +1,5 @@
 ---
-title: Literals and Expressions
+title: "Literals and Expressions"
 ---
 ## Literals
 

website/docs/concepts/router.md

@@ -1,6 +1,6 @@
 ---
-title: Router
+title: "Router"
-description: Yew's official router
+description: "Yew's official router"
 ---
 
 [The router on crates.io](https://crates.io/crates/yew-router)

website/docs/concepts/services.md

@@ -1,7 +1,7 @@
 ---
-title: Services
+title: "Services"
 sidebar_label: Overview
-description: Yew's glue to browser APIs
+description: "Yew's glue to browser APIs"
 ---
 
 :::note

website/docs/concepts/services/fetch.md

@@ -1,6 +1,6 @@
 ---
 id: fetch
-title: Fetch
+title: "Fetch"
 ---
 ## Introduction
 The fetch service can be used to make HTTP requests to a server. This enables applications to

website/docs/concepts/services/format.md

@@ -1,7 +1,5 @@
 ---
-title: Format
+title: "Format"
-id: version-0.17.3-format
-original_id: format
 ---
 :::important contribute
 `Contribute to our docs:` [Explain the format module in depth](https://github.com/yewstack/docs/issues/24)

website/docs/getting-started/build-a-sample-app.md

@@ -1,5 +1,5 @@
 ---
-title: Build a sample app
+title: "Build a sample app"
 ---
 
 ## Create Project
@@ -141,4 +141,4 @@ Trunk will helpfully rebuild your application if you modify any of its files.
 
 You have now successfully setup your Yew development environment, and built your first web application.
 
-Experiment with this application and review the [examples](./examples.md) to further your learning.
+Experiment with this application and review the [examples](./examples.md) to further your learning.

website/docs/getting-started/examples.md

@@ -1,5 +1,5 @@
 ---
-title: Examples
+title: "Examples"
 ---
 
 The Yew repository is chock-full of [examples] \(in various states of maintenance\).

website/docs/getting-started/project-setup.md

@@ -1,7 +1,7 @@
 ---
-title: Project Setup
+title: "Project Setup"
 sidebar_label: Introduction
-description: Set yourself up for success
+description: "Set yourself up for success"
 ---
 
 ## Overview

website/docs/getting-started/project-setup/using-trunk.md

@@ -1,5 +1,5 @@
 ---
-title: Using trunk
+title: "Using trunk"
 ---
 
 ## Install

website/docs/getting-started/project-setup/using-wasm-pack.md

@@ -1,5 +1,5 @@
 ---
-title: Using wasm-pack
+title: "Using wasm-pack"
 ---
 
 This tool was created by the Rust / Wasm Working Group for building WebAssembly applications. It supports packaging code into `npm` modules and has an accompanying [Webpack plugin](https://github.com/wasm-tool/wasm-pack-plugin) for easy integration with existing JavaScript applications. More information is given in [the `wasm-pack` documentation](https://rustwasm.github.io/docs/wasm-pack/introduction.html).

website/docs/getting-started/starter-templates.md

@@ -1,5 +1,5 @@
 ---
-title: Starter templates
+title: "Starter templates"
 ---
 
 ## `trunk`

website/docs/index.md

@@ -1,5 +1,5 @@
 ---
-title: Introduction
+title: "Introduction"
 ---
 
 ## What is Yew?

website/docs/more/css.md

@@ -1,5 +1,5 @@
 ---
-title: CSS
+title: "CSS"
 ---
 
 <TODO>

website/docs/more/debugging.md

@@ -1,5 +1,5 @@
 ---
-title: Debugging
+title: "Debugging"
 ---
 
 ## Panics

website/docs/more/development-tips.md

@@ -1,5 +1,5 @@
 ---
-title: Tips for developing Yew applications
+title: "Tips for developing Yew applications"
 ---
 
 :::important contribute

website/docs/more/external-libs.md

@@ -1,6 +1,6 @@
 ---
-title: External libraries
+title: "External libraries"
-description: Libraries that can help with Yew development
+description: "Libraries that can help with Yew development"
 ---
 
 ### Yewtil

website/docs/more/roadmap.md

@@ -1,6 +1,6 @@
 ---
-title: Roadmap
+title: "Roadmap"
-description: The planned feature roadmap for the Yew framework
+description: "The planned feature roadmap for the Yew framework"
 ---
 
 ## Prioritization

website/docs/more/testing.md

@@ -1,6 +1,6 @@
 ---
-title: Testing apps
+title: "Testing apps"
-description: Testing your app
+description: "Testing your app"
 ---
 
 <TODO>

website/docs/more/wasm-build-tools.md

@@ -1,6 +1,6 @@
 ---
-title: Wasm Build Tools
+title: "Wasm Build Tools"
-description: Information about build tools
+description: "Information about build tools"
 ---
 
 
@@ -20,7 +20,7 @@ It can bundle assets for your app and even ships with a Sass compiler.
 
 All of our examples are built with Trunk.
 
-[Getting started with `trunk`](project-setup/using-trunk.md)
+[Getting started with `trunk`](../getting-started/project-setup/using-trunk.md)
 
 ### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/)
 
@@ -29,7 +29,7 @@ together with the [`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-pl
 The primary purpose of `wasm-pack` is building Wasm libraries for use in JavaScript.
 Because of this, it can only build libraries and doesn't provide useful tools like a development server or automatic rebuilds.
 
-[Get started with `wasm-pack`](project-setup/using-wasm-pack.md)
+[Get started with `wasm-pack`](../getting-started/project-setup/using-wasm-pack.md)
 
 ### Comparison
 

website/docusaurus.config.js

@@ -0,0 +1,117 @@
+/** @type {import('@docusaurus/types').DocusaurusConfig} */
+module.exports = {
+  title: 'Yew',
+  tagline: 'Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly.',
+  url: 'https://yew.rs',
+  baseUrl: '/',
+  onBrokenLinks: 'warn',
+  onBrokenMarkdownLinks: 'warn',
+  favicon: 'img/favicon.png',
+  organizationName: 'yewstack', // Usually your GitHub org/user name.
+  projectName: 'yew', // Usually your repo name.
+  themeConfig: {
+    navbar: {
+      title: 'Yew',
+      logo: {
+        alt: 'Yew Logo',
+          src: 'img/logo.png',
+      },
+      items: [
+        {
+          type: 'docsVersionDropdown',
+          position: 'left',
+        },
+        {
+          type: 'localeDropdown',
+          position: 'left',
+        },
+        {
+          type: 'doc',
+          docId: 'index',
+          position: 'left',
+          label: 'Docs',
+        },
+        {
+          href: 'https://docs.rs/yew',
+          position: 'right',
+          label: 'API',
+        },
+        {
+          href: 'https://github.com/yewstack/yew',
+          label: 'GitHub',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      links: [
+        {
+          title: 'Support',
+          items: [
+            {
+              label: 'Fund Issues',
+              href: 'https://issuehunt.io/r/yewstack/yew',
+            },
+            {
+              label: 'Sponsor Project',
+              href: 'https://opencollective.com/yew',
+            },
+          ],
+        },
+        {
+          title: 'Participate',
+          items: [
+            {
+              label: 'GitHub',
+              href: 'https://github.com/yewstack/yew',
+            },
+            {
+              label: 'Discord',
+              href: 'https://discord.gg/VQck8X4',
+            },
+            {
+              label: 'Twitter',
+              href: 'https://twitter.com/yewstack',
+            },
+          ],
+        },
+        {
+          title: 'More',
+          items: [
+            {
+              label: 'Yew Awesome',
+              href: 'https://github.com/jetli/awesome-yew',
+            },
+          ],
+        },
+      ],
+    },
+    prism: {
+      // TODO additionalLanguages: ['rust'],
+    },
+    algolia: {
+      apiKey: "bbaacf676920f3836ccab85fb87dd37c",
+      indexName: "yew",
+    }
+  },
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'ja', 'zh-CN', 'zh-TW'],
+  },
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          sidebarPath: require.resolve('./sidebars.js'),
+          editUrl:
+            'https://github.com/yewstack/yew/blob/master/website/',
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      },
+    ],
+  ],
+};

website/i18n/en.json

@@ -1,337 +0,0 @@
-{
-  "_comment": "This file is auto-generated by write-translations.js",
-  "localized-strings": {
-    "next": "Next",
-    "previous": "Previous",
-    "tagline": "Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly.",
-    "docs": {
-      "advanced-topics/how-it-works": {
-        "title": "How it works"
-      },
-      "advanced-topics/optimizations": {
-        "title": "Optimizations & Best Practices",
-        "sidebar_label": "Optimizations"
-      },
-      "concepts/agents": {
-        "title": "Agents"
-      },
-      "concepts/components": {
-        "title": "Introduction"
-      },
-      "concepts/components/callbacks": {
-        "title": "Callbacks"
-      },
-      "concepts/components/children": {
-        "title": "Children"
-      },
-      "concepts/components/properties": {
-        "title": "Properties"
-      },
-      "concepts/components/refs": {
-        "title": "Refs"
-      },
-      "concepts/contexts": {
-        "title": "Contexts",
-        "sidebar_label": "Contexts"
-      },
-      "concepts/function-components": {
-        "title": "Function Components",
-        "sidebar_label": "Introduction"
-      },
-      "concepts/function-components/attribute": {
-        "title": "#[function_component]"
-      },
-      "concepts/function-components/custom-hooks": {
-        "title": "Custom Hooks"
-      },
-      "concepts/function-components/pre-defined-hooks": {
-        "title": "Pre-defined Hooks"
-      },
-      "concepts/html": {
-        "title": "HTML",
-        "sidebar_label": "Introduction"
-      },
-      "concepts/html/classes": {
-        "title": "Classes"
-      },
-      "concepts/html/components": {
-        "title": "Components"
-      },
-      "concepts/html/elements": {
-        "title": "Elements"
-      },
-      "concepts/html/lists": {
-        "title": "Lists"
-      },
-      "concepts/html/literals-and-expressions": {
-        "title": "Literals and Expressions"
-      },
-      "concepts/router": {
-        "title": "Router"
-      },
-      "concepts/services": {
-        "title": "Services",
-        "sidebar_label": "Overview"
-      },
-      "concepts/services/fetch": {
-        "title": "Fetch"
-      },
-      "concepts/services/format": {
-        "title": "Format"
-      },
-      "getting-started/build-a-sample-app": {
-        "title": "Build a sample app"
-      },
-      "getting-started/examples": {
-        "title": "Examples"
-      },
-      "getting-started/project-setup": {
-        "title": "Project Setup",
-        "sidebar_label": "Introduction"
-      },
-      "getting-started/project-setup/using-trunk": {
-        "title": "Using trunk"
-      },
-      "getting-started/project-setup/using-wasm-pack": {
-        "title": "Using wasm-pack"
-      },
-      "getting-started/starter-templates": {
-        "title": "Starter templates"
-      },
-      "index": {
-        "title": "Introduction"
-      },
-      "more/css": {
-        "title": "CSS"
-      },
-      "more/debugging": {
-        "title": "Debugging"
-      },
-      "more/development-tips": {
-        "title": "Tips for developing Yew applications"
-      },
-      "more/external-libs": {
-        "title": "External libraries"
-      },
-      "more/roadmap": {
-        "title": "Roadmap"
-      },
-      "more/testing": {
-        "title": "Testing apps"
-      },
-      "more/wasm-build-tools": {
-        "title": "Wasm Build Tools"
-      },
-      "README": {
-        "title": "README"
-      },
-      "SUMMARY": {
-        "title": "SUMMARY"
-      },
-      "version-0.17.3/advanced-topics/version-0.17.3-how-it-works": {
-        "title": "How it works"
-      },
-      "version-0.17.3/advanced-topics/version-0.17.3-optimizations": {
-        "title": "Optimizations & Best Practices",
-        "sidebar_label": "Optimizations"
-      },
-      "version-0.17.3/concepts/version-0.17.3-agents": {
-        "title": "Agents"
-      },
-      "version-0.17.3/concepts/version-0.17.3-components": {
-        "title": "Introduction"
-      },
-      "version-0.17.3/concepts/components/version-0.17.3-callbacks": {
-        "title": "Callbacks"
-      },
-      "version-0.17.3/concepts/components/version-0.17.3-properties": {
-        "title": "Properties"
-      },
-      "version-0.17.3/concepts/components/version-0.17.3-refs": {
-        "title": "Refs"
-      },
-      "version-0.17.3/concepts/version-0.17.3-html": {
-        "title": "html!",
-        "sidebar_label": "Introduction"
-      },
-      "version-0.17.3/concepts/html/version-0.17.3-components": {
-        "title": "Components"
-      },
-      "version-0.17.3/concepts/html/version-0.17.3-elements": {
-        "title": "Elements"
-      },
-      "version-0.17.3/concepts/html/version-0.17.3-lists": {
-        "title": "Lists"
-      },
-      "version-0.17.3/concepts/html/version-0.17.3-literals-and-expressions": {
-        "title": "Literals and Expressions"
-      },
-      "version-0.17.3/concepts/version-0.17.3-router": {
-        "title": "Router"
-      },
-      "version-0.17.3/concepts/version-0.17.3-services": {
-        "title": "Services",
-        "sidebar_label": "Overview"
-      },
-      "version-0.17.3/concepts/services/version-0.17.3-format": {
-        "title": "Format"
-      },
-      "version-0.17.3/getting-started/version-0.17.3-build-a-sample-app": {
-        "title": "Build a sample app"
-      },
-      "version-0.17.3/getting-started/version-0.17.3-choose-web-library": {
-        "title": "Choosing a web library"
-      },
-      "version-0.17.3/getting-started/version-0.17.3-examples": {
-        "title": "Examples"
-      },
-      "version-0.17.3/getting-started/version-0.17.3-project-setup": {
-        "title": "Project Setup",
-        "sidebar_label": "Introduction"
-      },
-      "version-0.17.3/getting-started/project-setup/version-0.17.3-using-cargo-web": {
-        "title": "Using cargo-web"
-      },
-      "version-0.17.3/getting-started/project-setup/version-0.17.3-using-wasm-bindgen": {
-        "title": "Using wasm-bindgen"
-      },
-      "version-0.17.3/getting-started/project-setup/version-0.17.3-using-wasm-pack": {
-        "title": "Using wasm-pack"
-      },
-      "version-0.17.3/getting-started/version-0.17.3-starter-templates": {
-        "title": "Starter templates"
-      },
-      "version-0.17.3/version-0.17.3-index": {
-        "title": "Introduction"
-      },
-      "version-0.17.3/more/version-0.17.3-css": {
-        "title": "CSS"
-      },
-      "version-0.17.3/more/version-0.17.3-debugging": {
-        "title": "Debugging"
-      },
-      "version-0.17.3/more/version-0.17.3-external-libs": {
-        "title": "External libraries"
-      },
-      "version-0.17.3/more/version-0.17.3-roadmap": {
-        "title": "Roadmap"
-      },
-      "version-0.17.3/more/version-0.17.3-testing": {
-        "title": "Testing apps"
-      },
-      "version-0.18.0/advanced-topics/version-0.18.0-how-it-works": {
-        "title": "How it works"
-      },
-      "version-0.18.0/advanced-topics/version-0.18.0-optimizations": {
-        "title": "Optimizations & Best Practices",
-        "sidebar_label": "Optimizations"
-      },
-      "version-0.18.0/concepts/version-0.18.0-components": {
-        "title": "Introduction"
-      },
-      "version-0.18.0/concepts/components/version-0.18.0-callbacks": {
-        "title": "Callbacks"
-      },
-      "version-0.18.0/concepts/components/version-0.18.0-children": {
-        "title": "Children"
-      },
-      "version-0.18.0/concepts/components/version-0.18.0-properties": {
-        "title": "Properties"
-      },
-      "version-0.18.0/concepts/components/version-0.18.0-refs": {
-        "title": "Refs"
-      },
-      "version-0.18.0/concepts/version-0.18.0-function-components": {
-        "title": "Function Components",
-        "sidebar_label": "Introduction"
-      },
-      "version-0.18.0/concepts/function-components/version-0.18.0-attribute": {
-        "title": "#[function_component]"
-      },
-      "version-0.18.0/concepts/function-components/version-0.18.0-custom-hooks": {
-        "title": "Custom Hooks"
-      },
-      "version-0.18.0/concepts/function-components/version-0.18.0-pre-defined-hooks": {
-        "title": "Pre-defined Hooks"
-      },
-      "version-0.18.0/concepts/version-0.18.0-html": {
-        "title": "HTML",
-        "sidebar_label": "Introduction"
-      },
-      "version-0.18.0/concepts/html/version-0.18.0-classes": {
-        "title": "Classes"
-      },
-      "version-0.18.0/concepts/html/version-0.18.0-components": {
-        "title": "Components"
-      },
-      "version-0.18.0/concepts/html/version-0.18.0-elements": {
-        "title": "Elements"
-      },
-      "version-0.18.0/concepts/html/version-0.18.0-lists": {
-        "title": "Lists"
-      },
-      "version-0.18.0/concepts/version-0.18.0-router": {
-        "title": "Router"
-      },
-      "version-0.18.0/concepts/services/version-0.18.0-fetch": {
-        "title": "Fetch"
-      },
-      "version-0.18.0/getting-started/version-0.18.0-build-a-sample-app": {
-        "title": "Build a sample app"
-      },
-      "version-0.18.0/getting-started/version-0.18.0-choose-web-library": {
-        "title": "Choosing a web library"
-      },
-      "version-0.18.0/getting-started/version-0.18.0-examples": {
-        "title": "Examples"
-      },
-      "version-0.18.0/getting-started/version-0.18.0-project-setup": {
-        "title": "Project Setup",
-        "sidebar_label": "Introduction"
-      },
-      "version-0.18.0/getting-started/project-setup/version-0.18.0-using-trunk": {
-        "title": "Using trunk"
-      },
-      "version-0.18.0/getting-started/project-setup/version-0.18.0-using-wasm-pack": {
-        "title": "Using wasm-pack"
-      },
-      "version-0.18.0/getting-started/version-0.18.0-starter-templates": {
-        "title": "Starter templates"
-      },
-      "version-0.18.0/version-0.18.0-index": {
-        "title": "Introduction"
-      },
-      "version-0.18.0/more/version-0.18.0-css": {
-        "title": "CSS"
-      },
-      "version-0.18.0/more/version-0.18.0-debugging": {
-        "title": "Debugging"
-      },
-      "version-0.18.0/more/version-0.18.0-external-libs": {
-        "title": "External libraries"
-      },
-      "version-0.18.0/more/version-0.18.0-roadmap": {
-        "title": "Roadmap"
-      },
-      "version-0.18.0/more/version-0.18.0-testing": {
-        "title": "Testing apps"
-      }
-    },
-    "links": {
-      "Changelog": "Changelog",
-      "API": "API",
-      "Discord": "Discord"
-    },
-    "categories": {
-      "Getting Started": "Getting Started",
-      "Concepts": "Concepts",
-      "Advanced topics": "Advanced topics",
-      "More": "More"
-    }
-  },
-  "pages-strings": {
-    "Help Translate|recruit community translators for your project": "Help Translate",
-    "Edit this Doc|recruitment message asking to edit the doc source": "Edit",
-    "Translate this Doc|recruitment message asking to translate the docs": "Translate"
-  }
-}

website/i18n/ja.json

@@ -1,213 +0,0 @@
-{
-  "localized-strings": {
-    "next": "Next",
-    "previous": "Previous",
-    "tagline": "Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly.",
-    "docs": {
-      "advanced-topics/how-it-works": {
-        "title": "How it works"
-      },
-      "advanced-topics/optimizations": {
-        "title": "Optimizations & Best Practices",
-        "sidebar_label": "Optimizations"
-      },
-      "concepts/agents": {
-        "title": "Agents"
-      },
-      "concepts/components": {
-        "title": "Introduction"
-      },
-      "concepts/components/callbacks": {
-        "title": "Callbacks"
-      },
-      "concepts/components/properties": {
-        "title": "Properties"
-      },
-      "concepts/components/refs": {
-        "title": "Refs"
-      },
-      "concepts/html": {
-        "title": "html!",
-        "sidebar_label": "Introduction"
-      },
-      "concepts/html/components": {
-        "title": "Components"
-      },
-      "concepts/html/elements": {
-        "title": "Elements"
-      },
-      "concepts/html/lists": {
-        "title": "Lists"
-      },
-      "concepts/html/literals-and-expressions": {
-        "title": "Literals and Expressions"
-      },
-      "concepts/router": {
-        "title": "Router"
-      },
-      "concepts/services": {
-        "title": "Services",
-        "sidebar_label": "Overview"
-      },
-      "concepts/services/format": {
-        "title": "Format"
-      },
-      "getting-started/build-a-sample-app": {
-        "title": "Build a sample app"
-      },
-      "getting-started/choose-web-library": {
-        "title": "Choosing a web library"
-      },
-      "getting-started/examples": {
-        "title": "Examples"
-      },
-      "getting-started/project-setup": {
-        "title": "Project Setup",
-        "sidebar_label": "Introduction"
-      },
-      "getting-started/project-setup/using-cargo-web": {
-        "title": "Using cargo-web"
-      },
-      "getting-started/project-setup/using-wasm-bindgen": {
-        "title": "Using wasm-bindgen"
-      },
-      "getting-started/project-setup/using-wasm-pack": {
-        "title": "Using wasm-pack"
-      },
-      "getting-started/starter-templates": {
-        "title": "Starter templates"
-      },
-      "index": {
-        "title": "Introduction"
-      },
-      "more/css": {
-        "title": "CSS"
-      },
-      "more/debugging": {
-        "title": "Debugging"
-      },
-      "more/external-libs": {
-        "title": "External libraries"
-      },
-      "more/roadmap": {
-        "title": "Roadmap"
-      },
-      "more/testing": {
-        "title": "Testing apps"
-      },
-      "README": {
-        "title": "README"
-      },
-      "SUMMARY": {
-        "title": "SUMMARY"
-      },
-      "version-0.17.3-advanced-topics/how-it-works": {
-        "title": "How it works"
-      },
-      "version-0.17.3-advanced-topics/optimizations": {
-        "title": "Optimizations & Best Practices",
-        "sidebar_label": "Optimizations"
-      },
-      "version-0.17.3-concepts/agents": {
-        "title": "Agents"
-      },
-      "version-0.17.3-concepts/components": {
-        "title": "Introduction"
-      },
-      "version-0.17.3-concepts/components/callbacks": {
-        "title": "Callbacks"
-      },
-      "version-0.17.3-concepts/components/properties": {
-        "title": "Properties"
-      },
-      "version-0.17.3-concepts/components/refs": {
-        "title": "Refs"
-      },
-      "version-0.17.3-concepts/html": {
-        "title": "html!",
-        "sidebar_label": "Introduction"
-      },
-      "version-0.17.3-concepts/html/components": {
-        "title": "Components"
-      },
-      "version-0.17.3-concepts/html/elements": {
-        "title": "Elements"
-      },
-      "version-0.17.3-concepts/html/lists": {
-        "title": "Lists"
-      },
-      "version-0.17.3-concepts/html/literals-and-expressions": {
-        "title": "Literals and Expressions"
-      },
-      "version-0.17.3-concepts/router": {
-        "title": "Router"
-      },
-      "version-0.17.3-concepts/services": {
-        "title": "Services",
-        "sidebar_label": "Overview"
-      },
-      "version-0.17.3-concepts/services/format": {
-        "title": "Format"
-      },
-      "version-0.17.3-getting-started/build-a-sample-app": {
-        "title": "Build a sample app"
-      },
-      "version-0.17.3-getting-started/choose-web-library": {
-        "title": "Choosing a web library"
-      },
-      "version-0.17.3-getting-started/examples": {
-        "title": "Examples"
-      },
-      "version-0.17.3-getting-started/project-setup": {
-        "title": "Project Setup",
-        "sidebar_label": "Introduction"
-      },
-      "version-0.17.3-getting-started/project-setup/using-cargo-web": {
-        "title": "Using cargo-web"
-      },
-      "version-0.17.3-getting-started/project-setup/using-wasm-bindgen": {
-        "title": "Using wasm-bindgen"
-      },
-      "version-0.17.3-getting-started/project-setup/using-wasm-pack": {
-        "title": "Using wasm-pack"
-      },
-      "version-0.17.3-getting-started/starter-templates": {
-        "title": "Starter templates"
-      },
-      "version-0.17.3-index": {
-        "title": "Introduction"
-      },
-      "version-0.17.3-more/css": {
-        "title": "CSS"
-      },
-      "version-0.17.3-more/debugging": {
-        "title": "Debugging"
-      },
-      "version-0.17.3-more/external-libs": {
-        "title": "External libraries"
-      },
-      "version-0.17.3-more/roadmap": {
-        "title": "Roadmap"
-      },
-      "version-0.17.3-more/testing": {
-        "title": "Testing apps"
-      }
-    },
-    "links": {
-      "Changelog": "Changelog",
-      "API": "API",
-      "Discord": "Discord"
-    },
-    "categories": {
-      "Getting Started": "Getting Started",
-      "Concepts": "Concepts",
-      "Advanced topics": "Advanced topics",
-      "More": "More"
-    }
-  },
-  "pages-strings": {
-    "Help Translate|recruit community translators for your project": "Help Translate",
-    "Edit this Doc|recruitment message asking to edit the doc source": "Edit",
-    "Translate this Doc|recruitment message asking to translate the docs": "Translate"
-  }
-}

website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/getting-started/choose-web-library.md

@@ -49,36 +49,36 @@ window.alert("hello from wasm!");
 <table>
   <thead>
     <tr>
-      <th style="text-align:left"></th>
+      <th style={{ textAlign: "left" }}></th>
-      <th style="text-align:left"><code>web-sys</code>
+      <th style={{ textAlign: "left" }}><code>web-sys</code>
       </th>
-      <th style="text-align:left"><code>stdweb</code>
+      <th style={{ textAlign: "left" }}><code>stdweb</code>
       </th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td style="text-align:left">プロジェクトの進捗状況</td>
+      <td style={{ textAlign: "left" }}>プロジェクトの進捗状況</td>
-      <td style="text-align:left">
+      <td style={{ textAlign: "left" }}>
         <a href="https://rustwasm.github.io/">Rust / Wasm 活動チーム</a>により活発にメンテナンスされている
       </td>
-      <td style="text-align:left">GitHubで8ヶ月間動きなし</td>
+      <td style={{ textAlign: "left" }}>GitHubで8ヶ月間動きなし</td>
     </tr>
     <tr>
-      <td style="text-align:left">Web API のカバー</td>
+      <td style={{ textAlign: "left" }}>Web API のカバー</td>
-      <td style="text-align:left">RustのAPIはWeb IDLスペックから自動的に生成される。</td>
+      <td style={{ textAlign: "left" }}>RustのAPIはWeb IDLスペックから自動的に生成される。</td>
-      <td style="text-align:left">Browser APIはコミュニティにより追加。</td>
+      <td style={{ textAlign: "left" }}>Browser APIはコミュニティにより追加。</td>
     </tr>
     <tr>
-      <td style="text-align:left">RustのAPIのデザイン</td>
+      <td style={{ textAlign: "left" }}>RustのAPIのデザイン</td>
-      <td style="text-align:left">
+      <td style={{ textAlign: "left" }}>
         ほとんどのAPIコールおいて<code>Result</code>が返ってくるよう保守的なアプローチがとられている。
       </td>
-      <td style="text-align:left">しばしば<code>Result</code>を返さずpanicするようになっている。例えば <code>stdweb::web::window()</code>ワーカーの中で呼ばれるパニックする。</td>
+      <td style={{ textAlign: "left" }}>しばしば<code>Result</code>を返さずpanicするようになっている。例えば <code>stdweb::web::window()</code>ワーカーの中で呼ばれるパニックする。</td>
     </tr>
     <tr>
-      <td style="text-align:left">サポートされているビルドツール</td>
+      <td style={{ textAlign: "left" }}>サポートされているビルドツール</td>
-      <td style="text-align:left">
+      <td style={{ textAlign: "left" }}>
         <p></p>
         <ul>
           <li><code>wasm-bindgen</code>
@@ -87,7 +87,7 @@ window.alert("hello from wasm!");
           </li>
         </ul>
       </td>
-      <td style="text-align:left">
+      <td style={{ textAlign: "left" }}>
         <p></p>
         <ul>
           <li><code>cargo-web</code>
@@ -100,14 +100,14 @@ window.alert("hello from wasm!");
       </td>
     </tr>
     <tr>
-      <td style="text-align:left">サポートされているターゲット</td>
+      <td style={{ textAlign: "left" }}>サポートされているターゲット</td>
-      <td style="text-align:left">
+      <td style={{ textAlign: "left" }}>
         <ul>
           <li><code>wasm32-unknown-unknown</code>
           </li>
         </ul>
       </td>
-      <td style="text-align:left">
+      <td style={{ textAlign: "left" }}>
         <ul>
           <li><code>wasm32-unknown-unknown</code>
           </li>

website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/getting-started/project-setup.md

@@ -0,0 +1,142 @@
+---
+title: Introduction
+description: Set yourself up for success
+---
+
+# 始める
+
+## Rust
+
+まずはじめにRustが必要です。Rustとビルドツールの`cargo`をインストールするために、以下の[公式サイト](https://www.rust-lang.org/tools/install)
+を見てください。
+
+## **Wasm ビルドツール**
+
+WebAssemblyとJavaScriptの互換を持たせるために他にツールが必要です。さらに、選んだツールに応じてブラウザでアプリから`.wasm`ファイルを実行するのに
+必要なJavaScriptラッパーのコードを生成し、これによってデプロイやパッケージ化での頭痛の種を軽減させるのに役立ちます。
+
+### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/)
+
+Rust / Wasm活動チームによって開発されているCLIツールで、WebAssemblyをパッケージ化することができます。
+Webpackには[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin)が最もよく使われています。
+
+[`wasm-pack`で始める](project-setup/using-wasm-pack.md)
+
+### [**`wasm-bindgen`**](https://rustwasm.github.io/docs/wasm-bindgen/)
+
+Rust/Wasm活動チームによって開発されているライブラリとCLIツールで、JS / WebAssemblyの互換性を持たせるための低レベルなツールです
+(`wasm-pack`で内部的に使われています)。
+`wasm-bindgen`は手書きのJavaScriptでWebAssemblyのバイナリを使う必要があるため、直接使うのは非推奨です。
+しかし、詳細な情報については[**`wasm-bindgen` ガイド**](https://rustwasm.github.io/docs/wasm-bindgen/)から得られます。
+
+[`wasm-bindgen`で始める。](project-setup/using-wasm-bindgen.md)
+
+### [**`cargo-web`**](https://github.com/koute/cargo-web)
+
+`wasm-pack`と`wasm-bindgen`を導入する前は好まれたWebワークフローツールです。
+`wasm-pack`がサポートされていないサンプルを動かすのにインストールする価値があり、依然として**最もお手軽に**始められる方法です。
+
+[`cargo web`で始める](project-setup/using-cargo-web.md)
+
+### 比較
+
+<table>
+  <thead>
+    <tr>
+      <th style={{ textAlign: "left" }}></th>
+      <th style={{ textAlign: "left" }}><code>wasm-pack</code>
+      </th>
+      <th style={{ textAlign: "left" }}><code>wasm-bindgen</code>
+      </th>
+      <th style={{ textAlign: "left" }}><code>cargo-web</code>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style={{ textAlign: "left" }}>プロジェクトの進行状況</td>
+      <td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/">Rust / Wasm活動チーム</a>により活発にメンテナンス
+      </td>
+      <td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/">Rust / Wasm 活動チーム</a>により活発にメンテナンス
+      </td>
+      <td style={{ textAlign: "left" }}>6ヶ月間GitHubでの活発な活動無し</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}>開発体験</td>
+      <td style={{ textAlign: "left" }}>ほぼ大丈夫! <code>webpack</code>があればなお良い。</td>
+      <td
+      style={{ textAlign: "left" }}>だいたい大丈夫。開発においては少し流れを書かないといけない。</td>
+        <td style={{ textAlign: "left" }}>しっかり動く！完結していて、外部ライブラリに頼る必要無し。</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}>ローカルサーバー</td>
+      <td style={{ textAlign: "left" }}><code>webpack</code>プラグインによるサポートあり</td>
+      <td style={{ textAlign: "left" }}>サポート無し</td>
+      <td style={{ textAlign: "left" }}>サポートあり</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}>ローカル環境での変更による自動再ビルド</td>
+      <td style={{ textAlign: "left" }}><code>webpack</code>プラグインによるサポートあり</td>
+      <td style={{ textAlign: "left" }}>サポート無し</td>
+      <td style={{ textAlign: "left" }}>サポートあり</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}>ヘッドレスブラウザテスト</td>
+      <td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-pack/commands/test.html">サポートあり</a>
+      </td>
+      <td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html">サポートあり</a>
+      </td>
+      <td style={{ textAlign: "left" }}><a href="https://github.com/koute/cargo-web#features">サポートあり</a>
+      </td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}>サポートされているターゲット</td>
+      <td style={{ textAlign: "left" }}>
+        <ul>
+          <li><code>wasm32-unknown-unknown</code>
+          </li>
+        </ul>
+      </td>
+      <td style={{ textAlign: "left" }}>
+        <ul>
+          <li><code>wasm32-unknown-unknown</code>
+          </li>
+        </ul>
+      </td>
+      <td style={{ textAlign: "left" }}>
+        <ul>
+          <li><code>wasm32-unknown-unknown</code>
+          </li>
+          <li><code>wasm32-unknown-emscripten</code>
+          </li>
+          <li><code>asmjs-unknown-emscripten</code>
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}><code>web-sys</code></td>
+      <td style={{ textAlign: "left" }}>互換性あり</td>
+      <td style={{ textAlign: "left" }}>互換性あり</td>
+      <td style={{ textAlign: "left" }}>互換性無し</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}><code>stdweb</code></td>
+      <td style={{ textAlign: "left" }}>互換性あり</td>
+      <td style={{ textAlign: "left" }}>互換性あり</td>
+      <td style={{ textAlign: "left" }}>互換性あり</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}>使用例</td>
+      <td style={{ textAlign: "left" }}><a href="https://github.com/yewstack/yew-wasm-pack-minimal">入門用テンプレート</a>
+      </td>
+      <td style={{ textAlign: "left" }}>
+        Yewで<a href="https://github.com/yewstack/yew/blob/master/examples/build.sh">作る例</a>
+      </td>
+      <td style={{ textAlign: "left" }}>
+        Yewで<a href="https://www.github.com/yewstack/yew/tree/master/packages/yew-stdweb/examples">作る例</a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+

website/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/choose-web-library.md

@@ -49,36 +49,36 @@ window.alert("hello from wasm!");
 <table>
   <thead>
     <tr>
-      <th style="text-align:left"></th>
+      <th style={{ textAlign: "left" }}></th>
-      <th style="text-align:left"><code>web-sys</code>
+      <th style={{ textAlign: "left" }}><code>web-sys</code>
       </th>
-      <th style="text-align:left"><code>stdweb</code>
+      <th style={{ textAlign: "left" }}><code>stdweb</code>
       </th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td style="text-align:left">プロジェクトの進捗状況</td>
+      <td style={{ textAlign: "left" }}>プロジェクトの進捗状況</td>
-      <td style="text-align:left">
+      <td style={{ textAlign: "left" }}>
         <a href="https://rustwasm.github.io/">Rust / Wasm 活動チーム</a>により活発にメンテナンスされている
       </td>
-      <td style="text-align:left">GitHubで8ヶ月間動きなし</td>
+      <td style={{ textAlign: "left" }}>GitHubで8ヶ月間動きなし</td>
     </tr>
     <tr>
-      <td style="text-align:left">Web API のカバー</td>
+      <td style={{ textAlign: "left" }}>Web API のカバー</td>
-      <td style="text-align:left">RustのAPIはWeb IDLスペックから自動的に生成される。</td>
+      <td style={{ textAlign: "left" }}>RustのAPIはWeb IDLスペックから自動的に生成される。</td>
-      <td style="text-align:left">Browser APIはコミュニティにより追加。</td>
+      <td style={{ textAlign: "left" }}>Browser APIはコミュニティにより追加。</td>
     </tr>
     <tr>
-      <td style="text-align:left">RustのAPIのデザイン</td>
+      <td style={{ textAlign: "left" }}>RustのAPIのデザイン</td>
-      <td style="text-align:left">
+      <td style={{ textAlign: "left" }}>
         ほとんどのAPIコールおいて<code>Result</code>が返ってくるよう保守的なアプローチがとられている。
       </td>
-      <td style="text-align:left">しばしば<code>Result</code>を返さずpanicするようになっている。例えば <code>stdweb::web::window()</code>ワーカーの中で呼ばれるパニックする。</td>
+      <td style={{ textAlign: "left" }}>しばしば<code>Result</code>を返さずpanicするようになっている。例えば <code>stdweb::web::window()</code>ワーカーの中で呼ばれるパニックする。</td>
     </tr>
     <tr>
-      <td style="text-align:left">サポートされているビルドツール</td>
+      <td style={{ textAlign: "left" }}>サポートされているビルドツール</td>
-      <td style="text-align:left">
+      <td style={{ textAlign: "left" }}>
         <p></p>
         <ul>
           <li><code>wasm-bindgen</code>
@@ -87,7 +87,7 @@ window.alert("hello from wasm!");
           </li>
         </ul>
       </td>
-      <td style="text-align:left">
+      <td style={{ textAlign: "left" }}>
         <p></p>
         <ul>
           <li><code>cargo-web</code>
@@ -100,14 +100,14 @@ window.alert("hello from wasm!");
       </td>
     </tr>
     <tr>
-      <td style="text-align:left">サポートされているターゲット</td>
+      <td style={{ textAlign: "left" }}>サポートされているターゲット</td>
-      <td style="text-align:left">
+      <td style={{ textAlign: "left" }}>
         <ul>
           <li><code>wasm32-unknown-unknown</code>
           </li>
         </ul>
       </td>
-      <td style="text-align:left">
+      <td style={{ textAlign: "left" }}>
         <ul>
           <li><code>wasm32-unknown-unknown</code>
           </li>

website/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/project-setup.md

@@ -0,0 +1,142 @@
+---
+title: Introduction
+description: Set yourself up for success
+---
+
+# 始める
+
+## Rust
+
+まずはじめにRustが必要です。Rustとビルドツールの`cargo`をインストールするために、以下の[公式サイト](https://www.rust-lang.org/tools/install)
+を見てください。
+
+## **Wasm ビルドツール**
+
+WebAssemblyとJavaScriptの互換を持たせるために他にツールが必要です。さらに、選んだツールに応じてブラウザでアプリから`.wasm`ファイルを実行するのに
+必要なJavaScriptラッパーのコードを生成し、これによってデプロイやパッケージ化での頭痛の種を軽減させるのに役立ちます。
+
+### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/)
+
+Rust / Wasm活動チームによって開発されているCLIツールで、WebAssemblyをパッケージ化することができます。
+Webpackには[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin)が最もよく使われています。
+
+[`wasm-pack`で始める](project-setup/using-wasm-pack.md)
+
+### [**`wasm-bindgen`**](https://rustwasm.github.io/docs/wasm-bindgen/)
+
+Rust/Wasm活動チームによって開発されているライブラリとCLIツールで、JS / WebAssemblyの互換性を持たせるための低レベルなツールです
+(`wasm-pack`で内部的に使われています)。
+`wasm-bindgen`は手書きのJavaScriptでWebAssemblyのバイナリを使う必要があるため、直接使うのは非推奨です。
+しかし、詳細な情報については[**`wasm-bindgen` ガイド**](https://rustwasm.github.io/docs/wasm-bindgen/)から得られます。
+
+[`wasm-bindgen`で始める。](project-setup/using-wasm-bindgen.md)
+
+### [**`cargo-web`**](https://github.com/koute/cargo-web)
+
+`wasm-pack`と`wasm-bindgen`を導入する前は好まれたWebワークフローツールです。
+`wasm-pack`がサポートされていないサンプルを動かすのにインストールする価値があり、依然として**最もお手軽に**始められる方法です。
+
+[`cargo web`で始める](project-setup/using-cargo-web.md)
+
+### 比較
+
+<table>
+  <thead>
+    <tr>
+      <th style={{ textAlign: "left" }}></th>
+      <th style={{ textAlign: "left" }}><code>wasm-pack</code>
+      </th>
+      <th style={{ textAlign: "left" }}><code>wasm-bindgen</code>
+      </th>
+      <th style={{ textAlign: "left" }}><code>cargo-web</code>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style={{ textAlign: "left" }}>プロジェクトの進行状況</td>
+      <td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/">Rust / Wasm活動チーム</a>により活発にメンテナンス
+      </td>
+      <td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/">Rust / Wasm 活動チーム</a>により活発にメンテナンス
+      </td>
+      <td style={{ textAlign: "left" }}>6ヶ月間GitHubでの活発な活動無し</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}>開発体験</td>
+      <td style={{ textAlign: "left" }}>ほぼ大丈夫! <code>webpack</code>があればなお良い。</td>
+      <td
+      style={{ textAlign: "left" }}>だいたい大丈夫。開発においては少し流れを書かないといけない。</td>
+        <td style={{ textAlign: "left" }}>しっかり動く！完結していて、外部ライブラリに頼る必要無し。</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}>ローカルサーバー</td>
+      <td style={{ textAlign: "left" }}><code>webpack</code>プラグインによるサポートあり</td>
+      <td style={{ textAlign: "left" }}>サポート無し</td>
+      <td style={{ textAlign: "left" }}>サポートあり</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}>ローカル環境での変更による自動再ビルド</td>
+      <td style={{ textAlign: "left" }}><code>webpack</code>プラグインによるサポートあり</td>
+      <td style={{ textAlign: "left" }}>サポート無し</td>
+      <td style={{ textAlign: "left" }}>サポートあり</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}>ヘッドレスブラウザテスト</td>
+      <td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-pack/commands/test.html">サポートあり</a>
+      </td>
+      <td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html">サポートあり</a>
+      </td>
+      <td style={{ textAlign: "left" }}><a href="https://github.com/koute/cargo-web#features">サポートあり</a>
+      </td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}>サポートされているターゲット</td>
+      <td style={{ textAlign: "left" }}>
+        <ul>
+          <li><code>wasm32-unknown-unknown</code>
+          </li>
+        </ul>
+      </td>
+      <td style={{ textAlign: "left" }}>
+        <ul>
+          <li><code>wasm32-unknown-unknown</code>
+          </li>
+        </ul>
+      </td>
+      <td style={{ textAlign: "left" }}>
+        <ul>
+          <li><code>wasm32-unknown-unknown</code>
+          </li>
+          <li><code>wasm32-unknown-emscripten</code>
+          </li>
+          <li><code>asmjs-unknown-emscripten</code>
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}><code>web-sys</code></td>
+      <td style={{ textAlign: "left" }}>互換性あり</td>
+      <td style={{ textAlign: "left" }}>互換性あり</td>
+      <td style={{ textAlign: "left" }}>互換性無し</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}><code>stdweb</code></td>
+      <td style={{ textAlign: "left" }}>互換性あり</td>
+      <td style={{ textAlign: "left" }}>互換性あり</td>
+      <td style={{ textAlign: "left" }}>互換性あり</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "left" }}>使用例</td>
+      <td style={{ textAlign: "left" }}><a href="https://github.com/yewstack/yew-wasm-pack-minimal">入門用テンプレート</a>
+      </td>
+      <td style={{ textAlign: "left" }}>
+        Yewで<a href="https://github.com/yewstack/yew/blob/master/examples/build.sh">作る例</a>
+      </td>
+      <td style={{ textAlign: "left" }}>
+        Yewで<a href="https://www.github.com/yewstack/yew/tree/master/packages/yew-stdweb/examples">作る例</a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+