feat: KodaDot blog

[preschian]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Needs Design check

• @exezbcz please review

Context

• Closes [Blogpost] What is ERC6551 - Token Bound Accounts (TBA) ? #6432
• Closes Blog template and few posts #6419

Screenshot 📸

• My fix has changed UI

Copilot Summary

🤖 Generated by Copilot at b46e2e6

This pull request adds a blog feature to the NFT gallery website, using markdown files as the source of content. It introduces a new module for loading markdown files as Vue components, and updates some dependencies to improve performance and compatibility. It also adds some components and pages for rendering the blog posts and the blog index, and some markdown files for the blog content.

🤖 Generated by Copilot at b46e2e6

We write the content in markdown
We load it with frontmatter
We render the blog with Vue
We set the meta for SEO

[kodabot]

WARNING @preschian PR for issue #6419 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #6419

[kodabot]

WARNING @preschian PR for issue #6432 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #6432

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	561903f
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64bfaed30b3a440008d6756d
😎 Deploy Preview	https://deploy-preview-6461--koda-canary.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 configuration.

[reviewpad]

AI-Generated Summary: This pull request involves comprehensive modifications to the project, primarily aimed at revamping the blog functionality.

1. The file first-time.vue was removed, stipulating possible removal of exclusively associated components.
2. Changes were made to package.json, adding frontmatter-markdown-loader and removing raw-loader.
3. Edits made to nuxt.config.js involve the configuration update for the markdown file loader, replacing 'raw-loader' with 'frontmatter-markdown-loader', with additional options for the new loader.
4. A new blog post discussing the ERC6551 token and its interaction with the Ethereum blockchain was added titled what-is-erc6551.md.
5. A new Vue.js component, BlogPost.vue, was created, set up with various templates and functions for handling blog posts' metadata and layout.
6. A new index file under pages/blog was created featuring blog posts in cards view, with functionalities to load blog posts content asynchronously and generate permalinks for individual blog posts, styled to design the blog's visual aesthetics.
7. Lastly, a file blog/_slug.vue was created, where the BlogPost component was added providing a way to generate dynamic routes depending on blog post slugs.

Overall, the pull request aims to improve the project's blog feature set, making it more dynamic, user-friendly, and feature-loaded while optimizing dependencies.

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
frontmatter-markdown-loader	3.7.0	environment	+1	23.2 kB	hmsk

🚮 Removed packages: raw-loader@4.0.2

[preschian]

is it safe to remove this component? I couldn't find the entry point to visit this page

[vikiival]

I would check readme of this repo or hello.kodadot.xyz

[preschian]

seems like no page linked to kodadot.xyz/first-time https://github.com/search?q=org%3Akodadot%20first-time&type=code
CMIIW

[yangwao]

I guess so for now! We will remake it to blog in new form I bet.

[vikiival]

ooo

[vikiival]

I would check readme of this repo or hello.kodadot.xyz

[prury]

• white text on dark mode:

• i think this part of the text should not be bold

• mobile looking good

[exezbcz]

Hello, hello, nice job!

Few things:

Landing

• there is line separating the img and the rest

• this size 16px, please - I have updated the component there
  

heading of the article to 31px

• good job with the mobile version! 👍

single blog

• subtitle to 25px, regular weight
  
• paragraph text to 20px, line height 30px, color accentlight2 dark (grey shade of pink) - #363234
• round img with stroke on this page as well
  

dark mode

• sorry that I left it out. Here it is
  
• updated in the handoff file

thanks!

[codeclimate]

Code Climate has analyzed commit 561903f and detected 0 issues on this pull request.

View more on Code Climate.

[yangwao]

I guess so for now!
We will remake it to blog in new form, for general onboarding article for developers

https://kodadot.xyz/first-time/

[yangwao]

once this merged, this would be good to release

• https://deploy-preview-6461--koda-canary.netlify.app/blog/what-is-erc6551

[yangwao]

I've got approval from @exezbcz and will do another round as we need surf erc6551