website: use Bati widget (#2195)

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,

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 [
     {

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
 
 - <Link href="/new" />
+- <Link href="/new/core" />
 - [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)

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'
 
+<div style={{height: 30}}></div>
 
-## Bati
+<BatiWidget />
 
-We recommend using [Bati](https://batijs.dev) for creating new Vike apps.
+<BatiNote />
 
-> **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).
+<div style={{height: 10}}></div>
 
-> Apps scaffolded by Bati use <UiFrameworkExtension name />.
-
-## Without `vike-{react,vue,solid}`
-
-You can also create a new Vike app that doesn't use <UiFrameworkExtension name />.
-
-The following command scaffolds a Vike app with a fully custom React/Vue integration instead.
-
-<CustomIntegrationWarning />
-
-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 <UiFrameworkExtension name />. See <Link href="/new/core">vike.dev/new/core</Link> if you want to scaffold an app that directly uses Vike core (without any Vike extension).
 
 ## See also
 
+- <Link href="/new/core" />
 - <Link href="/add" />

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 (
+    <p
+      style={{
+        color: '#888',
+        fontSize: '14px',
+        textAlign: 'center'
+      }}
+    >
+      Powered by{' '}
+      <a href="https://github.com/vikejs/bati">
+        Bati{' '}
+        <img
+          src={batiLogo}
+          style={{
+            width: batiLogoSize,
+            height: batiLogoSize,
+            display: 'inline-block',
+            verticalAlign: 'text-top'
+          }}
+        />
+      </a>
+    </p>
+  )
+}

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 (
+      <div style={{ textAlign: 'center', fontSize: '2em', margin: 100, paddingBottom: 50 }}>Loading scaffolder...</div>
+    )
+  }
+  return (
+    <>
+      <div className="container">
+        {/* @ts-expect-error */}
+        <bati-widget theme="light"></bati-widget>
+      </div>
+    </>
+  )
+}
+
+function wasAdded() {
+  const el = document.querySelector(`script[src="${scriptSrc}"]`)
+  return !!el
+}