From a5e4cfb18149e4c4726103c4f1e74b8cdcfc6e86 Mon Sep 17 00:00:00 2001
From: Romuald Brillout <git@brillout.com>
Date: Fri, 3 Jan 2025 13:27:01 +0100
Subject: [PATCH] website: cover

---
 docs/headingsDetached.ts          |  4 +++
 docs/pages/banner/+Page.tsx       | 49 ++--------------------------
 docs/pages/banner/Banner.tsx      | 53 +++++++++++++++++++++++++++++++
 docs/pages/banner/cover/+Page.tsx |  8 +++++
 docs/pages/press/+Page.mdx        |  4 ++-
 5 files changed, 70 insertions(+), 48 deletions(-)
 create mode 100644 docs/pages/banner/Banner.tsx
 create mode 100644 docs/pages/banner/cover/+Page.tsx

diff --git a/docs/headingsDetached.ts b/docs/headingsDetached.ts
index 0d4ac46f25..bb55ed5cfd 100644
--- a/docs/headingsDetached.ts
+++ b/docs/headingsDetached.ts
@@ -237,6 +237,10 @@ const headingsDetached: HeadingDetachedDefinition[] = [
     title: 'Banner',
     url: '/banner'
   },
+  {
+    title: 'Cover',
+    url: '/banner/cover'
+  },
   {
     title: 'vue-i18n',
     url: '/vue-i18n'
diff --git a/docs/pages/banner/+Page.tsx b/docs/pages/banner/+Page.tsx
index 7f67bfc409..03545bbd17 100644
--- a/docs/pages/banner/+Page.tsx
+++ b/docs/pages/banner/+Page.tsx
@@ -1,53 +1,8 @@
 export { Page }
 
-// For generating a 600x315 banner.png from this page see: https://gist.github.com/brillout/e7d0a5585471c4ea40d43d2caaadafad
-
 import React from 'react'
-import { heroBgColor, HeroTagline } from '../index/sections/hero/Hero'
-import vikeLogo from '../../assets/logo/vike.svg'
+import { Banner } from './Banner'
 
 function Page() {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100vh',
-        background: heroBgColor
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          // Needs to have the right size upon 600x315 (that's the viewport we use to generate banner.png as explained in the HOW-TO above)
-          scale: '1.3'
-        }}
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            marginBottom: -14
-          }}
-        >
-          <img src={vikeLogo} style={{ marginRight: 12, height: 48, objectFit: 'contain' }} />
-          <span
-            style={{
-              fontSize: '2.7em',
-              fontWeight: 450,
-              color: 'black',
-              opacity: 0.75,
-              lineHeight: '1em'
-            }}
-          >
-            Vike
-          </span>
-        </div>
-        <HeroTagline />
-      </div>
-    </div>
-  )
+  return <Banner showLogo={true} />
 }
diff --git a/docs/pages/banner/Banner.tsx b/docs/pages/banner/Banner.tsx
new file mode 100644
index 0000000000..a001a04357
--- /dev/null
+++ b/docs/pages/banner/Banner.tsx
@@ -0,0 +1,53 @@
+export { Banner }
+
+import React from 'react'
+import { heroBgColor, HeroTagline } from '../index/sections/hero/Hero'
+import vikeLogo from '../../assets/logo/vike.svg'
+
+function Banner({ showLogo }: { showLogo: boolean }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100vh',
+        background: heroBgColor
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          // Needs to have the right size upon 600x315 (that's the viewport we use to generate banner.png as explained in the HOW-TO above)
+          scale: '1.3'
+        }}
+      >
+        {showLogo && (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              marginBottom: -14
+            }}
+          >
+            <img src={vikeLogo} style={{ marginRight: 12, height: 48, objectFit: 'contain' }} />
+            <span
+              style={{
+                fontSize: '2.7em',
+                fontWeight: 450,
+                color: 'black',
+                opacity: 0.75,
+                lineHeight: '1em'
+              }}
+            >
+              Vike
+            </span>
+          </div>
+        )}
+        <HeroTagline />
+      </div>
+    </div>
+  )
+}
diff --git a/docs/pages/banner/cover/+Page.tsx b/docs/pages/banner/cover/+Page.tsx
new file mode 100644
index 0000000000..e3780bc12d
--- /dev/null
+++ b/docs/pages/banner/cover/+Page.tsx
@@ -0,0 +1,8 @@
+export { Page }
+
+import React from 'react'
+import { Banner } from '../Banner'
+
+function Page() {
+  return <Banner showLogo={false} />
+}
diff --git a/docs/pages/press/+Page.mdx b/docs/pages/press/+Page.mdx
index 055f78d196..f954409898 100644
--- a/docs/pages/press/+Page.mdx
+++ b/docs/pages/press/+Page.mdx
@@ -25,6 +25,8 @@ import './press.css'
 
 <img src="/banner.jpg" height="250" />
 
+<img src="https://i.imgur.com/1rCTNcM.png" height="250" />
+
 > Generated from:
-> - Source: <a href="/banner" rel="external">`/banner`</a>
+> - Source: <a href="/banner" rel="external">`/banner`</a> and <a href="/banner/cover" rel="external">`/banner/cover`</a>
 > - [Instructions](https://gist.github.com/brillout/e7d0a5585471c4ea40d43d2caaadafad) for generating a 1200x630 `banner.jpg`