github-mirrors/netris-nestri
1
0
Fork 0
mirror of https://github.com/nestriness/nestri.git synced 2025-12-12 16:55:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: Add SEO stuff

Browse Source
This commit is contained in:
Wanjohi
2024-08-30 10:35:24 +03:00
parent 1cef08ebdf
commit 5520883f00
19 changed files with 150 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
apps/www/src/components/router-head/index.tsx Normal file
View File

@@ -0,0 +1,69 @@
import { component$ } from "@builder.io/qwik";
import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
/**
* The RouterHead component is placed inside of the document `<head>` element.
*/
export const RouterHead = component$(() => {
const head = useDocumentHead();
const loc = useLocation();
const domain = loc.url.origin;
return (
<>
<title>{loc.url.pathname === "/" ? "Nestri – Your games. Your rules." : `${loc.url.pathname.split("/")[1].charAt(0).toUpperCase() + loc.url.pathname.split("/")[1].slice(1)} – Nestri`}</title>
<link rel="canonical" href={loc.url.href} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/**For SEO optimisation purposes refrain from SVG favicons and use PNG instead */}
{/* <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> */}
{/* <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/manifest.json" /> */}
<link rel="apple-touch-icon" sizes="180x180" href="/seo/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/seo/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/seo/favicon-16x16.png" />
<link rel="manifest" href="/manifest.json" />
{/**@ts-ignore */}
<link rel="mask-icon" href="/seo/safari-pinned-tab.svg" color="#5bbad5" />
<link rel="shortcut icon" href="/seo/favicon.ico" />
<meta name="msapplication-TileColor" content="#ffede5" />
<meta name="msapplication-config" content="/seo/browserconfig.xml" />
<meta property="og:url" content={domain} />
<meta property="twitter:url" content={domain} />
<meta property="twitter:domain" content={domain.replace("https://", "")} />
<meta property="og:type" content="website" />
<meta property="og:image" content={`${domain}/seo/banner.png`} />
<meta property="twitter:image" content={`${domain}/seo/banner.png`} />
{head.meta.map((m) => (
<meta key={m.key} {...m} />
))}
{head.links.map((l) => (
<link key={l.key} {...l} />
))}
{head.styles.map((s) => (
<style
key={s.key}
{...s.props}
{...(s.props?.dangerouslySetInnerHTML
? {}
: { dangerouslySetInnerHTML: s.style })}
/>
))}
{head.scripts.map((s) => (
<script
key={s.key}
{...s.props}
{...(s.props?.dangerouslySetInnerHTML
? {}
: { dangerouslySetInnerHTML: s.script })}
/>
))}
</>
);
});

48
apps/www/src/components/router-head/router-head.tsx
View File

@@ -1,48 +0,0 @@
import { component$ } from "@builder.io/qwik";
import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
/**
* The RouterHead component is placed inside of the document `<head>` element.
*/
export const RouterHead = component$(() => {
const head = useDocumentHead();
const loc = useLocation();
return (
<>
<title>{head.title}</title>
<link rel="canonical" href={loc.url.href} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
{head.meta.map((m) => (
<meta key={m.key} {...m} />
))}
{head.links.map((l) => (
<link key={l.key} {...l} />
))}
{head.styles.map((s) => (
<style
key={s.key}
{...s.props}
{...(s.props?.dangerouslySetInnerHTML
? {}
: { dangerouslySetInnerHTML: s.style })}
/>
))}
{head.scripts.map((s) => (
<script
key={s.key}
{...s.props}
{...(s.props?.dangerouslySetInnerHTML
? {}
: { dangerouslySetInnerHTML: s.script })}
/>
))}
</>
);
});

2
apps/www/src/root.tsx
View File

@@ -4,7 +4,7 @@ import {
RouterOutlet,
ServiceWorkerRegister,
} from "@builder.io/qwik-city";
import { RouterHead } from "./components/router-head/router-head";
import { RouterHead } from "@/components/router-head";
import { isDev } from "@builder.io/qwik/build";
import "@nestri/ui/globals.css";

13
apps/www/src/routes/index.tsx
View File

@@ -1,5 +1,4 @@
import { component$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
export default component$(() => {
return (
@@ -7,14 +6,4 @@ export default component$(() => {
</div>
);
});
export const head: DocumentHead = {
title: "Welcome to Qwik",
meta: [
{
name: "description",
content: "Qwik site description",
},
],
};
});