⬅ Back

Cali Meets Delhi dot com

Published: 12 Oct 2018
Reading time: 2 min

The only part that really matters:

First things first—we're getting married in India! We are actually having two wedding ceremonies, one in India and one in California (Spring 2019). Having family all over world, we wanted to make sure everyone we love is included. Our wedding site can be found here: https://calimeetsdelhi.com


The rest

After seeing friends launch their sites through groups like The Knot, WeddingWire, and Zola, I thought it would be fun to do things a little differently for our site.

https://calimeetsdelhi.com is what I came up with. Built using Gatsby(and recently updated to V2), hosted with Netlify, and powered by Contentful.

The entire process has been a lot of fun. My fiancée and I have spent hours going over the site making adjustments to the colors, the copy, and the image selects. In the end, it has given us something personal, while still achieving all the functionality that we wanted.

PWA

Thanks to Gatsby, turing the site into a PWA was really easy. It handles generating the manifest and service worker automatically using gatsby-plugin-manifest and gatsby-plugin-offline.

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'Cali Meets Delhi',
        short_name: 'Cali&Delhi',
        start_url: '/',
        background_color: '#FCF8F7',
        theme_color: '#FCF8F7',
        display: 'fullscreen',
        icon: 'static/logos/logo-512.png', // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-offline`,

Modules

The site revolves around modules. These are templetized content blocks in Contentful that can be mixed and matched in conjuction with a modules.js file in order to quickly add new content blocks to the page.

Screenshot 2018-10-12 10.13.31

import styled from 'styled-components'
import React from 'react'
import Intro from './Intro'
import Agenda from './Agenda'

const Modules = props => {
  return (
    <ul>
      {props.modules.map((module, index) => (
        <li key={index}>
           {module.__typename === 'ContentfulIntro' && (
            <div id="ourStory">
              <Counter />
              <Intro
                heading={module.heading}
                text={module.text}
                sectionHead={module.sectionHead}
              />
            </div>
          )}
           {module.__typename === 'ContentfulAgenda' && (
            <div id="events">
              <Agenda
                heading={module.heading}
                events={module.events}
                sectionHead={module.sectionHead}
              />
            </div>
          )}
          ...
          ...
          ...
        </li>
      ))}
    </ul>
  )
}

export default Modules