profile
viewpoint
Brent Jackson jxnblk @gatsbyjs New York City https://jxnblk.com Building @system-ui @styled-system, @rebassjs, MDX Deck

c8r/x0 1705

Document & develop React components without breaking a sweat

cxs-css/cxs 1178

fast af css-in-js in 0.7kb

johno/immutable-css 381

A css linter for immutable selectors

c8r/lab 348

React UI component design tool

johno/digital-garden 217

🌻[WIP] Gatsby Theme to build your own digital garden 🌻🥀🌸

c8r/micro-react 163

Create microservice apps with React components

c8r/iso 158

Build pages and prototypes with Lab UI components. No configuration or build setup required.

jxnblk/Ashley 108

A Readable & Responsive Theme for Tumblr

broccolini/dark-mode 43

Prototype for dark mode with a GitHub profile

broccolini/design-systems-and-react 32

Slide deck for my talk on using React for design systems, watch on YouTube https://youtu.be/N-5TNKJ7eB0?t=15m25s

PR opened gatsbyjs/gatsby-starter-landing-page

Reviewers
Add basic Benefits component
  • Adds Benefit component where content is shown in a single row as "cards"
  • Adds Link component – using this instead of Button for the links in content
  • Checks for absolute URLs in Link and Button to avoid warnings from GatsbyLink
  • Adds inline and as props to MarkdownText to allow the content to be rendered as a heading; definitely would like to know what you think about this approach
  • Passes className to MarkdownText; I'll merge your changes before this one and address any potential conflicts

image

+168 -15

0 comment

10 changed files

pr created time in 37 minutes

create barnchgatsbyjs/gatsby-starter-landing-page

branch : benefits-component

created branch time in 44 minutes

Pull request review commentgatsbyjs/gatsby-starter-landing-page

Add copy component

+import * as sanitizeHTML from "sanitize-html";++// This set of HTML tags are derived from the resulting output of+// all the possible rich text options in Contentful's rich text editor.+// The intent is to create a 1:1 mapping of what content editors can do+// with that editor and what markup our components will support+const defaultAllowedTags = [+  "a",+  "p",+  "br",+  "em",+  "strong",+  "ul",+  "ol",+  "li",+  "h1",+  "h2",+  "h3",+  "del",+  "table",+  "thead",+  "tbody",+  "td",+  "th",+  "tr",+  "blockquote",+  "hr",+  "code",+];++// Given a Contentful Text Node with a childMarkdownRemark field, returns HTML field+const getHtml = (textNode) => textNode?.childMarkdownRemark?.html;++// Given a Contentful Text Node with a childMarkdownRemark field, returns sanitized HTML+export const getSanitizedHtml = (contentfulTextNode, sanitizeHtmlOptions) => {+  const html = getHtml(contentfulTextNode);+  return sanitizeHTML(html, {+    allowedTags: defaultAllowedTags,+    ...sanitizeHtmlOptions,

I'm going to run into merge conflicts here based on leveraging this for inline-only markup, but can work through it

thinkybeast

comment created time in an hour

Pull request review commentgatsbyjs/gatsby-starter-landing-page

Add copy component

+import React from "react";+import * as styles from "./copy.module.css";+import { GatsbyImage, getImage } from "gatsby-plugin-image";+import { getSanitizedHtml } from "../utils";++export default function Copy({ heading, secondaryHeading, content }) {+  return (+    <section className={styles.root}>+      <div className={styles.container}>+        <h2 className={styles.heading}>{heading}</h2>+        <h3 className={styles.secondaryHeading}>{secondaryHeading}</h3>+        {content.map((item, i) => {+          return <CopyContent key={item.id} {...item} />;+        })}+      </div>+    </section>+  );+}++function CopyContent({ primaryText, secondaryText, image }) {+  console.info({ primaryText, secondaryText, image });+  return (+    <div className={styles.contentContainer}>+      <div className={styles.imageContainer}>+        <GatsbyImage image={getImage(image)} />+      </div>+      <MarkdownText className={styles.primaryText} text={primaryText} />+      <AsideText text={secondaryText} />+    </div>+  );+}++// Placeholder, as we'll extract these types of base components to a common file+function MarkdownText({ text, ...rest }) {

I pulled this out into components/markdown-text.js so feel free to pull that in and adjust as needed; also made some changes there for the Benefits component to support using it as a heading

thinkybeast

comment created time in an hour

Pull request review commentgatsbyjs/gatsby-starter-landing-page

Add copy component

+.root {+  padding-top: var(--space-5);+  padding-bottom: var(--space-5);+}++p,+h1,+h2,+h3,+h4,+h5,+h6 {

Does this stay scoped to the component? My CSS Modules is a little rusty, but we want to make sure theme styles don't leak into the consuming site

thinkybeast

comment created time in an hour

Pull request review commentgatsbyjs/gatsby-starter-landing-page

Add copy component

+import React from "react";+import * as styles from "./copy.module.css";+import { GatsbyImage, getImage } from "gatsby-plugin-image";+import { getSanitizedHtml } from "../utils";++export default function Copy({ heading, secondaryHeading, content }) {+  return (+    <section className={styles.root}>+      <div className={styles.container}>+        <h2 className={styles.heading}>{heading}</h2>+        <h3 className={styles.secondaryHeading}>{secondaryHeading}</h3>+        {content.map((item, i) => {+          return <CopyContent key={item.id} {...item} />;+        })}+      </div>+    </section>+  );+}++function CopyContent({ primaryText, secondaryText, image }) {+  console.info({ primaryText, secondaryText, image });
thinkybeast

comment created time in an hour

Pull request review commentgatsbyjs/gatsby-starter-landing-page

Add copy component

+import * as sanitizeHTML from "sanitize-html";++// This set of HTML tags are derived from the resulting output of+// all the possible rich text options in Contentful's rich text editor.+// The intent is to create a 1:1 mapping of what content editors can do+// with that editor and what markup our components will support+const defaultAllowedTags = [+  "a",+  "p",+  "br",+  "em",+  "strong",+  "ul",+  "ol",+  "li",+  "h1",+  "h2",+  "h3",+  "del",+  "table",+  "thead",+  "tbody",+  "td",+  "th",+  "tr",+  "blockquote",+  "hr",+  "code",

Do we want to support <iframe> here as well? I'd guess that some content editors might be expecting to be able to paste embed code into the long text field

thinkybeast

comment created time in an hour

Pull request review commentgatsbyjs/gatsby-starter-landing-page

Add copy component

+import * as sanitizeHTML from "sanitize-html";

Generally, I'd say you don't need a directory until you have more than one file in it. This could be src/utils.js

thinkybeast

comment created time in an hour

Pull request review commentgatsbyjs/gatsby-starter-landing-page

Add copy component

   display: flex;   gap: var(--space-3);   flex-direction: column;+  margin: 0 auto;

I think I added this to the base .container style, so you might not need this

thinkybeast

comment created time in an hour

PullRequestReviewEvent

Pull request review commentgatsbyjs/gatsby-starter-landing-page

Add copy component

+import React from "react";+import * as styles from "./copy.module.css";+import { GatsbyImage, getImage } from "gatsby-plugin-image";+import { getSanitizedHtml } from "../utils";++export default function Copy({ heading, secondaryHeading, content }) {+  return (+    <section className={styles.root}>+      <div className={styles.container}>+        <h2 className={styles.heading}>{heading}</h2>+        <h3 className={styles.secondaryHeading}>{secondaryHeading}</h3>+        {content.map((item, i) => {+          return <CopyContent key={item.id} {...item} />;+        })}+      </div>+    </section>+  );+}++function CopyContent({ primaryText, secondaryText, image }) {+  console.info({ primaryText, secondaryText, image });+  return (+    <div className={styles.contentContainer}>+      <div className={styles.imageContainer}>+        <GatsbyImage image={getImage(image)} />+      </div>+      <MarkdownText className={styles.primaryText} text={primaryText} />+      <AsideText text={secondaryText} />+    </div>+  );+}++// Placeholder, as we'll extract these types of base components to a common file+function MarkdownText({ text, ...rest }) {+  const sanitizedHtml = getSanitizedHtml(text);+  console.info(sanitizedHtml);
thinkybeast

comment created time in an hour

PullRequestReviewEvent

delete branch gatsbyjs/gatsby-starter-landing-page

delete branch : call-to-action-component

delete time in 3 hours

push eventgatsbyjs/gatsby-starter-landing-page

jxnblk

commit sha b60e282243cc9cc0a6d9cb5d422731656860fe32

Adjust base layout styles

view details

jxnblk

commit sha b4df8a50b9f8d2bc887c24f83edb99247634b3e9

Separate style vars and create dev-debug component

view details

jxnblk

commit sha 91b2d9d5714f58f28ab7379a88142621b845b100

Split out Button and MarkdownText components

view details

jxnblk

commit sha 34ea45b298b3f4b30fa492dc24199ca70fee78a2

Adjust base styles

view details

jxnblk

commit sha 7c17fd8d54857ffbc9b428b076b3787829c67f11

Adjust starter layout

view details

jxnblk

commit sha bfc24d74024c503660c08e4bbe891d0348c2cfdb

Add basic styling for CallToAction component

view details

jxnblk

commit sha ee2a0eec23d3a3be3a5d343154c95142edeb88c2

Add lint-staged

view details

jxnblk

commit sha a297ebf5865b25be1f7ef11b2bbb139a042361d9

Run prettier

view details

Brent Jackson

commit sha b5ed2471133819ee86ad26f3d405a34762b35f2c

Merge pull request #5 from gatsbyjs/call-to-action-component Add CallToAction component

view details

push time in 3 hours

Pull request review commentgatsbyjs/gatsby-starter-landing-page

Add CallToAction component

+import * as React from "react";+import { Link } from "gatsby";+import * as styles from "./button.module.css";++export default function Button({ href, text, children, variant = "primary" }) {

I was thinking something similar, but with the top-level components. I'm guessing we'll have some other shared components to pull out, so definitely prefer to wait until we have the basics working, then take an audit of what we have and organize as needed. The more directories we create, the more complex that makes the API for end-users of the theme

jxnblk

comment created time in 3 hours

PullRequestReviewEvent

pull request commentgatsbyjs/gatsby-starter-landing-page

Add CallToAction component

I added lint-staged and prettier to this PR as well, so the change looks bigger than it really is

jxnblk

comment created time in 3 hours

push eventgatsbyjs/gatsby-starter-landing-page

jxnblk

commit sha ee2a0eec23d3a3be3a5d343154c95142edeb88c2

Add lint-staged

view details

jxnblk

commit sha a297ebf5865b25be1f7ef11b2bbb139a042361d9

Run prettier

view details

push time in 3 hours

push eventgatsbyjs/gatsby-starter-landing-page

jxnblk

commit sha 7c17fd8d54857ffbc9b428b076b3787829c67f11

Adjust starter layout

view details

jxnblk

commit sha bfc24d74024c503660c08e4bbe891d0348c2cfdb

Add basic styling for CallToAction component

view details

push time in 3 hours

push eventgatsbyjs/gatsby-starter-landing-page

jxnblk

commit sha 34ea45b298b3f4b30fa492dc24199ca70fee78a2

Adjust base styles

view details

push time in 4 hours

Pull request review commentgatsbyjs/gatsby-starter-landing-page

Add CallToAction component

 }  .header {+  composes: container from "gatsby-theme-landing-page/src/components/base.module.css";

Just testing to see if this works with shadowing; might pull global base styles back out to the starter and keep these more decoupled

jxnblk

comment created time in 5 hours

PullRequestReviewEvent

Pull request review commentgatsbyjs/gatsby-starter-landing-page

Add CallToAction component

+import * as React from 'react'+import { Link } from "gatsby";+import * as styles from './button.module.css'

Looks like we don't have prettier set up for commits; can look into that later

jxnblk

comment created time in 5 hours

PullRequestReviewEvent

create barnchgatsbyjs/gatsby-starter-landing-page

branch : call-to-action-component

created branch time in 5 hours

delete branch gatsbyjs/gatsby-starter-landing-page

delete branch : layout-head-components

delete time in 7 hours

delete branch gatsbyjs/gatsby-starter-landing-page

delete branch : style-vars

delete time in 7 hours

delete branch gatsbyjs/gatsby-starter-landing-page

delete branch : add-hero

delete time in 7 hours

more