This is an automated email from the ASF dual-hosted git repository.

xushiyan pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/hudi.git


The following commit(s) were added to refs/heads/asf-site by this push:
     new e1ffc8ead6f [DOCS] Site updates (#11128)
e1ffc8ead6f is described below

commit e1ffc8ead6fa7cadc6f625d1ec4ec7e183dbf77b
Author: Bhavani Sudha Saktheeswaran <[email protected]>
AuthorDate: Tue Apr 30 06:14:39 2024 -0700

    [DOCS] Site updates (#11128)
    
    Summary:
    - Add a permanent Github star reminder at the top of the page instead of a 
pop up
    - Edit top nav so resizing does not impact sizing and spacing of top nav
    - Add Events Banner
    - Add a new user in powered-by page
---
 README.md                                          | 12 ++++++++
 website/docusaurus.config.js                       |  6 ++--
 website/src/components/EventFeature/index.js       | 32 ++++++++++++----------
 .../src/components/EventFeature/styles.module.css  | 27 ++++++++++++++----
 website/src/css/custom.css                         |  8 +++++-
 website/src/pages/index.js                         |  2 +-
 website/src/pages/powered-by.md                    |  3 ++
 website/src/theme/Navbar/index.js                  |  6 ++--
 website/src/theme/Navbar/styles.module.css         | 32 ++++++++++++++++++++++
 9 files changed, 100 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index 2f27fc68189..e50b0c6ffff 100644
--- a/README.md
+++ b/README.md
@@ -157,6 +157,18 @@ Example: When you change any file in 
`versioned_docs/version-0.7.0/`, it will on
 ## Configs
 Configs can be automatically updated by following these steps documented at 
../hudi-utils/README.md
 
+## Events Banner
+
+### How to disable Events banner in the main page - https://hudi.apache.org/?
+Remove ``<Events />`` row from the file `website/src/pages/index.js`. This 
should be found below `<HomepageHeader />`. Note commenting out has no effect. 
This entry has to
+be removed to turn off the banner.
+
+### How to add a new Events banner ?
+The code for displaying an event banner is already in place. Steps to add: 
+1. Edit file `website/src/components/EventFeature/index.js` . Edit Event 
description, date and note if it is an 
+`In Person Event` or a `Linkedin Live Event`.
+2. Add `<Event />` entry after `<HomepageHeader />` (if not already present) 
in the file `website/src/pages/index.js`
+
 ## Talks
 
 When adding a talk, please follow these guidelines.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 196e3bb2d74..4efe48a6fbc 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -448,9 +448,9 @@ module.exports = {
       prismPath: require.resolve('./src/theme/prism-include-languages.js'),
     },
     announcementBar: {
-      id: 'announcementBar-1', // Increment on change
-      content:
-          '⭐️ If you like Apache Hudi, give it a star on <a target="_blank" 
rel="noopener noreferrer" href="https://github.com/apache/hudi";>GitHub</a>! ⭐',
+      "id": "announcementBar-2",
+      "content": "⭐️ If you like <b>Apache Hudi</b>, give it a star on <a 
target=\"_blank\" rel=\"noopener noreferrer\" 
href=\"https://github.com/apache/hudi\";><b>GitHub!<svg 
xmlns='http://www.w3.org/2000/svg\\' width='16' height='16' fill='currentColor' 
class='bi bi-github' viewBox='0 -2 16 16'><path d='M8 0C3.58 0 0 3.58 0 8c0 
3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 
0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
 1.08.58 1.23 [...]
+      "isCloseable": false
     },
     colorMode: {
       defaultMode: 'light',
diff --git a/website/src/components/EventFeature/index.js 
b/website/src/components/EventFeature/index.js
index 0764e59b0ec..b24d999374c 100644
--- a/website/src/components/EventFeature/index.js
+++ b/website/src/components/EventFeature/index.js
@@ -6,21 +6,25 @@ import Microphone from "./Icons/microphone.svg";
 
 const Events = () => {
     return (
-        <section className="featurebanner">
+        <section>
              <div className={styles.banner}>
-                <div className="container">
-                    <div className={styles.bannercontent}>
-                        <h3> Upcoming Event: Build and Secure AWS Hudi Lakes 
with AWS Glue & AWS Lake Formations</h3>
-                        <p><span 
className={styles.sideMicrophone}><Microphone/></span> 
-                         LinkedIn Live Event | <span 
className={styles.sideCalendar}><Calendar/></span> 
-                       January 25</p> 
-                    </div>
-                    </div>
-                    <LinkButton class={styles.registerbutton} type="secondary" 
to="https://www.linkedin.com/company/apache-hudi/events/?viewAsMember=true";>
-                             Join Now
-                        </LinkButton>
-                    </div>
-                    </section>
+                 <div className="container">
+                     <div className={styles.flexContainer}>
+                        <div className={styles.bannercontent}>
+                            <h3> Upcoming Event: Bengaluru Apache Hudi Meetup 
hosted @ Navi Technologies</h3>
+                            <p className={styles.flexParagraph}><span 
className={styles.sideMicrophone}><Microphone/></span>
+                             In Person Event | <span 
className={styles.sideCalendar}><Calendar/></span>
+                           May 11</p>
+                        </div>
+                         <div className={styles.joinButton}>
+                             <LinkButton class={styles.registerbutton} 
type="secondary" 
to="https://www.linkedin.com/posts/apache-hudi_dataengineering-softwareengineering-activity-7190732754311913475-t19y/";>
+                                             Join Now
+                             </LinkButton>
+                         </div>
+                     </div>
+                 </div>
+             </div>
+        </section>
     );
 }
 export default Events;
diff --git a/website/src/components/EventFeature/styles.module.css 
b/website/src/components/EventFeature/styles.module.css
index ff6deb0db25..90dadb585d2 100644
--- a/website/src/components/EventFeature/styles.module.css
+++ b/website/src/components/EventFeature/styles.module.css
@@ -4,29 +4,44 @@
   justify-content: space-between;
   background: linear-gradient(to right, #2F93EF 0%, #1E5FBD 100%);
   color: white;
-  padding-right: 230px;
-  padding-left: 210px;
   padding-bottom: 0px;
-  padding-top: 10px;
+  padding-top: 20px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 .sideMicrophone {
   margin-right: 10px;
+  height: 20px;
 }
 .sideCalendar {
   margin-right: 10px;
-  margin-left: 10px; 
+  margin-left: 5px;
+  height: 20px;
 }
+
+.joinButton {
+  margin-bottom: 20px;
+}
+
 .registerbutton {
   background-color: #ffffff;
   color: #074D86; 
   border: none; 
-  padding: 10px 30px; 
+  padding: 10px 30px;
   border-radius: 10px; 
   cursor: pointer; 
   text-transform: uppercase; 
   font-weight: bold; 
   display: inline-block; 
   text-align: center;
-  min-width: 280px
+  min-width: 140px
+}
+.flexContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flexParagraph {
+  display: flex;
+  align-items: center;
 }
\ No newline at end of file
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 9b5e0c3474d..efcebf3fe82 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -382,7 +382,7 @@ h1.blogPostTitle_src-theme-BlogPostItem-styles-module{
   }
 }
 
-@media(max-width:1320px){
+@media(max-width:1350px){
   .navbar__item {
     display: none !important;
   }
@@ -393,3 +393,9 @@ h1.blogPostTitle_src-theme-BlogPostItem-styles-module{
 
 
 
+div[class^="announcementBar"][role="banner"] {
+  color: white;
+  background-color: #29557A;
+  padding: 5px 0;
+  height: auto;
+}
\ No newline at end of file
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 8de055c9a9a..355993b5706 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -30,7 +30,7 @@ export default function Home() {
     >
       <NewReleaseMessage />
       <HomepageHeader />
-      {/* <Events /> */}
+      <Events />
       <main>
         <DataLake />
         <HomepageFeatures />
diff --git a/website/src/pages/powered-by.md b/website/src/pages/powered-by.md
index 455d68d84f6..7e63f5a846b 100644
--- a/website/src/pages/powered-by.md
+++ b/website/src/pages/powered-by.md
@@ -78,6 +78,9 @@ Apache Hudi is integrated in the digital platform to meet the 
real-time update n
 ### Logical Clocks 
 [Hopsworks 1.x 
series](https://www.logicalclocks.com/blog/introducing-the-hopsworks-1-x-series)
 supports Apache Hudi feature groups, to enable upserts and time travel.
 
+### Navi
+[Navi](https://navi.com/), one of India’s fastest-growing financial service 
providers, offers Personal & Home Loans, UPI, Insurance, Mutual Funds, and 
Gold. Powered by Apache Hudi, our Data Platform tech stack has been enhanced to 
enable near-real-time data ingestion, driving AI/ML initiatives and critical 
business decisions to create exceptional customer experiences.
+
 ### NerdWallet
 [NerdWallet uses AWS and Apache Hudi to build a serverless, real-time 
analytics 
platform](https://aws.amazon.com/blogs/big-data/how-nerdwallet-uses-aws-and-apache-hudi-to-build-a-serverless-real-time-analytics-platform/)
 
diff --git a/website/src/theme/Navbar/index.js 
b/website/src/theme/Navbar/index.js
index ea5d2c05637..1677fe1af5e 100644
--- a/website/src/theme/Navbar/index.js
+++ b/website/src/theme/Navbar/index.js
@@ -68,7 +68,7 @@ function useWindowSize() {
 
 function useMobileSidebar() {
   const { width } = useWindowSize(); // Mobile sidebar not visible on 
hydration: can avoid SSR rendering
-  const breakPoint = 1320;
+  const breakPoint = 1350;
   const shouldRender = width <= breakPoint; // || windowSize === 'ssr';
 
   const [shown, setShown] = useState(false); // Close mobile sidebar on 
navigation pop
@@ -248,7 +248,7 @@ function Navbar() {
         [styles.navbarHideable]: hideOnScroll,
         [styles.navbarHidden]: hideOnScroll && !isNavbarVisible,
       })}>
-      <div className="navbar__inner">
+      <div className={clsx("navbar__inner", [styles.navbarInnerStyle])}>
         <img referrerpolicy="no-referrer-when-downgrade" 
src="https://static.scarf.sh/a.png?x-pxid=8f594acf-9b77-44fb-9475-3e82ead1910c"; 
width={0} height={0} alt=""/>
         <img referrerpolicy="no-referrer-when-downgrade" 
src="https://analytics.apache.org/matomo.php?idsite=47&amp;rec=1"; width={0} 
height={0} alt="" />
         <div className="navbar__items">
@@ -269,7 +269,7 @@ function Navbar() {
             titleClassName="navbar__title"
           />
           {leftItems.map((item, i) => (
-            <NavbarItem {...item} key={i} />
+            <NavbarItem {...item} className={styles.navbarFontSize} key={i} />
           ))}
         </div>
         <div className="navbar__items navbar__items--right">
diff --git a/website/src/theme/Navbar/styles.module.css 
b/website/src/theme/Navbar/styles.module.css
index de52b2e80fb..b8e737844cc 100644
--- a/website/src/theme/Navbar/styles.module.css
+++ b/website/src/theme/Navbar/styles.module.css
@@ -36,3 +36,35 @@ Hide toggle in small viewports
 .navbarLogo {
   max-width: 148px;
 }
+
+@media(max-width:1820px){
+  .navbarFontSize{
+    font-size:90% !important;
+  }
+}
+@media(max-width:1602px){
+  .navbarFontSize{
+    font-size:80% !important;
+  }
+}
+@media(max-width:1440px){
+  .navbarFontSize{
+    font-size:70% !important;
+  }
+}
+@media(min-width: 1300px) {
+  div[class^="navbar__item"] {
+    font-size: 100% !important;
+  }
+}
+@media(max-width: 1350px) {
+  .navbarWrapper {
+    padding: 0 !important;
+  }
+  .navbarInnerStyle {
+    margin: 0 auto;
+    max-width: var(--ifm-container-width) !important;
+    padding: 0 var(--ifm-spacing-horizontal) !important;
+    width: 100%;
+  }
+}
\ No newline at end of file

Reply via email to