From 51f7c0c3f5bd05b29e91b02daba534d0d607e149 Mon Sep 17 00:00:00 2001
From: guidable0 <68713456+guidable0@users.noreply.github.com>
Date: Wed, 21 Jun 2023 23:28:04 +0300
Subject: [PATCH] Banner image property for home page (#130)

* Add banner image property under home

* Pass bannerImage to site config using customFields

* Implement bannerImage property for home template

* Update docs to include bannerImage

* Add quotation marks around the banner image url
---
 cli/src/getDocusaurusConfig.ts     |  4 ++++
 cli/src/prepareProject.ts          |  1 +
 cli/template/home/index.js         | 17 ++++++++++++++---
 cli/template/home/index.module.css | 14 ++++++++++++++
 website/docs/Configuration.md      |  1 +
 5 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/cli/src/getDocusaurusConfig.ts b/cli/src/getDocusaurusConfig.ts
index 4f85e69..7a43b80 100644
--- a/cli/src/getDocusaurusConfig.ts
+++ b/cli/src/getDocusaurusConfig.ts
@@ -42,6 +42,10 @@ export default function getDocusaurusConfig({
 
     ...config.docusaurus,
 
+    customFields: {
+      bannerImage: config.home?.bannerImage
+    },
+
     themeConfig: {
       prism: {
         additionalLanguages: ["lua"],
diff --git a/cli/src/prepareProject.ts b/cli/src/prepareProject.ts
index 79d72a9..e39d41d 100644
--- a/cli/src/prepareProject.ts
+++ b/cli/src/prepareProject.ts
@@ -67,6 +67,7 @@ export type Config = Partial<{
 
   home: Partial<{
     enabled: boolean
+    bannerImage: string
     includeReadme: boolean
 
     features: {
diff --git a/cli/template/home/index.js b/cli/template/home/index.js
index efee829..44882d3 100644
--- a/cli/template/home/index.js
+++ b/cli/template/home/index.js
@@ -41,11 +41,22 @@ export function HomepageFeatures() {
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext()
+  const bannerImage = siteConfig.customFields.bannerImage
+  const hasBannerImage = bannerImage ? true : false
+  const heroBannerStyle = hasBannerImage ? { backgroundImage: `url("${bannerImage}")` } : null
+
+  const titleClassName = clsx("hero__title", {
+    [styles.titleOnBannerImage]: hasBannerImage
+  })
+  const taglineClassName = clsx("hero__subtitle", {
+    [styles.taglineOnBannerImage]: hasBannerImage
+  })
+
   return (
-    <header className={clsx("hero", styles.heroBanner)}>
+    <header className={clsx("hero", styles.heroBanner)} style={heroBannerStyle}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <h1 className={titleClassName}>{siteConfig.title}</h1>
+        <p className={taglineClassName}>{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
diff --git a/cli/template/home/index.module.css b/cli/template/home/index.module.css
index 4185a01..34c895b 100644
--- a/cli/template/home/index.module.css
+++ b/cli/template/home/index.module.css
@@ -10,6 +10,10 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
 }
 
 @media screen and (max-width: 966px) {
@@ -35,3 +39,13 @@
   height: 200px;
   width: 200px;
 }
+
+.titleOnBannerImage {
+  text-shadow: 0px 2px 4px rgb(0, 0, 0);
+  color: var(--ifm-color-gray-100);
+}
+
+.taglineOnBannerImage {
+  text-shadow: 0px 2px 4px rgb(0, 0, 0);
+  color: var(--ifm-color-gray-100);
+}
\ No newline at end of file
diff --git a/website/docs/Configuration.md b/website/docs/Configuration.md
index 3b44d18..d49d859 100644
--- a/website/docs/Configuration.md
+++ b/website/docs/Configuration.md
@@ -152,6 +152,7 @@ By default your project's README is used as the homepage. To use a custom homepa
 [home]
 enabled = true
 includeReadme = true # Optional
+bannerImage = "https://url" # Optional
 
 [[home.features]]
 title = "Feature 1"