Merge pull request #147 from code-hike/monopackage

Monopackage refactor

Author: pomber

.github/workflows/release.yml

@@ -9,8 +9,6 @@ jobs:
     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
     steps:
       - uses: actions/checkout@v2
-        with:
-          fetch-depth: 10 # 👈 Required to retrieve git history
 
       - name: Prepare repository
         run: git fetch --unshallow --tags
@@ -35,6 +33,7 @@ jobs:
         run: |
           yarn install --frozen-lockfile 2>&1 | grep -v '^[warning|info]' 
           yarn build
+          yarn test
           yarn release
       # - name: Publish to Chromatic
       #   uses: chromaui/action@v1

.gitignore

@@ -9,4 +9,7 @@ yarn-error.log
 .vscode
 storybook-static
 packages/playground/out
-packages/starter
+packages/starter
+
+# Contentlayer
+.contentlayer

.gitpod.yml

@@ -3,7 +3,6 @@
 # and commit this file to your remote git repository to share the goodness with others.
 
 tasks:
-  - init: yarn install && yarn run build
-    command: yarn run playground
+  - init: yarn install  
 
 

examples/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "semi": false
+}

examples/contentlayer/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.next
+.contentlayer

examples/contentlayer/contentlayer.config.js

@@ -0,0 +1,24 @@
+import { defineDocumentType, makeSource } from "contentlayer/source-files"
+import { remarkCodeHike } from "@code-hike/mdx"
+import { createRequire } from "module"
+const require = createRequire(import.meta.url)
+const theme = require("shiki/themes/nord.json")
+
+export const Post = defineDocumentType(() => ({
+  name: "Post",
+  contentType: "mdx",
+  filePathPattern: "**/*.mdx",
+  fields: {
+    title: {
+      type: "string",
+      description: "The title of the post",
+      required: true,
+    },
+  },
+}))
+
+export default makeSource({
+  contentDirPath: "posts",
+  documentTypes: [Post],
+  mdx: { remarkPlugins: [[remarkCodeHike, { theme }]] },
+})

examples/contentlayer/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "contentlayer/generated": ["./.contentlayer/generated"]
+    }
+  }
+}

examples/contentlayer/next.config.js

@@ -0,0 +1,3 @@
+const { withContentlayer } = require('next-contentlayer')
+
+module.exports = withContentlayer()({})

examples/contentlayer/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "codehike-contentlayer",
+  "private": true,
+  "version": "0.0.0",
+  "dependencies": {
+    "@code-hike/mdx": "^0.3.0",
+    "next": "^12.0.10",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "contentlayer": "^0.1.1",
+    "next-contentlayer": "^0.1.1"
+  }
+}

examples/contentlayer/pages/[slug].js

@@ -0,0 +1,31 @@
+import { allPosts } from "contentlayer/generated"
+import { useMDXComponent } from "next-contentlayer/hooks"
+
+export async function getStaticPaths() {
+  const paths = allPosts.map((_) => "/" + _._raw.flattenedPath)
+  return {
+    paths,
+    fallback: false,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  const post = allPosts.find((_) => _._raw.flattenedPath === params.slug)
+  return {
+    props: {
+      post,
+    },
+  }
+}
+
+const Page = ({ post }) => {
+  const Component = useMDXComponent(post.body.code)
+  return (
+    <article style={{ maxWidth: 800 }}>
+      <h1>{post.title}</h1>
+      <Component />
+    </article>
+  )
+}
+
+export default Page

examples/contentlayer/pages/_app.js

@@ -0,0 +1,7 @@
+import "@code-hike/mdx/styles"
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/contentlayer/pages/index.js

@@ -0,0 +1,29 @@
+import { allPosts } from "contentlayer/generated"
+import Link from "next/link"
+
+export const getStaticProps = async ({}) => {
+  return {
+    props: {
+      posts: allPosts.map((post) => ({
+        slug: post._raw.flattenedPath,
+        title: post.title,
+      })),
+    },
+  }
+}
+
+const Home = ({ posts }) => {
+  return (
+    <ul>
+      {posts.map(({ slug, title }) => (
+        <li key={slug}>
+          <Link href={`/${slug}`}>
+            <a>{title}</a>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default Home

examples/contentlayer/posts/my.mdx

@@ -0,0 +1,12 @@
+---
+type: "Post"
+title: "Hello World"
+---
+
+Lorem ipsum dolor sit amet.
+
+```python hello.py
+print("Rendered with Code Hike")
+```
+
+Lorem ipsum dolor sit amet.

examples/mdx-bundler/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.next

examples/mdx-bundler/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "codehike-mdx-bundler",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "build": "next build"
+  },
+  "dependencies": {
+    "@code-hike/mdx": "^0.3.0",
+    "esbuild": "^0.14.23",
+    "mdx-bundler": "^8.0.1",
+    "next": "^12.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

examples/mdx-bundler/pages/_app.js

@@ -0,0 +1,7 @@
+import "@code-hike/mdx/styles"
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/mdx-bundler/pages/index.js

@@ -0,0 +1,52 @@
+import { remarkCodeHike } from "@code-hike/mdx"
+import theme from "shiki/themes/solarized-dark.json"
+import fs from "fs"
+import path from "path"
+import { bundleMDX } from "mdx-bundler"
+import { getMDXComponent } from "mdx-bundler/client"
+
+export async function getStaticProps() {
+  // can be from a local file, database, anywhere
+  const source = fs.readFileSync("posts/lorem.mdx", "utf-8")
+
+  // https://github.com/kentcdodds/mdx-bundler#nextjs-esbuild-enoent
+  if (process.platform === "win32") {
+    process.env.ESBUILD_BINARY_PATH = path.join(
+      process.cwd(),
+      "node_modules",
+      "esbuild",
+      "esbuild.exe"
+    )
+  } else {
+    process.env.ESBUILD_BINARY_PATH = path.join(
+      process.cwd(),
+      "node_modules",
+      "esbuild",
+      "bin",
+      "esbuild"
+    )
+  }
+
+  const { code } = await bundleMDX({
+    source,
+    files: {},
+    xdmOptions(options) {
+      options.remarkPlugins = [
+        ...(options.remarkPlugins ?? []),
+        [remarkCodeHike, { theme }],
+      ]
+      return options
+    },
+  })
+
+  return { props: { source: code } }
+}
+
+export default function Page({ source }) {
+  const Content = getMDXComponent(source)
+  return (
+    <div style={{ width: 800, margin: "0 auto" }}>
+      <Content />
+    </div>
+  )
+}

examples/mdx-bundler/posts/lorem.mdx

@@ -0,0 +1,9 @@
+# Hello
+
+Lorem ipsum dolor sit amet.
+
+```python hello.py mark=1[22:30]
+print("Rendered with Code Hike")
+```
+
+Lorem ipsum dolor sit amet.

examples/next-mdx-remote/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.next

examples/next-mdx-remote/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "codehike-next-mdx-remote",
+  "private": true,
+  "version": "0.0.0",
+  "dependencies": {
+    "@code-hike/mdx": "^0.3.0",
+    "next": "^12.1.0",
+    "next-mdx-remote": "^4.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

examples/next-mdx-remote/pages/_app.js

@@ -0,0 +1,7 @@
+import "@code-hike/mdx/styles"
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/next-mdx-remote/pages/index.js

@@ -0,0 +1,26 @@
+import { serialize } from "next-mdx-remote/serialize"
+import { MDXRemote } from "next-mdx-remote"
+import { remarkCodeHike } from "@code-hike/mdx"
+import { CH } from "@code-hike/mdx/components"
+import theme from "shiki/themes/solarized-dark.json"
+import fs from "fs"
+
+export async function getStaticProps() {
+  // can be from a local file, database, anywhere
+  const source = fs.readFileSync("posts/lorem.mdx")
+  const mdxSource = await serialize(source, {
+    mdxOptions: {
+      remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]],
+      useDynamicImport: true,
+    },
+  })
+  return { props: { source: mdxSource } }
+}
+
+export default function Page({ source }) {
+  return (
+    <div style={{ width: 800, margin: "0 auto" }}>
+      <MDXRemote {...source} components={{ CH }} />
+    </div>
+  )
+}