Major maintenance update

.github/workflows/ci.yml

@@ -14,15 +14,13 @@ jobs:
 
     steps:
       - name: "Checkout repo"
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: "Set up pnpm"
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
+        uses: pnpm/action-setup@v4
 
       - name: "Set up latest Node LTS"
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "lts/*"
           cache: pnpm

.github/workflows/cli-e2e.yml

@@ -13,15 +13,13 @@ jobs:
 
     steps:
       - name: "Checkout repo"
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: "Set up pnpm"
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
+        uses: pnpm/action-setup@v4
 
       - name: "Set up latest Node LTS"
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "lts/*"
           cache: pnpm
@@ -58,15 +56,13 @@ jobs:
 
     steps:
       - name: "Checkout repo"
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: "Set up pnpm"
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
+        uses: pnpm/action-setup@v4
 
       - name: "Set up latest Node LTS"
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "lts/*"
           cache: pnpm

.github/workflows/publish.yml

@@ -20,15 +20,13 @@ jobs:
 
     steps:
       - name: "Checkout repo"
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: "Set up pnpm"
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
+        uses: pnpm/action-setup@v4
 
       - name: "Set up latest Node LTS"
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "lts/*"
           registry-url: "https://registry.npmjs.org"

.gitignore

@@ -18,6 +18,8 @@
 **/lib
 **/tmp
 
+# typescript
+*.tsbuildinfo
 
 # misc
 .DS_Store

.husky/pre-commit

@@ -1,5 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 pnpm run update-readmes
 npx lint-staged

CONTRIBUTING.md

@@ -77,11 +77,9 @@ Make sure you are set up locally by following the [Getting Started](#getting-sta
 Make sure you are set up locally by following the [Getting Started](#getting-started) section above.
 
 1. Create a new branch from `develop` with a descriptive name.
-
    - `git checkout -b feature/support-my-favorite-technology`
 
 2. Make sure you check out the [scripts](#scripts) section above. Most notably:
-
    - `build:watch` - Make sure to have `build:watch` running if you are running tests, as tests are run on the built files.
    - `unit:watch` - Some of these tests were specifically made to ease the plugin authoring process, so don't forget this one.
    - `e2e` - Runs e2e tests. Note that this will run all e2e tests, which can take quite a while.
@@ -91,7 +89,6 @@ Make sure you are set up locally by following the [Getting Started](#getting-sta
    - `clean` - Removes all generated files, including build files and the `create-next-stack-tests` directory created by the e2e tests.
 
 3. Add a new .ts file for your plugin in the plugins directory at [`packages/create-next-stack/src/main/plugins`](packages/create-next-stack/src/main/plugins)
-
    - See the [Writing a plugin section](#writing-a-plugin) below to learn how to write a Create Next Stack plugin.
 
 4. Add new flags to the `create-next-stack` command in [`create-next-stack.ts`](packages/create-next-stack/src/main/commands/create-next-stack.ts).

apps/website/app/layout.tsx

@@ -0,0 +1,45 @@
+import "@mantine/core/styles.css"
+
+import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core"
+import type { Metadata } from "next"
+import PlausibleProvider from "next-plausible"
+import { Providers } from "./providers"
+
+export const metadata: Metadata = {
+  title: "Create your Next.js project today! | Create Next Stack",
+  description:
+    "Create your Next.js project today! Create Next Stack is a website and CLI tool used to easily set up the boilerplate of new Next.js apps.",
+  openGraph: {
+    title: "Create your Next.js project today! | Create Next Stack",
+    description:
+      "Create your Next.js project today! Create Next Stack is a website and CLI tool used to easily set up the boilerplate of new Next.js apps.",
+    type: "website",
+    images: ["https://www.create-next-stack.com/thumbnail.png"],
+  },
+  icons: {
+    icon: "/favicon.ico",
+  },
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" {...mantineHtmlProps}>
+      <head>
+        <ColorSchemeScript defaultColorScheme="light" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto+Mono&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body style={{ backgroundColor: "#eee", margin: 0 }}>
+        <PlausibleProvider domain="create-next-stack.com">
+          <Providers>{children}</Providers>
+        </PlausibleProvider>
+      </body>
+    </html>
+  )
+}

apps/website/app/page.tsx

@@ -0,0 +1,5 @@
+import LandingPageTemplate from "../templates/LandingPage/LandingPageTemplate"
+
+export default function Page() {
+  return <LandingPageTemplate />
+}

apps/website/app/providers.tsx

@@ -0,0 +1,12 @@
+"use client"
+
+import { MantineProvider } from "@mantine/core"
+import { theme } from "../theme"
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <MantineProvider theme={theme} defaultColorScheme="light">
+      {children}
+    </MantineProvider>
+  )
+}

apps/website/components/Anchor.tsx

@@ -1,6 +1,20 @@
-import { Link } from "@chakra-ui/react"
-import { ComponentProps, FC } from "react"
+"use client"
 
-export const Anchor: FC<ComponentProps<typeof Link>> = (props) => {
-  return <Link color="#319bff" fontWeight="bold" {...props} />
+import { Anchor as MantineAnchor } from "@mantine/core"
+import { ReactNode } from "react"
+
+type AnchorProps = {
+  href?: string
+  target?: string
+  children?: ReactNode
+  c?: string
+  fw?: string | number
+}
+
+export const Anchor = ({
+  c = "#319bff",
+  fw = "bold",
+  ...props
+}: AnchorProps) => {
+  return <MantineAnchor c={c} fw={fw} {...props} />
 }

apps/website/components/Checkbox.tsx

@@ -1,6 +1,8 @@
-import { Checkbox as ChakraCheckbox } from "@chakra-ui/react"
-import { ComponentProps, FC } from "react"
+"use client"
 
-export const Checkbox: FC<ComponentProps<typeof ChakraCheckbox>> = (props) => {
-  return <ChakraCheckbox size="md" colorScheme="purple" {...props} />
+import { Checkbox as MantineCheckbox, CheckboxProps } from "@mantine/core"
+import { FC } from "react"
+
+export const Checkbox: FC<CheckboxProps> = (props) => {
+  return <MantineCheckbox size="md" color="violet" {...props} />
 }

apps/website/components/Radio.tsx

@@ -1,6 +1,8 @@
-import { Radio as ChakraRadio } from "@chakra-ui/react"
-import { ComponentProps, FC } from "react"
+"use client"
 
-export const Radio: FC<ComponentProps<typeof ChakraRadio>> = (props) => {
-  return <ChakraRadio size="md" colorScheme="purple" {...props} />
+import { Radio as MantineRadio, RadioProps } from "@mantine/core"
+import { FC } from "react"
+
+export const Radio: FC<RadioProps> = (props) => {
+  return <MantineRadio size="md" color="violet" {...props} />
 }

apps/website/components/Section.tsx

@@ -1,32 +1,30 @@
-import { Flex } from "@chakra-ui/react"
-import { ComponentProps, FC } from "react"
+import { Box, Flex, FlexProps } from "@mantine/core"
+import { FC, ReactNode } from "react"
 
-type SectionProps = ComponentProps<typeof Flex> & {
-  innerProps?: ComponentProps<typeof Flex>
+type SectionProps = Omit<FlexProps, "component"> & {
+  innerProps?: FlexProps
+  children?: ReactNode
+  as?: "section" | "header" | "footer"
 }
 export const Section: FC<SectionProps> = ({
   innerProps,
   children,
+  as: Element = "section",
   ...props
 }) => {
   return (
-    <Flex
-      direction="column"
-      width="100%"
-      px="30px"
-      alignItems="center"
-      as="section"
-      {...props}
-    >
-      <Flex
-        direction="column"
-        width="100%"
-        maxWidth="800"
-        alignItems="center"
-        {...innerProps}
-      >
-        {children}
+    <Box component={Element}>
+      <Flex direction="column" w="100%" px="30px" align="center" {...props}>
+        <Flex
+          direction="column"
+          w="100%"
+          maw="800"
+          align="center"
+          {...innerProps}
+        >
+          {children}
+        </Flex>
       </Flex>
-    </Flex>
+    </Box>
   )
 }

apps/website/components/SocialIcons.tsx

@@ -1,12 +1,12 @@
-import { Flex, Stack } from "@chakra-ui/react"
-import React, { ComponentProps } from "react"
+import { Flex, FlexProps } from "@mantine/core"
+import { FC } from "react"
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa"
 
-export const SocialIcons: React.FC<ComponentProps<typeof Flex>> = (props) => {
+export const SocialIcons: FC<FlexProps> = (props) => {
   return (
     <Flex
-      justifyContent={["left", "center"]}
-      alignItems="center"
+      justify={{ base: "left", sm: "center" }}
+      align="center"
       gap="12px"
       {...props}
     >

apps/website/eslint.config.mjs

@@ -0,0 +1,23 @@
+import { defineConfig, globalIgnores } from "eslint/config"
+import nextVitals from "eslint-config-next/core-web-vitals"
+import nextTs from "eslint-config-next/typescript"
+import eslintConfigPrettier from "eslint-config-prettier"
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  eslintConfigPrettier,
+  {
+    rules: {
+      "@next/next/no-page-custom-font": "off",
+      "@next/next/no-img-element": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
+    },
+  },
+  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
+])
+
+export default eslintConfig

apps/website/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts"
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.