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
evaera · Jun 21, 2023 · 51f7c0c · 51f7c0c
1 parent 644b4de
commit 51f7c0c
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
+}
diff --git 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"