Add ink!athon references & subpage (#278)

* fix: Improve `dApp` casing consistency

* feat: Improve `JSPackageHero`

* feat: Improve frontend overview & Add ink!athon reference

* feat: Add ink!athon subpage under third-party tools

* feat: Update & fix links

docs/examples/dapps.md

@@ -1,22 +1,22 @@
 ---
-title: Dapps
+title: DApps
 slug: /examples/dapps
 hide_title: true
 ---
 
 <img src="/img/title/balloons-2.svg" className="titlePic" />
 
-# Dapps
+# DApps
 
-We'll point to a couple full-stack Dapp examples here.
+We'll point to a couple full-stack dApp examples here.
 These can serve as inspiration for how to create a frontend for your
 smart contract.
 
 Three popular libraries for building frontends are:
 
-* [`useink`](/frontend/overview) an ergonomic React hooks library for interacting with Wasm contracts and Substrate.
-* [`polkadot-js/api`](https://github.com/polkadot-js/api) a low-level TypeScript API.
-* [useInkathon](https://github.com/scio-labs/use-inkathon) a React hooks library.
+- [`useink`](/frontend/overview) an ergonomic React hooks library for interacting with Wasm contracts and Substrate.
+- [`polkadot-js/api`](https://github.com/polkadot-js/api) a low-level TypeScript API.
+- [useInkathon](https://github.com/scio-labs/use-inkathon) a React hooks library.
 
 ## INK!athon
 
@@ -26,13 +26,13 @@ of an ink! smart contract and a React frontend using the
 
 ## link!
 
-link! is a URL shortener DApp. It consists of a frontend and an ink! contract.
+link! is a URL shortener dApp. It consists of a frontend and an ink! contract.
 
 link! uses [`polkadot-js/api`](https://github.com/polkadot-js/api) under the hood.
 The entire source code (contract + frontend) is located here:
 [https://github.com/paritytech/link](https://github.com/paritytech/link).
 
-You can view an online demo of the Dapp here: [https://tiny.ink](https://tiny.ink).
+You can view an online demo of the dApp here: [https://tiny.ink](https://tiny.ink).
 
 To create new short links you need `ROC` tokens from our testnet.
 See [here](/testnet) for how to get those.

docs/frontend/getting-started.md → docs/frontend/getting-started.mdx

@@ -5,7 +5,10 @@ slug: /frontend/getting-started
 description: Get started building frontend applications for ink! with useink
 ---
 
-# Getting Started
+import { BigCTA } from '../../src/components/BigCTA'
+
+# Getting Started with `useink`
+
 
 ## Installation
 
@@ -70,3 +73,15 @@ You can learn more about [chain configuration here](/frontend/configuration).
 ### You can now use all the features of useink
 
 Next, you can learn how to [connect to a browser wallet extension](/frontend/connect-wallet), or [see an example dApp](https://github.com/paritytech/useink-kitchen-sink/blob/master/frontend/src/components/pg-home/HomePage.tsx).
+
+
+## Community & Support
+
+<BigCTA
+  title="Element Chat"
+  emphasized="Join"
+  cta="the Conversation"
+  url="https://matrix.to/#/%23useink:parity.io"
+  tabIndex={0} 
+/>
+

docs/frontend/overview.mdx

@@ -5,6 +5,10 @@ slug: /frontend/overview
 description: Get started building with useink
 ---
 
+## Overview
+
+A frontend for ink! dApps is typically powered by `polkadot-js/api` packages and developed with the help of frameworks like React or Next.js. For further convenience, the ink! team has built the [`useink`](#useink) library abstracting away complexity of the underlying core libraries. As a great starting point for developing full-stack dApps with smart contracts and a pre-connected frontend, you can try the [ink!athon](/getting-started/inkathon) boilerplate built by the community.
+
 import { JSPackageHero } from '../../src/components/JSPackageHero'
 
 <JSPackageHero
@@ -13,22 +17,39 @@ import { JSPackageHero } from '../../src/components/JSPackageHero'
   subtitle="A React hooks library for ink!"
   orgNameAndRepo="paritytech/useink"
   packageName="useink"
+  chatUrl="https://matrix.to/#/%23useink:parity.io"
+  chatLogo="matrix"
 />
 
 <div className="max-w-2xl mx-auto text-center mb-12">
   <p>
     <b>useink</b> is a React library containing everything you need to build frontend applications for ink! contracts.
     It supports multi-chain connections and provides a number of ergonomic tools for rapid dApp development including
-    wallet connections, encoding and decoding contract calls and transactions, and accessing chain information.
+    wallet connections, encoding and decoding contract calls and transactions, and accessing chain information. <a href="/frontend/getting-started">
+      Get started.
+    </a>
   </p>
 </div>
 
-import { BigCTA } from '../../src/components/BigCTA'
+<hr className="opacity-20 mt-14 mb-0 max-w-2xl mx-auto" />
 
-<BigCTA
-  title="Element Chat"
-  emphasized="Join"
-  cta="the Conversation"
-  url="https://matrix.to/#/%23useink:parity.io"
-  tabIndex={0}
+<JSPackageHero
+  title="ink!athon"
+  logo="/img/inkathon-logo.svg"
+  subtitle="A full-stack dApp boilerplate for ink!"
+  orgNameAndRepo="scio-labs/inkathon"
+  chatUrl="https://t.me/inkathon" 
+  chatLogo="telegram"
 />
+
+<div className="max-w-2xl mx-auto text-center mb-12">
+  <p>
+    <b>ink!athon</b> is a starterkit for full-stack dApp development with ink! smart contracts and a React-based
+    frontend in one place. With convenient helper scripts and a pre-configured project setup, it lets
+    you scaffold any dApp quickly. It's developed by the same team that is behind <a href="https://azero.id" target="_blank">
+      AZERO.ID
+    </a>, where this boilerplate is used in production. <a href="/getting-started/inkathon">
+      Get started.
+    </a>
+  </p>
+</div>

docs/monthly-update/2022/04.md

@@ -50,12 +50,12 @@ We ‒ the developers working on ink!, Substrate's [`pallet-contracts`](https://
 and the [Contracts UI](https://github.com/paritytech/contracts-ui) ‒
 went on a team retreat in April. We discussed our roadmap for the rest
 of this year, as well as some technical designs of how we want to implement
-e.g.  XCM in ink!. We're normally working across different time zones, with
+e.g. XCM in ink!. We're normally working across different time zones, with
 some of us embracing the digital nomad lifestyle. Hence it was very
 productive to gather together for a week.
 
 We also did a little hackathon to do some dog-fooding: we've built a
-Dapp that makes use of all components by the above teams. We plan
+dApp that makes use of all components by the above teams. We plan
 to open source it soon, stay tuned for that 😎.
 
 There's a lot on the horizon and we're enthusiastic about the rest of this year!
@@ -86,4 +86,3 @@ room to make ink! and the [`pallet-contracts`](https://github.com/paritytech/sub
 as competitive as possible, as well as help parachain teams include those.
 This is not to say that we'll never get back to Canvas, but as of right now
 we're no longer working on this project.
-

docs/monthly-update/2022/10.md

@@ -14,7 +14,7 @@ of the bag!
 
 We were holding lectures on WebAssembly smart contracts as part
 of the Polkadot Blockchain Academy! This was the first, intentionally
-low-key, run of a Polkadot education program with an academic 
+low-key, run of a Polkadot education program with an academic
 focus. This first run was low-key to smooth out the edges and verify
 if our idea of a curriculum worked out in the real world.
 It did and there will be many more academies! Starting with the next
@@ -25,7 +25,7 @@ details on [http://dot.li/academy](http://dot.li/academy).
 
 ## Astar ported Uniswap v2 to ink! 💱
 
-Astar has published a showcase Dapp built with ink!:
+Astar has published a showcase dApp built with ink!:
 a Uniswap-V2 DEX. This is amazing and we can't wait to
 see where this is going!
 
@@ -42,18 +42,18 @@ For ink! `v4.0` and `cargo-contract` `v2.0` we decided to shift our
 target release date a bit, to January 2023. There are a number of
 reasons why we decided to do this:
 
-* We have made a number of breaking changes and want to wait until popular 
+- We have made a number of breaking changes and want to wait until popular
   user interfaces (like [`polkadot-js`](https://polkadot.js.org/apps/) or
   [`contracts-ui`](https://contracts-ui.substrate.io/)) support those.
-* We want to have a release candidate out for at least some weeks to give
+- We want to have a release candidate out for at least some weeks to give
   everyone the chance to already upgrade tooling and provide feedback.
-* We have an audit going on and would ideally like to incorporate more 
+- We have an audit going on and would ideally like to incorporate more
   of the results.
 
 A breaking change that has formed in the last weeks is that we
 will have to remove [`ink::env::random`](https://docs.rs/ink_env/3.3.1/ink_env/fn.random.html).
 This function allowed contract developers getting random entropy.
-There is unfortunately no way how this can be done safely enough 
+There is unfortunately no way how this can be done safely enough
 with built-in Substrate primitives on-chain currently. We're
 following the recommendation of our auditors to remove it.
 
@@ -81,7 +81,7 @@ Come by and talk to us if you're there!
 Web3 Foundation grant](https://github.com/w3f/Grants-Program/pull/1070)
 to get rid of `wasm-opt` as an external dependency for `cargo-contract`.
 
-This was a contribution that we looked forward to a lot. 
+This was a contribution that we looked forward to a lot.
 External dependencies cause so much user friction. For once, it's
 another manual step in the installation process, which is not always
 straight forward and different for each operating system.
@@ -104,7 +104,7 @@ write smart contracts for this pallet: [ask!](https://github.com/ask-lang/ask)
 
 Solang supports different blockchains as compiler targets, one
 of them being `pallet-contracts`. Our colleague [@xermicus](https://github.com/xermicus)
-is working full-time on this Substrate backend in Solang. 
+is working full-time on this Substrate backend in Solang.
 
 The project has now been incubated into the Hyperledger Foundation,
 hosted by the Linux Foundation. This is a big recognition for
@@ -114,4 +114,4 @@ In ink!, supporting a symbiotic interaction with Solidity contracts
 is an important part of the puzzle for us and we're looking forward
 to the next stages of Solang.
 
-More details can be found [in the announcement blog post](https://www.hyperledger.org/blog/2022/09/12/meet-hyperledger-solang-a-portable-solidity-compiler).
+More details can be found [in the announcement blog post](https://www.hyperledger.org/blog/2022/09/12/meet-hyperledger-solang-a-portable-solidity-compiler).

docs/third-party-tools/inkathon.mdx

@@ -0,0 +1,49 @@
+---
+title: ink!athon DApp Boilerplate
+slug: /getting-started/inkathon 
+---
+
+# ink!athon DApp Boilerplate
+
+ink!athon is a starter kit for full-stack dApp development with ink! smart contracts and a React-based frontend in one place. With convenient helper scripts and a pre-configured project setup, it lets you scaffold any dApp quickly. It's developed by the same team that is behind [AZERO.ID](https://azero.id), where this boilerplate is used in production.
+
+## Getting started
+
+* Try out an interactive example deployment under [inkathon.xyz](https://inkathon.xyz).
+* To get started with development, head over to the [ink!athon repository](https://github.com/scio-labs/inkathon) and check its README.
+
+## Workshop Video
+
+Get a quickstart into the boilerplate with this talk recording by [Dennis Zoma](https://twitter.com/dennis_zoma) at the sub0 Developer Conference in Lisbon 2023: **[Start Building dApps on ink!](https://www.youtube.com/watch?v=SoNLZfsd0mQ)** (46 min).
+
+[![inkathon Workshop Video Preview Image](/img/inkathon-workshop-video-preview.jpg)](https://www.youtube.com/watch?v=SoNLZfsd0mQ)
+
+## Architecture
+
+The starter kit is set up as a monorepo with two packages.
+
+* `packages/contracts`: ink! smart contracts with:
+  * `Greeter` example contract
+  * shorthand build & deploy scripts that export metadata and contract addresses
+  * pre-configured `substrate-contracts-node`
+  * extensible JS/TS `scripts/` setup
+* `packages/frontend`: Next.js frontend with:
+  * `polkadot-js/api` & `scio-labs/use-inkathon` dependencies 
+  * pre-configured to import deployments & addresses from above
+  * styling with tailwindcss and/or chakra-ui
+  * components for balance checking, wallet connection, network information, and sample contract interaction
+
+![inkathon Architecture Diagram](/img/inkathon-architecture.jpg)
+
+
+## Community & Support
+
+import { BigCTA } from '../../src/components/BigCTA'
+
+<BigCTA
+  title="Telegram Group"
+  emphasized="Join"
+  cta="the conversation"
+  url="https://t.me/inkathon"
+/>
+

i18n/es/docusaurus-plugin-content-docs/version-3.x/monthly-update/2022/04.md

@@ -50,12 +50,12 @@ We ‒ the developers working on ink!, Substrate's [`pallet-contracts`](https://
 and the [Contracts UI](https://github.com/paritytech/contracts-ui) ‒
 went on a team retreat in April. We discussed our roadmap for the rest
 of this year, as well as some technical designs of how we want to implement
-e.g.  XCM in ink!. We're normally working across different time zones, with
+e.g. XCM in ink!. We're normally working across different time zones, with
 some of us embracing the digital nomad lifestyle. Hence it was very
 productive to gather together for a week.
 
 We also did a little hackathon to do some dog-fooding: we've built a
-Dapp that makes use of all components by the above teams. We plan
+dApp that makes use of all components by the above teams. We plan
 to open source it soon, stay tuned for that 😎.
 
 There's a lot on the horizon and we're enthusiastic about the rest of this year!
@@ -86,4 +86,3 @@ room to make ink! and the [`pallet-contracts`](https://github.com/paritytech/sub
 as competitive as possible, as well as help parachain teams include those.
 This is not to say that we'll never get back to Canvas, but as of right now
 we're no longer working on this project.
-

sidebars.js

@@ -247,6 +247,7 @@ module.exports = {
       },
       // { "Swanky suite": ["third-party-tools/swanky/cli"] },
       "third-party-tools/ink-analyzer",
+      "third-party-tools/inkathon",
     ],
     FAQ: ["faq/faq", "faq/migrating-from-ink-3-to-4"],
     "Brand Assets": [

src/components/JSPackageHero/JSPackageHero.tsx

@@ -5,48 +5,59 @@ interface JSPackageHeroProps {
   title: string
   subtitle: string
   orgNameAndRepo: string // e.g. 'paritytech/useink'
-  packageName: string // e.g. 'useink'
+  packageName?: string // e.g. 'useink'
   logo?: string
+  chatUrl?: string
+  chatLogo?: string
 }
 
-export function JSPackageHero({ title, subtitle, packageName, orgNameAndRepo, logo }: JSPackageHeroProps) {
+export function JSPackageHero({ title, subtitle, packageName, orgNameAndRepo, logo, chatUrl, chatLogo }: JSPackageHeroProps) {
   return (
-    <header className="mb-10 flex flex-col items-center">
-      <div className="mt-8">
+    <header className="mb-4 flex flex-col items-center" id={title}>
+      <a href={`https://github.com/${orgNameAndRepo}`} target="_blank" rel="noreferrer" className="flex flex-col items-center !text-current hover:no-underline">
+      <div className="mt-12">
         <h1 className="sr-only">{title}</h1>
         {logo && <img src={logo} alt={title} className="w-28" />}
       </div>
 
       <h2 className="text-center text-lg mb-6 mt-0 md:!text-xl">{subtitle}</h2>
+      </a>
 
       <div className="flex flex-wrap gap-2 justify-center min-h-[3rem]">
-        <a aria-label="Version" href={`https://www.npmjs.com/package/${packageName}`} className="h-5">
+        {!!packageName && <a aria-label="Version" href={`https://www.npmjs.com/package/${packageName}`} className="h-5">
           <img
             alt={`${packageName} version`}
             src={`https://img.shields.io/npm/v/${packageName}?${toGithubLabel('Version')}`}
           />
-        </a>
+        </a>}
 
-        <a aria-label="License" href={`https://www.npmjs.com/package/${packageName}`} className="h-5">
+        {!!packageName && <a aria-label="Downloads" href={`https://www.npmjs.com/package/${packageName}`} className="h-5">
           <img
-            alt={`${packageName} license`}
-            src={`https://img.shields.io/github/license/${orgNameAndRepo}?${toGithubLabel('License')}`}
+            alt={`${packageName} downloads`}
+            src={`https://img.shields.io/npm/dm/${packageName}?${toGithubLabel('Downloads')}`}
           />
-        </a>
+        </a>}
 
-        <a aria-label="Downloads" href={`https://www.npmjs.com/package/${packageName}`} className="h-5">
+        <a aria-label="License" href={`https://github.com/${orgNameAndRepo}`} className="h-5">
           <img
-            alt={`${packageName} downloads`}
-            src={`https://img.shields.io/npm/dm/${packageName}?${toGithubLabel('Downloads')}`}
+            alt={`${orgNameAndRepo} license`}
+            src={`https://img.shields.io/github/license/${orgNameAndRepo}?${toGithubLabel('License')}`}
           />
         </a>
 
         <a aria-label="Stars" href={`https://github.com/${orgNameAndRepo}`} className="h-5">
           <img
-            alt={`${packageName} stars`}
+            alt={`${orgNameAndRepo} stars`}
             src={`https://img.shields.io/github/stars/${orgNameAndRepo}?${toGithubLabel('Stars')}`}
           />
         </a>
+
+        {!!chatUrl &&         <a aria-label="Chat" href={chatUrl} className="h-5">
+          <img
+            alt="Join the conversation"
+            src={`https://img.shields.io/badge/Join_the_conversation-_?color=e3e3e3&label=Chat${chatLogo ? `&logo=${chatLogo}&logoColor=e3e3e3` : ''}`}
+          />
+        </a>}
       </div>
     </header>
   )

src/components/pg-inkubator/EcosystemGrants.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
+import Canary from '../../../static/animations/ecosystem-canary.json'
+import CuttingEdge from '../../../static/animations/ecosystem-cutting-edge.json'
+import Infrastructure from '../../../static/animations/ecosystem-infra.json'
 import { BigCTA } from '../BigCTA'
 import { PillList } from '../PillList'
 import { ScrollPlayer } from '../ScrollPlayer'
-import CuttingEdge from '../../../static/animations/ecosystem-cutting-edge.json'
-import Canary from '../../../static/animations/ecosystem-canary.json'
-import Infrastructure from '../../../static/animations/ecosystem-infra.json'
-import { Config } from './config'
 import { ClosedNotice } from './ClosedNotice'
+import { Config } from './config'
 
 const CANARY_EXAMPLES = [
   { icon: '/img/DEX.svg', title: 'DEX' },
@@ -56,9 +56,9 @@ export const EcosystemGrants: React.FC = () => {
 
               <div className="md:max-w-2xl md:w-[55%]">
                 <h3 className="text-base opacity-[50%] uppercase font-montserrat w-full">Category 1</h3>
-                <h2 className="text-4xl opacity-90 font-semibold font-montserrat w-full">Canary Dapp</h2>
+                <h2 className="text-4xl opacity-90 font-semibold font-montserrat w-full">Canary DApp</h2>
                 <p className="mt-8 dark:text-white/70 text-black/70">
-                  A Canary dapp is one that could be deployed on to a value bearing network, but may not necessarily be
+                  A Canary dApp is one that could be deployed on to a value bearing network, but may not necessarily be
                   battle hardened enough for serious use cases. They are meant to be a step beyond simple tutorials
                   while still being self-contained enough to provide a useful reference for developers building
                   production grade dapps.