Doc redesign: prettier lint

.eslintignore

@@ -0,0 +1,15 @@
+dist
+.cache
+.test
+node_modules
+.github
+.changeset
+scripts/reference/chainsToBe.json
+scripts/**/*.js
+data-source
+typechain-types
+.eleventy
+public/snippets
+public/search-index.json
+public/samples
+package.json

.eslintrc.js

@@ -2,8 +2,9 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
+    node: true,
   },
-  extends: ["standard", "prettier"],
+  extends: ["standard", "eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaVersion: "latest",

.github/workflows/test.yml

@@ -18,5 +18,9 @@ jobs:
       # TODO: fix css files throwing 404 errors
       - name: Check Links
         run: npm run linkcheck
-      - name: Check Solidity
-        run: npm run test
+      - name: Check Solidity Compilation
+        run: npm run sol:compile
+      - name: Check Solidity Solhint
+        run: npm run lint-solc
+      - name: Check Eslint
+        run: npm run lint

.gitignore

@@ -31,4 +31,6 @@ typechain-types/
 
 .tmp
 
-.cache
+.cache
+
+public/search-index.json

.husky/clear

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ""

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -1,7 +1,13 @@
 dist
+.cache
+.test
 node_modules
 .github
 .changeset
-*.md
-11ty
-public
+scripts/reference/chainsToBe.json
+scripts/**/*.js
+data-source
+typechain-types
+.eleventy
+public/snippets
+public/search-index.json

.prettierrc

@@ -1,6 +1,19 @@
 {
-    "semi": false,
-    "singleQuote": false,
-    "tabWidth": 2,
-    "trailingComma": "es5"
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 120,
+  "overrides": [
+    {
+      "files": "*.sol",
+      "options": {
+        "printWidth": 80,
+        "tabWidth": 4,
+        "useTabs": false,
+        "singleQuote": false,
+        "bracketSpacing": false
+      }
+    }
+  ]
 }

.solhint.json

@@ -0,0 +1,9 @@
+{
+  "extends": "solhint:recommended",
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "compiler-version": ["error", ">=0.4.0"],
+    "func-visibility": ["warn", { "ignoreConstructors": true }]
+  }
+}

.solhintignore

@@ -0,0 +1,4 @@
+node_modules
+data-source
+scripts
+src

.vscode/extensions.json

@@ -1,4 +1,10 @@
 {
-  "recommendations": ["astro-build.astro-vscode", "unifiedjs.vscode-mdx"],
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "NomicFoundation.hardhat-solidity",
+    "astro-build.astro-vscode",
+    "unifiedjs.vscode-mdx"
+  ],
   "unwantedRecommendations": []
 }

.vscode/settings.json

@@ -1,5 +1,17 @@
 {
   "files.associations": {
     "*.mdx": "mdx"
-  }
+  },
+  "editor.formatOnSave": true,
+  "solidity.formatter": "prettier", // This is the default so it might be missing.
+  "prettier.documentSelectors": ["**/*.astro"],
+  "[solidity]": {
+    "editor.defaultFormatter": "NomicFoundation.hardhat-solidity"
+  },
+  "[astro]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "eslint.enable": true,
+  "eslint.validate": ["javascript", "typescript"],
+  "eslint.alwaysShowStatus": true
 }

TEMPLATE.md

@@ -5,55 +5,57 @@ date: Last Modified
 title: "[insert title here]"
 permalink: "[insert path here]"
 excerpt: "Smart Contracts and Chainlink"
-whatsnext: {"[insert hyperlink title]":"insert path to hyperlink", "":""}
+whatsnext: { "[insert hyperlink title]": "insert path to hyperlink", "": "" }
 metadata:
   image:
     0: "insert image here"
 ---
-*This doc is meant to be used as a template for creating a tutorial doc. Contributors should emulate the structure of this document when creating new pages. The content of this doc comes from the [Getting Started Guides](https://github.com/smartcontractkit/documentation/tree/main/docs/Introduction/getting-started/).*
 
-*Prerequisites should have its own block at the beginning of the tutorial. Tell the user what tools are required, what knowledge they should already have, and where to go if they need previous reading. Provide links to the other docs pages.*
+_This doc is meant to be used as a template for creating a tutorial doc. Contributors should emulate the structure of this document when creating new pages. The content of this doc comes from the [Getting Started Guides](https://github.com/smartcontractkit/documentation/tree/main/docs/Introduction/getting-started/)._
+
+_Prerequisites should have its own block at the beginning of the tutorial. Tell the user what tools are required, what knowledge they should already have, and where to go if they need previous reading. Provide links to the other docs pages._
 
 > 📘 Prerequisites
 >
 > This tutorial requires .... If you're unfamiliar with these concepts, follow ...
 > or
 > New to []? We'll walk you through...
 
-*If a tutorial has a corresponding YouTube tutorial, link it at the beginning of the page.*
+_If a tutorial has a corresponding YouTube tutorial, link it at the beginning of the page._
+
 <p>
   https://www.youtube.com/watch?v=rFXSEEQG9YE
 </p>
 
-*If a portion of the YouTube video is deprecated or out-of-date, add a note alerting the user.*
+_If a portion of the YouTube video is deprecated or out-of-date, add a note alerting the user._
 
 > 🚧 The video uses a seed phrase to request randomness. This feature is deprecated. Refer to the code in this tutorial for the most up to date procedures.
 
 # Overview
 
-*Write 1-4 sentences on what this tutorial covers. Focus on the end result of the tutorial and the overarching concepts a user will learn and implement. Throughout the entire document, use second person singular (you). This should be consistent throughout the entire document, but exceptions can be made. Avoid passive voice as well. Remember, anyone reading the tutorial should interpret it as a source of truth. Make sure to write in a voice which is factual and objective.*
+_Write 1-4 sentences on what this tutorial covers. Focus on the end result of the tutorial and the overarching concepts a user will learn and implement. Throughout the entire document, use second person singular (you). This should be consistent throughout the entire document, but exceptions can be made. Avoid passive voice as well. Remember, anyone reading the tutorial should interpret it as a source of truth. Make sure to write in a voice which is factual and objective._
 
-*Example:*
+_Example:_
 In this tutorial, you will write and deploy a Chainlink smart contract to an Ethereum testnet.
 
 **Topics**
 
-*Table of contents are generated automatically using vscode markdown: https://github.com/yzhang-gh/vscode-markdown make sure settings are changed so that only header1 are in TOC.*
+_Table of contents are generated automatically using vscode markdown: https://github.com/yzhang-gh/vscode-markdown make sure settings are changed so that only header1 are in TOC._
 
-+ [1. What are smart contracts? What are data feeds?](#1-what-are-smart-contracts-what-are-data-feeds)
-+ [2. What language is a smart contract written in?](#2-what-language-is-a-smart-contract-written-in)
-+ [3. What does a smart contract look like?](#3-what-does-a-smart-contract-look-like)
-+ [4. Further Reading](#4-further-reading)
+- [1. What are smart contracts? What are data feeds?](#1-what-are-smart-contracts-what-are-data-feeds)
+- [2. What language is a smart contract written in?](#2-what-language-is-a-smart-contract-written-in)
+- [3. What does a smart contract look like?](#3-what-does-a-smart-contract-look-like)
+- [4. Further Reading](#4-further-reading)
 
-*Remember to number each main header and use questions when possible. Make questions succinct and bold key terms in the answers. Link to relevant articles where possible and make sure there are no gaps in learning. Users should be able to use the article as a source of truth and not have to rely on external searches to understand the material of the article. Example:*
+_Remember to number each main header and use questions when possible. Make questions succinct and bold key terms in the answers. Link to relevant articles where possible and make sure there are no gaps in learning. Users should be able to use the article as a source of truth and not have to rely on external searches to understand the material of the article. Example:_
 
 # 1. What are smart contracts? What are data feeds?
 
 When deployed to a blockchain, a **smart contract** is a set of instructions that can be executed without intervention from third parties. The code of a smart contract determines how it responds to input, just like the code of any other computer program.
 
 A valuable feature of smart contracts is that they can store and manage on-chain assets (like [ETH or ERC20 tokens](https://ethereum.org/en/developers/docs/standards/tokens/erc-20/)), just like you can with an Ethereum wallet. Because they have an on-chain address like a wallet, they can do everything any other address can. This opens the door for programming automated actions when receiving and transferring assets.
 
-*Notice how users are given external links to read more about concepts such as ETH or ERC20 tokens. They do not have to undertake a separate search.*
+_Notice how users are given external links to read more about concepts such as ETH or ERC20 tokens. They do not have to undertake a separate search._
 
 Smart contracts can connect to real-world market prices of assets to produce powerful applications. Chainlink's **[Data Feeds](/data-feeds/)** feature allows users to quickly and securely connect smart contracts to such assets in a single call.
 
@@ -63,27 +65,28 @@ Smart contracts can connect to real-world market prices of assets to produce pow
 
 # 3. What does a smart contract look like?
 
-*For code samples, be thorough. Redundancy is better than assuming the user have sufficient knowledge on a certain topic. Create markdown code samples wherever  applicable. Provide a detailed explanation about what each code sample does.*
+_For code samples, be thorough. Redundancy is better than assuming the user have sufficient knowledge on a certain topic. Create markdown code samples wherever applicable. Provide a detailed explanation about what each code sample does._
 
 The structure of a smart contract is similar to that of a _class_ in Javascript, with a few differences. Let's take a look at this `HelloWorld` example.
 
 ```solidity
 pragma solidity 0.8.7;
 
 contract HelloWorld {
-    string public message;
+  string public message;
 
-    constructor(string memory initialMessage) {
-        message = initialMessage;
-    }
+  constructor(string memory initialMessage) {
+    message = initialMessage;
+  }
 
-    function updateMessage(string memory newMessage) public {
-        message = newMessage;
-    }
+  function updateMessage(string memory newMessage) public {
+    message = newMessage;
+  }
 }
+
 ```
 
-*Subheadings don't need to be numbered. If a step of the tutorial doesn't need its own heading, it's best to make a subheading. Example:*
+_Subheadings don't need to be numbered. If a step of the tutorial doesn't need its own heading, it's best to make a subheading. Example:_
 
 ## Define the Version
 
@@ -93,12 +96,14 @@ You can see the latest versions of the Solidity compiler [here](https://github.c
 
 ```solidity
 pragma solidity >=0.7.0 <0.9.0;
+
 ```
+
 This means that the code is written for Solidity version 0.7.0, or a newer version of the language up to, but not including version 0.9.0. The `pragma` selects the compiler, which defines how the code is treated.
 
 ...
 
-*As a final step, include further reading with relevant blog posts and link users to other tutorials. Example:*
+_As a final step, include further reading with relevant blog posts and link users to other tutorials. Example:_
 
 # 4. Further Reading
 

integrations/solidity-remix.ts

@@ -36,8 +36,7 @@ function remarkSolidityRemix(): unified.Plugin<[], mdast.Root> {
       if (node.type !== "leafDirective") return
       const type = node.name
       if (type !== "solidity-remix") return
-      if (node.children.length !== 1)
-        throw Error("solidityRemix leafDirective can only have 1 child")
+      if (node.children.length !== 1) throw Error("solidityRemix leafDirective can only have 1 child")
 
       // remark-directive converts a container’s “label” to a paragraph in
       // its children, but we want to pass it as the src prop to <CodeSample>, so