merge with remote

README.md

@@ -61,7 +61,7 @@ npx cspell --help
 
 Upload images/GIFs to the public/ directory. You can make sub-directories within `public/` to namespace them (eg: `/public/tutorials/` for all tutorial-related images).
 
-To reference an image, use a relative link to the image with the `public` stripped out. For example, if you have an image `public/example.png`, you can reference it as follows: `[insert alt text here](/example.png)`.
+To reference an image, use a relative link to the image with the `public` stripped out. For example, if you have an image `public/example.png`, you can reference it as follows: `[insert alt text here](/example.png)`. Ensure that the the image filename has no spaces and are separated by either a hyphen or an underscore.
 
 If you're making a diagram, please add it to this [Figjam](https://www.figma.com/file/m4XseN6oAiu2yGN18qfamD/Docs-Toolkit?type=whiteboard&node-id=0-1&t=j3TBgane3MsYReF2-0). That way, if others want to make small tweaks, they can discover the original.
 
@@ -73,6 +73,9 @@ All pull requests will generate a staging link in Vercel. Here's an [example](ht
 
 You may also preview changes by [testing locally](#testing-locally)
 
+# Nextra 3.0
+We are now using [Nextra 3](https://the-guild.dev/blog/nextra-3), which is slightly different than Nextra 2. The main differences for most maintainers is that instead of _meta.json to generate custom sidebars, it is now in Javascript or Typescript, and can be rendered with components. Another difference is that `Tab` is now imported from `Tabs.Tab` and `Card` from `Cards.Card`, both from `nextra/components`.
+
 # Changelog
 
 We make a changelog post for every feature we ship. It usually includes a Loom link + a description of the feature. Make sure to include either `video: <loom link>` or `thumbnail: <image>` to ensure that we have a preview video or image for every changelog post.
@@ -81,9 +84,9 @@ We make a changelog post for every feature we ship. It usually includes a Loom l
 
 # Maintainers
 
-[Vijay](https://github.com/ranic), [Marissa](https://github.com/marissakuhrau), [Mav](https://github.com/mavlee), [Isha](https://github.com/ishamehramixpanel). Eventually we’ll expand this list, but keeping it tight for now.
+[Marissa](https://github.com/marissakuhrau), [Mav](https://github.com/mavlee), [Isha](https://github.com/ishamehramixpanel), and [Myron](https://github.com/myronkaifung). Eventually we’ll expand this list, but keeping it tight for now.
 
-## Review Process
+# Review Process
 
 For simple content changes, the reviewer will merge the PR for expediency. For code changes, the original author will merge changes.
 

components/ExtendedTabs/ExtendedTabs.tsx

@@ -1,4 +1,4 @@
-import { Tabs } from 'nextra-theme-docs'
+import { Tabs } from 'nextra/components'
 import { useEffect, useState } from 'react';
 
 type ExtendedTabsType = {

components/Search/Search.module.scss

@@ -1,24 +1,23 @@
 .icon {
-    width: 14px;
-    margin-right: 6px;
+  width: 14px;
+  margin-right: 6px;
 }
 
 .searchBar:focus {
-    box-shadow: none;
-
+  box-shadow: none;
 }
 
 .inputContainer {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
-@media (max-width: 768px) {
-    .searchBar {
-        display: none;
-    }
-    
-    .icon {
-        width: 20px;
-    }
-}
+@media (max-width: 800px) {
+  .searchBar {
+    display: none;
+  }
+
+  .icon {
+    width: 20px;
+  }
+}

components/SignUpButton/SignUpButton.module.scss

@@ -0,0 +1,18 @@
+@use "../../pages/theme/colors.scss" as colors;
+
+.signUpButton {
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  background-color: colors.$purple50;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: colors.$white;
+  padding: 10px 22px;
+  text-wrap: nowrap;
+  border-radius: 100px;
+
+  &:hover {
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    background-color: colors.$purple100;
+  }
+}

components/SignUpButton/SignUpButton.tsx

@@ -0,0 +1,9 @@
+import style from "./SignUpButton.module.scss";
+
+export default function SignUpButton() {
+  return (
+    <a className={style.signUpButton} href="https://mixpanel.com/register">
+      Sign Up
+    </a>
+  );
+}

components/changelog-index.js

@@ -53,7 +53,8 @@ const renderMedia = (page) => {
 };
 
 export default function ChangelogIndex({ more = "Read more" }) {
-  const allPages = getPagesUnderRoute("/changelogs");
+  // naturally sorts pages from a-z rather than z-a
+  const allPages = getPagesUnderRoute("/changelogs").reverse();
   const itemsPerPage = 10;
   const [displayedPages, setDisplayedPages] = useState([]);
   const [pageIndex, setPageIndex] = useState(0);

next.config.js → next.config.mjs

@@ -1,7 +1,13 @@
-const fs = require("fs");
-const { join } = require("path");
+import fs from "fs";
+import { fileURLToPath } from "url";
+import { join, dirname } from "path";
+import nextra from "nextra";
 
-const withNextra = require("nextra")({
+// Get __dirname equivalent in ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const withNextra = nextra({
   theme: "nextra-theme-docs",
   themeConfig: "./theme.config.tsx",
   staticImage: true,
@@ -50,7 +56,7 @@ function formatForNextRedirect({ source, destination }) {
   return { source, destination, permanent: true };
 }
 
-module.exports = withNextra({
+export default withNextra({
   redirects: () => {
     return fs.readdirSync(join(__dirname, "redirects")).flatMap((filename) => {
       const pathToFile = join(__dirname, "redirects", filename);