Merge pull request #6461 from kodadot/feat/blog-post

components/blog/BlogPost.vue

@@ -0,0 +1,117 @@
+<template>
+ <div class="article">
+ <div
+ class="is-flex is-justify-content-space-between has-text-grey is-size-5">
+ <div>{{ attributes.tags }}</div>
+ <div v-if="attributes.date">
+ {{ format(new Date(attributes.date), 'dd.MM.yyyy') }}
+ </div>
+ </div>
+ <h1>{{ attributes.title }}</h1>
+ <p v-if="attributes.subtitle" class="subtitle">{{ attributes.subtitle }}</p>
+ <img
+ v-if="attributes.image"
+ :src="attributes.image"
+ :alt="attributes.title"
+ width="100%" />
+ <component :is="singlePostComponent" />
+ </div>
+</template>
+
+<script setup>
+import { format } from 'date-fns'
+import { convertMarkdownToText } from '@/utils/markdown'
+
+const { $seoMeta } = useNuxtApp()
+const route = useRoute()
+
+const slug = route.params.slug
+const attributes = ref({})
+const singlePostComponent = ref('')
+
+onMounted(async () => {
+ const post = await import(`~/content/blog/${slug}.md`)
+
+ attributes.value = post.attributes
+ singlePostComponent.value = post.vue.component
+})
+
+const title = computed(() => attributes.value.title)
+const meta = computed(() => {
+ return [
+ ...$seoMeta({
+ title: attributes.value.title,
+ description: convertMarkdownToText(attributes.value.subtitle),
+ url: route.path,
+ image: attributes.value.image,
+ }),
+ ]
+})
+
+useNuxt2Meta({
+ title,
+ meta,
+})
+</script>
+
+<style lang="scss">
+@import '@/styles/abstracts/variables';
+
+.article {
+ margin: 0 auto;
+ max-width: 40rem;
+
+ .subtitle {
+ font-size: 25px;
+ margin-bottom: 0;
+ }
+
+ h1 {
+ font-size: 3rem;
+ font-weight: 700;
+ margin: 1rem 0;
+ }
+
+ h2 {
+ font-size: 1.5rem;
+ font-weight: bold;
+ margin-bottom: 1rem;
+ }
+
+ img {
+ border-radius: 1rem;
+ margin: 2.5rem 0;
+ }
+
+ p {
+ font-size: 20px;
+ line-height: 30px;
+ margin-bottom: 1rem;
+ }
+
+ @include ktheme() {
+ .markdown-body {
+ color: theme('k-accentlight2-dark');
+ }
+
+ img {
+ border: 1px solid theme('border-color');
+ }
+ }
+
+ @include touch {
+ .subtitle {
+ font-size: 1.25rem;
+ }
+
+ h1 {
+ font-size: 1.75rem;
+ }
+
+ h2,
+ p {
+ font-size: 1rem;
+ }
+ }
+}
+</style>

content/blog/what-is-erc6551.md

@@ -0,0 +1,24 @@
+---
+date: 2023-03-18
+tags: Tokens
+image: https://eips.ethereum.org/assets/eip-6551/diagram.png
+title: What is ERC6551 - Token Bound Accounts (TBA) ?
+subtitle: Understand ERC6551 which redefines how ERC-721 tokens interact with the Ethereum blockchain by giving every non-fungible token its very own smart contract account.
+---
+
+## What is ERC6551?
+
+EIP6551 is a proposal made to extend the functionality of every ERC-721 token by attaching them to specific smart contract accounts, effectively providing on-chain identity to these tokens. Each non-fungible token gets a unique, global identifier which gives it a distinct identity.
+
+## How does ERC6551 operate?
+
+EIP6551 operates by creating uniquely, deterministically addressed smart contract accounts for each ERC-721 token via a permissionless registry. It maintains complete compatibility with existing ERC-721 token contracts, therefore not requiring any changes to previously deployed ERC-721 contracts. Control over each token-bound account is given to the owner of the ERC-721 token, enabling the owner to initiate on-chain actions on behalf of their token.
+
+## Unique features of ERC6551
+
+The unique feature of ERC6551 lies in its ability to turn each ERC-721 token into a standalone entity capable of owning assets and interacting with applications on the Ethereum blockchain. This expands the functionality of non-fungible tokens, allowing them to accumulate assets and record transaction history.
+
+## Conclusion
+
+ERC6551 is a breakthrough in enhancing the capabilities of non-fungible tokens. Through ERC6551, ERC-721 tokens not only represent a unique digital asset but can also interact independently with the blockchain and other on-chain applications. This opens a plethora of possibilities in the world of non-fungible tokens on the KodaDot platform.
+​

nuxt.config.js

@@ -2,6 +2,8 @@ import path from 'path'
 import * as fs from 'fs'
 import { defineNuxtConfig } from '@nuxt/bridge'
 import SentryWebpackPlugin from '@sentry/webpack-plugin'
+import Mode from 'frontmatter-markdown-loader/mode'
+
 import { manifestIcons } from './utils/config/pwa'
 import { URLS, apolloClientConfig } from './utils/constants'
 
@@ -405,10 +407,17 @@ export default defineNuxtConfig({
  )
  }
 
- // add markdown loader
+ // add frontmatter-markdown-loader
  config.module.rules.push({
  test: /\.md$/,
- use: 'raw-loader',
+ include: path.resolve(__dirname, 'content'),
+ loader: 'frontmatter-markdown-loader',
+ options: {
+ mode: [Mode.VUE_COMPONENT, Mode.META],
+ vue: {
+ root: 'markdown-body',
+ },
+ },
  })
 
  config.module.rules.push({

package.json

@@ -162,13 +162,13 @@
  "eslint-plugin-prettier": "^4.2.1",
  "eslint-plugin-unicorn": "^42.0.0",
  "eslint-plugin-vue": "^8.7.1",
+ "frontmatter-markdown-loader": "^3.7.0",
  "glob": "^8.1.0",
  "graphql-tag": "^2.12.6",
  "husky": "^7.0.4",
  "jsdom": "^19.0.0",
  "lint-staged": "^12.5.0",
  "prettier": "^2.8.8",
- "raw-loader": "^4.0.2",
  "sass": "^1.64.0",
  "sass-loader": "^10.4.1",
  "typescript": "^4.9.5",

pages/blog/_slug.vue

@@ -0,0 +1,3 @@
+<template>
+ <BlogPost />
+</template>

pages/blog/index.vue

@@ -0,0 +1,151 @@
+<template>
+ <div class="content">
+ <div class="content-headline">
+ <h1>KodaDot Blog</h1>
+ <p>Let’s explore the NFT universe</p>
+ </div>
+
+ <div
+ v-for="post in posts"
+ :key="post.attributes.title"
+ class="content-list">
+ <img :src="post.attributes.image" :alt="post.attributes.title" />
+
+ <div class="content-list-card">
+ <div>
+ <div class="has-text-grey">{{ post.attributes.tags }}</div>
+ <div class="content-list-card-title">{{ post.attributes.title }}</div>
+ <div>{{ post.attributes.subtitle }}</div>
+ </div>
+
+ <div>
+ <NeoButton
+ no-shadow
+ rounded
+ tag="a"
+ :href="getPermalink(post)"
+ icon="arrow-right-long">
+ View Article
+ </NeoButton>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { NeoButton } from '@kodadot1/brick'
+
+export default {
+ name: 'BlogList',
+ components: {
+ NeoButton,
+ },
+ asyncData() {
+ const resolve = require.context('~/content/blog/', true, /\.md$/)
+ const imports = resolve.keys().map((key) => resolve(key))
+
+ return {
+ posts: imports,
+ }
+ },
+ methods: {
+ getPermalink(post) {
+ const filePath = post.meta.resourcePath
+ const fileName = filePath.match(/\/([^/]+)\.\w+$/)[1]
+
+ return fileName
+ },
+ },
+}
+</script>
+
+<style lang="scss">
+@import '@/styles/abstracts/variables';
+
+.content {
+ margin: 0 auto;
+ max-width: 60rem;
+
+ &-headline {
+ text-align: center;
+
+ h1 {
+ font-size: 3rem;
+ margin-bottom: 0.5rem;
+ color: #fff !important;
+ text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
+ -1px -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000,
+ 0 -1px 0 #000, 4px 4px #000;
+ }
+
+ p {
+ font-size: 1.5rem;
+ font-weight: 500;
+ margin-bottom: 5rem;
+ }
+
+ @include touch {
+ h1 {
+ font-size: 2rem;
+ }
+
+ p {
+ font-size: 1rem;
+ margin-bottom: 2.5rem;
+ }
+ }
+ }
+
+ &-list {
+ border-radius: 2.5rem;
+ display: flex;
+
+ img {
+ width: 40rem;
+ }
+
+ &-card {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 1.5rem;
+
+ &-title {
+ font-size: 31px;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ }
+ }
+
+ @include ktheme() {
+ background-color: theme('k-white');
+ border: 1px solid theme('border-color');
+ box-shadow: 4px 4px 0px 0px theme('border-color');
+
+ img {
+ border-right: 1px solid theme('border-color');
+ }
+ }
+
+ @include touch {
+ flex-direction: column;
+
+ img {
+ border-right: none !important;
+ width: 100%;
+ }
+
+ &-card {
+ &-title {
+ font-size: 1.5rem;
+ }
+ }
+
+ .o-btn {
+ margin-top: 1rem;
+ }
+ }
+ }
+}
+</style>