-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Show an In the Code module on the homepage in a /beta route
Add GitHubEvents React component to render recent sfbrigade commits/PRs. Use CSS modules with camelCase option in the Vite config. Use SVG arrows for scroll buttons with a hover state. Clean up GitHubEventCard spacing with nested styles, added PostCSS config for nested classes, and clipped card body tooltips. Add repo name to the bottom of cards, make cards square, limit summary text length, and reorganize CSS and card layout. Refactor GitHubEvents by creating ScrollButton components, adding GitHubEventCard.tsx and ghEventsAPI.ts, and using date-fns for relative time strings. Move scroll arrows below the carousel to prevent accidental card clicks when arrows disappear.
- Loading branch information
1 parent
31f3695
commit c0602a1
Showing
14 changed files
with
856 additions
and
232 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| --- | ||
| import GitHubEvents from "@/components/react/GitHubEvents"; | ||
| import HomeSection from "@/components/HomeSection.astro"; | ||
| --- | ||
|
|
||
| <HomeSection title="In the Code"> | ||
| <GitHubEvents | ||
| org="sfbrigade" | ||
| client:only="react" | ||
| /> | ||
| </HomeSection> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| --- | ||
| interface Props { | ||
| title: string; | ||
| } | ||
| const { title } = Astro.props; | ||
| --- | ||
|
|
||
| <section> | ||
| <h2>{title}</h2> | ||
| <div class="grid"> | ||
| <slot /> | ||
| </div> | ||
| </section> | ||
|
|
||
| <style> | ||
| section:last-of-type { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| h2 { | ||
| margin-bottom: calc(2 * var(--pico-typography-spacing-vertical)); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,12 @@ | ||
| --- | ||
| import { getCollection } from "astro:content"; | ||
| import NewsSummaryItem from "@/components/NewsSummaryItem.astro"; | ||
| import HomeSection from "@/components/HomeSection.astro"; | ||
| interface Props { | ||
| title?: string; | ||
| } | ||
| const { title = "In the News" } = Astro.props; | ||
| const posts = await getCollection("blog"); | ||
| const recentPosts = posts.slice(-3).reverse(); | ||
| --- | ||
|
|
||
| <section> | ||
| <h2>{title}</h2> | ||
| <div class="grid"> | ||
| {recentPosts.map((post) => <NewsSummaryItem post={post} />)} | ||
| </div> | ||
| </section> | ||
|
|
||
| <style> | ||
| section { | ||
| margin-bottom: 0; | ||
| } | ||
| </style> | ||
| <HomeSection title="In the News"> | ||
| {recentPosts.map((post) => <NewsSummaryItem post={post} />)} | ||
| </HomeSection> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| .event-card { | ||
| --sp1: calc(.25 * var(--pico-block-spacing)); | ||
| --sp2: calc(2 * var(--sp1)); | ||
| --sp4: calc(4 * var(--sp1)); | ||
| aspect-ratio: 1; | ||
| width: 25%; | ||
| min-width: 28ch; | ||
| height: 100%; | ||
| text-decoration: none; | ||
| padding: var(--sp2); | ||
| text-align: center; | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-shrink: 0; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| background: #f9f9f9; | ||
| border: 1px solid #ddd; | ||
| border-radius: var(--pico-border-radius); | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| scroll-snap-align: start; | ||
| overflow: hidden; | ||
|
|
||
| img { | ||
| width: calc(3 * var(--sp2)); | ||
| height: calc(3 * var(--sp2)); | ||
| border-radius: 50%; | ||
| margin-bottom: var(--sp1); | ||
| } | ||
|
|
||
| h3 { | ||
| margin: 0 0 var(--sp1) 0; | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| p { | ||
| font-size: smaller; | ||
| color: #555; | ||
| margin: 0; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 3; | ||
| -webkit-box-orient: vertical; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| footer > * { | ||
| font-size: .75rem; | ||
| } | ||
|
|
||
| h4 { | ||
| margin: var(--sp1) 0 0; | ||
| color: #888; | ||
| } | ||
|
|
||
| time { | ||
| color: #999; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { intlFormatDistance } from "date-fns/intlFormatDistance"; | ||
| import type { GitHubEvent } from "@/components/react/ghEventsAPI.ts"; | ||
| import styles from "@/components/react/GitHubEventCard.module.css"; | ||
|
|
||
| const MaxTooltipLength = 350; | ||
|
|
||
| interface GitHubEventProps { | ||
| event: GitHubEvent; | ||
| now?: Date; | ||
| } | ||
|
|
||
| export default function GitHubEventCard({ | ||
| event, | ||
| now = new Date() }: GitHubEventProps) | ||
| { | ||
| const { repoName, link, avatar, handle, message, timestamp } = event; | ||
| const tooltip = message.length > MaxTooltipLength | ||
| ? message.slice(0, MaxTooltipLength) + "..." | ||
| : message; | ||
|
|
||
| return ( | ||
| <a | ||
| className={styles.eventCard} | ||
| key={link} | ||
| href={link} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <header> | ||
| <img src={avatar} alt={`${handle}'s avatar`} /> | ||
| <h3>{handle}</h3> | ||
| </header> | ||
| <p title={tooltip}>{message}</p> | ||
| <footer> | ||
| <h4>{repoName}</h4> | ||
| <time | ||
| dateTime={timestamp} | ||
| title={new Date(timestamp).toLocaleString()} | ||
| > | ||
| {intlFormatDistance(timestamp, now)} | ||
| </time> | ||
| </footer> | ||
| </a> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| .github-events-container { | ||
| position: relative; | ||
| width: 100%; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .event-list { | ||
| display: flex; | ||
| overflow-x: auto; | ||
| gap: var(--pico-grid-column-gap); | ||
| padding-bottom: 16px; | ||
| scroll-snap-type: x mandatory; | ||
| scrollbar-width: none; /* Hide scrollbar for Firefox */ | ||
| -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */ | ||
| } | ||
|
|
||
| .event-list::-webkit-scrollbar { | ||
| display: none; /* Hide scrollbar for Chrome/Safari */ | ||
| } | ||
|
|
||
| .button-container { | ||
| margin-top: .5rem; | ||
| width: 100%; | ||
| height: 2rem; | ||
| position: relative; | ||
| } | ||
|
|
||
| .scroll-button { | ||
| position: absolute; | ||
| top: 0; | ||
| width: 2rem; | ||
| height: 2rem; | ||
| padding: 0; | ||
| color: hsla(0, 0%, 10%, .25); | ||
| transition: color 0.3s ease; | ||
| background: none; | ||
| border: none; | ||
| border-radius: 50%; | ||
| cursor: pointer; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| box-shadow: none; | ||
|
|
||
| &:hover { | ||
| color: hsla(0, 0%, 10%, .5); | ||
| } | ||
|
|
||
| &:active { | ||
| color: hsla(0, 0%, 10%, .65); | ||
| } | ||
|
|
||
| &.left { | ||
| left: 0; | ||
| } | ||
|
|
||
| &.right { | ||
| right: 0; | ||
| } | ||
| } |
Oops, something went wrong.