feat: small cards for pedro (#123)

* portable text custom links * beta banner * contact us to typeform * accessibility * semi --------- Co-authored-by: Thomas O'Neill <[email protected]>
theopensystemslab · Jan 10, 2024 · 746f750 · 746f750
1 parent 47b3faa
commit 746f750
Show file tree

Hide file tree

Showing 11 changed files with 168 additions and 62 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "semi": false
+}
diff --git a/components/BetaBanner.tsx b/components/BetaBanner.tsx
@@ -0,0 +1,44 @@
+import { Close } from "@carbon/icons-react"
+import { useState } from "react"
+
+const BetaBanner = () => {
+  const [open, setOpen] = useState(true)
+
+  return open ? (
+    <div className="flex justify-between py-1.5 px-2 text-sm w-full bg-safety">
+      <div>
+        <span className="font-bold ml-12">BETA</span>
+        <span className="ml-2">{`This is a prototype. `}</span>
+        <span>
+          <a
+            className="underline"
+            href="https://form.typeform.com/to/j262YI8p"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Register your support
+          </a>
+          {` and `}
+          <a
+            className="underline"
+            href="https://form.typeform.com/to/j262YI8p"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            share your feedback
+          </a>
+          {`.`}
+        </span>
+      </div>
+      <div>
+        <span>
+          <button onClick={() => void setOpen(false)}>
+            <Close size={"16"} />
+          </button>
+        </span>
+      </div>
+    </div>
+  ) : null
+}
+
+export default BetaBanner
diff --git a/components/ContentPage.tsx b/components/ContentPage.tsx
@@ -1,14 +1,35 @@
 import { Page } from "@/lib/types"
-import { PortableText } from "@portabletext/react"
+import { ArrowUpRight } from "@carbon/icons-react"
+import { PortableText, PortableTextComponents } from "@portabletext/react"
 import Head from "next/head"
 import React from "react"
 
-export const pageComponents = {
+export const pageComponents: PortableTextComponents = {
   block: {
-    normal: ({ children }: { children?: React.ReactNode }) => <p className="mb-4 text-lg">{children}</p>,
-    blockquote: ({ children }: { children?: React.ReactNode }) => <blockquote className="text-gray-400 mb-4">{children}</blockquote>,
-    h2: ({ children }: { children?: React.ReactNode }) => <h2 className="mb-2 mt-8 font-semibold text-lg">{children}</h2>,
-  }
+    normal: ({ children }) => <p className="mb-4 text-lg">{children}</p>,
+    blockquote: ({ children }) => (
+      <blockquote className="text-gray-400 mb-4">{children}</blockquote>
+    ),
+    h2: ({ children }) => (
+      <h2 className="mb-2 mt-8 font-semibold text-lg">{children}</h2>
+    ),
+  },
+  marks: {
+    link: ({ children, value }) => {
+      return (
+        <a
+          href={value.href}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center space-x-1 underline"
+        >
+          <span>{children}</span>
+
+          <ArrowUpRight />
+        </a>
+      )
+    },
+  },
 }
 
 interface ContentPageProps {
@@ -22,15 +43,10 @@ export const ContentPage = ({ page, title }: ContentPageProps) => {
       <Head>
         <title>{title || page?.title} - The Atlas of Ownership</title>
       </Head>
-      <h1 className="title mb-12 sm:min-w-[40vw]">
-        {page?.title}
-      </h1>
+      <h1 className="title mb-12 sm:min-w-[40vw]">{page?.title}</h1>
       <div className="flex flex-col">
-        <PortableText
-          value={page?.content}
-          components={pageComponents}
-        />
+        <PortableText value={page?.content} components={pageComponents} />
       </div>
     </div>
   )
-}
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -9,8 +9,10 @@ const FooterLinks = () => {
     { title: "About", path: "/about" },
     { title: "Explore the patterns", path: "/patterns" },
     { title: "Licence", path: "/licence" },
+    { title: "Accessibility", path: "/accessibility" },
     { title: "Terms of use", path: "/terms-of-use" },
   ]
+
   return (
     <div className={css.footerLinkContainer}>
       <div className={css.footerLinks}>
@@ -19,10 +21,19 @@ const FooterLinks = () => {
             <a>{link.title}</a>
           </Link>
         ))}
-        <a href="https://airtable.com/shru3ZGjdyhEGTzx6" target="_blank" rel="noreferrer">
+        <a
+          href="https://airtable.com/shru3ZGjdyhEGTzx6"
+          target="_blank"
+          rel="noreferrer"
+        >
           Submit an entry
         </a>
-        <a href="mailto:[email protected]">
+
+        <a
+          href="https://form.typeform.com/to/j262YI8p"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           Contact us
         </a>
       </div>
@@ -31,12 +42,15 @@ const FooterLinks = () => {
 }
 
 const Contributors = () => {
-  const { data: contributors, error: contributorsError } = trpc.contributors.useQuery()
+  const { data: contributors, error: contributorsError } =
+    trpc.contributors.useQuery()
   return (
     <div className={css.contributors}>
       <b className="text-md mb-3 block">Contributors</b>
       <div className="grid grid-cols-auto grid-rows-4 grid-flow-col gap-1">
-      { contributors?.map(contributor => <p key={contributor}>{contributor}</p>)}
+        {contributors?.map((contributor) => (
+          <p key={contributor}>{contributor}</p>
+        ))}
       </div>
     </div>
   )
@@ -55,27 +69,27 @@ const OSLLogo = () => (
 
 const SocialIcons = () => {
   const socialLinks = [
-    { 
-      url: "https://twitter.com/OpenSystemsLab", 
-      component: <LogoTwitter size={32} />
+    {
+      url: "https://twitter.com/OpenSystemsLab",
+      component: <LogoTwitter size={32} />,
     },
-    { 
-      url: "https://github.com/theopensystemslab", 
-      component: <LogoGithub size={32} />
+    {
+      url: "https://github.com/theopensystemslab",
+      component: <LogoGithub size={32} />,
     },
-    { 
-      url: "https://www.opensystemslab.io/", 
-      component: <OSLLogo />
+    {
+      url: "https://www.opensystemslab.io/",
+      component: <OSLLogo />,
     },
   ]
-  
+
   return (
     <div className={css.socialIcons}>
-      { socialLinks.map((link, i) => (
-        <a 
-          key={`social-link-${i + 1}`} 
-          href={link.url} 
-          target="_blank" 
+      {socialLinks.map((link, i) => (
+        <a
+          key={`social-link-${i + 1}`}
+          href={link.url}
+          target="_blank"
           rel="noreferrer"
           className="text-white hover:text-gray-500"
         >
@@ -94,17 +108,23 @@ const Disclaimer = () => (
 )
 
 const Logos = () => {
-  const { data: footerLogos } = trpc.footerLogos.useQuery();
+  const { data: footerLogos } = trpc.footerLogos.useQuery()
 
   return (
     <div className="col-span-full">
       <b className="text-md block mb-2">Thanks to</b>
       <div className="flex items-center flex-wrap gap-y-1 gap-x-12 md:pr-20 justify-start">
-        {
-          footerLogos && footerLogos.map(footerLogo => (
-            <Image key={footerLogo._id} objectFit="contain" height="100" width="200" src={footerLogo.logo.asset.url} alt={footerLogo.description}/>
-          ))
-        }
+        {footerLogos &&
+          footerLogos.map((footerLogo) => (
+            <Image
+              key={footerLogo._id}
+              objectFit="contain"
+              height="100"
+              width="200"
+              src={footerLogo.logo.asset.url}
+              alt={footerLogo.description}
+            />
+          ))}
       </div>
     </div>
   )

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -10,13 +10,15 @@ const Header = () => (
         A map of property rights and obligations across time and space
       </h2>
       <Link href="/about">
-        <a className="pointer-events-auto mt-2 text-sm sm:text-lg opacity-75 underline hover:opacity-100">About</a>
+        <a className="pointer-events-auto mt-2 text-sm sm:text-lg opacity-75 underline hover:opacity-100">
+          About
+        </a>
       </Link>
     </div>
     <div className="h-fit mt-4 flex gap-10 pointer-events-auto text-white">
       <Link href="/patterns">
         <a className={css.link}>Patterns</a>
-        </Link>
+      </Link>
       <Link href="/about">
         <a className={css.link}>About</a>
       </Link>

diff --git a/components/layout/GlobeLayout.tsx b/components/layout/GlobeLayout.tsx
@@ -7,12 +7,18 @@ import Footer from "../Footer"
 import Header from "../Header"
 import MapboxGlobe from "../map/MapboxGlobe"
 import Sidebar from "../sidebar/Sidebar"
+import BetaBanner from "../BetaBanner"
 
 type Props = PropsWithChildren<{}>
 
 const SubmitButton = () => (
   <div className={css.submitButtonContainer}>
-    <a href="https://airtable.com/shru3ZGjdyhEGTzx6" target="_blank" rel="noreferrer" className={css.submitButton}>
+    <a
+      href="https://airtable.com/shru3ZGjdyhEGTzx6"
+      target="_blank"
+      rel="noreferrer"
+      className={css.submitButton}
+    >
       Submit an entry <ArrowRight className="ml-2" size={16} />
     </a>
   </div>
@@ -46,6 +52,7 @@ const GlobeLayoutComponent = (props: Props) => {
         {children}
       </motion.div>
       <div className="min-w-full fixed inset-0 overflow-y-auto overflow-x-hidden">
+        <BetaBanner />
         <Header />
         <div className="w-full h-screen max-h-[85vh] relative">
           <MapboxGlobe />

diff --git a/lib/types.ts b/lib/types.ts
@@ -1,5 +1,3 @@
-import { PortableTextBlockComponent } from "@portabletext/react"
-
 export type Geopoint = {
   lat: number
   lng: number
@@ -40,7 +38,7 @@ export type PatternClass = {
 }
 
 export type PatternInfo = {
-  name: string,
+  name: string
   rights: Pattern[]
   obligations: Pattern[]
 }
@@ -111,4 +109,4 @@ export type Page = {
   slug?: string
   title?: string
   content?: any[]
-}
+}
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@carbon/icons-react": "^11.9.0",
-    "@portabletext/react": "^1.0.6",
+    "@portabletext/react": "^3.0.11",
     "@sanity/image-url": "^1.0.1",
     "@tanstack/react-query": "^4.22.0",
     "@trpc/client": "^10.9.0",

diff --git a/pages/accessibility.tsx b/pages/accessibility.tsx
@@ -0,0 +1,15 @@
+import { trpc } from "@/lib/trpc"
+import NoopLayout from "../components/layout/NoopLayout"
+import { ContentPage } from "@/components/ContentPage"
+
+const AccessibilityPage = () => {
+  const { data: accessibilityPage } = trpc.page.useQuery({
+    pageSlug: "accessibility",
+  })
+
+  return <ContentPage page={accessibilityPage} />
+}
+
+AccessibilityPage.getLayout = NoopLayout
+
+export default AccessibilityPage
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,6 +16,7 @@ module.exports = {
         stewardship: 'rgb(var(--color-stewardship) / <alpha-value>)',
         use: 'rgb(var(--color-use) / <alpha-value>)',
         access: 'rgb(var(--color-access) / <alpha-value>)',
+        safety: "#ECE81A",
       },
     },
   },

diff --git a/yarn.lock b/yarn.lock
@@ -816,25 +816,25 @@
     widest-line "^3.1.0"
     wrap-ansi "^6.2.0"
 
-"@portabletext/react@^1.0.6":
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/@portabletext/react/-/react-1.0.6.tgz"
-  integrity sha512-j6BprLiwFz3zr1Lo6BxM2sQ1b3g1JIjGwePeuxqSfbBiEYbGXn2izEckMJ02hSa1f7+RCEUJ+Bojvtzz6BBUaw==
+"@portabletext/react@^3.0.11":
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/@portabletext/react/-/react-3.0.11.tgz#c5f31d9ea990391a3850ba4dfd685373107d9a21"
+  integrity sha512-LATQQRxvP3TlAnFayjYt7kPJcnpAtWH6XHl4RFU31pKb1G6gZlTWTB+chXXAv0uQG6Be7OEdRzCmsz9XFEVNew==
   dependencies:
-    "@portabletext/toolkit" "^1.0.5"
-    "@portabletext/types" "^1.0.3"
+    "@portabletext/toolkit" "^2.0.10"
+    "@portabletext/types" "^2.0.8"
 
-"@portabletext/toolkit@^1.0.5":
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/@portabletext/toolkit/-/toolkit-1.0.6.tgz"
-  integrity sha512-u48kRSOyxbOmy0J//bLg1odTcL5dvPDmobSbiTgR11J/k9eIKCdWRiJtddpEyId/aWGP2bkX4ol2RMPCmAPCIg==
+"@portabletext/toolkit@^2.0.10":
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/@portabletext/toolkit/-/toolkit-2.0.10.tgz#ddcf88cb76b287ff9d5c94f69a6b370a9c9aba9c"
+  integrity sha512-d+F9JvpnMEx7kd6saZ9OWA4U1Iwuokh6TOht7iqkfWU+0ivh9yM4v+b0Kpu+iiPcElicoabhtXol+yTvWJ1jDw==
   dependencies:
-    "@portabletext/types" "^1.0.3"
+    "@portabletext/types" "^2.0.8"
 
-"@portabletext/types@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/@portabletext/types/-/types-1.0.3.tgz"
-  integrity sha512-SDDsdury2SaTI2D5Ea6o+Y39SSZMYHRMWJHxkxYl3yzFP0n/0EknOhoXcoaV+bxGr2dTTqZi2TOEj+uWYuavSw==
+"@portabletext/types@^2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@portabletext/types/-/types-2.0.8.tgz#34aec838701482f838bdd0ee07a9e31dc01a9230"
+  integrity sha512-eiq9/kMX2bYezS4/kLFk3xNnruCFjCDdw6aYEv5ECHVKkYROiuLd3/AsP5d7tWF3+kPPy6tB0Wq8aqDG/URHGA==
 
 "@rushstack/eslint-patch@^1.1.3":
   version "1.1.4"