Merge pull request #19 from obviyus/astro

feat(v2): init

.gitignore

@@ -1,14 +1,20 @@
-node_modules
+# build output
+dist/
+.cache/
+.output/
 
-/.cache
-/functions/
-/public/build
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
 .env
-images/thumbnail
-images/compressed
-index.js
-.idea/
-*.zip
-*.log
-app/styles/*
-app/images.ts
+.env.production
+
+# macOS-specific files
+.DS_Store

README.md

@@ -12,15 +12,9 @@
 
 <p align="center">Fast, responsive, self-hosted image gallery. Ships minimal JS to the client.</p>
 
-[Musée](https://www.collinsdictionary.com/dictionary/french-english/mus%C3%A9e) (pronounced myu-zay) was written
-primarily to experiment around with https://remix.run/. Until now I had been using the _
-excellent_ [`waschinski/photo-stream`](https://github.com/waschinski/photo-stream) gallery for hosting my images but
-felt limited with having to use Ruby. The eventual goal of Musée is to ship **ZERO** client side JS to the client while
-maintaining the masonry layout.
+[Musée](https://www.collinsdictionary.com/dictionary/french-english/mus%C3%A9e) (pronounced myu-zay) was written primarily to experiment around with https://remix.run/ but now re-written using https://astro.build. Until now I had been using the _ excellent_ [`waschinski/photo-stream`](https://github.com/waschinski/photo-stream) gallery for hosting my images but felt limited with having to use Ruby. The eventual goal of Musée is to ship **ZERO** client side JS to the client while maintaining the masonry layout.
 
-Unfortunately, a responsive masonry layout is [not possible](https://stackoverflow.com/a/45200955/11940280) without the
-use of client-side JS to determine the window size (used for calculating the number of columns). At least
-until [CSS Grid Masonry](https://drafts.csswg.org/css-grid-3/#masonry-layout) becomes available.
+Unfortunately, a responsive masonry layout is [not possible](https://stackoverflow.com/a/45200955/11940280) without the use of client-side JS to determine the window size (used for calculating the number of columns). At least until [CSS Grid Masonry](https://drafts.csswg.org/css-grid-3/#masonry-layout) becomes available.
 
 <a align="center" href="https://gallery.obviy.us/">
     <img src="images/preview.webp" alt="demo" width="100%">
@@ -32,15 +26,13 @@ until [CSS Grid Masonry](https://drafts.csswg.org/css-grid-3/#masonry-layout) be
 
 ## ✨ Features
 
-- [x] Generate WebP image thumbnails
+- [x] Generate image thumbnails
 - [x] Compress original images
 - [x] Strip image metadata before deployment
 - [x] Typescript support
-- [x] Server Side Rendered
+- [x] Statically Generated
 - [x] Uses TailwindCSS
 - [x] OpenGraph meta tags
-- [x] Link pre-fetching
-- [x] Uses `statically.io` for image delivery
 - [ ] Captions for images
 - [ ] Device metadata for images
 - [ ] Image geo-tag map generation
@@ -53,24 +45,20 @@ until [CSS Grid Masonry](https://drafts.csswg.org/css-grid-3/#masonry-layout) be
 $ yarn install
 ```
 
-Setup `config.ts` with metadata information for your website.
+Load your images in the `src/assets/images/original` directory.
 
 2. Start development server
 
 ```bash
-$ yarn run dev
+$ yarn dev
 ```
 
 ## 🚀 Deployment
 
-Deployment (for now) is done to Cloudflare Pages. Documentation is available
-here: https://developers.cloudflare.com/pages/framework-guides/remix/
+Deployment (for now) is done to Cloudflare Pages. Documentation is available here: https://developers.cloudflare.com/pages/framework-guides/astro/
 
 ## Contributing
 
 I'm relatively inexperienced with React so any and all contributions are welcome.
 
-This repository uses the automated [`semantic-release`](https://github.com/semantic-release/semantic-release) suite of
-tools to generate version numbers. All commit messages **must** conform to
-the [Angular Commit Message conventions](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format)
-.
+This repository uses the automated [`semantic-release`](https://github.com/semantic-release/semantic-release) suite of tools to generate version numbers. All commit messages **must** conform to the [Angular Commit Message conventions](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format) .

astro.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+import image from '@astrojs/image';
+import critters from 'astro-critters';
+import purgecss from 'astro-purgecss';
+import react from '@astrojs/react';
+
+export default defineConfig({
+	integrations: [
+		tailwind(),
+		image({
+			serviceEntryPoint: '@astrojs/image/sharp',
+		}),
+		critters(),
+		purgecss(),
+		react(),
+	],
+});