Skip to content

Commit

Permalink
[CHORE]: polished readme ready to make repository public (#105) (#106)
Browse files Browse the repository at this point in the history
* [FEATURE]: staging to production merge (#83)

* chore / replace-vitest-with-jest (#1)

* feature: jest-config added

* chore: ensure tsconfig respects node and jest as globally available environments;

* feature: add dependencies related to swapping jest in as testing suite;

* test: add styleMock;

* chore: add generated server index.js.map to gitignore;

* feature: BraindumpsIndex page test scaffolding;

* chore: remove unused deps including jest-module-name-mapper (no need for this util);

* chore: add test coverage directory to gitignore

* chore: corrected CI workflow for testing;

* fix: type checking failing because of this

* fix: type checking failing because of this

* feature / initial-integration-of-notion-cms (#2)

* feature: added notion SDK to project;

* feature: export notion client from root (need a singleton);

* chore: constants file;

* feature: http-caching of Braindumps page (document and loader), CatchBoundary also added;

* chore: do not include any .js.map files into commit;

* chore: some rearranging in package.json??;

* feature: braindump loader helper implemented with test coverage

* chore: braindump route cleanup

* test: remove unused route/braindump test

* chore: add ts-ignore statements because compiler isn't properly picking up on NotionAPI types

* feature / link to and implement render content of individual braindumps (#3)

* feature: improved upon braindump extractor/payload formatting

* feature: add through link to specific braindump from braindump list page

* chore: remove code comment about using singleton

* feature: Components used to format Notion API 'braindump' JSON payload

* chore: updated README to include links referring to influences

* feature: initial implementation of braindump - specific article

* feature: add custom fonts to project used in specific braindump

* feature: extend base tailwind theme, no need for CSS abstractions opted for consistent component and template partials

* feature: inline styling of components with template partials (themeing)

* feature: initial implementation of the layout for specific braindump article

* refactor: improvement to generic components related to Notion CMS, includes fixing console errors due to React becoming confused about rendered Components

* chore: remove console log

* feature: updated to Component styles for Title.H3

* feature: references Component implemented and retrieving dynamic content from CMS

* feature: CodeBlock Component implemented with improvement to nested P Component

* feature: CodeBlock Component rendered (if present) on Braindump Page

* feature: added highlight.js for syntactic highlighting

* chore: Remix regenerates tsconfig file for some strange reason

* feature: added randomising of border-radius functionality for irregular shape generation

* feature: add yellow-meringue to tailwind theme

* feature: add ability for highlighting to Paragraph Component

* feature: AnimatedButton on Braindump Page similar to Komono

* feature: clean up Braindump Page layout

* feature: InnerLayout Component which has logic for irregular shape transistion implemented

* feature: add InnerLayout Component to Braindump Page, also tested for unnecessary re-renders to child Components: were none :D

* refactor: adjust duration of InnerLayout transistion

* feature: a bit more padding for the Braindump Page

* fix: remove flash from AnimatedButton - https://stackoverflow.com/questions/46960449/how-to-avoid-flickering-on-box-shadow-transition\#:\~:text\=Try%20setting%20a%20boxshadow%20of%20.09px

* fix: unique key for iteratable Component

* feature: Braindump references link to new window

* feature: update shared Components to use className to stich styleProp to tailwind theme

* chore: package-lock

* chore: add package-lock

* feature: fresh layout for Braindump entry Page

* chore: bump @remix deps

* chore: react-dom update requires using different import

* feature: making use of fuzzy-scrawl animation component

* chore: somethng is going awry wrt cypress tests, had to comment out the following code

* chore: typings for BostockMetaballAnimation

* feature: tweak to Components to accept styleProps

* feature: introduced BostockMetaballAnimation with npm link

* feature: extended the tailwind config to include grid

* feature: Braindump page no longer makes use of Fuzzy Scrawl animation Component

* feature: update favicon

* feature: add bostock animation and fuzzy scrawl as deps

* feature: better encapsulation of braindumps page logic as Components

* feature: clean up landing page code

* feature: add error boundary to root

* feature: add new version of fuzzy-scrawl

* feature: jeeez a lot of rearranging--nested files (layout nesting + nested urls) and flat files (no layout nesting + nested urls)

* refactor: remove some boilerplate stuff and other dead code

* [FEATURE]: establish error boundaries for layout routes (#14)

* chore: establishing PR

* feature: CatchBoundary in braindumps list nested route handles for bad requests, etc; ErrorBoundary is a catch all
:

* [FIX]: correct ci/cd pipeline (#17)

* chore: PR link to issue

* fix: TS errors fixed

* refactor: remove vitest from package.json and github workflow

* fix: couldn't resolve polyfill module because absolute url was waaay off

* fix: cypress tests now running green

* [FIX]: limit typescript compiler to app directory to resolve conflict between global expect from Jest (unit tests) and Mocha (E2E, bundled with Cypress) (#20)

* fix: limit typescript compiler to app directory to resolve conflict between global expect from Jest (unit tests) and Mocha (E2E, bundled with Cypress)

* fix: limit typescript compiler to app directory to resolve conflict between global expect from Jest (unit tests) and Mocha (E2E, bundled with Cypress)

* feature: enabled test routes (the grunge boilerplate was broken)

* feature: enabled test routes (the grunge boilerplate was broken)

* feature: updated arc file to include stack name and deployed to region

* chore: run CI/CD pipeline when pushing on this branch

* [FIX]: remove unused loader from braindump index--was causing issues with Cypress visiting root and redirecting to here without proper intercept for data fetching (#25)

* fix: remove unused loader from braindump index--was causing issues with Cypress visiting root and redirecting to here without proper intercept for data fetching

* fix: use newer version of cypress github action

* refactor: remove cypress as deployment pre-req (FOR NOW)

* fix: staging deployment is triggered on develop branch

* feature: deploy to staging environment

* feature: deploy to staging environment with NOTION CRM env vars (#29)

* [feature]: fallback page for mobile devices; customising tailwind styles using CSS layers (#32)

* feature: if on mobile show mobile friendly page--this included setting tailwind specific breakpoints for Title Component font sizes

* feature: fall back page and background image for when users' are on mobile

* feature: point to entry point .css file to apply custom styles--currently being applied to <h> tags

* feature: add custom styles using preflight base styles

* [fix]: css syntax error "text-xl" wrongly configured (#33)

* feature: if on mobile show mobile friendly page--this included setting tailwind specific breakpoints for Title Component font sizes

* feature: fall back page and background image for when users' are on mobile

* feature: point to entry point .css file to apply custom styles--currently being applied to <h> tags

* feature: add custom styles using preflight base styles

* fix: broke build pipeline because css syntax issue

* fix: layout was completely janked

* fix: eslint issues taken care of (#34)

* delete server directory

* [chore]: cleanup eslint warnings + remove `server` dir from source control (#35)

* fix: eslint issues taken care of

* chore: ignore auto generated server directory

* [feature]: write copy for website (#38)

* refactor: dot notation for table component (introduction panel)

* refactor: better padding for braindumps list

* [fix]: repairing page navigation so we don't land on mobile only page (#40)

* chore: establishing PR

* feature: splash page does not render content unless on the client (we depend too much on browser based APIs for solutions to our problems)

* [fix]: late content fetching causes layout shifts (#42)

* chore: establishing PR

* fix: font path url matches the actual url where the font is served from

* fix: some better styling choices; removed some content; page does not overflow because of body content (#46)

* feature: content page styling fixed, need to do something about the references section (#49)

* [FEATURE]: remove the "references" title from the content page... will restore later (#52)

* feature: content page styling fixed, need to do something about the references section

* feature: get rid of the references title

* feature: deploy production off of master branch

* feature: actually specify cache control headers, especially for the braindump content page (#57)

* feature: preload fonts so we can avoid layout jankiness when they eventually load (#59)

* [FEATURE]: add page transitions (#62)

* feature: add animejs to project

* feature: new Layout Component which encapsulates CSS used to achieve full viewport height (have to take banner into consideration)

* feature: add Transition Components to project and use them

* [FEATURE]: using sessionStorage only run content animation on FIRST page load (might revise this for running other animations (#66)

* feature: add animejs to project

* feature: new Layout Component which encapsulates CSS used to achieve full viewport height (have to take banner into consideration)

* feature: add Transition Components to project and use them

* chore: cleanup function for morphing transition useEffect

* feature: using sessionStorage only run content animation on FIRST page load (might revise this for running other animations)

* [FEATURE]: improve user experience (slow 3G) with page transitions when fetching data (#68)

* feature: needed native tailwind colours for gradient map effect

* feature: page transition for fetching data--gradient map

* [FEATURE]: page transitions when first data fetching slow 3 g improvement (#69)

* feature: needed native tailwind colours for gradient map effect

* feature: page transition for fetching data--gradient map

* feature: randomise fuzzy-scrawl animation on braindump links--need to wait for patched library to update in npm registry

* feature: randomise fuzzy-scrawl animation on braindump links--need to wait for patched library to update in npm registry

* chore: fixing merge conflicts up between this and master

* fix: linting issues redeclarations

* [FEATURE]: improve content page layout (#72)

* feature: CodeBlock refactor to resemble Huys

* feature: updating styles to.. well.. not quite sure as I have forgot.. but I am

* fix: was getting lambda timeout errors so increased timeout via arc

* [FEATURE]: updated content page to have same colours as Huys' (#73)

* feature: updated content page to have same colours as Huys'

* chore: clean up eslint warnings

* feature: barrel export components (#74)

* [FEATURE]: buttons to filter braindump categories (#76)

* feature: buttons to filter braindump categories

* feature: colours for category buttons now fixed.. also memoised so no change in attributed colour per render

* feature: better styling for category buttons

* feature: successful type support for Notion API content (#79)

* chore: needed to set ARC credentials

* [FEATURE]: staging to production merge (#94)

* chore / replace-vitest-with-jest (#1)

* feature: jest-config added

* chore: ensure tsconfig respects node and jest as globally available environments;

* feature: add dependencies related to swapping jest in as testing suite;

* test: add styleMock;

* chore: add generated server index.js.map to gitignore;

* feature: BraindumpsIndex page test scaffolding;

* chore: remove unused deps including jest-module-name-mapper (no need for this util);

* chore: add test coverage directory to gitignore

* chore: corrected CI workflow for testing;

* fix: type checking failing because of this

* fix: type checking failing because of this

* feature / initial-integration-of-notion-cms (#2)

* feature: added notion SDK to project;

* feature: export notion client from root (need a singleton);

* chore: constants file;

* feature: http-caching of Braindumps page (document and loader), CatchBoundary also added;

* chore: do not include any .js.map files into commit;

* chore: some rearranging in package.json??;

* feature: braindump loader helper implemented with test coverage

* chore: braindump route cleanup

* test: remove unused route/braindump test

* chore: add ts-ignore statements because compiler isn't properly picking up on NotionAPI types

* feature / link to and implement render content of individual braindumps (#3)

* feature: improved upon braindump extractor/payload formatting

* feature: add through link to specific braindump from braindump list page

* chore: remove code comment about using singleton

* feature: Components used to format Notion API 'braindump' JSON payload

* chore: updated README to include links referring to influences

* feature: initial implementation of braindump - specific article

* feature: add custom fonts to project used in specific braindump

* feature: extend base tailwind theme, no need for CSS abstractions opted for consistent component and template partials

* feature: inline styling of components with template partials (themeing)

* feature: initial implementation of the layout for specific braindump article

* refactor: improvement to generic components related to Notion CMS, includes fixing console errors due to React becoming confused about rendered Components

* chore: remove console log

* feature: updated to Component styles for Title.H3

* feature: references Component implemented and retrieving dynamic content from CMS

* feature: CodeBlock Component implemented with improvement to nested P Component

* feature: CodeBlock Component rendered (if present) on Braindump Page

* feature: added highlight.js for syntactic highlighting

* chore: Remix regenerates tsconfig file for some strange reason

* feature: added randomising of border-radius functionality for irregular shape generation

* feature: add yellow-meringue to tailwind theme

* feature: add ability for highlighting to Paragraph Component

* feature: AnimatedButton on Braindump Page similar to Komono

* feature: clean up Braindump Page layout

* feature: InnerLayout Component which has logic for irregular shape transistion implemented

* feature: add InnerLayout Component to Braindump Page, also tested for unnecessary re-renders to child Components: were none :D

* refactor: adjust duration of InnerLayout transistion

* feature: a bit more padding for the Braindump Page

* fix: remove flash from AnimatedButton - https://stackoverflow.com/questions/46960449/how-to-avoid-flickering-on-box-shadow-transition\#:\~:text\=Try%20setting%20a%20boxshadow%20of%20.09px

* fix: unique key for iteratable Component

* feature: Braindump references link to new window

* feature: update shared Components to use className to stich styleProp to tailwind theme

* chore: package-lock

* chore: add package-lock

* feature: fresh layout for Braindump entry Page

* chore: bump @remix deps

* chore: react-dom update requires using different import

* feature: making use of fuzzy-scrawl animation component

* chore: somethng is going awry wrt cypress tests, had to comment out the following code

* chore: typings for BostockMetaballAnimation

* feature: tweak to Components to accept styleProps

* feature: introduced BostockMetaballAnimation with npm link

* feature: extended the tailwind config to include grid

* feature: Braindump page no longer makes use of Fuzzy Scrawl animation Component

* feature: update favicon

* feature: add bostock animation and fuzzy scrawl as deps

* feature: better encapsulation of braindumps page logic as Components

* feature: clean up landing page code

* feature: add error boundary to root

* feature: add new version of fuzzy-scrawl

* feature: jeeez a lot of rearranging--nested files (layout nesting + nested urls) and flat files (no layout nesting + nested urls)

* refactor: remove some boilerplate stuff and other dead code

* [FEATURE]: establish error boundaries for layout routes (#14)

* chore: establishing PR

* feature: CatchBoundary in braindumps list nested route handles for bad requests, etc; ErrorBoundary is a catch all
:

* [FIX]: correct ci/cd pipeline (#17)

* chore: PR link to issue

* fix: TS errors fixed

* refactor: remove vitest from package.json and github workflow

* fix: couldn't resolve polyfill module because absolute url was waaay off

* fix: cypress tests now running green

* [FIX]: limit typescript compiler to app directory to resolve conflict between global expect from Jest (unit tests) and Mocha (E2E, bundled with Cypress) (#20)

* fix: limit typescript compiler to app directory to resolve conflict between global expect from Jest (unit tests) and Mocha (E2E, bundled with Cypress)

* fix: limit typescript compiler to app directory to resolve conflict between global expect from Jest (unit tests) and Mocha (E2E, bundled with Cypress)

* feature: enabled test routes (the grunge boilerplate was broken)

* feature: enabled test routes (the grunge boilerplate was broken)

* feature: updated arc file to include stack name and deployed to region

* chore: run CI/CD pipeline when pushing on this branch

* [FIX]: remove unused loader from braindump index--was causing issues with Cypress visiting root and redirecting to here without proper intercept for data fetching (#25)

* fix: remove unused loader from braindump index--was causing issues with Cypress visiting root and redirecting to here without proper intercept for data fetching

* fix: use newer version of cypress github action

* refactor: remove cypress as deployment pre-req (FOR NOW)

* fix: staging deployment is triggered on develop branch

* feature: deploy to staging environment

* feature: deploy to staging environment with NOTION CRM env vars (#29)

* [feature]: fallback page for mobile devices; customising tailwind styles using CSS layers (#32)

* feature: if on mobile show mobile friendly page--this included setting tailwind specific breakpoints for Title Component font sizes

* feature: fall back page and background image for when users' are on mobile

* feature: point to entry point .css file to apply custom styles--currently being applied to <h> tags

* feature: add custom styles using preflight base styles

* [fix]: css syntax error "text-xl" wrongly configured (#33)

* feature: if on mobile show mobile friendly page--this included setting tailwind specific breakpoints for Title Component font sizes

* feature: fall back page and background image for when users' are on mobile

* feature: point to entry point .css file to apply custom styles--currently being applied to <h> tags

* feature: add custom styles using preflight base styles

* fix: broke build pipeline because css syntax issue

* fix: layout was completely janked

* fix: eslint issues taken care of (#34)

* delete server directory

* [chore]: cleanup eslint warnings + remove `server` dir from source control (#35)

* fix: eslint issues taken care of

* chore: ignore auto generated server directory

* [feature]: write copy for website (#38)

* refactor: dot notation for table component (introduction panel)

* refactor: better padding for braindumps list

* [fix]: repairing page navigation so we don't land on mobile only page (#40)

* chore: establishing PR

* feature: splash page does not render content unless on the client (we depend too much on browser based APIs for solutions to our problems)

* [fix]: late content fetching causes layout shifts (#42)

* chore: establishing PR

* fix: font path url matches the actual url where the font is served from

* fix: some better styling choices; removed some content; page does not overflow because of body content (#46)

* feature: content page styling fixed, need to do something about the references section (#49)

* [FEATURE]: remove the "references" title from the content page... will restore later (#52)

* feature: content page styling fixed, need to do something about the references section

* feature: get rid of the references title

* feature: deploy production off of master branch

* feature: actually specify cache control headers, especially for the braindump content page (#57)

* feature: preload fonts so we can avoid layout jankiness when they eventually load (#59)

* [FEATURE]: add page transitions (#62)

* feature: add animejs to project

* feature: new Layout Component which encapsulates CSS used to achieve full viewport height (have to take banner into consideration)

* feature: add Transition Components to project and use them

* [FEATURE]: using sessionStorage only run content animation on FIRST page load (might revise this for running other animations (#66)

* feature: add animejs to project

* feature: new Layout Component which encapsulates CSS used to achieve full viewport height (have to take banner into consideration)

* feature: add Transition Components to project and use them

* chore: cleanup function for morphing transition useEffect

* feature: using sessionStorage only run content animation on FIRST page load (might revise this for running other animations)

* [FEATURE]: improve user experience (slow 3G) with page transitions when fetching data (#68)

* feature: needed native tailwind colours for gradient map effect

* feature: page transition for fetching data--gradient map

* [FEATURE]: page transitions when first data fetching slow 3 g improvement (#69)

* feature: needed native tailwind colours for gradient map effect

* feature: page transition for fetching data--gradient map

* feature: randomise fuzzy-scrawl animation on braindump links--need to wait for patched library to update in npm registry

* feature: randomise fuzzy-scrawl animation on braindump links--need to wait for patched library to update in npm registry

* chore: fixing merge conflicts up between this and master

* fix: linting issues redeclarations

* [FEATURE]: improve content page layout (#72)

* feature: CodeBlock refactor to resemble Huys

* feature: updating styles to.. well.. not quite sure as I have forgot.. but I am

* fix: was getting lambda timeout errors so increased timeout via arc

* [FEATURE]: updated content page to have same colours as Huys' (#73)

* feature: updated content page to have same colours as Huys'

* chore: clean up eslint warnings

* feature: barrel export components (#74)

* [FEATURE]: buttons to filter braindump categories (#76)

* feature: buttons to filter braindump categories

* feature: colours for category buttons now fixed.. also memoised so no change in attributed colour per render

* feature: better styling for category buttons

* feature: successful type support for Notion API content (#79)

* chore: needed to set ARC credentials

* [FEATURE]: dale.2 images for content page (#85)

* feature: dale.2 images for content page

* feature: update flower-blob-animation to be randomised

* feature: update flower-blob-animation to be randomised

* fix: codeblock component was printing code to screen.. weird (#88)

* [FEATURE]: support for inline code blocks (#90)

* [FIX]: category buttons text wrap and overflow issues fixed (#93)

* fix: category buttons text wrap and overflow issues fixed

* fix: landing page content is now centered

* chore: customised README
  • Loading branch information
slackermorris authored Jul 4, 2024
1 parent 4423236 commit 9513b6e
Showing 1 changed file with 22 additions and 113 deletions.
135 changes: 22 additions & 113 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,26 @@
# Remix Grunge Stack
# 🧠 [Better Brain Blogging ](https://betterbrainblogging.com/)

![The Remix Grunge Stack](https://repository-images.githubusercontent.com/463325363/edae4f5b-1a13-47ea-b90c-c05badc2a700)
👆 That's a link.

Learn more about [Remix Stacks](https://remix.run/stacks).
👉 https://betterbrainblogging.com/ is another link.

```
npx create-remix --template remix-run/grunge-stack
```
Click on one to explore what Better Brain Blogging is all about.

## What's in the stack
<p align="center">
<a href="#the-why">🤔 The Big W "Why?"</a> •
<a href="#what-is-in-this-stack">💻 The Stack</a> •
<a href="#the-roadmap">🗺 The Roadmap</a>
</p>

Landing | Blogposts | Blogpost
:-------------------------:|:-------------------------:|:-------------------------:
![image](https://github.com/kwicherbelliaken/better-brain-blogging/assets/35620369/d1c24c80-d609-4639-b1f1-6c62eed89631) | ![image](https://github.com/kwicherbelliaken/better-brain-blogging/assets/35620369/b3bc1f3a-f2b3-4a85-9d6b-6d5498dc127e) | ![image](https://github.com/kwicherbelliaken/better-brain-blogging/assets/35620369/faa83c48-61b8-40a1-8039-211b51e92aba) |

## The Why

Everyone needs a blog. The universe is ravenous, craving for my opinion. Duh. Come on, man.

## What is in this stack?

- [AWS deployment](https://aws.com) with [Architect](https://arc.codes/)
- Production-ready [DynamoDB Database](https://aws.amazon.com/dynamodb/)
Expand All @@ -23,118 +35,15 @@ npx create-remix --template remix-run/grunge-stack
- Linting with [ESLint](https://eslint.org)
- Static Types with [TypeScript](https://typescriptlang.org)

Not a fan of bits of the stack? Fork it, change it, and use `npx create-remix --template your/repo`! Make it your own.

## Development

- Validate the app has been set up properly (optional):

```sh
npm run validate
```

- Start dev server:

```sh
npm run dev
```

This starts your app in development mode, rebuilding assets on file changes.

### Relevant code:

This is a pretty simple note-taking app, but it's a good example of how you can build a full stack app with Architect and Remix. The main functionality is creating users, logging in and out, and creating and deleting notes.

- creating users, and logging in and out [./app/models/user.server.ts](./app/models/user.server.ts)
- user sessions, and verifying them [./app/session.server.ts](./app/session.server.ts)
- creating, and deleting notes [./app/models/note.server.ts](./app/models/note.server.ts)

The database that comes with `arc sandbox` is an in memory database, so if you restart the server, you'll lose your data. The Staging and Production environments won't behave this way, instead they'll persist the data in DynamoDB between deployments and Lambda executions.

## Deployment

This Remix Stack comes with two GitHub Actions that handle automatically deploying your app to production and staging environments. By default, Arc will deploy to the `us-west-2` region, if you wish to deploy to a different region, you'll need to change your [`app.arc`](https://arc.codes/docs/en/reference/project-manifest/aws)

Prior to your first deployment, you'll need to do a few things:

- Create a new [GitHub repo](https://repo.new)

- [Sign up](https://portal.aws.amazon.com/billing/signup#/start) and login to your AWS account

- Add `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY` to [your GitHub repo's secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets). Go to your AWS [security credentials](https://console.aws.amazon.com/iam/home?region=us-west-2#/security_credentials) and click on the "Access keys" tab, and then click "Create New Access Key", then you can copy those and add them to your repo's secrets.

- Along with your AWS credentials, you'll also need to give your CloudFormation a `SESSION_SECRET` variable of its own for both staging and production environments, as well as an `ARC_APP_SECRET` for Arc itself.

```sh
npx arc env --add --env staging ARC_APP_SECRET $(openssl rand -hex 32)
npx arc env --add --env staging SESSION_SECRET $(openssl rand -hex 32)
npx arc env --add --env production ARC_APP_SECRET $(openssl rand -hex 32)
npx arc env --add --env production SESSION_SECRET $(openssl rand -hex 32)
```

If you don't have openssl installed, you can also use [1password](https://1password.com/password-generator) to generate a random secret, just replace `$(openssl rand -hex 32)` with the generated secret.
### Architecture

## Where do I find my CloudFormation?
I use Notion as my content management system (CMS). Each blog post is created as a page, and these pages are organized as entries in a database.

You can find the CloudFormation template that Architect generated for you in the sam.yaml file.

To find it on AWS, you can search for [CloudFormation](https://console.aws.amazon.com/cloudformation/home) (make sure you're looking at the correct region!) and find the name of your stack (the name is a PascalCased version of what you have in `app.arc`, so by default it's BlogCe66Staging and BlogCe66Production) that matches what's in `app.arc`, you can find all of your app's resources under the "Resources" tab.

## GitHub Actions

We use GitHub Actions for continuous integration and deployment. Anything that gets into the `main` branch will be deployed to production after running tests/build/etc. Anything in the `dev` branch will be deployed to staging.

## Testing

### Cypress

We use Cypress for our End-to-End tests in this project. You'll find those in the `cypress` directory. As you make changes, add to an existing file or create a new file in the `cypress/e2e` directory to test your changes.

We use [`@testing-library/cypress`](https://testing-library.com/cypress) for selecting elements on the page semantically.

To run these tests in development, run `npm run test:e2e:dev` which will start the dev server for the app as well as the Cypress client. Make sure the database is running in docker as described above.

We have a utility for testing authenticated features without having to go through the login flow:

```ts
cy.login();
// you are now logged in as a new user
```

We also have a utility to auto-delete the user at the end of your test. Just make sure to add this in each test file:

```ts
afterEach(() => {
cy.cleanupUser();
});
```

That way, we can keep your local db clean and keep your tests isolated from one another.

### Vitest

For lower level tests of utilities and individual components, we use `vitest`. We have DOM-specific assertion helpers via [`@testing-library/jest-dom`](https://testing-library.com/jest-dom).

### Type Checking

This project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run `npm run typecheck`.

### Linting

This project uses ESLint for linting. That is configured in `.eslintrc.js`.

### Formatting

We use [Prettier](https://prettier.io/) for auto-formatting in this project. It's recommended to install an editor plugin (like the [VSCode Prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) to get auto-formatting on save. There's also a `npm run format` script you can run to format all files in the project.
All kudos for the landing page animation goes to Mike Bostock and his [Metaball Animation](https://observablehq.com/@mbostock/metaballs). I thought it looked coool so I stole it!

### Influences / References

- https://dev.to/martenstijs/how-we-used-notion-as-a-cms-for-our-blog-5b63: I used this to process the JSON Notion Page Block content as it seemed a good means of interpreting the Notion response payload.

- https://www.npmjs.com/package/notion-to-md: I was originally going to use this inside the $braindumpId loader and then process the returned Markdown into HTML using some interpreter. Fortunately, Notion chose against returning queried against resources as Markdown for JSON.

- https://web.dev/image-component/ optimised Image Component

- https://medium.com/front-end-weekly/progressive-image-loading-and-intersectionobserver-d0359b5d90cd: progressive image loading (helpful dissection of the possible approaches)

- https://jmperezperez.com/blog/medium-image-progressive-loading-placeholder/: more examples of progressive image loading

0 comments on commit 9513b6e

Please sign in to comment.