mirror of
https://github.com/apache/superset.git
synced 2026-04-07 10:31:50 +00:00
docs(community): redesign community page with card grid layout (#37536)
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Evan Rusackas
@@ -18,20 +18,24 @@
|
||||
*/
|
||||
import { useState } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { List } from 'antd';
|
||||
import Layout from '@theme/Layout';
|
||||
import { mq } from '../utils';
|
||||
import SectionHeader from '../components/SectionHeader';
|
||||
import BlurredSection from '../components/BlurredSection';
|
||||
|
||||
const communityLinks = [
|
||||
interface CommunityLink {
|
||||
url: string;
|
||||
title: string;
|
||||
description: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
const communityLinks: CommunityLink[] = [
|
||||
{
|
||||
url: 'http://bit.ly/join-superset-slack',
|
||||
title: 'Slack',
|
||||
description: 'Interact with other Superset users and community members.',
|
||||
image: 'slack-symbol.jpg',
|
||||
ariaLabel:
|
||||
'Interact with other Superset users and community members on Slack',
|
||||
},
|
||||
{
|
||||
url: 'https://github.com/apache/superset',
|
||||
@@ -39,96 +43,148 @@ const communityLinks = [
|
||||
description:
|
||||
'Create tickets to report issues, report bugs, and suggest new features.',
|
||||
image: 'github-symbol.jpg',
|
||||
ariaLabel:
|
||||
'Create tickets to report issues, report bugs, and suggest new features on Superset GitHub repo',
|
||||
},
|
||||
{
|
||||
url: 'https://lists.apache.org/list.html?dev@superset.apache.org',
|
||||
title: 'dev@ Mailing List',
|
||||
description:
|
||||
'Participate in conversations with committers and contributors.',
|
||||
'Participate in conversations with committers and contributors. Subscribe by emailing dev-subscribe@superset.apache.org.',
|
||||
image: 'email-symbol.png',
|
||||
ariaLabel:
|
||||
'Participate in conversations with committers and contributors on Superset mailing list',
|
||||
},
|
||||
{
|
||||
url: 'https://stackoverflow.com/questions/tagged/apache-superset',
|
||||
title: 'Stack Overflow',
|
||||
description: 'Our growing knowledge base.',
|
||||
image: 'stackoverflow-symbol.jpg',
|
||||
ariaLabel: 'See Superset issues on Stack Overflow',
|
||||
},
|
||||
{
|
||||
url: 'https://www.meetup.com/Global-Apache-Superset-Community-Meetup/',
|
||||
title: 'Superset Meetup Group',
|
||||
description:
|
||||
'Join our monthly virtual meetups and register for any upcoming events.',
|
||||
image: 'coffee-symbol.png',
|
||||
ariaLabel:
|
||||
'Join our monthly virtual meetups and register for any upcoming events on Meetup',
|
||||
},
|
||||
{
|
||||
url: 'https://github.com/apache/superset/blob/master/RESOURCES/INTHEWILD.md',
|
||||
url: 'https://superset.apache.org/inTheWild',
|
||||
title: 'Organizations',
|
||||
description:
|
||||
'A list of some of the organizations using Superset in production.',
|
||||
image: 'note-symbol.png',
|
||||
ariaLabel: 'See a list of the organizations using Superset in production',
|
||||
image: 'globe-symbol.svg',
|
||||
},
|
||||
{
|
||||
url: 'https://github.com/apache-superset/awesome-apache-superset',
|
||||
url: 'https://superset.apache.org/developer_portal/contributing/overview',
|
||||
title: 'Contributors Guide',
|
||||
description:
|
||||
'Interested in contributing? Learn how to contribute and best practices.',
|
||||
image: 'writing-symbol.png',
|
||||
ariaLabel: 'Learn how to contribute and best practices on Superset GitHub',
|
||||
},
|
||||
];
|
||||
|
||||
const StyledJoinCommunity = styled('section')`
|
||||
background-color: var(--ifm-background-color);
|
||||
border-bottom: 1px solid var(--ifm-border-color);
|
||||
.list {
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px 20px 35px;
|
||||
interface SocialLink {
|
||||
url: string;
|
||||
title: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
const socialLinks: SocialLink[] = [
|
||||
{
|
||||
url: 'https://x.com/ApacheSuperset',
|
||||
title: 'X (Twitter)',
|
||||
image: 'x-symbol.svg',
|
||||
},
|
||||
{
|
||||
url: 'https://www.linkedin.com/company/apache-superset/',
|
||||
title: 'LinkedIn',
|
||||
image: 'linkedin-symbol.svg',
|
||||
},
|
||||
{
|
||||
url: 'https://bsky.app/profile/apachesuperset.bsky.social',
|
||||
title: 'Bluesky',
|
||||
image: 'bluesky-symbol.svg',
|
||||
},
|
||||
];
|
||||
|
||||
const StyledCardGrid = styled('div')`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 30px 20px;
|
||||
${mq[2]} {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.item {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
${mq[1]} {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--ifm-border-color);
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
&:hover {
|
||||
border-color: var(--ifm-color-primary);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
width: 40px;
|
||||
margin-top: 5px;
|
||||
${mq[1]} {
|
||||
width: 40px;
|
||||
margin-top: 0;
|
||||
}
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.card-body {
|
||||
min-width: 0;
|
||||
}
|
||||
.title {
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--ifm-font-base-color);
|
||||
${mq[1]} {
|
||||
font-size: 23px;
|
||||
line-height: 26px;
|
||||
}
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.description {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: var(--ifm-font-base-color);
|
||||
margin-top: -8px;
|
||||
margin-bottom: 23px;
|
||||
${mq[1]} {
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
color: var(--ifm-primary-text);
|
||||
margin-bottom: 35px;
|
||||
margin-top: 0;
|
||||
line-height: 1.4;
|
||||
color: var(--ifm-secondary-text);
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSocialGrid = styled('div')`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 30px 20px;
|
||||
${mq[1]} {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 300px;
|
||||
}
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
border: 1px solid var(--ifm-border-color);
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
&:hover {
|
||||
border-color: var(--ifm-color-primary);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--ifm-font-base-color);
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledCalendarIframe = styled('iframe')`
|
||||
@@ -169,10 +225,10 @@ const FinePrint = styled('div')`
|
||||
`;
|
||||
|
||||
const Community = () => {
|
||||
const [showCalendar, setShowCalendar] = useState(false); // State to control calendar visibility
|
||||
const [showCalendar, setShowCalendar] = useState(false);
|
||||
|
||||
const toggleCalendar = () => {
|
||||
setShowCalendar(!showCalendar); // Toggle calendar visibility
|
||||
setShowCalendar(!showCalendar);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -188,39 +244,42 @@ const Community = () => {
|
||||
subtitle="Get involved in our welcoming, fast growing community!"
|
||||
/>
|
||||
</BlurredSection>
|
||||
<StyledJoinCommunity>
|
||||
<List
|
||||
className="list"
|
||||
itemLayout="horizontal"
|
||||
dataSource={communityLinks}
|
||||
renderItem={({ url, title, description, image, ariaLabel }) => (
|
||||
<List.Item className="item">
|
||||
<List.Item.Meta
|
||||
avatar={
|
||||
<a
|
||||
className="title"
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<img className="icon" src={`/img/community/${image}`} />
|
||||
</a>
|
||||
}
|
||||
title={
|
||||
<a href={url} target="_blank" rel="noreferrer">
|
||||
<p className="title" style={{ marginBottom: 0 }}>
|
||||
{title}
|
||||
</p>
|
||||
</a>
|
||||
}
|
||||
description={<p className="description">{description}</p>}
|
||||
aria-label="Community link"
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</StyledJoinCommunity>
|
||||
<section>
|
||||
<StyledCardGrid>
|
||||
{communityLinks.map(({ url, title, description, image }) => (
|
||||
<a
|
||||
key={title}
|
||||
className="card"
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img className="icon" src={`/img/community/${image}`} alt={title} />
|
||||
<div className="card-body">
|
||||
<div className="title">{title}</div>
|
||||
<div className="description">{description}</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</StyledCardGrid>
|
||||
</section>
|
||||
<BlurredSection>
|
||||
<SectionHeader level="h2" title="Follow Us" />
|
||||
<StyledSocialGrid>
|
||||
{socialLinks.map(({ url, title, image }) => (
|
||||
<a
|
||||
key={title}
|
||||
className="card"
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img className="icon" src={`/img/community/${image}`} alt={title} />
|
||||
<span className="title">{title}</span>
|
||||
</a>
|
||||
))}
|
||||
</StyledSocialGrid>
|
||||
</BlurredSection>
|
||||
<BlurredSection>
|
||||
<SectionHeader
|
||||
level="h2"
|
||||
|
||||
21
docs/static/img/community/bluesky-symbol.svg
vendored
Normal file
21
docs/static/img/community/bluesky-symbol.svg
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 568 501" width="40" height="40" fill="#1185FE">
|
||||
<path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.889-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
23
docs/static/img/community/globe-symbol.svg
vendored
Normal file
23
docs/static/img/community/globe-symbol.svg
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#484848" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<line x1="2" y1="12" x2="22" y2="12"/>
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
21
docs/static/img/community/linkedin-symbol.svg
vendored
Normal file
21
docs/static/img/community/linkedin-symbol.svg
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40" fill="#0A66C2">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
21
docs/static/img/community/x-symbol.svg
vendored
Normal file
21
docs/static/img/community/x-symbol.svg
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40" fill="#484848">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
Reference in New Issue
Block a user