Skip to content

Docusaurus: don't use styled-components on homepage #5760

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

Merged
jharrell merged 3 commits into from
Apr 1, 2024
Merged

Docusaurus: don't use styled-components on homepage #5760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d359743
remove duplicate index
jharrell Apr 1, 2024
48603f8
stop using styled-components due to rendering issues
jharrell Apr 1, 2024
07f01e0
introduce .editorconfig
jharrell Apr 1, 2024
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
17 changes: 17 additions & 0 deletions .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Editor config
# http://editorconfig.org

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
max_line_length = 100
trim_trailing_whitespace = true

[*.{md,mdx}]
insert_final_newline = false
trim_trailing_whitespace = false
10 changes: 0 additions & 10 deletions docs/index.mdx
View file
Open in desktop

This file was deleted.

3 changes: 1 addition & 2 deletions docusaurus.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,7 @@ const config: Config = {
},
items: [
{
type: 'docSidebar',
sidebarId: 'index',
to: '/',
position: 'left',
label: '/docs',
className: 'logo-link',
Expand Down
1 change: 0 additions & 1 deletion sidebars.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ const platformCategory: SidebarItemConfig = {
*/
const sidebars: SidebarsConfig = {
// By default, Docusaurus generates a sidebar from the docs folder structure
index: ['index'],
gettingStarted: [
{
type: 'category',
Expand Down
76 changes: 38 additions & 38 deletions src/components/HomepageFeatures/Community.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,45 +127,45 @@ const CommunityLinksRow = styled.div`
}
i {
margin-top: 4px;
}
}
`

export default function ORMCards(): JSX.Element {
return (
<CommunitySection>
<div>
<div className="section-hero">
<H3>Join our Community</H3>
<p>
We have multiple channels where you can get help from members of our community as well
as the Prisma team.
</p>
return (
<CommunitySection>
<div>
<div className="section-hero">
<H3>Join our Community</H3>
<p>
We have multiple channels where you can get help from members of our community as well
as the Prisma team.
</p>
</div>
<CommunityLinksRow>
{CommunityLinksData.map((comm: any) => (
<ShadowCard key={comm.id}>
<a
className="community-link-wrapper content"
href={comm.link}
rel="noreferrer"
target="_blank"
>
<Icon icon={comm.icon} color={theme.colors.indigo[600]} size="22px" />
<div>
<div>
<h4>{comm.title}</h4>
<Body>{comm.description}</Body>
</div>
<div className="link">
<span>{comm.linkText}</span>
<span> &#8599;</span>
</div>
</div>
<CommunityLinksRow>
{CommunityLinksData.map((comm: any) => (
<ShadowCard key={comm.id}>
<a
className="community-link-wrapper content"
href={comm.link}
rel="noreferrer"
target="_blank"
>
<Icon icon={comm.icon} color={theme.colors.indigo[600]} size="22px" />
<div>
<div>
<h4>{comm.title}</h4>
<Body>{comm.description}</Body>
</div>
<div className="link">
<span>{comm.linkText}</span>
<span> &#8599;</span>
</div>
</div>
</a>
</ShadowCard>
))}
</CommunityLinksRow>
</div>
</CommunitySection>
)
}
</a>
</ShadowCard>
))}
</CommunityLinksRow>
</div>
</CommunitySection>
)
}
52 changes: 27 additions & 25 deletions src/components/HomepageFeatures/Databases.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,28 +152,30 @@ const DatabaseGrid = styled.div`
}
`
export default function ORMCards(): JSX.Element {
return (
<DatabasesSection>
<H4>Databases</H4>
<Body>
Prisma ORM works seamlessly across most popular databases and service providers. <br /> Refer
to our Database features matrix for information about supported features and types for
each database.
</Body>
<DatabaseGrid>
{DatabaseData.map((e: any) => (
<Link to={e.url}>
<div className="entry light">
<img src={`/img/technologies/${e.icon}.svg`} {...{style: {
height: `100%`,
width: e.icon === "sqlite" ? `55px` : `auto`,
marginRight: e.icon === "sqlite" ? `-30px` : 0,
}}}/>
<span>{e.title}</span>
</div>
</Link>
))}
</DatabaseGrid>
</DatabasesSection>
)
}
return (
<DatabasesSection>
<H4>Databases</H4>
<Body>
Prisma ORM works seamlessly across most popular databases and service providers. <br /> Refer
to our Database features matrix for information about supported features and types for
each database.
</Body>
<DatabaseGrid>
{DatabaseData.map((e: any) => (
<Link to={e.url}>
<div className="entry light">
<img src={`/img/technologies/${e.icon}.svg`} {...{
style: {
height: `100%`,
width: e.icon === "sqlite" ? `55px` : `auto`,
marginRight: e.icon === "sqlite" ? `-30px` : 0,
}
}} />
<span>{e.title}</span>
</div>
</Link>
))}
</DatabaseGrid>
</DatabasesSection>
)
}
56 changes: 20 additions & 36 deletions src/components/HomepageFeatures/ORMCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,39 +123,23 @@ const ORMProductCard = styled(ProductCard)`
}
`
export default function ORMCards(): JSX.Element {
return (
<ORMCardsSection>
<ORMCardsWrapper>
<ORMProductCard color="indigo" style={{ padding: '40px' }}>
<H4>Components</H4>
<p>
Open source Node.js and TypeScript ORM with an intuitive data model, automated
migrations, type-safety, and auto-completion.
</p>
<div>
<LinkGrid>
{CardLinks.components.map((card: any) => (
<Link to={card.url}>{card.title} &#8594;</Link>
))}
</LinkGrid>
</div>
</ORMProductCard>

<ORMProductCard color="indigo" style={{ padding: '40px' }}>
<H4>Reference</H4>
<p>
Open source Node.js and TypeScript ORM with an intuitive data model, automated
migrations, type-safety, and auto-completion.
</p>
<div>
<LinkGrid>
{CardLinks.reference.map((card: any) => (
<Link to={card.url}>{card.title} &#8594;</Link>
))}
</LinkGrid>
</div>
</ORMProductCard>
</ORMCardsWrapper>
</ORMCardsSection>
)
}
return (
<ORMCardsSection>
<ORMCardsWrapper>
{Object.keys(CardLinks).map((e) => (
<ORMProductCard color="indigo" style={{ padding: '40px' }}>
<H4>{e[0].toUpperCase() + e.substring(1).toLowerCase()}</H4>
<p>Open source Node.js and TypeScript ORM with an intuitive data model, automated migrations, type-safety, and auto-completion.</p>
<div>
<LinkGrid>
{CardLinks[e].map((card) => (
<Link to={card.url}>{card.title} &#8594;</Link>
))}
</LinkGrid>
</div>
</ORMProductCard>
))}
</ORMCardsWrapper>
</ORMCardsSection>
)
}
42 changes: 21 additions & 21 deletions src/components/HomepageFeatures/PrismaORM.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,24 +122,24 @@ const ORMLinkWrapper = styled(Link)`
`

export default function PrismaORM(): JSX.Element {
return (
<PrismaORMSectionWrapper>
<H4>Prisma ORM</H4>
<ORMLinkContainer>
{GeneralLinkData.map((generalLink: any, index: number) => (
<ORMLinkWrapper key={index} to={generalLink.url}>
<IconWrapper>
<Icon icon={generalLink.icon} color="inherit" size="22px" className="light" />
</IconWrapper>
<div>
<h5>
{generalLink.title} <span>&#8594;</span>
</h5>
<p>{generalLink.description}</p>
</div>
</ORMLinkWrapper>
))}
</ORMLinkContainer>
</PrismaORMSectionWrapper>
)
}
return (
<PrismaORMSectionWrapper>
<H4>Prisma ORM</H4>
<ORMLinkContainer>
{GeneralLinkData.map((generalLink: any, index: number) => (
<ORMLinkWrapper key={index} to={generalLink.url}>
<IconWrapper>
<Icon icon={generalLink.icon} color="inherit" size="22px" className="light" />
</IconWrapper>
<div>
<h5>
{generalLink.title} <span>&#8594;</span>
</h5>
<p>{generalLink.description}</p>
</div>
</ORMLinkWrapper>
))}
</ORMLinkContainer>
</PrismaORMSectionWrapper>
)
}
Loading