andylincoln/lincolncroughwell.family

Our wedding website, designed by us and implemented in React using Gatsby.js

lincolncroughwell.family

The wedding website of Andy Lincoln and Sarah Croughwell made with GatsbyJS.

Install

Make sure that you have the Gatsby CLI program installed:

npm install --global gatsby-cli

Then you can run it by:

cd lincolncroughwell.family
npm run develop

Deploy

lincolncroughwell.family's Issues

Three Column

The three column layout needs:

• A link text and url that can be passed by props,
• An SVG icon that can be specified by a prop by name (not the filename, just a tag of some sort)
• Needs the plaid background
• The center column icon should be slightly larger than the rest

Tests should ensure that the link text and url get set accurately
Tests should also ensure that the right icons are loaded with the read icon tag name

Buttons

Link buttons need to appear transparent with a blue border and blue text as a component with a customizable text and url.

This might best be approached with just a regular gatsby-link with a class on it to keep it simple.

Front page Hero

The front page hero needs:

• The wedding monogram
• "We’re Saying “I do.”" as heading text
• Location, date as subheading text
• The fern/plant texture in the background

Choices dropdown dependency is not working in CI builds

Navigation

• Working mobile nav
• Front page specific navigation
• General page navigation

The nav needs tests for:

• Ensuring the on/off states are firing correctly
• RSVP, Wedding Details, Registry, Our Story, Around Lowell are all listed and the correct URLS

Remove svg-react-loader in favor of React SVG components

After the bad experience trying to get the SVGs to import on local and having them break on production, relying on plugins that aren't widely used or documented doesn't seem like a great idea.

React supports SVG elements in JSX since React 15, so this will avoid fighting webpack for packaging and placement

https://css-tricks.com/creating-svg-icon-system-react/

Make site a PWA

• [] Make a Service Worker
• [] Make an app Manifest
• [] Have properly sized favicons for the major browsers, start with a 500x500 SVG, converted to PNG
• [] Cache the main structure of the site
• [] Make it usable offline
• [] Avoid bad caching of service worker with proper production-ready fetch, activate methods

Polaroid

Polaroids are images, an icon and content block containing a heading, body copy and a link button with customizable text

• Icons should be able to be specified with a tag name
• the content block can optionally have a texture on the background (desktop only)
• the polaroids will be stacked picture first on mobile, but optionally left or right aligned on desktop