v0.5

contributing.md

@@ -0,0 +1,11 @@
+## Files and Folders
+
+- `packages/mdx`: the npm package
+- `packages/mdx/vite.config.js`: we only use vite for testing with vitest
+- `packages/mdx/rollup.config.js`: rollup builds the thing we release to npm
+- `packages/mdx/next.config.js`: we have a nextjs testing site, our poor man's storybook
+- `packages/mdx/pages`: the pages for the nextjs test site
+- `packages/mdx/dev`: code and content used by the nextjs test site
+- `packages/mdx/src/remark`: the code that runs at build time when you compile an mdx file
+- `examples`: a list of examples, most of them use the Code Hike version from `packages/mdx/dist`
+- `examples/bundle-test`: this one is used by `.github/workflows/bundle-analysis.yml`

examples/contentlayer/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

examples/contentlayer/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+
+# Contentlayer
+.contentlayer

examples/contentlayer/README.md

@@ -0,0 +1,3 @@
+# Next.js + Contentlayer + Code Hike
+
+See [this guide](https://codehike.org/docs/installation/contentlayer).

examples/contentlayer/contentlayer.config.js

@@ -0,0 +1,31 @@
+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/dark-plus.json")
+
+const Post = defineDocumentType(() => ({
+  name: "Post",
+  filePathPattern: `**/*.mdx`,
+  contentType: "mdx",
+  fields: {
+    title: {
+      type: "string",
+      description: "The title of the post",
+      required: true,
+    },
+  },
+  computedFields: {
+    url: {
+      type: "string",
+      resolve: (doc) => `/posts/${doc._raw.flattenedPath}`,
+    },
+  },
+}))
+
+export default makeSource({
+  contentDirPath: "posts",
+  documentTypes: [Post],
+
+  mdx: { remarkPlugins: [[remarkCodeHike, { theme }]] },
+})

examples/contentlayer/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.

examples/contentlayer/next.config.js

@@ -0,0 +1,5 @@
+const { withContentlayer } = require("next-contentlayer")
+
+module.exports = withContentlayer(
+  {} // Next.js config here
+)

examples/contentlayer/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "codehike-contentlayer",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "INIT_CWD=$PWD next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@code-hike/mdx": "^0.4.0",
+    "@types/node": "^17.0.30",
+    "contentlayer": "latest",
+    "next": "^12.1.0",
+    "next-contentlayer": "latest",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.2",
+    "typescript": "4.6.3"
+  }
+}

examples/contentlayer/pages/_app.tsx

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

examples/contentlayer/pages/index.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link"
+import { allPosts, Post } from "contentlayer/generated"
+
+export async function getStaticProps() {
+  return { props: { posts: allPosts } }
+}
+
+export default function Home({ posts }: { posts: Post[] }) {
+  return (
+    <div>
+      <h1>A Blog</h1>
+      Posts:
+      <ul>
+        {posts.map((post, idx) => (
+          <li key={idx}>
+            <Link href={post.url}>
+              <a>{post.title}</a>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

examples/contentlayer/pages/posts/[slug].tsx

@@ -0,0 +1,35 @@
+import Head from "next/head"
+import { allPosts, Post } from "contentlayer/generated"
+import { useMDXComponent } from "next-contentlayer/hooks"
+
+export async function getStaticPaths() {
+  const paths: string[] = allPosts.map((post) => post.url)
+  return {
+    paths,
+    fallback: false,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  const post = allPosts.find((post) => post._raw.flattenedPath === params.slug)
+  return {
+    props: {
+      post,
+    },
+  }
+}
+
+const PostLayout = ({ post }: { post: Post }) => {
+  const MDXContent = useMDXComponent(post.body.code)
+  return (
+    <article style={{ width: 600, margin: "0 auto" }}>
+      <Head>
+        <title>{post.title}</title>
+      </Head>
+      <h1>{post.title}</h1>
+      <MDXContent />
+    </article>
+  )
+}
+
+export default PostLayout

examples/contentlayer/posts/post-one.mdx

@@ -0,0 +1,9 @@
+---
+title: Post one
+---
+
+Blog posts have their own pages. The content source is a markdown file, parsed to HTML by Contentlayer.
+
+```js foo.js
+const x = 2
+```

examples/contentlayer/posts/post-two.mdx

@@ -0,0 +1,5 @@
+---
+title: Post two
+---
+
+**Contentlayer makes working with content easy.** It is a content preprocessor that validates and transforms your content into type-safe JSON you can easily import into your application.

examples/contentlayer/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "contentlayer/generated": ["./.contentlayer/generated"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".contentlayer/generated"
+  ],
+  "exclude": ["node_modules"]
+}

packages/mdx/dev/content/comment-annotations.mdx

@@ -56,6 +56,7 @@ And now we introduce two more annotations: `link` and `label`
 
 ```js focus=4,8
 function lorem(ipsum, dolor = 1) {
+  // link[15:19] #bash-like-comments
   const sit = ipsum == null && 0
   dolor = sit - amet(dolor)
   // link[16:26] https://github.com/code-hike/codehike
@@ -69,7 +70,7 @@ function adipiscing(...elit) {
 }
 ```
 
-Bash like comments
+<h3 id="bash-like-comments">Bash like comments</h3>
 
 ```python
 def lorem(ipsum, dolor = 1):
@@ -92,3 +93,21 @@ function lorem(ipsum, dolor = 1) {
   return $sit and consectetur(ipsum) or []
 }
 ```
+
+With class
+
+```js
+function lorem(ipsum, dolor = 1) {
+  // withClass[15:19] annotation-class
+  const sit = ipsum == null && 0
+  // withClass(1:2) annotation-class
+  dolor = sit - amet(dolor)
+  return sit ? consectetur(ipsum) : []
+}
+
+function adipiscing(...elit) {
+  console.log("hover me")
+  // withClass annotation-class
+  return elit.map(ipsum => ipsum.sit)
+}
+```

packages/mdx/dev/content/copy-button.mdx

@@ -0,0 +1,59 @@
+one line:
+
+```js
+const x = 2
+```
+
+no editor:
+
+```js
+function foo() {
+  return 2
+}
+```
+
+one file editor:
+
+```js foo.js
+function foo() {
+  return 2
+}
+```
+
+two files:
+
+<CH.Code>
+
+```js foo.js
+function foo() {
+  return 2
+}
+```
+
+```js bar.js
+function bar() {
+  return 2
+}
+```
+
+</CH.Code>
+
+two panels:
+
+<CH.Code>
+
+```js foo.js
+function foo() {
+  return 2
+}
+```
+
+---
+
+```js bar.js
+function bar() {
+  return 2
+}
+```
+
+</CH.Code>

packages/mdx/dev/content/passing-props.mdx

@@ -0,0 +1,48 @@
+`<CH.Code lineNumbers showCopyButton={false} className="foobar">`
+
+<CH.Code lineNumbers showCopyButton={false} className="foobar">
+
+```js
+console.log(1)
+```
+
+</CH.Code>
+
+`<CH.Code lineNumbers={false} showCopyButton={true} className="foo">`
+
+<CH.Code lineNumbers={false} showCopyButton={true} className="foo">
+
+```js index.js
+console.log(2)
+```
+
+```python foo.py
+print(3)
+```
+
+---
+
+```html index.html
+<div>Hi</div>
+```
+
+</CH.Code>
+
+`<CH.Code className="foobarbazbarbar" style={{border: "2px solid red", height: 160}}>`
+
+<CH.Code className="foobarbazbarbar" style={{border: "2px solid red", height: 160}}>
+
+```js index.js
+console.log(2)
+console.log(2)
+console.log(2)
+console.log(2)
+console.log(2)
+console.log(2)
+console.log(2)
+console.log(2)
+console.log(2)
+console.log(2)
+```
+
+</CH.Code>