Sync with main repo @ 9fe39d8e

.alexrc.js

@@ -1,4 +1,13 @@
 // Use a "maybe" level of profanity instead of the default "unlikely".
 exports.profanitySureness = 1
 
-exports.allow = ["simple", "special", "invalid", "he-she", "her-him", "herself-himself", "obvious"]
+exports.allow = [
+  "simple",
+  "special",
+  "invalid",
+  "he-she",
+  "her-him",
+  "herself-himself",
+  "obvious",
+  "easy",
+]

.prettierrc

@@ -8,7 +8,9 @@
       "files": "*.mdx",
       "options": {
         "printWidth": 74,
-        "proseWrap": "always"
+        "proseWrap": "always",
+        "bracketSpacing": true,
+        "trailingComma": "es5"
       }
     }
   ]

README.md

@@ -70,3 +70,24 @@ Example:
 ```
 
 If you aren't totally sure how the slug should look like, or just want to automate the process, run `yarn english-slugify`
+
+## Cards
+
+You can use cards, like the one at the start of [_API Routes_](https://blitzjs.com/docs/api-routes) like this:
+
+```md
+<Card type="info">
+
+Unlike Next.js, your `api/` folder should be a sibling of `pages/` instead
+of being nested inside. But `pages/api` is still supported for
+compatibility with Next.js.
+
+</Card>
+```
+
+Properties:
+
+- `type`: `'caution' | 'info' | 'note'`
+- `title`: `string` (optional)
+
+**Remember to leave an empty line** between the component tag and the content as shown in the example above.

app/core/components/DarkModeToggle.js

@@ -18,15 +18,20 @@ const DarkModeToggle = ({className}) => {
   return (
     <button
       onClick={switchTheme}
-      className={`pr-2 rounded focus:outline-none focus:ring-inset focus:ring-white focus:ring-2 ${className}`}
+      className={`pr-2 rounded focus:outline-none focus:ring-inset focus:ring-white ${className}`}
     >
       {theme === "dark" ? (
         <BiToggleRight size="2rem" className="inline" />
       ) : (
         <BiToggleLeft size="2rem" className="inline" />
       )}
       <span className="mx-1">
+<<<<<<< HEAD
         Donker<span className="lg:hidden">e Modus</span>
+=======
+        {theme === "dark" ? "Dark" : "Light"}
+        <span className="lg:hidden"> Mode</span>
+>>>>>>> 9fe39d8ebeff642759bb10ad1b0cd2f1114ec7aa
       </span>
     </button>
   )

app/core/components/SponsorPack.js

@@ -20,6 +20,14 @@ const sponsors = [
     tier: 3,
     cost: 250,
   },
+  {
+    name: "RIT",
+    href:
+      "https://rit-inc.co.jp/?utm_source=BlitzJS&utm_medium=sponsorship&utm_campaign=BlitzJS_Sponsorship_2021",
+    imageUrl: "https://raw.githubusercontent.com/blitz-js/blitz/canary/assets/rit_logo.png",
+    tier: 3,
+    cost: 250,
+  },
   {
     name: "Andreas",
     href: "https://andreas.fyi/",
@@ -53,7 +61,7 @@ const sponsors = [
   {
     name: "userTrack",
     href: "https://www.usertrack.net/?ref=blitzjs_web",
-    imageUrl: "https://i.imgur.com/UDBeazC.png",
+    imageUrl: "https://raw.githubusercontent.com/blitz-js/blitz/canary/assets/usertrack.png",
     tier: 4,
     cost: 100,
   },

app/core/components/docs/Card.js

@@ -0,0 +1,44 @@
+import clsx from "clsx"
+
+import styles from "./Card.module.css"
+
+/**
+ * @param {{type: 'caution' | 'info' | 'note', title: string, children: any}}
+ * @returns
+ */
+export function Card({type, title, children}) {
+  const defaultTitle = type[0].toUpperCase() + type.substr(1)
+
+  return (
+    <div
+      className={clsx(
+        styles.container,
+        type === "caution"
+          ? "bg-[#fdea69]"
+          : type === "info"
+          ? "bg-[#69c6fd]"
+          : type === "note"
+          ? "bg-blue-primary"
+          : undefined,
+      )}
+    >
+      <h5 className={styles.heading}>
+        <span className={styles.icon}>
+          <InfoIcon />
+        </span>
+        {title || defaultTitle}
+      </h5>
+      <div className={styles.content}>{children}</div>
+    </div>
+  )
+}
+
+const InfoIcon = () => (
+  <svg width={15} height={15} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx={7.5} cy={7.5} r={6.75} stroke="black" strokeWidth={1.5} strokeLinecap="round" />
+    <path
+      d="M6.81226 4.27344H8.18774V5.91699L7.83179 8.94043H7.177L6.81226 5.91699V4.27344ZM6.84302 9.45898H8.15259V10.729H6.84302V9.45898Z"
+      fill="black"
+    />
+  </svg>
+)

app/core/components/docs/Card.module.css

@@ -0,0 +1,30 @@
+.container {
+  @apply p-5 mb-4 rounded-xl;
+
+  a {
+    /* Remember to change this if you update the a (anchor, link) styles */
+    @apply text-purple-light font-medium no-underline hover:underline;
+  }
+}
+
+.heading {
+  @apply mt-0 mb-4 capitalize font-bold flex items-center text-black;
+}
+
+.icon {
+  @apply inline-block align-middle mr-2;
+
+  svg {
+    @apply block w-4 h-4 stroke-0;
+  }
+}
+
+.content {
+  * {
+    @apply text-black;
+  }
+
+  strong {
+    color: inherit !important;
+  }
+}

app/core/components/home/HeroCode.js

@@ -7,11 +7,11 @@ import tokenize from "../../macros/tokenize.macro.js"
 
 const pageTokenized = tokenize.jsx(
   `// app/pages/projects/new.tsx
-import { Link, useRouter, useMutation, BlitzPage } from "blitz"
+import { Link, Routes, useRouter, useMutation, BlitzPage } from "blitz"
 import Layout from "app/core/layouts/Layout"
 // Merk op hoe we de server functie rechtstreeks importeren
 import createProject, {CreateProject} from "app/projects/mutations/createProject"
-import { ProjectForm, FORM_ERROR } from "app/projects/components/ProjectForm"
+import { ProjectForm } from "app/projects/components/ProjectForm"
 
 const NewProjectPage: BlitzPage = () => {
   const router = useRouter()
@@ -25,13 +25,20 @@ const NewProjectPage: BlitzPage = () => {
         submitText="Project aanmaken"
         schema={CreateProject}
         onSubmit={async (values) => {
+<<<<<<< HEAD
           try {
             // Dit is hetzelfde als de server functie rechtstreeks te callen
             const project = await createProjectMutation(values)
             router.push("/projects/" + project.id)
           } catch (error) {
             return { [FORM_ERROR]: error.toString() }
           }
+=======
+          // This is equivalent to calling the server function directly
+          const project = await createProjectMutation(values)
+          // Notice the 'Routes' object Blitz provides for routing
+          router.push(Routes.ProjectsPage({projectId: project.id}}))
+>>>>>>> 9fe39d8ebeff642759bb10ad1b0cd2f1114ec7aa
         }}
       />
     </div>

app/core/components/home/VideoPlayer.js

@@ -1,4 +1,4 @@
-import ReactPlayer from "react-player"
+import ReactPlayer from "react-player/lazy"
 
 const VideoPlayer = ({url, className = ""}) => {
   return (
@@ -9,6 +9,7 @@ const VideoPlayer = ({url, className = ""}) => {
         width="100%"
         height="100%"
         controls={true}
+        light={true}
       />
     </div>
   )

app/core/layouts/ContentsLayout.js

@@ -176,7 +176,7 @@ export function ContentsLayout({children, meta, tableOfContents: toc}) {
               <a
                 href={
                   "https://github.com/blitz-js/blitzjs.com/edit/main/app/pages" +
-                  router.asPath +
+                  router.asPath.split("#")[0] +
                   ".mdx"
                 }
                 target="_blank"

app/core/navs/documentation.json

@@ -48,7 +48,6 @@
     },
     "pages": [
       "pages",
-      "redirects",
       "error-pages",
       "head-component",
       "document-component",
@@ -73,8 +72,12 @@
       "link",
       "route-params-query",
       "router",
+      "redirects",
+      "rewrites",
+      "headers",
       "api-routes",
-      "shallow-routing"
+      "shallow-routing",
+      "route-manifest"
     ]
   },
   {
@@ -125,15 +128,15 @@
       "iconPath": "/img/mutations.svg",
       "iconDarkPath": "/img/mutations-white.svg"
     },
-    "pages": ["background-processing-with-quirrel", "middleware", "custom-server"]
+    "pages": ["multitenancy", "background-processing-with-quirrel", "middleware", "custom-server"]
   },
   {
     "title": {
       "title": "Deploying to Production",
       "iconPath": "/img/deploying-to-production.svg",
       "iconDarkPath": "/img/deploying-to-production-white.svg"
     },
-    "pages": ["deploy-render", "deploy-heroku", "deploy-vercel"]
+    "pages": ["deploy-render", "deploy-heroku", "deploy-vercel", "deploy-railway"]
   },
   {
     "title": {
@@ -153,6 +156,7 @@
       "blitz-config",
       "webpack-config",
       "postcss-config",
+      "eslint-config",
       "rpc-specification",
       "measuring-performance"
     ]
@@ -173,6 +177,7 @@
       "cli-db",
       "cli-prisma",
       "cli-generate",
+      "cli-codegen",
       "cli-console",
       "cli-install",
       "cli-autocomplete",

app/core/styles/main.css

@@ -11,6 +11,7 @@
 
 html {
   font-family: "Libre Franklin", sans-serif;
+  scroll-behavior: smooth;
 }
 
 .player-wrapper {

app/core/styles/utilities.css

@@ -130,61 +130,6 @@ body.cursor-grabbing * {
   background-repeat: no-repeat;
 }
 
-/* Like doing `!important`, but worse */
-.admonition.admonition.admonition {
-  @apply px-5 pt-5 pb-px rounded-xl text-black;
-
-  a {
-    /* Remember to change this if you update the a (anchor, link) styles */
-    @apply text-purple-light font-medium no-underline hover:underline;
-  }
-}
-
-.admonition-content > *:first-child {
-  @apply mt-2;
-}
-
-.admonition.admonition-caution {
-  @apply bg-supplementary-yellow;
-}
-
-.admonition.admonition-info {
-  @apply bg-supplementary-blue;
-}
-
-.admonition.admonition-note {
-  @apply bg-blue-primary;
-}
-
-.admonition .admonition-heading {
-  @apply capitalize font-bold;
-}
-
-.admonition .admonition-heading > * {
-  @apply flex items-center;
-  margin-top: 0;
-}
-
-.admonition .admonition-icon {
-  @apply mr-2;
-}
-
-.admonition .admonition-icon {
-  @apply mr-2;
-}
-
-.dark .admonition .admonition-heading h5 {
-  @apply text-black;
-}
-
-.dark .admonition .admonition-content.admonition-content {
-  @apply text-black;
-}
-
-.dark .admonition .admonition-content.admonition-content strong {
-  color: inherit;
-}
-
 .topic-select .topic-select__placeholder,
 .topic-select .topic-select__menu-list,
 .topic-select .topic-select__single-value {

app/pages/_app.js

@@ -71,7 +71,7 @@ export default function App({Component, pageProps, router}) {
         <meta key="og:type" property="og:type" content="article" />
         <meta key="og:description" property="og:description" content={meta.description} />
       </Head>
-      <ThemeProvider defaultTheme="dark" attribute="class">
+      <ThemeProvider defaultTheme="dark" enableSystem={false} attribute="class">
         <Component {...pageProps} />
       </ThemeProvider>
     </>