add first example

examples/notion-demo/.eslintrc.cjs

@@ -0,0 +1,29 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  overrides: [
+    {
+      extends: [
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+      ],
+      files: ["*.ts", "*.tsx"],
+      parserOptions: {
+        project: "tsconfig.json",
+      },
+    },
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.json",
+  },
+  plugins: ["@typescript-eslint"],
+  extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
+  rules: {
+    "@typescript-eslint/consistent-type-imports": [
+      "warn",
+      {
+        prefer: "type-imports",
+        fixStyle: "inline-type-imports",
+      },
+    ],
+  },
+};

examples/notion-demo/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# database
+/prisma/db.sqlite
+/prisma/db.sqlite-journal
+
+# next.js
+/.next/
+/out/
+next-env.d.ts
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

examples/notion-demo/README.md

@@ -0,0 +1,28 @@
+# Create T3 App
+
+This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`.
+
+## What's next? How do I make an app with this?
+
+We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
+
+If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.
+
+- [Next.js](https://nextjs.org)
+- [NextAuth.js](https://next-auth.js.org)
+- [Prisma](https://prisma.io)
+- [Tailwind CSS](https://tailwindcss.com)
+- [tRPC](https://trpc.io)
+
+## Learn More
+
+To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:
+
+- [Documentation](https://create.t3.gg/)
+- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials
+
+You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome!
+
+## How do I deploy this?
+
+Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.

examples/notion-demo/next.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+/** @type {import("next").NextConfig} */
+const config = {
+  reactStrictMode: true,
+};
+export default config;

examples/notion-demo/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "notion-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "lint": "next lint",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@next/font": "^13.1.6",
+    "next": "13.1.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "zod": "^3.20.2"
+  },
+  "devDependencies": {
+    "@types/eslint": "^8.21.1",
+    "@types/node": "^18.11.18",
+    "@types/prettier": "^2.7.2",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.47.1",
+    "@typescript-eslint/parser": "^5.47.1",
+    "autoprefixer": "^10.4.7",
+    "eslint": "^8.30.0",
+    "eslint-config-next": "13.1.6",
+    "postcss": "^8.4.14",
+    "prettier": "^2.8.1",
+    "prettier-plugin-tailwindcss": "^0.2.1",
+    "tailwindcss": "^3.2.0",
+    "typescript": "^4.9.4"
+  },
+  "ct3aMetadata": {
+    "initVersion": "7.5.5"
+  }
+}

examples/notion-demo/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

examples/notion-demo/prettier.config.cjs

@@ -0,0 +1,4 @@
+/** @type {import("prettier").Config} */
+module.exports = {
+  plugins: [require.resolve("prettier-plugin-tailwindcss")],
+};

examples/notion-demo/src/pages/Header.tsx

@@ -0,0 +1,53 @@
+export default function Header() {
+  return (
+    <header className="flex w-full flex-shrink-0 select-none justify-center">
+      <div className="w-[900px] min-w-0 max-w-full pl-24">
+        <div className="mt-20 mb-2 flex h-6 flex-wrap text-slate-800/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+          <button className="mx-1 inline-flex min-w-0 items-center whitespace-nowrap rounded-md p-1.5 text-xs transition-colors hover:bg-slate-100">
+            <svg
+              viewBox="0 0 14 14"
+              className="mr-2 block h-4 w-4 flex-shrink-0 fill-slate-800/50"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M7 0c3.861 0 7 3.139 7 7s-3.139 7-7 7-7-3.139-7-7 3.139-7 7-7zM3.561 5.295a1.027 1.027 0 1 0 2.054 0 1.027 1.027 0 0 0-2.054 0zm5.557 1.027a1.027 1.027 0 1 1 0-2.054 1.027 1.027 0 0 1 0 2.054zm1.211 2.816a.77.77 0 0 0-.124-1.087.786.786 0 0 0-1.098.107c-.273.407-1.16.958-2.254.958-1.093 0-1.981-.55-2.244-.945a.788.788 0 0 0-1.107-.135.786.786 0 0 0-.126 1.101c.55.734 1.81 1.542 3.477 1.542 1.668 0 2.848-.755 3.476-1.541z"
+              ></path>
+            </svg>
+            Add icon
+          </button>
+          <button className="mx-1 inline-flex min-w-0 items-center whitespace-nowrap rounded-md p-1.5 text-xs transition-colors hover:bg-slate-100">
+            <svg
+              viewBox="0 0 14 14"
+              className="mr-2 block h-4 w-4 flex-shrink-0 fill-slate-800/50"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M2 0a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm0 12h10L8.5 5.5l-2 4-2-1.5L2 12z"
+              ></path>
+            </svg>
+            Add cover
+          </button>
+          <button className="mx-1 inline-flex min-w-0 items-center whitespace-nowrap rounded-md p-1.5 text-xs transition-colors hover:bg-slate-100">
+            <svg
+              viewBox="0 0 16 16"
+              className="mr-2 block h-4 w-4 flex-shrink-0 fill-slate-800/50"
+            >
+              <path d="M4.095 15.465c.287 0 .499-.137.84-.444l2.523-2.277 4.47.007c2.058 0 3.214-1.19 3.214-3.22V4.22c0-2.03-1.156-3.22-3.213-3.22H3.213C1.163 1 0 2.19 0 4.22V9.53c0 2.037 1.196 3.22 3.165 3.213h.273v1.983c0 .45.24.738.657.738zM3.958 5.156a.454.454 0 01-.444-.45c0-.24.198-.438.444-.438h7.157c.246 0 .445.198.445.437a.45.45 0 01-.445.451H3.958zm0 2.256a.454.454 0 01-.444-.451c0-.24.198-.444.444-.444h7.157a.448.448 0 010 .895H3.958zm0 2.256a.448.448 0 010-.896h4.669c.246 0 .437.206.437.452a.438.438 0 01-.437.444H3.958z"></path>
+            </svg>
+            Add comment
+          </button>
+        </div>
+        <h1
+          className="w-full max-w-full whitespace-pre-wrap break-words p-1 text-4xl font-semibold text-slate-800 caret-slate-900"
+          spellCheck="true"
+          contentEditable="true"
+          placeholder="Untitled"
+        >
+          use-selectify notion demo
+        </h1>
+      </div>
+    </header>
+  );
+}

examples/notion-demo/src/pages/_app.tsx

@@ -0,0 +1,16 @@
+import { type AppType } from "next/dist/shared/lib/utils";
+import localFont from "@next/font/local";
+
+import "~/styles/globals.css";
+
+const SegoeUI = localFont({ src: "../../public/fonts/SegoeUI.woff" });
+
+const MyApp: AppType = ({ Component, pageProps }) => {
+  return (
+    <main className={SegoeUI.className}>
+      <Component {...pageProps} />
+    </main>
+  );
+};
+
+export default MyApp;