Skip to content

Improve UI for community page in Harbor website #634

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Improve UI for community page in Harbor website #634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
baf1733
Improve UI for community page in Harbor website
DeshDeepakKant Feb 22, 2025
ef03057
refactor: convert community page styles to sass module
DeshDeepakKant Feb 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions assets/sass/community-info.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
.meeting-time
font-size: 1rem
background: #f5f5f5
padding: 0.5rem 1rem
border-radius: 4px
cursor: pointer
transition: all 0.3s ease
border: 1px solid transparent
display: inline-block

&:hover
background: #ffffff
border-color: #e0e0e0
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
transform: translateY(-2px)
color: #2563eb

.community-container
width: 100%
padding: 2rem
box-sizing: border-box

.top-row
display: grid
grid-template-columns: 1fr 1fr
gap: 2rem
margin-bottom: 2rem
width: 100%

.card
width: 100%
background: white
border-radius: 8px
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)

h2
padding: 1.5rem
margin: 0
border-bottom: 1px solid #eee

.card-content
padding: 1.5rem
width: 100%

p
width: 100%

.has-margin-right
margin-right: 0.75rem

.button.is-twitter-blue
background-color: #000
color: white
display: inline-flex
align-items: center
gap: 0.75rem
padding: 0.75rem 1.5rem
border-radius: 4px
text-decoration: none

/* Responsive Design
@media (max-width: 768px)
.community-container
padding: 1rem

.top-row
grid-template-columns: 1fr

.card-content p .button.is-twitter-blue
float: none
margin-top: 1rem
display: block
1 change: 1 addition & 0 deletions assets/sass/style.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,3 +121,4 @@ $code-background: $light
@import "admonition"
@import "helpers"
@import "toc"
@import "community-info"
143 changes: 55 additions & 88 deletions layouts/shortcodes/community-info.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,93 +1,60 @@
<div class="columns">

<div class="column">
<h2>
Join the Harbor community!
</h2>

<p class="is-size-5">
Harbor is developed in the open, and is constantly being improved by our <b>users, contributors, and maintainers</b>.
It is because of you that we can bring great software to the community.
<br/>
<br/>
<b>Come join us!</b>
<br/> <br/>
</p>
<a href="https://twitter.com/project_harbor">
<div class="button is-twitter-blue">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
<span class="has-text-white has-text-weight-bold" >
Follow us on Twitter @project_harbor
</span>
</div>
</a>
</div>

<div class="column">
<h2>
Community Meetings
</h2>

<p class="is-size-5">
We have a recurring bi-weekly Harbor community meeting at <code>9PM UTC+8 time zone</code>. We will use this meeting to communicate updates to the project, listen to feedback from the Harbor community, and also collect requirements/use cases for new features.
</p>

<div class="container">
<div class="columns is-variable is-6">
<div class="column">
<h3>
<span class="icon has-text-secondary has-margin-right">
<i class="fas fa-phone"></i>
</span>
<span>
Bi-weekly public community meetings
</span>
</h3>

<p>
Read, comment, or add agenda items on the <a href="https://hackmd.io/@harbor/r14BkYaOa" target="_blank">meeting notes</a> and add our calendar and subscribe at <a href="https://lists.cncf.io/g/harbor-users" target="_blank">our mailing list</a> to get the latest Harbor news, what we're working on, and provide suggestions and feedback.
</p>
<div class="community-container">
<!-- Top Row: Join Community and Meeting Information -->
<div class="top-row">
<!-- Join Community Section -->
<div class="card join-card">
<h2>Join the Harbor community!</h2>
<div class="card-content">
<p class="is-size-5">
Harbor is developed in the open, and is constantly being improved by our
<b>users, contributors, and maintainers</b>.
It is because of you that we can bring great software to the community.
<br /><br />
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
<b>Come join us!</b>
<a href="https://x.com/project_harbor" class="button is-twitter-blue">
<span class="icon">
<i class="fab fa-x-twitter"></i>
</span>
<span class="has-text-white has-text-weight-bold">
Follow us on X @project_harbor
</span>
</a>
</div>
</p>
</div>
</div>

<div class="column">
<h3>
<span class="icon has-text-secondary has-margin-right">
<i class="fab fa-youtube"></i>
</span>
<span>
Catch up with past meetings on YouTube
</span>
</h3>

<p>
All Harbor community meetings are recorded and added to our <a href="https://www.youtube.com/playlist?list=PLgInP-D86bCwTC0DYAa1pgupsQIAWPomv" target="_blank">YouTube playlist</a>.
</p>
</div>
</div>
</div>
</div>
<div class="column">

<div class="container">
<div class="columns is-variable is-6">
<div class="column">
<h3>
<span class="icon has-text-secondary has-margin-right">
<i class="fas fa-phone"></i>
</span>
<span>
Meeting information
</span>
</h3>

<p>
See all the meeting information and add our planned calendar over at <a href="https://github.com/goharbor/community/wiki/Harbor-Community-Meetings" target="_blank">our meeting notes and agenda</a>. All meetings will be recorded and upload to <a href="https://www.youtube.com/playlist?list=PLgInP-D86bCxeNorqeaVlJMv_4x95Le7x" target="_blank">YouTube</a>.
</p>
<!-- Meeting Information Section -->
<div class="card info-card">
<h2>
<span class="icon has-text-secondary has-margin-right">
<i class="fas fa-phone"></i>
</span>
<span>Community Meetings</span>
</h2>
<div class="card-content">
<p class="is-size-5">
We have a recurring bi-weekly Harbor community meeting at
<code class="meeting-time">9PM UTC+8 time zone</code>.
We will use this meeting to communicate updates to the project, listen to feedback from the Harbor community, and also collect requirements/use cases for new features.
</p>
<p class="is-size-5">
See all the meeting information and add our planned calendar over at
<a href="https://github.com/goharbor/community/wiki/Harbor-Community-Meetings" target="_blank">
our meeting notes and agenda
</a>.

Subscribe at
<a href="https://lists.cncf.io/g/harbor-users" target="_blank">our mailing list</a>
to get the latest Harbor news, what we're working on, and provide suggestions and feedback.
All meetings will be recorded and uploaded to
<a href="https://www.youtube.com/playlist?list=PLgInP-D86bCxeNorqeaVlJMv_4x95Le7x" target="_blank">
YouTube
</a>.
</p>
</div>
</div>

</div>
</div>
</div>
</div>