Trial on Ecosystem v0.2

This is also a chance to trial out a sort of upgrade.

Acceptance

• ecosystem.lifeitself.us is running flowershow v0.2 and working 🚧2022-09-20 pending pull request https://github.com/life-itself/ecosystem/pull/88
• custom components are separated out
• learnings
  • contentlayer stuff
  • components stuff
  • summary of improvements we backported!

Key back-ported features ✅ 2022-09-14

• Some way to configure title of site in navbar e.g. navbarTitle attribute with logo, text, version options. ✅ FIXED set values with navbarTitle attribute in user’s config
• If search settings not configured don’t show search bar ** ✅ FIXED based on algolia config values**
• Ability to only have one theme (e.g. not light and dark) => hide switcher, only have that theme ✅ FIXED
• Misc small fies

Learnings

Upgrading Flowershow on a site that uses contentlayer

To address:

• components not importing in markdown - Big setback to resolve
• document types are modified in contentlayer
• package.json is replaced completely

Tasks

• Create script for upgrading ✅2022-08-29 created an upgrade.sh in packages/flowershow
• Evaluate current setup of ecoystem to check for conflicts and hand merging 🚧2022-08-29 see notes and tasks below

Fixes to flowershow round 1

• 🐛 site won’t build without nextSeo being defined but it is not in default config setup components/MDX.js (39:14) @ MdxPage

  37 |           }
  38 |         ] 
> 39 |       : siteConfig.nextSeo.openGraph.images,
     |        ^
  40 |   }}
  41 | />
  42 | <Component

• data/exampleData.js - why do we have this? Can this live somewhere else e.g. in site? olayway: exampleData moved to /site/data/exampleData; it makes import paths in MDX a bit ugly but I’ve created an issue for it - #154
• siteConfig.js remove commented out nextSeo stuff (since commented out so just noise)
• MDX.js ✅ 2022-08-31
  • Backport Link
  • Backport svg: props => <Fragment {...props} />
• Nav.js We have hard-coded github icon but that should be optional ✅ 2022-08-31
• compontents/TempCallout.js olayway: this one is a temporary substitution for callouts that we’re not supporting yet, I use it in docs to wrap some important info in a nice border; it will be removed once we support callouts
• why do we have a maxWidth mod to tailwindconfig.js - good to have a comment in code for this https://github.com/flowershow/flowershow/commit/94e16ce3f317281d40092a40e427c43a15f0de0c#r82529574 ✅ 2022-08-31
• Why does flowershow have testData array in it? olayway: I was just testing sth and wanted to add a section in our docs about how to create global components or data. There is also GlobalTest component in components object in MDX file - I’ve just removed both of them and created an issue to remember to add this info about global props/components to our docs #155

siteConfig.js

• Need to move siteConfig.js stuff to config.js ✅2022-08-29 done and merged in https://github.com/life-itself/ecosystem/commit/9759a1aa123d8849955aeed3368ea9f14c62126a

MDX.js

• Refactor mdx files to import the components they need
  • Search
  • TernaryPlot
  • CircularVis
  • Hero
• Refactor components to load data themselves where possible ✅ 2022-09-06
• Search from flowershow and ecosystem Search component conflict ✅ 2022-09-06
  • rename ecosystem search component to be called “ProfileSearch”
  • fixes imports

Fixes in ecosystem Round 2

• move ecosystem images to assets content/assets/images (skip profile images for now) ❌2022-09-08 not required IMO - just symlink the public stuff you need into public ✅ 2022-09-12
• fix logo title and author logo ✅ 2022-09-12
• fix footer ‘made with flowershow’ ❌2022-09-08 don’t fix as will be fixed once we do https://github.com/flowershow/flowershow/commit/3a9cd9fbe605e6382dfabb22329a4d9c28848f77 ✅ 2022-09-12
• force light theme **✅2022-09-08 **

Remaining in ecosystem Round 3

• Commit any definite local fixes in ecosystem ✅ 2022-09-08
• Backport remaining fixes ✅ 2022-09-08 https://github.com/flowershow/flowershow/pull/161
  • configs for navbar title, theme
  • forced single theme option (no theme toggle icon)
  • render searchbar if algolia configs are present
  • public/_flowershow folder for flowershow assets (logo and theme button)
• Do final upgrade ✅ 2022-09-08 on flowershow-v0.2
• Merge that (tedious!)
• Write notes
• Done!

pages/[slug...].js

• We need to pass orgs as a prop as well as page ⏭️ could we avoid this by refactoring components like search to load the org profiles themselves
  • 🚩 how do we deal with passing additional data down for e.g. specific types like Profile page ⏭️ at least for ecosystem we assume that we don’t need to since e.g. page has the data it needs

Results round 2

Results round 1

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   components/Layout.js  ✅
	modified:   components/MDX.js     🚧 back port some stuff
	modified:   components/Nav.js     🚧 github issues
	modified:   components/Search.js  🚩 conflict between local and flowershow. Need to rename local.
	modified:   config/siteConfig.js  🚧
	modified:   contentlayer.config.js🚧
	modified:   layouts/docs.js       ✅
	modified:   layouts/unstyled.js   ✅
	modified:   package-lock.json     🚧
	modified:   package.json          🚧
	modified:   pages/[[...slug]].js  🚧 - orgs prop
	modified:   pages/_app.js         ✅
	modified:   tailwind.config.js    🚧 MERGE

Untracked files:
  (use "git add <file>..." to include in what will be committed)
	.env.example                   ❌
	components/MobileNavigation.js ✅
	components/Pre.js              ✅
	components/TempCallout.jsx     ❌
	data/                          ❌
	layouts/blog.js                ✅
	netlify.toml                   ❌
	public/assets                  ✅
	sandbox/                       ❌
	styles/                        ✅

[rufuspollock]

@khalilcodes, @rufuspollock it seems importing components that depend on external packages doesn’t work indeed 😞 I believe it has to do with Contentlayer’s configuration/usage of mdx-bundler. When you actually define the component and import it’s dependencies directly in MDX file (not import them from a file) everything works. So it has sth to do with imports resolution I guess. Anyways, I’ve created an issue in Contentlayer’s repo for that: https://github.com/contentlayerdev/contentlayer/issues/302

Ok, very good to know. Can we open an issue here to track this as it is important thing to track going forward.

[rufuspollock]

@khalilcodes very good summary. can you move the key stuff up into the description and also chat with @olayway especially about the mdx import stuff that does not work.