diff --git a/.prettierrc.js b/.prettierrc.js
index 99bcabb..cbd437c 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,10 +1,7 @@
"use strict";
module.exports = {
- plugins: [
- require("prettier-plugin-tailwindcss"),
- require("@trivago/prettier-plugin-sort-imports"),
- ],
- printWidth: 120,
+ plugins: [require("@trivago/prettier-plugin-sort-imports"), require("prettier-plugin-tailwindcss")],
+ printWidth: 80,
tabWidth: 2,
useTabs: false,
semi: true,
@@ -30,4 +27,5 @@ module.exports = {
],
importOrderSeparation: true,
importOrderSortSpecifiers: true,
+ tailwindFunctions: ["twsx", "cn"],
};
diff --git a/README.md b/README.md
index 08b2e18..a4f2f6b 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,16 @@
FAQ
+## Version 2
+
+It seems there are some bugs on mobile devices that prevent the files list from rendering properly. So I will use this chance to upgrade the project to `Next.js 14`, use `shadcn/ui`, and also add some new features.
+
+Here's what changed in version 2:
+
+- Upgrade to `Next.js 14` app directory structure.
+- Use `shadcn/ui` for the UI components.
+- Add light and dark mode.
+
## What is this?
`next-gdrive-index` is an indexer for Google Drive, it's a simple project that I made to index my files in Google Drive.
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..e048066
--- /dev/null
+++ b/components.json
@@ -0,0 +1,17 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "default",
+ "rsc": true,
+ "tsx": true,
+ "tailwind": {
+ "config": "tailwind.config.ts",
+ "css": "src/app/globals.css",
+ "baseColor": "zinc",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "aliases": {
+ "components": "~/components",
+ "utils": "~/utils"
+ }
+}
diff --git a/next.config.js b/next.config.js
index 8851780..9f61070 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,34 +1,35 @@
/** @type {import('next').NextConfig} */
-const withMDX = require("@next/mdx")({
- extension: /\.mdx?$/,
- options: {
- // If you use remark-gfm, you'll need to use next.config.mjs
- // as the package is ESM only
- // https://github.com/remarkjs/remark-gfm#install
- remarkPlugins: [],
- rehypePlugins: [],
- // If you use `MDXProvider`, uncomment the following line.
- providerImportSource: "@mdx-js/react",
- },
-});
+// const withMDX = require("@next/mdx")({
+// extension: /\.mdx?$/,
+// options: {
+// // If you use remark-gfm, you'll need to use next.config.mjs
+// // as the package is ESM only
+// // https://github.com/remarkjs/remark-gfm#install
+// remarkPlugins: [],
+// rehypePlugins: [],
+// // If you use `MDXProvider`, uncomment the following line.
+// providerImportSource: "@mdx-js/react",
+// },
+// });
const nextConfig = {
- pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
+ // pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
reactStrictMode: true,
- async headers() {
- return [
- {
- source: "/:path*",
- headers: [
- {
- key: "Cache-Control",
- value: "max-age=300, s-maxage=300, stale-while-revalidate, public",
- },
- ],
- },
- ];
- },
+ // async headers() {
+ // return [
+ // {
+ // source: "/:path*",
+ // headers: [
+ // {
+ // key: "Cache-Control",
+ // value: "max-age=300, s-maxage=300, stale-while-revalidate, public",
+ // },
+ // ],
+ // },
+ // ];
+ // },
};
-module.exports = withMDX(nextConfig);
+// module.exports = withMDX(nextConfig);
+module.exports = nextConfig;
diff --git a/package.json b/package.json
index 5e77880..ffebd8e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
- "name": "drive-manager",
- "version": "0.1.0",
+ "name": "next-gdrive-index",
+ "version": "2.0.0",
"private": true,
"scripts": {
"dev": "next dev -p 3000",
@@ -12,24 +12,59 @@
},
"dependencies": {
"@cyntler/react-doc-viewer": "^1.13.0",
- "@iconify/react": "^4.1.1",
- "@mdx-js/loader": "^2.3.0",
- "@mdx-js/react": "^2.3.0",
- "@next/mdx": "^13.4.19",
- "@popperjs/core": "^2.11.8",
+ "@hookform/resolvers": "^3.3.4",
+ "@radix-ui/react-accordion": "^1.1.2",
+ "@radix-ui/react-alert-dialog": "^1.0.5",
+ "@radix-ui/react-aspect-ratio": "^1.0.3",
+ "@radix-ui/react-avatar": "^1.0.4",
+ "@radix-ui/react-checkbox": "^1.0.4",
+ "@radix-ui/react-collapsible": "^1.0.3",
+ "@radix-ui/react-context-menu": "^2.1.5",
+ "@radix-ui/react-dialog": "^1.0.5",
+ "@radix-ui/react-dropdown-menu": "^2.0.6",
+ "@radix-ui/react-hover-card": "^1.0.7",
+ "@radix-ui/react-label": "^2.0.2",
+ "@radix-ui/react-menubar": "^1.0.4",
+ "@radix-ui/react-navigation-menu": "^1.1.4",
+ "@radix-ui/react-popover": "^1.0.7",
+ "@radix-ui/react-progress": "^1.0.3",
+ "@radix-ui/react-radio-group": "^1.1.3",
+ "@radix-ui/react-scroll-area": "^1.0.5",
+ "@radix-ui/react-select": "^2.0.0",
+ "@radix-ui/react-separator": "^1.0.3",
+ "@radix-ui/react-slider": "^1.1.2",
+ "@radix-ui/react-slot": "^1.0.2",
+ "@radix-ui/react-switch": "^1.0.3",
+ "@radix-ui/react-tabs": "^1.0.4",
+ "@radix-ui/react-toast": "^1.1.5",
+ "@radix-ui/react-toggle": "^1.0.3",
+ "@radix-ui/react-toggle-group": "^1.0.4",
+ "@radix-ui/react-tooltip": "^1.0.7",
"axios": "^1.3.5",
+ "class-variance-authority": "^0.7.0",
+ "clsx": "^2.1.0",
+ "cmdk": "^1.0.0",
+ "date-fns": "^3.6.0",
+ "embla-carousel-react": "^8.0.0",
"googleapis": "^118.0.0",
+ "input-otp": "^1.2.3",
"jsonwebtoken": "^9.0.0",
"jszip": "^3.10.1",
- "next": "^13.4.13",
- "next-seo": "^6.1.0",
+ "lucide-react": "^0.363.0",
+ "next": "^14.1.4",
+ "next-themes": "^0.3.0",
+ "nextjs-toploader": "^1.6.11",
"react": "^18.2.0",
+ "react-day-picker": "^8.10.0",
"react-dom": "^18.2.0",
"react-h5-audio-player": "^3.8.6",
+ "react-hook-form": "^7.51.2",
+ "react-hot-toast": "^2.4.1",
"react-is": "^18.2.0",
"react-markdown": "^8.0.7",
"react-player": "^2.13.0",
"react-popper": "^2.3.0",
+ "react-resizable-panels": "^2.0.16",
"react-toastify": "^9.1.3",
"rehype-katex": "^6.0.3",
"rehype-prism-plus": "^1.6.3",
@@ -37,7 +72,12 @@
"remark-gfm": "^3.0.1",
"remark-math": "^5.1.1",
"remark-slug": "^7.0.1",
- "remark-toc": "^8.0.1"
+ "remark-toc": "^8.0.1",
+ "sonner": "^1.4.41",
+ "tailwind-merge": "^2.2.2",
+ "tailwindcss-animate": "^1.0.7",
+ "vaul": "^0.9.0",
+ "zod": "^3.22.4"
},
"devDependencies": {
"@faker-js/faker": "^8.0.2",
@@ -50,15 +90,14 @@
"@types/react": "18.0.35",
"@types/react-dom": "18.0.11",
"@types/three": "^0.150.2",
- "autoprefixer": "10.4.14",
+ "autoprefixer": "^10.4.19",
"encoding": "^0.1.13",
"eslint": "8.38.0",
- "eslint-config-next": "^13.4.3",
- "postcss": "8.4.22",
+ "eslint-config-next": "^14.1.4",
+ "postcss": "^8.4.38",
"prettier": "^2.8.7",
"prettier-plugin-tailwindcss": "^0.2.7",
- "tailwind-merge": "^1.14.0",
- "tailwindcss": "3.3.1",
+ "tailwindcss": "^3.4.1",
"typescript": "5.0.4"
}
}
diff --git a/src/pages/404.tsx b/src/_pages/404.tsx
similarity index 100%
rename from src/pages/404.tsx
rename to src/_pages/404.tsx
diff --git a/src/pages/[...path]/index.tsx b/src/_pages/[...path]/index.tsx
similarity index 100%
rename from src/pages/[...path]/index.tsx
rename to src/_pages/[...path]/index.tsx
diff --git a/src/pages/_app.tsx b/src/_pages/_app.tsx
similarity index 75%
rename from src/pages/_app.tsx
rename to src/_pages/_app.tsx
index 487b15c..2f1618a 100644
--- a/src/pages/_app.tsx
+++ b/src/_pages/_app.tsx
@@ -52,7 +52,8 @@ export default function App({ Component, pageProps }: AppProps) {
const [showToTopButton, setShowToTopButton] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
- const [clearPasswordModalOpen, setClearPasswordModalOpen] = useState(false);
+ const [clearPasswordModalOpen, setClearPasswordModalOpen] =
+ useState(false);
useEffect(() => {
const handleScroll = () => {
@@ -85,7 +86,7 @@ export default function App({ Component, pageProps }: AppProps) {
return (
-