Format website with prettier

.github/workflows/build-website.yml

@@ -15,6 +15,7 @@ on:
 
 jobs:
   build:
+    name: Build Website
     runs-on: ubuntu-latest
     env:
       PR_INFO_FILE: ".PR_INFO"
@@ -26,10 +27,19 @@ jobs:
         with:
           node-version: "16"
 
-      - name: Check Translations
+      - name: Install dependencies
         run: |
           cd website
           npm install
+
+      - name: Run prettier
+        run: |
+          cd website
+          npm run fmt
+
+      - name: Check Translations
+        run: |
+          cd website
           npm run check-translations
 
       - name: Build

website/.prettierignore

@@ -0,0 +1,24 @@
+# Dependencies
+/node_modules
+
+# Production
+/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*
+
+# it messes these files
+README.md
+i18n/**/*.json

website/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true
+}

website/README.md

@@ -2,7 +2,7 @@
 
 This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
 
-Most of the content sits inside the [docs](docs) folder and the [versioned_docs](versioned_docs) folder in the form of 
+Most of the content sits inside the [docs](docs) folder and the [versioned_docs](versioned_docs) folder in the form of
 markdown.
 
 ## Installation
@@ -51,13 +51,13 @@ It helps docusaurus to extract those texts and compile them to `.json` files to
 get further translated in GitLocalize.
 
 ```jsx
-import Translate from '@docusaurus/Translate';
+import Translate from '@docusaurus/Translate'
 
 <h2>
     <Translate id="header.translation.id" description="the header description">
         This header will be translated
     </Translate>
-</h2>;
+</h2>
 ```
 
 If your pull request adds new `<Translation>` tags,

website/babel.config.js

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

website/blog/authors.yml

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

website/check-translations.js

@@ -1,37 +1,36 @@
-const {i18n: {locales}} = require('./docusaurus.config.js');
-const util = require('util');
-const exec = util.promisify(require('child_process').exec);
-const path = require('path');
-const fs = require('fs');
-const os = require('os');
-const dircompare = require('dir-compare');
+const {
+    i18n: { locales },
+} = require('./docusaurus.config.js')
+const util = require('util')
+const exec = util.promisify(require('child_process').exec)
+const path = require('path')
+const fs = require('fs')
+const os = require('os')
+const dircompare = require('dir-compare')
 const writeTranslations = require('./write-translations.js')
 
-
-const temp = fs.mkdtempSync(path.join(os.tmpdir(), 'yew-website-'));
-
+const temp = fs.mkdtempSync(path.join(os.tmpdir(), 'yew-website-'))
 
 async function main() {
-    await new Promise(resolve => {
-        fs.cp('i18n', temp, {recursive: true}, () => {
+    await new Promise((resolve) => {
+        fs.cp('i18n', temp, { recursive: true }, () => {
             resolve()
         })
     })
 
     await writeTranslations()
 
-    const result = await dircompare.compare(temp, 'i18n', {compareContent: true});
+    const result = await dircompare.compare(temp, 'i18n', {
+        compareContent: true,
+    })
     if (result.same) {
-        console.log("Translations unchanged");
+        console.log('Translations unchanged')
     } else {
-        console.error("Translations changed, please run `npm run write-translations` to generate the stubs");
-        process.exitCode = 1;
+        console.error(
+            'Translations changed, please run `npm run write-translations` to generate the stubs'
+        )
+        process.exitCode = 1
     }
 }
 
-main()
-    .catch(e => console.error(e))
-
-
-
-
+main().catch((e) => console.error(e))

website/community/external-libs.mdx

@@ -1,6 +1,6 @@
 ---
-title: "Libraries"
-description: "Libraries that can help with Yew development"
+title: 'Libraries'
+description: 'Libraries that can help with Yew development'
 ---
 
 ## Malvolio
@@ -18,12 +18,12 @@ with ease. It runs both on servers (and renders to strings) or in browsers (with
 [Gloo](https://crates.io/crates/gloo) is a modular toolkit for building fast, reliable Web applications and
 libraries with Rust and Wasm. Gloo provides ergonomic Rust APIs for working with:
 
-- [Console timers](https://crates.io/crates/gloo-console-timer)
-- [Dialogs](https://crates.io/crates/gloo-dialogs)
-- [Events](https://crates.io/crates/gloo-events)
-- [Files](https://crates.io/crates/gloo-file)
-- [Timers](https://crates.io/crates/gloo-timers)
-- [Web Storage](https://crates.io/crates/gloo-storage)
+-   [Console timers](https://crates.io/crates/gloo-console-timer)
+-   [Dialogs](https://crates.io/crates/gloo-dialogs)
+-   [Events](https://crates.io/crates/gloo-events)
+-   [Files](https://crates.io/crates/gloo-file)
+-   [Timers](https://crates.io/crates/gloo-timers)
+-   [Web Storage](https://crates.io/crates/gloo-storage)
 
 ## Reqwasm
 

website/docs/advanced-topics/children.mdx

@@ -1,10 +1,10 @@
 ---
-title: "Children"
+title: 'Children'
 ---
 
 ## General usage
 
-_Most of the time,_ when allowing a component to have children, you don't care 
+_Most of the time,_ when allowing a component to have children, you don't care
 what type of children the component has. In such cases, the below example will
 suffice.
 
@@ -40,6 +40,7 @@ impl Component for List {
 ## Advanced usage
 
 ### Typed children
+
 In cases where you want one type of component to be passed as children to your component,
 you can use `yew::html::ChildrenWithProps<T>`.
 
@@ -90,6 +91,7 @@ impl Component for List {
 ```
 
 ### Enum typed children
+
 Of course, sometimes you might need to restrict the children to a few different
 components. In these cases, you have to get a little more hands-on with Yew.
 
@@ -99,7 +101,7 @@ for better ergonomics. If you don't want to use it, you can manually implement
 
 ```rust
 use yew::{
-    html, html::ChildrenRenderer, virtual_dom::VChild, Component, 
+    html, html::ChildrenRenderer, virtual_dom::VChild, Component,
     Context, Html, Properties,
 };
 
@@ -181,11 +183,12 @@ impl Component for List {
 ```
 
 ### Optional typed child
-You can also have a single optional child component of a specific type too: 
+
+You can also have a single optional child component of a specific type too:
 
 ```rust
 use yew::{
-    html, html_nested, virtual_dom::VChild, Component, 
+    html, html_nested, virtual_dom::VChild, Component,
     Context, Html, Properties
 };
 
@@ -232,7 +235,7 @@ impl Component for Page {
     }
 }
 
-// The page component can be called either with the sidebar or without: 
+// The page component can be called either with the sidebar or without:
 
 pub fn render_page(with_sidebar: bool) -> Html {
     if with_sidebar {

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

@@ -1,14 +1,14 @@
 ---
-title: "How it works"
-description: "Low level details about the framework"
+title: 'How it works'
+description: 'Low level details about the framework'
 ---
 
 # Low-level library internals
 
 ## Under the hood of the `html!` macro
 
 The `html!` macro turns code written in a custom HTML-like syntax into valid Rust code. Using this
-macro is not necessary for developing Yew applications, but it is recommended. The code generated 
+macro is not necessary for developing Yew applications, but it is recommended. The code generated
 by this macro makes use of the public Yew library API which can be used directly if you wish. Note
 that some methods used are undocumented intentionally to avoid accidental misuse. With each
 update of `yew-macro`, the generated code will be more efficient and handle any breaking changes
@@ -31,10 +31,10 @@ sometimes clash with other code in an application. In order to prevent issues, `
 "hygiene" is adhered to. Some examples include:
 
 1. Instead of using `yew::<module>` the macro generates `::yew::<module>` to make sure that the
-Yew package is referenced correctly. This is also why `::alloc::vec::Vec::new()` is called instead
-of just `Vec::new()`.
+   Yew package is referenced correctly. This is also why `::alloc::vec::Vec::new()` is called instead
+   of just `Vec::new()`.
 2. Due to potential trait method name collisions, `<Type as Trait>` is used to make sure that we're
-using members from the correct trait.
+   using members from the correct trait.
 
 ## What is a virtual DOM?
 
@@ -56,7 +56,7 @@ This "diff" algorithm can be optimized over time to improve the performance of c
 Since Yew applications are run with WebAssembly, we believe that Yew has a competitive edge to adopt
 more sophisticated algorithms in the future.
 
-The Yew virtual DOM is not exactly one-to-one with the browser DOM. It also includes "lists" and 
+The Yew virtual DOM is not exactly one-to-one with the browser DOM. It also includes "lists" and
 "components" for organizing DOM elements. A list can simply be an ordered list of elements but can
 also be much more powerful. By annotating each list element with a "key", application developers
 can help Yew make additional optimizations to ensure that when a list changes, the least amount
@@ -65,9 +65,10 @@ indicate whether a re-render is required to help with performance.
 
 ## Yew scheduler and component-scoped event loop
 
-*Contribute to the docs – explain how `yew::scheduler` and `yew::html::scope` work in depth*
+_Contribute to the docs – explain how `yew::scheduler` and `yew::html::scope` work in depth_
 
 ## 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)
+
+-   [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)