Merge pull request #21 from benjifs/feat/dev-docs

Docs: Updated documentation

.env.example

@@ -1,5 +1,3 @@
 OMDB_API_KEY="1234abcd"
 LASTFM_API_KEY="abcd1234"
-GIANTBOMB_API_KEY="wxyz7890"
-# Only use in development
-VITE_MICROPUB_ENDPOINT="http://localhost:1234/micropub"
+GIANTBOMB_API_KEY="wxyz7890"

README.md

@@ -10,18 +10,16 @@
   </a>
 </div>
 <div align="center">
-  <a target="_blank" href="./LICENSE">
-    <img src="https://img.shields.io/github/license/benjifs/sparkles?color=A1A1F1&style=flat" alt="Project License">
-  </a>
-  <a target="_blank" href="https://github.com/benjifs/sparkles/releases">
-    <img src="https://img.shields.io/github/v/release/benjifs/sparkles?color=C49EE7&label=version&style=flat" alt="Latest Version">
-  </a>
-  <a target="_blank" href="https://github.com/benjifs/sparkles/commits/main">
-    <img src="https://img.shields.io/github/last-commit/benjifs/sparkles?color=E69BDD&style=flat" alt="Latest Commit">
-  </a>
+  <a target="_blank" href="./LICENSE"><img src="https://img.shields.io/github/license/benjifs/sparkles?color=A1A1F1&style=flat" alt="Project License"></a>
+  <a target="_blank" href="https://github.com/benjifs/sparkles/releases"><img src="https://img.shields.io/github/v/release/benjifs/sparkles?color=C49EE7&label=version&style=flat" alt="Latest Version"></a>
+  <a target="_blank" href="https://github.com/benjifs/sparkles/commits/main"><img src="https://img.shields.io/github/last-commit/benjifs/sparkles?color=E69BDD&style=flat" alt="Latest Commit"></a>
 </div>
 
-[sparkles](https://sparkles.sploot.com) is a [Micropub](https://micropub.spec.indieweb.org/) client. It supports [IndieAuth](https://indieauth.net/) for login and expects a [micropub endpoint](https://indieweb.org/Micropub/Servers) to communicate with to publish posts. It supports basic micropub content types and you can also add movies you have watched.
+[sparkles](https://sparkles.sploot.com) is a [Micropub](https://micropub.spec.indieweb.org/) client. It supports [IndieAuth](https://indieauth.net/) for login and expects a [micropub endpoint](https://indieweb.org/Micropub/Servers) to communicate with to publish posts. It supports basic micropub content types, as well as the following experimental post types:
+- movie ([watch](https://indieweb.org/watch))
+- book ([read](https://indieweb.org/read))
+- music ([listen](https://indieweb.org/listen))
+- game ([play](https://indieweb.org/play))
 
 sparkles can also be installed as a [Progressive Web App (PWA)](https://web.dev/progressive-web-apps/) on supported devices which will add the app as a **share target** and also add some quick action options.
 
@@ -35,13 +33,18 @@ You can read more about this project [here](https://benji.dog/articles/sparkles/
 * `npm install -g netlify-cli`
 
 ### Environment Variables
-| name | description | required |
-| --- | --- | --- |
-| VITE_OMDB_API_KEY | [OMDB API Key](https://www.omdbapi.com/) | optional |
+| name | description |
+| --- | --- |
+| `OMDB_API_KEY` | [OMDB API Key](https://www.omdbapi.com/) for movie search |
+| `LASTFM_API_KEY` | [Last.fm API Key](https://www.last.fm/api) for {artist, album, track} search |
+| `GIANTBOMB_API_KEY` | [GiantBomb API Key](https://www.giantbomb.com/api/) for video game search |
 
 ### Build
 * Clone this repository
 * `npm install`
 * Run `netlify dev` to test locally
-  * Frontend: `http://localhost:5173`
-  * Functions: `http://localhost:9000`
+  * Your default browser should automatically open to: http://localhost:9000
+  * The frontend will run on port `5173`
+  * The functions will run on port `5174`
+
+While running in `DEV` mode, the login screen will allow you to either go through the standard authentication process **OR** add a test [micropub endpoint](https://indieweb.org/Micropub/Servers) with an `access_token`.

netlify.toml

@@ -27,3 +27,4 @@
 [template.environment]
 	OMDB_API_KEY = "OMDB API Key"
 	LASTFM_API_KEY = "last.fm API key"
+	GIANTBOMB_API_KEY = "Giant Bomb API key"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkles",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "micropub client",
   "main": "./src/js/app.js",
   "scripts": {

src/js/Components/Modal/index.js

@@ -1,21 +1,18 @@
 import m from 'mithril'
 
 const Modal = content => {
-	const view = [
-		m('.sp-modal-bg', { onclick: () => {
-			modalContainer.classList.remove('show')
+	const modalContainer = document.createElement('dialog')
+	modalContainer.onclick = e => {
+		if (e.target === modalContainer) {
+			modalContainer.classList.add('close') // To animate out
 			setTimeout(() => {
 				modalContainer.remove()
-			}, 500)
-		} }),
-		// header
-		m('.sp-modal-content', content)
-	]
-
-	const modalContainer = document.createElement('div')
-	modalContainer.className = 'sp-modal show'
+			}, 300)
+		}
+	}
 	document.body.appendChild(modalContainer)
-	m.render(modalContainer, view)
+	m.render(modalContainer, m('.sp-modal-content', content))
+	modalContainer.showModal()
 }
 
 export { Modal }

src/js/Models/Store.js

@@ -14,7 +14,6 @@ const Store = {
 	setSession: data => Store.set(Store.sessionKey, data),
 	addToSession: data => Store.add(Store.sessionKey, data),
 	clearSession: () => localStorage.removeItem(Store.sessionKey),
-	getMe: () => Store.getSession('me'),
 	//
 	settingKey: '_sprk',
 	defaultSettings: {

src/js/Pages/HomePage.js

@@ -6,7 +6,7 @@ import Tiles from '../Editors/Tiles'
 import Store from '../Models/Store'
 
 const HomePage = () => {
-	const me = Store.getMe()
+	const { me, micropub } = Store.getSession()
 	let postTypes = []
 
 	return {
@@ -19,8 +19,9 @@ const HomePage = () => {
 			m(Box, m(Tiles(postTypes))),
 			m('section', [
 				m('p', [
+					me ? '' : m('b', '[DEV] '),
 					'Logged in as ',
-					m('a', { href: me }, me),
+					m('a', { href: me || micropub }, me || micropub),
 					' ',
 					m(m.route.Link, { class: 'icon', href: '/logout' }, m('i.fas.fa-right-from-bracket', { title: 'logout' }))
 				])

src/js/Pages/LoginPage.js

@@ -8,12 +8,19 @@ import { canonicalURL } from '../utils'
 import { generateRandomString, generateCodeChallenge, getCodeChallengeMethod } from '../utils/crypt'
 
 const CLIENT = window.location.origin
+const { DEV } = import.meta.env
 
 const Login = () => {
 	let loading = false
 	let urlString = ''
+	let state = {
+		loading: null,
+		micropubURL: '',
+		accessToken: ''
+	}
 
 	const canSubmit = () => urlString && urlString !== ''
+	const canSubmitAdvanced = () => state.micropubURL && state.micropubURL.trim() !== '' && state.accessToken && state.accessToken.trim() !== ''
 
 	const onLogin = async e => {
 		e.preventDefault()
@@ -57,16 +64,22 @@ const Login = () => {
 		loading = false
 	}
 
+	const advancedLogin = async e => {
+		e.preventDefault()
+		state.loading = true
+
+		Store.setSession({ micropub: state.micropubURL, access_token: state.accessToken })
+		window.location.href = '/home'
+	}
+
 	Store.clearSession()
 	Store.clearCache()
 
 	return {
 		view: () => [
 			m('section', m('.sp-title', 'sparkles')),
 			m(Box, { className: '.no-pad' }, [
-				m('form.text-center', {
-					onsubmit: onLogin
-				}, [
+				m('form.text-center', { onsubmit: onLogin }, [
 					m('input', {
 						type: 'url',
 						placeholder: 'https://',
@@ -77,7 +90,30 @@ const Login = () => {
 						type: 'submit',
 						disabled: !canSubmit() || loading
 					}, loading ? m('i.fas.fa-spinner.fa-spin') : 'login')
-				])
+				]),
+				DEV && m('form', { onsubmit: advancedLogin },
+					m('details', [
+						m('summary', 'test mode'),
+						m('section.text-center', [
+							m('hr'),
+							m('input', {
+								type: 'url',
+								placeholder: 'Micropub Endpoint',
+								oninput: e => state.micropubURL = e.target.value,
+								value: state.micropubURL
+							}),
+							m('textarea', {
+								placeholder: 'Access Token',
+								oninput: e => state.accessToken = e.target.value,
+								value: state.accessToken
+							}),
+							m('button', {
+								type: 'submit',
+								disabled: !canSubmitAdvanced() || state.loading
+							}, state.loading ? m('i.fas.fa-spinner.fa-spin') : 'login'),
+						])
+					])
+				)
 			])
 		]
 	}

src/js/Pages/SuccessPage.js

@@ -10,7 +10,7 @@ const MAX_CHECKS = 5
 const SuccessPage = () => {
 	let timeout, count = 0, found = false
 	let url = (new URLSearchParams(window.location.search)).get('url')
-	const baseURL = Store.getMe()
+	const baseURL = Store.getSession('me')
 	// Just in case the url received is not an absolute URL
 	try {
 		url = new URL(url, baseURL).href

src/scss/_modal.scss

@@ -1,51 +1,40 @@
+::backdrop {
+	background: rgba(0, 0, 0, .3);
+	// animation doesn't work on firefox
+	animation-duration: .3s;
+	animation-fill-mode: forwards;
+}
 
-.sp-modal {
-	display: flex;
-	align-items: center;
-	flex-direction: column;
-	justify-content: center;
-	position: fixed;
-	z-index: 1000;
-	top: 0; bottom: 0;
-	left: 0; right: 0;
+dialog {
+	max-height: 80%;
+	max-width: 80%;
+	height: 100%;
+	width: 750px;
+	overflow: hidden;
+	padding: 0;
 
-	.sp-modal-bg {
-		position: absolute;
-		top: 0; bottom: 0;
-		left: 0; right: 0;
-		background: rgba(0, 0, 0, .3);
-	}
-	.sp-modal-content {
-		position: relative;
-	}
+	border: var(--sprk-border-size) solid var(--sprk-border-color);
+	border-radius: .7em;
+	background-color: var(--sprk-bg);
 
-	.sp-modal-bg {
-		animation: fade-out .3s forwards;
-	}
 	.sp-modal-content {
-		animation: scroll-fade-out .3s forwards;
-
-		border: var(--sprk-border-size) solid var(--sprk-border-color);
-		border-radius: .7em;
-		background-color: var(--sprk-bg);
-		max-height: 80%;
-		max-width: 80%;
-		width: 750px;
 		padding: 1em;
-		pre {
-			height: 100%;
-			width: 100%;
-			padding: 1em;
-			margin: 0;
-			overflow: auto;
-		}
+		height: 100%;
+		overflow: auto;
 	}
-	&.show {
-		.sp-modal-bg {
-			animation: fade-in .3s forwards;
+
+	animation-duration: .3s;
+	animation-fill-mode: forwards;
+	&[open] {
+		animation-name: scroll-fade-in;
+		&::backdrop {
+			animation-name: fade-in;
 		}
-		.sp-modal-content {
-			animation: scroll-fade-in .3s forwards;
+	}
+	&.close {
+		animation-name: scroll-fade-out;
+		&::backdrop {
+			animation-name: fade-out;
 		}
 	}
 }
@@ -54,17 +43,14 @@
 	from { opacity: 0; transform: translateY(25%); }
 	to { opacity: 1; transform: translateY(0); }
 }
-
 @keyframes scroll-fade-out {
 	from { opacity: 1; transform: translateY(0); }
 	to { opacity: 0; transform: translateY(25%); }
 }
-
 @keyframes fade-in {
 	from { opacity: 0; }
 	to { opacity: 1; }
 }
-
 @keyframes fade-out {
 	from { opacity: 1; }
 	to { opacity: 0; }

src/scss/_ui.scss

@@ -218,6 +218,12 @@ img {
 
 details {
 	text-align: left;
+	section {
+		box-sizing: border-box;
+		> * {
+			margin-bottom: 1em;
+		}
+	}
 }
 summary {
 	cursor: pointer;