Skip to content

Commit 747dfba

Browse files
webstackdevwebstackdev
committed
Refactor to use PageLayout for core pages
1 parent 3721b56 commit 747dfba

46 files changed

Lines changed: 1051 additions & 948 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎_TODO.md‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -299,35 +299,3 @@ We can add a path like `/articles/pdf` or `/articles/deep-dive` for the long-for
299299
- Color headings blue and use the SVG icon instead of the image. Color if the blue shade.
300300

301301
- Social shares - module CSS doesn't appear correct with nested button hover classes, not sure how network name is generated or styled but it needs improvement. Should be rendered inside article content column, not across both content and TOC columns.
302-
303-
### Component Stylings
304-
305-
The bottom margin issues on CTAs need to handle paragraphs differently than headers. Headers are properly spaced now; paragraphs are flush with the CTA with no top margin.
306-
307-
- Download CTA needs some styling tweaks. The checkmark on the two-column list component is too low on multi-line list items. It needs some bottom margin.
308-
309-
- Newsletter CTA needs some bottom margin.
310-
311-
- Callouts should get round corners like the Download and Newsletter CTAs
312-
313-
- Tags need styled at the top of articles item view pages
314-
315-
## Layouts
316-
317-
- Need to fix BaseLayout double-displaying the page title when using the `@components/Layout/Header` component. It needs pagetitle and description for meta tags. Need a separate Header layout for pages with hero images. Need to rationalize what PageLayout is doing. Probably the "section" prop has to do with setting meta and graph data.
318-
319-
- Rename PageLayout to HeroLayout
320-
321-
- We had two Header components now, `@components/Header` and `@components/Layout/Header`. The first is the main header that squishes on scroll.
322-
323-
## MarkdownLayout
324-
325-
src/pages/articles/[...slug].astro
326-
src/pages/case-studies/[slug].astro
327-
328-
### PageLayout
329-
330-
src/pages/case-studies/index.astro
331-
332-
### BaseLayout
333-

‎src/components/Head/Meta.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export interface Props {
1313
/** Content type for OpenGraph metadata */
1414
contentType?: 'article' | 'website'
1515
/** Meta description */
16-
description?: string
16+
pageDescription?: string
1717
/** Last modified date */
1818
modifiedDate?: Date
1919
/** Whether search engines should ignore the page, default: false */
@@ -33,7 +33,7 @@ export interface Props {
3333
const {
3434
author,
3535
contentType,
36-
description,
36+
pageDescription,
3737
modifiedDate,
3838
noindex = false,
3939
pageTitle,
@@ -48,7 +48,7 @@ const defaultTheme = getMetaThemeData()
4848

4949
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5050
<meta name="viewport" content="width=device-width, initial-scale=1" />
51-
<meta name="description" content={description || contactData.company.description} />
51+
<meta name="description" content={pageDescription || contactData.company.description} />
5252
<meta name="author" content={contactData.company.author.name} />
5353
<meta name="robots" content={noindex ? 'noindex, nofollow' : 'index, follow'} />
5454
<Seo
@@ -63,14 +63,14 @@ const defaultTheme = getMetaThemeData()
6363
{/* Open Graph meta tags for Twitter and Facebook social shares */}
6464
<Social
6565
title={pageTitle}
66-
description={description || contactData.company.description}
66+
description={pageDescription || contactData.company.description}
6767
path={path}
6868
/>
6969
{/* JSON-LD Structured Data for search engines */}
7070
<StructuredData
7171
path={path}
7272
pageTitle={pageTitle}
73-
{...description && { description }}
73+
{...pageDescription && { pageDescription }}
7474
{...contentType && { contentType }}
7575
{...publishDate && { publishDate }}
7676
{...modifiedDate && { modifiedDate }}

‎src/components/Head/StructuredData.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
import { getSchemas } from '@components/Head/server/structuredData'
33
export type { StructuredDataProps as Props } from '@components/Head/server/structuredData'
44
5-
const { path, pageTitle, description, contentType, publishDate, modifiedDate, author } = Astro.props
5+
const { path, pageTitle, pageDescription, contentType, publishDate, modifiedDate, author } = Astro.props
66
77
const schemas = getSchemas({
88
astro: Astro,
99
path,
1010
pageTitle,
11-
...(description && { description }),
11+
...(pageDescription && { pageDescription }),
1212
...(contentType && { contentType }),
1313
...(publishDate && { publishDate }),
1414
...(modifiedDate && { modifiedDate }),

‎src/components/Head/index.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export interface Props {
88
/** Content type for OpenGraph metadata */
99
contentType?: 'article' | 'website'
1010
/** Meta description */
11-
description?: string
11+
pageDescription?: string
1212
/** Last modified date */
1313
modifiedDate?: Date
1414
/** Whether search engines should ignore the page, default: false */
@@ -28,7 +28,7 @@ export interface Props {
2828
const {
2929
author,
3030
contentType,
31-
description,
31+
pageDescription,
3232
modifiedDate,
3333
noindex,
3434
pageTitle,
@@ -50,7 +50,7 @@ const {
5050
<Meta
5151
pageTitle={pageTitle}
5252
path={path}
53-
{...description && { description }}
53+
{...pageDescription && { pageDescription }}
5454
{...noindex && { noindex }}
5555
{...contentType && { contentType }}
5656
{...publishDate && { publishDate }}

‎src/components/Head/server/structuredData.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ type ContentType = 'article' | 'website'
2323
export interface StructuredDataProps {
2424
path: string
2525
pageTitle: string
26-
description?: string
26+
pageDescription?: string
2727
contentType?: ContentType
2828
publishDate?: Date
2929
modifiedDate?: Date
@@ -41,7 +41,7 @@ export type StructuredDataThing = WithContext<
4141
interface SchemaContext {
4242
path: string
4343
pageTitle: string
44-
description: string
44+
pageDescription: string
4545
site: URL
4646
canonicalUrl: string
4747
pathSegments: string[]
@@ -64,7 +64,7 @@ export const getSchemas = (params: StructuredDataParams): string[] => {
6464
}
6565

6666
const createSchemaContext = (params: StructuredDataParams): SchemaContext => {
67-
const { astro, path, pageTitle, description, contentType, publishDate, modifiedDate, author } =
67+
const { astro, path, pageTitle, pageDescription, contentType, publishDate, modifiedDate, author } =
6868
params
6969

7070
if (!astro) {
@@ -93,13 +93,13 @@ const createSchemaContext = (params: StructuredDataParams): SchemaContext => {
9393

9494
const normalizedPath = normalizePath(path)
9595
const canonicalUrl = astro.url?.href ?? resolveRoute(normalizedPath, astro.site)
96-
const descriptionFallback = description ?? contactData.company.description
96+
const pageDescriptionFallback = pageDescription ?? contactData.company.description
9797
const socialImageUrl = getSocialImageLink(path)
9898

9999
const context: SchemaContext = {
100100
path: normalizedPath,
101101
pageTitle,
102-
description: descriptionFallback,
102+
pageDescription: pageDescriptionFallback,
103103
site: astro.site,
104104
canonicalUrl,
105105
pathSegments: normalizedPath.split('/').filter(Boolean),
@@ -158,7 +158,7 @@ const webSiteSchema: SchemaBuilder = context => {
158158
'@type': 'WebSite',
159159
name: contactData.company.name,
160160
url: contactData.company.url,
161-
description: context.description,
161+
description: context.pageDescription,
162162
publisher: {
163163
'@type': 'Organization',
164164
name: contactData.company.name,
@@ -178,7 +178,7 @@ const articleSchema: SchemaBuilder = context => {
178178
'@context': 'https://schema.org',
179179
'@type': 'Article',
180180
headline: context.pageTitle,
181-
description: context.description,
181+
description: context.pageDescription,
182182
datePublished: context.publishDate.toISOString(),
183183
dateModified: (context.modifiedDate ?? context.publishDate).toISOString(),
184184
author: {
@@ -241,7 +241,7 @@ const serviceSchema: SchemaBuilder = context => {
241241
'@context': 'https://schema.org',
242242
'@type': 'Service',
243243
name: context.pageTitle,
244-
description: context.description,
244+
description: context.pageDescription,
245245
provider: {
246246
'@type': 'Organization',
247247
name: contactData.company.name,
@@ -260,7 +260,7 @@ const contactPageSchema: SchemaBuilder = context => {
260260
'@context': 'https://schema.org',
261261
'@type': 'ContactPage',
262262
name: context.pageTitle,
263-
description: context.description,
263+
description: context.pageDescription,
264264
url: context.canonicalUrl,
265265
mainEntity: {
266266
'@type': 'Organization',

‎src/components/Icon/icons/check-circled.astro‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
export type Props = {
3+
color: string
4+
classes?: string
5+
size: number
6+
accessible: boolean
7+
focusable: boolean
8+
isListMarker?: boolean
9+
}
10+
11+
const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
12+
---
13+
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
17+
fill="none"
18+
stroke="currentColor"
19+
viewBox="0 0 24 24"
20+
aria-hidden={accessible ? "false" : "true"}
21+
focusable={focusable ? "true" : "false"}
22+
>
23+
{accessible && <title>User Avatar Icon</title>}
24+
<path
25+
stroke-linecap="round"
26+
stroke-linejoin="round"
27+
stroke-width="2"
28+
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
29+
></path>
30+
</svg>

‎src/components/Icon/icons/cloud.astro‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
export type Props = {
3+
color: string
4+
classes?: string
5+
size: number
6+
accessible: boolean
7+
focusable: boolean
8+
isListMarker?: boolean
9+
}
10+
11+
const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
12+
---
13+
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
17+
fill="none"
18+
stroke="currentColor"
19+
viewBox="0 0 24 24"
20+
aria-hidden={accessible ? "false" : "true"}
21+
focusable={focusable ? "true" : "false"}
22+
>
23+
{accessible && <title>Cloud Icon</title>}
24+
<path
25+
stroke-linecap="round"
26+
stroke-linejoin="round"
27+
stroke-width="1.5"
28+
d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z"
29+
></path>
30+
</svg>

‎src/components/Icon/icons/folder-magnifying-glass.astro‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
export type Props = {
3+
color: string
4+
classes?: string
5+
size: number
6+
accessible: boolean
7+
focusable: boolean
8+
isListMarker?: boolean
9+
}
10+
11+
const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
12+
---
13+
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
17+
fill="none"
18+
stroke="currentColor"
19+
viewBox="0 0 24 24"
20+
aria-hidden={accessible ? "false" : "true"}
21+
focusable={focusable ? "true" : "false"}
22+
>
23+
{accessible && <title>Folder Search Icon</title>}
24+
<path
25+
stroke-width="2"
26+
stroke-linecap="round"
27+
stroke-linejoin="round"
28+
d="M13.2686 14.2686L15 16M12.0627 6.06274L11.9373 5.93726C11.5914 5.59135 11.4184 5.4184 11.2166 5.29472C11.0376 5.18506 10.8425 5.10425 10.6385 5.05526C10.4083 5 10.1637 5 9.67452 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.07989 19 6.2 19H17.8C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V10.2C21 9.0799 21 8.51984 20.782 8.09202C20.5903 7.71569 20.2843 7.40973 19.908 7.21799C19.4802 7 18.9201 7 17.8 7H14.3255C13.8363 7 13.5917 7 13.3615 6.94474C13.1575 6.89575 12.9624 6.81494 12.7834 6.70528C12.5816 6.5816 12.4086 6.40865 12.0627 6.06274ZM14 12.5C14 13.8807 12.8807 15 11.5 15C10.1193 15 9 13.8807 9 12.5C9 11.1193 10.1193 10 11.5 10C12.8807 10 14 11.1193 14 12.5Z"
29+
/>
30+
</svg>

‎src/components/Icon/icons/gear.astro‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
export type Props = {
3+
color: string
4+
classes?: string
5+
size: number
6+
accessible: boolean
7+
focusable: boolean
8+
isListMarker?: boolean
9+
}
10+
11+
const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
12+
---
13+
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
17+
fill="none"
18+
stroke="currentColor"
19+
viewBox="0 0 24 24"
20+
aria-hidden={accessible ? "false" : "true"}
21+
focusable={focusable ? "true" : "false"}
22+
>
23+
{accessible && <title>Gear Icon</title>}
24+
<path
25+
stroke-linecap="round"
26+
stroke-linejoin="round"
27+
stroke-width="1.5"
28+
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
29+
></path>
30+
<path
31+
stroke-linecap="round"
32+
stroke-linejoin="round"
33+
stroke-width="1.5"
34+
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
35+
></path>
36+
</svg>

‎src/components/Icon/icons/lightning.astro‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
export type Props = {
3+
color: string
4+
classes?: string
5+
size: number
6+
accessible: boolean
7+
focusable: boolean
8+
isListMarker?: boolean
9+
}
10+
11+
const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
12+
---
13+
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
17+
fill="none"
18+
stroke="currentColor"
19+
viewBox="0 0 24 24"
20+
aria-hidden={accessible ? "false" : "true"}
21+
focusable={focusable ? "true" : "false"}
22+
>
23+
{accessible && <title>Lightning Icon</title>}
24+
<path
25+
stroke-linecap="round"
26+
stroke-linejoin="round"
27+
stroke-width="2"
28+
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
29+
></path>
30+
</svg>

0 commit comments

Comments
 (0)