This is an automated email from the ASF dual-hosted git repository.
mayanks pushed a commit to branch new-site-dev
in repository https://gitbox.apache.org/repos/asf/pinot-site.git
The following commit(s) were added to refs/heads/new-site-dev by this push:
new d828143a SAR 634 youtube experience (#145)
d828143a is described below
commit d828143ab8f106beae7520029168c7aea6512032
Author: Gio <[email protected]>
AuthorDate: Tue Apr 1 19:43:16 2025 +0200
SAR 634 youtube experience (#145)
* SAR-634 - Add YouTube Share experience
* SAR-634 - Address feedback
* SAR-634 - Force build
---
app/Main.tsx | 23 ++++--
app/hooks/useIsMobile.ts | 17 +++++
app/powered-by/page.tsx | 10 ++-
app/share/page.tsx | 125 +++++++++++++++++++++++++++++++
components/AnnouncementBar.tsx | 88 ++++++++++++++--------
components/Footer.tsx | 5 +-
components/Header.tsx | 15 ++--
components/ReleaseBanner.tsx | 18 +++++
components/TextMediaSplitSection.tsx | 78 +++++++++++++++++++
components/TextVideoSplitSection.tsx | 60 ---------------
components/Toc.tsx | 19 +++++
components/YouTubeBanner.tsx | 15 ++++
data/headerNavLinks.ts | 6 +-
data/siteMetadata.js | 67 ++++++++++++++++-
data/youtube.svg | 3 +
public/static/images/share/image1.png | Bin 0 -> 53502 bytes
public/static/images/share/image2.png | Bin 0 -> 43519 bytes
public/static/images/share/image3.png | Bin 0 -> 30726 bytes
public/static/images/share/image4.png | Bin 0 -> 20080 bytes
public/static/images/share/image5.png | Bin 0 -> 34273 bytes
public/static/images/share/image55.png | Bin 0 -> 33509 bytes
public/static/images/share/image6.png | Bin 0 -> 44563 bytes
public/static/images/socials/youtube.svg | 11 +++
public/static/images/youtube_default.svg | 3 +
public/static/images/youtube_hero.png | Bin 0 -> 151382 bytes
public/static/images/youtube_red.svg | 4 +
26 files changed, 450 insertions(+), 117 deletions(-)
diff --git a/app/Main.tsx b/app/Main.tsx
index c32358b4..3f269c67 100644
--- a/app/Main.tsx
+++ b/app/Main.tsx
@@ -5,7 +5,7 @@ import { CoreContent } from 'pliny/utils/contentlayer';
import { Blog } from '@/.contentlayer/generated';
import siteMetadata from '@/data/siteMetadata';
import HeroSection from '@/components/HeroSection';
-import TextVideoSplitSection from '@/components/TextVideoSplitSection';
+import TextMediaSplitSection from '@/components/TextMediaSplitSection';
import SectionContainer from '@/components/SectionContainer';
import Features from '@/components/Features';
import CompanyStories from '@/components/CompanyCarousel';
@@ -19,18 +19,31 @@ interface HomeProps {
const Home: FC<HomeProps> = ({ posts }) => {
return (
- <div>
+ <>
<HeroSection />
- <TextVideoSplitSection
+ <TextMediaSplitSection
videoUrl={siteMetadata.video.videoUrl}
- title={siteMetadata.video.title}
+ videoTitle={siteMetadata.video.title}
+ heading={siteMetadata.video.heading}
+ paragraphs={siteMetadata.video.paragraphs}
+ ctaText="Learn More"
+ ctaHref={siteMetadata.cta.learnMore}
/>
<Features />
<CompanyStories />
<CommunitySection />
<TextCodeSplitSection title={siteMetadata.codeSection.header} />
<BlogSection posts={posts} />
- </div>
+ <TextMediaSplitSection
+ heading={siteMetadata.youtubeShare.heading}
+ paragraphs={siteMetadata.youtubeShare.paragraphs}
+ ctaText={siteMetadata.youtubeShare.ctaText}
+ ctaHref={siteMetadata.youtubeShare.link}
+ imageUrl={siteMetadata.youtubeShare.imageUrl}
+ imageAlt={siteMetadata.youtubeShare.imageAlt}
+ target="_self"
+ />
+ </>
);
};
diff --git a/app/hooks/useIsMobile.ts b/app/hooks/useIsMobile.ts
new file mode 100644
index 00000000..e4149db1
--- /dev/null
+++ b/app/hooks/useIsMobile.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export function useIsMobile(breakpoint = 768) {
+ const [isMobile, setIsMobile] = useState(false);
+
+ useEffect(() => {
+ function handleResize() {
+ setIsMobile(window.innerWidth < breakpoint);
+ }
+ handleResize();
+
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, [breakpoint]);
+
+ return isMobile;
+}
diff --git a/app/powered-by/page.tsx b/app/powered-by/page.tsx
index 8a1cc440..3c73a843 100644
--- a/app/powered-by/page.tsx
+++ b/app/powered-by/page.tsx
@@ -27,12 +27,12 @@ const PoweredBy = () => {
</h3>
<CompanyTable companies={companiesUsingPinot} />
<footer className="mx-5 my-14 bg-green-50 py-12 text-center
md:mx-28 md:my-24">
- <h3 className="mb-6 px-16 text-2xl font-semibold md:mb-8">
- Share your Apache Pinot story.
+ <h3 className="mb-6 px-9 text-2xl font-semibold md:mb-8">
+ Feature your Pinot video on Apache Pinot OSS YouTube
Channel!
</h3>
<Button variant="default" size="lg" className="bg-vine-100
px-6 py-2 text-base">
- <Link href={siteMetadata.shareStory.link} target="_blank">
- Share Now
+ <Link href={siteMetadata.shareStory.link} target="_self">
+ Share your video
</Link>
</Button>
</footer>
@@ -41,3 +41,5 @@ const PoweredBy = () => {
};
export default PoweredBy;
+
+// test
diff --git a/app/share/page.tsx b/app/share/page.tsx
new file mode 100644
index 00000000..80f917a6
--- /dev/null
+++ b/app/share/page.tsx
@@ -0,0 +1,125 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import Link from 'next/link';
+import Toc from '@/components/Toc';
+import { useIsMobile } from '../hooks/useIsMobile';
+import siteMetadata from '@/data/siteMetadata';
+
+const YouTubeShare = () => {
+ const isMobile = useIsMobile();
+ const images = siteMetadata.youtubeShare.mainPage.images;
+
+ const sortedImages = useMemo(() => {
+ return [...images].sort((a, b) => {
+ return Number(b.priority) - Number(a.priority);
+ });
+ }, []);
+
+ const displayedImages = isMobile ? sortedImages.slice(0, 4) : images;
+
+ return (
+ <main className="m-auto flex max-w-[1020px] gap-20 text-stone-900">
+ <Toc />
+ <section className="flex flex-col gap-10 px-5 pb-5 pt-10 md:px-0">
+ <h1 className=" text-[28px] font-semibold md:text-[40px]
md:font-bold">
+ {siteMetadata.youtubeShare.mainPage.title}
+ </h1>
+ <div className="grid grid-cols-2 gap-4 sm:grid-cols-2
md:grid-cols-3">
+ {displayedImages.map((img, idx) => (
+ <div key={idx}>
+ <Link
+ href="https://www.youtube.com/@Apache_Pinot";
+ target="_blank"
+ rel="noopener noreferrer"
+ className="custom-link"
+ >
+ <img
+ src={img.src}
+ alt={img.alt}
+ className="h-auto w-full rounded-md"
+ />
+ </Link>
+ </div>
+ ))}
+ </div>
+
+ <div className="flex max-w-[700px] flex-col gap-4">
+ <div>
+ <h2 className="text-[20px] font-semibold
md:text-[22px]">
+ Apache Pinot OSS YouTube Channel
+ </h2>
+ <p>
+ A central hub for Apache Pinot videos: meetup
talks, tutorials, and
+ real-world use cases- all in one place! If you’ve
shared a talk or found
+ a great video online, send it our way, and we’ll
feature it! For the
+ community- by the community.
+ </p>
+ </div>
+
+ <div>
+ <h3
+ id="how-to-contribute"
+ className="text-[20px] font-semibold
md:text-[22px]"
+ >
+ How to Contribute?
+ </h3>
+ <ul className="list-disc pl-5">
+ <li>
+ Video is already on YouTube? Share the link,
and we'll list it under
+ the channel (no need for raw files).
+ </li>
+ <li>Have raw files? We can edit and upload the
video for you!</li>
+ </ul>
+ </div>
+
+ <div>
+ <h3
+ id="where-to-share"
+ className="text-[20px] font-semibold
md:text-[22px]"
+ >
+ Where to Share?
+ </h3>
+ <ul className="list-disc pl-5">
+ <li>
+ Post in{' '}
+ <a
+
href="https://apache-pinot.slack.com/archives/C08GH2MAVT4";
+ target="_blank"
+ rel="noopener noreferrer"
+ className="custom-link"
+ >
+ #pinot-youtube-channel
+ </a>
+ on Pinot Slack
+ </li>
+ <li>
+ Email{' '}
+ <a href="mailto:[email protected]";
className="custom-link">
+ [email protected]
+ </a>{' '}
+ (Subject: Pinot YouTube Channel)
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div className="mb-20 flex flex-wrap items-center
justify-center md:mb-48 md:mt-4 md:justify-start">
+ <img src="/static/images/youtube_default.svg"
alt="youtube" className="mr-3" />
+ <span className="">
+ <Link
+ href="https://www.youtube.com/@Apache_Pinot";
+ target="_blank"
+ rel="noopener noreferrer"
+ className="custom-link"
+ >
+ Subscribe
+ </Link>
+ </span>
+ </div>
+ </section>
+ </main>
+ );
+};
+
+export default YouTubeShare;
diff --git a/components/AnnouncementBar.tsx b/components/AnnouncementBar.tsx
index 932424e7..745cd1ae 100644
--- a/components/AnnouncementBar.tsx
+++ b/components/AnnouncementBar.tsx
@@ -1,42 +1,64 @@
+import clsx from 'clsx';
+import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
-import { Button } from './ui/button';
-export type AnnouncementBarProps =
- | {
- children: React.ReactNode;
- buttonText: string;
- link: string;
- }
- | {
- children: React.ReactNode;
- buttonText?: never;
- link?: never;
- };
+export interface AnnouncementBarProps {
+ text: string;
+ iconSrc?: string;
+ textColor?: string;
+ backgroundColor?: string;
+ buttonText?: string;
+ buttonHref?: string;
+ buttonColor?: string;
+ buttonTarget?: string;
+ showArrowIcon?: boolean;
+ className?: string;
+}
-const AnnouncementBar = ({ children, buttonText, link }: AnnouncementBarProps)
=> {
+export default function AnnouncementBar({
+ text,
+ iconSrc,
+ textColor = 'text-black',
+ backgroundColor = 'bg-slate-100',
+ buttonText,
+ buttonHref,
+ buttonColor = 'text-blue-600',
+ buttonTarget = '_self',
+ showArrowIcon = true,
+ className = ''
+}: AnnouncementBarProps) {
return (
- <div className="inset-x-0 top-0 z-50 flex text-center text-base
sm:text-left">
- <div className="flex w-full flex-col items-center justify-center
bg-sky-200 pt-1 md:flex-row md:pt-0">
- <div className="flex flex-wrap items-center justify-center
md:justify-start">
- {children}
- </div>
- <div className="flex items-center justify-center">
- {buttonText && (
- <Button
- variant="link"
- asChild
- className="mr-2 text-base font-semibold
leading-tight text-vine-100"
- >
- <a href={link} target="_blank">
- {buttonText}
- <ArrowRight className="mr-2 h-5 w-5" />
- </a>
- </Button>
+ <div className={clsx('z-50', backgroundColor, className)}>
+ <div
+ className={clsx(
+ 'flex items-center justify-center gap-2 p-4 md:gap-4
md:p-2',
+ className
+ )}
+ >
+ <div className="ml-5 flex items-center text-left">
+ {iconSrc && (
+ <img
+ src={iconSrc}
+ alt=""
+ className="mb-2 mr-3 h-6 w-auto md:mb-0 md:mr-6"
+ />
)}
+ <span className={`text-base font-semibold md:text-lg
${textColor}`}>
+ {text}
+ </span>
</div>
+
+ {buttonHref && (
+ <Link
+ href={buttonHref}
+ target={buttonTarget}
+ className={`inline-flex items-center whitespace-nowrap
text-base font-semibold hover:opacity-80 md:text-base ${buttonColor}`}
+ >
+ {buttonText}
+ {showArrowIcon && <ArrowRight className="ml-1
inline-block h-5 w-5" />}
+ </Link>
+ )}
</div>
</div>
);
-};
-
-export default AnnouncementBar;
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 8a052d09..b82019b1 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,10 +1,10 @@
import Link from './Link';
import Logo from '@/data/logo.svg';
import GitHub from '@/data/github.svg';
+import Youtube from '@/data/youtube.svg';
import { Slack } from 'lucide-react';
import Newsletter from './Newsletter';
-// Links to be used in the footer
const links = [
{
title: 'Resources',
@@ -108,6 +108,9 @@ export default function Footer() {
</div>
<div className="mt-4 flex justify-center py-8 md:mt-0">
+ <Link href="https://www.youtube.com/@Apache_Pinot";
className="mr-4">
+ <Youtube />
+ </Link>
<Link
href="https://join.slack.com/t/apache-pinot/shared_invite/zt-2t4m15dl2-SnVmZenainX_bq1_dY6XYg";
className="mr-4"
diff --git a/components/Header.tsx b/components/Header.tsx
index 8f381f30..21072a28 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,7 +1,7 @@
'use client';
import { useEffect, useState } from 'react';
-import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import { usePathname } from 'next/navigation';
import Link from './Link';
import siteMetadata from '@/data/siteMetadata';
import headerNavLinks from '@/data/headerNavLinks';
@@ -12,13 +12,14 @@ import { Button } from '@/components/ui/button';
import MobileNav from './MobileNav';
// import ThemeSwitch from './ThemeSwitch';
import SearchButton from './SearchButton';
-import AnnouncementBar from './AnnouncementBar';
+import YouTubeBanner from './YouTubeBanner';
const Header = () => {
const [stars, setStars] = useState<string | null>(null);
- // const router = useRouter();
const pathname = usePathname();
+ const isSharePage = pathname === '/share/';
+
useEffect(() => {
const fetchStars = async () => {
const cacheKey = 'githubStars';
@@ -46,12 +47,8 @@ const Header = () => {
return (
<>
- <AnnouncementBar
- buttonText={siteMetadata.announcement.buttonText as string}
- link={siteMetadata.announcement.link as string}
- >
- 🎉🎉🎉 Announcing the release of Apache Pinot 1.3.0
- </AnnouncementBar>
+ {/* <ReleaseBanner /> */}
+ {!isSharePage && <YouTubeBanner />}
<header className="border-b-1 flex items-center justify-between
border-b px-5 py-3 md:px-[4rem] md:py-4">
<div className="flex">
<Link href="/" aria-label={siteMetadata.headerTitle}>
diff --git a/components/ReleaseBanner.tsx b/components/ReleaseBanner.tsx
new file mode 100644
index 00000000..6f0d398d
--- /dev/null
+++ b/components/ReleaseBanner.tsx
@@ -0,0 +1,18 @@
+import siteMetadata from '@/data/siteMetadata';
+import AnnouncementBar from './AnnouncementBar';
+
+export default function ReleaseBanner() {
+ return (
+ <AnnouncementBar
+ text="🎉🎉🎉 Announcing the release of Apache Pinot 1.3.0"
+ backgroundColor="bg-sky-200"
+ textColor="text-black"
+ buttonText={siteMetadata.announcement.buttonText}
+ buttonHref={siteMetadata.announcement.link}
+ buttonColor="text-vine-100"
+ showArrowIcon
+ className="flex-col md:flex-row"
+ buttonTarget="_blank"
+ />
+ );
+}
diff --git a/components/TextMediaSplitSection.tsx
b/components/TextMediaSplitSection.tsx
new file mode 100644
index 00000000..dc6edd3e
--- /dev/null
+++ b/components/TextMediaSplitSection.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import React from 'react';
+import { Button } from './ui/button';
+import { ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+
+interface TextMediaSplitSectionProps {
+ heading: string;
+ paragraphs?: string[];
+ ctaText?: string;
+ ctaHref?: string;
+ videoUrl?: string;
+ videoTitle?: string;
+ imageUrl?: string;
+ imageAlt?: string;
+ target?: string;
+}
+
+const TextMediaSplitSection: React.FC<TextMediaSplitSectionProps> = ({
+ heading,
+ paragraphs,
+ ctaText,
+ ctaHref,
+ videoUrl,
+ videoTitle,
+ imageUrl,
+ imageAlt,
+ target = '_blank'
+}) => {
+ return (
+ <section className="bg-stone-100 dark:bg-gray-900">
+ <div className="flex flex-col px-5 py-14 sm:flex-row sm:px-6
md:mx-auto md:max-w-screen-outerLiveArea md:gap-20 md:px-[5.5rem]
md:py-[6.5rem]">
+ <article className="flex flex-1 flex-col">
+ <header>
+ <h2 className="mb-3 text-[1.75rem] font-bold
md:text-[2.5rem]">
+ {heading}
+ </h2>
+ </header>
+ {paragraphs &&
+ paragraphs.map((paragraph, index) => (
+ <p key={index} className="mb-4 text-base
leading-relaxed md:text-lg">
+ {paragraph}
+ </p>
+ ))}
+
+ {ctaText && ctaHref && (
+ <Button
+ variant="link"
+ asChild
+ className="my-6 mr-2 justify-start p-0 text-lg
font-semibold leading-tight text-vine-100"
+ >
+ <Link href={ctaHref} target={target}
className="w-fit">
+ {ctaText}
+ <ArrowRight className="mr-2 h-5 w-5" />
+ </Link>
+ </Button>
+ )}
+ </article>
+ <aside className="flex-1">
+ {videoUrl ? (
+ <iframe
+ className="h-[197px] w-full md:h-full"
+ src={videoUrl}
+ title={videoTitle}
+ allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
+ allowFullScreen
+ ></iframe>
+ ) : imageUrl ? (
+ <img src={imageUrl} alt={imageAlt} />
+ ) : null}
+ </aside>
+ </div>
+ </section>
+ );
+};
+
+export default TextMediaSplitSection;
diff --git a/components/TextVideoSplitSection.tsx
b/components/TextVideoSplitSection.tsx
deleted file mode 100644
index 4d24fe96..00000000
--- a/components/TextVideoSplitSection.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Button } from './ui/button';
-import { ArrowRight } from 'lucide-react';
-import Link from 'next/link';
-import siteMetadata from '@/data/siteMetadata';
-
-interface TextVideoSplitSectionProps {
- videoUrl: string;
- title: string;
-}
-
-const TextVideoSplitSection: React.FC<TextVideoSplitSectionProps> = ({
videoUrl, title }) => {
- return (
- <section className="bg-stone-100 dark:bg-gray-900">
- <div className="flex flex-col px-5 py-14 sm:flex-row sm:px-6
md:mx-auto md:max-w-screen-outerLiveArea md:gap-20 md:px-[5.5rem]
md:py-[6.5rem]">
- <article className="flex flex-1 flex-col">
- <header>
- <h2 className="mb-3 text-[1.75rem] font-bold
md:text-[2.5rem]">
- What is Apache Pinot?
- </h2>
- </header>
- <p className="text-base leading-relaxed md:text-lg">
- Originally developed at LinkedIn, Apache PinotTM is a
real-time distributed
- OLAP datastore, purpose-built to provide ultra
low-latency analytics at
- extremely high throughput.
- </p>
- <br />
- <p className="text-base leading-relaxed md:text-lg">
- With its distributed architecture and columnar
storage, Apache Pinot
- empowers businesses to gain valuable insights from
real-time data,
- supporting data-driven decision-making and
applications.
- </p>
- <Button
- variant="link"
- asChild
- className="my-6 mr-2 justify-start p-0 text-lg
font-semibold leading-tight text-vine-100"
- >
- <Link href={siteMetadata.cta.learnMore}
target="_blank">
- Learn More
- <ArrowRight className="mr-2 h-5 w-5" />
- </Link>
- </Button>
- </article>
- <aside className="flex-1">
- <iframe
- className="h-[197px] w-full md:h-full"
- src={videoUrl}
- title={title}
- allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
- allowFullScreen
- ></iframe>
- </aside>
- </div>
- </section>
- );
-};
-
-export default TextVideoSplitSection;
diff --git a/components/Toc.tsx b/components/Toc.tsx
new file mode 100644
index 00000000..41eeb203
--- /dev/null
+++ b/components/Toc.tsx
@@ -0,0 +1,19 @@
+function Toc() {
+ return (
+ <div className="hidden flex-col gap-2 px-5 py-10 md:flex md:px-0">
+ <ul className="flex flex-col gap-2 whitespace-nowrap border-r-2
border-stone-200 pr-16 text-sm">
+ <li>
+ <p className="font-semibold">YouTube Channel</p>
+ </li>
+ <li>
+ <a href="#how-to-contribute">How to contribute</a>
+ </li>
+ <li>
+ <a href="#where-to-share">Where to share</a>
+ </li>
+ </ul>
+ </div>
+ );
+}
+
+export default Toc;
diff --git a/components/YouTubeBanner.tsx b/components/YouTubeBanner.tsx
new file mode 100644
index 00000000..bb2a5b10
--- /dev/null
+++ b/components/YouTubeBanner.tsx
@@ -0,0 +1,15 @@
+import siteMetadata from '@/data/siteMetadata';
+import AnnouncementBar from './AnnouncementBar';
+
+export default function YouTubeBanner() {
+ return (
+ <AnnouncementBar
+ text={siteMetadata.youtubeShare.buttonText}
+ iconSrc="/static/images/youtube_red.svg"
+ backgroundColor="bg-[#C7154A]"
+ textColor="text-white"
+ buttonHref={siteMetadata.youtubeShare.link}
+ buttonColor="text-white"
+ />
+ );
+}
diff --git a/data/headerNavLinks.ts b/data/headerNavLinks.ts
index 168efdd4..d48b062b 100644
--- a/data/headerNavLinks.ts
+++ b/data/headerNavLinks.ts
@@ -1,9 +1,9 @@
const headerNavLinks = [
{ href: '/', title: 'Home' },
{ href: 'https://docs.pinot.apache.org', title: 'Docs' },
- { href: '/download', title: 'Download' },
- { href: '/powered-by', title: 'Powered by' },
- { href: '/blog', title: 'Blog' },
+ { href: '/download/', title: 'Download' },
+ { href: '/powered-by/', title: 'Powered by' },
+ { href: '/blog/', title: 'Blog' },
{ href: '#join-community', title: 'Community' }
];
diff --git a/data/siteMetadata.js b/data/siteMetadata.js
index e6d46111..98cec9d7 100644
--- a/data/siteMetadata.js
+++ b/data/siteMetadata.js
@@ -24,7 +24,12 @@ const siteMetadata = {
video: {
videoUrl: 'https://www.youtube.com/embed/_lqdfq2c9cQ',
title: 'What is Apache Pinot?',
- description: 'Apache Pinot'
+ description: 'Apache Pinot',
+ heading: 'What is Apache Pinot?',
+ paragraphs: [
+ 'Originally developed at LinkedIn, Apache PinotTM is a real-time
distributed OLAP datastore, purpose-built to provide ultra low-latency
analytics at extremely high throughput.',
+ 'With its distributed architecture and columnar storage, Apache
Pinot empowers businesses to gain valuable insights from real-time data,
supporting data-driven decision-making and applications.'
+ ]
},
cta: {
getStarted: 'https://docs.pinot.apache.org/basics/getting-started',
@@ -109,6 +114,57 @@ const siteMetadata = {
buttonText: 'learn more',
link: 'https://github.com/apache/pinot/releases/tag/release-1.3.0'
},
+ youtubeShare: {
+ heading: 'Share Your Knowledge on Apache Pinot YouTube channel!',
+ buttonText: 'Share your expertise on the new Apache Pinot YouTube
Channel!',
+ link: '/share',
+ buttonColor: 'text-white',
+ backgroundColor: 'bg-[#C7154A]',
+ messageColor: 'text-white',
+ ctaText: 'Share your video',
+ ctaHref: '/share/',
+ imageUrl: '/static/images/youtube_hero.png',
+ imageAlt: 'YouTube Hero',
+ paragraphs: [
+ 'Apache Pinot OSS YouTube Channel is a dedicated video hub for all
things Pinot. Our goal is to bring together meetup talks, tutorials, and
real-world use cases in one place, making it easier for the community to learn
and share.'
+ ],
+ mainPage: {
+ title: 'Apache Pinot OSS YouTube Channel Share Your Expertise',
+ description: 'Share your video on Apache Pinot OSS YouTube
Channel',
+ images: [
+ {
+ src: '/static/images/share/image1.png',
+ alt: 'Presenter speaking at meetup 1',
+ priority: 1
+ },
+ {
+ src: '/static/images/share/image2.png',
+ alt: 'Presenter speaking at meetup 2',
+ priority: 5
+ },
+ {
+ src: '/static/images/share/image3.png',
+ alt: 'Slide deck screenshot',
+ priority: 2
+ },
+ {
+ src: '/static/images/share/image4.png',
+ alt: 'Apache Pinot Meetup banner',
+ priority: 3
+ },
+ {
+ src: '/static/images/share/image55.png',
+ alt: 'Presenter with YouTube icon overlay',
+ priority: 4
+ },
+ {
+ src: '/static/images/share/image6.png',
+ alt: 'Another presenter speaking',
+ priority: 6
+ }
+ ]
+ }
+ },
communityLinks: [
{
name: 'Slack',
@@ -131,6 +187,13 @@ const siteMetadata = {
link: 'https://rtasummit.com',
isWide: true
},
+ {
+ name: 'YouTube',
+ icon: '/static/images/socials/youtube.svg',
+ // link: 'https://www.youtube.com/@Apache_Pinot',
+ link: '/share/',
+ isWide: true
+ },
{
name: 'Meetup in a Box',
icon: '/static/images/socials/miab.svg',
@@ -139,7 +202,7 @@ const siteMetadata = {
],
shareStory: {
// link: process.env.SHARE_STORY_LINK
- link: 'https://forms.gle/75MbXyz7BztNQ78k9'
+ link: '/share/'
}
};
diff --git a/data/youtube.svg b/data/youtube.svg
new file mode 100644
index 00000000..8b27db72
--- /dev/null
+++ b/data/youtube.svg
@@ -0,0 +1,3 @@
+<svg width="37" height="28" viewBox="0 0 37 28" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<path d="M30.0651 27.1236H6.84577C6.56913 27.0706 6.29248 27.0225 6.01584
26.96C5.22342 26.7771 4.48726 26.4595 3.78393 26.0505C2.98682 25.5837 2.31631
24.9629 1.7302 24.2555C1.266 23.6925 0.876822 23.0621 0.623622 22.3691C0.431378
21.8446 0.2954 21.3008 0.140667 20.7667C0.0797111 20.5501 0.0468889 20.3239 0
20.1026C0 15.8005 0 11.4984 0 7.19624C0.0468889 6.99894 0.0984666 6.80164
0.135978 6.60434C0.426689 5.05 1.14409 3.73146 2.22253 2.60059C2.954 1.83545
3.80269 1.25799 4.75922 0.84413 [...]
+</svg>
diff --git a/public/static/images/share/image1.png
b/public/static/images/share/image1.png
new file mode 100644
index 00000000..1b0a7dae
Binary files /dev/null and b/public/static/images/share/image1.png differ
diff --git a/public/static/images/share/image2.png
b/public/static/images/share/image2.png
new file mode 100644
index 00000000..5aff934a
Binary files /dev/null and b/public/static/images/share/image2.png differ
diff --git a/public/static/images/share/image3.png
b/public/static/images/share/image3.png
new file mode 100644
index 00000000..c8665575
Binary files /dev/null and b/public/static/images/share/image3.png differ
diff --git a/public/static/images/share/image4.png
b/public/static/images/share/image4.png
new file mode 100644
index 00000000..02ad76ca
Binary files /dev/null and b/public/static/images/share/image4.png differ
diff --git a/public/static/images/share/image5.png
b/public/static/images/share/image5.png
new file mode 100644
index 00000000..7c551181
Binary files /dev/null and b/public/static/images/share/image5.png differ
diff --git a/public/static/images/share/image55.png
b/public/static/images/share/image55.png
new file mode 100644
index 00000000..c0661b72
Binary files /dev/null and b/public/static/images/share/image55.png differ
diff --git a/public/static/images/share/image6.png
b/public/static/images/share/image6.png
new file mode 100644
index 00000000..fb4fa6fd
Binary files /dev/null and b/public/static/images/share/image6.png differ
diff --git a/public/static/images/socials/youtube.svg
b/public/static/images/socials/youtube.svg
new file mode 100644
index 00000000..f8d68a57
--- /dev/null
+++ b/public/static/images/socials/youtube.svg
@@ -0,0 +1,11 @@
+<svg width="47" height="34" viewBox="0 0 47 34" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<g clip-path="url(#clip0_3864_25420)">
+<path d="M38.1908 34H8.69598C8.34457 33.933 7.99316 33.872 7.64174
33.7928C6.63515 33.5613 5.70004 33.1591 4.80661 32.6412C3.79407 32.0502 2.94234
31.2642 2.19782 30.3685C1.60816 29.6556 1.1138 28.8573 0.792168
27.9799C0.547966 27.3158 0.375238 26.6272 0.178685 25.9509C0.101255 25.6767
0.0595615 25.3903 0 25.11C0 19.6627 0 14.2154 0 8.7681C0.0595615 8.51828
0.125079 8.26846 0.172728 8.01864C0.54201 6.05054 1.4533 4.381 2.82322
2.9491C3.75238 1.98029 4.83044 1.2491 6.04549 0.72509C7.29033 [...]
+<path d="M27.7915 15.2634C28.3335 15.5437 28.8755 15.8179 29.4115
16.0981C29.8463 16.3236 30.2811 16.5429 30.71 16.7806C30.7874 16.8232 30.841
16.9207 30.9065 16.9938C30.9065 17.0182 30.9065 17.0426 30.9065 17.0609C30.9482
17.5361 30.6087 17.6946 30.2692 17.8591C29.5009 18.2308 28.7325 18.6085 27.9642
18.9802C26.5883 19.6444 25.2065 20.3024 23.8306 20.9788C22.6036 21.582 21.3826
22.1974 20.1557 22.8006C19.3456 23.1967 18.5237 23.5867 17.7077 23.9766C17.4456
24.1046 17.0823 23.873 17.0466 [...]
+</g>
+<defs>
+<clipPath id="clip0_3864_25420">
+<rect width="47" height="34" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/youtube_default.svg
b/public/static/images/youtube_default.svg
new file mode 100644
index 00000000..cc081b2b
--- /dev/null
+++ b/public/static/images/youtube_default.svg
@@ -0,0 +1,3 @@
+<svg width="41" height="27" viewBox="0 0 41 27" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<path d="M33.3078 27H7.58411C7.27763 26.9468 6.97115 26.8984 6.66467
26.8355C5.78678 26.6516 4.97123 26.3323 4.19204 25.921C3.30896 25.4516 2.56613
24.8274 1.91681 24.1161C1.40254 23.55 0.97139 22.9161 0.690882 22.2194C0.477903
21.6919 0.32726 21.1452 0.155838 20.6081C0.0883082 20.3903 0.051946 20.1629 0
19.9403C0 15.6145 0 11.2887 0 6.9629C0.051946 6.76452 0.109087 6.56613 0.150643
6.36774C0.472708 4.80484 1.26748 3.47903 2.46224 2.34194C3.2726 1.57258 4.21282
0.991936 5.27252 0.575806C [...]
+</svg>
diff --git a/public/static/images/youtube_hero.png
b/public/static/images/youtube_hero.png
new file mode 100644
index 00000000..da2f6b9f
Binary files /dev/null and b/public/static/images/youtube_hero.png differ
diff --git a/public/static/images/youtube_red.svg
b/public/static/images/youtube_red.svg
new file mode 100644
index 00000000..0d64735f
--- /dev/null
+++ b/public/static/images/youtube_red.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="20" viewBox="0 0 25 20" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<path d="M20.3008 19.9141H4.62246C4.43566 19.8765 4.24886 19.8423 4.06206
19.7979C3.527 19.668 3.02993 19.4424 2.55502 19.1519C2.01678 18.8204 1.56404
18.3795 1.16828 17.8771C0.854838 17.4772 0.592055 17.0295 0.421087
16.5373C0.291278 16.1648 0.199462 15.7786 0.094982 15.3992C0.0538231 15.2454
0.0316607 15.0848 0 14.9276C0 11.8721 0 8.81657 0 5.76107C0.0316607 5.62094
0.0664874 5.48081 0.0918159 5.34069C0.288112 4.23674 0.77252 3.30027 1.50072
2.49709C1.99462 1.95367 2.56768 1.54353 3.21 [...]
+<path d="M14.773 9.40442C15.0611 9.56164 15.3492 9.71544 15.6342
9.87266C15.8653 9.99911 16.0964 10.1222 16.3244 10.2554C16.3655 10.2794 16.394
10.3341 16.4288 10.3751C16.4288 10.3887 16.4288 10.4024 16.4288 10.4127C16.451
10.6793 16.2705 10.7681 16.0901 10.8604C15.6817 11.0689 15.2732 11.2808 14.8648
11.4893C14.1334 11.8618 13.3989 12.2309 12.6676 12.6103C12.0153 12.9487 11.3663
13.2939 10.7141 13.6322C10.2835 13.8544 9.84659 14.0731 9.41284 14.2918C9.27353
14.3636 9.0804 14.2337 9.0614 [...]
+</svg>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
