Merge pull request #836 from spencerwooo/swo/migrate-to-src-dir

.eslintrc

@@ -1,3 +0,0 @@
-{
-  "extends": ["next", "next/core-web-vitals", "prettier"]
-}

.prettierrc.js

@@ -1,9 +0,0 @@
-module.exports = {
-  printWidth: 120,
-  arrowParens: "avoid",
-  singleQuote: true,
-  semi: false,
-  plugins: [
-    require('prettier-plugin-tailwindcss')
-  ]
-}

package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "format": "prettier 'components/**/*.tsx' 'config/*.js' 'pages/**/*.{ts,tsx}' '{types,utils}/**/*.ts' --write",
+    "format": "prettier 'src/**/*.{js,ts,jsx,tsx}' --write",
     "extract": "i18next"
   },
   "dependencies": {
@@ -74,5 +74,21 @@
     "prettier-plugin-tailwindcss": "^0.2.2",
     "tailwindcss": "^3.2.4",
     "typescript": "4.9.4"
+  },
+  "prettier": {
+    "printWidth": 120,
+    "arrowParens": "avoid",
+    "singleQuote": true,
+    "semi": false,
+    "plugins": [
+      "prettier-plugin-tailwindcss"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "next",
+      "next/core-web-vitals",
+      "prettier"
+    ]
   }
 }

src/components/FolderGridLayout.tsx

@@ -77,7 +77,7 @@ const FolderGridLayout = ({
   const getItemPath = (name: string) => `${path === '/' ? '' : path}/${encodeURIComponent(name)}`
 
   return (
-    <div className="rounded bg-white dark:bg-gray-900 dark:text-gray-100 shadow-sm">
+    <div className="rounded bg-white shadow-sm dark:bg-gray-900 dark:text-gray-100">
       <div className="flex items-center border-b border-gray-900/10 px-3 text-xs font-bold uppercase tracking-widest text-gray-600 dark:border-gray-500/30 dark:text-gray-400">
         <div className="flex-1">{t('{{count}} item(s)', { count: folderChildren.length })}</div>
         <div className="flex p-1.5 text-gray-700 dark:text-gray-400">

src/components/FolderListLayout.tsx

@@ -54,7 +54,7 @@ const FolderListLayout = ({
   const getItemPath = (name: string) => `${path === '/' ? '' : path}/${encodeURIComponent(name)}`
 
   return (
-    <div className="rounded bg-white dark:bg-gray-900 dark:text-gray-100 shadow-sm">
+    <div className="rounded bg-white shadow-sm dark:bg-gray-900 dark:text-gray-100">
       <div className="grid grid-cols-12 items-center space-x-2 border-b border-gray-900/10 px-3 dark:border-gray-500/30">
         <div className="col-span-12 py-2 text-xs font-bold uppercase tracking-widest text-gray-600 dark:text-gray-300 md:col-span-6">
           {t('Name')}

src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import config from '../config/site.config'
+import config from '../../config/site.config'
 
 const createFooterMarkup = () => {
   return {

src/components/Navbar.tsx

@@ -10,7 +10,7 @@ import { useRouter } from 'next/router'
 import { Fragment, useEffect, useState } from 'react'
 import { useTranslation } from 'next-i18next'
 
-import siteConfig from '../config/site.config'
+import siteConfig from '../../config/site.config'
 import SearchModal from './SearchModal'
 import SwitchLang from './SwitchLang'
 import useDeviceOS from '../utils/useDeviceOS'

src/components/SearchModal.tsx

@@ -15,7 +15,7 @@ import { LoadingIcon } from './Loading'
 
 import { getFileIcon } from '../utils/getFileIcon'
 import { fetcher } from '../utils/fetchWithSWR'
-import siteConfig from '../config/site.config'
+import siteConfig from '../../config/site.config'
 
 /**
  * Extract the searched item's path in field 'parentReference' and convert it to the

src/components/previews/Containers.tsx

@@ -1,10 +1,10 @@
 export function PreviewContainer({ children }): JSX.Element {
-  return <div className="rounded bg-white p-3 dark:bg-gray-900 dark:text-white shadow-sm">{children}</div>
+  return <div className="rounded bg-white p-3 shadow-sm dark:bg-gray-900 dark:text-white">{children}</div>
 }
 
 export function DownloadBtnContainer({ children }): JSX.Element {
   return (
-    <div className="sticky bottom-0 left-0 right-0 z-10 rounded border-t border-gray-900/10 bg-white bg-opacity-80 p-2 backdrop-blur-md dark:border-gray-500/30 dark:bg-gray-900 shadow-sm">
+    <div className="sticky bottom-0 left-0 right-0 z-10 rounded border-t border-gray-900/10 bg-white bg-opacity-80 p-2 shadow-sm backdrop-blur-md dark:border-gray-500/30 dark:bg-gray-900">
       {children}
     </div>
   )

src/pages/[...path].tsx

@@ -2,7 +2,7 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
-import siteConfig from '../config/site.config'
+import siteConfig from '../../config/site.config'
 import Navbar from '../components/Navbar'
 import FileListing from '../components/FileListing'
 import Footer from '../components/Footer'
@@ -20,8 +20,8 @@ export default function Folders() {
 
       <main className="flex w-full flex-1 flex-col bg-gray-50 dark:bg-gray-800">
         <Navbar />
-        <div className="mx-auto w-full max-w-5xl sm:p-4 py-4">
+        <div className="mx-auto w-full max-w-5xl py-4 sm:p-4">
-          <nav className="mb-4 flex items-center justify-between space-x-3 sm:pl-1 sm:px-0 px-4">
+          <nav className="mb-4 flex items-center justify-between space-x-3 px-4 sm:px-0 sm:pl-1">
             <Breadcrumb query={query} />
             <SwitchLayout />
           </nav>

src/pages/_document.tsx

@@ -1,5 +1,5 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document'
-import siteConfig from '../config/site.config'
+import siteConfig from '../../config/site.config'
 
 class MyDocument extends Document {
   render() {

src/pages/api/index.ts

@@ -3,8 +3,8 @@ import { posix as pathPosix } from 'path'
 import type { NextApiRequest, NextApiResponse } from 'next'
 import axios from 'axios'
 
-import apiConfig from '../../config/api.config'
+import apiConfig from '../../../config/api.config'
-import siteConfig from '../../config/site.config'
+import siteConfig from '../../../config/site.config'
 import { revealObfuscatedToken } from '../../utils/oAuthHandler'
 import { compareHashedToken } from '../../utils/protectedRouteHandler'
 import { getOdAuthTokens, storeOdAuthTokens } from '../../utils/odAuthTokenStore'

src/pages/api/item.ts

@@ -2,7 +2,7 @@ import axios from 'axios'
 import type { NextApiRequest, NextApiResponse } from 'next'
 
 import { getAccessToken } from '.'
-import apiConfig from '../../config/api.config'
+import apiConfig from '../../../config/api.config'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   // Get access token from storage

src/pages/api/raw.ts

@@ -4,7 +4,7 @@ import type { NextApiRequest, NextApiResponse } from 'next'
 import axios, { AxiosResponseHeaders } from 'axios'
 import Cors from 'cors'
 
-import { driveApi, cacheControlHeader } from '../../config/api.config'
+import { driveApi, cacheControlHeader } from '../../../config/api.config'
 import { encodePath, getAccessToken, checkAuthRoute } from '.'
 
 // CORS middleware for raw links: https://nextjs.org/docs/api-routes/api-middlewares

src/pages/api/search.ts

@@ -2,8 +2,8 @@ import axios from 'axios'
 import type { NextApiRequest, NextApiResponse } from 'next'
 
 import { encodePath, getAccessToken } from '.'
-import apiConfig from '../../config/api.config'
+import apiConfig from '../../../config/api.config'
-import siteConfig from '../../config/site.config'
+import siteConfig from '../../../config/site.config'
 
 /**
  * Sanitize the search query

src/pages/api/thumbnail.ts

@@ -6,7 +6,7 @@ import axios from 'axios'
 import type { NextApiRequest, NextApiResponse } from 'next'
 
 import { checkAuthRoute, encodePath, getAccessToken } from '.'
-import apiConfig from '../../config/api.config'
+import apiConfig from '../../../config/api.config'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const accessToken = await getAccessToken()

src/pages/index.tsx

@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
-import siteConfig from '../config/site.config'
+import siteConfig from '../../config/site.config'
 import Navbar from '../components/Navbar'
 import FileListing from '../components/FileListing'
 import Footer from '../components/Footer'
@@ -17,8 +17,8 @@ export default function Home() {
 
       <main className="flex w-full flex-1 flex-col bg-gray-50 dark:bg-gray-800">
         <Navbar />
-        <div className="mx-auto w-full max-w-5xl sm:p-4 py-4">
+        <div className="mx-auto w-full max-w-5xl py-4 sm:p-4">
-          <nav className="mb-4 flex items-center justify-between sm:pl-1 sm:px-0 px-4">
+          <nav className="mb-4 flex items-center justify-between px-4 sm:px-0 sm:pl-1">
             <Breadcrumb />
             <SwitchLayout />
           </nav>

src/pages/onedrive-vercel-index-oauth/step-1.tsx

@@ -4,8 +4,8 @@ import { useRouter } from 'next/router'
 import { useTranslation, Trans } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
-import siteConfig from '../../config/site.config'
+import siteConfig from '../../../config/site.config'
-import apiConfig from '../../config/api.config'
+import apiConfig from '../../../config/api.config'
 import Navbar from '../../components/Navbar'
 import Footer from '../../components/Footer'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

src/pages/onedrive-vercel-index-oauth/step-2.tsx

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useTranslation, Trans } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
-import siteConfig from '../../config/site.config'
+import siteConfig from '../../../config/site.config'
 import Navbar from '../../components/Navbar'
 import Footer from '../../components/Footer'
 import { LoadingIcon } from '../../components/Loading'

src/pages/onedrive-vercel-index-oauth/step-3.tsx

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useTranslation, Trans } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
-import siteConfig from '../../config/site.config'
+import siteConfig from '../../../config/site.config'
 import Navbar from '../../components/Navbar'
 import Footer from '../../components/Footer'
 

src/utils/fileDetails.ts

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs'
 
-import siteConfig from '../config/site.config'
+import siteConfig from '../../config/site.config'
 
 /**
  * Convert raw bits file/folder size into a human readable string

src/utils/oAuthHandler.ts

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import CryptoJS from 'crypto-js'
 
-import apiConfig from '../config/api.config'
+import apiConfig from '../../config/api.config'
 
 // Just a disguise to obfuscate required tokens (including but not limited to client secret,
 // access tokens, and refresh tokens), used along with the following two functions

src/utils/odAuthTokenStore.ts

@@ -1,5 +1,5 @@
 import Redis from 'ioredis'
-import siteConfig from '../config/site.config'
+import siteConfig from '../../config/site.config'
 
 // Persistent key-value store is provided by Redis, hosted on Upstash
 // https://vercel.com/integrations/upstash

src/utils/protectedRouteHandler.ts

@@ -1,5 +1,5 @@
 import sha256 from 'crypto-js/sha256'
-import siteConfig from '../config/site.config'
+import siteConfig from '../../config/site.config'
 
 // Hash password token with SHA256
 function encryptToken(token: string): string {

tailwind.config.js

@@ -3,8 +3,7 @@ const colors = require('tailwindcss/colors')
 const siteConfig = require('./config/site.config')
 
 module.exports = {
-  mode: 'jit',
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
-  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   theme: {
     colors: {
       transparent: 'transparent',