Prettier (#33)

Author: Dan Forbes

.github/workflows/main.yml

@@ -1,20 +1,19 @@
 name: Build App
 
-on: 
+on:
   push:
-    branches: 
+    branches:
       - master
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     steps:
-    - name: Run a one-line script
-      uses: peter-evans/repository-dispatch@v1
-      with:
-        token: ${{ secrets.ACCESS_TOKEN }}
-        repository: paritytech/substrate.io
-        event-type: content-update
-        client-payload: '{"ref": "${{ github.ref }}", "sha": "${{ github.sha }}"}'
+      - name: Run a one-line script
+        uses: peter-evans/repository-dispatch@v1
+        with:
+          token: ${{ secrets.ACCESS_TOKEN }}
+          repository: paritytech/substrate.io
+          event-type: content-update
+          client-payload: '{"ref": "${{ github.ref }}", "sha": "${{ github.sha }}"}'

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "proseWrap": "always"
+}

README.md

@@ -15,6 +15,16 @@ Feel free to add an issue if there is documentation that you'd like to see. See
 [contributing guide](https://github.com/substrate-developer-hub/knowledge-base/blob/master/CONTRIBUTING.md)
 for guidance on making PRs.
 
+### Prettier
+
+This repository uses [Prettier](https://prettier.io/) to ensure consistent formatting. Please run
+Prettier before submitting any changes to the files in this repository. Prettier ships as an
+[NPM](https://www.npmjs.com/) package, so NPM must installed to use it. Prettier can be installed
+globally with `npm i -g prettier` in which case you can run `prettier --write .` in the project
+root. If you prefer not to install Prettier you can run it on-the-fly with `npx prettier --write .`.
+In either case, the `.prettierrc.json` file that ships with repository will be used to ensure
+consistent formatting.
+
 ## License
 
 All documentation is under the

config.json

@@ -1,10 +1,10 @@
 {
-	"current_version": "v2.0.0-alpha.6",
-	"display_order": [
-		"create-your-first-substrate-chain",
-		"build-a-dapp",
-		"start-a-private-network",
-		"add-a-pallet",
-		"pallet-in-own-crate"
-	]
+  "current_version": "v2.0.0-alpha.6",
+  "display_order": [
+    "create-your-first-substrate-chain",
+    "build-a-dapp",
+    "start-a-private-network",
+    "add-a-pallet",
+    "pallet-in-own-crate"
+  ]
 }

tuts/add-a-pallet/config.json

@@ -1,11 +1,9 @@
 {
-	"slug": "config",
-	"lang": "en",
-	"title": "Add a Pallet to your Runtime",
-	"excerpt": "Add the contracts pallet to your Substrate node template",
-	"tags": [ "Medium", "2 Hours", "No Prerequisites" ],
-	"versions": [ "v2.0.0-alpha.6", "v2.0.0-alpha.5" ],
-	"menu": [
-		{ "title": "Add a Pallet", "slug": "index" }
-	]
+  "slug": "config",
+  "lang": "en",
+  "title": "Add a Pallet to your Runtime",
+  "excerpt": "Add the contracts pallet to your Substrate node template",
+  "tags": ["Medium", "2 Hours", "No Prerequisites"],
+  "versions": ["v2.0.0-alpha.6", "v2.0.0-alpha.5"],
+  "menu": [{ "title": "Add a Pallet", "slug": "index" }]
 }

tuts/add-a-pallet/v2.0.0-alpha.5/index.md

@@ -1,14 +1,14 @@
 {
-	"slug": "config",
-	"lang": "en",
-	"title": "Build a PoE Decentralized Application",
-	"excerpt": "Build a customized Substrate chain with its own user interface.",
-	"tags": [ "Easy", "< 1 Hour", "Prerequisites" ],
-	"versions": [ "v2.0.0-alpha.6", "v2.0.0-alpha.5" ],
-	"menu": [
-		{ "title": "Introduction", "slug": "index" },
-		{ "title": "Prepare to build a dApp", "slug": "prepare" },
-		{ "title": "Building a Custom Pallet", "slug": "pallet" },
-		{ "title": "Building a Custom Front End", "slug": "front-end" }
-	]
+  "slug": "config",
+  "lang": "en",
+  "title": "Build a PoE Decentralized Application",
+  "excerpt": "Build a customized Substrate chain with its own user interface.",
+  "tags": ["Easy", "< 1 Hour", "Prerequisites"],
+  "versions": ["v2.0.0-alpha.6", "v2.0.0-alpha.5"],
+  "menu": [
+    { "title": "Introduction", "slug": "index" },
+    { "title": "Prepare to build a dApp", "slug": "prepare" },
+    { "title": "Building a Custom Pallet", "slug": "pallet" },
+    { "title": "Building a Custom Front End", "slug": "front-end" }
+  ]
 }

tuts/add-a-pallet/v2.0.0-alpha.6/index.md

@@ -48,30 +48,28 @@ substrate-front-end-template
 
 Delete the contents of that file, and instead use the following component.
 
-
-
 ```js
 // React and Semantic UI elements.
-import React, { useState, useEffect } from 'react';
-import { Form, Input, Grid, Message } from 'semantic-ui-react';
+import React, { useState, useEffect } from "react";
+import { Form, Input, Grid, Message } from "semantic-ui-react";
 // Pre-built Substrate front-end utilities for connecting to a node
 // and making a transaction.
-import { useSubstrate } from './substrate-lib';
-import { TxButton } from './substrate-lib/components';
+import { useSubstrate } from "./substrate-lib";
+import { TxButton } from "./substrate-lib/components";
 // Polkadot-JS utilities for hashing data.
-import { blake2AsHex } from '@polkadot/util-crypto';
+import { blake2AsHex } from "@polkadot/util-crypto";
 
 // Our main Proof Of Existence Component which is exported.
-export default function ProofOfExistence (props) {
+export default function ProofOfExistence(props) {
   // Establish an API to talk to our Substrate node.
   const { api } = useSubstrate();
   // Get the "selected user" from the `AccountSelector` component.
   const { accountPair } = props;
   // React hooks for all the state variables we track.
   // Learn more at: https://reactjs.org/docs/hooks-intro.html
-  const [status, setStatus] = useState('');
-  const [digest, setDigest] = useState('');
-  const [owner, setOwner] = useState('');
+  const [status, setStatus] = useState("");
+  const [digest, setDigest] = useState("");
+  const [owner, setOwner] = useState("");
   const [block, setBlock] = useState(0);
 
   // Our `FileReader()` which is accessible from our functions below.
@@ -81,15 +79,15 @@ export default function ProofOfExistence (props) {
   const bufferToDigest = () => {
     // Turns the file content to a hexadecimal representation.
     const content = Array.from(new Uint8Array(fileReader.result))
-      .map(b => b.toString(16).padStart(2, '0'))
-      .join('');
+      .map((b) => b.toString(16).padStart(2, "0"))
+      .join("");
 
     const hash = blake2AsHex(content, 256);
     setDigest(hash);
   };
 
   // Callback function for when a new file is selected.
-  const handleFileChosen = file => {
+  const handleFileChosen = (file) => {
     fileReader = new FileReader();
     fileReader.onloadend = bufferToDigest;
     fileReader.readAsArrayBuffer(file);
@@ -103,23 +101,23 @@ export default function ProofOfExistence (props) {
     // This is a subscription, so it will always get the latest value,
     // even if it changes.
     api.query.templateModule
-      .proofs(digest, result => {
+      .proofs(digest, (result) => {
         // Our storage item returns a tuple, which is represented as an array.
         setOwner(result[0].toString());
         setBlock(result[1].toNumber());
       })
-      .then(unsub => {
+      .then((unsub) => {
         unsubscribe = unsub;
       });
 
     return () => unsubscribe && unsubscribe();
-  // This tells the React hook to update whenever the file digest changes
-  // (when a new file is chosen), or when the storage subscription says the
-  // value of the storage item has updated.
+    // This tells the React hook to update whenever the file digest changes
+    // (when a new file is chosen), or when the storage subscription says the
+    // value of the storage item has updated.
   }, [digest, api.query.templateModule]);
 
   // We can say a file digest is claimed if the stored block number is not 0.
-  function isClaimed () {
+  function isClaimed() {
     return block !== 0;
   }
 
@@ -132,10 +130,10 @@ export default function ProofOfExistence (props) {
         <Form.Field>
           {/* File selector with a callback to `handleFileChosen`. */}
           <Input
-            type='file'
+            type="file"
             id="file"
             label="Your File"
-            onChange={e => handleFileChosen(e.target.files[0])}
+            onChange={(e) => handleFileChosen(e.target.files[0])}
           />
           {/* Show this message if the file is available to be claimed */}
           <Message success header="File Digest Unclaimed" content={digest} />
@@ -152,7 +150,7 @@ export default function ProofOfExistence (props) {
           and not already claimed. Updates the `status`. */}
           <TxButton
             accountPair={accountPair}
-            label={'Create Claim'}
+            label={"Create Claim"}
             setStatus={setStatus}
             type="TRANSACTION"
             attrs={{ params: [digest], tx: api.tx.templateModule.createClaim }}
@@ -170,14 +168,13 @@ export default function ProofOfExistence (props) {
           />
         </Form.Field>
         {/* Status message about the transaction. */}
-        <div style={{ overflowWrap: 'break-word' }}>{status}</div>
+        <div style={{ overflowWrap: "break-word" }}>{status}</div>
       </Form>
     </Grid.Column>
   );
 }
 ```
 
-
 We won't walk you step by step through the creation of this component, but do look over the code
 comments to learn what each part is doing.
 
@@ -195,8 +192,8 @@ pallet, where this digest and the selected user account will be stored on chain.
 ![Claimed File](../assets/poe-claimed.png)
 
 If all went well, you should see a new `ClaimCreated` event appear in the Events component. The
-front-end automatically recognizes that your file is now claimed, and even gives you the option
-to revoke the claim if you want.
+front-end automatically recognizes that your file is now claimed, and even gives you the option to
+revoke the claim if you want.
 
 Remember, only the owner can revoke the claim! If you select another user account at the top, and
 you will see that the revoke option is disabled!
@@ -205,22 +202,25 @@ you will see that the revoke option is disabled!
 
 This is the end of our journey into creating a Proof of Existence blockchain.
 
-You have seen first hand how simple it can be to develop a brand new pallet and launch a
-custom blockchain using Substrate. Furthermore, we have shown you that the Substrate ecosystem
-provides you with the tools to quickly create responsive front-end experiences so users can interact
-with your blockchain.
+You have seen first hand how simple it can be to develop a brand new pallet and launch a custom
+blockchain using Substrate. Furthermore, we have shown you that the Substrate ecosystem provides you
+with the tools to quickly create responsive front-end experiences so users can interact with your
+blockchain.
 
 This tutorial chose to omit some of the specific details around development in order to keep this
 experience short and satisfying. However, we want you to keep learning!
 
-To learn much more detail about building on the front-end template, please try the [Front End Tutorial](tutorials/substrate-front-end/index.md). To learn more about building your own pallets, explore the [Substrate Recipes](https://substrate.dev/recipes).
+To learn much more detail about building on the front-end template, please try the
+[Front End Tutorial](tutorials/substrate-front-end/index.md). To learn more about building your own
+pallets, explore the [Substrate Recipes](https://substrate.dev/recipes).
 
 It would also be a good time to call out that your success on the Substrate framework will
-ultimately be limited on your ability to program in Rust. The [Rust
-Book](https://doc.rust-lang.org/book/) is a great resource for beginning and intermediate rust developers.
+ultimately be limited on your ability to program in Rust. The
+[Rust Book](https://doc.rust-lang.org/book/) is a great resource for beginning and intermediate rust
+developers.
 
-If you experienced any issues with this tutorial or want to provide feedback, feel free to [open a
-GitHub
-issue](https://github.com/substrate-developer-hub/substrate-developer-hub.github.io/issues/new) or reach out on [Riot](https://riot.im/app/#/room/!HzySYSaIhtyWrwiwEV:matrix.org).
+If you experienced any issues with this tutorial or want to provide feedback, feel free to
+[open a GitHub issue](https://github.com/substrate-developer-hub/substrate-developer-hub.github.io/issues/new)
+or reach out on [Riot](https://riot.im/app/#/room/!HzySYSaIhtyWrwiwEV:matrix.org).
 
 We can't wait to see what you build next!

tuts/build-a-dapp/config.json

@@ -4,32 +4,33 @@ lang: en
 title: Introduction
 ---
 
-In this tutorial, you will learn to create a custom ["Proof Of
-Existence"](https://en.wikipedia.org/wiki/Proof_of_Existence) dApp using the Substrate
+In this tutorial, you will learn to create a custom
+["Proof Of Existence"](https://en.wikipedia.org/wiki/Proof_of_Existence) dApp using the Substrate
 blockchain development framework.
 
-This tutorial should take you about **1 hour** to complete. We will be using the [Rust programming
-language](https://www.rust-lang.org/) and [ReactJS](https://reactjs.org/), but you do not need to
-know these to be able to complete this guide. We will provide you with working code snippets and
-explain what all the code does at a high level.
+This tutorial should take you about **1 hour** to complete. We will be using the
+[Rust programming language](https://www.rust-lang.org/) and [ReactJS](https://reactjs.org/), but you
+do not need to know these to be able to complete this guide. We will provide you with working code
+snippets and explain what all the code does at a high level.
 
 We only expect that:
 
-* You are generally familiar with software development, writing code, and running your code.
-* You have completed the [Creating Your First Substrate Chain Tutorial](tutorials/creating-your-first-substrate-chain/index.md).
-* You are open to learning about the bleeding edge of blockchain development.
+- You are generally familiar with software development, writing code, and running your code.
+- You have completed the
+  [Creating Your First Substrate Chain Tutorial](tutorials/creating-your-first-substrate-chain/index.md).
+- You are open to learning about the bleeding edge of blockchain development.
 
-If you run into an issue on this tutorial, **we are here to help!** You can [create a new
-issue](https://github.com/substrate-developer-hub/substrate-developer-hub.github.io/issues/new) or
-contact us on [Riot](https://riot.im/app/#/room/!HzySYSaIhtyWrwiwEV:matrix.org).
+If you run into an issue on this tutorial, **we are here to help!** You can
+[create a new issue](https://github.com/substrate-developer-hub/substrate-developer-hub.github.io/issues/new)
+or contact us on [Riot](https://riot.im/app/#/room/!HzySYSaIhtyWrwiwEV:matrix.org).
 
 ## What you will be doing
 
 Before we even get started, let's lay out what we are going to do over the course of this tutorial.
 We will:
 
 1. Launch a Substrate blockchain based on a template project.
-3. Modify this template project to add our own custom logic.
-4. Modify a front-end template to interact with your brand new blockchain.
+2. Modify this template project to add our own custom logic.
+3. Modify a front-end template to interact with your brand new blockchain.
 
 Sound reasonable? Good, then let's begin!