[FEATURE]: staging to production merge (#81)

* 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)
kwicherbelliaken · Jun 23, 2023 · 61763b6 · 61763b6
1 parent a8df133
commit 61763b6
Show file tree

Hide file tree

Showing 19 changed files with 355 additions and 178 deletions.
diff --git a/app.arc b/app.arc
@@ -3,6 +3,8 @@ better-brain-blogging
 
 @aws
 region ap-southeast-2
+timeout 60              
+memory 256
 
 @http
 /*
@@ -20,4 +22,4 @@ password
 
 note
   pk *String  # userId
-  sk **String # noteId
+  sk **String # noteId
diff --git a/app/components/CodeBlock.tsx b/app/components/CodeBlock.tsx
@@ -2,6 +2,9 @@ import hljs from "highlight.js";
 import { type PropsWithChildren, useEffect } from "react";
 import P from "./P";
 
+const preClassName =
+  "px-4 text-sm leading-6 bg-[#dfe2e5]/[.314] border border-[#dfe2e5]/[.333] rounded-md";
+
 const CodeBlock = ({
   content: { caption, code },
 }: PropsWithChildren<{
@@ -15,10 +18,26 @@ const CodeBlock = ({
 
   return (
     <div className="mb-5">
-      <pre>
-        <code>{code}</code>
+      <pre
+        className={preClassName}
+        style={{
+          wordWrap: "normal",
+          wordBreak: "normal",
+        }}
+      >
+        <code
+          class="typescript"
+          style={{
+            background: "transparent",
+            whiteSpace: "pre",
+            wordBreak: "normal",
+          }}
+        >
+          {code}
+        </code>
       </pre>
       <P styleProps={["italic"]}>{caption}</P>
+      <div>{code}</div>
     </div>
   );
 };

diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
@@ -2,8 +2,6 @@ import React from "react";
 import classNames from "classnames";
 import type { PropsWithChildren } from "react";
 
-// todo: if classNameProp is not an array then make it an array
-
 //! NB: h-[calc(100vh-4rem)] needed to explicitly set the height otherwise we get scrollbars
 //! https://github.com/slackermorris/better-brain-blogging/issues/10#issuecomment-1437429507
 

diff --git a/app/components/Paragraph.tsx b/app/components/Paragraph.tsx
@@ -20,7 +20,7 @@ const Paragraph = <BlockType extends object>({
         const isItalic = text.annotations.italic;
 
         const richProps = {
-          className: `font-nhmb text-xl text-midnight-light inline selection:bg-yellow-meringue  
+          className: `font-sim text-lg text-black-pearl inline selection:bg-yellow-meringue  
           ${isBold ? "font-bold" : ""} 
           ${isItalic ? "italic" : ""} 
           ${isUnderlined ? "underline" : ""}`,

diff --git a/app/components/RichText.tsx b/app/components/RichText.tsx
@@ -9,24 +9,4 @@ const RichText = ({
   ...styleProps
 }: PropsWithChildren<RichTextProps>) => <p {...styleProps}>{children}</p>;
 
-export default RichText;
-
-// type Apple = {
-//   hasSeeds: boolean;
-//   name: string;
-// };
-
-// type Banana = {
-//   name: string;
-// };
-
-// type Fruit = Banana | Apple;
-
-// const isApple = (check: Fruit): check is Apple => {
-//   return (check as Apple).hasSeeds !== "undefined";
-// };
-
-// function pluck<DataType, KeyType extends keyof DataType>(
-//   items: DataType[],
-//   key: KeyType
-// ) {}
+export default RichText;
diff --git a/app/components/Title.tsx b/app/components/Title.tsx
@@ -9,7 +9,12 @@ const H1 = ({
   <h1 className={classNames(styleProps?.join(" "))}>{children}</h1>
 );
 
-const H2 = ({ children }: PropsWithChildren<{}>) => <h2>{children}</h2>;
+const H2 = ({
+  children,
+  styleProps,
+}: PropsWithChildren<{ styleProps?: Array<string> }>) => (
+  <h2 className={classNames(styleProps?.join(" "))}>{children}</h2>
+);
 
 const H3 = ({
   children,

diff --git a/app/components/index.ts b/app/components/index.ts
@@ -0,0 +1,10 @@
+export { default as A } from "./A";
+export { default as P } from "./P";
+export { default as Title } from "./Title";
+export { default as Layout } from "./Layout";
+export { default as RichText } from "./RichText";
+export { default as Paragraph } from "./Paragraph";
+export { default as CodeBlock } from "./CodeBlock";
+export { default as ImageContainer } from "./ImageContainer";
+export { default as BostockMetaballAnimation } from "./BostockMetaballAnimation";
+export { default as PageTransition } from "./pageTransition";
diff --git a/app/root.tsx b/app/root.tsx
@@ -58,7 +58,7 @@ export const loader: LoaderFunction = async ({ request }) => {
   });
 };
 
-function Header() {
+function Header() { 
   return (
     <div className="relative z-50 block h-16 w-full bg-[color:rgba(0,0,0,1)] text-white">
       <div className="flex h-full flex-row items-center justify-end">

diff --git a/app/routes/braindumps.list.$braindumpId.tsx b/app/routes/braindumps.list.$braindumpId.tsx
@@ -1,42 +1,51 @@
 import React from "react";
 import { useEffect, useState, Fragment, useMemo } from "react";
-import { HeadersFunction, json } from "@remix-run/node";
+import {
+  json,
+  type HeadersFunction,
+  type LoaderFunction,
+} from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import notionClient from "~/integrations/notion";
 
 //? COMPONENTS
-import A from "~/components/A";
-import Title from "~/components/Title";
-import CodeBlock from "~/components/CodeBlock";
-import Paragraph from "~/components/Paragraph";
-import { PillButton } from "~/components/button";
-import ImageContainer from "~/components/ImageContainer";
-import PageTransition from "~/components/pageTransition";
+import {
+  A,
+  Title,
+  CodeBlock,
+  Paragraph,
+  ImageContainer,
+  PageTransition,
+} from "../components";
 
 //? TYPES
 import type { PropsWithChildren } from "react";
 import type { GetBlockResponse } from "@notionhq/client/build/src/api-endpoints";
+import type { BlockList, Page, Block } from "notion-api-types";
 
 //? STYLES
-import styles from "highlight.js/styles/base16/zenburn.css";
+import styles from "highlight.js/styles/base16/equilibrium-light.css";
+
+type LoaderData = {
+  braindumpMeta: Page;
+  braindumpContent: BlockList;
+  braindumpContentReferences: any;
+};
+
+export const loader: LoaderFunction = async ({ params }) => {
 
-export const loader = async ({
-  params,
-}: {
-  params: { braindumpId: string };
-}) => {
   /* 1. retrieve the Notion Page equivalent of this Braindump */
-  const response = await notionClient.pages.retrieve({
+  const response: Page = await notionClient.pages.retrieve({
     page_id: params.braindumpId,
   });
 
   /* 2. retrieve the blocks of content for this Notion Page Braindump */
-  const blocks = await notionClient.blocks.children.list({
+  const blocks: BlockList = await notionClient.blocks.children.list({
     block_id: params.braindumpId,
   });
 
   /* 3. retrieve, in particular, the reference(s) section (topmost block) */
-  const blockReferences = blocks.results[0];
+  const blockReferences: Block = blocks.results[0];
   const references = await notionClient.blocks.children.list({
     block_id: blockReferences.id,
   });
@@ -74,46 +83,33 @@ export const links = () => {
 };
 
 export default function BraindumpIndex() {
-  // [TODO]:
-  // [ ]: I need to extract information about the page to display
-  // [ ]: add highlighter effect to some sections
-  // [ ]: determine the colours that I want to use
-  // [ ]: how could I use this peeling sticky? https://codepen.io/patrickkunka/details/DeZQXw
-  // [ ]: design a layout component (or does Tailwind offer one)?
-
-  // [TYPEFACE]:
-  // https://fontsinuse.com/uses/47122/paul-and-the-microcosm-wenzel-rehbach
-  // https://fontsinuse.com/uses/46970/frow
-  // https://fontsinuse.com/uses/43980/ekin-fil-aquarius-pisces-single-cover
-  // https://fontsinuse.com/uses/45808/futurissimo-l-utopie-du-design-italien
-
-  // [IRREGULAR CSS SHAPES]:
-  // https://stackoverflow.com/questions/23711059/trapezium-shape-with-rounded-corners-and-pure-css
-  // http://jsfiddle.net/webtiki/umV38/
-  // https://www.w3.org/TR/2010/WD-css3-background-20100612/Overview.src.html
-  //
-
-  // [ADVANCED CSS]:
-  // https://developpaper.com/css-advanced-use-css-gradient-to-make-gorgeous-gradient-texture-background-effect/
-  // peelable sticker (with animation): https://codepen.io/patrickkunka/details/DeZQXw
-  // http://www.coding-dude.com/wp/css/highlight-text-css/
-  // https://alvarotrigo.com/blog/css-highlight-text/
-
   const { braindumpMeta, braindumpContent, braindumpContentReferences } =
-    useLoaderData();
+    useLoaderData<LoaderData>();
 
-  const content = useNotionInterpretBlocks(braindumpContent.results);
+  const Content = () => (
+    <>{useNotionInterpretBlocks(braindumpContent.results)}</>
+  );
 
   if (!braindumpContent || !braindumpMeta) return null;
 
-  const Header = (
+  const PillContainer = ({ children }: PropsWithChildren) => (
+    <div className="relative block w-fit cursor-default rounded-full py-1 px-2 text-sm text-graphite-huy outline outline-graphite-huy">
+      {children}
+    </div>
+  );
+
+  const Header = () => (
     <div className="mb-12 flex flex-col">
-      <Title.H1 styleProps={["text-8xl"]}>
+      <Title.H1 styleProps={["text-8xl text-graphite-merlin pb-4"]}>
         {braindumpMeta["properties"]["title"]["title"][0]["plain_text"]}
       </Title.H1>
-      <div className="space-between flex w-full flex-row justify-around pt-6">
-        <PillButton>{braindumpMeta["created_time"]}</PillButton>
-        <PillButton>Uncategorised</PillButton>
+
+      <div className="flex flex-col gap-4 px-4">
+        <div className="cursor-default text-sm text-graphite-huy">
+          Posted on{" "}
+          {new Date(braindumpMeta["created_time"]).toLocaleDateString()}
+        </div>
+        <PillContainer>Uncategorised</PillContainer>
       </div>
     </div>
   );
@@ -191,6 +187,10 @@ export default function BraindumpIndex() {
     </div>
   );
 
+  const ConstrainedLayout = ({ children }: PropsWithChildren) => (
+    <div className="w-[700px]">{children}</div>
+  );
+
   return (
     <div className="relative">
       <PageTransition.FlowerBlobTransition
@@ -199,11 +199,15 @@ export default function BraindumpIndex() {
       >
         <div className="bg-pink pt-24">
           <InnerLayout>
-            {Header}
-            <div className="flex flex-row justify-center">
-              {References}
-              <div className="flex w-3/4 flex-col px-4">{content}</div>
-            </div>
+            <ConstrainedLayout>
+              <Header />
+              <div>
+                {/* {References} */}
+                <div className="flex flex-col px-4">
+                  <Content />
+                </div>
+              </div>
+            </ConstrainedLayout>
           </InnerLayout>
         </div>
       </PageTransition.FlowerBlobTransition>
@@ -251,7 +255,7 @@ const InnerLayout = ({ children }: PropsWithChildren<{}>) => {
 
   return (
     <div
-      className={`transistion h-full w-full bg-white p-4 duration-1000 ease-out`}
+      className={`transistion flex h-full w-full flex-col items-center bg-stone-50 p-4 duration-1000 ease-out`}
       style={{ borderRadius: borderRadius }}
     >
       {children}
@@ -271,15 +275,22 @@ const useNotionInterpretBlocks = (
 
           case "heading_1":
             return (
-              <Title.H2 key={block.id}>
+              <Title.H1 key={block.id} styleProps={["text-graphite-merlin"]}>
                 {block.heading_1.rich_text[0]?.plain_text}
-              </Title.H2>
+              </Title.H1>
             );
 
           case "heading_2":
             return (
-              <Title.H3 key={block.id}>
+              <Title.H2 key={block.id} styleProps={["text-graphite-merlin"]}>
                 {block.heading_2.rich_text[0]?.plain_text}
+              </Title.H2>
+            );
+
+          case "heading_3":
+            return (
+              <Title.H3 key={block.id} styleProps={["text-graphite-merlin"]}>
+                {block.heading_3.rich_text[0]?.plain_text}
               </Title.H3>
             );
 
@@ -295,6 +306,7 @@ const useNotionInterpretBlocks = (
             return null;
 
           case "code":
+            // todo: throw an error if a code block is missing a caption
             return (
               <CodeBlock
                 key={block.id}