136 lines
3.7 KiB
TypeScript
136 lines
3.7 KiB
TypeScript
import { defineComponent, ref, type VNode, Suspense } from "vue";
|
|
import { type RouteRecordRaw, RouterLink, RouterView } from "vue-router";
|
|
import DjTooltip, { setupTooltip } from "@/DjTooltip.tsx";
|
|
import DjBlogEntry from "@/blog/DjBlogEntry.tsx";
|
|
import DjBlogMain from "@/blog/DjBlogMain.tsx";
|
|
import DjEmail from "@/DjEmail.tsx";
|
|
import { addCSS, css } from "@/util.ts";
|
|
import useHead from "@/useHead.ts";
|
|
|
|
export const routes: RouteRecordRaw[] = [
|
|
{
|
|
path: "/",
|
|
name: "DjBlogMain",
|
|
component: DjBlogMain,
|
|
},
|
|
{
|
|
path: "/post/:slug",
|
|
name: "DjBlogEntry",
|
|
component: DjBlogEntry,
|
|
props: ({ params }) => {
|
|
if ("slug" in params) {
|
|
return { slug: params.slug };
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
},
|
|
];
|
|
|
|
const styles = css`
|
|
.dj-blog-root {
|
|
width: 100vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 100vh;
|
|
|
|
.container {
|
|
width: 800px;
|
|
}
|
|
|
|
.spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
footer {
|
|
color: gray;
|
|
width: calc(100% - 10px);
|
|
margin-bottom: 20px;
|
|
font-style: italic;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
a {
|
|
color: var(--dj-palette3);
|
|
text-decoration: solid line;
|
|
|
|
&:visited {
|
|
color: var(--dj-visited);
|
|
}
|
|
}
|
|
|
|
nav {
|
|
font-size: 40px;
|
|
margin-bottom: 40px;
|
|
text-decoration: none;
|
|
text-align: right;
|
|
width: 100%;
|
|
|
|
a, a:visited {
|
|
color: var(--dj-palette3);
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1024px) {
|
|
.container {
|
|
width: calc(100% - 20px);
|
|
padding: 10px;
|
|
}
|
|
|
|
footer {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default defineComponent({
|
|
name: "DjBlogRoot",
|
|
setup() {
|
|
const carrier = ref<HTMLDivElement | null>(null);
|
|
setupTooltip({ carrier });
|
|
|
|
addCSS('dj-blog-root', styles);
|
|
useHead({ title: "djblog Home" });
|
|
|
|
return () => (
|
|
<>
|
|
<div ref={carrier} class="tooltip-carrier" />
|
|
<div class="dj-blog-root">
|
|
<div class="container">
|
|
<nav>
|
|
<DjTooltip tooltip="flog, clog, bog, frog, cog, log, grog, fog, snog...">
|
|
<RouterLink to={{ name: 'DjBlogMain' }}>
|
|
dj blog
|
|
</RouterLink>
|
|
</DjTooltip>
|
|
</nav>
|
|
<RouterView>
|
|
{{
|
|
default: ({ Component }: { Component: VNode }) => (Component &&
|
|
(
|
|
<Suspense>
|
|
{{
|
|
default: () => Component,
|
|
fallback: () => <div>Page loading...</div>,
|
|
}}
|
|
</Suspense>
|
|
)),
|
|
}}
|
|
</RouterView>
|
|
</div>
|
|
<div class="spacer" />
|
|
<footer>
|
|
<div class="bottom">
|
|
<div>
|
|
<a href="/">djledda.net</a> {new Date().getFullYear()} - <DjEmail>{() => "Contact"}</DjEmail>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</>
|
|
);
|
|
},
|
|
});
|