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

This commit is contained in:
ThePendulum 2019-06-03 05:31:38 +02:00
parent b8c2878fc3
commit b8aa81b3f1
37 changed files with 5261 additions and 413 deletions

7
.babelrc Normal file
View File

@ -0,0 +1,7 @@
{
"presets": [
[
"@babel/preset-env"
]
]
}

View File

@ -1,23 +1,26 @@
{ {
"root": true, "root": true,
"parser": "babel-eslint", "extends": ["airbnb-base", "plugin:vue/recommended"],
"extends": ["airbnb", "plugin:react/recommended"],
"plugins": ["react"],
"parserOptions": { "parserOptions": {
"sourceType": "script", "ecmaVersion": 2017,
"ecmaFeatures": { "sourceType": "module"
"jsx": true
}
}, },
"rules": { "rules": {
"strict": 0,
"no-unused-vars": ["error", {"argsIgnorePattern": "^_"}], "no-unused-vars": ["error", {"argsIgnorePattern": "^_"}],
"no-console": 0, "no-console": 0,
"indent": ["error", 4], "indent": ["error", 4],
"max-len": [2, {"code": 200, "tabWidth": 4, "ignoreUrls": true}], "max-len": [2, {
"react/jsx-uses-vars": 2, "code": 200,
"react/jsx-indent": ["error", 4], "tabWidth": 4,
"react/jsx-indent-props": ["error", 4], "ignoreUrls": true
"react/jsx-one-expression-per-line": "off", }],
"vue/html-indent": ["error", 4],
"no-param-reassign": ["error", {
"props": true,
"ignorePropertyModificationsFor": ["state", "acc"]
}]
},
"globals": {
"CONFIG": true
} }
} }

3
.gitignore vendored
View File

@ -1,5 +1,6 @@
node_modules/ node_modules/
dist/ dist/
public/js/*
public/css/*
config/* config/*
!config/default.js !config/default.js
db.sqlite

View File

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

View File

@ -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>

View File

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

View File

@ -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>

View File

@ -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>

View File

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

4
assets/css/_theme.scss Normal file
View File

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

25
assets/css/style.scss Normal file
View File

@ -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;
}

41
assets/js/api.js Normal file
View File

@ -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 };

View File

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

13
assets/js/auth/auth.js Normal file
View File

@ -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;

View File

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

4
assets/js/auth/state.js Normal file
View File

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

View File

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

30
assets/js/main.js Normal file
View File

@ -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();

View File

@ -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;

View File

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

View File

@ -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;

View File

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

39
assets/js/router.js Normal file
View File

@ -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;

18
assets/js/store.js Normal file
View File

@ -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;

11
assets/views/header.jsx Normal file
View File

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

View File

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

4676
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -6,6 +6,9 @@
"scripts": { "scripts": {
"postinstall": "npm run migrate && npm run seed", "postinstall": "npm run migrate && npm run seed",
"start": "node src/app.js", "start": "node src/app.js",
"webpack": "webpack --env=production --mode=production",
"webpack-dev": "webpack --env=development --mode=development",
"webpack-watch": "webpack --progress --colors --watch --env=development --mode=development",
"eslint": "eslint src/", "eslint": "eslint src/",
"eslint-watch": "esw --watch src/", "eslint-watch": "esw --watch src/",
"knex": "knex", "knex": "knex",
@ -29,23 +32,43 @@
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.2.3", "@babel/cli": "^7.2.3",
"@babel/core": "^7.3.4", "@babel/core": "^7.4.5",
"@babel/preset-env": "^7.3.4", "@babel/preset-env": "^7.4.5",
"autoprefixer": "^9.5.1",
"babel-cli": "^6.26.0",
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"babel-loader": "^8.0.6",
"babel-preset-airbnb": "^3.2.0", "babel-preset-airbnb": "^3.2.0",
"eslint": "^5.15.0", "babel-register": "^6.26.0",
"css-loader": "^2.1.1",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0", "eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0", "eslint-config-airbnb-base": "^13.1.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jsx-a11y": "^6.2.1", "eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0", "eslint-plugin-react": "^7.13.0",
"eslint-watch": "^4.0.2" "eslint-plugin-vue": "^5.2.2",
"eslint-watch": "^4.0.2",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"raw-loader": "^2.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2"
}, },
"dependencies": { "dependencies": {
"bhttp": "^1.2.4", "bhttp": "^1.2.4",
"bluebird": "^3.5.4", "bluebird": "^3.5.4",
"body-parser": "^1.19.0",
"cheerio": "^1.0.0-rc.2", "cheerio": "^1.0.0-rc.2",
"clipboardy": "^1.2.3", "clipboardy": "^1.2.3",
"config": "^3.0.1", "config": "^3.0.1",
"dayjs": "^1.8.14",
"express": "^4.16.4", "express": "^4.16.4",
"express-promise-router": "^3.0.3", "express-promise-router": "^3.0.3",
"express-react-views": "^0.11.0", "express-react-views": "^0.11.0",
@ -62,6 +85,9 @@
"sqlite3": "^4.0.6", "sqlite3": "^4.0.6",
"tough-cookie": "^3.0.1", "tough-cookie": "^3.0.1",
"tty-table": "^2.7.0", "tty-table": "^2.7.0",
"vue": "^2.6.10",
"vue-router": "^3.0.6",
"vuex": "^3.1.1",
"yargs": "^13.2.2" "yargs": "^13.2.2"
} }
} }

View File

@ -1,138 +1,135 @@
body { .scenes[data-v-5533e378] {
margin: 0; display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
grid-gap: 1rem;
} }
.scene[data-v-5533e378] {
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, 0.25);
}
.scene-banner[data-v-5533e378] {
position: relative;
margin: 0 0 .5rem 0;
}
.scene-thumbnail[data-v-5533e378] {
width: 100%;
height: 200px;
display: block;
background-position: center;
background-size: cover;
-o-object-fit: cover;
object-fit: cover;
}
.scene-row[data-v-5533e378] {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 .5rem;
margin: 0 0 .25rem 0;
}
.scene-details[data-v-5533e378] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
}
.scene-site[data-v-5533e378],
.scene-date[data-v-5533e378] {
color: #fff;
background: rgba(0, 0, 0, 0.5);
font-size: .8rem;
padding: .25rem;
text-decoration: none;
}
.scene-site[data-v-5533e378] {
border-radius: 0 0 .25rem 0;
}
.scene-date[data-v-5533e378] {
border-radius: 0 0 0 .25rem;
}
.scene-info[data-v-5533e378] {
flex-grow: 1;
}
.scene-link[data-v-5533e378] {
text-decoration: none;
}
.scene-title[data-v-5533e378] {
color: #000;
margin: 0;
font-size: 1rem;
word-wrap: break-word;
overflow: hidden;
max-height: 3rem;
line-height: 1.5rem;
}
.scene-network[data-v-5533e378] {
color: #555;
margin: 0 .25rem 0 0;
font-size: .8rem;
}
.scene-tags[data-v-5533e378] {
word-wrap: break-word;
overflow: hidden;
max-height: 2.5rem;
line-height: 1.25rem;
}
.scene-actor[data-v-5533e378],
.scene-tag[data-v-5533e378] {
margin: 0 .25rem 0 0;
}
.scene-actor[data-v-5533e378] {
font-size: .9rem;
}
.scene-tag[data-v-5533e378] {
font-size: .75rem;
}
.scene-actor[data-v-5533e378]:not(:last-of-type)::after,
.scene-tag[data-v-5533e378]:not(:last-of-type):after {
content: ",";
}
.actor-link[data-v-5533e378],
.tag-link[data-v-5533e378] {
color: #000;
}
.thumbnail[data-v-5533e378] {
width: 300px;
}
html,
body {
height: 100%; }
body {
margin: 0; }
.nolist { .nolist {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0; }
.nolist li {
display: inline-block; }
.heading {
color: #ff886c;
margin: 0 0 1rem 0; }
.header[data-v-10b7ec04] {
color: #fff;
background: #ff886c;
padding: 1rem;
}
.logo[data-v-10b7ec04] {
margin: 0;
} }
.nolist li { .content-inner[data-v-4f86a868] {
display: inline-block; padding: 1rem;
} }
.scenes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
list-style: none;
padding: 0;
margin: 0;
}
.scene {
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 0 0 .5rem 0;;
border-radius: .25rem;
margin: .5rem;
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;
}

14
public/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Porn Radar</title>
<script src="/js/bundle.js" defer></script>
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
<div id="container"></div>
</body>
</html>

13
src/.eslintrc Normal file
View File

@ -0,0 +1,13 @@
{
"extends": "airbnb-base",
"parserOptions": {
"sourceType": "script"
},
"rules": {
"strict": 0,
"no-unused-vars": ["error", {"argsIgnorePattern": "^_"}],
"no-console": 0,
"indent": ["error", 4],
"max-len": [2, {"code": 200, "tabWidth": 4, "ignoreUrls": true}]
}
}

View File

@ -42,12 +42,10 @@ function getMethod() {
}; };
} }
return null; return initServer();
} }
async function init() { async function init() {
initServer();
const screen = argv.render && !argv.filename && initScreen(); const screen = argv.render && !argv.filename && initScreen();
try { try {

0
src/db.sqlite Normal file
View File

View File

@ -47,6 +47,8 @@ function curateReleases(releases) {
} }
async function fetchReleases(releaseId) { async function fetchReleases(releaseId) {
// const thumbnails = await fs.readdir(path.join(config.thumbnailPath, release.site.id.toString(), release.id.toString()));
const releases = await knex('releases') const releases = await knex('releases')
.where(releaseId ? { 'releases.id': releaseId } : {}) .where(releaseId ? { 'releases.id': releaseId } : {})
.select('releases.*', 'sites.name as site_name', 'sites.url as site_url', 'sites.network_id', 'networks.name as network_name', 'networks.url as network_url') .select('releases.*', 'sites.name as site_name', 'sites.url as site_url', 'sites.network_id', 'networks.name as network_name', 'networks.url as network_url')

View File

@ -1,25 +1,13 @@
'use strict'; 'use strict';
const config = require('config');
const fs = require('fs').promises;
const path = require('path');
const { fetchReleases } = require('../releases'); const { fetchReleases } = require('../releases');
async function fetchReleasesApi(req, res) { async function fetchReleasesApi(req, res) {
const releases = await fetchReleases(); const releases = await fetchReleases(req.params.releaseId);
res.render('home', { releases }); res.send(releases);
}
async function fetchReleaseApi(req, res) {
const [release] = await fetchReleases(req.params.id);
const thumbnails = await fs.readdir(path.join(config.thumbnailPath, release.site.id.toString(), release.id.toString()));
res.render('release', { release, thumbnails });
} }
module.exports = { module.exports = {
fetchReleases: fetchReleasesApi, fetchReleases: fetchReleasesApi,
fetchRelease: fetchReleaseApi,
}; };

View File

@ -4,23 +4,24 @@ const path = require('path');
const config = require('config'); const config = require('config');
const express = require('express'); const express = require('express');
const Router = require('express-promise-router'); const Router = require('express-promise-router');
const { createEngine } = require('express-react-views'); const bodyParser = require('body-parser');
const { fetchReleases, fetchRelease } = require('./releases'); const { fetchReleases } = require('./releases');
function initServer() { function initServer() {
const app = express(); const app = express();
const router = Router(); const router = Router();
app.use(express.static(config.thumbnailPath)); router.use(express.static(config.thumbnailPath));
app.use(express.static('public')); router.use(express.static('public'));
router.use(bodyParser.json({ strict: false }));
app.set('views', path.join(__dirname, '../../assets/views')); router.get('/api/releases', fetchReleases);
app.set('view engine', 'jsx'); router.get('/api/releases/:releaseId', fetchReleases);
app.engine('jsx', createEngine());
router.get('/', fetchReleases); router.get('*', (req, res) => {
router.get('/scene/:id', fetchRelease); res.sendFile(path.join(__dirname, '../../public/index.html'));
});
app.use(router); app.use(router);

70
webpack.config.babel.js Normal file
View File

@ -0,0 +1,70 @@
import path from 'path';
import VueLoaderPlugin from 'vue-loader/lib/plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import autoprefixer from 'autoprefixer';
export default {
entry: './assets/js/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'public/js'),
},
module: {
rules: [
{
test: /\.vue$/,
include: [
path.resolve(__dirname, 'assets'),
],
loader: 'vue-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
plugins: [
'@babel/plugin-proposal-object-rest-spread',
],
},
},
'eslint-loader',
],
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader?sourceMap',
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer],
sourceMap: true,
},
},
'sass-loader?sourceMap',
],
},
{
test: /\.svg/,
use: 'raw-loader',
},
],
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '../css/style.css',
}),
],
resolve: {
alias: {
theme: path.join(__dirname, 'assets/css/_theme.scss'),
config: path.join(__dirname, `assets/js/config/${process.env.NODE_ENV || 'default'}.js`),
},
},
};