Transitioning to Vue. Installed environment and restored homepage scene overview.

assets/components/actor/actor.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h2>Actor</h2>
+    </div>
+</template>

assets/components/container/container.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="container">
+        <Header />
+
+        <div class="content">
+            <router-view />
+        </div>
+    </div>
+</template>
+
+<script>
+import Header from '../header/header.vue';
+
+export default {
+    components: {
+        Header,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.content-inner {
+    padding: 1rem;
+}
+</style>

assets/components/errors/not-found.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h1>404 - Not Found</h1>
+    </div>
+</template>

assets/components/header/header.vue

@@ -0,0 +1,19 @@
+<template>
+    <header class="header">
+        <h1 class="logo">Porn Radar</h1>
+    </header>
+</template>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.header {
+    color: $text-contrast;
+    background: $primary;
+    padding: 1rem;
+}
+
+.logo {
+    margin: 0;
+}
+</style>

assets/components/home/home.vue

@@ -0,0 +1,234 @@
+<template>
+    <div class="content-inner">
+        <h2 class="heading">Latest releases</h2>
+
+        <ul class="scenes nolist">
+            <li
+                v-for="release in releases"
+                :key="release.id"
+                class="scene"
+            >
+                <span class="scene-banner">
+                    <span class="scene-details">
+                        <a
+                            :href="`/site/${release.site.id}`"
+                            :title="release.network.name"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="scene-site site-link"
+                        >{{ release.site.name }}</a>
+
+                        <a
+                            :href="release.url"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="scene-date"
+                        >{{ formatDate(release.date, 'MMM D, YYYY') }}</a>
+                    </span>
+
+                    <a
+                        :href="`/scene/${release.id}`"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="scene-link"
+                    >
+                        <img
+                            :src="`/${release.site.id}/${release.id}/0.jpg`"
+                            :alt="release.id"
+                            class="scene-thumbnail"
+                        >
+                    </a>
+                </span>
+
+                <div class="scene-info">
+                    <a
+                        :href="`/scene/${release.id}`"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="scene-row scene-link"
+                    >
+                        <h3 class="scene-title">{{ release.title }}</h3>
+                    </a>
+
+                    <span class="scene-row">
+                        <ul class="scene-actors nolist">
+                            <li
+                                v-for="actor in release.actors"
+                                :key="actor.id"
+                                class="scene-actor"
+                            >
+                                <a
+                                    :href="`/actor/${actor.id}`"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    class="actor-link"
+                                >{{ actor.name }}</a>
+                            </li>
+                        </ul>
+                    </span>
+
+                    <span
+                        :title="release.tags.map(tag => tag.tag).join(', ')"
+                        class="scene-row"
+                    >
+                        <ul class="scene-tags nolist">
+                            <li
+                                v-for="tag in release.tags"
+                                :key="tag.tag"
+                                class="scene-tag"
+                            >
+                                <a
+                                    :href="`/tag/${tag.tag}`"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    class="tag-link"
+                                >{{ tag.tag }}</a>
+                            </li>
+                        </ul>
+                    </span>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+async function mounted() {
+    this.releases = await this.$store.dispatch('fetchReleases');
+}
+
+export default {
+    data() {
+        return {
+            releases: [],
+        };
+    },
+    mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.scenes {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+    grid-gap: 1rem;
+}
+
+.scene {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 0 0 .5rem 0;;
+    border-radius: .25rem;
+    overflow: hidden;
+    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
+}
+
+.scene-banner {
+    position: relative;
+    margin: 0 0 .5rem 0;
+}
+
+.scene-thumbnail {
+    width: 100%;
+    height: 200px;
+    display: block;
+    background-position: center;
+    background-size: cover;
+    object-fit: cover;
+}
+
+.scene-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 .5rem;
+    margin: 0 0 .25rem 0;
+}
+
+.scene-details {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: absolute;
+}
+
+.scene-site,
+.scene-date {
+    color: #fff;
+    background: rgba(0, 0, 0, .5);
+    font-size: .8rem;
+    padding: .25rem;
+    text-decoration: none;
+}
+
+.scene-site {
+    border-radius: 0 0 .25rem 0;
+}
+
+.scene-date {
+    border-radius: 0 0 0 .25rem;
+}
+
+.scene-info {
+    flex-grow: 1;
+}
+
+.scene-link {
+    text-decoration: none;
+}
+
+.scene-title {
+    color: #000;
+    margin: 0;
+    font-size: 1rem;
+    word-wrap: break-word;
+    overflow: hidden;
+    max-height: 3rem;
+    line-height: 1.5rem;
+}
+
+.scene-network {
+    color: #555;
+    margin: 0 .25rem 0 0;
+    font-size: .8rem;
+}
+
+.scene-tags {
+    word-wrap: break-word;
+    overflow: hidden;
+    max-height: 2.5rem;
+    line-height: 1.25rem;
+}
+
+.scene-actor,
+.scene-tag {
+    margin: 0 .25rem 0 0;
+}
+
+.scene-actor {
+    font-size: .9rem;
+}
+
+.scene-tag {
+    font-size: .75rem;
+}
+
+.scene-actor:not(:last-of-type)::after,
+.scene-tag:not(:last-of-type):after {
+    content: ",";
+}
+
+.actor-link,
+.tag-link {
+    color: #000;
+}
+
+.thumbnail {
+    width: 300px;
+}
+</style>

assets/components/release/release.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h2>Release</h2>
+    </div>
+</template>

assets/css/_theme.scss

@@ -0,0 +1,4 @@
+$primary: #ff886c;
+
+$text: #222;
+$text-contrast: #fff;

assets/css/style.scss

@@ -0,0 +1,25 @@
+@import 'theme';
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+}
+
+.nolist {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+        display: inline-block;
+    }
+}
+
+.heading {
+    color: $primary;
+    margin: 0 0 1rem 0;
+}

assets/js/api.js

@@ -0,0 +1,41 @@
+import config from 'config';
+
+async function get(endpoint, query = {}) {
+    const queryString = Object.entries(query).reduce((acc, [key, value], index) => `${acc}${index > 0 ? '&' : ''}${key}=${value}`, '?');
+
+    const res = await fetch(`${config.api.url}${endpoint}${queryString}`, {
+        method: 'GET',
+        mode: 'cors',
+        credentials: 'same-origin',
+    });
+
+    if (res.ok) {
+        return res.json();
+    }
+
+    const errorMsg = await res.text();
+
+    throw new Error(errorMsg);
+}
+
+async function post(endpoint, data) {
+    const res = await fetch(`${config.api.url}${endpoint}`, {
+        method: 'GET',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        credentials: 'same-origin',
+        body: JSON.stringify(data),
+    });
+
+    if (res.ok) {
+        return res.json();
+    }
+
+    const errorMsg = await res.text();
+
+    throw new Error(errorMsg);
+}
+
+export { get, post };

assets/js/auth/actions.js

@@ -0,0 +1,3 @@
+function initAuthActions(_store, _router) {}
+
+export default initAuthActions;

assets/js/auth/auth.js

@@ -0,0 +1,13 @@
+import state from './state';
+import mutations from './mutations';
+import actions from './actions';
+
+function initAuthStore(store, router) {
+    return {
+        state,
+        mutations,
+        actions: actions(store, router),
+    };
+}
+
+export default initAuthStore;

assets/js/auth/mutations.js

@@ -0,0 +1 @@
+export default {};

assets/js/auth/state.js

@@ -0,0 +1,4 @@
+export default {
+    authenticated: false,
+    user: null,
+};

assets/js/config/default.js

@@ -0,0 +1,5 @@
+export default {
+    api: {
+        url: `${window.location.origin}/api`,
+    },
+};

assets/js/main.js

@@ -0,0 +1,30 @@
+import Vue from 'vue';
+import dayjs from 'dayjs';
+
+import router from './router';
+import initStore from './store';
+
+import '../css/style.scss';
+
+import Container from '../components/container/container.vue';
+
+function init() {
+    const store = initStore(router);
+
+    Vue.mixin({
+        methods: {
+            formatDate: (date, format) => dayjs(date).format(format),
+        },
+    });
+
+    new Vue({ // eslint-disable-line no-new
+        el: '#container',
+        store,
+        router,
+        render(createElement) {
+            return createElement(Container);
+        },
+    });
+}
+
+init();

assets/js/releases/actions.js

@@ -0,0 +1,15 @@
+import { get } from '../api';
+
+function initReleasesActions(_store, _router) {
+    async function fetchReleases({ _commit }, releaseId) {
+        const releases = await get(`/releases/${releaseId || ''}`);
+
+        return releases;
+    }
+
+    return {
+        fetchReleases,
+    };
+}
+
+export default initReleasesActions;

assets/js/releases/mutations.js

@@ -0,0 +1 @@
+export default {};

assets/js/releases/releases.js

@@ -0,0 +1,13 @@
+import state from './state';
+import mutations from './mutations';
+import actions from './actions';
+
+function initReleasesStore(store, router) {
+    return {
+        state,
+        mutations,
+        actions: actions(store, router),
+    };
+}
+
+export default initReleasesStore;

assets/js/releases/state.js

@@ -0,0 +1,4 @@
+export default {
+    authenticated: false,
+    user: null,
+};

assets/js/router.js

@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+import Home from '../components/home/home.vue';
+import Release from '../components/release/release.vue';
+import Actor from '../components/actor/actor.vue';
+import NotFound from '../components/errors/not-found.vue';
+
+Vue.use(VueRouter);
+
+const routes = [
+    {
+        path: '/',
+        component: Home,
+    },
+    {
+        path: '/scene/:releaseId',
+        component: Release,
+    },
+    {
+        path: '/movie/:releaseId',
+        component: Release,
+    },
+    {
+        path: '/actor/:actorSlug',
+        component: Actor,
+    },
+    {
+        path: '*',
+        component: NotFound,
+    },
+];
+
+const router = new VueRouter({
+    mode: 'history',
+    routes,
+});
+
+export default router;

assets/js/store.js

@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+import initAuthStore from './auth/auth';
+import initReleasesStore from './releases/releases';
+
+function initStore(router) {
+    Vue.use(Vuex);
+
+    const store = new Vuex.Store();
+
+    store.registerModule('auth', initAuthStore(store, router));
+    store.registerModule('releases', initReleasesStore(store, router));
+
+    return store;
+}
+
+export default initStore;

assets/views/header.jsx

@@ -0,0 +1,11 @@
+'use strict';
+
+const React = require('react');
+
+const Header = () => (
+    <header className="header">
+        <h1>Porn Radar</h1>
+    </header>
+);
+
+module.exports = Header;

assets/views/layout.jsx

@@ -3,6 +3,8 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 
+const Header = require('./header.jsx');
+
 const Layout = ({ children, title }) => (
     <html lang="en">
         <head>
@@ -15,9 +17,7 @@ const Layout = ({ children, title }) => (
         </head>
 
         <body>
-            <header>
-                <h1>Porn Radar</h1>
-            </header>
+            <Header />
 
             <div className="content">
                 {children}