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