diff options
Diffstat (limited to 'src/components/landing/sections')
-rw-r--r-- | src/components/landing/sections/Blog.module.css | 28 | ||||
-rw-r--r-- | src/components/landing/sections/Blog.tsx | 95 | ||||
-rw-r--r-- | src/components/landing/sections/Hero.module.css | 10 |
3 files changed, 131 insertions, 2 deletions
diff --git a/src/components/landing/sections/Blog.module.css b/src/components/landing/sections/Blog.module.css new file mode 100644 index 0000000..6a38a97 --- /dev/null +++ b/src/components/landing/sections/Blog.module.css | |||
@@ -0,0 +1,28 @@ | |||
1 | /* | ||
2 | * SPDX-FileCopyrightText: 2024 Kristóf Marussy | ||
3 | * | ||
4 | * SPDX-License-Identifier: MIT | ||
5 | */ | ||
6 | |||
7 | .row { | ||
8 | margin-bottom: var(--ifm-paragraph-margin-bottom); | ||
9 | } | ||
10 | |||
11 | .recent-posts { | ||
12 | margin-bottom: 0; | ||
13 | font-size: var(--ifm-h3-font-size); | ||
14 | font-weight: var(--ifm-font-weight-bold); | ||
15 | --casl: 0.5; | ||
16 | letter-spacing: var(--marussy-heading-tracking); | ||
17 | } | ||
18 | |||
19 | .date { | ||
20 | font-size: 1rem; | ||
21 | font-weight: var(--ifm-font-weight-normal); | ||
22 | --casl: 0; | ||
23 | letter-spacing: 0; | ||
24 | } | ||
25 | |||
26 | .prev::after { | ||
27 | content: ' »'; | ||
28 | } | ||
diff --git a/src/components/landing/sections/Blog.tsx b/src/components/landing/sections/Blog.tsx new file mode 100644 index 0000000..3ac87db --- /dev/null +++ b/src/components/landing/sections/Blog.tsx | |||
@@ -0,0 +1,95 @@ | |||
1 | /* | ||
2 | * Copyright (c) Facebook, Inc. and its affiliates. | ||
3 | * Copyright (c) 2024 Kristóf Marussy <kristof@marussy.com> | ||
4 | * | ||
5 | * SPDX-License-Identifier: MIT | ||
6 | */ | ||
7 | |||
8 | import Link from '@docusaurus/Link'; | ||
9 | import type { Props } from '@theme/BlogListPage'; | ||
10 | import type { Content } from '@theme/BlogPostPage'; | ||
11 | import Translate from '@docusaurus/Translate'; | ||
12 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; | ||
13 | import clsx from 'clsx'; | ||
14 | |||
15 | import Section from '@site/src/components/landing/Section'; | ||
16 | import Subtitle from '@site/src/components/landing/Subtitle'; | ||
17 | |||
18 | import styles from './Blog.module.css'; | ||
19 | import React from 'react'; | ||
20 | |||
21 | const columnLength = 5; | ||
22 | |||
23 | function Column({ | ||
24 | items, | ||
25 | }: { | ||
26 | items: { readonly content: Content }[]; | ||
27 | }): React.ReactNode { | ||
28 | // Date time format based on | ||
29 | // https://github.com/facebook/docusaurus/blob/6f17d5493877ba38d8b4e0b0d468f44401375c30/packages/docusaurus-theme-common/src/utils/IntlUtils.ts | ||
30 | const { | ||
31 | i18n: { currentLocale, localeConfigs }, | ||
32 | } = useDocusaurusContext(); | ||
33 | const calendar = localeConfigs[currentLocale]!.calendar; | ||
34 | const dateTimeFormat = new Intl.DateTimeFormat(currentLocale, { | ||
35 | calendar, | ||
36 | day: 'numeric', | ||
37 | month: 'long', | ||
38 | year: 'numeric', | ||
39 | timeZone: 'UTC', | ||
40 | }); | ||
41 | |||
42 | if (items.length === 0) { | ||
43 | return null; | ||
44 | } | ||
45 | |||
46 | return ( | ||
47 | <div className="col col-6"> | ||
48 | <ul className={styles['recent-posts']}> | ||
49 | {items.map(({ content }) => ( | ||
50 | <li key={content.metadata.date}> | ||
51 | <Link to={content.metadata.permalink}> | ||
52 | {content.metadata.title} | ||
53 | </Link>{' '} | ||
54 | <span className={styles.date}> | ||
55 | on {dateTimeFormat.format(new Date(content.metadata.date))} | ||
56 | </span> | ||
57 | </li> | ||
58 | ))} | ||
59 | </ul> | ||
60 | </div> | ||
61 | ); | ||
62 | } | ||
63 | |||
64 | export default function Blog(props: Props) { | ||
65 | const { | ||
66 | items, | ||
67 | metadata: { nextPage }, | ||
68 | } = props; | ||
69 | const columnLength = Math.max(1, Math.ceil(items.length / 2)); | ||
70 | return ( | ||
71 | <Section id="blog" title="Blog"> | ||
72 | <div className="container"> | ||
73 | <section> | ||
74 | <Subtitle icon="🗓️">Recent posts</Subtitle> | ||
75 | </section> | ||
76 | <div className={clsx('row', styles.row)}> | ||
77 | <Column items={items.slice(0, columnLength)} /> | ||
78 | <Column items={items.slice(columnLength)} /> | ||
79 | </div> | ||
80 | {nextPage && ( | ||
81 | <p> | ||
82 | <Link to={nextPage} className={styles.prev}> | ||
83 | <Translate | ||
84 | id="theme.blog.paginator.olderEntries" | ||
85 | description="The label used to navigate to the older blog posts page (next page)" | ||
86 | > | ||
87 | Older Entries | ||
88 | </Translate> | ||
89 | </Link> | ||
90 | </p> | ||
91 | )} | ||
92 | </div> | ||
93 | </Section> | ||
94 | ); | ||
95 | } | ||
diff --git a/src/components/landing/sections/Hero.module.css b/src/components/landing/sections/Hero.module.css index 67e7d54..0d0e16e 100644 --- a/src/components/landing/sections/Hero.module.css +++ b/src/components/landing/sections/Hero.module.css | |||
@@ -11,7 +11,7 @@ | |||
11 | --ifm-link-hover-color: var(--ifm-link-color); | 11 | --ifm-link-hover-color: var(--ifm-link-color); |
12 | } | 12 | } |
13 | 13 | ||
14 | @media (max-width: 996px) { | 14 | @media (max-width: 576px) { |
15 | .hero { | 15 | .hero { |
16 | padding-top: 2rem; | 16 | padding-top: 2rem; |
17 | padding-bottom: 0; | 17 | padding-bottom: 0; |
@@ -65,11 +65,17 @@ | |||
65 | font-family: var(--ifm-heading-font-family); | 65 | font-family: var(--ifm-heading-font-family); |
66 | font-weight: var(--ifm-heading-font-weight); | 66 | font-weight: var(--ifm-heading-font-weight); |
67 | --casl: 1; | 67 | --casl: 1; |
68 | font-size: 2.5rem; | 68 | font-size: 3rem; |
69 | letter-spacing: var(--marussy-heading-tracking); | 69 | letter-spacing: var(--marussy-heading-tracking); |
70 | white-space: pre; | 70 | white-space: pre; |
71 | } | 71 | } |
72 | 72 | ||
73 | @media (max-width: 576px) { | ||
74 | .introduction__name { | ||
75 | font-size: 2.5rem; | ||
76 | } | ||
77 | } | ||
78 | |||
73 | .cta { | 79 | .cta { |
74 | display: flex; | 80 | display: flex; |
75 | flex-direction: row; | 81 | flex-direction: row; |