Add darkmode

codetalkio · Oct 17, 2023 · 76bf898 · 76bf898
1 parent 961dca9
commit 76bf898
Show file tree

Hide file tree

Showing 10 changed files with 253 additions and 65 deletions.
diff --git a/drafts/2023-10-17-the-stack-part-4.md b/drafts/2023-10-17-the-stack-part-4.md
@@ -44,17 +44,106 @@ Our initial architecture will look like this:
 <pre class="mermaid">
 graph LR
   Client --> Router[λ Apollo Router]
-	subgraph Supergraph
-		Router --> Products[λ Products\n subgraph]
-		Router --> Users[λ Users\n subgraph]
-		Router --> Reviews[λ Reviews\n subgraph]
+  subgraph Supergraph
+    Router --> Products[λ Products\n subgraph]
+    Router --> Users[λ Users\n subgraph]
+    Router --> Reviews[λ Reviews\n subgraph]
   end
-	style Supergraph stroke:#333,stroke-width:2px,fill:transparent
+  style Supergraph stroke:#333,stroke-width:2px,fill:transparent
 </pre>
 </div>
 
 Each of these services, included the Apollo Router itself, will be deployed as AWS Lambda functions. The Apollo Router is responsible for knowing how to compose each of the subgraphs, and how to resolve references between them.
 
+## Our GraphQL Schema
+
+We will base our services on the example subgraphs from [Apollo's intro to Federation](https://www.apollographql.com/docs/federation/#concern-based-separation).
+
+**Our Users schema:**
+
+```graphql
+type Query {
+  # Get the currently logged in user.
+  me: User
+
+  # List all users.
+  users: [User!]!
+}
+
+# Users have a name and nothing more.
+type User @key(fields: "id") {
+  id: ID!
+  name: String!
+}
+```
+
+**Our Products schema:**
+
+```graphql
+type Query {
+  # Retrive a specific product by ID.
+  product(id: ID!): Product!
+
+  # Retrive a list of all products.
+  products: [Product!]!
+}
+
+# Products simply have a name and price.
+type Product @key(fields: "id") {
+  id: ID!
+  name: String!
+  price: String!
+}
+
+# External Type: User.
+type User @key(fields: "id") {
+  id: ID!
+  # Extend the Users type with a purchases field.
+  purchases: [Product!]!
+}
+```
+
+**Our Reviews schema:**
+
+```graphql
+type Query {
+  # Retrive a specific review by ID.
+  review(id: ID!): Review!
+
+  # Retrive a list of all reviews.
+  reviews: [Review!]!
+}
+
+# Reviews are written by a User and are about a Product.
+type Review @key(fields: "id") {
+  id: ID!
+  body: String!
+  author: User!
+  product: Product!
+}
+
+# External Type: User.
+type User @key(fields: "id") {
+  id: ID!
+  # Extend the Users type with a reviews field.
+  reviews: [Review!]!
+}
+
+# External Type: Product.
+type Product @key(fields: "id") {
+  id: ID!
+  # Extend the Product type with a reviews field.
+  reviews: [Review!]!
+}
+```
+
+All schemas extend the schema, which you may or may not need to do depending on your GraphQL tooling/server:
+
+```graphql
+extend schema
+  @link(url: "https://specs.apollo.dev/federation/v2.0", import: ["@key"])
+```
+
 ## Subgraph: Products, Users, and Reviews
 
 We will start from our building blocks, which will be our subgraphs, and then build up to the Router that will compose these into the supergraph.
@@ -63,6 +152,8 @@ We will start from our building blocks, which will be our subgraphs, and then bu
 
 The Router needs an HTTP endpoint, we will use [AWS Lambda Function URLs](https://aws.amazon.com/blogs/aws/announcing-aws-lambda-function-urls-built-in-https-endpoints-for-single-function-microservices/).
 
+
+
 ## DynamoDB: A database for our services
 
 ## Apollo Router
@@ -74,6 +165,15 @@ The Router needs an HTTP endpoint, we will use [AWS Lambda Function URLs](https:
 
 #### Deploying to AWS Lambda
 
+## H2 Headline
+
+### H3 Headline
+
+#### H4 Headline
+
+##### H5 Headline
+
+###### H6 Headline
 
 
 ## Next Steps

diff --git a/posts/2020-04-05-common-json-patterns-in-haskell-rust-and-javascript.md b/posts/2020-04-05-common-json-patterns-in-haskell-rust-and-javascript.md
@@ -3,7 +3,9 @@ title: Common JSON patterns in Haskell, Rust, and TypeScript
 tags: haskell, lens, javascript, typescript, rust, records, serde, aeson
 ---
 
-A lot of web development is transforming JSON one way or another. In TypeScript/JavaScript, this is straightforward, since JSON is built into the language. But can we also achieve good ergonomics in Haskell and Rust? *Dear reader, I am glad you asked! 🙌*
+A lot of web development is transforming JSON one way or another. In TypeScript/JavaScript, this is straightforward, since JSON is built into the language. But can we also achieve good ergonomics in Haskell and Rust?
+
+*Dear reader, I am glad you asked! 🙌*
 
 The comparisons we will see are not meant to show if one approach is better than another. Instead, it is intended to be a reference to become familiar with common patterns across multiple languages. Throughout this post, we will utilize several tools and libraries.
 

diff --git a/posts/2023-10-07-the-stack-part-2.md b/posts/2023-10-07-the-stack-part-2.md
@@ -21,14 +21,13 @@ Otherwise, let's jump in!
 - [AWS: Seting up Credentials](#aws-seting-up-credentials)
 - [GitHub: Setting up Environments](#github-setting-up-environments)
 - [CDK: Infrastructure as Code](#cdk-infrastructure-as-code)
-  - [Explanation: CDK Stack](#explanation-cdk-stack)
-  - [Explanation: Automated Deployments via GitHub Actions](#explanation-automated-deployments-via-github-actions)
-    - [Boostrap Workflow](#boostrap-workflow)
-    - [Deployment Workflow](#deployment-workflow)
+- [Automated Deployments via GitHub Actions](#automated-deployments-via-github-actions)
+  - [Boostrap Workflow](#boostrap-workflow)
+  - [Deployment Workflow](#deployment-workflow)
   - [Trigger the Workflows](#trigger-the-workflows)
-  - [Manual alternative: Bootstrapping our Accounts](#manual-alternative-bootstrapping-our-accounts)
-  - [Manual alternative: Deployments](#manual-alternative-deployments)
-- [Bonus: Just](#bonus-just)
+- [Manual alternative: Bootstrapping our Accounts](#manual-alternative-bootstrapping-our-accounts)
+- [Manual alternative: Deployments](#manual-alternative-deployments)
+- [Bonus: Justfile and just](#bonus-justfile-and-just)
 - [Next Steps](#next-steps)
 
 
@@ -97,6 +96,7 @@ And each environment will roughly look like this:
 </div>
 
 ## CDK: Infrastructure as Code
+
 [CDK](https://github.com/aws/aws-cdk) is our tool of choice for Infrastructure as Code. We'll start from the default template and adjust it to use [Bun](https://bun.sh/) which simplifies the process of running CDK commands while using TypeScript.
 
 Instead of setting this up from scratch, start from the template for this step in the [GitHub repository](https://github.com/codetalkio/the-stack/tree/part-2-automatic-deployments). We'll go through what this contains in the next two sections.
@@ -109,8 +109,6 @@ Our overall aim is to structure our CDK into three main groupings:
 
 This split is based on the frequency something changes, and allows us to deploy freqeuently changing stacks without having to also look at things that very rarely change. In this part of the series we will set up the `Cloud` stack.
 
-### Explanation: CDK Stack
-
 As you can see in the [GitHub repository](https://github.com/codetalkio/the-stack/tree/part-2-automatic-deployments), we structure our CDK stack as follows:
 
 - `deployment/`: The root folder for all things CDK
@@ -216,7 +214,7 @@ export class Stack extends cdk.Stack {
 
 This sets up a Hosted Zone and an ACM certificate for our domain, and configures it to validate the Certificate via DNS validation.
 
-### Explanation: Automated Deployments via GitHub Actions
+## Automated Deployments via GitHub Actions
 
 As you can see in the [GitHub repository](https://github.com/codetalkio/the-stack/tree/part-2-automatic-deployments), we have two workflows to deploy things. They share much of the same logic, so let's focus on the commonalities first.
 
@@ -229,7 +227,7 @@ Both of them do a few things:
 
 The GitHub Actions YAML might feel a bit verbose, so let's break it down a bit. We'll first focus on `cd-bootstrap` which Bootstraps AWS Accounts for CDK.
 
-#### Boostrap Workflow
+### Boostrap Workflow
 
 We first define our name and the trigger. Because we only want this to be triggered manually (bootstrapping just needs to run once) we can use `workflow_dispatch` which allows us to trigger it from the GitHub Actions UI ([docs here](https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#workflow_dispatch)):
 
@@ -308,7 +306,7 @@ We pull in what we need, and then run the `cdk bootstrap` command via bun:
         run: bun run cdk bootstrap
 ```
 
-#### Deployment Workflow
+### Deployment Workflow
 
 Our deployment flow gets a bit more complicated. We're building for the future here, so we want to put in place a few checks to make sure we don't accidentally deploy something broken. Or, if we do, we can at least stop early before it affects our users.
 
@@ -563,7 +561,7 @@ You can go and see the generated CloudFormation stacks in the [AWS Console -> Cl
 
 We've now set up the foundation for all of our future deployments of applications and services 🥳
 
-### Manual alternative: Bootstrapping our Accounts
+## Manual alternative: Bootstrapping our Accounts
 
 Once you've cloned the [GitHub repository](https://github.com/codetalkio/the-stack/tree/part-2-automatic-deployments) (or made your own version of it), set up bun:
 
@@ -589,7 +587,7 @@ $ bun run cdk bootstrap
 
 This is essentially what the [cd-bootstrap](/.github/workflows/cd-bootstrap.yml) workflow does for you, across all the environments you've specified (you can adjust the list in the build matrix).
 
-### Manual alternative: Deployments
+## Manual alternative: Deployments
 
 Now that we have bootstrapped our accounts, we can deploy our CDK stacks.
 
@@ -612,7 +610,7 @@ $ DOMAIN="app.example.com" bun run cdk deploy --concurrency 4 'Cloud' 'Cloud/**'
 The `DOMAIN` environment variable is required here, since we need to know what domain we should use for the Hosted Zone.
 
 
-## Bonus: Just
+## Bonus: Justfile and just
 
 It might seem overkill right now, but we will eventually have many different commands across many folder locations in our mono-repo setup. To make this a bit easier to work with, we can use the tool [Just](https://github.com/casey/just) to help us out.
 

diff --git a/resources/scss/_base.scss b/resources/scss/_base.scss
@@ -36,27 +36,27 @@ h1 {
 }
 
 h2 {
-  font-size: 2em;
+  font-size: 2em; // 32px
   line-height: 2.5rem;
 }
 
 h3 {
-  font-size: 1.8em;
+  font-size: 1.5em; // 21px
   line-height: 2.3rem;
 }
 
 h4 {
-  font-size: 1.6em;
+  font-size: 1.25em; // 17.5px
   line-height: 2.1rem;
 }
 
 h5 {
-  font-size: 1.2em;
+  font-size: 1em; // 14px
   line-height: 1.8rem;
 }
 
 h6 {
-  font-size: 1.06em;
+  font-size: 0.875em; // 12.25px
   line-height: 1.56rem;
 }
 

diff --git a/resources/scss/_dark-mode.scss b/resources/scss/_dark-mode.scss
@@ -0,0 +1,93 @@
+@media (prefers-color-scheme: dark) {
+  :root {
+    body {
+      background-color: $color-github-black;
+    }
+    p {
+      color: $paragraph-color-darkmode;
+    }
+    .article {
+      color: $paragraph-color-darkmode;
+      .article-header {
+        color: $color-white;
+      }
+      .article-information {
+        color: $color-lightergray;
+        span {
+          color: $color-white;
+        }
+      }
+      div.callout {
+        background-color: $callout-background-darkmode;
+      }
+    }
+    pre.mermaid {
+      background-color: inherit;
+      .cluster {
+        .nodeLabel {
+          color: $color-white !important;
+        }
+      }
+    }
+    #breadcrumbs {
+      color: $color-white;
+    }
+    blockquote {
+      border-left-color: $blockquote-color-darkmode;
+    }
+    div {
+      &.sourceCode {
+        background: $code-color-background-darkmode;
+        border-top-color: $code-color-border-darkmode;
+      }
+    }
+    a {
+      color: $link-color;
+
+      &:hover {
+        color: $link-color-hover;
+      }
+
+      &:active {
+        color: $link-color-active;
+      }
+
+      &:visited {
+        color: $link-color;
+      }
+
+      &.blacklink {
+        color: $color-white;
+
+        &:visited {
+          color: $color-white;
+        }
+      }
+
+      h2,
+      h3,
+      h4 {
+        color: $color-white;
+      }
+    }
+
+    // Frontpage
+    #frontpage-content {
+      h3 {
+        color: $footer-color-darkmode;
+      }
+      .overview-keyword {
+        color: $paragraph-color-darkmode;
+      }
+    }
+    #logo-container {
+      color: $color-white;
+      #reach-me {
+        color: $footer-color-darkmode;
+        a {
+          color: $footer-color-darkmode;
+        }
+      }
+    }
+  }
+}