Added basic shack creation.
This commit is contained in:
@@ -1,35 +1,20 @@
|
||||
import { renderToString as renderToString_ } from '@vue/server-renderer';
|
||||
import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr/server';
|
||||
// import { renderToString as renderToString_ } from '@vue/server-renderer';
|
||||
import { renderToNodeStream } from '@vue/server-renderer';
|
||||
import { escapeInject } from 'vite-plugin-ssr/server';
|
||||
|
||||
import { createApp } from './app';
|
||||
import { useUser } from '../stores/user';
|
||||
import logoUrl from './logo.svg';
|
||||
|
||||
async function renderToString(app) {
|
||||
let err;
|
||||
|
||||
// Workaround: renderToString_() swallows errors in production, see https://github.com/vuejs/core/issues/7876
|
||||
app.config.errorHandler = (err_) => { // eslint-disable-line no-param-reassign
|
||||
err = err_;
|
||||
};
|
||||
|
||||
const appHtml = await renderToString_(app);
|
||||
|
||||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
|
||||
return appHtml;
|
||||
}
|
||||
|
||||
async function render(pageContext) {
|
||||
const appHtml = await renderToString(pageContext.app);
|
||||
|
||||
// See https://vite-plugin-ssr.com/head
|
||||
const { documentProps } = pageContext.exports;
|
||||
const title = (documentProps && documentProps.title) || 'shack';
|
||||
const desc = (documentProps && documentProps.description) || 'Shack';
|
||||
|
||||
const { app, store } = createApp(pageContext);
|
||||
const stream = renderToNodeStream(app);
|
||||
|
||||
const documentHtml = escapeInject`
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
@@ -41,40 +26,26 @@ async function render(pageContext) {
|
||||
<title>${title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">${dangerouslySkipEscape(appHtml)}</div>
|
||||
<div id="app">${stream}</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
return {
|
||||
documentHtml,
|
||||
};
|
||||
}
|
||||
|
||||
async function onBeforeRender(pageContext) {
|
||||
if (!pageContext.Page) {
|
||||
throw new Error('My render() hook expects pageContext.Page to be defined');
|
||||
}
|
||||
|
||||
const { app, store } = createApp(pageContext);
|
||||
const userStore = useUser();
|
||||
|
||||
userStore.user = pageContext.session.user;
|
||||
|
||||
return {
|
||||
documentHtml,
|
||||
pageContext: {
|
||||
app,
|
||||
initialState: store.state.value,
|
||||
pageData: {
|
||||
user: pageContext.session.user,
|
||||
},
|
||||
enableEagerStreaming: true,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export {
|
||||
render,
|
||||
onBeforeRender,
|
||||
};
|
||||
|
||||
export const passToClient = ['urlPathname', 'initialState', 'pageData'];
|
||||
export const passToClient = ['urlPathname', 'initialState', 'pageData', 'pageProps'];
|
||||
|
||||
@@ -1,14 +1,24 @@
|
||||
<template>
|
||||
<div v-if="is404">
|
||||
<h1>404 Page Not Found</h1>
|
||||
<p>This page could not be found.</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>500 Internal Error</h1>
|
||||
<p>Something went wrong.</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div v-if="is404">
|
||||
<h1>404 Page Not Found</h1>
|
||||
|
||||
<p v-if="errorInfo">{{ errorInfo }}</p>
|
||||
<p v-else>This page could not be found.</p>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<h1>500 Internal Error</h1>
|
||||
|
||||
<p v-if="errorInfo">{{ errorInfo }}</p>
|
||||
<p v-else>Something went wrong.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps(['is404'])
|
||||
import { usePageContext } from './usePageContext';
|
||||
|
||||
const { pageProps } = usePageContext();
|
||||
const { is404, errorInfo } = pageProps;
|
||||
</script>
|
||||
|
||||
@@ -49,7 +49,7 @@ const { user } = storeToRefs(userStore);
|
||||
|
||||
async function logout() {
|
||||
await del('/api/session');
|
||||
window.location.reload();
|
||||
window.location.href = '/account/login';
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user