code-hike · pomber · Jul 13, 2023 · Jul 29, 2023 · Aug 1, 2023 · Aug 1, 2023
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "workspaces": {
     "packages": [
       "packages/mdx",
+      "packages/core",
       "playground",
       "site"
     ]

diff --git a/packages/core/app/code.tsx b/packages/core/app/code.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import React from "react"
+import { FlipCode } from "../src/flip-tokens"
+
+export function Code({ children, tokens }) {
+  return (
+    <div>
+      <FlipCode tokens={tokens} />
+    </div>
+  )
+}
diff --git a/packages/core/app/hello.mdx b/packages/core/app/hello.mdx
@@ -0,0 +1,40 @@
+import { Hike } from "./hike"
+import { Scrollycoding } from "./scrollycoding"
+import { Slideshow } from "./slideshow"
+import { Code } from "./code"
+
+## This is an h2 from mdx
+
+And a paragraph
+
+<Hike as={Slideshow}>
+
+hey
+
+```js
+console.log(1)
+// mark
+console.log(2)
+```
+
+ho
+
+---
+
+lets
+
+```js
+console.log("hello 3")
+```
+
+go
+
+---
+
+Bye
+
+```js
+console.log("hello4")
+```
+
+</Hike>
diff --git a/packages/core/app/hike.tsx b/packages/core/app/hike.tsx
@@ -0,0 +1,30 @@
+"use client"
+import React from "react"
+
+export function Hike({ children, as, ...rest }) {
+  // console.log("client steps", children)
+
+  const steps = React.Children.toArray(children).map(
+    (stepElement: any) => {
+      const slotElements = React.Children.toArray(
+        stepElement?.props?.children
+      )
+      const step = {}
+
+      slotElements.forEach((slotElement: any) => {
+        step[slotElement.props.className] =
+          slotElement.props.children
+      })
+
+      return step
+    }
+  )
+
+  // console.log("steps", steps)
+
+  return React.createElement(
+    as,
+    { steps, ...rest },
+    children
+  )
+}
diff --git a/packages/core/app/layout.tsx b/packages/core/app/layout.tsx
@@ -0,0 +1,33 @@
+import { Inter } from "next/font/google"
+
+import { Overpass } from "next/font/google"
+
+const overpass = Overpass({
+  subsets: ["latin"],
+  variable: "--font-overpass",
+  display: "swap",
+})
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+})
+
+export const metadata = {
+  title: "Next.js",
+  description: "Generated by Next.js",
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html
+      lang="en"
+      className={`${inter.className} ${overpass.variable}`}
+    >
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/packages/core/app/page.tsx b/packages/core/app/page.tsx
@@ -0,0 +1,33 @@
+// app/page.tsx
+import Link from "next/link"
+import { allPosts, Post } from "contentlayer/generated"
+
+function PostCard(post: Post) {
+  return (
+    <div className="mb-8">
+      <h2 className="mb-1 text-xl">
+        <Link
+          href={post.url}
+          className="text-blue-700 hover:text-blue-900 dark:text-blue-400"
+        >
+          {post.title}
+        </Link>
+      </h2>
+    </div>
+  )
+}
+
+export default function Home() {
+  const posts = allPosts
+
+  return (
+    <div className="mx-auto max-w-xl py-8">
+      <h1 className="mb-8 text-center text-2xl font-black">
+        Next.js + Contentlayer Example
+      </h1>
+      {posts.map((post, idx) => (
+        <PostCard key={idx} {...post} />
+      ))}
+    </div>
+  )
+}
diff --git a/packages/core/app/playthrough.tsx b/packages/core/app/playthrough.tsx
@@ -0,0 +1,76 @@
+"use client"
+
+import React from "react"
+
+export function Playthrough({ steps }) {
+  const [index, setIndex] = React.useState(0)
+  const step = steps[index]
+  return (
+    <div
+      style={{
+        display: "flex",
+        fontFamily: "var(--font-overpass)",
+        fontSize: 16,
+        lineHeight: 1.5,
+        height: "800px",
+        colorScheme: "dark",
+      }}
+    >
+      <style jsx global>
+        {`
+          body {
+            background: #242424;
+            color: #cccccc;
+            margin: 0;
+          }
+
+          article {
+            max-height: 100vh;
+            overflow: hidden;
+            height: 100vh;
+          }
+
+          a {
+            color: rgb(255, 83, 26);
+            text-decoration: none;
+            box-shadow: inset 0 -1px 0 0 rgb(255, 83, 26);
+          }
+
+          a:hover {
+            text-decoration: none;
+            box-shadow: inset 0 -2px 0 0 rgb(255, 83, 26);
+          }
+        `}
+      </style>
+      <div
+        style={{
+          width: 465,
+          borderRight: "2px solid #383838",
+          overflowY: "auto",
+          padding: "1em",
+        }}
+      >
+        {step.children}
+        <a
+          href="#"
+          onClick={e => {
+            e.preventDefault()
+            setIndex(index + 1)
+          }}
+        >
+          Next
+        </a>
+      </div>
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <div style={{ flex: 1 }}>Code</div>
+        <div style={{ height: 405 }}>Preview</div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/core/app/posts/[slug]/page.tsx b/packages/core/app/posts/[slug]/page.tsx
@@ -0,0 +1,53 @@
+import { allPosts } from "contentlayer/generated"
+
+// import { Hike } from "../../hike"
+// import { Scrollycoding } from "../../scrollycoding"
+// import { Slideshow } from "../../slideshow"
+// import { Code } from "../../code"
+import { PostClient } from "./post.client"
+import "./styles.css"
+
+export const generateStaticParams = async () =>
+  allPosts.map(post => ({ slug: post._raw.flattenedPath }))
+
+export const generateMetadata = ({
+  params,
+}: {
+  params: { slug: string }
+}) => {
+  const post = allPosts.find(
+    post => post._raw.flattenedPath === params.slug
+  )
+  if (!post)
+    throw new Error(
+      `Post not found for slug: ${params.slug}`
+    )
+  return { title: post.title }
+}
+
+const PostLayout = ({
+  params,
+}: {
+  params: { slug: string }
+}) => {
+  const post = allPosts.find(
+    post => post._raw.flattenedPath === params.slug
+  )
+  if (!post)
+    throw new Error(
+      `Post not found for slug: ${params.slug}`
+    )
+
+  return (
+    <article className="mx-auto max-w-xl py-8">
+      <div className="mb-8 text-center">
+        <h1 className="text-3xl font-bold">{post.title}</h1>
+      </div>
+      <div className="[&>*]:mb-3 [&>*:last-child]:mb-0">
+        <PostClient code={post.body.code} />
+      </div>
+    </article>
+  )
+}
+
+export default PostLayout
diff --git a/packages/core/app/posts/[slug]/post.client.tsx b/packages/core/app/posts/[slug]/post.client.tsx
@@ -0,0 +1,7 @@
+"use client"
+import { useMDXComponent } from "next-contentlayer/hooks"
+
+export function PostClient({ code }) {
+  const MDXContent = useMDXComponent(code)
+  return <MDXContent />
+}
diff --git a/packages/core/app/posts/[slug]/styles.css b/packages/core/app/posts/[slug]/styles.css
@@ -0,0 +1,3 @@
+.mark {
+  background: #222299;
+}
diff --git a/packages/core/app/scrollycoding.tsx b/packages/core/app/scrollycoding.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import React from "react"
+
+export function Scrollycoding({ steps }) {
+  // console.log("Scrollycoding", steps)
+  const [currentStep, setCurrentStep] = React.useState(0)
+  return (
+    <div
+      style={{
+        border: "1px solid red",
+        margin: "1em",
+        display: "flex",
+      }}
+    >
+      <div
+        style={{
+          flex: 1,
+        }}
+      >
+        {steps.map((step, i) => {
+          return (
+            <div
+              style={{
+                border: "1px solid red",
+                margin: "1em",
+              }}
+              key={i}
+              onClick={() => setCurrentStep(i)}
+            >
+              {step.children}
+            </div>
+          )
+        })}
+      </div>
+      <div style={{ minWidth: 300 }}>
+        {steps[currentStep].code}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/core/app/slideshow.tsx b/packages/core/app/slideshow.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import React from "react"
+
+export function Slideshow({ steps }) {
+  // console.log("Scrollycoding", steps)
+  const [currentStep, setCurrentStep] = React.useState(0)
+  const step = steps[currentStep]
+  return (
+    <div
+      style={{
+        border: "1px solid red",
+        margin: "1em",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <div style={{ display: "flex" }}>
+        <button
+          onClick={() => setCurrentStep(currentStep - 1)}
+          disabled={currentStep === 0}
+        >
+          Prev
+        </button>
+        <input
+          style={{ flex: 1 }}
+          type="range"
+          min={0}
+          max={steps.length - 1}
+          value={currentStep}
+          onChange={e =>
+            setCurrentStep(parseInt(e.target.value))
+          }
+        />
+        <button
+          onClick={() => setCurrentStep(currentStep + 1)}
+          disabled={currentStep === steps.length - 1}
+        >
+          Next
+        </button>
+      </div>
+      <div>{step.children}</div>
+      <div style={{ minWidth: 300 }}>{step.code}</div>
+    </div>
+  )
+}