Skip to content

Commit 0e8b5ea

Browse files
wuchongwuchong
authored
[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.
1 parent c7728d3 commit 0e8b5ea

File tree

8 files changed

+133
-3
lines changed

8 files changed

+133
-3
lines changed

‎website/.htaccess‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
11
# CSP permissions for fluss.apache.org - Additional allowances to be coordinated with privacy team
2+
# See the CSP request mail for allowing Fluss project to use Algolia, YouTube and Google Calendar:
3+
# https://lists.apache.org/thread/xt0ggzc7f4dj8g91b92w4tk5g8cdslwd
4+
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"

website/community/welcome.md renamed to website/community/welcome.mdx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,12 @@ Access Resources: [Community Sync Docs](https://docs.google.com/document/d/18b7G
4545

4646
Google Calendar invite: [Community Events](https://calendar.google.com/calendar/u/0?cid=MjUzMjY2OTFkY2FmNmRiYjk5MzllZmUxNDliYjg1ZjI4ODhhNjU0YzY5Mzc2M2IyZDQ1NzIwNTAyZGU1MjZmOEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t)
4747

48-
Community calls are a great opportunity to discuss the project roadmap, implementation details, and connect with other contributors.
48+
Community calls are a great opportunity to discuss the project roadmap, implementation details, and connect with other contributors.
49+
50+
:::info
51+
The **Google Calendar** below uses **Greenwich Mean Time (GMT+0)**!
52+
:::
53+
54+
import GoogleCalendarConsent from '@site/src/components/GoogleCalendarConsent';
55+
56+
<GoogleCalendarConsent calendarId="25326691dcaf6dbb9939efe149bb85f2888a654c693763b2d45720502de526f8" />

website/learn/videos.md renamed to website/learn/videos.mdx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,30 @@
11
---
22
title: Videos
3+
description: Video tutorials and demos about Apache Fluss streaming storage.
34
---
45

6+
import YouTubeConsent from '@site/src/components/YouTubeConsent';
7+
58
# Videos
69

710
Video tutorials and demos about Apache Fluss streaming storage.
811

912
---
1013

11-
### [Getting Started with Apache Flink and Fluss](https://www.youtube.com/watch?v=_qSihYk-pOQ)
14+
### Getting Started with Apache Flink and Fluss
1215

1316
**Giannis Polyzos** • Apr 2025
1417

1518
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
1619

20+
<YouTubeConsent videoId="_qSihYk-pOQ" title="Getting Started with Fluss and Flink" />
21+
1722
---
1823

19-
### [Optimizing Streaming Analytics with Apache Flink and Fluss](https://www.youtube.com/watch?v=GKsE_EUR9yU)
24+
### Optimizing Streaming Analytics with Apache Flink and Fluss
2025

2126
**Giannis Polyzos** • Mar 2025
2227

2328
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.
2429

30+
<YouTubeConsent videoId="GKsE_EUR9yU" title="Optimizing Streaming Analytics with Apache Flink and Fluss" />

‎website/src/components/GoogleCalendarConsent/index.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one or more
3+
* contributor license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright ownership.
5+
* The ASF licenses this file to You under the Apache License, Version 2.0
6+
* (the "License"); you may not use this file except in compliance with
7+
* the License. You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
import React, {useState} from 'react';
19+
20+
export default function GoogleCalendarConsent({calendarId}) {
21+
const [loaded, setLoaded] = useState(false);
22+
23+
const loadCalendar = () => {
24+
setLoaded(true);
25+
};
26+
27+
return (
28+
<div className="calendar-consent-container">
29+
{!loaded ? (
30+
<div
31+
onClick={loadCalendar}
32+
style={{
33+
textAlign: "center",
34+
width: '800px',
35+
height: '600px',
36+
cursor: 'pointer',
37+
backgroundImage: `url("/img/placeholder_calendar.png")`,
38+
backgroundSize: 'cover',
39+
}}
40+
>
41+
</div>
42+
) : (
43+
<div className="calendar-iframe-wrapper">
44+
<iframe
45+
width="800"
46+
height="600"
47+
src={`https://calendar.google.com/calendar/embed?src=${calendarId}%40group.calendar.google.com&ctz=Greenwich`}
48+
frameBorder="0"
49+
scrolling="no"
50+
/>
51+
</div>
52+
)}
53+
</div>
54+
);
55+
}

‎website/src/components/YouTubeConsent/index.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one or more
3+
* contributor license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright ownership.
5+
* The ASF licenses this file to You under the Apache License, Version 2.0
6+
* (the "License"); you may not use this file except in compliance with
7+
* the License. You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
import React, { useState } from 'react';
19+
20+
export default function YouTubeConsent({ videoId, title }) {
21+
const [loaded, setLoaded] = useState(false);
22+
23+
const loadYouTube = () => {
24+
setLoaded(true);
25+
};
26+
27+
return (
28+
<div className="youtube-consent-container">
29+
{!loaded ? (
30+
<div
31+
onClick={loadYouTube}
32+
title="Click to Load YouTube Video"
33+
style={{
34+
textAlign: "center",
35+
width: '560px',
36+
height: '315px',
37+
cursor: 'pointer',
38+
backgroundImage: `url("/img/videos/placeholder_${videoId}.jpg")`,
39+
backgroundSize: 'cover',
40+
}}
41+
>
42+
</div>
43+
) : (
44+
<div className="youtube-iframe-wrapper">
45+
<iframe
46+
width="560"
47+
height="315"
48+
src={`https://www.youtube-nocookie.com/embed/${videoId}`}
49+
title={title}
50+
frameBorder="0"
51+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
52+
allowFullScreen
53+
/>
54+
</div>
55+
)}
56+
</div>
57+
);
58+
}

‎website/static/img/placeholder_calendar.png‎

1.07 MB
Loading

‎website/static/img/videos/placeholder_GKsE_EUR9yU.jpg‎

109 KB
Loading

‎website/static/img/videos/placeholder__qSihYk-pOQ.jpg‎

117 KB
Loading

0 commit comments

Comments
 (0)