Skip to content

Commit

Permalink
Enterprise page skeleton
Browse files Browse the repository at this point in the history
  • Loading branch information
marcomezzavilla committed Nov 6, 2024
1 parent bac97e3 commit 8012a41
Show file tree
Hide file tree
Showing 8 changed files with 200 additions and 21 deletions.
4 changes: 2 additions & 2 deletions schema.graphql
Original file line number Diff line number Diff line change
Expand Up @@ -2255,10 +2255,10 @@ input EnterpriseAppModelFilter {
_updatedAt: UpdatedAtFilter
updatedAt: UpdatedAtFilter
_isValid: BooleanFilter
content: StructuredTextFilter
gallery: GalleryFilter
seo: SeoFilter
logo: FileFilter
content: StructuredTextFilter
description: StringFilter
shortDescription: StringFilter
slug: SlugFilter
Expand Down Expand Up @@ -2320,7 +2320,7 @@ type EnterpriseAppRecord implements RecordInterface {
_status: ItemStatus!
_unpublishingScheduledAt: DateTime
_updatedAt: DateTime!
content: EnterpriseAppModelContentField
content: EnterpriseAppModelContentField!
createdAt: DateTime!
description: String
gallery: [FileField!]!
Expand Down
36 changes: 23 additions & 13 deletions src/components/MarketplaceCard/Component.astro
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
---
import { MaybeLink } from '~/components/links/MaybeLink';
import s from './style.module.css';
type Props = {
Expand All @@ -7,7 +8,7 @@ type Props = {
boxed?: boolean;
class?: string;
highlight?: string;
href: string;
href?: string;
label?: unknown;
lineClamp?: number;
orientation?: 'horizontal' | 'vertical';
Expand All @@ -32,7 +33,7 @@ const {
} = Astro.props;
---

<a
<MaybeLink
href={href}
class:list={[s.card, className]}
data-size={size}
Expand Down Expand Up @@ -61,16 +62,25 @@ const {
<h2 class={s.cardTitle}>
{Astro.slots.has('title') ? <slot name="title" /> : <>{title}</>}
</h2>
<p class={s.cardDescription} style=`--lineClamp: ${lineClamp}`>
<slot />
</p>
{
Astro.slots.has('image') && svgLogoUrl && (
<div class={s.subImageWrapper}>
<img loading="lazy" class={s.subImage} src={svgLogoUrl} />
</div>
)
}
<div class={s.cardBody}>
<p class={s.cardDescription} style=`--lineClamp: ${lineClamp}`>
<slot />
</p>
{
Astro.slots.has('below') && (
<div class={s.below}>
<slot name="below" />
</div>
)
}
{
Astro.slots.has('image') && svgLogoUrl && (
<div class={s.subImageWrapper}>
<img loading="lazy" class={s.subImage} src={svgLogoUrl} />
</div>
)
}
</div>
{
(badge || label) && (
<footer class={s.cardFooter}>
Expand All @@ -89,4 +99,4 @@ const {
)
}
</article>
</a>
</MaybeLink>
6 changes: 6 additions & 0 deletions src/components/MarketplaceCard/style.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,12 @@
}
}

.cardBody {
display: flex;
flex-direction: column;
gap: 20px;
}

.subImageWrapper {
aspect-ratio: 5/1;
margin: 20px 0 0 0;
Expand Down
4 changes: 2 additions & 2 deletions src/lib/datocms/graphql-env.d.ts

Large diffs are not rendered by default.

69 changes: 69 additions & 0 deletions src/pages/marketplace/enterprise/[slug]/_graphql.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import { executeQueryOutsideAstro } from '~/lib/datocms/executeQuery';
import {
EnterpriseAppUrlFragment,
buildUrlForEnterpriseApp,
} from '~/lib/datocms/gqlUrlBuilder/enterpriseApp';
import type { BuildSitemapUrlsFn } from '~/pages/sitemap.xml';
import { ResponsiveImageFragment } from '~/components/ResponsiveImage/graphql';
import { ImageFragment } from '~/components/blocks/Image/graphql';
import { InternalVideoFragment } from '~/components/blocks/InternalVideo/graphql';
import { VideoFragment } from '~/components/blocks/Video/graphql';
import { TagFragment } from '~/lib/datocms/commonFragments';
import { graphql } from '~/lib/datocms/graphql';

export const query = graphql(
/* GraphQL */ `
query EnterpriseAppQuery($slug: String!) {
page: enterpriseApp(filter: { slug: { eq: $slug } }) {
seo: _seoMetaTags {
...TagFragment
}
title
description
shortDescription
logo {
url
width
height
}
content {
value
blocks {
... on RecordInterface {
id
__typename
}
... on ImageRecord {
...ImageFragment
}
... on VideoRecord {
...VideoFragment
}
... on InternalVideoRecord {
...InternalVideoFragment
}
}
}
}
}
`,
[TagFragment, ResponsiveImageFragment, ImageFragment, VideoFragment, InternalVideoFragment],
);

export const buildSitemapUrls: BuildSitemapUrlsFn = async ({ includeDrafts }) => {
const { entries } = await executeQueryOutsideAstro(
graphql(
/* GraphQL */ `
query BuildSitemapUrls {
entries: allEnterpriseApps(first: 100) {
...EnterpriseAppUrlFragment
}
}
`,
[EnterpriseAppUrlFragment],
),
{ includeDrafts },
);

return entries.map(buildUrlForEnterpriseApp);
};
28 changes: 28 additions & 0 deletions src/pages/marketplace/enterprise/[slug]/_style.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
.grid {
display: grid;
gap: rfs(60px);

@media screen and (min-width: 1024px) {
grid-template-columns: 1fr 340px;
}
}

.content {
.title {
font-size: rfs(48px);
}

.subtitle {
color: var(--light-body-color);
font-size: rfs(24px);
font-weight: 400;
margin-top: 1em;
}
}

.aside {
.asideContent {
position: sticky;
top: 140px;
}
}
66 changes: 66 additions & 0 deletions src/pages/marketplace/enterprise/[slug]/index.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
---
import Wrapper from '~/components/Wrapper/ReactComponent';
import { Button } from '~/components/Button';
import { Image } from '~/components/blocks/Image';
import { InternalVideo } from '~/components/blocks/InternalVideo';
import { Layout } from '~/layouts/Layout';
import { MarketplaceCard } from '~/components/MarketplaceCard';
import { Prose } from '~/components/Prose';
import { Space } from '~/components/Space';
import { Text } from '~/components/structuredText/Text';
import { Video } from '~/components/blocks/Video';
import { executeQuery } from '~/lib/datocms/executeQuery';
import { notFoundResponse, avoidAstroTypeCheckBug } from '~/lib/notFoundResponse';
import { withAllComponents } from '~/lib/datocms/structuredText';
import { query } from './_graphql';
import s from './_style.module.css';
const { slug } = Astro.params;
const variables = { slug: slug! };
const { page } = await executeQuery(Astro, query, { variables });
if (!page) {
avoidAstroTypeCheckBug(notFoundResponse);
return notFoundResponse();
}
---

<Layout noFinalCta additionalSeo={[]}>
<Fragment slot="head">
<title>Enterprise apps - Marketplace</title>
</Fragment>

<Space top={2}>
<Wrapper>
<div class={s.grid}>
<div class={s.content}>
<h1 class={s.title}>{page.title}</h1>
<h3 class={s.subtitle}>{page.description}</h3>
<Space top={2}>
<Prose>
<Text
data={page.content}
blockComponents={withAllComponents(page.content.blocks, {
ImageRecord: Image,
InternalVideoRecord: InternalVideo,
VideoRecord: Video,
})}
/>
</Prose>
</Space>
</div>

<aside class={s.aside}>
<div class={s.asideContent}>
<MarketplaceCard title={page.title} background="azure" svgLogoUrl={page.logo.url}>
{page.shortDescription}
<Fragment slot="below">
<Button as="a" href="/contact" target="_blank">Request activation</Button>
</Fragment>
</MarketplaceCard>
</div>
</aside>
</div>
</Wrapper>
</Space>
</Layout>
8 changes: 4 additions & 4 deletions src/pages/marketplace/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const techStarters = page.demos.filter((item) => item.starterType === 'tech_star

<GroupPreview title="Our Starters">
<Fragment slot="browse">
<a href="/" class={s.headerViewAll}>
<a href="/marketplace/starters" class={s.headerViewAll}>
<span>View all</span>
<Svg name="icons/regular/arrow-right" />
</a>
Expand Down Expand Up @@ -94,7 +94,7 @@ const techStarters = page.demos.filter((item) => item.starterType === 'tech_star

<GroupPreview title="Community Plugins">
<Fragment slot="browse">
<a href="/" class={s.headerViewAll}>
<a href="/marketplace/plugins" class={s.headerViewAll}>
<span>View all ({plugins.count})</span>
<Svg name="icons/regular/arrow-right" />
</a>
Expand Down Expand Up @@ -124,7 +124,7 @@ const techStarters = page.demos.filter((item) => item.starterType === 'tech_star

<GroupPreview title="Hosting & CI Building">
<Fragment slot="browse">
<a href="/" class={s.headerViewAll}>
<a href="/marketplace/hosting" class={s.headerViewAll}>
<span>View all ({hostingApps.count})</span>
<Svg name="icons/regular/arrow-right" />
</a>
Expand Down Expand Up @@ -155,7 +155,7 @@ const techStarters = page.demos.filter((item) => item.starterType === 'tech_star

<GroupPreview title="Enterprise Apps">
<Fragment slot="browse">
<a href="/" class={s.headerViewAll}>
<a href="/marketplace/enterprise" class={s.headerViewAll}>
<span>View all ({enterpriseApps.count})</span>
<Svg name="icons/regular/arrow-right" />
</a>
Expand Down

0 comments on commit 8012a41

Please sign in to comment.