added basic pwa manifest

This commit is contained in:
DrMint 2022-02-17 04:21:06 +01:00
parent 0e35f5aed9
commit 76deea2aa7
3 changed files with 49 additions and 2 deletions

15
public/manifest.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "Accords Library",
"short_name": "Accords Library",
"start_url": ".",
"display": "standalone",
"background_color": "#FFEDD8",
"theme_color": "#FFEDD8",
"description": "Accord's Library aims at gathering and archiving all of Yoko Taros work. Yoko Taro is a Japanese video game director and scenario writer.",
"icons": [{
"src": "favicon.png",
"sizes": "551x551",
"type": "image/png"
}]
}

View File

@ -36,6 +36,10 @@ class MyDocument extends Document {
<meta name="twitter:title" content={siteTitle}></meta>
<meta name="twitter:description" content={siteDescription}></meta>
<meta name="twitter:image" content={thumbnailImage}></meta>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="manifest" href="manifest.json" />
<meta name="theme-color" content="#FFEDD8" />
</Head>
<body className="bg-light text-black">
<Main />

View File

@ -1,8 +1,10 @@
import AppLayout from "components/AppLayout";
import ContentPanel from "components/Panels/ContentPanel";
import SVG from "components/SVG";
import { getWebsiteInterface } from "graphql/operations";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { GetStaticProps } from "next";
import Script from "next/script";
type HomeProps = {
langui: GetWebsiteInterfaceQuery;
};
@ -12,7 +14,29 @@ export default function Home(props: HomeProps): JSX.Element {
const contentPanel = (
<ContentPanel autoformat={true}>
<h2>Discover Analyse Translate Archive</h2>
<div className="grid place-items-center place-content-center w-full gap-5">
<SVG
className="w-32 mobile:w-1/2"
src={"/icons/accords.svg"}
alt={"Logo of Accord's Library"}
/>
<h1 className="text-5xl mb-0">Accord&rsquo;s Library</h1>
<h2 className="mt-0">Discover Analyse Translate Archive</h2>
</div>
<button id="goFS">Go fullscreen</button>
<Script
id="myScript"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
var goFS = document.getElementById("goFS");
goFS.addEventListener("click", function() {
document.body.requestFullscreen();
}, false);`,
}}
></Script>
<h2>What is this?</h2>
<p>
Accord&rsquo;s Library aims at gathering and archiving all of Yoko
@ -136,7 +160,11 @@ export default function Home(props: HomeProps): JSX.Element {
return (
<>
<AppLayout title={"Accords Library"} langui={langui} contentPanel={contentPanel} />
<AppLayout
title={"Accords Library"}
langui={langui}
contentPanel={contentPanel}
/>
</>
);
}