feat: General onboarding article for developers want to use KodaDot

CONTRIBUTING.md

@@ -17,7 +17,7 @@ Before you being:
 - We utilize [**Node.js**](https://nodejs.org) as a development tool. To avoid potential compatibility issues, check if you're on the version of **Node.js we support.**
 - Make sure that you use [**pnpm**](https://pnpm.io/installation) as the package manager.
 - Please have a read the [code of conduct](CODE_OF_CONDUCT.md)
-- [Learn how to set up your environment for the first time](FIRST_TIME.md)
+- [Learn how to set up your environment for the first time](/content/blog/first-time.md)
 - Get familiar with our [coding conventions & recommendations](STYLE_GUIDE.md)
 - Read up on our [tech stack](https://medium.com/kodadot/the-tech-stack-at-kodadot-8a83880f8624) to get a better picture of the infrastructure we rely on
 - Familiarise yourself with our [contributor culture](https://medium.com/kodadot/contributor-culture-at-kodadot-665243d3d6a6) to better understand the dynamics by which we operate

README.md

@@ -8,7 +8,7 @@
 
 ![image](https://user-images.githubusercontent.com/5887929/217076362-464e1293-8a2d-43ee-829f-fba17408e4c3.png)
 
-#### Is this your first time contributing? Set up your local environment [here](FIRST_TIME.md)
+#### Is this your first time contributing? Set up your local environment [here](./content/blog/first-time.md)
 
 Before submitting your pull request, read up on our [documentation](https://developers.kodadot.xyz) and make sure it follows:
 

components/blog/BlogPost.vue

@@ -68,6 +68,7 @@ useNuxt2Meta({
 
   h1 {
     font-size: 3rem;
+    line-height: 3.5rem;
     font-weight: 700;
     margin: 1rem 0;
   }
@@ -78,6 +79,18 @@ useNuxt2Meta({
     margin-bottom: 1rem;
   }
 
+  h3 {
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+  }
+
+  h4 {
+    font-size: 1rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+  }
+
   img {
     border-radius: 1rem;
     margin: 2.5rem 0;
@@ -86,6 +99,7 @@ useNuxt2Meta({
   p {
     font-size: 20px;
     line-height: 30px;
+    margin-top: 1rem;
     margin-bottom: 1rem;
   }
 
@@ -112,6 +126,13 @@ useNuxt2Meta({
     p {
       font-size: 1rem;
     }
+
+    h3 {
+      font-size: 0.9rem;
+    }
+    h4 {
+      font-size: 0.8rem;
+    }
   }
 }
 </style>

FIRST_TIME.md → content/blog/first-time.md

@@ -1,62 +1,39 @@
+---
+date: 2023-07-01
+tags: Onboarding
+image: https://www.gitbook.com/cdn-cgi/image/width=1280,dpr=2,height=640,fit=contain,format=auto/https%3A%2F%2F1787703220-files.gitbook.io%2F~%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MgfLdtGYbRx63ivinWz%252Fsocialpreview%252FBa1dBZZtvOrkCu4nwMOT%252Fcover.png%3Falt%3Dmedia%26token%3D9598f81f-80aa-4e5b-bff5-b612506e6bc7
+title: Your first time contributing to KodaDot
+subtitle: Is this your first time contributing? Set up your local environment here.
+---
+
 We are using a `pnpm` workspace, as installing things via npm **will result in broken dependencies.**
 
 > If you want to know how KodaDot works, go to the [DOCS](https://docs.kodadot.xyz/).
 
 # Hyper start 🚀
 
-### Prerequisites 🎒
+## Prerequisites 🎒
 
 ```MD
 node >=18
 pnpm
 ```
 
-Copy and paste these commands to your terminal:
+Copy and paste these commands to your terminal: (It will clone your project and install all dependencies.)
 
 ```bash
 git clone https://github.com/kodadot/nft-gallery.git nft-gallery
 cd nft-gallery;
 pnpm i;
 ```
 
-It will clone your project and install all dependencies.
-
-to start the server, run:
+To start the server, run:
 
 ```bash
 pnpm dev
 ```
 
-**KodaDot will be available at [localhost:9090](http://localhost:9090).**
-
-### Starting dev server with the pinning functionality 📦
-
-If you want to use the pinning functionality, you must create a `.env` file in your project root.
-
-```bash
-echo 'NUXT_ENV_KEYRING=true
-      PINATA_API_KEY=
-      PINATA_SECRET_API_KEY=
-      PINATA_MASTER=' > .env
-```
-
-Functions are located in `src-functions/`
-
-**[You can obtain Master Pinata Keys here](https://app.pinata.cloud/keys)**
-
-you need to install the netlify-cli:
-
-```bash
-npm install netlify-cli -g
-```
-
-to start the server, run:
-
-```bash
-netlify dev
-```
-
-**App will start on [localhost:9000](http://localhost:9000).**
+KodaDot will be available at **[localhost:9090](http://localhost:9090).**
 
 ## Docker 🐳
 
@@ -65,19 +42,22 @@ If you just want to try out our KodaDot on Kusama and have a complete local set
 ### First time setup
 
 - Build the docker image
+
 ```bash
 # Make sure you are logged into docker.
 docker-compose up --build
 ```
 
 - To check if the container is up:
+
 ```bash
 docker ps
 ```
 
 ### From next time
 
-Run:
+- Run:
+
 ```bash
 docker-compose up
 ```
@@ -99,6 +79,8 @@ git merge origin/main
 pnpm install
 ```
 
+<br/>
+
 **1. How can I read some data from the GraphQL?**
 
 Every `.graphql` file is located in the `queries/`.
@@ -122,61 +104,67 @@ Then we can use it like this:
 
 ```html
 <script lang="ts" setup>
-const { $consola } = useNuxtApp()
-const route = useRoute()
-const { data: nft } = useGraphql({
-  queryName: 'nftById',
-  variables: { id: route.params.id },
-})
-
-$consola.log(nft)
+  const { $consola } = useNuxtApp()
+  const route = useRoute()
+  const { data: nft } = useGraphql({
+    queryName: 'nftById',
+    variables: { id: route.params.id },
+  })
+
+  $consola.log(nft)
 </script>
 ```
 
+<br/>
+
 **2. How can I read on-chain data from the RPC node?**
 
 ```html
 <script lang="ts" setup>
-const { $consola } = useNuxtApp()
-const { apiInstance } = useApi()
+  const { $consola } = useNuxtApp()
+  const { apiInstance } = useApi()
 
-const collectionId = ref('0')
-const id = ref('0')
-const api = await apiInstance.value
-const nft = await api.query.uniques.asset(collectionId, id)
+  const collectionId = ref('0')
+  const id = ref('0')
+  const api = await apiInstance.value
+  const nft = await api.query.uniques.asset(collectionId, id)
 
-$consola.log(nft)
+  $consola.log(nft)
 </script>
 ```
 
+<br/>
+
 **3. How can I make an on-chain transaction?**
 
 ```html
 <script lang="ts" setup>
-async function submit() {
-  const { accountId } = useAuth()
-  const { howAboutToExecute, isLoading, status, initTransactionLoader } =
-    useMetaTransaction()
-
-  const executeTransaction = ({ cb, arg, successMessage, errorMessage }) => {
-    initTransactionLoader()
-    howAboutToExecute(
-      accountId.value,
-      cb,
-      arg,
-      () => infoMessage(successMessage || 'Success!'),
-      () => warningMessage(errorMessage || 'Failed!')
-    )
-  }
+  async function submit() {
+    const { accountId } = useAuth()
+    const { howAboutToExecute, isLoading, status, initTransactionLoader } =
+      useMetaTransaction()
+
+    const executeTransaction = ({ cb, arg, successMessage, errorMessage }) => {
+      initTransactionLoader()
+      howAboutToExecute(
+        accountId.value,
+        cb,
+        arg,
+        () => infoMessage(successMessage || 'Success!'),
+        () => warningMessage(errorMessage || 'Failed!')
+      )
+    }
 
-  executeTransaction({
-    cb: api.tx.system.remark,
-    arg: ['args']
-  })
-}
+    executeTransaction({
+      cb: api.tx.system.remark,
+      arg: ['args'],
+    })
+  }
 </script>
 ```
 
+<br/>
+
 **4. How can I test Kodadot without spending KSM?**
 
 For Basilisk (Rococo):
@@ -196,11 +184,15 @@ Current Indexers we have/use:
 - SubSquid
   - Basilisk: [snek](https://github.com/kodadot/snek)
   - Kusama: [rubick](https://github.com/kodadot/rubick)
+  - Basilisk: [snek](https://github.com/kodadot/snek)
+  - AssetHub: [stick](https://github.com/kodadot/stick)
   - MoonRiver: [click](https://github.com/kodadot/click)
 
-### MISC 🏞
+<br/>
 
-#### Linting code
+## MISC 🏞
+
+### Linting code
 
 **Show all problems**
 
@@ -220,7 +212,9 @@ pnpm lint:quiet
 pnpm lint:fix
 ```
 
-#### Generating changelog
+<br/>
+
+### Generating changelog
 
 To generate changelog, use GitHub CLI
 List only merged; if you need limit, use `-L`

locales/README.md

@@ -6,7 +6,7 @@ You will need [nodejs enviroment](https://nodejs.org/en/download/) and [pnpm](ht
 
 Particular commands you need to write to your terminal
 
-Look up on instructions at [First_Time](https://github.com/kodadot/nft-gallery/blob/main/FIRST_TIME.md#hyper-start-)
+Look up on instructions at [First_Time](https://github.com/kodadot/nft-gallery/blob/main//content/blog/first-time.md#hyper-start-)
 
 1. If it is everything runs, that great!
 2. Now open in your editor your language .json file which is in `langDir`, for Spanish i.e. `es.json`

pages/blog/index.vue

@@ -34,7 +34,7 @@
     <!-- <div
       v-for="post in posts"
       :key="post.attributes.title"
-      class="content-list">
+      class="content-list mb-5">
       <img :src="post.attributes.image" :alt="post.attributes.title" />
 
       <div class="content-list-card">
@@ -79,7 +79,6 @@ export default {
     getPermalink(post) {
       const filePath = post.meta.resourcePath
       const fileName = filePath.match(/\/([^/]+)\.\w+$/)[1]
-
       return fileName
     },
   },
@@ -125,6 +124,7 @@ export default {
 
   &-list {
     border-radius: 2.5rem;
+    overflow: hidden;
     display: flex;
 
     img {

styles/abstracts/_theme.scss

@@ -52,7 +52,7 @@ $themes: (
     'k-accentlight': #ffe5f3,
     'k-accentHover': #363234,
     'k-accentlight2': #363234,
-    'k-accentlight2-dark': #ccc,
+    'k-accentlight2-dark': #ffffff,
     'k-green': #04af00,
     'k-red': #ff5757,
     'k-orange': #cf9a10,