google-photos-vue

Google Photos album viewer built with Vue.js.

Features

Formats

Photo

Conventional grid.

Text

Justified layout highlighting the "quoted" word (i.e. theme) in each photo description.

Contexts

Authenticated

The default state initializes gapi. Once authenticated, the user can select one of their albums, and its full contents is loaded.

Unauthenticated

Vuex application state JSON is exposed in the authenticated context. The state is modified with relative base URLs that are compatible with the naming conventions of page assets when saved via Google Chrome.

When downloaded, served, and configured, i.e.

<div id="app" data-external-state-path="365-2019-state.json"></div>

the Vue.js application functions in an unauthenticated context, initialized with this static state.

A working example of this context can be seen in the gh-pages-src branch, which is built and served via GitHub Pages.

Analytics

Media clicks are instrumented with Google Analytics Events when configured.

Usage

1. Setup Google OAuth 2.0 and include your Client ID in main.ts.

2. Optionally setup Google Analytics and include your ID in main.ts.

3. Build the application via:

   npm run serve
   

   or other Vue CLI commands.