feat: add first version of kodadot style guide 💅

[kkukelka]

Thank you for your contribution to the KodaDot NFT gallery.
👇 _ Let's make a quick check before the contribution.

PR type

• Bugfix
• Feature
• Refactoring

What's new?

• PR closes Add best practices to Contributing #2729
• setup style guide and link in CONTRIBUTING.md:
• covers Vuex, SFCs, Naming Conventions, nuxt property decorators, how to create and use custom components

Before submitting Pull Request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality
• I've posted a screenshot of demonstrated change in this PR

Optional

• I've tested it at </rmrk/collection/26902bc2f7c20c546a-1FVG7>
• I've tested PR on mobile and everything seems works
• I found edge cases
• I've written some unit tests 🧪

Had issue bounty label?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot

• My fix has changed something on UI; a screenshot is best to understand changes for others.

[netlify]

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	9952f5c
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/624bf5c19eb2a5000871f666
😎 Deploy Preview	https://deploy-preview-2733--koda-nuxt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[vikiival]

For the first draft, really nice

[roiLeo]

Hey, I wanted to introduce in #2492 nuxt way to fetch data since we don't use asyncData (for pages) or fetch (for components) methods, let me know what you thing if it could be interesting to include it in the coding guideline.

It would be something like this:

import { Component } from 'nuxt-property-decorator'

@Component({
  components: {
    Component: () => import('@/components/Component.vue'),
  },
  async asyncData({ app, $config, params }) {
    const res = await app?.apolloProvider?.clients[$config.prefix].query({
      query: queryGql,
      variables: {
        id: params.id
      },
    })

    return {
      data: res.data,
      total: res.total,
    }
  }
})
export default class ClassName extends Vue {
  data?: Type
  total?: Type

  [...]
}

[kkukelka]

Hey, I wanted to introduce in #2492 nuxt way to fetch data since we don't use asyncData (for pages) or fetch (for components) methods, let me know what you thing if it could be interesting to include it in the coding guideline.

It would be something like this:

import { Component } from 'nuxt-property-decorator'

@Component({
  components: {
    Component: () => import('@/components/Component.vue'),
  },
  async asyncData({ app, $config, params }) {
    const res = await app?.apolloProvider?.clients[$config.prefix].query({
      query: queryGql,
      variables: {
        id: params.id
      },
    })

    return {
      data: res.data,
      total: res.total,
    }
  }
})
export default class ClassName extends Vue {
  data?: Type
  total?: Type

  [...]
}

perfect! ill add it asap. should be considered best practice for every new page we build.

[vikiival]

I would add note for this one line if
I find it super hard to read

❗ bad

if (something) return 1

✅ good

if (something) {
  return 1
}

[vikiival]

Perfect!

[vikiival]

pay 100 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $100 @ 190.74 USD/KSM ~ 0.524 $KSM
🧗 EqdyzrzVmeHwMdMwvPeCMnNdbuQDbD3YrjY93xq9Ln3jUGW
🔗 0xaf6ede5bfe208c91df577b59324884d5b3bf3637a56e3cf4a370b2b44da97127

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues