Sync with main repo @ 608682c8

.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,16 @@ 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">
- Dark<span className="lg:hidden"> Mode</span>
+ {theme === "dark" ? "Dark" : "Light"}
+ <span className="lg:hidden"> Mode</span>
  </span>
  </button>
  )

app/core/components/Header.js

@@ -80,7 +80,7 @@ const Header = ({
  onNavToggle(newValue)
  }
 
- const bannerMsg = "Blitz is in beta! 🎉 1.0 expected in May or June"
+ const bannerMsg = "Blitz is in beta! 🎉 1.0 expected in Q3 this year"
 
  const menuLinks = [
  {

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/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

@@ -34,6 +34,7 @@
  "app-component",
  "css",
  "image-optimization",
+ "font-optimization",
  "static-files",
  "environment-variables",
  "error-handling",
@@ -48,7 +49,6 @@
  },
  "pages": [
  "pages",
- "redirects",
  "error-pages",
  "head-component",
  "document-component",
@@ -73,6 +73,9 @@
  "link",
  "route-params-query",
  "router",
+ "redirects",
+ "rewrites",
+ "headers",
  "api-routes",
  "shallow-routing",
  "route-manifest"
@@ -126,15 +129,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": {
@@ -154,6 +157,9 @@
  "blitz-config",
  "webpack-config",
  "postcss-config",
+ "eslint-config",
+ "husky-config",
+ "prettier-config",
  "rpc-specification",
  "measuring-performance"
  ]

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>
  </>