Skip to content

fix: broken mobile styles for config #387

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 4 commits into
base: main
Choose a base branch
from
Open

fix: broken mobile styles for config #387

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1581829
fix: broken mobile styles for config
DogPawHat Apr 18, 2025
477fa06
fix: lint
DogPawHat Apr 18, 2025
efe4339
chore: unused version var
DogPawHat Apr 18, 2025
68959ef
fix: revert partners styles
DogPawHat Apr 18, 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
260 changes: 131 additions & 129 deletions app/routes/_libraries/config.$version.index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,159 +30,161 @@ const librariesRouteApi = getRouteApi('/_libraries')

export default function FormVersionIndex() {
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
const { version } = Route.useParams()
const library = getLibrary('config')

const gradientText = `pr-1 inline-block leading-snug text-transparent bg-clip-text bg-gradient-to-r ${configProject.colorFrom} ${configProject.colorTo}`

return (
<>
<div className="flex flex-col gap-20 md:gap-32 pt-32">
<div className="flex flex-col items-center gap-8 text-center px-4">
<h1 className="font-black flex gap-3 items-center text-4xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em]">
<span>TanStack</span>
<span className={twMerge(gradientText)}>Config</span>
</h1>
<h2
className="font-bold text-2xl max-w-[600px]
md:text-3xl
lg:text-5xl lg:max-w-[800px]"
>
<span className="underline decoration-dashed decoration-gray-500 decoration-3 underline-offset-2">
Configuration and tools
</span>{' '}
for publishing and maintaining high-quality JavaScript packages
</h2>
<Link
to="./docs/"
className={`py-2 px-4 bg-gray-500 text-white rounded uppercase font-extrabold`}
>
Get Started
</Link>
</div>
<div className="flex flex-1 flex-col min-h-0 relative overflow-x-hidden">
<div className="flex flex-1 min-h-0 relative justify-center overflow-x-hidden">
<div className="flex flex-col gap-20 md:gap-32 max-w-full py-32">
Comment on lines +38 to +40
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pretty much all the styles are a copy and paste job from _libraries/query.$version.index.tsx. I don't know if I like all the div nesting but it works there and we're not consistent at least.

<div className="flex flex-col items-center gap-8 text-center px-4">
<h1 className="font-black flex gap-3 items-center text-4xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em]">
<span>TanStack</span>
<span className={twMerge(gradientText)}>Config</span>
</h1>
<h2
className="font-bold text-2xl max-w-md
md:text-3xl
lg:text-5xl lg:max-w-2xl"
>
<span className="underline decoration-dashed decoration-gray-500 decoration-3 underline-offset-2">
Configuration and tools
</span>{' '}
for publishing and maintaining high-quality JavaScript packages
</h2>
<Link
to="./docs/"
className={`py-2 px-4 bg-gray-500 text-white rounded uppercase font-extrabold`}
>
Get Started
</Link>
</div>

<LibraryFeatureHighlights
featureHighlights={library.featureHighlights}
/>
<LibraryFeatureHighlights
featureHighlights={library.featureHighlights}
/>

<div className="px-4 sm:px-6 lg:px-8 mx-auto container">
<div className=" sm:text-center pb-16">
<h3 className="text-3xl text-center mx-auto leading-tight font-extrabold tracking-tight sm:text-4xl lg:leading-none mt-2">
Hassle-Free Setup
</h3>
<p className="mt-4 text-xl max-w-3xl mx-auto leading-7 opacity-60">
Incorporate TanStack Config into your development toolkit and
experience a new level of efficiency, speed, and customization in
building and releasing high-quality JavaScript packages.
</p>
</div>
<div className="grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-4 w-[max-content] mx-auto">
{[
// A list of features that @tanstack/config provides
'Vite ecosystem',
'Opinionated defaults',
'Publint-compliant',
'Minimal configuration',
'Package versioning',
'Automated changelogs',
].map((d, i) => {
return (
<span key={i} className="flex items-center gap-2">
<FaCheckCircle className="text-green-500 " /> {d}
</span>
)
})}
<div className="px-4 sm:px-6 lg:px-8 mx-auto">
<div className="sm:text-center pb-16">
<h3 className="text-3xl text-center mx-auto leading-tight font-extrabold tracking-tight sm:text-4xl lg:leading-none mt-2">
Hassle-Free Setup
</h3>
<p className="mt-4 text-xl max-w-3xl mx-auto leading-7 opacity-60">
Incorporate TanStack Config into your development toolkit and
experience a new level of efficiency, speed, and customization
in building and releasing high-quality JavaScript packages.
</p>
</div>
<div className="grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-4 mx-auto">
{[
// A list of features that @tanstack/config provides
'Vite ecosystem',
'Opinionated defaults',
'Publint-compliant',
'Minimal configuration',
'Package versioning',
'Automated changelogs',
].map((d, i) => {
return (
<span key={i} className="flex items-center gap-2">
<FaCheckCircle className="text-green-500 " /> {d}
</span>
)
})}
</div>
</div>
</div>

<div className="px-4 w-[500px] max-w-full mx-auto">
<h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
Partners
</h3>
<div className="h-8" />
<div
className="flex-1 flex flex-col items-center text-sm text-center
<div className="px-4 w-[500px] max-w-full mx-auto">
<h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
Partners
</h3>
<div className="h-8" />
<div
className="flex-1 flex flex-col items-center text-sm text-center
bg-white/80 shadow-xl shadow-gray-500/20 rounded-lg
divide-y-2 divide-gray-500 divide-opacity-10 overflow-hidden
dark:bg-black/40 dark:shadow-none"
>
<span className="flex items-center gap-2 p-12 text-4xl text-rose-500 font-black uppercase">
Config <TbHeartHandshake /> You?
</span>
<div className="flex flex-col p-4 gap-4">
<div>
We're looking for a TanStack Config OSS Partner to go above and
beyond the call of sponsorship. Are you as invested in TanStack
Config as we are? Let's push the boundaries of Config together!
>
<span className="flex items-center gap-2 p-12 text-4xl text-rose-500 font-black uppercase">
Config <TbHeartHandshake /> You?
</span>
<div className="flex flex-col p-4 gap-4">
<div>
We're looking for a TanStack Config OSS Partner to go above
and beyond the call of sponsorship. Are you as invested in
TanStack Config as we are? Let's push the boundaries of Config
together!
</div>
<a
href="mailto:[email protected]?subject=TanStack Config Partnership"
className="text-blue-500 uppercase font-black text-sm"
>
Let's chat
</a>
</div>
<a
href="mailto:[email protected]?subject=TanStack Config Partnership"
className="text-blue-500 uppercase font-black text-sm"
>
Let's chat
</a>
</div>
</div>
</div>

<div className="relative text-lg overflow-hidden">
<h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
Sponsors
</h3>
<div
className="my-4 flex flex-wrap mx-auto max-w-screen-lg"
style={{
aspectRatio: '1/1',
}}
>
<Await
promise={sponsorsPromise}
fallback={<CgSpinner className="text-2xl animate-spin" />}
children={(sponsors) => {
return <SponsorPack sponsors={sponsors} />
<div className="relative text-lg overflow-hidden">
<h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
Sponsors
</h3>
<div
className="my-4 flex flex-wrap mx-auto max-w-screen-lg"
style={{
aspectRatio: '1/1',
}}
/>
</div>
<div className="text-center">
<a
href="https://github.com/sponsors/tannerlinsley"
className="inline-block bg-green-500 px-4 py-2 text-xl mx-auto leading-tight font-extrabold tracking-tight text-white rounded-full"
>
Become a Sponsor!
</a>
<Await
promise={sponsorsPromise}
fallback={<CgSpinner className="text-2xl animate-spin" />}
children={(sponsors) => {
return <SponsorPack sponsors={sponsors} />
}}
/>
</div>
<div className="text-center">
<a
href="https://github.com/sponsors/tannerlinsley"
className="inline-block bg-green-500 px-4 py-2 text-xl mx-auto leading-tight font-extrabold tracking-tight text-white rounded-full"
>
Become a Sponsor!
</a>
</div>
</div>
</div>

<div className="mx-auto max-w-[400px] flex flex-col gap-2 items-center">
<div className="shadow-lg rounded-lg overflow-hidden bg-white dark:bg-gray-800 dark:text-white">
<Carbon />
<div className="mx-auto max-w-[400px] flex flex-col gap-2 items-center">
<div className="shadow-lg rounded-lg overflow-hidden bg-white dark:bg-gray-800 dark:text-white">
<Carbon />
</div>
<span
className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500
dark:bg-opacity-20"
>
This ad helps us keep the lights on 😉
</span>
</div>
<span
className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500
dark:bg-opacity-20"
>
This ad helps us keep the lights on 😉
</span>
</div>

<div className="flex flex-col gap-4 items-center">
<div className="font-extrabold text-xl lg:text-2xl">
Wow, you've come a long way!
</div>
<div className="italic font-sm opacity-70">
Only one thing left to do...
</div>
<div>
<Link
to="./docs/"
className={`inline-block py-2 px-4 bg-gray-500 text-white rounded uppercase font-extrabold`}
>
Get Started!
</Link>
<div className="flex flex-col gap-4 items-center">
<div className="font-extrabold text-xl lg:text-2xl">
Wow, you've come a long way!
</div>
<div className="italic font-sm opacity-70">
Only one thing left to do...
</div>
<div>
<Link
to="./docs/"
className={`inline-block py-2 px-4 bg-gray-500 text-white rounded uppercase font-extrabold`}
>
Get Started!
</Link>
</div>
</div>
<Footer />
</div>
<Footer />
</div>
</>
</div>
)
}
Loading