Flowershow conversion

[rufuspollock]

Introduce flowershow and/or refactor towards it.

Acceptance

• Landing page still working and similar to before (not exact layout or look but in functionality) ✅2022-07-08 see https://ecosystem.lifeitself.us
• Profile page similar to before ✅2022-07-08 https://ecosystem.lifeitself.us/profiles/life-itself
• Can still use components specific to ecosystem e.g. around the viz ✅2022-07-08 see front page which is doing this
• Using contentlayer ✅2022-07-04 - this is working.

NB: one big issue is we are passing all profile data to every page so the basic page load is now 500kb!! This is because this is the only way we have found to pass data in with contentlayer and mdx atm. See datopian/flowershow#20 for details.

Tasks

• Push current ecosystem to backup git repo e.g. ecosystem-old (this is a new repo on github so that we can keep issues with ecosystem)
• Start a clean separate folder and git repo
• Install flowershow into the root folder using degit or npx create-next-app (flowershow/template/default ??) ✅2022-06-29 using degit as very fast and allows clean reinstalling
• copy over content folder
• Add userConfig.js
• Run app

Refactor

• Front page working using mdx in content/index.md
  • Copy over index.js (think this is easier than trying to put stuff in markdown - unless we use tailwind in markdown) ❌ does not work
  • jsx syntax in markdown eg. <div className="...">....</div> See content/index.md
    - svg needs to be wrapped in a fragment ie. <>...</> so added this to mdx components for default behavior
  • custom components in components/mdx.js:
    - Link, Hero, Search, TernaryPlot, CircularVis
  • add profiles/orgs for prop values in markdown eg. <TernaryPlot orgs={orgs} />
    - useMDXComponent(body.code, { orgs: ... } will make orgs accessible as a variable globally (in md files). See pages/[[...slug]].js for implementation.
  • contentlayer setup:
    - defined two separate document types Profile and Topic with respective fields in contentlayer.config.js
javascript import { allDocuments, allProfiles, allTopics } from 'contentlayer/generated' /** allDocuments => [ allPages, allProfiles, allTopics ] using allDocuments to generate all paths allProfiles => getOrganizations() */
  • search working - ✅ Done after converting to frontmatter name => title
  • Data fix: After orgs script conversion incontent/profiles/..., values in frontmatter differ from the orignal json. eg... topic: 0 // this was an empty array [] in the json db. Why we need an array? => used in vis components to map by topics FIX: resolve 0 values to array for lists in contentlayer.config.js => Profile
• Profile page working ✅ Done
  • custom layout for profiles in layout/profile.js
  • default layout in contentlayer config for Profile is set to: layout: profile

Notes

Where we are now

Current layout of pages

├── [...slug].js
├── _app.js
├── find.js
├── index.js
├── profile
│   └── [...slug].js
├── search.js
├── topic
│   └── [...slug].js
└── vis2.js

Content folder:

├── about.md
├── contribute.md
├── curators.md
├── glossary.md
├── outline.md
└── vis.md

• profile/slug.js generates the profiles using a specifc layout
• search.js runs off the org db

Future

Layout of pages

├── [...slug].js # flowershow
├── _app.js      # flowershow
├── find.js      # hmmm ...
├── index.js     # hope this moves to markdown content
└── vis2.js      # probably can delete / or move to markdown

Content folder:

about.md
contribute.md
curators.md
glossary.md
outline.md
vis.md
profiles/
  life-itself.md
  dark-mountain-labs.md
  ...
blog/ ???

related-efforts # other mapping initiatives

Some interesting findings (only for info)

From https://www.contentlayer.dev/docs/reference/source-files/define-document-type#contenttype-default-markdown

With contentlayer we can even source content from json/yaml files using the contentType...

const Org = defineDocumentType(() => ({
  filePathPattern: '**/*.json',
  contentType: 'data'
  // ...
}))

Also global configs... documentation

defineDocumentType(() => ({
  name: 'GlobalConfig',
  filePathPattern: `config/global.yaml`,
  isSingleton: true,
  // ...
}))

[rufuspollock]

@khalilcodes progress on site is looking great 👏

First, don't worry too much about getting this too similar to before as we are probably going to deprecate this site soon and merge into main life itself!

In terms of remaining work:

• Front page: only thing is search does not seem to be working
• Profile page: make this roughly similar to before ...

I've added both of these to the description.

[khalilcodes]

@rufuspollock remaining tasks completed with some additional info at the end of notes that may be useful later.

[rufuspollock]

@khalilcodes can you link me to an example of the site with profile page working? For me https://ecosystem.lifeitself.us/profiles/life-itself still shows unformatted page?

[rufuspollock]

FIXED. All working. See https://ecosystem.lifeitself.us/ and https://ecosystem.lifeitself.us/profiles/life-itself.