Documentation Improvements (#2391)

* the app crashes

* update the button

* API button

* Tutorial button

* Tutorial sidebar on next

* blog

* write-translations

website/blog/2022-01-20-hello-yew.md

@@ -0,0 +1,10 @@
+---
+title: Hello Yew
+authors: [hamza]
+---
+
+This is the first Yew blog post.
+
+<!--truncate-->
+
+Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly.

website/blog/authors.yml

@@ -0,0 +1,5 @@
+hamza:
+  name: Muhammad Hamza
+  title: Maintainer of Yew
+  url: https://github.com/hamza1311
+  image_url: https://github.com/hamza1311.png

website/docusaurus.config.js

@@ -1,3 +1,7 @@
+const { API_BUTTON } = require('./src/constants');
+
+const editUrl = 'https://github.com/yewstack/yew/blob/master/website/';
+
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
   title: 'Yew',
@@ -33,16 +37,27 @@ module.exports = {
           label: 'Docs',
         },
         {
-          docsPluginId: 'community',
           type: 'doc',
           position: 'left',
+          docId: 'tutorial/index',
+          label: 'Tutorial',
+        },
+        {
+          docsPluginId: 'community',
+          type: 'doc',
+          position: 'right',
           docId: 'awesome',
           label: 'Community',
         },
+        {
+          position: 'right',
+          to: 'blog',
+          label: 'Blog',
+        },
         {
           href: 'https://docs.rs/yew',
           position: 'right',
-          label: 'API',
+          label: API_BUTTON,
         },
         {
           href: 'https://github.com/yewstack/yew',
@@ -118,7 +133,7 @@ module.exports = {
       {
         path: 'docs',
         sidebarPath: require.resolve('./sidebars/docs.js'),
-        editUrl: 'https://github.com/yewstack/yew/blob/master/website/',
+        editUrl,
         routeBasePath: '/docs',
       }
     ],
@@ -129,8 +144,17 @@ module.exports = {
         path: 'community',
         sidebarPath: require.resolve('./sidebars/community.js'),
         routeBasePath: '/community',
+        editUrl,
       }
     ],
+    [
+      '@docusaurus/plugin-content-blog',
+      {
+        path: 'blog',
+        blogTitle: 'Yew Blog',
+        editUrl,
+      },
+    ],
     [
       'client-redirects',
       {

website/i18n/ja/docusaurus-plugin-content-blog/options.json

@@ -0,0 +1,14 @@
+{
+  "title": {
+    "message": "Yew Blog",
+    "description": "The title for the blog used in SEO"
+  },
+  "description": {
+    "message": "Blog",
+    "description": "The description for the blog used in SEO"
+  },
+  "sidebar.title": {
+    "message": "Recent posts",
+    "description": "The label for the left sidebar"
+  }
+}

website/i18n/ja/docusaurus-plugin-content-docs/current.json

@@ -78,5 +78,81 @@
   "sidebar.sidebar.category.yew-router": {
     "message": "yew-router",
     "description": "The label for category yew-router in sidebar sidebar"
+  },
+  "sidebar.docs.category.Getting Started": {
+    "message": "Getting Started",
+    "description": "The label for category Getting Started in sidebar docs"
+  },
+  "sidebar.docs.category.Concepts": {
+    "message": "Concepts",
+    "description": "The label for category Concepts in sidebar docs"
+  },
+  "sidebar.docs.category.Concepts.link.generated-index.title": {
+    "message": "Yew concepts",
+    "description": "The generated-index page title for category Concepts in sidebar docs"
+  },
+  "sidebar.docs.category.Concepts.link.generated-index.description": {
+    "message": "Learn about the important Yew concepts!",
+    "description": "The generated-index page description for category Concepts in sidebar docs"
+  },
+  "sidebar.docs.category.Components": {
+    "message": "Components",
+    "description": "The label for category Components in sidebar docs"
+  },
+  "sidebar.docs.category.HTML": {
+    "message": "HTML",
+    "description": "The label for category HTML in sidebar docs"
+  },
+  "sidebar.docs.category.Function Components": {
+    "message": "Function Components",
+    "description": "The label for category Function Components in sidebar docs"
+  },
+  "sidebar.docs.category.wasm-bindgen": {
+    "message": "wasm-bindgen",
+    "description": "The label for category wasm-bindgen in sidebar docs"
+  },
+  "sidebar.docs.category.wasm-bindgen.link.generated-index.title": {
+    "message": "wasm-bindgen",
+    "description": "The generated-index page title for category wasm-bindgen in sidebar docs"
+  },
+  "sidebar.docs.category.wasm-bindgen.link.generated-index.description": {
+    "message": "Learn about wasm-bindgen",
+    "description": "The generated-index page description for category wasm-bindgen in sidebar docs"
+  },
+  "sidebar.docs.category.Advanced topics": {
+    "message": "Advanced topics",
+    "description": "The label for category Advanced topics in sidebar docs"
+  },
+  "sidebar.docs.category.Advanced topics.link.generated-index.title": {
+    "message": "Advanced topics",
+    "description": "The generated-index page title for category Advanced topics in sidebar docs"
+  },
+  "sidebar.docs.category.Advanced topics.link.generated-index.description": {
+    "message": "Learn about the advanced topics and inner workings of Yew!",
+    "description": "The generated-index page description for category Advanced topics in sidebar docs"
+  },
+  "sidebar.docs.category.More": {
+    "message": "More",
+    "description": "The label for category More in sidebar docs"
+  },
+  "sidebar.docs.category.More.link.generated-index.title": {
+    "message": "Miscellaneous",
+    "description": "The generated-index page title for category More in sidebar docs"
+  },
+  "sidebar.docs.category.Migration guides": {
+    "message": "Migration guides",
+    "description": "The label for category Migration guides in sidebar docs"
+  },
+  "sidebar.docs.category.yew": {
+    "message": "yew",
+    "description": "The label for category yew in sidebar docs"
+  },
+  "sidebar.docs.category.yew-agent": {
+    "message": "yew-agent",
+    "description": "The label for category yew-agent in sidebar docs"
+  },
+  "sidebar.docs.category.yew-router": {
+    "message": "yew-router",
+    "description": "The label for category yew-router in sidebar docs"
   }
 }

website/i18n/ja/docusaurus-theme-classic/navbar.json

@@ -18,5 +18,13 @@
   "item.label.Community": {
     "message": "Community",
     "description": "Navbar item with label Community"
+  },
+  "item.label.Tutorial": {
+    "message": "Tutorial",
+    "description": "Navbar item with label Tutorial"
+  },
+  "item.label.Blog": {
+    "message": "Blog",
+    "description": "Navbar item with label Blog"
   }
 }

website/i18n/zh-CN/docusaurus-plugin-content-blog/options.json

@@ -0,0 +1,14 @@
+{
+  "title": {
+    "message": "Yew Blog",
+    "description": "The title for the blog used in SEO"
+  },
+  "description": {
+    "message": "Blog",
+    "description": "The description for the blog used in SEO"
+  },
+  "sidebar.title": {
+    "message": "Recent posts",
+    "description": "The label for the left sidebar"
+  }
+}

website/i18n/zh-CN/docusaurus-plugin-content-docs/current.json

@@ -78,5 +78,81 @@
   "sidebar.sidebar.category.yew-router": {
     "message": "yew-router",
     "description": "The label for category yew-router in sidebar sidebar"
+  },
+  "sidebar.docs.category.Getting Started": {
+    "message": "Getting Started",
+    "description": "The label for category Getting Started in sidebar docs"
+  },
+  "sidebar.docs.category.Concepts": {
+    "message": "Concepts",
+    "description": "The label for category Concepts in sidebar docs"
+  },
+  "sidebar.docs.category.Concepts.link.generated-index.title": {
+    "message": "Yew concepts",
+    "description": "The generated-index page title for category Concepts in sidebar docs"
+  },
+  "sidebar.docs.category.Concepts.link.generated-index.description": {
+    "message": "Learn about the important Yew concepts!",
+    "description": "The generated-index page description for category Concepts in sidebar docs"
+  },
+  "sidebar.docs.category.Components": {
+    "message": "Components",
+    "description": "The label for category Components in sidebar docs"
+  },
+  "sidebar.docs.category.HTML": {
+    "message": "HTML",
+    "description": "The label for category HTML in sidebar docs"
+  },
+  "sidebar.docs.category.Function Components": {
+    "message": "Function Components",
+    "description": "The label for category Function Components in sidebar docs"
+  },
+  "sidebar.docs.category.wasm-bindgen": {
+    "message": "wasm-bindgen",
+    "description": "The label for category wasm-bindgen in sidebar docs"
+  },
+  "sidebar.docs.category.wasm-bindgen.link.generated-index.title": {
+    "message": "wasm-bindgen",
+    "description": "The generated-index page title for category wasm-bindgen in sidebar docs"
+  },
+  "sidebar.docs.category.wasm-bindgen.link.generated-index.description": {
+    "message": "Learn about wasm-bindgen",
+    "description": "The generated-index page description for category wasm-bindgen in sidebar docs"
+  },
+  "sidebar.docs.category.Advanced topics": {
+    "message": "Advanced topics",
+    "description": "The label for category Advanced topics in sidebar docs"
+  },
+  "sidebar.docs.category.Advanced topics.link.generated-index.title": {
+    "message": "Advanced topics",
+    "description": "The generated-index page title for category Advanced topics in sidebar docs"
+  },
+  "sidebar.docs.category.Advanced topics.link.generated-index.description": {
+    "message": "Learn about the advanced topics and inner workings of Yew!",
+    "description": "The generated-index page description for category Advanced topics in sidebar docs"
+  },
+  "sidebar.docs.category.More": {
+    "message": "More",
+    "description": "The label for category More in sidebar docs"
+  },
+  "sidebar.docs.category.More.link.generated-index.title": {
+    "message": "Miscellaneous",
+    "description": "The generated-index page title for category More in sidebar docs"
+  },
+  "sidebar.docs.category.Migration guides": {
+    "message": "Migration guides",
+    "description": "The label for category Migration guides in sidebar docs"
+  },
+  "sidebar.docs.category.yew": {
+    "message": "yew",
+    "description": "The label for category yew in sidebar docs"
+  },
+  "sidebar.docs.category.yew-agent": {
+    "message": "yew-agent",
+    "description": "The label for category yew-agent in sidebar docs"
+  },
+  "sidebar.docs.category.yew-router": {
+    "message": "yew-router",
+    "description": "The label for category yew-router in sidebar docs"
   }
 }

website/i18n/zh-CN/docusaurus-theme-classic/navbar.json

@@ -18,5 +18,13 @@
   "item.label.Community": {
     "message": "Community",
     "description": "Navbar item with label Community"
+  },
+  "item.label.Tutorial": {
+    "message": "Tutorial",
+    "description": "Navbar item with label Tutorial"
+  },
+  "item.label.Blog": {
+    "message": "Blog",
+    "description": "Navbar item with label Blog"
   }
 }

website/i18n/zh-TW/docusaurus-plugin-content-blog/options.json

@@ -0,0 +1,14 @@
+{
+  "title": {
+    "message": "Yew Blog",
+    "description": "The title for the blog used in SEO"
+  },
+  "description": {
+    "message": "Blog",
+    "description": "The description for the blog used in SEO"
+  },
+  "sidebar.title": {
+    "message": "Recent posts",
+    "description": "The label for the left sidebar"
+  }
+}

website/i18n/zh-TW/docusaurus-plugin-content-docs/current.json

@@ -78,5 +78,81 @@
   "sidebar.sidebar.category.yew-router": {
     "message": "yew-router",
     "description": "The label for category yew-router in sidebar sidebar"
+  },
+  "sidebar.docs.category.Getting Started": {
+    "message": "Getting Started",
+    "description": "The label for category Getting Started in sidebar docs"
+  },
+  "sidebar.docs.category.Concepts": {
+    "message": "Concepts",
+    "description": "The label for category Concepts in sidebar docs"
+  },
+  "sidebar.docs.category.Concepts.link.generated-index.title": {
+    "message": "Yew concepts",
+    "description": "The generated-index page title for category Concepts in sidebar docs"
+  },
+  "sidebar.docs.category.Concepts.link.generated-index.description": {
+    "message": "Learn about the important Yew concepts!",
+    "description": "The generated-index page description for category Concepts in sidebar docs"
+  },
+  "sidebar.docs.category.Components": {
+    "message": "Components",
+    "description": "The label for category Components in sidebar docs"
+  },
+  "sidebar.docs.category.HTML": {
+    "message": "HTML",
+    "description": "The label for category HTML in sidebar docs"
+  },
+  "sidebar.docs.category.Function Components": {
+    "message": "Function Components",
+    "description": "The label for category Function Components in sidebar docs"
+  },
+  "sidebar.docs.category.wasm-bindgen": {
+    "message": "wasm-bindgen",
+    "description": "The label for category wasm-bindgen in sidebar docs"
+  },
+  "sidebar.docs.category.wasm-bindgen.link.generated-index.title": {
+    "message": "wasm-bindgen",
+    "description": "The generated-index page title for category wasm-bindgen in sidebar docs"
+  },
+  "sidebar.docs.category.wasm-bindgen.link.generated-index.description": {
+    "message": "Learn about wasm-bindgen",
+    "description": "The generated-index page description for category wasm-bindgen in sidebar docs"
+  },
+  "sidebar.docs.category.Advanced topics": {
+    "message": "Advanced topics",
+    "description": "The label for category Advanced topics in sidebar docs"
+  },
+  "sidebar.docs.category.Advanced topics.link.generated-index.title": {
+    "message": "Advanced topics",
+    "description": "The generated-index page title for category Advanced topics in sidebar docs"
+  },
+  "sidebar.docs.category.Advanced topics.link.generated-index.description": {
+    "message": "Learn about the advanced topics and inner workings of Yew!",
+    "description": "The generated-index page description for category Advanced topics in sidebar docs"
+  },
+  "sidebar.docs.category.More": {
+    "message": "More",
+    "description": "The label for category More in sidebar docs"
+  },
+  "sidebar.docs.category.More.link.generated-index.title": {
+    "message": "Miscellaneous",
+    "description": "The generated-index page title for category More in sidebar docs"
+  },
+  "sidebar.docs.category.Migration guides": {
+    "message": "Migration guides",
+    "description": "The label for category Migration guides in sidebar docs"
+  },
+  "sidebar.docs.category.yew": {
+    "message": "yew",
+    "description": "The label for category yew in sidebar docs"
+  },
+  "sidebar.docs.category.yew-agent": {
+    "message": "yew-agent",
+    "description": "The label for category yew-agent in sidebar docs"
+  },
+  "sidebar.docs.category.yew-router": {
+    "message": "yew-router",
+    "description": "The label for category yew-router in sidebar docs"
   }
 }

website/i18n/zh-TW/docusaurus-theme-classic/navbar.json

@@ -18,5 +18,13 @@
   "item.label.Community": {
     "message": "Community",
     "description": "Navbar item with label Community"
+  },
+  "item.label.Tutorial": {
+    "message": "Tutorial",
+    "description": "Navbar item with label Tutorial"
+  },
+  "item.label.Blog": {
+    "message": "Blog",
+    "description": "Navbar item with label Blog"
   }
 }

website/sidebars/docs.js

@@ -8,11 +8,7 @@
  */
 
 module.exports = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
+  docs: [
-  // conceptsSidebar: [{type: 'autogenerated', dirName: '.'}],
-
-  // But you can create a sidebar manually
-  sidebar: [
     {
       type: "category",
       label: "Getting Started",
@@ -141,6 +137,6 @@ module.exports = {
         },
       ],
     },
-    "tutorial",
   ],
+  api: [{type: 'autogenerated', dirName: 'tutorial'}],
 };

website/src/constants.js

@@ -0,0 +1,3 @@
+module.exports = {
+    API_BUTTON: 'API',
+}

website/src/theme/NavbarItem/DefaultNavbarItem.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+export * from '@theme-original/NavbarItem/DefaultNavbarItem';
+import OriginalNavbarItem from '@theme-original/NavbarItem/DefaultNavbarItem';
+import {API_BUTTON} from "../../constants.js";
+import {useLocation} from "@docusaurus/router";
+
+const regex = /\/docs\/(0.([0-9]+)(\.[0-9]+)?|next)?/;
+
+const useVersion = () => {
+    const location = useLocation();
+    const match = location.pathname.match(regex)
+    return match ? match[1] ?? '' : ''
+}
+
+export default function DefaultNavbarItem(props) {
+    const version = useVersion()
+
+    if (props.label === API_BUTTON) {
+        const href = version === 'next' ? 'https://yew-rs-api.web.app/next/yew' : `https://docs.rs/yew/${version}`
+        return <OriginalNavbarItem {...props} href={href} />
+    }
+
+    return (
+        <OriginalNavbarItem {...props}  />
+    )
+}

website/versioned_sidebars/version-0.19.0-sidebars.json

@@ -271,10 +271,6 @@
       ],
       "collapsible": true,
       "collapsed": true
-    },
-    {
-      "type": "doc",
-      "id": "version-0.19.0/tutorial"
     }
   ]
 }