[epic] Trial flowershow with some sites

[rufuspollock]

Trial product e.g. on flowershow itself or building Life Itself new community site. Possible candidates

• flowershow site itself 🚧2022-07-06 50% - already in use but more needed e.g. for landing page
• ecosystem site 🚧2022-07-06 60% 2022-07-08 90% migration done and writing up learnings
• web3 (refactor) ?? ✅2023-03-27 ❌ not needed for now
• Life Itself community site ✅2023-01-05 completed in jan 2023 https://lifeitself.org/

Acceptance

• flowershow.app running off this ✅2022-08-17 this is now fully working and we have split out components from main app into site
• ecosystem site running off this 🚧2022-08-17 running but we need to update as had custom stuff
• #104
• learnings and challenges written up

Tasks

• flowershow site running off this
  • learnings and challenges
• ecosystem site running off this Flowershow conversion life-itself/second-renaissance#81
  • Learnings from Flowershow v0.1 trial with ecosystem @khalilcodes
    • Diff all changed files and note changes with any insights
    • Summarize questions arising below
  • Immediate changes to upstream
    • Move allDocuments change upstream to flowershow
    • Move upstream change to unstyled.js (?)

Issues from ecosystem upgrade

• How would we handle changes to mdx.js
• How do i know which components come from flowershow and can be upgraded vs are custom to the user Refactor flowershow so all flowershow components are in a subfolder called flowershow or similar. Or have user components in a specific folder distinct from components
• When trying to reuse index.js encountered: ✅2022-08-23 the resolution for now is to use tailwind and JS components in your index.md
  • You cannot define a route with the same specificity as a optional catch-all route ("/" and "/[[...slug]]")
  • Two direction to go in: a) try using mdx and moving stuff into mdx b) use index.js which means changing [[...slug]] to [..slug] ✅2022-08-23 move stuff into mdx
    • First option requires tailwind parsing of markdown directory ✅2022-08-23 we've done this
    • Also requires loading data in some way or other ✅2022-08-23 see Separate default (template) components and user defined components #88 i think for resolution on this
• General question re flowershow: theming seems so essential and is quite limited without access to Layout + tailwind stuff
  • Once you give that why not whole of nextjs
  • Other aspect of nextjs is basically data passing

Notes from Ecosystem upgrade

Changes

This shows changes to files in the app in ecosystem vs original flowershow. Additions aren't a problem at all. It's changes that are a problem.

components
  Hero          # ADD
  Link
  Search
  TernaryPlot
  CircularVis
  
  MDX.js            # CHANGED

layouts
  unstyled.js      # ~~CHANGED~~ (MINOR and MERGED UPSTREAM)
  profile.js       	  # ADD

pages
  _app.js          # CHANGED
  [[...slug]].js   # CHANGED

package.json  # CHANGED all the d3 stuff (git diff would be useful here)

unstyled.js

git diff 1766db630dcac5eaf81e00d95bdbe7a3a3647447 5cd6035c8963ea7819272e8d38235adacc49dc5f layouts/unstyled.js

 export default function UnstyledLayout ({ children, frontMatter }) {
-    return children
+    return <div className="prose mx-auto max-w-full">{children}</div>
 }

MDX.js

(UPDATE)
git diff 1766db630dcac5eaf81e00d95bdbe7a3a3647447 d9154b0e5438a18c1b5596ce0f4e22c389121379 components/MDX.js

+import { Fragment } from 'react'
+import dynamic from 'next/dynamic'
 import Head from 'next/head'
+import Link from 'next/link'
+import Hero from './Hero'
+import Search from './Search'
+
+const TernaryPlot = dynamic(() => import('./TernaryPlot'))
+const CircularVis = dynamic(() => import('./CircularVis'))

 const components = {
   Head,
+  Hero,
+  Link,
+  Search,
+  svg: props => <Fragment {...props} />,
+  TernaryPlot,
+  CircularVis,

git diff 1766db630dcac5eaf81e00d95bdbe7a3a3647447 4b40577c51f407e5e278140163339fc3b722ee0b components/MDX.js

+import { Fragment } from 'react'
 import Head from 'next/head'
+import Link from 'next/link'
+import Hero from './Hero'
+import TernaryPlot from './TernaryPlot'
+import CircularVis from './CircularVis'
+import Search from './Search'
 
 const components = {
   Head,
+  Hero,
+  Link,
+  Search,
+  svg: props => <Fragment {...props} />,
+  TernaryPlot,
+  CircularVis,
   wrapper: ({ layout, ...rest }) => {
     const Layout = require(`../layouts/${layout}`).default
     return <Layout {...rest} />

[[...slug]].js

• allDocuments changes is an artefact and should move upstream to flowershow
• allProfiles filtering should be in lib/db.js

(UPDATE)

lib/db.js

import { allProfiles } from 'contentlayer/generated';

export default async function getProfiles() {
  const result = await allProfiles.filter(profile => 
    !(profile.curation_status.includes('N') || profile.curation_status.includes('?'))
  )
  return result
} 

git diff 1766db630dcac5eaf81e00d95bdbe7a3a3647447 44acfcfa9d8e9eae3f618cb6568e348c77b1d12e pages/\[\[...slug\]\].js

-import { allPages } from "contentlayer/generated";
+import { allDocuments } from "contentlayer/generated";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import MdxPage from "../components/MDX";
+import getProfiles from "../lib/db";

-export default function Page({ body, ...rest }) {
-  const Component = useMDXComponent(body.code);
+export default function Page({ page: { body, ...rest }, orgs }) {
+  const Component = useMDXComponent(body.code, { orgs });
+
   const children = {
     Component,
     frontMatter: {
@@ -16,13 +18,17 @@ export default function Page({ body, ...rest }) {
 export async function getStaticProps({ params }) {
   // params.slug is undefined for root index page
   const urlPath = params.slug ? params.slug.join("/") : '';
-  const page = allPages.find((p) => p.url === urlPath);
-  return { props: page };
+  const page = allDocuments.find((p) => p.url_path === urlPath);
+
+  //  load orgs only for pages that require them (eg. pages containing a vis).
+  const orgs = /{orgs}/.test(page.body.code) ? await getProfiles() : null
+
+  return { props: { page, orgs } };
 }

 export async function getStaticPaths() {
-  const paths = allPages.map((page) => {
-    const parts = page.url.split("/");
+  const paths = allDocuments.map((page) => {
+    const parts = page.url_path.split("/");
     return { params: { slug: parts } };
   });

git diff 1766db630dcac5eaf81e00d95bdbe7a3a3647447 ca1ce9a76e1840bd53492dcb3885880effd5c5b5 pages/\[\[...slug\]\].js

-import { allPages } from "contentlayer/generated";
+import { allDocuments, allProfiles } from "contentlayer/generated";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import MdxPage from "../components/MDX";
 
 export default function Page({ body, ...rest }) {
-  const Component = useMDXComponent(body.code);
+  const filteredProfiles = allProfiles.filter(profile => 
+    !(profile.curation_status.includes('N') || profile.curation_status.includes('?'))
+  )
+
+  const Component = useMDXComponent(body.code, {
+    orgs: filteredProfiles
+  });
+  
   const children = {
     Component,
     frontMatter: {
@@ -16,13 +28,13 @@ export default function Page({ body, ...rest }) {
 export async function getStaticProps({ params }) {
   // params.slug is undefined for root index page
   const urlPath = params.slug ? params.slug.join("/") : '';
-  const page = allPages.find((p) => p.url === urlPath);
+  const page = allDocuments.find((p) => p.url_path === urlPath);
   return { props: page };
 }
 
 export async function getStaticPaths() {
-  const paths = allPages.map((page) => {
-    const parts = page.url.split("/");
+  const paths = allDocuments.map((page) => {
+    const parts = page.url_path.split("/");
     return { params: { slug: parts } };
   });

package.json

git diff 1766db630dcac5eaf81e00d95bdbe7a3a3647447 d0d578f9a71c45dd8146183d0c79771ca3982347 package.json

     "@silvenon/remark-smartypants": "^1.0.0",
     "@tailwindcss/typography": "^0.5.2",
     "contentlayer": "^0.2.5",
+    "d3": "^7.6.1",
+    "d3-ternary": "^2.0.14",
+    "fuse.js": "^6.6.2",
     "gray-matter": "^4.0.3",
+    "itemsjs": "^2.1.15",
     "next": "^12.1.0",
     "next-contentlayer": "^0.2.5",
     "next-seo": "^4.28.1",
@@ -25,6 +29,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.22.2",
+    "@tailwindcss/forms": "^0.5.2",
     "autoprefixer": "^10.4.4",
     "postcss": "^8.4.12",
     "tailwindcss": "^3.0.23"

Notes from creating Flowershow website using Flowershow template

MDX syntax support

MDX syntax fully works and is documented on this page - https://flowershow.app/docs/mdx.

Most important syntax elements that work:

• JSX,
• ESM import and export statements which allow for importing as well as locally defining components/data,
• evaluating JS expressions wrapped in {}.

Separation of template components and user defined components

You can have custom components outside of the Flowershow template's /components dir and still import them in MDX files.

In order to have less confusing import paths atm we're symlinking the folder with custom components (in our case /site/components) to flowershow/templates/default/components. See issue #88 to learn more.

Tailwind

You can use Tailwind to style JSX components in your MDX files. This is documented here: https://flowershow.app/docs/tailwind

[rufuspollock]

@olayway can you put notes / links about how we sorted out using custom components and our overall learnings:

• Doing html/tailwind stuff in mdx fully works
• Link to the MDX learnings and point to folder where we have custom components

[olayway]

can you put notes / links about how we sorted out using custom components and our overall learnings:

• Doing html/tailwind stuff in mdx fully works
• Link to the MDX learnings and point to folder where we have custom components

@rufuspollock, done

[rufuspollock]

FIXED. All done - lots learned 🎉 🚢