✨ Added a dedicated Server Components page

.vscode/settings.json

@@ -17,6 +17,7 @@
     "extralight",
     "hljs",
     "Queryrecent",
+    "QUICKSTART",
     "Roboto"
   ]
 }

web/src/Routes.tsx

@@ -18,6 +18,7 @@ const Routes = () => {
       <Set wrap={BaseLayout}>
         <Route path="/" page={HomePage} name="home" />
         <Set wrap={InteriorLayout}>
+          <Route path="/server-components" page={ServerComponentsPage} name="serverComponents" />
           <Route path="/conf" redirect="/react-conf" />
           <Route path="/reactconf" redirect="/react-conf" />
           <Route path="/react-conf" page={ReactConfPage} name="reactConf" />

web/src/helpers/Constants.ts

@@ -23,6 +23,7 @@ export const Constants = Object.freeze({
   PRESTON_WERNER_VENTURES: 'https://prestonwernerventures.com/',
   README: 'https://github.com/redwoodjs/redwood/blob/main/README.md',
   RELEASES: 'https://community.redwoodjs.com/c/announcements/releases-and-upgrade-guides/18',
+  RSC_QUICKSTART: 'npx -y create-redwood-rsc-app APP-NAME',
   SECURITY: 'https://github.com/redwoodjs/redwood/security/policy',
   SHOP: 'https://shop.redwoodjs.com/',
   STARTUP_CLUB: 'https://docs.google.com/forms/d/e/1FAIpQLSeuoGpGJ8gN_eYRY9hU6u2Apw0RB5UV6eYASp6ujsSv_aLaMg/viewform',

web/src/pages/ServerComponentsPage/ServerComponentsPage.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ServerComponentsPage from './ServerComponentsPage'
+
+const meta: Meta<typeof ServerComponentsPage> = {
+  component: ServerComponentsPage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ServerComponentsPage>
+
+export const Primary: Story = {}

web/src/pages/ServerComponentsPage/ServerComponentsPage.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import ServerComponentsPage from './ServerComponentsPage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('ServerComponentsPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<ServerComponentsPage />)
+    }).not.toThrow()
+  })
+})

web/src/pages/ServerComponentsPage/ServerComponentsPage.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react'
+
+import { Metadata } from '@redwoodjs/web'
+
+import Icon from 'src/components/Icon/Icon'
+import Newsletter from 'src/components/Newsletter/Newsletter'
+import { Constants } from 'src/helpers/Constants'
+
+const ServerComponentsPage = () => {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const copyToClipboard = () => {
+    // copy text to clipboard
+    navigator.clipboard.writeText(Constants.RSC_QUICKSTART)
+
+    // change icon
+    setIsCopied(true)
+
+    // change the icon back
+    setTimeout(() => {
+      setIsCopied(false)
+    }, 2000)
+  }
+
+  return (
+    <>
+      <Metadata
+        title="Server Components"
+        description="The fastest way to get started with Redwood Server Components"
+      />
+
+      <div className="page-content">
+        <header className="grid grid-cols-10 gap-5 py-[100px]">
+          <div className="col-span-10">
+            <h1 className="mb-5 font-serif text-5xl font-bold text-maiTai md:text-7xl">
+              Quick Start
+            </h1>
+            <h2 className="mb-10 font-sans text-4xl font-thin text-battleshipGray">
+              The easiest way to get started with Redwood Server Components
+            </h2>
+            <div className="inline-flex h-[53px] items-center justify-between gap-7 rounded-[4px] border-2 border-maiTai px-7">
+              <div
+                contentEditable={true}
+                className="font-white font-mono text-base leading-none md:text-lg"
+              >
+                {Constants.RSC_QUICKSTART}
+              </div>
+              <button
+                onClick={copyToClipboard}
+                aria-label="copy install command"
+              >
+                {isCopied ? (
+                  <span className="text-sulu">
+                    <Icon id="check" />
+                  </span>
+                ) : (
+                  <span className="text-battleshipGray hover:text-christi dark:hover:text-white">
+                    <Icon id="clipboard" />
+                  </span>
+                )}
+              </button>
+            </div>
+          </div>
+        </header>
+      </div>
+    </>
+  )
+}
+
+export default ServerComponentsPage