Trial product e.g. on flowershow itself or building Life Itself new community site. Possible candidates
Acceptance
Tasks
Issues from ecosystem upgrade
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
(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
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent