Repository navigation
Specification
The slideshow app consists of set of static pages and a photo-discovery and commenting app.
The photo discovery app is based on Vue and accesses a photo repo hosted on Cloudinary.
When the user is in browse mode, they can control the photos viewed by activating / de-activating a set of Vuetify v-chips that correspond to tagged photos in Cloudinary. The browse page presents a set of v-chips in a search box. The user can select and de-select the v-chips, and when they do the body of the page will refresh with results corresponding to the Cloudinary tags that are now active.
On the browse page, the user has the choice, via a navigation drawer dropdown, to select one of four different views (which views are available depend on the device breakpoints):
- Grid view
- List view
- Mondrian view (or, alternatively, Muuri)
- (optional) Pinterest view
If a visitor selects a photo, they are taken to the photo detail page. On the photo detail page, they are shown a larger photo and, if the photo has received any comments previously, they are displayed underneath the photo but also have the opportunity to comment on the photo by selecting a comment button.
If a visitor selects the comment button and is not already logged in, clicking the Add a Comment button calls the Auth0 service (see below) and enables the visitor to log in or create an account using their social accounts (Google, Facebook, Twitter) or email.
Once the user is authenticated (see below), they can comment on a post. The commenting back end is a Discourse instance hosted on Digital Ocean accessible at chat.rememberinglouise.com. All comments are grouped by photo; the topic_id of the Discourse post maps to the pubic_id of the Cloudinary image. All posts are to the Photos category.
(It is unexpected that the visitor themselves, once logged in, goes to the Discourse front end unless responding to an email. However, should they, the Auth0 login module would need to be similarly deployed.)
(vue-flux discussion here)
There are three actors/roles for this app (in addition to admin):
- Anonymous
- Authenticated for comments (Discourse app)
- Authenticated for updating/creating tags (Cloudinary service)
All authentication is manged by the Auth0 service
- Home page
- About pate
- Service page
- How-to and FAQ pages
- NavBar
- footer