Skip to content

Feature: Scene and background assets#1

Merged
gvjacob merged 15 commits into
mainfrom
GN-7
Jan 10, 2023
Merged

Feature: Scene and background assets#1
gvjacob merged 15 commits into
mainfrom
GN-7

Conversation

@gvjacob
Copy link
Copy Markdown
Member

@gvjacob gvjacob commented Jan 9, 2023

What This Does

  • Apply purple gradient background on page.
  • Render GoNoodle logo at the top of the page
  • Render scenery SVG assets on the page.
  • Install SVG loader to convert SVGs into React components
  • Fix husky install step on prepare

CleanShot 2023-01-10 at 18 25 49@2x

How to Test

  1. yarn install
  2. Go to homepage
  3. Make sure there's a subtle purple gradient background
  4. Make sure there are SVG assets rendered on the page

Accessibility Checklist

  • Markup uses semantic HTML
  • <img> tags have appropriate alt text
  • Links and buttons have discernable text
  • Form inputs have labels
  • Pages are keyboard accessible & focus states are handled

See the
Playbook accessibility page
for more details.

@linear
Copy link
Copy Markdown

linear Bot commented Jan 9, 2023

@gvjacob gvjacob requested a review from joshpensky January 10, 2023 08:54
@gvjacob gvjacob assigned catlynbowles and unassigned catlynbowles Jan 10, 2023
@gvjacob gvjacob requested a review from catlynbowles January 10, 2023 08:54
@gvjacob gvjacob self-assigned this Jan 10, 2023
@gvjacob gvjacob marked this pull request as ready for review January 10, 2023 08:55
Comment thread next.config.js
Comment on lines +5 to +13
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.tsx?$/,
use: ["@svgr/webpack"],
});

return config;
},
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a feeling we'll be using a lot of SVGs in this prototype. Instead of loading them async as images on the page, I figured it's more performant to load them inline so that they'll immediately display on the page.

Comment thread tailwind.config.js
extend: {
colors: {
purple: {
DEFAULT: "#5D15E3",
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I pulled this purple from the figma color presets.

@gvjacob gvjacob added this to the 0.1.0 milestone Jan 10, 2023
Copy link
Copy Markdown
Contributor

@joshpensky joshpensky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Beautiful! 💅 Just left a few comments!

Comment thread src/components/Layout.tsx Outdated
Comment on lines +1 to +8
import React from "react";
import GoNoodleLogoLightSVG from "@src/svgs/gonoodle-logo-light.svg";

type Props = {
children?: React.ReactNode;
};

export default function Layout({ children }: Props) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few TS things we'll want to carry forward!

// Let's import these individually for some tree-shaking!
import { PropsWithChildren } from "react";

// A few things here:
// - Let's export all our interfaces (so we can reference them as needed)
// - Let's prefix prop names with the name of their components
// - There's a general preference for interfaces over types for objects! since they're extensible
export interface LayoutProps {}

// Prefer using PropsWithChildren rather than defining children prop
export default function Layout({ children }: PropsWithChildren<LayoutProps>) {

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

very very interesting! It all makes sense. Thanks!

Comment thread src/pages/index.tsx
@gvjacob gvjacob requested a review from joshpensky January 10, 2023 17:27
Copy link
Copy Markdown
Contributor

@joshpensky joshpensky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work! 🏆

@gvjacob gvjacob merged commit b03c713 into main Jan 10, 2023
@gvjacob gvjacob deleted the GN-7 branch January 10, 2023 17:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants