wip: mdx

eslint.config.js

@@ -1,5 +1,6 @@
 import bernankez from "@bernankez/eslint-config";
 
 export default bernankez({
+  unocss: true,
   formatters: true,
 });

package.json

@@ -34,6 +34,7 @@
     "@bernankez/eslint-config": "1.0.0-beta.3",
     "@bernankez/utils": "^0.6.0",
     "@types/node": "^20.11.30",
+    "@unocss/eslint-plugin": "^0.58.8",
     "backmoji": "workspace:*",
     "bumpp": "^9.4.0",
     "eslint": "^8.57.0",

playground/package.json

@@ -11,13 +11,18 @@
   },
   "dependencies": {
     "@backmoji/react": "workspace:^",
+    "@bernankez/utils": "^0.6.0",
     "@unocss/reset": "^0.58.6",
     "ahooks": "^3.7.10",
+    "clsx": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "stats.js": "^0.17.0"
   },
   "devDependencies": {
+    "@iconify/json": "^2.2.196",
+    "@mdx-js/rollup": "^3.0.1",
+    "@types/mdx": "^2.0.12",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/stats.js": "^0.17.3",
@@ -27,6 +32,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "shiki": "^1.2.1",
     "typescript": "^5.2.2",
     "unocss": "^0.58.6",
     "vite": "^5.2.0"

playground/src/App.css

@@ -1,5 +1,8 @@
 #root {
+  display: flex;
+  justify-content: center;
   height: 100vh;
+  height: 100dvh;
   width: 100vw;
   overflow-x: hidden;
 }

playground/src/App.tsx

@@ -2,8 +2,18 @@ import "./App.css";
 import { useEffect, useRef } from "react";
 import { useBackmoji, useImageLoader, useImageRenderer, useTextRenderer } from "@backmoji/react";
 import { useEventListener } from "ahooks";
+import type { MDXComponents } from "mdx/types";
 import Paw from "./assets/paw.svg";
 import { animate } from "./animation";
+import { Badge } from "./components/Badge";
+import { Code } from "./components/Code";
+import Example from "./example.mdx";
+
+const components: MDXComponents = {
+  code: ({ children }) => {
+    return <code>{children}</code>;
+  },
+};
 
 const { play, setCallback, getTimestamp, reset } = animate({
   speed: 0.3,
@@ -107,11 +117,20 @@ function App() {
   }, [canvas]);
 
   return (
-    <div ref={backgroundRef}>
-      <section className="h-screen flex items-center justify-center">
-        <h1 className="font-bold font-italic text-7xl md:text-8xl lg:text-9xl text-orange-500">
+    <div ref={backgroundRef} className="m-4 max-w-3xl w-full">
+      <section className="h-screen flex flex-col items-center justify-center">
+        <h1 className="h1">
           Backmoji
         </h1>
+        <div className="mt-2 flex gap-3">
+          <Badge type="npm"></Badge>
+          <Badge type="github"></Badge>
+        </div>
+      </section>
+      <section>
+        <h2 className="h2">Install</h2>
+        <Code lang="sh">npm install backmoji</Code>
+        <Example components={components}></Example>
       </section>
     </div>
   );

playground/src/components/Badge.tsx

@@ -0,0 +1,54 @@
+import type React from "react";
+import { useMemo } from "react";
+import { clsx } from "clsx";
+import { version } from "~/package.json";
+
+export interface BadgeProps {
+  type: "npm" | "github";
+  children?: React.ReactNode;
+}
+
+// @unocss-include
+export function Badge({ type, children }: BadgeProps) {
+  const icon = useMemo(() => {
+    switch (type) {
+      case "npm":
+        return "i-tabler:brand-npm text-2xl";
+      default:
+        return "i-tabler:brand-github text-xl";
+    }
+  }, [type]);
+
+  const link = useMemo(() => {
+    switch (type) {
+      case "npm":
+        return "https://www.npmjs.com/package/backmoji";
+      case "github":
+        return "https://github.com/Bernankez/Backmoji";
+      default:
+        return "";
+    }
+  }, [type]);
+
+  const title = useMemo(() => {
+    switch (type) {
+      case "npm":
+        return `v${version}`;
+      case "github":
+        return "Backmoji";
+      default:
+        return "";
+    }
+  }, [type]);
+
+  return (
+    <div className="group w-fit select-none b-1 b-orange-500 rounded-md b-solid bg-orange-50 text-sm transition hover:bg-orange-500">
+      <a className="h-full flex" href={link}>
+        <div className="h-full flex items-center b-r-1 b-r-orange-500 b-r-solid px-1">
+          <div className={clsx("text-orange-800 group-hover:text-white transition", icon)}></div>
+        </div>
+        <span className="h-full flex items-center px-1 text-orange-800 transition group-hover:text-white">{children ?? title}</span>
+      </a>
+    </div>
+  );
+}

playground/src/components/Code.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+import { type Languages, useHighlighter } from "../hooks/useHighlighter";
+
+export interface CodeProps {
+  code?: string;
+  children?: React.ReactNode;
+  lang: Languages;
+}
+
+export function Code({ code, lang, children }: CodeProps) {
+  const highlighter = useHighlighter();
+  const _code = code || children?.toString().trim();
+
+  const highlightCode = useMemo(() => {
+    if (!_code) {
+      return "";
+    }
+    if (!highlighter) {
+      return _code;
+    }
+    return highlighter.codeToHtml(_code, {
+      lang,
+      themes: {
+        light: "rose-pine-dawn",
+        dark: "rose-pine-moon",
+      },
+    });
+  }, [_code, lang, highlighter]);
+
+  return <div className="box-border overflow-hidden rounded-lg p-2" dangerouslySetInnerHTML={{ __html: highlightCode }}></div>;
+}

playground/src/hooks/useHighlighter.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { getHighlighter } from "shiki";
+import { n } from "@bernankez/utils";
+
+export type Languages = typeof languages[number];
+export type Highlighter = Awaited<ReturnType<typeof resolveHighlighter>>;
+
+const languages = n(["js", "ts", "javascript", "typescript", "jsx", "tsx", "sh", "bash", "vue"]);
+
+function resolveHighlighter() {
+  return getHighlighter({
+    themes: ["rose-pine-dawn", "rose-pine-moon"],
+    langs: languages,
+  });
+}
+
+export function useHighlighter() {
+  const [highlighter, setHighlighter] = useState<Highlighter>();
+
+  useEffect(() => {
+    if (!highlighter) {
+      resolveHighlighter().then(setHighlighter);
+    }
+  }, []);
+
+  return highlighter;
+}

playground/tsconfig.json

@@ -4,10 +4,15 @@
     "jsx": "react-jsx",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "useDefineForClassFields": true,
+    "baseUrl": ".",
     "module": "ESNext",
 
     /* Bundler mode */
     "moduleResolution": "bundler",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./src/*"]
+    },
     "resolveJsonModule": true,
     "allowImportingTsExtensions": true,
 

playground/uno.config.ts

@@ -2,4 +2,8 @@ import { defineConfig, presetIcons, presetUno } from "unocss";
 
 export default defineConfig({
   presets: [presetUno(), presetIcons()],
+  shortcuts: {
+    h1: "font-bold font-italic text-7xl md:text-8xl lg:text-9xl text-orange-500",
+    h2: "font-italic font-bold text-orange-500 text-5xl md:text-6xl",
+  },
 });

playground/vite.config.ts

@@ -2,10 +2,12 @@ import { resolve } from "node:path";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import UnoCSS from "unocss/vite";
+import mdx from "@mdx-js/rollup";
 
 // https://vitejs.dev/config/
 export default defineConfig(() => ({
   plugins: [
+    mdx(),
     react(),
     UnoCSS(),
   ],
@@ -16,6 +18,8 @@ export default defineConfig(() => ({
        */
       "backmoji": resolve("../packages/core/src/index.ts"),
       "@backmoji/react": resolve("../packages/react/src/index.ts"),
+      "~": resolve("."),
+      "@": resolve("./src"),
     },
   },
 }));