You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+61-27Lines changed: 61 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,8 @@ My photography portfolio with galleries, tags, folders, and a globe 🌎
4
4
5
5
# Setup
6
6
7
+
## Development Server
8
+
7
9
The prerequisites are Node >= 20 and pnpm >= 8.
8
10
9
11
First, install the dependencies:
@@ -20,6 +22,30 @@ pnpm dev
20
22
21
23
Open http://localhost:3000 to see the app!
22
24
25
+
## Photos Backend
26
+
27
+
This project uses Contentful to upload photos and manage photo albums. No other CMS are currently supported.
28
+
29
+
> **Beginning April 30, 2025, Contentful has made changes to the Free plan entitlements by reducing the monthly asset bandwidth from 800GB to 50GB. If you expect to exceed 50GB in CDN bandwidth a month, you may consider replacing it with another CMS and update the GraphQL queries and environment variables as necessary.**
30
+
31
+
To start, you'll need to create a [Contentful](https://app.contentful.com/) space. Once created, head to Settings -> API Keys -> Add API Key.
32
+
33
+
Here, you'll see a space ID and two tokens. You can then populate an `.env.local` file with these:
Then, head to `Content model -> Create content type`. Create the [Photo Albums](#photo-albums) model using the schema below. Once made, you can add entries on the Content tab, and upload images to each entry's media field.
42
+
43
+
This project does _not_ make use of the Contentful Image API to optimize photos. Instead, we optimize images beforehand by converting them to `.webp` in a script using [`cwebp`](https://developers.google.com/speed/webp/download) and [`ImageMagick`](https://formulae.brew.sh/formula/imagemagick):
44
+
45
+
```
46
+
bash scripts/webp.sh <some directory of image files>
47
+
```
48
+
23
49
# Technologies
24
50
25
51
## Development
@@ -50,38 +76,46 @@ The Next site is statically exported and hosted on a GitHub Pages site using Git
50
76
51
77
All assets are stored on [Contentful](https://www.contentful.com/) and fetched from their GraphQL endpoint.
52
78
53
-
### Schema
79
+
## Contentful Schema
80
+
81
+
### Photo Albums
82
+
83
+
This model refers to the albums featured on the front page.
84
+
85
+
When asked, the Contentful model should be created with the API identifier `photoGallery`. You can pick any ID, just be sure to then update `photoGalleryCollection` where needed in the codebase.
| type | Short text - Enum['location', 'custom']¹ |
93
+
| description | Long text |
94
+
| date | Short text (optional) |
95
+
| lat | Decimal |
96
+
| lng | Decimal |
97
+
| locations | JSON (optional)² |
98
+
| order | Decimal |
54
99
55
-
#### Photo Albums
100
+
¹ `type: 'location'` refers to albums on the front page with coordinate data. `type: 'custom'` has a fancy animation and no coordinate data, e.g. the _Music_ album on my site.
56
101
57
-
This model refers to the albums featured on the front page, titled by their region.
102
+
² This is an array of objects, each with lat, lng, and description; e.g. `[{"lat": 40.00, "lng": 70.00, "description": "narnia"}, ...]`
58
103
59
-
Special albums on the front page like `Music` can exist without coordinate data if using `type: custom`.
104
+
For more information, see the [album Zod schemas](https://github.com/agarun/photos/blob/main/src/types/albums.ts#L14). Note this field originally had ID `photoGallery`.
| locations | JSON: Array<{ lat, lng, description }> |
72
-
| order | Decimal |
106
+
### Photo Folders
73
107
74
-
For more information, see the [album types](https://github.com/agarun/photos/blob/main/src/types/albums.ts#L14). Note this field originally had ID `photoGallery`.
108
+
This model refers to the folders feature available at the [`/folders`](https://photos.agarun.com/folders) route.
75
109
76
-
#### Photo Folders
110
+
When asked, the Contentful model should be created with the API identifier `photoFolders`. You can pick any ID, just be sure to then update `photoFoldersCollection` where needed in the codebase.
77
111
78
-
This model refers to the _optional_ folders feature available at the `/folders` route.
0 commit comments