Merge pull request #254 from WeebDev/feature/ssr

Feature/ssr
This commit is contained in:
Kana 2021-01-21 00:51:43 +09:00 committed by GitHub
commit e779706ab7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 1220 additions and 384 deletions

View File

@ -16,7 +16,7 @@ const clientConfig = {
};
export default {
mode: 'spa',
ssr: true,
server: {
port: process.env.WEBSITE_PORT
},
@ -66,7 +66,6 @@ export default {
'~/plugins/vue-isyourpasswordsafe',
'~/plugins/vue-timeago',
'~/plugins/vuebar',
'~/plugins/nuxt-client-init',
'~/plugins/notifier',
'~/plugins/handler'
],

1430
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -66,7 +66,7 @@
"morgan": "^1.10.0",
"multer": "^1.4.1",
"mysql": "^2.16.0",
"nuxt": "^2.12.2",
"nuxt": "^2.14.12",
"nuxt-dropzone": "^0.2.8",
"pg": "^7.8.1",
"qoa": "^0.2.0",

View File

@ -25,7 +25,7 @@ class albumGET extends Route {
.select('files.name', 'files.id')
.orderBy('files.id', 'desc');
const { page, limit = 100 } = req.query;
const { page, limit = 50 } = req.query;
if (page && page >= 0) {
files = await files.offset((page - 1) * limit).limit(limit);

View File

@ -5,6 +5,7 @@ if (!process.env.SERVER_PORT) {
process.exit(0);
}
const { loadNuxt, build } = require('nuxt');
const express = require('express');
const helmet = require('helmet');
const cors = require('cors');
@ -80,25 +81,13 @@ class Server {
});
}
serveNuxt() {
// Serve the frontend if we are in production mode
if (process.env.NODE_ENV === 'production') {
this.server.use(express.static(path.join(__dirname, '../../../dist')));
async serveNuxt() {
const isProd = process.env.NODE_ENV === 'production';
const nuxt = await loadNuxt(isProd ? 'start' : 'dev');
this.server.use(nuxt.render);
if (!isProd) {
build(nuxt);
}
/*
For vue router to work with express we need this fallback.
After all the routes are loaded and the static files handled and if the
user is trying to access a non-mapped route we serve the website instead
since it has routes of it's own that don't work if accessed directly
*/
this.server.all('*', (_req, res) => {
try {
res.sendFile(path.join(__dirname, '../../../dist/index.html'));
} catch (error) {
res.json({ success: false, message: 'Something went wrong' });
}
});
}
createJobs() {

View File

@ -102,8 +102,22 @@ export default {
watch: {
current: 'fetchPaginate'
},
created() {
this.fetch();
async asyncData({ app, params, error }) {
try {
const { data } = await axios.get(`${app.store.state.config.baseURL}/album/${params.identifier}`, { params: { limit: 50, page: 1 } });
const downloadLink = data.downloadEnabled ? `${app.store.state.config.baseURL}/album/${params.identifier}/zip` : null;
return {
name: data.name,
downloadEnabled: data.downloadEnabled,
files: data.files,
downloadLink,
isNsfw: data.isNsfw,
totalFiles: data.count
};
} catch (err) {
console.log('Error when retrieving album', err);
error({ statusCode: 404, message: 'Album not found' });
}
},
methods: {
async fetch(page = 1) {
@ -130,36 +144,27 @@ export default {
this.isLoading = false;
}
},
metaInfo() {
head() {
if (this.files) {
const image = this.isNsfw ? '/public/images/share.jpg' : this.files.length ? this.files[0].thumbSquare : '/public/images/share.jpg';
const title = this.name ? this.isNsfw ? `[NSFW] ${this.name}` : this.name : '';
return {
title: `${this.name ? this.name : ''}`,
title,
meta: [
{ vmid: 'theme-color', name: 'theme-color', content: '#30a9ed' },
{ vmid: 'twitter:card', name: 'twitter:card', content: 'summary' },
{ vmid: 'twitter:title', name: 'twitter:title', content: `Album: ${this.name} | Files: ${this.files.length}` },
{ vmid: 'twitter:description', name: 'twitter:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
{ vmid: 'twitter:image', name: 'twitter:image', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
{ vmid: 'twitter:image:src', name: 'twitter:image:src', value: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
{ vmid: 'twitter:title', name: 'twitter:title', content: `${title} | Files: ${this.totalFiles}` },
{ vmid: 'twitter:image', name: 'twitter:image', content: image },
{ vmid: 'twitter:image:src', name: 'twitter:image:src', value: image },
{ vmid: 'og:url', property: 'og:url', content: `${this.config.URL}/a/${this.$route.params.identifier}` },
{ vmid: 'og:title', property: 'og:title', content: `Album: ${this.name} | Files: ${this.files.length}` },
{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
{ vmid: 'og:image', property: 'og:image', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
{ vmid: 'og:image:secure_url', property: 'og:image:secure_url', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` }
{ vmid: 'og:title', property: 'og:title', content: `${title} | Files: ${this.totalFiles}` },
{ vmid: 'og:image', property: 'og:image', content: image },
{ vmid: 'og:image:secure_url', property: 'og:image:secure_url', content: image }
]
};
}
return {
title: `${this.name ? this.name : ''}`,
meta: [
{ vmid: 'theme-color', name: 'theme-color', content: '#30a9ed' },
{ vmid: 'twitter:card', name: 'twitter:card', content: 'summary' },
{ vmid: 'twitter:title', name: 'twitter:title', content: 'chibisafe' },
{ vmid: 'twitter:description', name: 'twitter:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
{ vmid: 'og:url', property: 'og:url', content: `${this.config.URL}/a/${this.$route.params.identifier}` },
{ vmid: 'og:title', property: 'og:title', content: 'chibisafe' },
{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' }
{ vmid: 'og:url', property: 'og:url', content: `${this.config.URL}/a/${this.$route.params.identifier}` }
]
};
}

View File

@ -104,9 +104,7 @@ export default {
components: {
Sidebar
},
middleware: ['auth', ({ store }) => {
store.dispatch('auth/fetchCurrentUser');
}],
middleware: ['auth'],
data() {
return {
password: '',
@ -120,6 +118,9 @@ export default {
user: state => state.auth.user
})
},
async asyncData({ app }) {
await app.store.dispatch('auth/fetchCurrentUser');
},
methods: {
...mapActions({
getUserSetttings: 'auth/fetchCurrentUser'

View File

@ -129,15 +129,11 @@ export default {
components: {
Sidebar
},
middleware: ['auth', 'admin', ({ route, store }) => {
try {
store.dispatch('admin/fetchFile', route.params.id);
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
}],
middleware: ['auth', 'admin'],
computed: mapState(['admin', 'auth']),
async asyncData({ app, params }) {
await app.store.dispatch('admin/fetchFile', params.id);
},
methods: {
promptDisableUser() {
this.$buefy.dialog.confirm({

View File

@ -133,17 +133,13 @@ export default {
components: {
Sidebar
},
middleware: ['auth', 'admin', ({ store }) => {
try {
store.dispatch('admin/fetchSettings');
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
}],
middleware: ['auth', 'admin'],
computed: mapState({
settings: state => state.admin.settings
}),
async asyncData({ app }) {
await app.store.dispatch('admin/fetchSettings');
},
methods: {
promptRestartService() {
this.$buefy.dialog.confirm({

View File

@ -78,16 +78,13 @@ export default {
detailed,
generic
},
middleware: ['auth', 'admin', ({ store }) => {
try {
store.dispatch('admin/fetchStatistics');
} catch (e) {
console.error(e);
}
}],
middleware: ['auth', 'admin'],
computed: mapState({
stats: state => state.admin.statistics
}),
async asyncData({ app }) {
await app.store.dispatch('admin/fetchStatistics');
},
methods: {
refresh(category) {
try {

View File

@ -95,14 +95,7 @@ export default {
Sidebar,
Grid
},
middleware: ['auth', 'admin', ({ route, store }) => {
try {
store.dispatch('admin/fetchUser', { id: route.params.id });
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
}],
middleware: ['auth', 'admin'],
data() {
return {
options: {},
@ -121,6 +114,9 @@ export default {
watch: {
current: 'fetchPaginate'
},
async asyncData({ app, params }) {
await app.store.dispatch('admin/fetchUser', { id: params.id });
},
methods: {
...mapActions({
fetch: 'admin/fetchUser'

View File

@ -143,14 +143,7 @@ export default {
components: {
Sidebar
},
middleware: ['auth', 'admin', ({ route, store }) => {
try {
store.dispatch('admin/fetchUsers', route.params.id);
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
}],
middleware: ['auth', 'admin'],
data() {
return {
isCreateUserOpen: false,
@ -163,6 +156,9 @@ export default {
users: state => state.admin.users,
config: state => state.config
}),
async asyncData({ app, params }) {
await app.store.dispatch('admin/fetchUsers', params.id);
},
methods: {
async changeEnabledStatus(row) {
if (row.enabled) {

View File

@ -76,7 +76,6 @@ export default {
},
middleware: ['auth', ({ route, store }) => {
store.commit('images/resetState');
store.dispatch('images/fetchByAlbumId', { id: route.params.id });
}],
data() {
return {
@ -101,6 +100,9 @@ export default {
watch: {
current: 'fetchPaginate'
},
async asyncData({ app, params }) {
await app.store.dispatch('images/fetchByAlbumId', { id: params.id });
},
methods: {
...mapActions({
fetch: 'images/fetchByAlbumId'

View File

@ -55,13 +55,7 @@ export default {
Sidebar,
AlbumEntry
},
middleware: ['auth', ({ store }) => {
try {
store.dispatch('albums/fetch');
} catch (e) {
this.alert({ text: e.message, error: true });
}
}],
middleware: ['auth'],
data() {
return {
newAlbumName: null,
@ -69,6 +63,9 @@ export default {
};
},
computed: mapState(['config', 'albums']),
async asyncData({ app }) {
await app.store.dispatch('albums/fetch');
},
methods: {
...mapActions({
alert: 'alert/set'

View File

@ -68,7 +68,6 @@ export default {
},
middleware: ['auth', ({ store }) => {
store.commit('images/resetState');
store.dispatch('images/fetch');
}],
data() {
return {
@ -88,7 +87,10 @@ export default {
watch: {
current: 'fetchPaginate'
},
created() {
async asyncData({ app }) {
await app.store.dispatch('images/fetch');
},
mounted() {
this.filteredHints = this.hints; // fixes the issue where on pageload, suggestions wont load
},
methods: {

View File

@ -1,3 +0,0 @@
export default async ctx => {
await ctx.store.dispatch('nuxtClientInit', ctx);
};

View File

@ -1,9 +1,8 @@
import config from '../../../dist/config.json';
export const actions = {
async nuxtClientInit({ commit, dispatch }) {
async nuxtServerInit({ commit, dispatch }) {
commit('config/set', config);
const cookies = this.$cookies.getAll();
if (!cookies.token) return dispatch('auth/logout');