This is an automated email from the ASF dual-hosted git repository.
jark pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/fluss.git
The following commit(s) were added to refs/heads/main by this push:
new 0e8b5ea8 [webiste] Allow YouTube, Google Calendar and Algolia
Resources on Fluss Website (#1453)
0e8b5ea8 is described below
commit 0e8b5ea8ec92b7adbc9a52fcde5f435b266b9742
Author: Jark Wu <[email protected]>
AuthorDate: Sun Aug 3 20:33:30 2025 +0800
[webiste] Allow YouTube, Google Calendar and Algolia Resources on Fluss
Website (#1453)
The external resources are allowed by ASF privacy for Fluss website, but
they should only activate if the user actively wants to use them. We arrange
this by showing a placeholder image first and loading the map when the user
clicks on the image. Make it clear that users will load a YouTube video or
Google Calendar with their click.
---
website/.htaccess | 3 ++
website/community/{welcome.md => welcome.mdx} | 10 +++-
website/learn/{videos.md => videos.mdx} | 10 +++-
.../src/components/GoogleCalendarConsent/index.tsx | 55 +++++++++++++++++++
website/src/components/YouTubeConsent/index.tsx | 58 +++++++++++++++++++++
website/static/img/placeholder_calendar.png | Bin 0 -> 1120990 bytes
.../static/img/videos/placeholder_GKsE_EUR9yU.jpg | Bin 0 -> 111278 bytes
.../static/img/videos/placeholder__qSihYk-pOQ.jpg | Bin 0 -> 119615 bytes
8 files changed, 133 insertions(+), 3 deletions(-)
diff --git a/website/.htaccess b/website/.htaccess
index 23dc43d9..ec6ea7aa 100644
--- a/website/.htaccess
+++ b/website/.htaccess
@@ -1 +1,4 @@
# CSP permissions for fluss.apache.org - Additional allowances to be
coordinated with privacy team
+# See the CSP request mail for allowing Fluss project to use Algolia, YouTube
and Google Calendar:
+# https://lists.apache.org/thread/xt0ggzc7f4dj8g91b92w4tk5g8cdslwd
+SetEnv CSP_PROJECT_DOMAINS "https://www.youtube-nocookie.com
https://www.youtube.com https://*.algolia.net/ https://*.algolianet.com/
https://*.algolia.io/ https://calendar.google.com";
\ No newline at end of file
diff --git a/website/community/welcome.md b/website/community/welcome.mdx
similarity index 89%
rename from website/community/welcome.md
rename to website/community/welcome.mdx
index f0b28feb..5aa33bce 100644
--- a/website/community/welcome.md
+++ b/website/community/welcome.mdx
@@ -45,4 +45,12 @@ Access Resources: [Community Sync
Docs](https://docs.google.com/document/d/18b7G
Google Calendar invite: [Community
Events](https://calendar.google.com/calendar/u/0?cid=MjUzMjY2OTFkY2FmNmRiYjk5MzllZmUxNDliYjg1ZjI4ODhhNjU0YzY5Mzc2M2IyZDQ1NzIwNTAyZGU1MjZmOEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t)
-Community calls are a great opportunity to discuss the project roadmap,
implementation details, and connect with other contributors.
\ No newline at end of file
+Community calls are a great opportunity to discuss the project roadmap,
implementation details, and connect with other contributors.
+
+:::info
+The **Google Calendar** below uses **Greenwich Mean Time (GMT+0)**!
+:::
+
+import GoogleCalendarConsent from '@site/src/components/GoogleCalendarConsent';
+
+<GoogleCalendarConsent
calendarId="25326691dcaf6dbb9939efe149bb85f2888a654c693763b2d45720502de526f8" />
diff --git a/website/learn/videos.md b/website/learn/videos.mdx
similarity index 57%
rename from website/learn/videos.md
rename to website/learn/videos.mdx
index 5d81cd78..c2cc2e3e 100644
--- a/website/learn/videos.md
+++ b/website/learn/videos.mdx
@@ -1,24 +1,30 @@
---
title: Videos
+description: Video tutorials and demos about Apache Fluss streaming storage.
---
+import YouTubeConsent from '@site/src/components/YouTubeConsent';
+
# Videos
Video tutorials and demos about Apache Fluss streaming storage.
---
-### [Getting Started with Apache Flink and
Fluss](https://www.youtube.com/watch?v=_qSihYk-pOQ)
+### Getting Started with Apache Flink and Fluss
**Giannis Polyzos** • Apr 2025
Watch as he shares an example of building an end-to-end real-time application
using gameplay events, including generating game data and computing a live
top-3 leaderboard on a real-time dashboard using Fluss
+<YouTubeConsent videoId="_qSihYk-pOQ" title="Getting Started with Fluss and
Flink" />
+
---
-### [Optimizing Streaming Analytics with Apache Flink and
Fluss](https://www.youtube.com/watch?v=GKsE_EUR9yU)
+### Optimizing Streaming Analytics with Apache Flink and Fluss
**Giannis Polyzos** • Mar 2025
Discover how Apache Flink®, the industry-leading stream processing engine,
paired with Fluss, a high-performance transport and storage layer, creates a
powerful, cost-effective, and scalable solution for modern data streaming.
+<YouTubeConsent videoId="GKsE_EUR9yU" title="Optimizing Streaming Analytics
with Apache Flink and Fluss" />
diff --git a/website/src/components/GoogleCalendarConsent/index.tsx
b/website/src/components/GoogleCalendarConsent/index.tsx
new file mode 100644
index 00000000..ba01f3ca
--- /dev/null
+++ b/website/src/components/GoogleCalendarConsent/index.tsx
@@ -0,0 +1,55 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, {useState} from 'react';
+
+export default function GoogleCalendarConsent({calendarId}) {
+ const [loaded, setLoaded] = useState(false);
+
+ const loadCalendar = () => {
+ setLoaded(true);
+ };
+
+ return (
+ <div className="calendar-consent-container">
+ {!loaded ? (
+ <div
+ onClick={loadCalendar}
+ style={{
+ textAlign: "center",
+ width: '800px',
+ height: '600px',
+ cursor: 'pointer',
+ backgroundImage:
`url("/img/placeholder_calendar.png")`,
+ backgroundSize: 'cover',
+ }}
+ >
+ </div>
+ ) : (
+ <div className="calendar-iframe-wrapper">
+ <iframe
+ width="800"
+ height="600"
+
src={`https://calendar.google.com/calendar/embed?src=${calendarId}%40group.calendar.google.com&ctz=Greenwich`}
+ frameBorder="0"
+ scrolling="no"
+ />
+ </div>
+ )}
+ </div>
+ );
+}
diff --git a/website/src/components/YouTubeConsent/index.tsx
b/website/src/components/YouTubeConsent/index.tsx
new file mode 100644
index 00000000..cd953ebe
--- /dev/null
+++ b/website/src/components/YouTubeConsent/index.tsx
@@ -0,0 +1,58 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+
+export default function YouTubeConsent({ videoId, title }) {
+ const [loaded, setLoaded] = useState(false);
+
+ const loadYouTube = () => {
+ setLoaded(true);
+ };
+
+ return (
+ <div className="youtube-consent-container">
+ {!loaded ? (
+ <div
+ onClick={loadYouTube}
+ title="Click to Load YouTube Video"
+ style={{
+ textAlign: "center",
+ width: '560px',
+ height: '315px',
+ cursor: 'pointer',
+ backgroundImage:
`url("/img/videos/placeholder_${videoId}.jpg")`,
+ backgroundSize: 'cover',
+ }}
+ >
+ </div>
+ ) : (
+ <div className="youtube-iframe-wrapper">
+ <iframe
+ width="560"
+ height="315"
+
src={`https://www.youtube-nocookie.com/embed/${videoId}`}
+ title={title}
+ frameBorder="0"
+ allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
+ allowFullScreen
+ />
+ </div>
+ )}
+ </div>
+ );
+}
\ No newline at end of file
diff --git a/website/static/img/placeholder_calendar.png
b/website/static/img/placeholder_calendar.png
new file mode 100644
index 00000000..ea18fffb
Binary files /dev/null and b/website/static/img/placeholder_calendar.png differ
diff --git a/website/static/img/videos/placeholder_GKsE_EUR9yU.jpg
b/website/static/img/videos/placeholder_GKsE_EUR9yU.jpg
new file mode 100644
index 00000000..0ab2ebd9
Binary files /dev/null and
b/website/static/img/videos/placeholder_GKsE_EUR9yU.jpg differ
diff --git a/website/static/img/videos/placeholder__qSihYk-pOQ.jpg
b/website/static/img/videos/placeholder__qSihYk-pOQ.jpg
new file mode 100644
index 00000000..7565bf24
Binary files /dev/null and
b/website/static/img/videos/placeholder__qSihYk-pOQ.jpg differ
