Merge pull request #5 from snaplet/cdw/docs

Move docs from docs repo into snapshot repo

Author: CarelFdeWaal

.gitignore

@@ -57,3 +57,6 @@ out
 .parcel-cache
 .snaplet/snaplet.d.ts
 cli/scripts/predictions/.yarn/*
+
+docs/.next
+docs/node_modules

docs/README.md

@@ -0,0 +1,38 @@
+### Prerequisites
+
+Install `brew`, `git`, `pnpm` and `Node.js` :
+
+#### Brew
+
+```bash
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+```
+
+#### Git
+
+```bash
+brew install git
+```
+
+#### Pnpm and Node.js
+
+```bash
+curl -fsSL https://get.pnpm.io/install.sh | sh -
+pnpm env use --global lts
+corepack enable
+```
+
+### Installation
+
+```bash
+git clone git@github.com:snaplet/docs.git
+cd docs
+pnpm install
+```
+
+### Run the project
+
+```bash
+pnpm next
+# Go to http://localhost:3000
+```

docs/components/Editor.tsx

@@ -0,0 +1,98 @@
+import MonacoEditor, { type Monaco } from "@monaco-editor/react";
+import { useCallback, type ComponentProps, useEffect, useRef } from "react";
+import {
+  fakerDefs,
+  snapletClientTypes,
+  snapletConfig,
+  snapletTypes,
+} from "./seed-tutorial";
+import type { editor } from "monaco-editor";
+import { AutoTypings, LocalStorageCache } from "monaco-editor-auto-typings";
+
+export function Editor(props: ComponentProps<typeof MonacoEditor>) {
+  return (
+    <MonacoEditor
+      options={{
+        fontSize: 14,
+        lineNumbers: "off",
+        renderLineHighlight: "none",
+        minimap: { enabled: false },
+        overviewRulerLanes: 0,
+        hideCursorInOverviewRuler: true,
+        scrollBeyondLastLine: false,
+        padding: { top: 18 },
+        lineDecorationsWidth: 0,
+      }}
+      theme="vs-dark"
+      defaultLanguage="typescript"
+      {...props}
+    />
+  );
+}
+
+export function SeedTutorialEditor() {
+  const monacoRef = useRef<Monaco>();
+
+  const handleBeforeMount = useCallback((monaco: Monaco) => {
+    monacoRef.current = monaco;
+
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.Latest,
+      module: monaco.languages.typescript.ModuleKind.ESNext,
+      allowNonTsExtensions: true,
+      strict: true,
+      alwaysStrict: true,
+      noImplicitAny: true,
+      allowJs: false,
+    });
+
+    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      noSuggestionDiagnostics: true,
+    });
+
+    monaco.languages.typescript.typescriptDefaults.addExtraLib(
+      fakerDefs,
+      "inmemory://faker.d.ts"
+    );
+    monaco.languages.typescript.typescriptDefaults.addExtraLib(
+      snapletClientTypes,
+      "inmemory://.snaplet/snaplet-client.d.ts"
+    );
+    monaco.languages.typescript.typescriptDefaults.addExtraLib(
+      snapletTypes,
+      "inmemory://.snaplet/snaplet.d.ts"
+    );
+    monaco.editor.createModel(
+      snapletConfig,
+      "typescript",
+      monaco.Uri.parse("inmemory://snaplet.config.ts")
+    );
+  }, []);
+
+  const handleMount = useCallback(
+    (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
+      AutoTypings.create(editor, {
+        sourceCache: new LocalStorageCache(),
+        monaco,
+      });
+    },
+    []
+  );
+
+  useEffect(() => {
+    return () => {
+      monacoRef.current?.editor.getModels().forEach((model) => {
+        model.dispose();
+      });
+    };
+  }, []);
+
+  return (
+    <Editor
+      height="500px"
+      beforeMount={handleBeforeMount}
+      onMount={handleMount}
+      defaultValue={snapletConfig}
+    />
+  );
+}

docs/components/Image.tsx

@@ -0,0 +1,17 @@
+import NextImage, { type ImageProps } from "next/image";
+import Zoom from "./Zoom";
+
+export function Image(props: { src: string; alt: string; zoom?: boolean }) {
+  const ImageComponent = props.zoom ? Zoom : NextImage;
+
+  return (
+    <div className="relative w-full h-[400px] mt-7">
+      <ImageComponent
+        className="object-contain"
+        fill
+        src={props.src}
+        alt={props.alt}
+      />
+    </div>
+  );
+}

docs/components/Logo.tsx

@@ -0,0 +1,20 @@
+import { useData } from "nextra/data"
+import dynamic from "next/dynamic"
+
+function ReleaseNote(props: { filename: string }) {
+  const Content = dynamic(() => import(`../releases/${props.filename}`))
+
+  return (
+    <Content />
+  )
+}
+
+export function ReleaseNotes() {
+  const { releases } = useData() as { releases: Array<{ filename: string }>}
+
+  return (
+    <>
+      { releases.map((release, index) => <ReleaseNote key={index} filename={release.filename} />) }
+    </>
+  )
+}

docs/components/ReleaseNotes.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Zoom } from "./Zoom";
+
+export function Step(props: {
+  children: React.ReactNode;
+  image?: { src: string; alt: string };
+}) {
+  if (!props.image) {
+    return props.children;
+  }
+
+  return (
+    <div className="nx-mt-6 block lg:flex lg:flex-row">
+      <div className="lg:flex-1">{props.children}</div>
+      <div className="lg:flex-1 relative h-[320px]">
+        <Zoom
+          className="object-contain"
+          src={props.image.src}
+          alt={props.image.alt}
+          fill
+        />
+      </div>
+    </div>
+  );
+}