fix: move articles to sub folder and clean up types

Also find out that the following error is not something I need to worry
about:
Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')
    at link_option (utils.js?v=f20a5bac:50:11)
    at get_router_options (utils.js?v=f20a5bac:157:45)
    at preload (client.js?t=1670827563348&v=f20a5bac:1237:20)
    at client.js?t=1670827563348&v=f20a5bac:1202:5
link_option @ utils.js?v=f20a5bac:50
get_router_options @ utils.js?v=f20a5bac:157
preload @ client.js?t=1670827563348&v=f20a5bac:1237
(anonymous) @ client.js?t=1670827563348&v=f20a5bac:1202
setTimeout (async)
(anonymous) @ client.js?t=1670827563348&v=f20a5bac:1201

ckeditor/ckeditor5#10927

And it is fixed

sveltejs/kit#7913

packages/app/src/lib/api/index.ts

@@ -1,55 +1,76 @@
+export type CardData = { title: string; excerpt: string; link: string, slug?: string };
+
 export type ArticleMetaData = {
-	metadata: { title: string; excerpt: string; slug: string; index: number };
-	category: string;
+    metadata: { title: string; excerpt: string; index: number };
 };
-export type Article = { fileName: string } & ArticleMetaData;
-export type Category = { title: string; excerpt: string; slug: string };
+export type Article = {
+    fileName: string,
+    category: string;
+} & ArticleMetaData;
+export type Category = { title: string; excerpt: string; };
 export type CategoryImport = { category: Category };
 const articles = import.meta.globEager('../**/*.md');
 const categories = import.meta.globEager('../categories/**/index.ts');
 
 interface Api {
-	getCategories(): Category[];
-	getCategory(slug: string): Category | undefined;
+    getCategories(): CardData[];
+
+    getCategory(slug: string): CardData | undefined;
 
-	getArticles(): Article[];
+    getArticles(): Article[];
 
-	getArticle(name: string, category: string): Article | undefined;
+    getArticle(name: string, category: string): Article | undefined;
 
-	getArticlesByCategory(category: string): Article[];
+    getArticlesByCategory(category: string): CardData[];
 }
 
 /**
  * An api object that exposes the API methods for fetching posts.
  */
 export const api: Api = {
-	getCategories(): Category[] {
-		return Object.values(categories).map((c) => (c as CategoryImport).category);
-	},
-	getCategory(slug: string): Category | undefined {
-		return this.getCategories().find((c) => c.slug.toLowerCase() === slug.toLowerCase());
-	},
-	getArticles(): Article[] {
-		return Object.entries(articles).map(([path, article]) => {
-			const parts = path.split('/');
-			const _article = article as ArticleMetaData;
-			return {
-				metadata: _article.metadata,
-				fileName: `${_article.metadata.slug}`,
-				category: parts[2]
-			};
-		});
-	},
-	getArticle(name: string, category: string): Article | undefined {
-		return this.getArticles().find(
-			(p: Article) =>
-				p.metadata.slug.toLowerCase() === name.toLowerCase() &&
-				p.category.toLowerCase() === category.toLowerCase()
-		);
-	},
-	getArticlesByCategory(categorySlug: string): Article[] {
-		return this.getArticles()
-			.filter((p: Article) => p.category.toLowerCase() === categorySlug.toLowerCase())
-			.sort((a, b) => a.metadata.index - b.metadata.index);
-	}
+    getCategories(): CardData[] {
+        return Object.entries(categories)
+            .map(([key, c]) => {
+                const category = (c as CategoryImport).category
+                const slug = key.split('/')[2]
+                return {
+                    title: category.title,
+                    excerpt: category.excerpt,
+                    link: `/articles/${slug}`,
+                    slug
+                }
+            });
+    },
+    getCategory(slug: string): CardData | undefined {
+        return this.getCategories()
+            .find((c) => c?.slug?.toLowerCase() === slug.toLowerCase())
+    },
+    getArticles(): Article[] {
+        return Object.entries(articles).map(([path, article]) => {
+            const parts = path.split('/');
+            const _article = article as ArticleMetaData;
+            return {
+                metadata: _article.metadata,
+                fileName: `${parts[3].split(".")[0]}`,
+                category: parts[2]
+            };
+        });
+    },
+    getArticle(name: string, category: string): Article | undefined {
+        return this.getArticles().find(
+            (p: Article) =>
+                p.fileName.toLowerCase() === name.toLowerCase() &&
+                p.category.toLowerCase() === category.toLowerCase()
+        );
+    },
+    getArticlesByCategory(categorySlug: string): CardData[] {
+        return this.getArticles()
+            .filter((p: Article) => p.category.toLowerCase() === categorySlug.toLowerCase())
+            .sort((a, b) => a.metadata.index - b.metadata.index)
+            .map((article: Article) => ({
+                title: article.metadata.title,
+                excerpt: article.metadata.excerpt,
+                link: `/articles/${categorySlug}/${article.fileName}`,
+            }));
+    }
 };

packages/app/src/lib/categories/ethereum/ethereumIndexing.md

@@ -1,6 +1,5 @@
 ---
 title: 'How to do Smart Contracts indexing'
-slug: ethereumIndexing
 excerpt: 'Indexing smart contracts using the blockchain transaction history and bloom filters.'
 index: 0
 ---

packages/app/src/lib/categories/ethereum/index.ts

@@ -2,6 +2,5 @@ import type { Category } from '../../api';
 
 export const category: Category = {
 	excerpt: 'Understand the mechanics of Ethereum and the blockchain.',
-	slug: 'ethereum',
 	title: 'Ethereum'
 };

packages/app/src/lib/categories/software/index.ts

@@ -2,6 +2,5 @@ import type { Category } from '../../api';
 
 export const category: Category = {
 	excerpt: 'Software development, programming, and other technical topics.',
-	slug: 'software',
 	title: 'Software'
 };

packages/app/src/lib/categories/software/mdsvexEthereumVisualization.md

@@ -1,6 +1,5 @@
 ---
 title: 'Visualizing Ethereum Transactions using mdsvex and SvelteKit'
-slug: mdsvexEthereumVisualization
 excerpt: 'Given the nature of Ethereum, it is often useful to visualize transactions, blocks and smart contracts. This post will show you how to do that using mdsvex and SvelteKit.'
 index: 1
 ---

packages/app/src/lib/categories/software/web3Modal.md

@@ -1,6 +1,5 @@
 ---
 title: 'Creating a Web3 modal in SvelteKit'
-slug: web3Modal
 excerpt: 'Building a web3 modal in SvelteKit'
 index: 0
 ---

packages/app/src/lib/categories/web3/accounts.md

@@ -1,6 +1,5 @@
 ---
 title: 'A Closer Look at Ethereum Accounts and How They Work'
-slug: accounts
 excerpt: 'Ethereum accounts are a way of identifying the ownership and authorization of certain actions on the Ethereum
 network. They are similar to bank accounts, and are used to send and receive ether (ETH), the native cryptocurrency of
 the Ethereum network, as well as to interact with smart contracts.'

packages/app/src/lib/categories/web3/amm.md

@@ -1,6 +1,5 @@
 ---
 title: 'Decentralized Exchanges and Automated Market Makers: An Introduction'
-slug: amm
 excerpt: 'Decentralized exchanges (DEXs) and automated market makers (AMMs) are both forms of cryptocurrency exchanges.
 A cryptocurrency exchange is a platform that allows users to buy and sell cryptocurrencies.'
 index: 1

packages/app/src/lib/categories/web3/index.ts

@@ -2,6 +2,5 @@ import type { Category } from '../../api';
 
 export const category: Category = {
 	excerpt: 'Learn the basic for getting started with Web3',
-	slug: 'web3',
 	title: 'Web3'
 };

packages/app/src/lib/categories/web3/setup.md

@@ -1,6 +1,5 @@
 ---
 title: Get started with web3
-slug: setup
 excerpt: 'How do you set up your web3 wallet and get started with dApps?'
 index: 0
 ---

packages/app/src/lib/categories/web3/tokens.md

@@ -1,6 +1,5 @@
 ---
 title: 'Exploring the Different Types of Cryptocurrency Tokens'
-slug: tokens
 excerpt: 'Cryptocurrency tokens are digital assets that are used to represent a specific value on a blockchain. These tokens can
 be used for a variety of purposes, such as representing a digital asset, a utility, or even a form of digital currency.'
 index: 2

packages/app/src/lib/components/ArticleCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type {CardData} from "../types";
+    import type {CardData} from "$lib/api";
 
     export let article: CardData;
 </script>

packages/app/src/lib/components/ArticleList.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import type {CardData} from "../types";
     import ArticleCard from "$lib/components/ArticleCard.svelte";
+    import type {CardData} from "$lib/api";
 
     export let articles: CardData[];
 </script>

packages/app/src/routes/+page.svelte

@@ -1,29 +1,8 @@
 <script lang="ts">
-    import ArticleList from "../lib/components/ArticleList.svelte";
+    import ArticleList from "$lib/components/ArticleList.svelte";
     import {api} from "$lib/api";
-    import type {CardData} from "$lib/types";
 
     const categories = api.getCategories();
-
-    function getArticles(category: string): CardData[] {
-       return api.getArticlesByCategory(category).map((article) => {
-          return {
-             title: article.metadata.title,
-             excerpt: article.metadata.excerpt,
-              link: `/${category}/${article.metadata.slug}`,
-          };
-       });
-    }
-
-    function getCategories(): CardData[] {
-       return api.getCategories().map((category) => {
-          return {
-             title: category.title,
-             excerpt: category.excerpt,
-             link: `/${category.slug}`,
-          };
-       });
-    }
 </script>
 
 <div class="px-2">
@@ -37,12 +16,12 @@
         <article class="prose">
             <h2>Categories</h2>
         </article>
-        <ArticleList articles={getCategories()} />
+        <ArticleList articles={api.getCategories()} />
     </div>
     {#each categories as category}
         <article class="prose">
             <h3>{category.title}</h3>
         </article>
-        <ArticleList articles={getArticles(category.slug)} />
+        <ArticleList articles={api.getArticlesByCategory(category.slug)} />
     {/each}
 </div>

packages/app/src/routes/[category]/+page.server.ts → packages/app/src/routes/articles/[category]/+page.server.ts

@@ -1,9 +1,9 @@
-import type { Category } from '$lib/api';
+import type {CardData, Category} from '$lib/api';
 import type { PageLoadEvent } from './$types';
 import { api } from '$lib/api';
 import {error} from "@sveltejs/kit";
 
-export async function load(load: PageLoadEvent): Promise<Category | undefined> {
+export async function load(load: PageLoadEvent): Promise<CardData> {
 	const { category } = load.params;
 	const data = api.getCategory(category);
 	if(!data) throw error(404, `Category '${category}' not found`);

packages/app/src/routes/articles/[category]/+page.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import type {CardData} from "$lib/api";
+ import ArticleList from "$lib/components/ArticleList.svelte";
+ import {api} from "$lib/api";
+
+ export let data: CardData
+</script>
+
+<div>
+    <article class="prose">
+        <h2>{data.title}</h2>
+        <p>{data.excerpt}</p>
+    </article>
+    <ArticleList articles={api.getArticlesByCategory(data.slug)}/>
+</div>

packages/app/src/routes/[category]/[article]/+page.ts → packages/app/src/routes/articles/[category]/[article]/+page.ts

@@ -2,7 +2,7 @@ import type { PageLoadEvent } from './$types';
 
 export async function load(load: PageLoadEvent) {
 	const { fileName, category } = load.data;
-	const article = await import(`../../../lib/categories/${category}/${fileName}.md`);
+	const article = await import(`../../../../lib/categories/${category}/${fileName}.md`);
 	const content = article.default;
 
 	return {