Merge pull request #30 from benjifs/fix/photo-editor

Fix: Photo editor

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkles",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "micropub client",
   "main": "./src/js/app.js",
   "scripts": {
@@ -28,12 +28,12 @@
     "url": "https://github.com/benjifs/sparkles/issues"
   },
   "devDependencies": {
-    "eslint": "^9.4.0",
-    "sass": "^1.77.4",
-    "vite": "^5.2.12"
+    "eslint": "8.57.0",
+    "sass": "^1.77.8",
+    "vite": "^5.4.2"
   },
   "dependencies": {
-    "cheerio": "^1.0.0-rc.12",
+    "cheerio": "^1.0.0",
     "encoding": "^0.1.13",
     "http-link-header": "^1.1.3",
     "mithril": "^2.2.2",

src/functions/odesli.js

@@ -18,7 +18,7 @@ export const handler = async (e) => {
 			})
 		}
 		return Response.error({ statusCode: res.status }, res.statusText)
-	} catch (e) {
+	} catch (err) {
 		console.error('[ERROR]', err && err.message)
 	}
 

src/functions/search.js

@@ -6,6 +6,7 @@ const types = {
 	movie: {
 		url: 'https://api.themoviedb.org/3/search/movie',
 		buildParams: ({ query, year, page }) => ({
+			// eslint-disable-next-line camelcase
 			api_key: process.env.TMDB_API_KEY,
 			query: query,
 			year: year,
@@ -29,24 +30,35 @@ const types = {
 		buildParams: ({ query, page }) => ({
 			limit: 10,
 			q: query,
-			page: page
+			page: page,
+			fields: 'key,title,cover_i,cover_edition_key,edition_key,author_name,author_key'
 		}),
 		buildError: ({ status, response }) => Response.error({ statusCode: status }, response.error),
 		parseResponse: res => ({
 			totalResults: res?.num_found || 0,
-			results: res?.docs.map(b => ({
-				id: `olid:${b.key.replace('/works/', '')}`,
-				title: b.title,
-				author: b.author_name ? b.author_name.join(', ') : '',
-				image: `https://covers.openlibrary.org/b/id/${b.cover_i}-M.jpg`,
-				year: b.first_publish_year,
-				url: `https://openlibrary.org${b.key}`
-			}))
+			results: res?.docs.map(b => {
+				const key = b.key.replace('/works/', '')
+				let coverKey
+				if (b.cover_i && b.cover_edition_key) {
+					coverKey = `id/${b.cover_i}`
+				} else if (b.edition_key && b.edition_key.length > 0) {
+					// Temporary address the fact that sometimes `cover_i` doesn't have an updated image
+					coverKey = `olid/${b.edition_key[b.edition_key.length - 1]}`
+				}
+				return {
+					id: `olid:${key}`,
+					title: b.title,
+					author: b.author_name ? b.author_name.join(', ') : '',
+					...(coverKey && { image: `https://covers.openlibrary.org/b/${coverKey}-M.jpg` }),
+					year: b.first_publish_year,
+					url: `https://openlibrary.org${b.key}`
+				}
+			})
 		})
 	},
 	music: {
 		url: 'https://itunes.apple.com/search',
-		buildParams: ({ type, query, page }) => ({
+		buildParams: ({ type, query }) => ({
 			media: 'music',
 			entity: type == 'artist' ? 'musicArtist' : type,
 			term: query
@@ -66,6 +78,7 @@ const types = {
 	game: {
 		url: 'https://www.giantbomb.com/api/search/',
 		buildParams: ({ query, page }) => ({
+			// eslint-disable-next-line camelcase
 			api_key: process.env.GIANTBOMB_API_KEY,
 			limit: 10,
 			format: 'json',

src/js/Editors/Tiles.js

@@ -61,15 +61,6 @@ const BookmarkTile = {
 		})
 }
 
-const RecipeTile = {
-	view: ({ attrs }) => m(Tile, {
-		href: '/new/recipe',
-		icon: '.fas.fa-utensils',
-		name: attrs?.name || 'Recipe',
-		disabled: true
-	})
-}
-
 const MovieTile = {
 	view: ({ attrs }) => m(Tile, {
 		href: '/new/movie',
@@ -134,7 +125,7 @@ const Tiles = (types, defaultTiles, params) => {
 				m('p', [
 					'unsupported post types ',
 					m('a', { href: 'https://github.com/indieweb/micropub-extensions/issues/1', target: '_blank' },
-					m('i.far.fa-circle-question', { title: 'query for supported vocabulary discussion' }))
+						m('i.far.fa-circle-question', { title: 'query for supported vocabulary discussion' }))
 				])
 			]
 	}

src/js/Editors/index.js

@@ -75,6 +75,17 @@ const EditorTypes = {
 	}
 }
 
+const FormCache = {
+	key: '__form',
+	get: key => JSON.parse(localStorage.getItem(FormCache.key) || '{}')[key] || '',
+	put: (key, value) => {
+		const form = JSON.parse(localStorage.getItem(FormCache.key) || '{}')
+		form[key] = value
+		localStorage.setItem(FormCache.key, JSON.stringify(form))
+	},
+	clear: () => localStorage.removeItem(FormCache.key)
+}
+
 const Editor = ({ attrs }) => {
 	const parameterList = new URLSearchParams(window.location.search)
 	const postTypes = Store.getSession('post-types') || []
@@ -100,7 +111,14 @@ const Editor = ({ attrs }) => {
 			state[c.type] = params.url || ''
 		}
 	}
-	if (params.image) state.photo = params.image
+	if (params.image) {
+		state.photo = params.image
+		state.alt = FormCache.get('alt')
+		state.content = FormCache.get('content')
+		state.category = FormCache.get('category')
+	} else {
+		FormCache.clear()
+	}
 
 	const buildEntry = () => {
 		let properties = {}
@@ -201,15 +219,21 @@ const Editor = ({ attrs }) => {
 							m('li', m('input', {
 								type: 'text',
 								placeholder: 'Alt text',
-								oninput: e => state.alt = e.target.value,
+								oninput: e => {
+									state.alt = e.target.value
+									FormCache.put('alt', e.target.value)
+								},
 								value: state.alt || ''
 							}))
 						])
 					case 'content':
 						return m('textarea', {
 							rows: 5,
 							placeholder: c.label || 'Content goes here...',
-							oninput: e => state[c.type] = e.target.value,
+							oninput: e => {
+								state[c.type] = e.target.value
+								FormCache.put(c.type, e.target.value)
+							},
 							value: state[c.type] || '',
 							required: c.required
 						})
@@ -250,7 +274,10 @@ const Editor = ({ attrs }) => {
 						return m('input', {
 							type: 'text',
 							placeholder: 'Tags',
-							oninput: e => state[c.type] = e.target.value,
+							oninput: e => {
+								state[c.type] = e.target.value
+								FormCache.put(c.type, e.target.value)
+							},
 							value: state[c.type] || '',
 							required: c.required
 						})

src/js/Pages/LoginPage.js

@@ -67,7 +67,7 @@ const Login = () => {
 	const advancedLogin = async e => {
 		e.preventDefault()
 		state.loading = true
-
+		// eslint-disable-next-line camelcase
 		Store.setSession({ micropub: state.micropubURL, access_token: state.accessToken })
 		window.location.href = '/home'
 	}

src/scss/_base.scss

@@ -105,10 +105,10 @@ fieldset {
 a {
 	text-decoration: none;
 	color: var(--sprk-fg);
-	&:not(.icon) {
-		border-bottom: 1px dashed var(--sprk-fg);
-	}
 	// handle link wrap if overflows screen
 	overflow-wrap: break-word;
 	word-wrap: break-word;
+	&:not(.icon) {
+		border-bottom: 1px dashed var(--sprk-fg);
+	}
 }

src/scss/_modal.scss

@@ -17,14 +17,13 @@ dialog {
 	border-radius: var(--sprk-border-radius);
 	background-color: var(--sprk-bg);
 
+	animation-duration: .3s;
+	animation-fill-mode: forwards;
 	.sp-modal-content {
 		padding: 1em;
 		height: 100%;
 		overflow: auto;
 	}
-
-	animation-duration: .3s;
-	animation-fill-mode: forwards;
 	&[open] {
 		animation-name: scroll-fade-in;
 		&::backdrop {

src/scss/_ui.scss

@@ -24,15 +24,13 @@
 		padding: .3em;
 
 		button {
+			border: none; background: none;
+			padding: .3em;
 			&:first-child {
 				// Make this optional in case user wants to have close icon on left
 				opacity: 0;
 				pointer-events: none;
 			}
-
-			border: none; background: none;
-			padding: .3em;
-
 			&:hover {
 				color: var(--sprk-fg);
 				transform: initial;
@@ -141,15 +139,16 @@ button {
 	background: none;
 	border: var(--sprk-border-size) solid var(--sprk-border-color);
 	padding: .5rem 1.5rem;
-	&.xs {
-		padding: .5rem .75rem;
-		margin-left: .25rem;
-	}
-
 	text-decoration: none;
 	border-radius: var(--input-border-radius);
 
 	@include transition(all .3s ease-out);
+
+	letter-spacing: .3em;
+	&.xs {
+		padding: .5rem .75rem;
+		margin-left: .25rem;
+	}
 	&:hover {
 		background: var(--btn-hover-bg);
 		color: var(--btn-hover-color);
@@ -162,8 +161,6 @@ button {
 		opacity: .7;
 	}
 
-	letter-spacing: .3em;
-
 	i {
 		letter-spacing: initial;
 	}
@@ -251,6 +248,11 @@ label, .label {
 	padding: .75em 0;
 	.item {
 		text-align: left;
+		margin: 0 auto;
+		padding: .4rem;
+		cursor: pointer;
+		border: 1px solid var(--sprk-bg-color);
+		@include transition(border-color .3s ease-in-out);
 		img, div {
 			display: inline-block;
 			height: 100%;
@@ -263,17 +265,12 @@ label, .label {
 		img {
 			width: 75px;
 		}
-		margin: 0 auto;
-		padding: .4rem;
 		h4 {
 			margin: 0;
 		}
 		img {
 			max-width: 100%;
 		}
-		cursor: pointer;
-		border: 1px solid var(--sprk-bg-color);
-		@include transition(border-color .3s ease-in-out);
 		&:hover {
 			border-color: var(--sprk-fg-color);
 		}