benjifs · benjifs · Nov 18, 2023 · Nov 17, 2023 · Nov 17, 2023 · Nov 18, 2023
diff --git a/src/js/Editors/BookEditor.js b/src/js/Editors/BookEditor.js
@@ -5,6 +5,7 @@ import { Box } from '../Components/Box'
 import { Modal } from '../Components/Modal'
 import Rating from '../Components/Rating'
 import Proxy from '../Controllers/Proxy'
+import Store from '../Models/Store'
 import { dateInRFC3339, ratingToStars } from '../utils'
 
 const OPENLIBRARY_URL = 'https://openlibrary.org'
@@ -20,6 +21,7 @@ const getStatusForProgress = key => PROGRESS_OPTIONS.find(p => p.key == key).lab
 const getOpenLibraryImage = id => id ? `https://covers.openlibrary.org/b/id/${id}-M.jpg` : ''
 
 const BookEditor = () => {
+	const postTypes = Store.getSession('post-types') || []
 	let state = {
 		progress: DEFAULT_PROGRESS
 	}
@@ -128,11 +130,13 @@ const BookEditor = () => {
 		timeout = setTimeout(submitSearch, 2000)
 	}
 
+	const postType = postTypes.find(item => item.type == 'read')
+
 	return {
 		view: () =>
 			m(Box, {
 				icon: '.fas.fa-book',
-				title: 'Book'
+				title: postType?.name || 'Book'
 			}, [
 				m('form', {
 					onsubmit: submitSearch

diff --git a/src/js/Editors/MovieEditor.js b/src/js/Editors/MovieEditor.js
@@ -5,6 +5,7 @@ import { Box } from '../Components/Box'
 import { Modal } from '../Components/Modal'
 import Rating from '../Components/Rating'
 import Proxy from '../Controllers/Proxy'
+import Store from '../Models/Store'
 import { dateInRFC3339, ratingToStars } from '../utils'
 
 const OMDB_API_KEY = import.meta.env.VITE_OMDB_API_KEY
@@ -33,6 +34,7 @@ const MovieEditor = () => {
 				])
 		}
 	}
+	const postTypes = Store.getSession('post-types') || []
 
 	let state = {}
 
@@ -134,11 +136,13 @@ const MovieEditor = () => {
 		timeout = setTimeout(submitSearch, 2000)
 	}
 
+	const postType = postTypes.find(item => item.type == 'watch')
+
 	return {
 		view: () =>
 			m(Box, {
 				icon: '.fas.fa-film',
-				title: 'Movie'
+				title: postType?.name || 'Movie'
 			}, [
 				m('form', {
 					onsubmit: submitSearch

diff --git a/src/js/Editors/Tiles.js b/src/js/Editors/Tiles.js
@@ -2,19 +2,21 @@ import m from 'mithril'
 
 import Tile from '../Components/Tile'
 
+const OMDB_API_KEY = import.meta.env.VITE_OMDB_API_KEY
+
 const NoteTile = {
-	view: () => m(Tile, {
+	view: ({ attrs }) => m(Tile, {
 		href: '/new/note',
 		icon: '.far.fa-note-sticky',
-		name: 'Note'
+		name: attrs?.name || 'Note'
 	})
 }
 
 const ArticleTile = {
-	view: () => m(Tile, {
+	view: ({ attrs }) => m(Tile, {
 		href: '/new/article',
 		icon: '.fas.fa-newspaper',
-		name: 'Article'
+		name: attrs?.name || 'Article'
 	})
 }
 
@@ -23,7 +25,7 @@ const LikeTile = {
 		m(Tile, {
 			href: `/new/like${attrs.params ? '?' + attrs.params : ''}`,
 			icon: '.fas.fa-heart',
-			name: 'Like'
+			name: attrs?.name || 'Like'
 		})
 }
 
@@ -32,7 +34,7 @@ const ReplyTile = {
 		m(Tile, {
 			href: `/new/reply${attrs.params ? '?' + attrs.params : ''}`,
 			icon: '.fas.fa-reply',
-			name: 'Reply'
+			name: attrs?.name || 'Reply'
 		})
 }
 
@@ -48,7 +50,7 @@ const RSVPTile = {
 	view: ({ attrs }) => m(Tile, {
 		href: `/new/rsvp${attrs.params ? '?' + attrs.params : ''}`,
 		icon: '.far.fa-calendar-check',
-		name: 'RSVP'
+		name: attrs?.name || 'RSVP'
 	})
 }
 
@@ -57,44 +59,69 @@ const BookmarkTile = {
 		m(Tile, {
 			href: `/new/bookmark${attrs.params ? '?' + attrs.params : ''}`,
 			icon: '.far.fa-bookmark',
-			name: 'Bookmark'
+			name: attrs?.name || 'Bookmark'
 		})
 }
 
 const RecipeTile = {
-	view: () => m(Tile, {
+	view: ({ attrs }) => m(Tile, {
 		href: '/new/recipe',
 		icon: '.fas.fa-utensils',
-		name: 'Recipe',
+		name: attrs?.name || 'Recipe',
 		disabled: true
 	})
 }
 
 const MovieTile = {
-	view: () => m(Tile, {
+	view: ({ attrs }) => m(Tile, {
 		href: '/new/movie',
 		icon: '.fas.fa-film',
-		name: 'Movie'
+		name: attrs?.name || 'Movie'
 	})
 }
 
 const BookTile = {
-	view: () => m(Tile, {
+	view: ({ attrs }) => m(Tile, {
 		href: '/new/book',
 		icon: '.fas.fa-book',
-		name: 'Book'
+		name: attrs?.name || 'Book'
 	})
 }
 
-export {
-	NoteTile,
-	ArticleTile,
-	ReplyTile,
-	BookmarkTile,
-	LikeTile,
-	ImageTile,
-	RSVPTile,
-	RecipeTile,
-	MovieTile,
-	BookTile
+const PostTypes = {
+	note: NoteTile,
+	image: ImageTile,
+	reply: ReplyTile,
+	bookmark: BookmarkTile,
+	like: LikeTile,
+	article: ArticleTile,
+	rsvp: RSVPTile,
+	watch: OMDB_API_KEY ? MovieTile : null,
+	read: BookTile
 }
+
+const Tiles = (types, defaultTiles) => {
+	if (!defaultTiles || !defaultTiles.length) {
+		defaultTiles = [ 'note', 'image', 'reply', 'bookmark', 'like', 'article', 'rsvp', 'watch', 'read' ]
+	}
+	if (!types || !types.length) {
+		types = defaultTiles.map(t => ({ type: t }))
+	}
+	const tiles = types
+		.filter(pt => PostTypes[pt.type] && defaultTiles.includes(pt.type))
+		.map(pt => m(PostTypes[pt.type], { name: pt.name })) || []
+
+	return {
+		view: () =>
+			tiles && tiles.length ? m('.sp-tiles', tiles) : [
+				m('h3', 'no available tiles'),
+				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' }))
+				])
+			]
+	}
+}
+
+export default Tiles
diff --git a/src/js/Editors/index.js b/src/js/Editors/index.js
@@ -66,6 +66,7 @@ const EditorTypes = {
 
 const Editor = ({ attrs }) => {
 	const parameterList = new URLSearchParams(window.location.search)
+	const postTypes = Store.getSession('post-types') || []
 	const params = {
 		title: parameterList.get('title'),
 		text: parameterList.get('text'),
@@ -142,11 +143,13 @@ const Editor = ({ attrs }) => {
 		}
 	}
 
+	const postType = postTypes.find(item => item.type == attrs.title.toLowerCase())
+
 	return {
 		view: () =>
 			m(Box, {
 				icon: attrs.icon, //'.far.fa-note-sticky',
-				title: attrs.title //'Note'
+				title: postType?.name || attrs.title //'Note'
 			}, m('form', {
 				onsubmit: post
 			}, [

diff --git a/src/js/Pages/HomePage.js b/src/js/Pages/HomePage.js
@@ -2,40 +2,17 @@ import m from 'mithril'
 
 import { Box } from '../Components/Box'
 import { fetchMicropubConfig } from '../Controllers/Helpers'
-import {
-	NoteTile,
-	ImageTile,
-	ReplyTile,
-	BookmarkTile,
-	LikeTile,
-	ArticleTile,
-	RSVPTile,
-	MovieTile,
-	BookTile
-} from '../Editors/Tiles'
+import Tiles from '../Editors/Tiles'
 import Store from '../Models/Store'
 
-const OMDB_API_KEY = import.meta.env.VITE_OMDB_API_KEY
-
 const HomePage = () => {
 	const me = Store.getMe()
+	const postTypes = Store.getSession('post-types') || []
 
 	return {
 		oninit: () => fetchMicropubConfig(),
 		view: () => [
-			m(Box, [
-				m('.sp-tiles', [
-					m(NoteTile),
-					m(ImageTile),
-					m(ReplyTile),
-					m(BookmarkTile),
-					m(LikeTile),
-					m(ArticleTile),
-					m(RSVPTile),
-					OMDB_API_KEY ? m(MovieTile) : null,
-					m(BookTile)
-				])
-			]),
+			m(Box, m(Tiles(postTypes))),
 			m('section', [
 				m('p', [
 					'Logged in as ',

diff --git a/src/js/Pages/SharePage.js b/src/js/Pages/SharePage.js
@@ -1,14 +1,10 @@
 import m from 'mithril'
 
 import { Box } from '../Components/Box'
-import {
-	LikeTile,
-	ReplyTile,
-	RSVPTile,
-	BookmarkTile
-} from '../Editors/Tiles'
+import Tiles from '../Editors/Tiles'
 
 const SharePage = () => {
+	const postTypes = Store.getSession('post-types') || []
 	const parameterList = new URLSearchParams(window.location.search)
 	const params = {
 		title: parameterList.get('title'),
@@ -40,12 +36,7 @@ const SharePage = () => {
 					m('b', 'url:'),
 					params.url
 				]),
-				m('.sp-tiles', [
-					m(ReplyTile, { params: parameterList.toString() }),
-					m(BookmarkTile, { params: parameterList.toString() }),
-					m(LikeTile, { params: parameterList.toString() }),
-					m(RSVPTile, { params: parameterList.toString() })
-				])
+				m(Tiles(postTypes, [ 'reply', 'bookmark', 'like', 'rsvp' ]))
 			])
 	}
 }

diff --git a/src/scss/_ui.scss b/src/scss/_ui.scss
@@ -49,7 +49,7 @@
 
 .sp-tiles {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
 	grid-gap: .75em;
 
 	button {