feat: memery route and first example

app/routes/memery+/_layout.tsx

@@ -0,0 +1,69 @@
+import { Link, Outlet, useLoaderData } from '@remix-run/react'
+import { LoaderFunctionArgs, json } from '@remix-run/node'
+import React from 'react'
+import { getMemeByKey } from './utils.server'
+import { invariantResponse } from 'src/utils/misc'
+import { Carousel, CarouselContent, CarouselItem } from 'src/components/ui/carousel'
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const urlPath = request.url.split('/')
+  const memeKey = urlPath[urlPath.length - 1]
+
+  invariantResponse(memeKey, 'Meme key is required')
+
+  try {
+    const meme = await getMemeByKey(memeKey)
+
+    return json({ meme, memeKey })
+  } catch (error) {
+    console.log(error)
+    throw new Response('Not found', { status: 404 })
+  }
+}
+
+const MemeLayout: React.FC = () => {
+  const { meme, memeKey } = useLoaderData<typeof loader>()
+
+  return (
+    <div className="container p-4">
+      <p className="text-xl text-slate-500">Memery 🛠️</p>
+      <h1 className="mb-1 text-3xl font-bold">{meme.name}</h1>
+      <div className="grid gap-8 lg:grid-cols-2">
+        <div id="meme-render">
+          <Carousel>
+            <CarouselContent>
+              {meme.imageFiles.map((imageFile) => (
+                <CarouselItem className="md:basis-1/2" key={imageFile}>
+                  <img className="h-48" src={`/images/memery/${memeKey}/${imageFile}`} />
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+          <div className="">
+            <h3 className="mt-2 text-xl font-semibold">Meme Structure</h3>
+            <p className="text-sm">{meme.description}</p>
+            <h3 className="mt-2 text-xl font-semibold">Meme Relevance</h3>
+            <p className="text-sm">{meme.relevance}</p>
+          </div>
+        </div>
+        <div id="meme-remix" className="gap-4 rounded-xl border bg-slate-100 px-4 py-2 shadow-lg">
+          <div>
+            <Outlet />
+            <div>
+              <p>Further reading</p>
+              {meme.studies.map((study) => (
+                <div key={study.key}>
+                  <Link className="text-cyan underline underline-offset-auto" to={study.url}>
+                    {study.title}
+                  </Link>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MemeLayout

app/routes/memery+/memestore/platos-cave/meme.json

@@ -0,0 +1,23 @@
+{
+  "name": "Plato's Allegory of the Cave",
+  "description": "Plato's Allegory of the Cave describes a group of people who have lived chained to the wall of a cave all of their lives, facing a blank wall. The people watch shadows projected on the wall from objects passing in front of a fire behind them and begin to ascribe forms to these shadows. According to the allegory, the shadows are as close as the prisoners get to viewing reality. Plato suggests that the shadows are the prisoners' reality but that there is a higher, more true level of reality, hidden from human eyes.",
+  "relevance": "Anything that influences human thought can be characterized as the puppeteers in the allegory of the cave. Fungi like candida and cryptococcus can be considered the puppeteers in this metaphor. This is due to the influence on the gut-brain axis and residence in the brain.",
+  "structure": {
+    "wall-shadows": {
+      "description": "Shadows projected on the wall being mistaken for base reality"
+    },
+    "puppeteers": {
+      "description": "Puppeteers projecting shadows on the wall"
+    },
+    "fire": {
+      "description": "Fire in the cave, the source of the projection"
+    },
+    "prisoners-escaping": {
+      "description": "Prisoners escaping the cave"
+    },
+    "free-explorer": {
+      "description": "Escapees watching the shadows on the wall"
+    }
+  },
+  "studyKeys": ["mycobiome-gut-brain-axis"]
+}

app/routes/memery+/platos-cave/readme.md

@@ -0,0 +1,17 @@
+## Crossing the blood brain barrier
+
+Fungi can access the central nervous system (CNS) by crossing the blood-brain barrier (BBB) through a few key mechanisms:
+
+Transcellular penetration: Fungi like Cryptococcus neoformans can actively invade and penetrate through brain endothelial cells to cross the BBB. This involves interactions between fungal surface proteins and receptors on the endothelial cells. [2](#2),[3](#3).
+
+Paracellular migration: Fungi like Candida albicans may also be able to cross the BBB through the spaces between endothelial cells, by degrading tight junction proteins like E-cadherin. [1](#1)
+
+Trojan horse mechanism: Fungi can also use immune cells like monocytes to "hitch a ride" across the BBB, a process known as the Trojan horse mechanism. [2](#2)
+
+References:
+
+1. <div id="1">[It’s all in your head: antifungal immunity in the brain](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7438209/)</div>
+2. <div id="2">[Blood–brain barrier invasion by Cryptococcus neoformans is enhanced by functional interactions with plasmin](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3352358/)</div>
+3. <div id="3">
+   [Cryptococcus neoformans Infection in the Central Nervous System: The Battle between Host and Pathogen](https://www.mdpi.com/2309-608X/8/10/1069)
+      </div>

app/routes/memery+/platos-cave/route.tsx

@@ -0,0 +1,32 @@
+import { MetaFunction, json } from '@remix-run/node'
+import { getMemeByKey } from '../utils.server'
+
+import Readme from './readme.md'
+import { openGraphImageMeta, redirectToImageGenerator } from 'src/utils/misc'
+
+export const meta: MetaFunction = () => {
+  const title = 'Memery'
+  const subtitle = "Plato's Allegory of the Cave"
+  const body = 'A meme that explores the relationship between fungi and the human brain.'
+  const imageUrl = redirectToImageGenerator({ title, subtitle, body })
+
+  return [
+    { name: 'title', content: title },
+    { property: 'og:title', content: title },
+    { property: 'og:description', content: body },
+    ...openGraphImageMeta(imageUrl),
+  ]
+}
+
+export const loader = async () => {
+  const meme = await getMemeByKey('platos-cave')
+  return json({ meme })
+}
+
+export default function PlatosCaveRoute() {
+  return (
+    <div className="prose">
+      <Readme />
+    </div>
+  )
+}

app/routes/memery+/utils.server.ts

@@ -0,0 +1,36 @@
+import fs from 'fs/promises'
+import path from 'path'
+import { z } from 'zod'
+
+import { StudySchema, studies } from 'src/data/studies'
+
+const MemeSpec = z.object({
+  name: z.string(),
+  description: z.string(),
+  relevance: z.string(),
+  studyKeys: z.array(z.string()),
+})
+
+const MemeStudies = z.array(StudySchema)
+
+const MemeInfo = MemeSpec.extend({
+  studies: MemeStudies,
+  imageFiles: z.array(z.string()),
+})
+
+type MemeInfoType = z.infer<typeof MemeInfo>
+
+export const getMemeByKey = async (memeKey: string): Promise<MemeInfoType> => {
+  const mediaPath = path.join(process.cwd(), `app/routes/memery+/memestore/${memeKey}`)
+  const memePath = path.join(mediaPath, `meme.json`)
+  const meme = await fs.readFile(memePath, 'utf8')
+
+  const parsedMeme = MemeSpec.parse(JSON.parse(meme))
+
+  const files = await fs.readdir(path.join(process.cwd(), 'public/images/memery/' + memeKey))
+  const imageFiles = files.filter((file) => /\.(jpg|jpeg|png|gif)$/i.test(file))
+
+  const memeStudies = studies.filter((study) => parsedMeme.studyKeys.includes(study.key))
+
+  return { ...parsedMeme, imageFiles, studies: memeStudies }
+}

src/data/studies.tsx

@@ -0,0 +1,19 @@
+import { z } from 'zod'
+
+export const StudySchema = z.object({
+  key: z.string(),
+  title: z.string(),
+  url: z.string(),
+})
+
+export type StudyTag = ['crossing-blood-brain-barrier']
+
+export type Study = z.infer<typeof StudySchema>
+
+export const studies: Study[] = [
+  {
+    key: 'mycobiome-gut-brain-axis',
+    title: 'The Mycobiome: A Neglected Component in the Microbiota-Gut-Brain Axis',
+    url: 'https://www.mdpi.com/2076-2607/6/1/22',
+  },
+]