Git Product home page Git Product logo

nuera-files's Introduction

next-gdrive-index

Demo · Deploying Guide · FAQ

Version 2 is here!

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.

There also some changes on the configuration file, so make sure to read the Migration Guide if you're upgrading from version 1.x.

Here's what changed in version 2:

New Features

  • Theme Select, light mode? dark mode? you choose.
  • shadcn/ui, change the UI library to shadcn/ui.
  • Faster Response Time, added cache to improve the response time.
  • Revalidate Data, data fetching now utilizing revalidate. (can be changed from config file)

    You can manually revalidate the data by sending POST request to /api/revalidate with Authorization header set to {{ process.env.SITE_PASSWORD }}.

Changed

  • General Layout, New fresh look with shadcn/ui.
  • Download Link, Added token that will be expired after x hour(s). (can be changed from config file)
  • Raw Link, Raw link only available for image, video, and audio files. Raw link are recommended for hosting web project assets or comments on forum.
  • Footer, now you can customize the footer from config file, also added support for Markdown.
  • Data Fetching, now using Server Actions instead of API Routes.
  • Encryption, moved to Server Actions.
  • Typescript Config, target changed from ES5 to ES2021.
  • Environment Variable, now focus on Server Side Environment Variable.
    • NEXT_PUBLIC_ENCRYPTION_KEY changed to ENCRYPTION_KEY.
    • NEXT_PUBLIC_SITE_PASSWORD changed to SITE_PASSWORD.
    • MASTER_KEY added.
  • Configuration File, things are changed:
    • version bumped to 2.0.
    • masterKey moved to Environment Variable.
    • apiConfig.revalidate added.
    • siteConfig.siteNameTemplate added.
    • siteConfig.siteAuthor added.
    • siteConfig.robots added.
    • siteConfig.footer added.
    • siteConfig.defaultAccentColor deprecated.
    • siteConfig.breadcrumbMax added.
    • siteConfig.toaster added.
    • siteConfig.navbarItems[number].icons changed to lucide icons.
    • siteConfig.supports added.

Fixed

  • Rendering issue on mobile devices.

Dependency Update

  • @iconify/react switched to lucide-react.
  • @mdx-js/loader removed.
  • @mdx-js/react removed.
  • @next/mdx removed.
  • @popperjs/core removed.
  • next updated to ^14.1.4.
  • next-seo removed.
  • tailwind-merge updated to ^2.2.2.

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.
It's aim to simplify the process of sharing files using Google Drive, and also implements some features that I think is useful for sharing files.

This project are HEAVILY INSPIRED by onedrive-vercel-index by SpencerWooo.

Why I made this?

when I compare the price between these two services, Google Drive still cheaper than Onedrive.
For 100GB plan, Google Drive is IDR 269.000 / ~$18 USD annually, and Onedrive is IDR 319.000 / ~$21 USD annually.
For free plan, Google Drive offering 15GB of storage, and Onedrive offering 5GB of storage.

I know there are a lot of people selling cheap edu account for Google Drive and Onedrive, but most of the time those account doesn't last long, especially Google Drive account. So I want to do it legit without buying cheap edu account or anything similar this time.

Features

  • Private Index, lock the whole index site with password.
  • Folder and file protection, you can protect your folder and files with password.
  • Readme file, you can add readme file for your folder, so you can add some description for your folder.
  • File preview, you can preview some file types directly from the browser, without downloading it first.
    • Image preview
    • Video preview
    • Audio preview
    • Markdown preview
    • PDF preview
    • Document preview (docx, pptx, xlsx)
    • Code preview
    • Text preview
    • Manga preview (cbz)
  • File search, you can search for files and folders easily.
  • Direct download, you can download files directly from index site without opening Google Drive.
  • Raw file link, you can use the raw file link for hosting your web project assets or comments on forum.

File Security

This only apply if maxFileSize is enabled.

You need to set the file sharing permission to Anyone with the link can view for the files that you want to share.

Why? because the download link will be redirected to the Google Drive download link, and it can only be accessed if the file is shared with Anyone with the link can view permission.

If not, the download link will be redirected to the Google Drive web content link, and it can be accessed without sharing the file.

But this might expose the file ID, so people might be able to access the files directly from Google Drive. (But I'm sure they can't access the folder itself, only the file that are being downloaded)

Known Issue

File size limit

This only apply if you're using platform that have file size limit, like Vercel.
If you're using VPS or other platform that doesn't have file size limit, you can disable maxFileSize inside config file.

File size limit causing some files can't be previewed, and the download will be redirected to the raw file link.
This won't be fixed, because it's a limitation from the deployment platform itself.

Long Response Time

From version 2.0, We are using Cache to improve the response time.
It might take a long time for deep nested folders, but once the data is fetched, it will be cached and the response time will be faster.

I also add revalidate config on page file to 5 minutes. You can change the value inside src/app/page.tsx & src/app/[...rest]/page.tsx.

The flow of the project are:

  • Validate the path is valid or not. (Only applied for /...[path])
  • Fetch the password, readme, and files from Google Drive.
  • Show to the user.

So, if you have a lot of files in your Google Drive, it might take a long time to fetch all the files.
To improve the response time, I added a cache to the response, so the next time you access the same path, it will be faster.

ATM, it roughly take around 600 - 2 seconds to fetch all the data on my Google Drive.

Can't seek on audio and video preview

It looks like the audio and video preview can't seek, so you need to listen/watch from the beginning.
I'm still looking for a solution for this.

Shared Drive is now supported

I don't have Google Shared Drive, so I can't test it and implement it.
Implemented by @loadingthedev (PR #4)

No support for Google Docs, Sheets, and Slides

For now, I don't have any plan to implement this, because I think it's not necessary.
All Google Drive files like Docs, Sheets, and Slides are hidden from the list.

PR are welcome if you want to implement this.

Migration Guide

If you're upgrading from version 1.x to version 2, there are some changes that you need to do:

Configuration File

You can check the new Configuration Schema on /src/schema.ts

There are some changes on the configuration file, here's the list of changes:

  • masterKey REMOVED, we don't need this anymore

  • apiConfig.rootFolder CHANGED, you need to encrypt the folder ID on your localhost first
    http://localhost:3000/api/internal/encrypt?q={{ folderId }}

  • apiConfig.proxyThumbnail ADDED, default value is true

  • siteConfig.siteNameTemplate ADDED, default value is %s - next-gdrive-index

  • siteConfig.siteAuthor ADDED, default value is mbahArip

  • siteConfig.robots ADDED, default value is noindex, nofollow

  • siteConfig.footer ADDED, default value is Powered by next-gdrive-index

  • siteConfig.defaultAccentColor REMOVED, you can set the theme from /src/app/globals.css (more information about shadcn/ui theme)

  • siteConfig.breadcrumbMax ADDED, default value is 3

  • siteConfig.toaster ADDED, default value is { position: "bottom-right', duration: 3000 }

  • siteConfig.navbarItems[number].icons CHANGED, you need to use Lucide Icons now

  • siteConfig.supports ADDED, you can leave it empty if you don't want to use it

Environment Variable

Now all the environment variable are on the server side, so you need to change the environment variable:

  • NEXT_PUBLIC_ENCRYPTION_KEY CHANGED to ENCRYPTION_KEY
  • NEXT_PUBLIC_SITE_PASSWORD CHANGED to SITE_PASSWORD
  • NEXT_PUBLIC_VERCEL_URL CHANGED to NEXT_PUBLIC_DOMAIN

Sponsors and Donations

If you think I deserve it, you can support me by:

nuera-files's People

Contributors

mbaharip avatar loadingthedev avatar syedtahseen avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.