nhcarrigan/elysium
9
0
Fork 0
generated from nhcarrigan/template
Code Issues 5 Pull Requests 1 Actions Releases 10 Activity

feat(web): add analytics, OG tags, Tree-Nation, ads, sticky sidebar
Security Scan and Upload / Security & DefectDojo Upload (pull_request) Successful in 1m1s
Details
CI / Lint, Build & Test (pull_request) Failing after 1m5s
Details

Browse Source 
- Add Plausible analytics script to index.html
- Add Open Graph and Twitter Card meta tags using the CDN background image
- Add Tree-Nation widget loader, init script, and badge div in sidebar
- Add Google Ads script
- Make game sidebar sticky with --resource-bar-height offset (3.5rem)
- Reset sidebar sticky properties in mobile responsive override
This commit is contained in:
Hikari
2026-03-09 19:20:37 -07:00
committed by Naomi Carrigan
parent 66413c5e21
commit 2a0a3511b4
3 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/index.html
+33
View File
@@ -5,6 +5,39 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Elysium — Idle RPG</title> <title>Elysium — Idle RPG</title>
<meta name="description" content="An idle fantasy RPG — hire adventurers, defeat bosses, and ascend to glory." /> <meta name="description" content="An idle fantasy RPG — hire adventurers, defeat bosses, and ascend to glory." />
<!-- Open Graph -->
<meta property="og:title" content="Elysium — Idle RPG" />
<meta property="og:description" content="An idle fantasy RPG — hire adventurers, defeat bosses, and ascend to glory." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://elysium.nhcarrigan.com" />
<meta property="og:image" content="https://cdn.nhcarrigan.com/elysium/background.jpg" />
<meta property="og:site_name" content="Elysium" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Elysium — Idle RPG" />
<meta name="twitter:description" content="An idle fantasy RPG — hire adventurers, defeat bosses, and ascend to glory." />
<meta name="twitter:image" content="https://cdn.nhcarrigan.com/elysium/background.jpg" />
<!-- Plausible Analytics -->
<script defer data-domain="elysium.nhcarrigan.com" src="https://plausible.io/js/script.js"></script>
<!-- Tree-Nation -->
<script defer src="https://widgets.tree-nation.com/js/widgets/v1/widgets.min.js?v=1.0"></script>
<script>
(function () {
var interval = setInterval(function () {
if (typeof TreeNation !== "undefined") {
clearInterval(interval);
TreeNation.renderAll();
}
}, 100);
}());
</script>
<!-- Google Ads -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3569924701890974" crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
apps/web/src/components/game/gameLayout.tsx
+1
View File
@@ -189,6 +189,7 @@ const GameLayout = (): JSX.Element => {
<div className="game-main"> <div className="game-main">
<aside className="game-sidebar"> <aside className="game-sidebar">
<ClickArea /> <ClickArea />
<div id="tree-nation-offset-website" />
<p className="game-copyright">{"© NHCarrigan"}</p> <p className="game-copyright">{"© NHCarrigan"}</p>
</aside> </aside>
apps/web/src/styles.css
+8
View File
@@ -26,6 +26,7 @@
--radius: 8px; --radius: 8px;
--radius-lg: 12px; --radius-lg: 12px;
--font: "Segoe UI", system-ui, sans-serif; --font: "Segoe UI", system-ui, sans-serif;
--resource-bar-height: 3.5rem;
} }
body { body {
@@ -136,6 +137,10 @@ body::before {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
position: sticky;
top: var(--resource-bar-height);
height: calc(100vh - var(--resource-bar-height));
overflow-y: auto;
} }
.game-content { .game-content {
@@ -3181,8 +3186,11 @@ body::before {
border-right: none; border-right: none;
flex-direction: row; flex-direction: row;
gap: 0.75rem; gap: 0.75rem;
height: auto;
justify-content: center; justify-content: center;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
position: static;
top: auto;
width: 100%; width: 100%;
} }