From b9c5848cdaf80efc41c4085d3b63d4510a1ba395 Mon Sep 17 00:00:00 2001 From: Rom Date: Wed, 19 Feb 2025 11:49:53 +0100 Subject: [PATCH] website: use Bati widget (#2195) --- docs/headings.ts | 10 ++++- docs/headingsDetached.ts | 13 ++++++ docs/pages/add/+Page.mdx | 1 + docs/pages/new/+Page.mdx | 65 +++++----------------------- docs/pages/new/BatiNote.tsx | 31 ++++++++++++++ docs/pages/new/BatiWidget.tsx | 42 ++++++++++++++++++ docs/pages/new/bati-logo.svg | 80 +++++++++++++++++++++++++++++++++++ docs/pages/new/core/+Page.mdx | 54 +++++++++++++++++++++++ 8 files changed, 241 insertions(+), 55 deletions(-) create mode 100644 docs/pages/new/BatiNote.tsx create mode 100644 docs/pages/new/BatiWidget.tsx create mode 100644 docs/pages/new/bati-logo.svg create mode 100644 docs/pages/new/core/+Page.mdx diff --git a/docs/headings.ts b/docs/headings.ts index 3fa50369b5..7c3c9385be 100644 --- a/docs/headings.ts +++ b/docs/headings.ts @@ -70,12 +70,20 @@ const headings = [ { level: 2, title: 'Scaffold new Vike app', + pageDesign: { + hideTitle: true, + hideMenuLeft: true, + contentMaxWidth: 1200 + }, url: '/new' }, { level: 2, title: 'Add SSR/SSG to existing Vite app', - url: '/add' + url: '/add', + pageDesign: { + hideMenuLeft: true + } }, { level: 1, diff --git a/docs/headingsDetached.ts b/docs/headingsDetached.ts index a1caaa0a17..026f5b1445 100644 --- a/docs/headingsDetached.ts +++ b/docs/headingsDetached.ts @@ -26,6 +26,7 @@ const headingsDetached: HeadingDetachedDefinition[] = [ ...migrations(), ...misc(), ...blog(), + ...getStarted(), ...redirects(), ...deprecated(), ...workInProgress() @@ -514,6 +515,18 @@ function blog(): HeadingDetachedDefinition[] { ].map((h) => ({ ...h, category: 'Blog' })) } +function getStarted(): HeadingDetachedDefinition[] { + return [ + { + title: 'Scaffold new app without Vike extension', + url: '/new/core', + pageDesign: { + hideMenuLeft: true as const + } + } + ].map((h) => ({ ...h, category: 'Get Started' })) +} + function api(): HeadingDetachedDefinition[] { return [ { diff --git a/docs/pages/add/+Page.mdx b/docs/pages/add/+Page.mdx index 695b360525..78c53fa662 100644 --- a/docs/pages/add/+Page.mdx +++ b/docs/pages/add/+Page.mdx @@ -62,6 +62,7 @@ On a high-level, this is how you add Vike to your existing Vite app: ## See also - +- - [GitHub > `vikejs/vike` > `boilerplates/`](https://github.com/vikejs/vike/tree/main/boilerplates) - [GitHub > `vikejs/vike` > `examples/react-minimal`](https://github.com/vikejs/vike/tree/main/examples/react-minimal) - [GitHub > `vikejs/vike` > `examples/react-full`](https://github.com/vikejs/vike/tree/main/examples/react-full) diff --git a/docs/pages/new/+Page.mdx b/docs/pages/new/+Page.mdx index 04d08574b3..3013c6d168 100644 --- a/docs/pages/new/+Page.mdx +++ b/docs/pages/new/+Page.mdx @@ -1,64 +1,21 @@ -import { Link, Warning } from '@brillout/docpress' -import { UiFrameworkExtension, CustomIntegrationWarning } from '../../components' +import { Link } from '@brillout/docpress' +import { UiFrameworkExtension } from '../../components' +import { BatiWidget } from './BatiWidget.tsx' +import { BatiNote } from './BatiNote.tsx' +
-## Bati + -We recommend using [Bati](https://batijs.dev) for creating new Vike apps. + -> **Requirement**: you'll need [Node.js](https://nodejs.org) installed (or Deno/Bun). Note that Node.js includes the package manager `npm` (but you can also use any other package manager). +
-> Apps scaffolded by Bati use . - -## Without `vike-{react,vue,solid}` - -You can also create a new Vike app that doesn't use . - -The following command scaffolds a Vike app with a fully custom React/Vue integration instead. - - - -With [npm](https://www.npmjs.com): - -```shell -npm create vike-core@latest -``` - -With [pnpm](https://pnpm.io): - -```shell -pnpm create vike-core -``` - -With [Bun](https://bun.sh): - -```shell -bun create vike-core -``` - -With [Yarn](https://yarnpkg.com): - -```shell -yarn create vike-core -``` - -Options: -- `--skip-git`: don't initialize a new Git repository - -A prompt will let you choose between: -- `react`: React + JavaScript -- `react-ts`: React + TypeScript -- `vue`: Vue + JavaScript -- `vue-ts`: Vue + TypeScript - -See also: -- [GitHub > `vikejs/vike` > `boilerplates/`](https://github.com/vikejs/vike/tree/main/boilerplates) -- [GitHub > `vikejs/vike` > `examples/react-minimal`](https://github.com/vikejs/vike/tree/main/examples/react-minimal) -- [GitHub > `vikejs/vike` > `examples/react-full`](https://github.com/vikejs/vike/tree/main/examples/react-full) -- [GitHub > `vikejs/vike` > `examples/vue-minimal`](https://github.com/vikejs/vike/tree/main/examples/vue-minimal) -- [GitHub > `vikejs/vike` > `examples/vue-full`](https://github.com/vikejs/vike/tree/main/examples/vue-full) +> **Requirement:** you need [Node.js](https://nodejs.org) installed (or Deno/Bun). It includes the package manager `npm` (you can also use any other package manager). +> Scaffolded apps use Vike extensions such as . See vike.dev/new/core if you want to scaffold an app that directly uses Vike core (without any Vike extension). ## See also +- - diff --git a/docs/pages/new/BatiNote.tsx b/docs/pages/new/BatiNote.tsx new file mode 100644 index 0000000000..370ad7c4b0 --- /dev/null +++ b/docs/pages/new/BatiNote.tsx @@ -0,0 +1,31 @@ +export { BatiNote } + +import React from 'react' +import batiLogo from './bati-logo.svg' +const batiLogoSize = 16 + +function BatiNote() { + return ( +

+ Powered by{' '} + + Bati{' '} + + +

+ ) +} diff --git a/docs/pages/new/BatiWidget.tsx b/docs/pages/new/BatiWidget.tsx new file mode 100644 index 0000000000..2ab8970b64 --- /dev/null +++ b/docs/pages/new/BatiWidget.tsx @@ -0,0 +1,42 @@ +export { BatiWidget } + +import React, { useEffect, useState } from 'react' +import { assert } from '@brillout/docpress' + +const scriptSrc = 'https://unpkg.com/@batijs/elements/dist/elements/full.js' + +function BatiWidget() { + const [isLoading, setIsLoading] = useState(true) + useEffect(() => { + if (wasAdded()) { + setIsLoading(false) + return + } + const script = document.createElement('script') + script.type = 'module' + script.src = scriptSrc + script.onload = () => { + setIsLoading(false) + } + document.head.appendChild(script) + assert(wasAdded()) + }, []) + if (isLoading) { + return ( +
Loading scaffolder...
+ ) + } + return ( + <> +
+ {/* @ts-expect-error */} + +
+ + ) +} + +function wasAdded() { + const el = document.querySelector(`script[src="${scriptSrc}"]`) + return !!el +} diff --git a/docs/pages/new/bati-logo.svg b/docs/pages/new/bati-logo.svg new file mode 100644 index 0000000000..9e6e3506fd --- /dev/null +++ b/docs/pages/new/bati-logo.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/pages/new/core/+Page.mdx b/docs/pages/new/core/+Page.mdx new file mode 100644 index 0000000000..67971d645a --- /dev/null +++ b/docs/pages/new/core/+Page.mdx @@ -0,0 +1,54 @@ +import { Link, Warning } from '@brillout/docpress' +import { UiFrameworkExtension, CustomIntegrationWarning } from '../../../components' + +In general, we recommend vike.dev/new for creating new Vike apps as it scaffolds apps that use Vike extensions such as . + +But you can also create a new Vike app that doesn't use any Vike extensions. The following command scaffolds a Vike app with a fully custom React/Vue integration. + + + +With [npm](https://www.npmjs.com): + +```shell +npm create vike-core@latest +``` + +With [pnpm](https://pnpm.io): + +```shell +pnpm create vike-core +``` + +With [Bun](https://bun.sh): + +```shell +bun create vike-core +``` + +With [Yarn](https://yarnpkg.com): + +```shell +yarn create vike-core +``` + +Options: +- `--skip-git`: don't initialize a new Git repository + +A prompt will let you choose between: +- `react`: React + JavaScript +- `react-ts`: React + TypeScript +- `vue`: Vue + JavaScript +- `vue-ts`: Vue + TypeScript + +See also: +- [GitHub > `vikejs/vike` > `boilerplates/`](https://github.com/vikejs/vike/tree/main/boilerplates) +- [GitHub > `vikejs/vike` > `examples/react-minimal`](https://github.com/vikejs/vike/tree/main/examples/react-minimal) +- [GitHub > `vikejs/vike` > `examples/react-full`](https://github.com/vikejs/vike/tree/main/examples/react-full) +- [GitHub > `vikejs/vike` > `examples/vue-minimal`](https://github.com/vikejs/vike/tree/main/examples/vue-minimal) +- [GitHub > `vikejs/vike` > `examples/vue-full`](https://github.com/vikejs/vike/tree/main/examples/vue-full) + + +## See also + +- +-