Skip to content

Latest commit

 

History

History
171 lines (108 loc) · 6.22 KB

README.new.md

File metadata and controls

171 lines (108 loc) · 6.22 KB
Raw

Gallery - a PWA image gallery made with Nuxt 3 🎉

gallery preview

✨ Features

All your images are automatically imported from the images folder. Alt text is generated from the filenames.

  • Self-hosted (just copy your images to images)
  • Can be hosted on any static site hosting with Nuxt generate
  • WASD / Arrow key / touch navigation
  • Image support includes .webp .jpg .png formats + more!
  • Support of different aspect ratios
  • PWA functionality provided by @kevinmarrec/nuxt-pwa
  • Image optimisation, provided by @nuxt/image-edge
  • Tailwind CSS for styling
  • ESLint + Prettier for code format and styling
  • Vitest + Vue test utils + Nuxt Devtools + Playwright for tests

Deploy with Vercel

📸 Image credits

🚔 Roadmap:

  • Initial release
  • Further image optimisation for all supported providers. See @nuxt/image issues.
  • Add password authentication

🚀 Quick Start

These instructions will help you set up a production deployment as fast as possible.

  1. Clone the repo or use the Vercel deploy button below to do it automatically.

Deploy with Vercel

  1. Delete all images in images and replace with your own.

  2. Commit & push changes to see your brand new image gallery in action!

For deploying with any other method, only the ipx provider is officially supported.

💻 Local Development

Note this project uses pnpm as the package manager. Replace with npm run or yarn if needed.

Get started

git clone https://github.com/c1llo/gallery.git

cd gallery

pnpm install

Development mode

pnpm dev

🕸️ PWA functionality

Read how to configure here: @kevinmarrec/nuxt-pwa

By default it is enabled if the NODE_ENV environment variable is not equal to development.

When enabled, any cached (already opened) content/pages will be available offline. A future goal is to have full precaching with workbox of all assets on install to enable it to work fully offline.

It is possible to add custom service workers with the module.

🪂 Supported production deployment methods

  • With Docker see Dockerfile (deploy to any PaaS that supports Docker or self-host). DigitalOcean app platform is recommended.
  • With Vercel: Deploy with Vercel

Note to host with Docker you will need to change the image provider to the self-hosted ipx provider within the Nuxt config:

//nuxt.config.ts

image: {
    provider: "ipx",
    ...
},

See instructions for deploying on Vercel here. It works out of the box and by default the vercel provider is used by @nuxt/image-edge for image optimisation.

Important directories

  • images stores all your images
  • src
    • src/components
    • src/composables
    • src/pages
    • src/types
  • test
    • test/e2e stores all Playwright E2E tests

Running the tests

Vitest + Playwright

Unit tests:

pnpm test:unit

E2E tests (this may require other Playwright dependencies to be installed):

pnpm test:e2e

Commands Index:

see package.json

Here is a brief explanation of each command:

  • build: This script command builds the Nuxt.js application in a production environment.

  • dev: This script command starts a development server and watches for changes in the application.

  • generate: This script command generates the static version of the Nuxt.js application.

  • preview: This script command previews the application.

  • postinstall: This script command runs the nuxt prepare command after the project dependencies have been installed.

  • images: This script command generates the Nuxt.js application and copies the generated images to the src/public directory.

  • lint: This script command runs the ESLint linter on the project's TypeScript, JavaScript, and Vue.js files.

  • lint:fix: This script command runs the ESLint linter and automatically fixes any linting errors found in the project's TypeScript, JavaScript, and Vue.js files.

  • prettier: This script command checks the code format of the project's source files using Prettier.

  • prettier:fix: This script command checks the code format of the project's source files using Prettier and automatically fixes any formatting issues.

  • test:unit: This script command runs the unit tests for the project using Vitest.

  • test:e2e: This script command runs the end-to-end tests for the project using Playwright.

  • test:coverage: This script command runs the code coverage tests for the project using Vitest.

  • prepare: This script command installs the Husky library, which is used for Git hooks in the project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details