spenpo-landing v2.0.16

A mobile-responsive hero landing page React component

• component demo
• full stack implementation
• full stack demo (auth is not enabled. CMS is not accessible)

static implementation (renders landing page only):

import { SpenpoLanding } from 'spenpo-landing'

const App = () => (
  <SpenpoLanding
    title="engineer"
    name="spenpo"
    subtitle="building!"
    socialUrls={[
      'https://twitter.com/your_twitter',
      'https://github.com/your_github',
    ]}
    headshotSrc="/images/headshot.jpeg"
    actionDestination="https://..."
    actionStatement="click here!"
  />
)

dynamic editable implementation (allows user to toggle edit mode on and change the page content with the CMS):

import React, { useState } from 'react'
import { SpenpoLanding, SpenpoLandingCms } from 'spenpo-landing'

const App: React.FC = () => {
  const editable = useState(false)
  const [title, setTitle] = useState<string>()
  const [name, setName] = useState<string>()
  const [subtitle, setSubtitle] = useState<string>()
  const [actionStatement, setActionStatement] = useState<string>()
  const [actionDestination, setActionDestination] = useState<string>()
  const [accentColor, setAccentColor] = useState<string>()
  const [secondaryAccentColor, setSecondaryAccentColor] = useState<string>()
  const [backgroundColor, setBackgroundColor] = useState<string>()
  const [backgroundImage, setBackgroundImage] = useState<string>()
  const [headshotSrc, setHeadshotSrc] = useState<string>()
  const [socialUrls, setSocialUrls] = useState<string[]>()
  const [headshotFile, setHeadshotFile] = useState<File>()

  const cms: SpenpoLandingCms = {
    title: {
      getter: () => title,
      setter: (prop) => setTitle(prop),
    },
    name: {
      getter: () => name,
      setter: (prop) => setName(prop),
    },
    subtitle: {
      getter: () => subtitle,
      setter: (prop) => setSubtitle(prop),
    },
    actionStatement: {
      getter: () => actionStatement,
      setter: (prop) => setActionStatement(prop),
    },
    actionDestination: {
      getter: () => actionDestination,
      setter: (prop) => setActionDestination(prop),
    },
    accentColor: {
      getter: () => accentColor,
      setter: (prop) => setAccentColor(prop),
    },
    secondaryAccentColor: {
      getter: () => secondaryAccentColor,
      setter: (prop) => setSecondaryAccentColor(prop),
    },
    backgroundColor: {
      getter: () => backgroundColor,
      setter: (prop) => setBackgroundColor(prop),
    },
    backgroundImage: {
      getter: () => backgroundImage,
      setter: (prop) => setBackgroundImage(prop),
    },
    headshotSrc: {
      getter: () => headshotSrc,
      setter: (prop) => setHeadshotSrc(prop),
    },
    socialUrls: {
      getter: () => socialUrls,
      setter: (prop) => setSocialUrls(prop),
    },
    headshotFile: {
      getter: () => headshotFile,
      setter: (prop) => setHeadshotFile(prop),
    },
  }

    return (
        <SpenpoLanding
            editable={editable}
            cms={cms}
        />
    )
}

cached data fed in through props takes priority. data can be persisted outside of the component with the cacheCallback prop:

import React, { useState, useContext } from 'react'
import { SpenpoLanding, SpenpoLandingCms } from 'spenpo-landing'
import redis from '../../../utils/redis'
import { GetServerSidePropsContext } from 'next'

const App: React.FC<{ cache: SpenpoLandingCache }> = ({ cache }) => {
  const { landingCms } = useContext(ShoppingCartContext)
  const editable = useState(true)

  return (
    <SpenpoLanding
      cms={landingCms}
      cacheCallback={async (callbackCache) => {
        await fetch('/api/cache/landing', {
          body: JSON.stringify({ cache: callbackCache }),
          method: 'post',
        })
      }}
      editable={editable}
      cache={cache}
    />
  )
}

export default App

export async function getServerSideProps({ query }: GetServerSidePropsContext) {
  const cache = await redis.hgetall(String(query.cache))
  return { props: { cache } }
}

props: