From 15f0ad77ab2304dfa288687fdce0c8225a222709 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 6 Nov 2024 16:58:01 +0100 Subject: [PATCH] docs --- .../www/content/docs/components/changelog.mdx | 5 + .../content/docs/components/installation.mdx | 70 ++++++++-- .../docs/components/installation/astro.mdx | 48 +++++++ .../docs/components/installation/gatsby.mdx | 48 +++++++ .../docs/components/installation/laravel.mdx | 48 +++++++ .../docs/components/installation/manual.mdx | 68 ++++++---- .../docs/components/installation/next.mdx | 4 +- .../docs/components/installation/remix.mdx | 48 +++++++ .../docs/components/installation/vite.mdx | 126 +----------------- apps/www/content/docs/getting-started.mdx | 6 +- 10 files changed, 312 insertions(+), 159 deletions(-) create mode 100644 apps/www/content/docs/components/installation/astro.mdx create mode 100644 apps/www/content/docs/components/installation/gatsby.mdx create mode 100644 apps/www/content/docs/components/installation/laravel.mdx create mode 100644 apps/www/content/docs/components/installation/remix.mdx diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx index 976ac36831..28fbfa05a5 100644 --- a/apps/www/content/docs/components/changelog.mdx +++ b/apps/www/content/docs/components/changelog.mdx @@ -11,6 +11,11 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver ## November 2024 #16 +### November 6 #16.3 + +- `editor`: add `overflow-x-hidden` to prevent horizontal scrolling +- `table-element`: add `overflow-x-auto` to allow horizontal scrolling + ### November 5 #16.2 - Fixed color-picker clear button's styles diff --git a/apps/www/content/docs/components/installation.mdx b/apps/www/content/docs/components/installation.mdx index b3ff6b2573..d017a6bcf2 100644 --- a/apps/www/content/docs/components/installation.mdx +++ b/apps/www/content/docs/components/installation.mdx @@ -5,44 +5,98 @@ description: How to install dependencies and structure your app. ## Frameworks -
+
Next.js -

Next.js

+

Next.js

 Vite -

Vite

+

Vite

+ + + + Remix + + +

Remix

+ + + + Astro + + +

Astro

+ + + + + +

Laravel

+ + + + Gatsby + + +

Gatsby

 React -

Manual

+

Manual

 -
+
\ No newline at end of file diff --git a/apps/www/content/docs/components/installation/astro.mdx b/apps/www/content/docs/components/installation/astro.mdx new file mode 100644 index 0000000000..2286b3f004 --- /dev/null +++ b/apps/www/content/docs/components/installation/astro.mdx @@ -0,0 +1,48 @@ +--- +title: Astro +description: Install and configure Astro. +--- + + + +### Install shadcn/ui + +Follow the [shadcn/ui](https://ui.shadcn.com/docs/installation/astro) guide. + +### Run the CLI + +Initialize Plate in your project using the CLI: + +```bash +npx shadcx@latest init plate +``` + +### Add components + +You can now start adding components to `components/plate-ui`: + +```bash +npx shadcx@latest add -r plate +``` + +### Register components + +To add the components to your plugins, see [Plugin Components](/docs/plugin-components#register-components). + +### Add editor (optional) + +Choose your editor to get started ([browse available editors](/editors)). + +[Minimal Editor](https://template.platejs.org/editor) +```bash +npx shadcx@latest add plate/editor-basic +``` + +[AI Editor](https://playground.platejs.org/editor) +```bash +npx shadcx@latest add plate/editor-ai +``` + +This will add a page in `app/editor` along with all necessary components in `components/plate-ui` as a starting point. + + diff --git a/apps/www/content/docs/components/installation/gatsby.mdx b/apps/www/content/docs/components/installation/gatsby.mdx new file mode 100644 index 0000000000..948b45e93d --- /dev/null +++ b/apps/www/content/docs/components/installation/gatsby.mdx @@ -0,0 +1,48 @@ +--- +title: Gatsby +description: Install and configure Gatsby. +--- + + + +### Install shadcn/ui + +Follow the [shadcn/ui](https://ui.shadcn.com/docs/installation/gatsby) guide. + +### Run the CLI + +Initialize Plate in your project using the CLI: + +```bash +npx shadcx@latest init plate +``` + +### Add components + +You can now start adding components to `components/plate-ui`: + +```bash +npx shadcx@latest add -r plate +``` + +### Register components + +To add the components to your plugins, see [Plugin Components](/docs/plugin-components#register-components). + +### Add editor (optional) + +Choose your editor to get started ([browse available editors](/editors)). + +[Minimal Editor](https://template.platejs.org/editor) +```bash +npx shadcx@latest add plate/editor-basic +``` + +[AI Editor](https://playground.platejs.org/editor) +```bash +npx shadcx@latest add plate/editor-ai +``` + +This will add a page in `app/editor` along with all necessary components in `components/plate-ui` as a starting point. + + diff --git a/apps/www/content/docs/components/installation/laravel.mdx b/apps/www/content/docs/components/installation/laravel.mdx new file mode 100644 index 0000000000..3680669d9c --- /dev/null +++ b/apps/www/content/docs/components/installation/laravel.mdx @@ -0,0 +1,48 @@ +--- +title: Laravel +description: Install and configure Laravel. +--- + + + +### Install shadcn/ui + +Follow the [shadcn/ui](https://ui.shadcn.com/docs/installation/laravel) guide. + +### Run the CLI + +Initialize Plate in your project using the CLI: + +```bash +npx shadcx@latest init plate +``` + +### Add components + +You can now start adding components to `components/plate-ui`: + +```bash +npx shadcx@latest add -r plate +``` + +### Register components + +To add the components to your plugins, see [Plugin Components](/docs/plugin-components#register-components). + +### Add editor (optional) + +Choose your editor to get started ([browse available editors](/editors)). + +[Minimal Editor](https://template.platejs.org/editor) +```bash +npx shadcx@latest add plate/editor-basic +``` + +[AI Editor](https://playground.platejs.org/editor) +```bash +npx shadcx@latest add plate/editor-ai +``` + +This will add a page in `app/editor` along with all necessary components in `components/plate-ui` as a starting point. + + diff --git a/apps/www/content/docs/components/installation/manual.mdx b/apps/www/content/docs/components/installation/manual.mdx index 89d4f4d934..2c50016cfa 100644 --- a/apps/www/content/docs/components/installation/manual.mdx +++ b/apps/www/content/docs/components/installation/manual.mdx @@ -11,40 +11,60 @@ Components are styled using Tailwind CSS. You need to install Tailwind CSS in yo [Follow the Tailwind CSS installation instructions](https://tailwindcss.com/docs/installation) to get started. -### Add dependencies +### Run the CLI -Add the following dependencies to your project: +Initialize Plate in your project using the CLI: ```bash -npm install @udecode/plate-common slate slate-react slate-history slate-hyperscript @udecode/cn tailwindcss-animate class-variance-authority tailwind-merge lucide-react +npx shadcx@latest init plate ``` -We use icons from [Lucide](https://lucide.dev). You can use any icon library you want. - -### Configure tailwind.config.js - -Here's what demo `tailwind.config.js` looks like: - - - -### Configure styles - -Add the following to your `globals.css` file. You can learn more about using CSS variables for theming in the [theming section](/docs/components/theming). +It should look like this: + + + + + +If your project is not supported by the CLI, create `components.json` at the root of your project, then run again the init command: + +```json +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "aliases": { + "components": "@/components", + "hooks": "@/hooks", + "lib": "@/lib", + "ui": "@/components/ui", + "utils": "@/lib/utils" + }, + "tailwind": { + "baseColor": "slate", + "config": "tailwind.config.ts", + "css": "src/app/globals.css", + "cssVariables": true, + "prefix": "" + }, + "registries": { + "plate": { + "aliases": { + "ui": "@/components/plate-ui" + }, + "url": "https://platejs.org/r" + } + } +} +``` - ### Add components -You can now start adding components to your project. +You can now start adding components to `components/plate-ui`: ```bash -npx shadcx@latest add plate/paragraph-element +npx shadcx@latest add -r plate ``` ### Add editor (optional) @@ -61,6 +81,6 @@ npx shadcx@latest add plate/editor-basic npx shadcx@latest add plate/editor-ai ``` -This will add an `/editor` page to your project along with all necessary components as a starting point. +This will add a page in `app/editor` along with all necessary components in `components/plate-ui` as a starting point. diff --git a/apps/www/content/docs/components/installation/next.mdx b/apps/www/content/docs/components/installation/next.mdx index 5424fc5529..a8e9c18925 100644 --- a/apps/www/content/docs/components/installation/next.mdx +++ b/apps/www/content/docs/components/installation/next.mdx @@ -23,7 +23,7 @@ npx shadcx@latest add plate/editor-basic npx shadcx@latest add plate/editor-ai ``` -This will add an `/editor` page to your project along with all necessary components as a starting point. +This will add a page in `app/editor` along with all necessary components in `components/plate-ui` as a starting point. ## Manual Installation @@ -53,7 +53,7 @@ Do you want to use CSS variables for colors? › no / yes You can now start adding components to your project. ```bash -npx shadcx@latest add plate/paragraph-element +npx shadcx@latest add -r plate ``` The command above will add the `ParagraphElement` component to your project. diff --git a/apps/www/content/docs/components/installation/remix.mdx b/apps/www/content/docs/components/installation/remix.mdx new file mode 100644 index 0000000000..c6c2471cd7 --- /dev/null +++ b/apps/www/content/docs/components/installation/remix.mdx @@ -0,0 +1,48 @@ +--- +title: Remix +description: Install and configure Remix. +--- + + + +### Install shadcn/ui + +Follow the [shadcn/ui](https://ui.shadcn.com/docs/installation/remix) guide. + +### Run the CLI + +Initialize Plate in your project using the CLI: + +```bash +npx shadcx@latest init plate +``` + +### Add components + +You can now start adding components to `components/plate-ui`: + +```bash +npx shadcx@latest add -r plate +``` + +### Register components + +To add the components to your plugins, see [Plugin Components](/docs/plugin-components#register-components). + +### Add editor (optional) + +Choose your editor to get started ([browse available editors](/editors)). + +[Minimal Editor](https://template.platejs.org/editor) +```bash +npx shadcx@latest add plate/editor-basic +``` + +[AI Editor](https://playground.platejs.org/editor) +```bash +npx shadcx@latest add plate/editor-ai +``` + +This will add a page in `app/editor` along with all necessary components in `components/plate-ui` as a starting point. + + diff --git a/apps/www/content/docs/components/installation/vite.mdx b/apps/www/content/docs/components/installation/vite.mdx index 90bb6a48c7..ebc1b6f0ad 100644 --- a/apps/www/content/docs/components/installation/vite.mdx +++ b/apps/www/content/docs/components/installation/vite.mdx @@ -5,138 +5,24 @@ description: Install and configure Vite. -### Create project +### Install shadcn/ui -Start by creating a new React project using `vite`: - -```bash -npm create vite@latest -``` - -### Add Tailwind and its configuration - -Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files: - -```bash -npm install -D tailwindcss postcss autoprefixer - -npx tailwindcss init -p -``` - -Add this import header in your main css file, `src/index.css` in our case: - -```css {1-3} showLineNumbers -@tailwind base; -@tailwind components; -@tailwind utilities; -/* ... */ -``` - -Configure the tailwind template paths in `tailwind.config.js`: - -```js {3} -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"], - theme: { - extend: {}, - }, - plugins: [], -} -``` - -### Edit tsconfig.json file - -The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. -Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json` and -`tsconfig.app.json` files: - -```ts {11-16} showLineNumbers -{ - "files": [], - "references": [ - { - "path": "./tsconfig.app.json" - }, - { - "path": "./tsconfig.node.json" - } - ], - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@/*": ["./src/*"] - } - } -} -``` - -### Edit tsconfig.app.json file - -Add the following code to the `tsconfig.app.json` file to resolve paths, for your IDE: - -```ts {4-9} showLineNumbers -{ - "compilerOptions": { - // ... existing compilerOptions ... - "baseUrl": ".", - "paths": { - "@/*": [ - "./src/*" - ] - } - // ... rest of the file ... - } -} -``` - -### Update vite.config.ts - -Add the following code to the vite.config.ts so your app can resolve paths without error - -```bash -# (so you can import "path" without error) -npm i -D @types/node -``` - -```typescript -import path from 'path'; -import react from '@vitejs/plugin-react'; -import { defineConfig } from 'vite'; - -export default defineConfig({ - plugins: [react()], - resolve: { - alias: { - '@': path.resolve(__dirname, './src'), - }, - }, -}); -``` +Follow the [shadcn/ui](https://ui.shadcn.com/docs/installation/vite) guide. ### Run the CLI -Run `shadcx` init command to setup your project: +Initialize Plate in your project using the CLI: ```bash npx shadcx@latest init plate ``` -### Configure components.json - -You will be asked a few questions to configure `components.json`: - -```txt showLineNumbers -Which color would you like to use as base color? › Slate -Do you want to use CSS variables for colors? › no / yes -``` - ### Add components -You can now start adding components to your project. +You can now start adding components to `components/plate-ui`: ```bash -npx shadcx@latest add plate/paragraph-element +npx shadcx@latest add -r plate ``` ### Register components @@ -157,6 +43,6 @@ npx shadcx@latest add plate/editor-basic npx shadcx@latest add plate/editor-ai ``` -This will add an `/editor` page to your project along with all necessary components as a starting point. +This will add a page in `app/editor` along with all necessary components in `components/plate-ui` as a starting point. diff --git a/apps/www/content/docs/getting-started.mdx b/apps/www/content/docs/getting-started.mdx index 4c14166ba4..8a3bfbd8fa 100644 --- a/apps/www/content/docs/getting-started.mdx +++ b/apps/www/content/docs/getting-started.mdx @@ -3,10 +3,6 @@ title: Getting Started description: A quick tutorial to get you up and running with Plate. --- - - Use our [interactive builder](/?builder=true) to generate _personalized_ installation steps. - - ### Create project @@ -15,7 +11,7 @@ You can choose one of the following templates to get started: | Option | NextJS | Plate | Plugins | AI & Backend | | --------------------------------------------------------------------------------- | ------ | ----- | ------- | ------------ | -| [Notion-like template](https://pro.platejs.org/docs/templates/potion) | ✅ | ✅ | ✅ | ✅ | +| [Notion-like template](https://pro.platejs.org/docs/templates/potion) | ✅ | ✅ | ✅ | ✅ | | [Plate playground template](https://github.com/udecode/plate-playground-template) | ✅ | ✅ | ✅ | | | [Plate minimal template](https://github.com/udecode/plate-template) | ✅ | ✅ | | | | [NextJS template](/docs/components/installation/next) | ✅ | | | |