Skip to content

Commit 318e73b

Browse files
nikoshellnikoshell
committed
Fix issues.
1 parent 67c5620 commit 318e73b

File tree

5 files changed

+106
-249
lines changed

5 files changed

+106
-249
lines changed

‎src/components/Footer.astro‎

Lines changed: 6 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,11 @@
11
---
2-
import Icon from "@ui/Icon.astro";
2+
import SocialLinks from "@components/SocialLinks.astro";
33
import links from "@data/links.json";
44
import EPSLogo from "../../public/eps-logo.svg";
55
66
const buildTimestamp = __TIMESTAMP__;
77
const gitVersion = __GIT_VERSION__;
88
9-
const socialLinks = [
10-
{ key: "website", icon: "globe", label: "Website" },
11-
{ key: "blog", icon: "rss", label: "Blog" },
12-
{ key: "linkedin", icon: "linkedin", label: "LinkedIn" },
13-
{ key: "github", icon: "github", label: "GitHub" },
14-
{ key: "mastodon", icon: "mastodon", label: "Mastodon" },
15-
{ key: "bluesky", icon: "bluesky", label: "Bluesky" },
16-
{ key: "twitter", icon: "x-twitter", label: "Twitter" },
17-
{ key: "instagram", icon: "instagram", label: "Instagram" },
18-
{ key: "youtube", icon: "youtube", label: "YouTube" }
19-
];
20-
219
---
2210

2311
<div
@@ -49,11 +37,11 @@ const socialLinks = [
4937
</ul>
5038
) : (
5139
<a
52-
href={section.path}
40+
href={section["path"]}
5341
class="text-gray-700 hover:text-primary-hover transition-colors duration-200"
5442
>
5543
{section.name}
56-
{section.path?.startsWith("http") && (
44+
{section["path"].startsWith("http") && (
5745
<span class="inline-block ml-1">↗</span>
5846
)}
5947
</a>
@@ -105,59 +93,9 @@ We're open to partnership opportunities and would love to hear your ideas.
10593
))}
10694
</div>
10795

108-
<div class="social-links flex justify-center space-x-4 opacity-40">
109-
{socialLinks
110-
.filter((link) => links.socials?.[link.key])
111-
.map((link) => {
112-
if (!links.socials) return;
113-
const url = links.socials[link.key];
114-
let iconColor:string;
115-
116-
switch(link.key) {
117-
case "facebook":
118-
iconColor = "facebook";
119-
break;
120-
case "twitter":
121-
iconColor = "twitter";
122-
break;
123-
case "linkedin":
124-
iconColor = "linkedin";
125-
break;
126-
case "github":
127-
iconColor = "github";
128-
break;
129-
case "instagram":
130-
iconColor = "instagram";
131-
break;
132-
case "discord":
133-
iconColor = "discord";
134-
break;
135-
case "mastodon":
136-
iconColor = "mastodon";
137-
break;
138-
case "bluesky":
139-
iconColor = "bluesky";
140-
break;
141-
default:
142-
iconColor = "";
143-
break;
144-
}
145-
146-
return (
147-
<a
148-
href={url}
149-
target="_blank"
150-
rel="noopener noreferrer"
151-
aria-label={link.label}
152-
class={`social-icon ${iconColor}`}
153-
>
154-
<span class="social-icon-inner">
155-
<Icon name={link.icon} style="brands" size="fa-xl" />
156-
</span>
157-
</a>
158-
);
159-
})}
160-
</div>
96+
{ links && links["socials"] &&
97+
<SocialLinks socials={links["socials"]} variant="white" class="opacity-40" />
98+
}
16199
</div>
162100
<style>
163101
.links > div:first-child {

‎src/components/Header.astro‎

Lines changed: 45 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -7,78 +7,56 @@ import Search from "@components/Search.astro";
77
import links from "../data/links.json";
88
---
99

10-
<section id="navbar" class="fixed top-0 z-50 transition-transform duration-300 transform-gpu w-full">
11-
<div class="container max-w-[1150px] mx-auto py-1 mt-1 lg:p-2 lg:mt-6 px-2 flex items-center justify-between relative z-40 bg-white/80 rounded-full backdrop-blur-md shadow-lg">
12-
<input
13-
type="checkbox"
14-
name="mobile-controls"
15-
id="nav_toggle"
16-
class="hidden peer"
17-
aria-hidden="true"
18-
/>
19-
20-
<HeaderLogo />
10+
<section
11+
id="navbar"
12+
class="fixed top-0 z-50 transition-transform duration-300 transform-gpu w-full"
13+
>
14+
<div
15+
class="container max-w-[1150px] mx-auto px-6 py-2 mt-1 lg:p-2 lg:mt-6 px-2 flex items-center justify-between relative z-40 bg-white/80 rounded-full backdrop-blur-md shadow-lg"
16+
>
17+
<input
18+
type="checkbox"
19+
name="mobile-controls"
20+
id="nav_toggle"
21+
class="hidden peer"
22+
aria-hidden="true"
23+
/>
24+
25+
<HeaderLogo />
26+
27+
<nav class="hidden xl:block">
28+
<NavItems items={links.header} />
29+
</nav>
2130

22-
<nav class="hidden xl:block">
23-
<NavItems items={links.header} />
24-
</nav>
31+
<HeaderActions />
2532

26-
<HeaderActions />
33+
<div
34+
class="fixed bg-body-background top-0 left-0 w-screen h-screen overflow-scroll hidden peer-checked:block xl:peer-checked:hidden z-50 px-6 py-2"
35+
>
36+
<div class="flex items-center justify-between">
37+
<HeaderLogo />
38+
<HeaderActions mobile />
39+
</div>
2740

28-
<div
29-
class="fixed bg-body-background top-0 left-0 w-screen h-screen overflow-scroll hidden peer-checked:block xl:peer-checked:hidden z-50 px-6 py-2 "
30-
>
31-
<div class="flex items-center justify-between">
32-
<HeaderLogo />
33-
<HeaderActions mobile />
41+
<nav class="mt-8">
42+
<NavItems items={[...links.header]} />
43+
</nav>
3444
</div>
35-
36-
<nav class="mt-8">
37-
<NavItems
38-
items={[
39-
{
40-
name: "Code of Conduct",
41-
path: "https://www.europython-society.org/coc/",
42-
},
43-
/*
44-
{
45-
name: "Live 📺",
46-
path: "/live",
47-
},
48-
*/
49-
{
50-
name: "Recordings",
51-
path: "https://www.youtube.com/playlist?list=PL8uoeex94UhE1CbtkDK4hevp2lBif57Nq",
52-
},
53-
...links.header,
54-
]}
55-
/>
56-
</nav>
5745
</div>
58-
</div>
5946
</section>
6047
<Search />
6148

62-
<script>
63-
let prevScrollPos = window.pageYOffset;
64-
const navbar = document.getElementById("navbar");
65-
66-
// Auto-hide Navbar on scroll
67-
window.onscroll = function () {
68-
let currentScrollPos = window.pageYOffset;
69-
if (prevScrollPos > currentScrollPos) {
70-
navbar.style.transform = "translateY(0)";
71-
} else {
72-
navbar.style.transform = "translateY(-100%)";
73-
}
74-
prevScrollPos = currentScrollPos;
75-
};
76-
77-
// Mobile Menu Toggle
78-
//const menuBtn = document.getElementById("menu-btn");
79-
//const mobileMenu = document.getElementById("mobile-menu");
80-
//
81-
//menuBtn.addEventListener("click", () => {
82-
// mobileMenu.classList.toggle("hidden");
83-
//});
84-
</script>
49+
<script>
50+
let prevScrollPos = window.pageYOffset;
51+
const navbar = document.getElementById("navbar") as HTMLElement;
52+
53+
window.onscroll = function () {
54+
let currentScrollPos = window.pageYOffset;
55+
if (prevScrollPos > currentScrollPos) {
56+
navbar.style.transform = "translateY(0)";
57+
} else {
58+
navbar.style.transform = "translateY(-100%)";
59+
}
60+
prevScrollPos = currentScrollPos;
61+
};
62+
</script>

‎src/components/NavItems.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ const { items, inverted = false, level = 1 } = Astro.props;
107107
const navButtons = document.querySelectorAll('[role="menuitem"][aria-haspopup="true"]');
108108

109109
navButtons.forEach(button => {
110-
button.addEventListener('keydown', (e) => {
110+
button.addEventListener('keydown', (e:any) => {
111111
const key = e.key;
112112

113113
if (key === 'Enter' || key === ' ' || key === 'ArrowDown') {
@@ -120,14 +120,14 @@ const { items, inverted = false, level = 1 } = Astro.props;
120120
});
121121

122122
// Close submenu when focus leaves
123-
button.addEventListener('blur', (e) => {
123+
button.addEventListener('blur', (e:any) => {
124124
if (!e.currentTarget.contains(e.relatedTarget)) {
125125
toggleSubmenu(button, false);
126126
}
127127
});
128128
});
129129

130-
function toggleSubmenu(button, show) {
130+
function toggleSubmenu(button:any, show:any) {
131131
const expanded = button.getAttribute('aria-expanded') === 'true';
132132

133133
if (show && !expanded) {
@@ -144,9 +144,9 @@ const { items, inverted = false, level = 1 } = Astro.props;
144144
}
145145

146146
// Add arrow key navigation within same level
147-
const menuLists = document.querySelectorAll('[role="menu"], [role="menubar"]');
147+
const menuLists = document.querySelectorAll('[role="menu"], [role="menubar"]') as NodeListOf<HTMLElement>;
148148
menuLists.forEach(menu => {
149-
const menuItems = menu.querySelectorAll('[role="menuitem"]');
149+
const menuItems = menu.querySelectorAll('[role="menuitem"]') as NodeListOf<HTMLElement>;
150150

151151
menuItems.forEach((item, index) => {
152152
item.addEventListener('keydown', (e) => {

‎src/components/SocialLinks.astro‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
import Icon from "@ui/Icon.astro";
3+
4+
const {
5+
class: className,
6+
socials,
7+
variant = "color",
8+
} = Astro.props;
9+
const socialMap = {
10+
website: { icon: "globe", label: "Website", color: "#0077b5" },
11+
blog: { icon: "rss", label: "Blog", color: "" },
12+
linkedin: { icon: "linkedin", label: "LinkedIn", color: "#0a66c2" },
13+
github: { icon: "github", label: "GitHub", color: "#333333" },
14+
mastodon: { icon: "mastodon", label: "Mastodon", color: "#6364ff" },
15+
bluesky: { icon: "bluesky", label: "Bluesky", color: "#0085ff" },
16+
twitter: { icon: "x-twitter", label: "Twitter", color: "#1da1f2" },
17+
instagram: { icon: "instagram", label: "Instagram", color: "#e4405f" },
18+
discord: { icon: "discord", label: "Discord", color: "#5865f2" },
19+
facebook: { icon: "facebook", label: "Facebook", color: "#1877f2" },
20+
};
21+
---
22+
23+
<div class=`social-links flex justify-center space-x-4 ${className}`>
24+
{
25+
Object.entries(socialMap)
26+
.filter(([key]) => socials?.[key])
27+
.map(([key, { icon, label, color }]) => {
28+
const url = socials[key];
29+
const style = variant === "color" && color ? `color: ${color}` : {variant};
30+
return (
31+
<a
32+
href={url}
33+
target="_blank"
34+
rel="noopener noreferrer"
35+
aria-label={label}
36+
class="social-icon"
37+
style={style}
38+
>
39+
{" "}
40+
<span class="social-icon-inner">
41+
{" "}
42+
<Icon name={icon} style="brands" size="fa-xl" />{" "}
43+
</span>{" "}
44+
</a>
45+
);
46+
})
47+
}
48+
</div>

0 commit comments

Comments
 (0)