Added opengraph meta tag thumbnail and 404 page

This commit is contained in:
Mitchell McCaffrey 2020-04-06 18:06:10 +10:00
parent 9cf4c14c14
commit 1d60c5e296
4 changed files with 49 additions and 1 deletions

46
public/404.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Owlbear Rodeo</title>
<meta
name="description"
content="Tabletop map sharing ʕ•ノᴥ•ʔノ┬─┬ヽʕ•ᴥ•ヽʔ"
/>
<style>
html {
height: 100%;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", sans-serif;
color: white;
}
body {
background: hsl(230, 25%, 18%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
margin: 0;
}
img {
max-width: 500px;
}
a {
color: hsl(260, 100%, 80%);
text-decoration: none;
}
a:visited {
color: hsl(260, 20%, 40%);
}
</style>
</head>
<body>
<img src="404.png" alt="404 bear not found" />
<h4>
Unable to find the page you're looking for try heading back to
<a href="https://owlbear.rodeo">owlbear.rodeo</a>
</h4>
</body>
</html>

BIN
public/404.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

View File

@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site for table top game session sharing"
content="Tabletop map sharing ʕ•ノᴥ•ʔノ┬─┬ヽʕ•ᴥ•ヽʔ"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
@ -25,6 +25,8 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Owlbear Rodeo</title>
<meta property="og:image" content="%PUBLIC_URL%/thumbnail.jpg" />
<meta name="twitter:card" content="summary_large_image" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

BIN
public/thumbnail.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 270 KiB