Skip to content

Commit

Permalink
Feature: Team Page
Browse files Browse the repository at this point in the history
Because:
* TheOdinProject/top-meta#3
* Replaces the [hall of fame on the contributing page](http://theodinproject.com/contributing)

This commit:
* Adds a team locales file where team member details will live
* Divides the page into the team role structure we have within TOP.
* Adds an alumni section for former team members.
* Adds a smooth scroll anchor links for easier navigation between roles.
  • Loading branch information
KevinMulhern committed Sep 14, 2023
1 parent 1dc9422 commit 097b219
Show file tree
Hide file tree
Showing 23 changed files with 647 additions and 4 deletions.
3 changes: 3 additions & 0 deletions app/assets/images/socials/linkedin.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions app/assets/images/socials/website.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion app/assets/stylesheets/stylesheets/typography.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

@layer components {
.page-heading-title {
@apply text-3xl text-gray-800 font-semibold pb-10 text-center mx-auto dark:text-gray-300;
@apply text-3xl text-gray-800 font-semibold pb-10 text-center mx-auto dark:text-gray-200;
}

.anchor-link {
Expand Down
6 changes: 6 additions & 0 deletions app/components/team/former_member_component.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<li>
<%= image_tag team_member.image, alt: "#{team_member.name} avatar", class: 'mx-auto h-14 w-14 rounded-full' %>
<%= link_to team_member.url, class: 'text-gray-900 hover:underline hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-200' do %>
<h3 class="mt-4 text-sm font-semibold leading-7 tracking-tight"><%= team_member.name %></h3>
<% end %>
</li>
13 changes: 13 additions & 0 deletions app/components/team/former_member_component.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
module Team
class FormerMemberComponent < ApplicationComponent
FormerTeamMember = Data.define(:name, :image, :url)

def initialize(team_member)
@team_member = FormerTeamMember.new(**team_member)
end

private

attr_reader :team_member
end
end
21 changes: 21 additions & 0 deletions app/components/team/member_component.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<li class="rounded-2xl bg-white shadow dark:bg-gray-800 p-4 flex flex-col">
<%= image_tag team_member.image, alt: '', class: 'mx-auto h-20 w-20 rounded-full' %>

<div class="text-center pb-6">
<h3 class="mt-6 text-base font-semibold leading-7 tracking-tight text-gray-900 dark:text-white"><%= team_member.name %></h3>
<p class="text-sm leading-6 text-gray-500 dark:text-gray-400">Joined <%= team_member.joined %> &centerdot; <%= team_member.location %></p>
</div>

<% if team_member.socials.any? %>
<ul role="list" class="mt-auto flex justify-center gap-x-6">
<% team_member.socials.each do |social| %>
<li>
<%= link_to social.url, class: 'text-gray-500 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-100' do %>
<span class="sr-only"><%= team_member.name %> on <%= social.name %></span>
<%= inline_svg_tag "socials/#{social.name}.svg", class: 'h-5 w-5', aria: true %>
<% end %>
</li>
<% end %>
</ul>
<% end %>
</li>
20 changes: 20 additions & 0 deletions app/components/team/member_component.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
module Team
class MemberComponent < ApplicationComponent
Social = Data.define(:name, :url)

TeamMember = Data.define(:name, :image, :location, :joined, :socials) do
def initialize(**args)
socials = args.fetch(:socials, []).map { |social| Social.new(**social) }
super(**args.merge(socials:))
end
end

def initialize(team_member)
@team_member = TeamMember.new(**team_member)
end

private

attr_reader :team_member
end
end
14 changes: 14 additions & 0 deletions app/components/team/navigation_component.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<div>
<div class="sm:hidden">
<label for="tabs" class="sr-only">Select a tab</label>
<%= select_tag nil, options_for_select(roles.map(&:values)), class: 'block mx-auto rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-gray-100 dark:focus:border-gray-700 focus:outline-none focus:ring-gray-400 dark:focus:ring-gray-700 sm:text-sm dark:text-gray-300 w-2/3 dark:bg-gray-800 dark:border-gray-700', data: { controller: 'scroll-to'} %>
</div>

<div class="hidden sm:block">
<nav class="flex justify-center space-x-4" aria-label="Tabs">
<% roles.each do |role| %>
<%= link_to role[:name], role[:url], class: 'text-gray-600 hover:text-gray-800 hover:bg-gray-200 rounded-md px-3 py-2 font-medium dark:text-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-800', data: { controller: 'scroll-to'} %>
<% end %>
</nav>
</div>
</div>
11 changes: 11 additions & 0 deletions app/components/team/navigation_component.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
module Team
class NavigationComponent < ApplicationComponent
def initialize(roles:)
@roles = roles
end

private

attr_reader :roles
end
end
2 changes: 2 additions & 0 deletions app/controllers/static_pages_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ def about; end

def faq; end

def team; end

def terms_of_use; end

def privacy_policy; end
Expand Down
2 changes: 1 addition & 1 deletion app/helpers/button_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ def curriculum_button
end

def contribute_button
link_to 'Contribute', contributing_path, class: 'button button--primary'
link_to 'Learn how to contribute', contributing_path, class: 'button button--primary'
end

def chat_button
Expand Down
25 changes: 25 additions & 0 deletions app/javascript/controllers/scroll_to_controller.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { Controller } from '@hotwired/stimulus';

export default class ScrollToController extends Controller {
static values = {
offset: { type: Number, default: 25 },
behavior: { type: String, default: 'smooth' },
};

connect() {
this.element.dataset.action = 'scroll-to#scrollTo';
}

scrollTo(event) {
event.preventDefault();

const id = this.element.hash || this.element.value;
const targetElement = document.querySelector(id);
const targetElementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;

window.scrollTo({
top: targetElementPosition - this.offsetValue,
behavior: this.behaviorValue,
});
}
}
34 changes: 34 additions & 0 deletions app/views/static_pages/team.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<%= title('Team') %>

<div class="page-container">
<div>
<h1 class="page-heading-title pb-4">Meet The Team</h1>
<p class="pb-4 text-center text-sm sm:text-base mx-auto text-gray-500 dark:text-gray-400">
The Odin project is run by a group of dedicated volunteers from around the world.
</p>
<%= render Team::NavigationComponent.new(
roles: [
{ name: 'Core', url: '#core' },
{ name: 'Maintainers', url: '#maintainers' },
{ name: 'Moderators', url: '#moderators' },
{ name: 'Alumni', url: '#alumni' }
]
) %>
</div>

<div class="max-w-7xl mx-auto pt-10 px-4 sm:pt-12 sm:px-6 lg:px-8">
<div class="mt-10 space-y-16">
<%= render 'static_pages/team/role', role: 'core', title: 'Core' %>
<%= render 'static_pages/team/role', role: 'maintainers', title: 'Maintainers' %>
<%= render 'static_pages/team/role', role: 'moderators', title: 'Moderators' %>
<%= render 'static_pages/team/alumni', role: 'alumni' %>
</div>

<p class="text-center">
<%= render 'shared/bottom_cta',
button: contribute_button,
heading: 'To all our contributors ❤️',
sub_heading: "We've had thousands of contributors outside of the official teams. To them, we extend a special thanks. Each and every contribution has played an important role in improving The Odin Project for the benefit of all learners." %>
</p>
</div>
</div>
12 changes: 12 additions & 0 deletions app/views/static_pages/team/_alumni.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<div class="space-y-10" id="alumni">
<div>
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white pb-2">Alumni</h2>
<p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base"><%= t("team_members.#{role}.description") %> </p>
</div>

<ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-3 gap-x-8 gap-y-8 text-center sm:grid-cols-4 md:grid-cols-6 lg:mx-0 lg:max-w-none lg:grid-cols-6 xl:grid-cols-8">
<% t("team_members.#{role}.members").each do |team_member| %>
<%= render Team::FormerMemberComponent.new(team_member) %>
<% end %>
</ul>
</div>
12 changes: 12 additions & 0 deletions app/views/static_pages/team/_role.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<div class="space-y-10" id="<%= role %>">
<div>
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white pb-2"><%= title %></h2>
<p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base"><%= t("team_members.#{role}.description") %></p>
</div>

<ul role="list" class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-3 lg:mx-0 lg:max-w-none lg:grid-cols-4 xl:grid-cols-5 lg:gap-8">
<% t("team_members.#{role}.members").each do |team_member| %>
<%= render Team::MemberComponent.new(team_member) %>
<% end %>
</ul>
</div>
Loading

0 comments on commit 097b219

Please sign in to comment.