google-photos-vue

Google Photos album viewer built with Vue.js.

Features

Formats

Photo

Photo Format

Conventional grid.

Text

Text Format

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.

GitHub