Update using-mac.md (celo-org#284)

* Update using-mac.md

* fix path

* fix link

* Update using-mac.md

* Update using-mac.md

* fix link & update docusaurus

* hideable sidebar

* add codeblock titles

* add codeblock file titles

docs/developer-resources/using-mac.md

@@ -154,27 +154,34 @@ Since the Celo Blockchain has [shared ancestry with Ethereum](/developer-guide/c
 
 Similar to how you might use a framework like React instead of vanilla JavaScript, you can use Truffle to abstract away a lot of the imperative details from Solidity (the language used to write smart contracts).
 
-**Install Truffle Version 5.4.0**
-
-Celo works best with truffle version 5.4.0. Install this specific version using the command below.
+**Install Truffle**
 
 ```shell
-npm install -g truffle@5.4.0
+npm install -g truffle
 ```
 
-If you have worked with Truffle in the past, you may have installed a version that is incompatible with Celo. Use the commands below to uninstall your current version so that you can install truffle version 5.4.0.
+**Confugring Truffle**
+
+You will need to configure Truffle to work with Celo. Connecting to Celo and managing transactions is easiest with [ContractKit](/developer-resources/contractkit/index.md). You can import contractkit directly into your `truffle.config.js` file in your Truffle project, add a private key and network details. You can see [this example config file](https://github.com/critesjosh/hello_contract-truffle/blob/master/truffle-config.js) for reference.
 
-Check Truffle Location
+The Truffle deployer may have trouble estimating the deployment transaction gas limit, for which you will receive an error like: 
 
 ```shell
-$ which truffle 
-/usr/local/bin/truffle
+Error:  *** Deployment Failed ***
+
+"Migrations" -- invalid argument 0: json: cannot unmarshal invalid hex string into Go value of type hexutil.Bytes.
 ```
 
-Remove Existing Installation
+You can resolve this by specifying the `gas` field in the network details in `truffle.config.js`. 
 
-```shell
-$ rm -f /usr/local/bin/truffle
+For example:
+
+```js
+alfajores: {
+  provider: kit.connection.web3.currentProvider,
+  network_id: 44787,                  
+  gas: 4000000,                        
+}
 ```
 
 ### Local Development Blockchain

docs/developer-resources/walkthroughs/hello-contract-remote-node.md

@@ -58,7 +58,7 @@ We will not go into the details of how to write Solidity in this exercise, but y
 
 The contract will just store a name for now:
 
-```solidity
+```solidity title="contracts/HelloWorld.sol"
 
 pragma solidity >=0.5.0 <0.8.0;
 
@@ -93,7 +93,7 @@ After compiling the contract, you need to create a migration to deploy the contr
 
 :::
 
-```javascript
+```javascript title="migrations/2_deploy_helloworld.js"
 var HelloWorld = artifacts.require('HelloWorld')
 
 module.exports = function (deployer) {
@@ -134,7 +134,7 @@ Run the createAccount.js script with:
 node createAccount.js
 ```
 
-```javascript
+```javascript title="createAccount.js"
 const Web3 = require("web3")
 const web3 = new Web3("http://localhost:8545")
 
@@ -151,7 +151,7 @@ If you go to the [Alfajores Faucet Page](https://celo.org/build/faucet), you can
 
 Before you can use truffle for the migration, you need to set up the proper configuration in `./truffle-config.js`.  At the top of `./truffle-config.js`, set up the `kit` by connecting to the test network and adding the account you just funded.
 
-```javascript
+```javascript title="truffle.config.js"
 const ContractKit = require('@celo/contractkit')
 const Web3 = require('web3')
 require('dotenv').config()
@@ -164,7 +164,7 @@ kit.connection.addAccount(process.env.PRIVATE_KEY)
 
 Then, in the `networks` object, you can add the initialized `kit`provider to an `alfajores` property.
 
-```javascript
+```javascript title="truffle.config.js"
   networks: {
     test: {
       host: "127.0.0.1",
@@ -209,7 +209,7 @@ const HelloWorld = require('./build/contracts/HelloWorld.json')
 
 You are finally ready to deploy the contract. Use the `kit`to create a custom transaction that includes the contract bytecode.
 
-```javascript
+```javascript title="celo_deploy.js"
 let tx = await kit.connection.sendTransaction({
     from: address,
     data: HelloWorld.bytecode // from ./build/contracts/HelloWorld.json
@@ -224,7 +224,7 @@ To deploy a contract on Celo, use the `kit.connection.sendTransaction()` functio
 
 The entire deployment script is about 20 lines of code.
 
-```javascript
+```javascript title="celo_deploy.js"
 const Web3 = require('web3')
 const ContractKit = require('@celo/contractkit')
 const web3 = new Web3('https://alfajores-forno.celo-testnet.org')
@@ -263,7 +263,7 @@ There are 3 functions defined in `helloWorld.js` that accomplish this.
 
 The first function, `initContract()`, reads the deployed contract information from the Truffle artifact at `HelloWorld.json`. With this information, you can create a new web3.js Contract instance:
 
-```javascript
+```javascript title="helloWorld.js"
 async function initContract(){
     // Check the Celo network ID
     const networkId = await web3.eth.net.getId()
@@ -286,7 +286,7 @@ After creating the contract instance, the `initContract()` function calls `getNa
 
 The `getName()` function will call, return and print the `getName()` function of the provided instance of the HelloWorld contract. 
 
-```javascript
+```javascript title="helloWorld.js"
 async function getName(instance){
     let name = await instance.methods.getName().call()
     console.log(name)
@@ -295,7 +295,7 @@ async function getName(instance){
 
 The `setName()` function is a bit more involved. First, it gets the account key from the provided `./secret` file, just like in `celo_deploy.js`. Then it creates a `txObject` that encodes a smart contract transaction call to `setName()` with the provided `newName` to the provided instance of the HelloWorld contract. Then the function sends the encoded transaction object to the network, waits for a reciept and prints it to the console. 
 
-```javascript
+```javascript title="helloWorld.js"
 async function setName(instance, newName){
 
     // Add your account to ContractKit to sign transactions

docs/developer-resources/walkthroughs/hellocelo.md

@@ -48,15 +48,15 @@ We will be writing our Node.js app in the `helloCelo.js` file.
 
 Import the contract kit into our script with
 
-```javascript
+```javascript title="helloCelo.js"
 // 1. Import web3 and contractkit 
 const Web3 = require("web3")
 const ContractKit = require('@celo/contractkit')
 ```
 
 Now we can use the ContractKit to connect to the test network.
 
-```javascript
+```javascript title="helloCelo.js"
 // 2. Init a new kit, connected to the alfajores testnet
 const web3 = new Web3('https://alfajores-forno.celo-testnet.org')
 const kit = ContractKit.newKitFromWeb3(web3)
@@ -80,7 +80,7 @@ The Celo blockchain has two native assets, CELO \(CELO\) and the Celo Dollar \(c
 
 Let's read some token balances from the blockchain. Add the following line in the `readAccount()` function.
 
-```javascript
+```javascript title="helloCelo.js"
 // 3. Get the token contract wrappers
 let celotoken = await kit.contracts.getGoldToken()
 let cUSDtoken = await kit.contracts.getStableToken()
@@ -89,7 +89,7 @@ let cEURtoken = await kit.contracts.getStableToken('cEUR')
 
 We can get the CELO balance of an account using the token wrappers like `goldtoken.balanceOf(address)`. Let's check the balance of this address `'0xD86518b29BB52a5DAC5991eACf09481CE4B0710d'`.
 
-```javascript
+```javascript title="helloCelo.js"
 // 4. Address to look up
 let anAddress = '0xD86518b29BB52a5DAC5991eACf09481CE4B0710d'
 
@@ -148,7 +148,7 @@ This is not the standard way of managing Celo accounts. In a production environm
 
 We can now use this `account` to get account information \(ie the private key and account address\) and to send transactions from `account.address`. Add the following code to read the account balance. Continue adding to `helloCelo.js`.
 
-```javascript
+```javascript title="helloCelo.js"
 //
 // Create an Account
 //
@@ -204,7 +204,7 @@ You may notice that the account balance is a bit smaller than the amount of toke
 
 Add the following code to the `send()` function in `helloCelo.js` to send a transaction.
 
-```javascript
+```javascript title="helloCelo.js"
 async function send(){
     // 10. Get your account
     let account = await getAccount()

docusaurus.config.js

@@ -303,6 +303,7 @@ module.exports = {
         ]
     ],
     themeConfig: {
+        hideableSidebar: true,
         prism: {
             additionalLanguages: ['solidity'],
             theme: require('prism-react-renderer/themes/dracula'),

package.json

@@ -17,12 +17,12 @@
   },
   "dependencies": {
     "@crowdin/cli": "^3.7.0",
-    "@docusaurus/core": "^2.0.0-beta.9",
-    "@docusaurus/plugin-client-redirects": "^2.0.0-beta.9",
-    "@docusaurus/preset-classic": "^2.0.0-beta.9",
-    "@docusaurus/theme-live-codeblock": "^2.0.0-beta.9",
-    "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.9",
-    "@docusaurus/theme-search-algolia": "^2.0.0-beta.9",
+    "@docusaurus/core": "^2.0.0-beta.14",
+    "@docusaurus/plugin-client-redirects": "^2.0.0-beta.14",
+    "@docusaurus/preset-classic": "^2.0.0-beta.14",
+    "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.14",
+    "@docusaurus/theme-live-codeblock": "^2.0.0-beta.14",
+    "@docusaurus/theme-search-algolia": "^2.0.0-beta.14",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "docusaurus-plugin-fathom": "^1.1.0",
@@ -46,7 +46,7 @@
     ]
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.0.0-beta.9",
+    "@docusaurus/module-type-aliases": "^2.0.0-beta.14",
     "@tsconfig/docusaurus": "^1.0.2",
     "@types/react": "^17.0.11",
     "@types/react-helmet": "^6.1.1",