Skip to content

Commit 78f9b8f

Browse files
piotrgredowskipiotrgredowski
committed
feat(ui): make section headings clickable anchor links
1 parent 7756ef2 commit 78f9b8f

File tree

13 files changed

+92
-32
lines changed

13 files changed

+92
-32
lines changed

‎src/components/anchor-heading.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import type React from "react";
2+
import { Heading, Link } from "theme-ui";
3+
4+
type AnchorHeadingProps = React.ComponentProps<typeof Heading> & {
5+
anchor: string;
6+
};
7+
8+
export const AnchorHeading: React.FC<AnchorHeadingProps> = ({
9+
anchor,
10+
children,
11+
...headingProps
12+
}) => (
13+
<Heading {...headingProps}>
14+
<Link
15+
href={`#${anchor}`}
16+
sx={{
17+
color: "inherit",
18+
textDecoration: "none",
19+
"&:hover": { textDecoration: "underline" },
20+
}}
21+
>
22+
{children}
23+
</Link>
24+
</Heading>
25+
);

‎src/pages/index.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,16 @@ const Home = () => (
2424
content={genericInformation.socialDescription}
2525
/>
2626
<meta name="twitter:site" content="@pythonpizzaconf" />
27-
<meta property="og:image" content="https://warsaw.python.pizza/social-image.jpg" />
27+
<meta
28+
property="og:image"
29+
content="https://warsaw.python.pizza/social-image.jpg"
30+
/>
2831
<meta name="twitter:image:alt" content="Conference logo" />
2932
<meta name="twitter:title" content="Warsaw Python Pizza Conference!!" />
30-
<meta name="twitter:image" content="https://warsaw.python.pizza/social-image.jpg" />
33+
<meta
34+
name="twitter:image"
35+
content="https://warsaw.python.pizza/social-image.jpg"
36+
/>
3137
<meta
3238
name="twitter:description"
3339
content="Join the fun 🥳🎉🍕 on May 9, 2026"

‎src/sections/about.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
1-
import { Container, Heading, Paragraph } from "theme-ui";
1+
import { Container, Paragraph } from "theme-ui";
2+
3+
import { AnchorHeading } from "~/components/anchor-heading";
24

35
export const About = () => (
46
<Container id="about" variant="smallContainer">
5-
<Heading>Python Pizza is Coming to Warsaw!</Heading>
7+
<AnchorHeading anchor="about">
8+
Python Pizza is Coming to Warsaw!
9+
</AnchorHeading>
610
<Paragraph>
711
<b>Python Pizza</b>, an annual micro conference originating from Naples in
8-
2017, has made its mark in various cities in Germany, Italy, Cuba, Czechia, as well
9-
as in remote formats. Now it&apos;s Warsaw&apos;s turn to host this amazing Python community event!
12+
2017, has made its mark in various cities in Germany, Italy, Cuba,
13+
Czechia, as well as in remote formats. Now it&apos;s Warsaw&apos;s turn to
14+
host this amazing Python community event!
1015
</Paragraph>
1116
<br />
1217
<Paragraph>

‎src/sections/announcements.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Container, Heading, Paragraph } from "theme-ui";
1+
import { Container, Paragraph } from "theme-ui";
22

3+
import { AnchorHeading } from "~/components/anchor-heading";
34
import { ContentButton } from "~/components/header";
45

56
export const Announcements = () => (
67
<Container id="announcements" variant="smallContainer">
7-
<Heading>Sign up for important announcements</Heading>
8+
<AnchorHeading anchor="announcements">
9+
Sign up for important announcements
10+
</AnchorHeading>
811
<Paragraph>
912
If you&apos;re interested in receiving notifications about our schedule or
1013
ticket sales, please fill in the linked form. You will receive only four

‎src/sections/cfp.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Box, Container, Heading, Paragraph } from "theme-ui";
1+
import { Box, Container, Paragraph } from "theme-ui";
22

3+
import { AnchorHeading } from "~/components/anchor-heading";
34
import { ContentButton } from "~/components/header";
45

56
export const CFP = () => (
67
<Container id="cfp" variant="smallContainer">
7-
<Heading>Call For Proposals is open until April 12 2026, 23:59 CET</Heading>
8+
<AnchorHeading anchor="cfp">
9+
Call For Proposals is open until April 12 2026, 23:59 CET
10+
</AnchorHeading>
811
<Paragraph>
912
<a
1013
href="https://forms.gle/76iATyPAkA3fw2DDA"

‎src/sections/cfp_closed.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import { Box, Container, Heading, Paragraph } from "theme-ui";
1+
import { Container, Paragraph } from "theme-ui";
22

3-
import { ContentButton } from "~/components/header";
3+
import { AnchorHeading } from "~/components/anchor-heading";
44

55
export const CFP_Closed = () => (
66
<Container id="cfp" variant="smallContainer">
7-
<Heading>Proposals submission is now closed</Heading>
7+
<AnchorHeading anchor="cfp">
8+
Proposals submission is now closed
9+
</AnchorHeading>
810
<Paragraph>
9-
We would like to thank everyone who submitted their proposals! We are now compiling the final version of the event schedule.
11+
We would like to thank everyone who submitted their proposals! We are now
12+
compiling the final version of the event schedule.
1013
</Paragraph>
11-
1214
</Container>
1315
);

‎src/sections/coc.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Container, Heading, Paragraph } from "theme-ui";
22
import { jsx } from "theme-ui";
33

4+
import { AnchorHeading } from "~/components/anchor-heading";
5+
46
const CocHeading = ({ children, as }) => (
57
<Heading
68
as={as}
@@ -12,9 +14,9 @@ const CocHeading = ({ children, as }) => (
1214

1315
export const Coc = () => (
1416
<Container id="coc" sx={{ textAlign: "left" }} variant="smallContainer">
15-
<Heading sx={{ textAlign: "center" }} as="h1">
17+
<AnchorHeading anchor="coc" sx={{ textAlign: "center" }} as="h1">
1618
Code of Conduct
17-
</Heading>
19+
</AnchorHeading>
1820
<CocHeading as="h2">Purpose</CocHeading>
1921
<Paragraph>
2022
Warsaw Python Pizza is dedicated to providing a harassment-free conference

‎src/sections/organizers.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from "react";
2-
import { Container, Grid, Heading, Paragraph } from "theme-ui";
2+
import { Container, Grid, Paragraph } from "theme-ui";
33

4+
import { AnchorHeading } from "~/components/anchor-heading";
45
import Organizer from "./organizer";
56
import { ORGANIZERS } from "~/data/organizers";
67

7-
88
export const OrganizerSection = () => {
99
return (
1010
<Container id="organizers" variant="smallContainer">
11-
<Heading>Organizers</Heading>
11+
<AnchorHeading anchor="organizers">Organizers</AnchorHeading>
1212
<Paragraph>
1313
Python Pizza is brought to life by volunteers. Everyone from our
1414
organizing team to our amazing speakers are donating their time to make

‎src/sections/schedule.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
import {Container, Heading, Paragraph} from "theme-ui";
1+
import { Container, Paragraph } from "theme-ui";
22

3+
import { AnchorHeading } from "~/components/anchor-heading";
34
import { ScheduleCard } from "~/components/schedule-card";
45
import { SCHEDULE } from "~/data/schedule";
56

67
export const Schedule = () => (
78
<Container id="schedule" variant="smallContainer">
8-
<Heading>Program</Heading>
9+
<AnchorHeading anchor="schedule">Program</AnchorHeading>
910

1011
<Paragraph>
11-
The full schedule will be announced soon! Stay tuned for exciting Python talks and presentations.
12+
The full schedule will be announced soon! Stay tuned for exciting Python
13+
talks and presentations.
1214
</Paragraph>
1315

1416
{SCHEDULE.map((schedule, index) => (

‎src/sections/speakers.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
2-
import { Container, Heading } from "theme-ui";
2+
import { Container } from "theme-ui";
33

4+
import { AnchorHeading } from "~/components/anchor-heading";
45
import Speaker from "./speaker";
56

67
const speakersData = [
@@ -21,7 +22,7 @@ const speakersData = [
2122
export const SpeakersSection = () => {
2223
return (
2324
<Container id="keynote" variant="smallContainer">
24-
<Heading>Keynote speakers</Heading>
25+
<AnchorHeading anchor="keynote">Keynote speakers</AnchorHeading>
2526
<div style={{ display: "flex", justifyContent: "space-around" }}>
2627
{speakersData.map((speaker) => (
2728
<Speaker

0 commit comments

Comments
 (0)