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,16 @@
+export const metadata = {
+ title: 'Next.js',
+ description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+ <html lang="en">
+ <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/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>
+ )
+}
diff --git a/packages/core/contentlayer.config.ts b/packages/core/contentlayer.config.ts
@@ -0,0 +1,28 @@
+import {
+ defineDocumentType,
+ makeSource,
+} from "contentlayer/source-files"
+import { myPlugin } from "./src/remark/remark"
+
+export const Post = defineDocumentType(() => ({
+ name: "Post",
+ filePathPattern: `**/*.mdx`,
+ contentType: "mdx",
+ fields: {
+ title: { type: "string", required: true },
+ },
+ computedFields: {
+ url: {
+ type: "string",
+ resolve: post => `/posts/${post._raw.flattenedPath}`,
+ },
+ },
+}))
+
+export default makeSource({
+ contentDirPath: "posts",
+ mdx: {
+ remarkPlugins: [myPlugin],
+ },
+ documentTypes: [Post],
+})
diff --git a/packages/core/mdx-components.tsx b/packages/core/mdx-components.tsx
@@ -0,0 +1,17 @@
+import type { MDXComponents } from "mdx/types"
+
+// This file allows you to provide custom React components
+// to be used in MDX files. You can import and use any
+// React component you want, including components from
+// other libraries.
+
+// This file is required to use MDX in `app` directory.
+export function useMDXComponents(
+ components: MDXComponents
+): MDXComponents {
+ return {
+ // Allows customizing built-in components, e.g. to add styling.
+ // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
+ ...components,
+ }
+}
diff --git a/packages/core/next-env.d.ts b/packages/core/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/packages/core/next.config.js b/packages/core/next.config.js
@@ -0,0 +1,10 @@
+// using js instead of mjs because of https://github.com/contentlayerdev/contentlayer/issues/272#issuecomment-1237021441
+const { withContentlayer } = require("next-contentlayer")
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ reactStrictMode: true,
+ swcMinify: true,
+}
+
+module.exports = withContentlayer(nextConfig)
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "@code-hike/core",
+ "version": "0.9.0",
+ "scripts": {
+ "dev": "next dev",
+ "test": "vitest"
+ },
+ "devDependencies": {
+ "@mdx-js/loader": "^2.3.0",
+ "@mdx-js/react": "^2.3.0",
+ "@next/mdx": "^13.4.19",
+ "@types/mdx": "^2.0.6",
+ "@vitejs/plugin-react": "^4.0.4",
+ "contentlayer": "^0.3.4",
+ "jsdom": "^22.1.0",
+ "next": "^13.4.19",
+ "next-contentlayer": "^0.3.4",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "unist-util-visit": "^5.0.0",
+ "vitest": "^0.34.3"
+ },
+ "dependencies": {
+ "@code-hike/lighter": "^0.8.2",
+ "diff": "^5.1.0"
+ }
+}