Skip to content

Commit 4e61efe

Browse files
steipetesteipete
committed
docs: add docs site theme and social card
1 parent e8e04a4 commit 4e61efe

4 files changed

Lines changed: 218 additions & 20 deletions

File tree

‎docs/social-card.png‎

103 KB
Loading

‎docs/social-card.svg‎

Lines changed: 114 additions & 0 deletions
Loading

‎scripts/build-docs-site.mjs‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import fs from "node:fs";
33
import path from "node:path";
44

5-
import { css, faviconSvg, js } from "./docs-site-assets.mjs";
5+
import { css, faviconSvg, js, preThemeScript, themeToggleHtml } from "./docs-site-assets.mjs";
66

77
const root = process.cwd();
88
const docsDir = path.join(root, "docs");
@@ -78,6 +78,8 @@ for (const page of pages) {
7878
}
7979

8080
fs.writeFileSync(path.join(outDir, "favicon.svg"), faviconSvg(), "utf8");
81+
copyStaticAsset("social-card.svg");
82+
copyStaticAsset("social-card.png");
8183
fs.writeFileSync(path.join(outDir, ".nojekyll"), "", "utf8");
8284
if (cname) fs.writeFileSync(path.join(outDir, "CNAME"), cname, "utf8");
8385
validateLinks(outDir);
@@ -90,6 +92,11 @@ function readCname() {
9092
return "";
9193
}
9294

95+
function copyStaticAsset(name) {
96+
const source = path.join(docsDir, name);
97+
if (fs.existsSync(source)) fs.copyFileSync(source, path.join(outDir, name));
98+
}
99+
93100
function parseFrontmatter(raw) {
94101
const match = raw.match(/^---\n([\s\S]*?)\n---\n?/);
95102
if (!match) return { frontmatter: {}, body: raw };
@@ -410,16 +417,21 @@ function layout({ page, html, toc, prev, next, sectionName }) {
410417
const titleSuffix = home ? `${productName} — ${productTagline}` : `${page.title} — ${productName}`;
411418
const description = page.frontmatter.description || (home ? productDescription : `${page.title} — ${productName} CLI documentation.`);
412419
const canonicalUrl = pageCanonicalUrl(page);
420+
const socialImage = siteBase ? `${siteBase}/social-card.png` : `${rootPrefix}social-card.png`;
413421
const socialMeta = [
414422
["link", "rel", "canonical", "href", canonicalUrl],
415423
["meta", "property", "og:type", "content", "website"],
416424
["meta", "property", "og:site_name", "content", productName],
417425
["meta", "property", "og:title", "content", titleSuffix],
418426
["meta", "property", "og:description", "content", description],
419427
["meta", "property", "og:url", "content", canonicalUrl],
428+
["meta", "property", "og:image", "content", socialImage],
429+
["meta", "property", "og:image:width", "content", "1200"],
430+
["meta", "property", "og:image:height", "content", "630"],
420431
["meta", "name", "twitter:card", "content", "summary_large_image"],
421432
["meta", "name", "twitter:title", "content", titleSuffix],
422433
["meta", "name", "twitter:description", "content", description],
434+
["meta", "name", "twitter:image", "content", socialImage],
423435
].map(tagHtml).join("\n ");
424436
return `<!doctype html>
425437
<html lang="en">
@@ -433,6 +445,7 @@ function layout({ page, html, toc, prev, next, sectionName }) {
433445
<link rel="preconnect" href="https://fonts.googleapis.com">
434446
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
435447
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
448+
<script>${preThemeScript()}</script>
436449
<style>${css()}</style>
437450
</head>
438451
<body${home ? ' class="home"' : ""}>
@@ -441,10 +454,13 @@ function layout({ page, html, toc, prev, next, sectionName }) {
441454
</button>
442455
<div class="shell">
443456
<aside class="sidebar">
444-
<a class="brand" href="${hrefToOutRel("index.html", page.outRel)}" aria-label="${productName} docs home">
445-
<span class="mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
446-
<span><strong>${escapeHtml(productName)}</strong><small>Google CLI docs</small></span>
447-
</a>
457+
<div class="sidebar-head">
458+
<a class="brand" href="${hrefToOutRel("index.html", page.outRel)}" aria-label="${productName} docs home">
459+
<span class="mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
460+
<span><strong>${escapeHtml(productName)}</strong><small>Google CLI docs</small></span>
461+
</a>
462+
${themeToggleHtml()}
463+
</div>
448464
<label class="search"><span>Search</span><input id="doc-search" type="search" placeholder="gmail, calendar, sheets"></label>
449465
<nav>${navHtml(page)}</nav>
450466
</aside>

0 commit comments

Comments
 (0)