Revisions for March 2023 (#27)

* Revisions for March 2023
* Add land acknowledgement

.gitignore

@@ -35,3 +35,5 @@ yarn-error.log*
 
 /.tmp
 /.envrc
+
+/public/_redirects.contentful

Makefile

@@ -8,7 +8,8 @@ dev:
 build:
 	yarn build
 	[ ! -f out/robots.txt.$$CONTEXT ] || cp out/robots.txt.$$CONTEXT out/robots.txt
-	rm -f out/robots.txt.*
+	[ ! -f out/_redirects.* ] || cat out/_redirects.* >> out/_redirects
+	rm -f out/robots.txt.* out/_redirects.*
 
 start:
 	yarn start

package.json

@@ -15,6 +15,8 @@
   },
   "dependencies": {
     "@contentful/rich-text-html-renderer": "^16.0.2",
+    "@contentful/rich-text-react-renderer": "^15.16.3",
+    "@contentful/rich-text-types": "^16.0.3",
     "@emotion/css": "^11.1.3",
     "@emotion/react": "^11.1.5",
     "@emotion/server": "^11.0.0",

src/components/home/upcoming-events.js

@@ -2,7 +2,7 @@ import tw, { css } from 'twin.macro'
 import PropTypes from 'prop-types'
 import Link from 'next/link'
 
-export const UpcomingEventsSection = ({title, children, ...props}) => (
+export const UpcomingEventsSection = ({ title, children, ...props }) => (
   <div tw="text-center all-child:my-8" {...props}>
     <h2 tw="uppercase font-bold flex-none w-full text-wixColor24" css={css`
       font-size: 35px;
@@ -24,10 +24,10 @@ UpcomingEventsSection.propTypes = {
 
 export const UpcomingEvents = tw.div`sm:(flex justify-center justify-items-center)`
 
-export const UpcomingEvent = ({href, title, children, ...props}) => (
-  <div tw="flex flex-col my-8 px-8 border-wixColor31 max-w-sm sm:border-l first:border-0" css={css`
-    p {
-      ${tw`flex-1 my-4`}
+export const UpcomingEvent = ({ href, title, children, ...props }) => (
+  <div tw="my-8 px-8 border-wixColor31 sm:border-l first:border-0 mx-auto sm:mx-0" css={css`
+    & > * {
+      ${tw`my-4`}
     }
   `} {...props}>
     <h5 tw="font-bold leading-none text-wixColor24" css={css`

src/lib/contentful/client.js

@@ -8,7 +8,8 @@ const cache = {}
 
 export const client = createClient({
   space: config.space_id,
-  accessToken: config.deploy_access_token
+  accessToken: config.access_token,
+  host: config.host
 })
 
 client.getEntriesCachedItems = async function () {

src/lib/contentful/config.js

@@ -1,7 +1,33 @@
-export const config = {
-  space_id: process.env.CONTENTFUL_SPACE_ID,
-  deploy_access_token: process.env.CONTENTFUL_DELIVERY_ACCESS_TOKEN,
-  preview_access_token: process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN,
+import { INLINES } from '@contentful/rich-text-types'
+
+const CONTENTFUL_PREVIEW = (process.env.CONTENTFUL_PREVIEW || '').trim().toLowerCase()
+const CONTENTFUL_SPACE_ID = process.env.CONTENTFUL_SPACE_ID
+const CONTENTFUL_DELIVERY_ACCESS_TOKEN = process.env.CONTENTFUL_DELIVERY_ACCESS_TOKEN
+const CONTENTFUL_PREVIEW_ACCESS_TOKEN = process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN
+
+export const preview = !['', '0', 'f', 'false', 'n', 'no', 'off'].includes(CONTENTFUL_PREVIEW)
+export const access_token = preview ? CONTENTFUL_PREVIEW_ACCESS_TOKEN : CONTENTFUL_DELIVERY_ACCESS_TOKEN
+export const host = preview ? 'preview.contentful.com' : 'cdn.contentful.com'
+export const space_id = CONTENTFUL_SPACE_ID
+
+const renderOptions = {
+  renderNode: {
+    [INLINES.ASSET_HYPERLINK]: (node, children) => {
+      if (!node) {
+        return
+      }
+
+      const { file, title } = node.data.target.fields
+      const aProps = {}
+      if (Boolean(file.contentType.match(/^application\/pdf($|;)/i))) {
+        aProps.download = file.fileName
+        aProps.target = '_blank'
+      }
+
+      return <a href={file.url} title={title} {...aProps}>{children}</a>
+    },
+  }
 }
 
+export const config = { preview, access_token, host, space_id, renderOptions }
 export default config

src/lib/contentful/entries.js

@@ -10,6 +10,14 @@ export async function fetchEvents(query = {}) {
   return items
 }
 
+export async function fetchRedirects() {
+  const items = await client.getEntriesCachedItems({
+    content_type: 'redirect'
+  })
+
+  return items
+}
+
 export async function fetchBusinesses() {
   const items = await client.getEntriesCachedItems({
     content_type: 'business'

src/lib/contentful/netlify-redirects.js

@@ -0,0 +1,35 @@
+import path from 'path'
+import { writeFile } from 'fs/promises'
+import { fetchRedirects } from './entries'
+
+const mediaTarget = (media) => media && `https:${media.fields.file.url}`
+const entryTarget = (entry) => {
+  if (!entry) return
+
+  const contentType = entry.sys.contentType.sys.id
+  const slug = entry.fields.slug
+
+  return `/${contentType}/${slug}`
+}
+const urlTarget = (url) => url
+
+export async function writeRedirects() {
+  const file_name = path.join(__dirname, '..', '..', '..', 'public', '_redirects.contentful')
+  const redirects = await fetchRedirects()
+
+  const data = redirects.map(redirect => {
+    const { alias, code, media, entry, url } = redirect.fields
+    const statusCode = code.split(' ')[0]
+    const target = mediaTarget(media) || entryTarget(entry) || urlTarget(url)
+
+    if (!target) {
+      throw new Error(`invalid target: ${target}`)
+    }
+
+    return { alias, target, statusCode }
+  })
+
+  const output = data.map(({ alias, target, statusCode }) => [`/${alias}`, target, `${statusCode}!`].join(' ')).join('\n')
+
+  await writeFile(file_name, output)
+}

src/lib/contentful/render.js

@@ -0,0 +1,10 @@
+import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
+import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
+import config from './config'
+
+export const renderComponents =
+  (content, options = config.renderOptions) =>
+    documentToReactComponents(content, options)
+
+export const render = { renderComponents, documentToHtmlString, documentToReactComponents }
+export default render

src/lib/utils.js

@@ -1,3 +1,40 @@
 import { DateTime } from 'luxon'
 
 export const YEAR = DateTime.now().year
+
+// size: short, med(ium)?, full, huge
+export const formatDateTime = (date, options = {}) => {
+  const dt = DateTime.fromISO(date)
+  const { size } = { size: 'medium', ...options }
+
+  switch (size) {
+    // TODO: case 'full': {}
+
+    case 'short': {
+      // year … Jan 1, 2000 at 1pm
+      // … Jan 1 at 1pm
+      // weekday … Mon, Jan 1 at 1pm
+      // weekday,minutes … Mon, Jan 1 at 1:30pm
+      // weekday,year,minutes … Mon, Jan 1, 2000 at 1:30pm
+      const { year, weekday, minutes } = { year: true, weekday: false, minutes: false, ...options }
+      const wd = weekday ? `${dt.toFormat('ccc')}, ` : ''
+      const md = dt.toFormat('LLL d')
+      const y = year ? `, ${dt.toFormat('yyyy')}` : ''
+      const t = minutes ? dt.toFormat('t').toLowerCase().replace(' ', '') : dt.toFormat('h') + dt.toFormat('a').toLowerCase()
+      return [wd, md, y, ' at ', t].join('')
+    }
+    case 'med':
+    case 'medium':
+    default: {
+      // January 1, 2000 at 1:30 PM
+      // Monday, January 1, 2000 at 1:30 PM
+      // Monday, January 1, at 1:30 PM
+      const { year, weekday } = { year: true, weekday: false, ...options }
+      const wd = weekday ? `${dt.toFormat('cccc')}, ` : ''
+      const md = dt.toFormat('LLLL d')
+      const y = year ? `, ${dt.toFormat('yyyy')}` : ''
+      const t = ` at ${dt.toFormat('t')}`
+      return [wd, md, y, t].join('')
+    }
+  }
+}

src/pages/about-us.js

@@ -14,7 +14,7 @@ import EntrySign from '@/images/wix/EntrySign.jpg'
 
 import { fetchBoardMembers } from '@/lib/contentful/entries'
 
-export default function AboutUs({boardMembers}) {
+export default function AboutUs({ boardMembers }) {
   return <>
     <Title>About Us</Title>
 
@@ -53,6 +53,13 @@ export default function AboutUs({boardMembers}) {
     </Section>
 
     <Section>
+      <div>
+        <h6>Land Acknowledgement</h6>
+        <p>The Renaissance Neighborhood of Tulsa recognizes that our community is built on the original land assigned to two Native Muscogee Creek Citizens, <Link href="https://tulsarenaissancehistory.blogspot.com/2019/08/emma-adeline-addie-perryman.html">Emma Adeline "Addie" Perryman</Link> and <Link href="https://tulsarenaissancehistory.blogspot.com/2022/07/mary-jane-perryman.html">Mary Jane Perryman</Link>. The Perrymans were prominent Tulsans, often called the “First Family of Tulsa.” To learn more about these Creek women and other neighborhood history, visit the <Link href="https://tulsarenaissancehistory.blogspot.com/">RNA History Project</Link>.</p>
+      </div>
+    </Section>
+
+    <Section className="; bg-wixColor26">
       <div>
         <h6>A Little History Lesson</h6>
         <p>The Renaissance Neighborhood Association was established in 1994. An early accomplishment was successfully preventing the demolition of the Casa Loma Building at 11th and Columbia Ave. This building is now known as the historic <a href="https://www.thecampbellhotel.com/history">Max Campbell Building</a> and is listed on the National Register of Historic Places. It has been completely renovated and is open for business today.</p>

src/pages/events.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { DateTime } from 'luxon'
 
 import Title from '@/components/title'
 import Banner from '@/components/banner'
@@ -13,10 +14,11 @@ import YardSale from '@/images/wix/8ddcb11aa53c45ce954624a4aea25994.jpg'
 import First from '@/images/wix/events/scavenger-hunt/first.png'
 import Second from '@/images/wix/events/scavenger-hunt/second.png'
 import styles from '@/styles/events.module.css'
-import sectionStyles from '@/styles/section.module.css'
 
-import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
 import { fetchEvents } from '@/lib/contentful/entries'
+import { renderComponents } from '@/lib/contentful/render'
+import { formatDateTime } from '@/lib/utils'
+
 
 const CHILIFEST_IMAGES = [
   require('@/images/wix/ChiliFest/BannerOnTable.jpg'),
@@ -61,25 +63,33 @@ const PARKFEST_IMAGES = [
 export async function getStaticProps() {
   return {
     props: {
-      events: await fetchEvents({order: 'fields.date'})
+      events: await fetchEvents({ order: 'fields.date' })
     }
   }
 }
 
-function Event({event}) {
-  const __html = documentToHtmlString(event.fields.content)
+function Event({ event }) {
+  const { title, date, location, content } = event.fields
+
+  const formatDate = (date) => {
+    return formatDateTime(date, { weekday: true })
+  }
 
   return <>
-    <Section id={event.sys.id}>
+    <Section id={event.fields.slug}>
       <div className={styles.event}>
-        <h2 className={styles.event_title}>{event.fields.title}</h2>
-        <div dangerouslySetInnerHTML={{__html}} />
+        <h2 className={styles.event_title}>{title}</h2>
+
+        {date && <div><b>{formatDate(date)}</b></div>}
+        {location && <div><b>{location}</b></div>}
+
+        {renderComponents(content)}
       </div>
     </Section>
   </>
 }
 
-export default function Events({events}) {
+export default function Events({ events }) {
   return <>
     <Title>Events</Title>
 

src/pages/index.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import Title from '@/components/title'
+import { DateTime } from 'luxon'
 import { css } from 'twin.macro'
 
 import { Gallery, GalleryText, GalleryButtons, GalleryButton } from '@/components/gallery'
-import { UpcomingEventsSection, UpcomingEvent} from '@/components/home/upcoming-events'
-import { WhatsNewsSection, WhatsNewsItem} from '@/components/home/whats-news'
+import { UpcomingEventsSection, UpcomingEvent } from '@/components/home/upcoming-events'
+import { WhatsNewsSection, WhatsNewsItem } from '@/components/home/whats-news'
 
 import RNAalbum7 from '@/images/wix/home-page/gallery/RNAalbum7.jpg';
 const IMAGES = [
@@ -23,30 +24,32 @@ import RNAshirt1 from '@/images/wix/home-page/news/RNAshirt1.jpg'
 import Alert from '@/images/wix/home-page/news/Alert.jpg'
 import NewRNAsign1 from '@/images/wix/home-page/news/NewRNAsign1.jpg'
 
-import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
+import { renderComponents } from '@/lib/contentful/render'
 import { fetchEvents } from '@/lib/contentful/entries'
+import { writeRedirects } from '@/lib/contentful/netlify-redirects'
+import { formatDateTime } from '@/lib/utils'
 
 export async function getStaticProps() {
+  await writeRedirects()
+
   return {
     props: {
-      events: await fetchEvents({order: 'fields.date'})
+      events: await fetchEvents({ order: 'fields.date' })
     }
   }
 }
 
-function UpcomingEventContent({event}) {
-  const field = event.fields.content
-  const __html = documentToHtmlString({
-    ...field,
-    content: field.content.slice(0, 1)
-  })
+function UpcomingEventContent({ event }) {
+  const { title, date, location, content } = event.fields
 
-return <>
-    <div dangerouslySetInnerHTML={{__html}} />
-  </>
+  return <div>
+    {date && <p><b>{formatDateTime(date, { size: 'short', year: false, weekday: true })}</b></p>}
+    {location && <p>{location}</p>}
+    {content && renderComponents({ ...content, content: content.content.slice(0, 1) })}
+  </div>
 }
 
-export default function Home({events}) {
+export default function Home({ events }) {
   return <>
     <Title>Home</Title>
 
@@ -65,15 +68,16 @@ export default function Home({events}) {
 
     <UpcomingEventsSection title="Upcoming Events">
       {events.map((event, i) => (
-        <UpcomingEvent key={i} title={event.fields.title}  href={`/events#${event.sys.id}`}>
+        <UpcomingEvent key={i} title={event.fields.title} href={`/events#${event.fields.slug}`}>
           <UpcomingEventContent event={event} />
         </UpcomingEvent>
       ))}
-      <UpcomingEvent title="Every 2nd Friday"  href="/events#second-friday">
-        <p>
-          <b>“Second Friday” Meet-n-Greet</b><br />
-          Renaissance Brewery
-        </p>
+      <UpcomingEvent title="“Second Friday” Meet-n-Greet" href="/events#second-friday">
+        <div>
+          <p><b>Every 2nd Friday</b></p>
+          <p>Renaissance Brewery at 12th & Lewis</p>
+          <p>A social event for residents of our neighborhood.</p>
+        </div>
       </UpcomingEvent>
     </UpcomingEventsSection>
 

yarn.lock

@@ -917,11 +917,23 @@
     "@contentful/rich-text-types" "^16.0.2"
     escape-html "^1.0.3"
 
+"@contentful/rich-text-react-renderer@^15.16.3":
+  version "15.16.3"
+  resolved "https://registry.yarnpkg.com/@contentful/rich-text-react-renderer/-/rich-text-react-renderer-15.16.3.tgz#f6536c517ae903351e265243f33d6f56deed4d1f"
+  integrity sha512-aFtgKn8Yt19qpsez9RdV65/khPhy7GnWXhjhiCMSDVY9vDwyPIPfoKkInt+vePAk7rxlleXds5s7ba6Sm5zKQg==
+  dependencies:
+    "@contentful/rich-text-types" "^16.0.3"
+
 "@contentful/rich-text-types@^16.0.2":
   version "16.0.2"
   resolved "https://registry.yarnpkg.com/@contentful/rich-text-types/-/rich-text-types-16.0.2.tgz#779bc76b5159152b3a9e908e6a04cb9342faa9b1"
   integrity sha512-ovbmCKQjlyGek4NuABoqDesC3FBV3e5jPMMdtT2mpOy9ia31MKO0NSFMRGZu7Q+veZzmDMja8S1i/XeFCUT9Pw==
 
+"@contentful/rich-text-types@^16.0.3":
+  version "16.0.3"
+  resolved "https://registry.yarnpkg.com/@contentful/rich-text-types/-/rich-text-types-16.0.3.tgz#c590268483e07881fb01b6799e837337093e42bf"
+  integrity sha512-BsUtXj93jo5XUt0YeUwfCkMWRoZIzJDPUIY4vMy9SwGIO9olTsMoQKadjA2ktlmK+Gg6710WH3eFKZxj2q39Iw==
+
 "@dabh/diagnostics@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@dabh/diagnostics/-/diagnostics-2.0.2.tgz#290d08f7b381b8f94607dc8f471a12c675f9db31"