aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/icons.tsx6
-rw-r--r--src/components/landing/sections/Contact.module.css175
-rw-r--r--src/components/landing/sections/Contact.tsx218
-rw-r--r--src/components/landing/sections/Hero.module.css2
-rw-r--r--src/components/landing/sections/Hero.tsx13
-rw-r--r--src/components/landing/sections/Research.tsx2
-rw-r--r--src/components/landing/sections/Software.module.css5
-rw-r--r--src/components/landing/sections/Software.tsx15
-rw-r--r--src/css/custom.css6
-rw-r--r--src/pages/bme-building-i-cropped.jpgbin0 -> 30231 bytes
-rw-r--r--src/pages/bme-building-i-cropped.jpg.license6
-rw-r--r--src/pages/index.tsx10
-rw-r--r--src/pages/license.mdx3
-rw-r--r--src/plugins/responsiveLoaderPlugin.ts39
-rw-r--r--src/types.d.ts25
15 files changed, 486 insertions, 39 deletions
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 1411218..57fc10c 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -9,8 +9,10 @@ import {
9 siCreativecommons, 9 siCreativecommons,
10 siDblp, 10 siDblp,
11 siGithub, 11 siGithub,
12 siGnuprivacyguard,
12 siGooglescholar, 13 siGooglescholar,
13 siLinkedin, 14 siLinkedin,
15 siMicrosoftteams,
14 siOrcid, 16 siOrcid,
15 siScopus, 17 siScopus,
16} from 'simple-icons'; 18} from 'simple-icons';
@@ -83,6 +85,8 @@ export const FediverseIcon = makeSimpleIcon(fediverse);
83 85
84export const GithubIcon = makeSimpleIcon(siGithub); 86export const GithubIcon = makeSimpleIcon(siGithub);
85 87
88export const GPGIcon = makeSimpleIcon(siGnuprivacyguard);
89
86export const GoogleScholarIcon = makeSimpleIcon(siGooglescholar); 90export const GoogleScholarIcon = makeSimpleIcon(siGooglescholar);
87 91
88export const LinkedInIcon = makeSimpleIcon(siLinkedin); 92export const LinkedInIcon = makeSimpleIcon(siLinkedin);
@@ -92,3 +96,5 @@ export const MTMTIcon = makeSimpleIcon(mtmt);
92export const OrcidIcon = makeSimpleIcon(siOrcid); 96export const OrcidIcon = makeSimpleIcon(siOrcid);
93 97
94export const ScopusIcon = makeSimpleIcon(siScopus); 98export const ScopusIcon = makeSimpleIcon(siScopus);
99
100export const TeamsIcon = makeSimpleIcon(siMicrosoftteams);
diff --git a/src/components/landing/sections/Contact.module.css b/src/components/landing/sections/Contact.module.css
new file mode 100644
index 0000000..15ed2a6
--- /dev/null
+++ b/src/components/landing/sections/Contact.module.css
@@ -0,0 +1,175 @@
1/*
2 * SPDX-FileCopyrightText: 2024 Kristóf Marussy
3 *
4 * SPDX-License-Identifier: MIT
5 */
6
7.contacts {
8 margin-top: 1.5rem;
9 margin-bottom: 2rem;
10}
11
12.col {
13 margin-bottom: 1.5rem;
14}
15
16.contact {
17 position: relative;
18 display: flex;
19 height: 100%;
20 flex-direction: row;
21 align-items: center;
22 --marussy-contact-color: var(--ifm-font-color-base);
23 --marussy-contact-icon-color: var(--marussy-contact-color);
24 --marussy-contact-icon-hover-color: var(--ifm-link-hover-color);
25 --marussy-contact-muted-color: var(--ifm-color-secondary-contrast-foreground);
26 --marussy-contact-muted-color-or-hover: var(--marussy-contact-muted-color);
27 --marussy-alternate-icon: 0;
28 color: var(--marussy-contact-color);
29 transition: color var(--ifm-transition-fast)
30 var(--ifm-transition-timing-default);
31}
32
33[data-theme='dark'] .contact {
34 --marussy-contact-muted-color: var(--ifm-color-emphasis-500);
35 --marussy-contact-icon-hover-color: var(--ifm-color-primary-light);
36}
37
38.contact:not(:has(.contact__action:hover)):hover,
39.contact:focus-within:not(:has(.contact__action:focus)) {
40 --marussy-contact-color: var(--ifm-link-hover-color);
41 --marussy-contact-icon-color: var(--marussy-contact-icon-hover-color);
42 --marussy-contact-muted-color-or-hover: var(--ifm-link-hover-color);
43}
44
45.contact:has(.contact__action--alternate:hover),
46.contact:has(.contact__action--alternate:focus) {
47 --marussy-alternate-icon: 1;
48}
49
50.contact__icon-holder {
51 position: relative;
52 display: flex;
53 padding: 1rem;
54 margin-right: 1rem;
55 background: var(--ifm-color-emphasis-200);
56 border-radius: 50em;
57 align-items: center;
58 justify-content: center;
59 color: var(--marussy-contact-icon-color);
60}
61
62.contact__icon-holder--fediverse {
63 padding: 0.75rem;
64}
65
66.contact__icon {
67 width: 2.5rem;
68 height: 2.5rem;
69 opacity: calc(1 - var(--marussy-alternate-icon));
70 transition:
71 color var(--ifm-transition-fast) var(--ifm-transition-timing-default),
72 opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
73}
74
75.contact__icon--fediverse {
76 width: 3rem;
77 height: 3rem;
78 margin: -0.0625rem -0.0625rem 0.0625rem 0.0625rem;
79}
80
81.contact__icon--alternate {
82 position: absolute;
83 top: 1rem;
84 left: 1rem;
85 color: var(--marussy-contact-icon-hover-color);
86 opacity: var(--marussy-alternate-icon);
87}
88
89.contact__content {
90 dispaly: flex;
91 flex-direction: row;
92}
93
94.contact__title {
95 margin: 0;
96 --casl: 0;
97}
98
99.contact__value {
100 margin: 0;
101}
102
103.contact__description {
104 margin: 0;
105 --slnt: -15;
106 --crsv: 1;
107 font-size: 0.875rem;
108 --marussy-contact-color: var(--marussy-contact-muted-color-or-hover);
109 color: var(--marussy-contact-muted-color-or-hover);
110 transition: color var(--ifm-transition-fast)
111 var(--ifm-transition-timing-default);
112}
113
114.contact__link {
115 --ifm-link-color: var(--marussy-contact-color);
116}
117
118.contact__link::after {
119 content: ' ';
120 position: absolute;
121 top: 0;
122 right: 0;
123 bottom: 0;
124 left: 0;
125}
126
127.contact__action {
128 position: relative;
129 --ifm-link-color: var(--marussy-contact-muted-color);
130}
131
132.contact__action:focus {
133 --ifm-link-color: var(--ifm-link-hover-color);
134}
135
136.small {
137 display: inline-block;
138 position: relative;
139 max-height: 0;
140 width: 1.5rem;
141 overflow: visible;
142 vertical-align: text-bottom;
143}
144
145.small__link {
146 display: flex;
147 position: absolute;
148 bottom: 0;
149}
150
151.small__icon {
152 height: 1.5rem;
153 width: 1.5rem;
154}
155
156.photo__container {
157 position: relative;
158 border-radius: var(--ifm-card-border-radius);
159 overflow: hidden;
160 aspect-ratio: 1288/480;
161 min-height: 15rem;
162 max-width: 100%;
163 background-size: cover;
164 background-position: 25% center;
165}
166
167.photo {
168 position: absolute;
169 top: 0;
170 left: 0;
171 width: 100%;
172 height: 100%;
173 object-fit: cover;
174 object-position: 25% center;
175}
diff --git a/src/components/landing/sections/Contact.tsx b/src/components/landing/sections/Contact.tsx
new file mode 100644
index 0000000..01279a9
--- /dev/null
+++ b/src/components/landing/sections/Contact.tsx
@@ -0,0 +1,218 @@
1/*
2 * SPDX-FileCopyrightText: 2024 Kristóf Marussy
3 *
4 * SPDX-License-Identifier: MIT AND CC-BY-4.0
5 *
6 * Code in this file is MIT licensed, while content is CC-BY-4.0 licensed.
7 */
8
9import Link from '@docusaurus/Link';
10import {
11 EnvelopeSimple,
12 HandWaving,
13 MapPin,
14 Phone,
15} from '@phosphor-icons/react';
16import clsx from 'clsx';
17
18import Section from '@site/src/components/landing/Section';
19import { FediverseIcon, GPGIcon, TeamsIcon } from '@site/src/components/icons';
20import photo from '@site/src/pages/bme-building-i-cropped.jpg?placeholder=true&sizes[]=644&sizes[]=1288&sizes[]=2576&rl';
21
22import styles from './Contact.module.css';
23
24export default function Contact() {
25 return (
26 <Section id="contact" title="Contact">
27 <div className={clsx('container', styles.contacts)}>
28 <div className="row">
29 <div className={clsx('col', 'col--4', styles.col)}>
30 <div className={styles.contact}>
31 <div className={styles['contact__icon-holder']}>
32 <EnvelopeSimple
33 aria-hidden="true"
34 className={styles.contact__icon}
35 />
36 </div>
37 <div className={styles.contact__content}>
38 <h3 className={styles.contact__title}>Work e-mail</h3>
39 <p className={styles.contact__value}>
40 <Link
41 to="mailto:marussy@mit.bme.hu"
42 className={styles.contact__link}
43 >
44 marussy@mit.bme.hu
45 </Link>{' '}
46 <span className={styles.small}>
47 <Link
48 to="https://keyoxide.org/96C12D444D19ED5C41BA8B14C30B3B1A31ACCD46"
49 className={clsx(
50 styles.contact__action,
51 styles.small__link,
52 )}
53 >
54 <GPGIcon alt="GPG key" className={styles.small__icon} />
55 </Link>
56 </span>
57 </p>
58 <p className={styles.contact__description}>
59 For research and professional inquiries
60 </p>
61 </div>
62 </div>
63 </div>
64 <div className={clsx('col', 'col--4', styles.col)}>
65 <div className={styles.contact}>
66 <div className={styles['contact__icon-holder']}>
67 <TeamsIcon hidden className={styles.contact__icon} />
68 <Phone
69 aria-hidden="true"
70 className={clsx(
71 styles.contact__icon,
72 styles['contact__icon--alternate'],
73 )}
74 />
75 </div>
76 <div className={styles.contact__content}>
77 <h3 className={styles.contact__title}>Call or chat with me</h3>
78 <p className={styles.contact__value}>
79 <Link
80 to="https://teams.microsoft.com/l/chat/0/0?users=marussy.kristof@bme.hu"
81 className={styles.contact__link}
82 >
83 <span className="sr-only">Microsoft Teams: </span>
84 marussy.kristof@bme.hu
85 </Link>
86 </p>
87 <p className={styles.contact__description}>
88 <Link
89 to="tel:+3614633586"
90 className={clsx(
91 styles.contact__action,
92 styles['contact__action--alternate'],
93 )}
94 >
95 Or use landline: +36 1 463-3586
96 </Link>
97 </p>
98 </div>
99 </div>
100 </div>
101 <div className={clsx('col', 'col--4', styles.col)}>
102 <div className={styles.contact}>
103 <div className={styles['contact__icon-holder']}>
104 <MapPin aria-hidden="true" className={styles.contact__icon} />
105 </div>
106 <div className={styles.contact__content}>
107 <h3 className={styles.contact__title}>Office</h3>
108 <p className={styles.contact__value}>
109 <Link
110 to="https://www.openstreetmap.org/way/24726476#map=19/47.47263/19.06006"
111 className={styles.contact__link}
112 >
113 H-1117 Budapest, Magyar tudósok körútja 2., Building I, Room
114 B.417
115 </Link>
116 </p>
117 </div>
118 </div>
119 </div>
120 </div>
121 <div className="row">
122 <div className={clsx('col', 'col--12', styles.col)}>
123 <div
124 className={styles.photo__container}
125 style={{ backgroundImage: `url("${photo.placeholder}")` }}
126 >
127 <img
128 src={photo.src}
129 srcSet={photo.srcSet}
130 width={photo.width}
131 height={photo.height}
132 sizes="(min-width: 1384px) 1288px, (min-width: 996px) calc(100vw - 96px), (min-width: 676px) calc(100vw - 32px), 644px"
133 loading="lazy"
134 alt=""
135 className={styles.photo}
136 />
137 </div>
138 </div>
139 </div>
140 <div className="row">
141 <div className={clsx('col', 'col--6', styles.col)}>
142 <div className={styles.contact}>
143 <div className={styles['contact__icon-holder']}>
144 <HandWaving
145 aria-hidden="true"
146 className={styles.contact__icon}
147 />
148 </div>
149 <div className={styles.contact__content}>
150 <h3 className={styles.contact__title}>Personal e-mail</h3>
151 <p className={styles.contact__value}>
152 <Link
153 to="mailto:kristof@marussy.com"
154 className={styles.contact__link}
155 >
156 kristof@marussy.com
157 </Link>{' '}
158 <span className={styles.small}>
159 <Link
160 to="https://keyoxide.org/7AADE6E800F1979D2A13EEBBB00C29F3D5A628AF"
161 className={clsx(
162 styles.contact__action,
163 styles.small__link,
164 )}
165 >
166 <GPGIcon alt="GPG key" className={styles.small__icon} />
167 </Link>
168 </span>
169 </p>
170 <p className={styles.contact__description}>
171 For messages about my projects, this website, or anything else
172 </p>
173 </div>
174 </div>
175 </div>
176 <div className={clsx('col', 'col--6', styles.col)}>
177 <div className={styles.contact}>
178 <div
179 className={clsx(
180 styles['contact__icon-holder'],
181 styles['contact__icon-holder--fediverse'],
182 )}
183 >
184 <FediverseIcon
185 className={clsx(
186 styles.contact__icon,
187 styles['contact__icon--fediverse'],
188 )}
189 />
190 </div>
191 <div className={styles.contact__content}>
192 <h3 className={styles.contact__title}>Follow me</h3>
193 <p className={styles.contact__value}>
194 <Link
195 to="https://pleroma.marussy.com/users/kristof"
196 className={styles.contact__link}
197 >
198 @kristof@marussy.com
199 </Link>
200 </p>
201 <p className={styles.contact__description}>
202 On the{' '}
203 <Link
204 to="https://fediverse.info"
205 className={styles.contact__action}
206 >
207 Fediverse
208 </Link>
209 , a diverse community of interconnected platforms
210 </p>
211 </div>
212 </div>
213 </div>
214 </div>
215 </div>
216 </Section>
217 );
218}
diff --git a/src/components/landing/sections/Hero.module.css b/src/components/landing/sections/Hero.module.css
index ce0444f..0909c3f 100644
--- a/src/components/landing/sections/Hero.module.css
+++ b/src/components/landing/sections/Hero.module.css
@@ -37,6 +37,7 @@
37 37
38.avatar__image { 38.avatar__image {
39 width: 100%; 39 width: 100%;
40 height: auto;
40 max-width: 298px; 41 max-width: 298px;
41 border-radius: 100em; 42 border-radius: 100em;
42} 43}
@@ -48,7 +49,6 @@
48 font-size: 1.5rem; 49 font-size: 1.5rem;
49} 50}
50 51
51
52.introduction__name { 52.introduction__name {
53 font-family: var(--ifm-heading-font-family); 53 font-family: var(--ifm-heading-font-family);
54 font-weight: var(--ifm-heading-font-weight); 54 font-weight: var(--ifm-heading-font-weight);
diff --git a/src/components/landing/sections/Hero.tsx b/src/components/landing/sections/Hero.tsx
index 2773b9b..ee11048 100644
--- a/src/components/landing/sections/Hero.tsx
+++ b/src/components/landing/sections/Hero.tsx
@@ -16,10 +16,11 @@ import {
16 LinkedInIcon, 16 LinkedInIcon,
17 OrcidIcon, 17 OrcidIcon,
18} from '@site/src/components/icons'; 18} from '@site/src/components/icons';
19import avatar from '@site/src/pages/avatar.jpg?sizes[]=149&sizes[]=298&sizes[]=596&rl';
19 20
20import styles from './Hero.module.css'; 21import styles from './Hero.module.css';
21 22
22export default function Hero({ avatar }: { avatar: string }) { 23export default function Hero() {
23 return ( 24 return (
24 <header className={clsx('hero', 'hero--dark', styles.hero)}> 25 <header className={clsx('hero', 'hero--dark', styles.hero)}>
25 <div className="container"> 26 <div className="container">
@@ -27,7 +28,15 @@ export default function Hero({ avatar }: { avatar: string }) {
27 <div 28 <div
28 className={clsx('col', 'col--3', styles.hero__col, styles.avatar)} 29 className={clsx('col', 'col--3', styles.hero__col, styles.avatar)}
29 > 30 >
30 <img src={avatar} alt="My photo" className={styles.avatar__image} /> 31 <img
32 src={avatar.src}
33 srcSet={avatar.srcSet}
34 width={avatar.width}
35 height={avatar.height}
36 sizes="(min-width: 1384px) 298px, (min-width: 996px) calc(25vw - 48px), (min-width: 300px) 298px, calc(100vw - 32px)"
37 alt="My photo"
38 className={styles.avatar__image}
39 />
31 </div> 40 </div>
32 <div className={clsx('col', 'col--9', styles.hero__col)}> 41 <div className={clsx('col', 'col--9', styles.hero__col)}>
33 <h1 className={clsx('hero__title', styles.introduction)}> 42 <h1 className={clsx('hero__title', styles.introduction)}>
diff --git a/src/components/landing/sections/Research.tsx b/src/components/landing/sections/Research.tsx
index a295419..5f69d5e 100644
--- a/src/components/landing/sections/Research.tsx
+++ b/src/components/landing/sections/Research.tsx
@@ -33,7 +33,7 @@ function Topic({
33 children: ReactNode; 33 children: ReactNode;
34}) { 34}) {
35 return ( 35 return (
36 <div className={clsx('col', 'col-3', styles.topic)}> 36 <div className={clsx('col', 'col--3', styles.topic)}>
37 <div className={styles.topic__contents}> 37 <div className={styles.topic__contents}>
38 <div className={clsx(styles.topic__icon, style)}> 38 <div className={clsx(styles.topic__icon, style)}>
39 <Icon aria-hidden="true" size={128} weight="light" /> 39 <Icon aria-hidden="true" size={128} weight="light" />
diff --git a/src/components/landing/sections/Software.module.css b/src/components/landing/sections/Software.module.css
deleted file mode 100644
index 1d0db4d..0000000
--- a/src/components/landing/sections/Software.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
1/*
2 * SPDX-FileCopyrightText: 2023 Kristóf Marussy
3 *
4 * SPDX-License-Identifier: MIT
5 */
diff --git a/src/components/landing/sections/Software.tsx b/src/components/landing/sections/Software.tsx
deleted file mode 100644
index 8a421b5..0000000
--- a/src/components/landing/sections/Software.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
1/*
2 * SPDX-FileCopyrightText: 2023 Kristóf Marussy
3 *
4 * SPDX-License-Identifier: MIT
5 */
6
7import clsx from 'clsx';
8
9import Section from '@site/src/components/landing/Section';
10
11import styles from './Software.module.css';
12
13export default function Software() {
14 return <Section id="software" title="Software"></Section>;
15}
diff --git a/src/css/custom.css b/src/css/custom.css
index 2141aa3..6261ca7 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -68,3 +68,9 @@ h6,
68.button { 68.button {
69 --casl: 1; 69 --casl: 1;
70} 70}
71
72.hash-link {
73 font-weight: 500;
74 --casl: 0;
75 --mono: 1;
76}
diff --git a/src/pages/bme-building-i-cropped.jpg b/src/pages/bme-building-i-cropped.jpg
new file mode 100644
index 0000000..b5cad67
--- /dev/null
+++ b/src/pages/bme-building-i-cropped.jpg
Binary files differ
diff --git a/src/pages/bme-building-i-cropped.jpg.license b/src/pages/bme-building-i-cropped.jpg.license
new file mode 100644
index 0000000..fea5d17
--- /dev/null
+++ b/src/pages/bme-building-i-cropped.jpg.license
@@ -0,0 +1,6 @@
1SPDX-FileCopyrightText: 2024 Kristóf Marussy <kristof@marussy.com>
2
3SPDX-License-Identifier: CC0-1.0
4
5Placeholder image to replace the following third-party content:
6drone shot of BME building I.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 125c5d3..60f86ca 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -6,26 +6,22 @@
6 6
7import Layout from '@theme/Layout'; 7import Layout from '@theme/Layout';
8 8
9import Contact from '@site/src/components/landing/sections/Contact';
9import Hero from '@site/src/components/landing/sections/Hero'; 10import Hero from '@site/src/components/landing/sections/Hero';
10import Publications from '@site/src/components/landing/sections/Publications'; 11import Publications from '@site/src/components/landing/sections/Publications';
11import Research from '@site/src/components/landing/sections/Research'; 12import Research from '@site/src/components/landing/sections/Research';
12import Resume from '@site/src/components/landing/sections/Resume'; 13import Resume from '@site/src/components/landing/sections/Resume';
13import Software from '@site/src/components/landing/sections/Software';
14import Section from '@site/src/components/landing/Section';
15import TrackActiveSection from '@site/src/components/TrackActiveSection'; 14import TrackActiveSection from '@site/src/components/TrackActiveSection';
16 15
17import avatar from '@site/src/pages/avatar.jpg';
18
19export default function Home() { 16export default function Home() {
20 return ( 17 return (
21 <Layout> 18 <Layout>
22 <TrackActiveSection> 19 <TrackActiveSection>
23 <Hero avatar={avatar} /> 20 <Hero />
24 <Research /> 21 <Research />
25 <Publications /> 22 <Publications />
26 <Software />
27 <Resume /> 23 <Resume />
28 <Section id="contact" title="Contact" /> 24 <Contact />
29 </TrackActiveSection> 25 </TrackActiveSection>
30 </Layout> 26 </Layout>
31 ); 27 );
diff --git a/src/pages/license.mdx b/src/pages/license.mdx
index 1e55acd..eee4cf8 100644
--- a/src/pages/license.mdx
+++ b/src/pages/license.mdx
@@ -41,6 +41,8 @@ Restricted content on this site marked with the <ClosedAccessLink to="#content">
41 41
42- The photo of me apparing on the [home page](/) was taken by [SPOT Fotókör](https://spot.sch.bme.hu/) in 2019 for the [Critical Systems Research Group](https://ftsrg.mit.bme.hu/). 42- The photo of me apparing on the [home page](/) was taken by [SPOT Fotókör](https://spot.sch.bme.hu/) in 2019 for the [Critical Systems Research Group](https://ftsrg.mit.bme.hu/).
43 43
44- The drone shot of BME building I appearing in the [Contact](/#contact) section was taken by [Ákos Hajdu](https://hajduakos.github.io/) in 2020 for the [Critical Systems Research Group](https://ftsrg.mit.bme.hu/).
45
44- Unfortunately, some of my [publications](/#publications) appeared in closed access journal and proceedings. Even though neither me nor by colleagues received any compensation, the copyright of this content was assigned to the publisher, such as ACM or IEEE. 46- Unfortunately, some of my [publications](/#publications) appeared in closed access journal and proceedings. Even though neither me nor by colleagues received any compensation, the copyright of this content was assigned to the publisher, such as ACM or IEEE.
45 47
46 Whenever allowed by the current copyright holder, I posted the _final draft_ of the paper to this site. 48 Whenever allowed by the current copyright holder, I posted the _final draft_ of the paper to this site.
@@ -62,6 +64,7 @@ If you use only code or only content from such files, you only need to abide by
62The site also uses the following third-party code available under libre licenses: 64The site also uses the following third-party code available under libre licenses:
63 65
64- [Docusaurus](https://docusaurus.io/) static site generator, <MITLicenseLink /> 66- [Docusaurus](https://docusaurus.io/) static site generator, <MITLicenseLink />
67- [Fediverse logo proposal](<https://commons.wikimedia.org/w/index.php?title=File:Fediverse_logo_proposal_(mono_version).svg&oldid=794518552>) by [Eukombos](https://commons.wikimedia.org/wiki/User:Eukombos), <CCLicenseLink to="https://creativecommons.org/publicdomain/zero/1.0/">CC0-1.0</CCLicenseLink>
65- [Phosphor Icons](https://phosphoricons.com/), <MITLicenseLink /> 68- [Phosphor Icons](https://phosphoricons.com/), <MITLicenseLink />
66- [Recursive Sans and Mono](https://www.recursive.design/) fonts, <LicenseLink to="https://openfontlicense.org/open-font-license-official-text/">OFL-1.1</LicenseLink> 69- [Recursive Sans and Mono](https://www.recursive.design/) fonts, <LicenseLink to="https://openfontlicense.org/open-font-license-official-text/">OFL-1.1</LicenseLink>
67- [Simple Icons](https://simpleicons.org/), <CCLicenseLink to="https://creativecommons.org/publicdomain/zero/1.0/">CC0-1.0</CCLicenseLink> 70- [Simple Icons](https://simpleicons.org/), <CCLicenseLink to="https://creativecommons.org/publicdomain/zero/1.0/">CC0-1.0</CCLicenseLink>
diff --git a/src/plugins/responsiveLoaderPlugin.ts b/src/plugins/responsiveLoaderPlugin.ts
new file mode 100644
index 0000000..3dc198e
--- /dev/null
+++ b/src/plugins/responsiveLoaderPlugin.ts
@@ -0,0 +1,39 @@
1/*
2 * Copyright (c) 2016, Jeremy Stucki
3 * Copyright (c) 2024 Kristóf Marussy <kristof@marussy.com>
4 *
5 * SPDX-License-Identifier: MIT AND BSD-3-Clause
6 */
7
8import type { Plugin } from '@docusaurus/types';
9import sharp from 'responsive-loader/sharp';
10
11export default function responsiveLoaderPlugin(): Plugin {
12 return {
13 name: 'marussy-responsive-loader-plugin',
14 configureWebpack: () => ({
15 mergeStrategy: {
16 'module.rules': 'prepend',
17 },
18 // Configuration based on
19 // https://github.com/dazuaz/responsive-loader/blob/ef2c806fcd36f06f6be8a0b97e09f40c3d86d3ac/README.md
20 module: {
21 rules: [
22 {
23 test: /\.(png|jpe?g)$/,
24 use: [
25 {
26 loader: 'responsive-loader',
27 options: {
28 adapter: sharp,
29 format: 'webp',
30 },
31 },
32 ],
33 type: 'javascript/auto',
34 },
35 ],
36 },
37 }),
38 };
39}
diff --git a/src/types.d.ts b/src/types.d.ts
index e3ab6b7..a2ff976 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1,14 +1,23 @@
1/* 1/*
2 * SPDX-FileCopyrightText: 2023 Kristóf Marussy 2 * Copyright (c) 2016, Jeremy Stucki
3 * 3 *
4 * SPDX-License-Identifier: MIT 4 * SPDX-License-Identifier: BSD-3-Clause
5 *
6 * Typings copied from
7 * https://github.com/dazuaz/responsive-loader/blob/ef2c806fcd36f06f6be8a0b97e09f40c3d86d3ac/README.md
5 */ 8 */
6 9
7// Docusaurus doesn't contain module declarations for images, 10interface ResponsiveImageOutput {
8// so we add them ourselves. 11 src: string;
9// See https://github.com/facebook/docusaurus/issues/8683 12 srcSet: string;
13 placeholder: string | undefined;
14 images: { path: string; width: number; height: number }[];
15 width: number;
16 height: number;
17 toString: () => string;
18}
10 19
11declare module '*.jpg' { 20declare module '*&rl' {
12 const path: string; 21 const src: ResponsiveImageOutput;
13 export default path; 22 export default src;
14} 23}
generated by cgit v1.2.3-54-g00ecf (git 2.45.1) at 2024-06-01 02:52:57 +0000