docs: add banner from old site to new site, link from new to old (#5414)

Author: mark-wiemer

docs-next/README.md

@@ -2,6 +2,8 @@
 
 This is the new site, hosted at https://mochajs.org/next and built with [Astro Starlight](https://starlight.astro.build). For details on how to build alongside the old site, see the `docs` directory.
 
+## Preview the new site on its own
+
 To run this site alone:
 
 ```shell
@@ -11,4 +13,23 @@ npm run generate
 npm run dev
 ```
 
+## Build the new site into a folder with the old site
+
+```shell
+cd docs-next
+npm i
+npm run build-with-old
+```
+
+## Preview the old and new site together
+
+First, build the new site into a folder with the old site above.
+
+```shell
+cd .. # back to root dir
+npm run docs:preview
+```
+
+The new site will be at `http://localhost:8080/next`
+
 However, note that relative links may resolve with `dev` but fail with `build` and `preview` (see https://github.com/mochajs/mocha/issues/5415).

docs-next/src/content/docs/index.mdx

@@ -16,7 +16,7 @@ import Supporters from "../../components/Supporters.astro";
 
 :::note[New Site Preview]
 Hello!
-Welcome to this preview of a revamped **mochajs.org** docs site!
+Welcome to this preview of a revamped [**mochajs.org**](https://mochajs.org) docs site!
 
 This is an early stage preview.
 If you see any **bugs** or **typos**, please [file a docs issue on mochajs/mocha](https://github.com/mochajs/mocha/issues/new?template=02-documentation.yml).

docs/css/style.css

@@ -296,6 +296,15 @@ footer {
   bottom: 0;
 }
 
+.admonition {
+  background: #f5f2f0; /* background of code blocks */
+  border: #8d6748 1px solid; /* color of link text */
+  border-radius: 4px;
+  margin-top: 8px;
+  padding: 8px;
+  text-align: center;
+}
+
 .sponsorship {
   display: flex;
   align-items: center;

docs/index.md

@@ -4,6 +4,8 @@ title: 'Mocha - the fun, simple, flexible JavaScript test framework'
 description: 'Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun.'
 ---
 
+<div class="admonition">This site has a new look, try it out at <a href="mochajs.org/next">mochajs.org/next</a>!</div>
+
 Mocha is a feature-rich JavaScript test framework running on [Node.js][] and in the browser, making asynchronous testing _simple_ and _fun_. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Hosted on [GitHub][github-mocha].
 
 <nav class="badges">