Adding Support for Javascript

index.js

@@ -5,6 +5,7 @@ import inquirer from "inquirer";
 import chalk from "chalk";
 import K from "./constants.js";
 import createNextApp from "./scripts/create-next-app.js";
+import createNextAppJs from "./scripts/create-next-app-no-typescript.js";
 import ora from "ora";
 import { fileURLToPath } from "url";
 import { dirname } from "path";
@@ -88,6 +89,15 @@ try {
     },
   ]);
 
+  const { projectType } = await prompt( [
+    {
+      name: "projectType",
+      message: "What would you like to use?",
+      type: "list",
+      choices: [K.ts, K.js],
+
+    }
+  ]);
   const { uiLibrary } = await prompt([
     {
       name: "uiLibrary",
@@ -158,7 +168,13 @@ try {
   }
   const projectDir = path.resolve(currentDir, projectName);
   const templateDir = path.resolve(__dirname, "template");
-  createNextApp(projectName, templateDir);
+
+  if (projectType.includes(K.ts)){
+    createNextApp(projectName, templateDir);
+  }else{
+    createNextAppJs(projectName, templateDir)
+
+  }
 
   if (uiLibrary.includes(K.chakraui)) {
     spinner.start(

scripts/create-next-app-no-typescript.js

@@ -0,0 +1,32 @@
+import fs from "fs";
+import path from "path";
+import spawn from "cross-spawn";
+
+const createNextAppJs = (name, templateDir) => {
+  const rootDir = process.cwd();
+  const projectDir = path.resolve(rootDir, name);
+  const options = [
+    "create-next-app@latest",
+    name,
+    "--app",
+    "--tailwind",
+    "--eslint",
+  ];
+  spawn.sync("npx", options, {
+    stdio: "inherit",
+  });
+  fs.cpSync(
+    path.join(templateDir, "config", "next-pwa.config.js"),
+    path.join(projectDir, "next.config.js")
+  );
+  fs.cpSync(
+    path.join(templateDir, "config", "gitignore"),
+    path.join(projectDir, ".gitignore")
+  );
+  fs.cpSync(
+    path.join(templateDir, "README.md"),
+    path.join(projectDir, "README.md")
+  );
+};
+
+export default createNextAppJs;

template-js/components/MUIThemeProvider.js

@@ -0,0 +1,28 @@
+"use client";
+
+import { createTheme } from "@mui/material/styles";
+import { ThemeProvider, CssBaseline } from "@mui/material";
+
+export const lightTheme = createTheme({
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#5361fc",
+    },
+    secondary: {
+      main: "#32c13b",
+    },
+    info: {
+      main: "#fcb42f",
+    },
+  },
+});
+
+export function MUIThemeProvider({ children }) {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+}

template-js/components/RadixThemeProvider.js

@@ -0,0 +1,8 @@
+"use client";
+
+import "@radix-ui/themes/styles.css";
+import { Theme } from "@radix-ui/themes";
+
+export function RadixThemeProvider({ children }) {
+  return <Theme>{children}</Theme>;
+}

template-js/components/chakraUIProvider.js

@@ -0,0 +1,15 @@
+// app/providers.tsx
+'use client';
+
+// import { CacheProvider } from '@chakra-ui/next-js';
+import { CacheProvider } from '@chakra-ui-next-js';
+import { ChakraProvider } from '@chakra-ui/react';
+
+export function ChakraUIProvider({ children }) {
+  return (
+    <CacheProvider>
+      <ChakraProvider>{children}</ChakraProvider>
+    </CacheProvider>
+
+  );
+}

template-js/layout/rootLayout-mui.js

@@ -0,0 +1,83 @@
+
+// import { Metadata } from "next" COMMENT: Does it require?
+import "./globals.css";
+import { MUIThemeProvider } from "./MUIThemeProvider";
+
+// Metadata for SEO
+export const metadata = {
+  title: "NextJS Easy Template",
+  description: "NextJS | TailwindCSS | Material UI easy template by Li Yuxuan",
+  manifest: "/manifest.json",
+  appleWebApp: {
+    title: "NextJS Easy Template",
+    statusBarStyle: "black-translucent",
+  },
+  icons: {
+    icon: "/favicon.ico",
+    apple: [
+      {
+        url: "/android-chrome-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+      },
+      {
+        url: "/android-chrome512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+    ],
+    other: {
+      rel: "apple-touch-icon",
+      url: "/apple-touch-icon.png",
+    },
+  },
+  applicationName: "NextJS Easy Template",
+  keywords: ["template"],
+  authors: [{ name: "Li Yuxuan", url: "https://xmliszt.github.io/" }],
+  creator: "Li Yuxuan",
+  alternates: {
+    canonical: "http://localhost:3000",
+  },
+  category: "technology",
+  openGraph: {
+    title: "NextJS Easy Template",
+    description:
+      "NextJS | TailwindCSS | Material UI easy template by Li Yuxuan",
+    url: "http://localhost:3000",
+    siteName: "Taboo AI",
+    images: [
+      {
+        url: "https://i.imgur.com/IIP6UzK.jpeg",
+        width: 800,
+        height: 600,
+        alt: "NextJS Easy Template",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "NextJS Easy Template",
+    description:
+      "NextJS | TailwindCSS | Material UI easy template by Li Yuxuan",
+    siteId: "1704579643",
+    creator: "@xmliszt",
+    creatorId: "1704579643",
+    images: ["https://i.imgur.com/IIP6UzK.jpeg"],
+  },
+  viewport: {
+    width: "device-width",
+    initialScale: 1,
+  },
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <MUIThemeProvider>{children}</MUIThemeProvider>
+      </body>
+    </html>
+  );
+}

template-js/layout/rootLayout-no-chakraui.js

@@ -0,0 +1,77 @@
+import { Metadata } from "next";
+import "./globals.css";
+
+// Metadata for SEO
+export const metadata = {
+  title: "NextJS Easy Template",
+  description: "NextJS | TailwindCSS | ChakraUI easy template by Li Yuxuan",
+  manifest: "/manifest.json",
+  appleWebApp: {
+    title: "NextJS Easy Template",
+    statusBarStyle: "black-translucent",
+  },
+  icons: {
+    icon: "/favicon.ico",
+    apple: [
+      {
+        url: "/android-chrome-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+      },
+      {
+        url: "/android-chrome512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+    ],
+    other: {
+      rel: "apple-touch-icon",
+      url: "/apple-touch-icon.png",
+    },
+  },
+  applicationName: "NextJS Easy Template",
+  keywords: ["template"],
+  authors: [{ name: "Li Yuxuan", url: "https://xmliszt.github.io/" }],
+  creator: "Li Yuxuan",
+  alternates: {
+    canonical: "http://localhost:3000",
+  },
+  category: "technology",
+  openGraph: {
+    title: "NextJS Easy Template",
+    description: "NextJS | TailwindCSS | ChakraUI easy template by Li Yuxuan",
+    url: "http://localhost:3000",
+    siteName: "Taboo AI",
+    images: [
+      {
+        url: "https://i.imgur.com/IIP6UzK.jpeg",
+        width: 800,
+        height: 600,
+        alt: "NextJS Easy Template",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "NextJS Easy Template",
+    description: "NextJS | TailwindCSS | ChakraUI easy template by Li Yuxuan",
+    siteId: "1704579643",
+    creator: "@xmliszt",
+    creatorId: "1704579643",
+    images: ["https://i.imgur.com/IIP6UzK.jpeg"],
+  },
+  viewport: {
+    width: "device-width",
+    initialScale: 1,
+  },
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

template-js/layout/rootLayout-radix.js

@@ -0,0 +1,81 @@
+// import { Metadata } from "next";
+// import React from "react";
+import "./globals.css";
+import { RadixThemeProvider } from "./RadixThemeProvider";
+
+// Metadata for SEO
+export const metadata = {
+  title: "NextJS Easy Template",
+  description: "NextJS | TailwindCSS | RadixUI easy template by Li Yuxuan",
+  manifest: "/manifest.json",
+  appleWebApp: {
+    title: "NextJS Easy Template",
+    statusBarStyle: "black-translucent",
+  },
+  icons: {
+    icon: "/favicon.ico",
+    apple: [
+      {
+        url: "/android-chrome-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+      },
+      {
+        url: "/android-chrome512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+    ],
+    other: {
+      rel: "apple-touch-icon",
+      url: "/apple-touch-icon.png",
+    },
+  },
+  applicationName: "NextJS Easy Template",
+  keywords: ["template"],
+  authors: [{ name: "Li Yuxuan", url: "https://xmliszt.github.io/" }],
+  creator: "Li Yuxuan",
+  alternates: {
+    canonical: "http://localhost:3000",
+  },
+  category: "technology",
+  openGraph: {
+    title: "NextJS Easy Template",
+    description: "NextJS | TailwindCSS | RadixUI easy template by Li Yuxuan",
+    url: "http://localhost:3000",
+    siteName: "Taboo AI",
+    images: [
+      {
+        url: "https://i.imgur.com/IIP6UzK.jpeg",
+        width: 800,
+        height: 600,
+        alt: "NextJS Easy Template",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "NextJS Easy Template",
+    description: "NextJS | TailwindCSS | RadixUI easy template by Li Yuxuan",
+    siteId: "1704579643",
+    creator: "@xmliszt",
+    creatorId: "1704579643",
+    images: ["https://i.imgur.com/IIP6UzK.jpeg"],
+  },
+  viewport: {
+    width: "device-width",
+    initialScale: 1,
+  },
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <RadixThemeProvider>{children}</RadixThemeProvider>
+      </body>
+    </html>
+  );
+}