+
+
diff --git a/src/content/blog/a-sane-and-efficient-guide-for-consuming-graphql-endpoints-in-typescript.md b/src/content/blog/a-sane-and-efficient-guide-for-consuming-graphql-endpoints-in-typescript.md
index ddfb3a0..e27e4b8 100644
--- a/src/content/blog/a-sane-and-efficient-guide-for-consuming-graphql-endpoints-in-typescript.md
+++ b/src/content/blog/a-sane-and-efficient-guide-for-consuming-graphql-endpoints-in-typescript.md
@@ -16,18 +16,6 @@ Lets dive deeper 🤿.
I created a tiny [companion repository](https://github.com/cupcakearmy/blog-typescript-graphql) if you want to check out the code and try it out.
Or check out the [finished demo](https://blog-typescript-graphql.vercel.app/).
-
-
-
-
-
-
-Photo by [Clayton Robbins](https://unsplash.com/@claytonrobbins?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/@claytonrobbins?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
-
-
-
-
-
## Intro
First we need to decide on what do we want (and probably need)
@@ -50,7 +38,7 @@ The setup will be be for VSCode. For that we first install the [GraphQL extensio
We need to add a `.graphqlrc.yml` file at the root with the following content:
-```
+```yaml
schema: https://api.spacex.land/graphql/
```
@@ -68,7 +56,7 @@ We want to take our endpoint, generate types and queries from it that can then b
There is this amazing project called `@graphql-codegen` which is a collection of tools for helping you generating various things from GraphQL. Let's install:
-```
+```bash
# Generators
pnpm i -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-graphql-request
# For the SDK
@@ -79,17 +67,17 @@ I will assume my GraphQL stuff will live under `./src/lib/gql`
We will create a top level configuration file to handle all of our generation step called `codegen.yaml`. Ignore the `config` option for now, I will explain that later
-```
+```yaml
schema: https://api.spacex.land/graphql/
-documents: "src/**/*.graphql"
+documents: 'src/**/*.graphql'
generates:
./src/lib/gql/gen.ts:
plugins:
- - "@graphql-codegen/typescript"
- - "@graphql-codegen/typescript-operations"
- - "@graphql-codegen/typescript-graphql-request"
+ - '@graphql-codegen/typescript'
+ - '@graphql-codegen/typescript-operations'
+ - '@graphql-codegen/typescript-graphql-request'
config:
- maybeValue: "T"
+ maybeValue: 'T'
typesPrefix: GQL
immutableTypes: true
useTypeImports: true
@@ -104,7 +92,7 @@ The property `schema` does not need an explanation.
Now let's create a `src/lib/gql/root.graphql` file and write some queries, all autocompleted of course!
-```
+```gql
query LaunchpadsMany {
launchpads(limit: 10) {
id
@@ -131,7 +119,7 @@ query LaunchByYear($year: String!) {
### Let magic do it's thing
-```
+```bash
pnpm exec graphql-codegen
```
@@ -139,7 +127,7 @@ This will look at all our custom queries and mutations and generate us a ready t
### Leverage the new SDK
-```
+```ts
// src/lib/gql/index.ts
import { GraphQLClient } from 'graphql-request'
@@ -149,7 +137,7 @@ const client = new GraphQLClient('https://api.spacex.land/graphql/')
export const SDK = getSdk(client)
```
-```
+```ts
import { SDK } from '$lib/gql'
const data = await SDK.LaunchByYear({ year: '2021' })
@@ -157,7 +145,7 @@ const data = await SDK.LaunchByYear({ year: '2021' })
You can also use the generated types to explicitly set them
-```
+```ts
import { SDK } from '$lib/gql'
import type { GQLLaunchByYearQuery } from '$lib/gql/gen'
@@ -170,7 +158,7 @@ Every thing is typed now, I can't pass a number to the `year` variable or use re
I promised I would come back to it at some point.
-```
+```yaml
schema: ...
generates:
...
diff --git a/src/content/blog/leaving-nextcloud-from-heaven-to-the-depths-of-seafile.md b/src/content/blog/leaving-nextcloud-from-heaven-to-the-depths-of-seafile.md
index 9f15dbd..934bd92 100644
--- a/src/content/blog/leaving-nextcloud-from-heaven-to-the-depths-of-seafile.md
+++ b/src/content/blog/leaving-nextcloud-from-heaven-to-the-depths-of-seafile.md
@@ -1,6 +1,7 @@
---
title: 'Leaving Nextcloud: From heaven to the depths of Seafile'
date: '2021-03-23'
+updatedDate: '2021-03-27'
categories:
- 'general'
tags:
diff --git a/src/content/blog/why-i-love-js-but-sometimes-i-feel-we-shoot-ourself-in-the-foot.md b/src/content/blog/why-i-love-js-but-sometimes-i-feel-we-shoot-ourself-in-the-foot.md
index 092d154..a80c60a 100644
--- a/src/content/blog/why-i-love-js-but-sometimes-i-feel-we-shoot-ourself-in-the-foot.md
+++ b/src/content/blog/why-i-love-js-but-sometimes-i-feel-we-shoot-ourself-in-the-foot.md
@@ -1,8 +1,8 @@
---
-title: "Why I love JS but sometimes I feel we shoot ourself in the foot."
-date: "2020-05-29"
-categories:
- - "general"
+title: 'Why I love JS but sometimes I feel we shoot ourself in the foot.'
+date: '2020-05-29'
+categories:
+ - 'general'
---
Let's start by saying this: I absolutely love JS & Typescript, they are my favourite languages and I would not want to live without them.
@@ -19,7 +19,7 @@ So an economist might think: "Why is this bad? Competition is always good as it
What is the consequence of this? Many abandoned, half-finished packages that need to be rewritten every now and then only to be left unmaintained again. Let the cycle repeat itself...
-## Bundle work! Not disperse it
+## Bundle work! Don't disperse it
What if instead of reinventing the wheel over and over again we tune the wheel we have so that it becomes the best, most versatile wheel for everyone. Fragmentation is always a huge amount of work and leads to half-backed projects that always have some downsides. From that downside a new project is born and again, the cycle continues.
diff --git a/src/content/page/projects.md b/src/content/page/projects.md
new file mode 100644
index 0000000..2be69d6
--- /dev/null
+++ b/src/content/page/projects.md
@@ -0,0 +1,6 @@
+---
+title: Projects
+date: '2024-11-29'
+---
+
+To be filled :)
diff --git a/src/content/page/rest.mdx b/src/content/page/rest.mdx
new file mode 100644
index 0000000..ec093a6
--- /dev/null
+++ b/src/content/page/rest.mdx
@@ -0,0 +1,7 @@
+---
+title: Rest
+date: '2024-11-29'
+---
+import ContactLinks from '../../components/Links.astro'
+
+
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index c90900e..074adfd 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -1,36 +1,30 @@
---
-import type { CollectionEntry } from 'astro:content'
-import FormattedDate from '../components/FormattedDate.astro'
+import type { MarkdownHeading } from 'astro'
import { Image } from 'astro:assets'
-import Root from './Root.astro'
+import type { CollectionEntry } from 'astro:content'
+import type { ReadTimeResults } from 'reading-time'
+import PostAttributes from '../components/PostAttributes.astro'
+import Tags from '../components/Tags.astro'
+import Toc from '../components/Toc.astro'
+import PageWithTitle from './PageWithTitle.astro'
-type Props = CollectionEntry<'blog'>['data']
+type Props = CollectionEntry<'blog'>['data'] & { headings: MarkdownHeading[]; readingTime: ReadTimeResults }
-const { title, updatedDate, date, tags, coverImage } = Astro.props
+const { title, updatedDate, date, tags, coverImage, headings, readingTime } = Astro.props
---
-
+
-