Uh oh!
There was an error while loading. Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork 18
feat: updates card design for kits and homepage#1291
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.
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
Merged
Uh oh!
There was an error while loading. Please reload this page.
Merged
Changes from all commits
Commits
Show all changes
30 commits
Select commit
Hold shift + click to select a range
880358f
feat: updates card design for kits and homepage
WillHutt e0043bc
refactor: remove consoles
WillHutt 40f3868
chore: format
WillHutt 527fce9
refactor: brakes out showcase links into components, adjusts package.…
WillHutt 4b8fbaf
refactor: cleanup
WillHutt ea85eac
chore: format
WillHutt 07daddd
fix: address feedback
WillHutt 8684a28
refactor: wip homepage layout, swap kits to individual kits, rename i…
WillHutt e86d554
refactor: wip homepage kit layout
WillHutt 21ea122
refactor: wip homepage alignment
WillHutt 84c5da8
feat: adds live apps where available
WillHutt 37b70e2
refactor: addresses homepage feedback
WillHutt 1bc13e3
refactor: cleanup
WillHutt cc1fe09
chore: format
WillHutt ff1897b
refactor: remove unused tw grid
WillHutt ec35e9a
refactor: removes old showcase graphic
WillHutt 3799dee
refactor: c/rs, skinny cntrs, lm title, plural shwcses, l/d cramped p…
WillHutt cb6d7dc
chore: format
WillHutt 841c880
fix: update icons
lindakatcodes d7acef9
fix: adjust card styles for home page
lindakatcodes 599b3d7
fix: kit page header mobile fix; view showcases scroll margin
lindakatcodes 164955e
fix: minor sizing fixes from preview check
lindakatcodes 1fa6fff
fix: showcase card style updates
lindakatcodes 79daedb
fix: update order of tech icons to match package.json order
lindakatcodes 77b79e1
fix: remove svelte 7 guis showcase since repo is private
lindakatcodes b7992f7
fix: make tanstack logo smaller to match ts logo size
lindakatcodes 442353f
fix: adjust flex positioning for kit hero
lindakatcodes 7caaed7
fix: capitalization fix, remove comment, change kit hero to use grid …
lindakatcodes 5abaa36
fix: adjust grid for home page cards
lindakatcodes a6cedb5
Remove unused comment
lindakatcodes File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Uh oh!
There was an error while loading. Please reload this page.
Jump to
Jump to file
Failed to load files.
Loading
Uh oh!
There was an error while loading. Please reload this page.
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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 was deleted.
Oops, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
This file contains hidden or 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 hidden or 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,48 +1,17 @@ | ||
| --- | ||
| import { ArrowRightIcon } from '../icons/heroicons'; | ||
| import TechIcon from './TechIcon.astro'; | ||
| import { GitHubIcon } from '../icons/GitHubIcon.tsx'; | ||
| const { kit } = Astro.props; | ||
| const technologyStubsCount = kit.technologies.length < 3 ? (3 - kit.technologies.length) : 0; | ||
| --- | ||
| <div | ||
| class="bg dark:bg-gray-800 border border-gray-400 dark:border-gray-700 rounded-lg group hover:bg-brand-500 hover:dark:bg-brand-500 transition-colors overflow-hidden" | ||
| class="flex flex-col bg dark:bg-gray-800 border border-gray-400 dark:border-gray-700 rounded-lg group group-hover:bg-brand-500 group-hover:dark:bg-brand-500 transition-colors overflow-hidden px-4" | ||
| > | ||
| <div class="px-4 py-6 space-y-4"> | ||
| {kit.technologies.map(({ name, Icon, tags }) => ( | ||
| <div class="flex items-center space-x-6"> | ||
| <h2 class="text-lg font-bold md:ml-3 lg:mx-6 pt-6 h-16 t-dark dark:dark-t group-hover:text-white">{kit.name}</h2> | ||
| <div class="grid grid-cols-fill-20 gap-x-2 gap-y-3 justify-items-center justify-between items-end xl:grid-cols-4 md:grid-rows-4 lg:grid-rows-3 md:gap-y-1 lg:mx-6 pt-4 pb-6 md:space-y-4"> | ||
| {kit.technologies.map(({ Icon }) => ( | ||
| <div> | ||
| { Icon && <TechIcon {Icon} />} | ||
| <div> | ||
| <div class="heading-6 t-dark dark:dark-t-light group-hover:text-white">{name}</div> | ||
| <div class="t-light dark:dark-t text-sm group-hover:text-gray-100">{tags.join(', ')}</div> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| {Array(technologyStubsCount).fill().map(() => ( | ||
| <div class="flex items-center space-x-6"> | ||
| <div class="h-20"></div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <div | ||
| class="px-4 py-2.5 flex items-center border-t dark:border-gray-700 border-gray-200 dark:bg-gray-800 group-hover:bg-brand-600 group-hover:border-brand-600" | ||
| > | ||
| <a | ||
| href={`/kits/${kit.name}`} | ||
| class="inline-flex items-center justify-center t-light dark:dark-t group-hover:text-white font-medium" | ||
| > | ||
| View Kit <ArrowRightIcon className="inline w-4 h-4 ml-2" /> | ||
| </a> | ||
| <a | ||
| href={`https://github.com/thisdot/starter.dev/tree/main/starters/${kit.name}`} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| class="inline-flex items-center ml-auto justify-center py-2.5 px-4 rounded-lg border border-gray-400 dark:border-white group-hover:border-white group-hover:bg-brand-500" | ||
| ><GitHubIcon | ||
| size={22} | ||
| className="t-light dark:text-gray-100 group-hover:text-white" | ||
| /></a | ||
| > | ||
| </div> | ||
| </div> | ||
| </div> | ||
This file contains hidden or 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 hidden or 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,31 @@ | ||
| --- | ||
| import ShowcaseLinks from './ShowcaseLinks.astro'; | ||
| const { showcases, hasShowcase } = Astro.props; | ||
| --- | ||
| { | ||
| hasShowcase ? ( | ||
| <div id="showcase-section" class="pt-24 max-w-screen-2xl mx-auto scroll-mt-20"> | ||
| <h1 class="heading-1 font-medium mb-8"> | ||
| See kits in action via our showcases | ||
| </h1> | ||
| <div class="not-prose flex flex-col sm:col-span-1 md:flex-row flex-wrap gap-4"> | ||
| {showcases.map(({ name, repo, app, Icon }) => ( | ||
| <div class="border bg-gray-100 dark:bg-gray-800 group-hover:bg-blue-500 border-gray-400 dark:border-gray-700 rounded-xl items-center t-dark dark:dark-t-light p-4 "> | ||
| <div class="flex items-center pb-4"> | ||
| <div class="justify-center p-1.5 border dark:bg-gray-800 group-hover:bg-blue-500 border-gray-400 dark:border-gray-700 rounded-xl flex items-center font-medium justify-start min-w-[48px] min-h-[48px]"> | ||
| <Icon className="inline w-6 h-6 mb-px" /> | ||
| </div> | ||
| <div class="mx-4"> | ||
| <p class="text-base t-dark dark:dark-t-light group-hover:text-white leading-snug"> | ||
| {name} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <ShowcaseLinks app={app} repo={repo} /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ) : null | ||
| } |
This file contains hidden or 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,21 @@ | ||
| --- | ||
| import { ArrowRightIcon } from '../icons/heroicons'; | ||
| const { app, repo, name } = Astro.props; | ||
| let showcase; | ||
| if (app !== undefined) { | ||
lindakatcodes marked this conversation as resolved.
Uh oh!There was an error while loading. Please reload this page. | ||
| showcase = app; | ||
| } else { | ||
| showcase = repo; | ||
| } | ||
| --- | ||
| <a | ||
| href={showcase} | ||
| class="link text-sm font-light dark:dark-link hover:underline" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| {name} | ||
| <ArrowRightIcon className="inline w-4 h-4 ml-2" /> | ||
| </a> | ||
This file contains hidden or 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,15 @@ | ||
| --- | ||
| import ShowcaseLink from './ShowcaseLink.astro'; | ||
| const { app, repo } = Astro.props; | ||
| --- | ||
| <div class="pb-3"> | ||
| <ShowcaseLink repo={repo} name="Repository" /> | ||
| </div> | ||
| { | ||
| app !== '' ? ( | ||
| <div class="pb-4"> | ||
| <ShowcaseLink repo={app} name="Live Application" /> | ||
| </div> | ||
| ) : null | ||
| } |
This file contains hidden or 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 hidden or 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
Oops, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.