Homepage updates may

README.md

@@ -2,7 +2,7 @@ MunichMakerLab Website
 
 this website has been built with astro and tries to minimize the gotchas and special purpose additions for maintainabilities sake.
 
-## 🚀 Project Structure
+## Project Structure
 
 Inside of this project, you'll see the following folders and files:
 
@@ -21,7 +21,7 @@ Inside of this project, you'll see the following folders and files:
 To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
 Tl;dr: The actual pages of the website are in [src/pages](/src/pages/) and are mostly markdown. Adding another page should be as easy as just creating another file, copy-pasting the head section and customizing it and the page itself.
 
-## 🧞 Commands
+## Commands
 
 All commands are run from the root of the project, from a terminal:
 
@@ -35,7 +35,8 @@ All commands are run from the root of the project, from a terminal:
 | `npm run astro -- --help` | Get help using the Astro CLI                     |
 | `npm run lint`            | Lint the project with ESLint                     |
 | `npm run format:check`    | Check Code Styling with Prettier                 |
+| `npm run format:fix`      | Check Code Styling with Prettier and fix         |
 
-## 👀 Want to learn more?
+## More Docs
 
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+[Astr documentation](https://docs.astro.build) or [Discord server](https://astro.build/chat).

package.json

@@ -8,7 +8,8 @@
     "preview": "astro preview",
     "astro": "astro",
     "lint": "eslint .",
-    "format:check": "prettier --check ."
+    "format:check": "prettier --check .",
+    "format:fix": "prettier --write ."
   },
   "dependencies": {
     "@astrojs/markdoc": "^1.0.4",

src/components/Calendar.vue

@@ -209,6 +209,21 @@ const calendarOptions = computed(() => ({
   --fc-list-event-hover-bg-color: var(--card);
 }
 
+/* Smaller event text */
+.calendar-container :deep(.fc-event-title),
+.calendar-container :deep(.fc-event-time),
+.calendar-container :deep(.fc-list-event-title),
+.calendar-container :deep(.fc-list-event-time) {
+  font-size: 0.8rem;
+}
+
+/* Reset global link color so FullCalendar's own color system controls text */
+.calendar-container :deep(a) {
+  color: inherit;
+  text-decoration: none;
+  text-decoration-color: initial;
+}
+
 .event-popover {
   position: fixed; /* Fixed allows it to float over everything regardless of calendar scroll */
   z-index: 1000;

src/components/Footer.astro

@@ -42,12 +42,7 @@ const t = getUiTranslations(locale);
     <a href="https://github.com/munichmakerlab">
       <Icon name="mdi:github" />
     </a>
-    <a
-      href="https://www.meetup.com/the-hacking-room-project-munich/"
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label="Meetup"
-    >
+    <a href="https://www.meetup.com/munichmakerlab/" target="_blank" rel="noopener noreferrer" aria-label="Meetup">
       <Icon name="mdi:meetup" />
     </a>
     <a href="https://www.youtube.com/channel/UCTZVQ5naAWNuawd1DLnmlQA">

src/components/ImpressionGallery.astro

@@ -0,0 +1,75 @@
+---
+import type { ImageMetadata } from 'astro';
+import { Image, getImage } from 'astro:assets';
+
+const rawModules = import.meta.glob<{ default: ImageMetadata }>(
+  '../assets/impressions/*.{jpg,jpeg,png,webp,JPG,JPEG,PNG,WEBP}',
+  { eager: true },
+);
+
+const images = await Promise.all(
+  Object.values(rawModules).map(async (mod) => {
+    const src = mod.default;
+    const full = await getImage({ src, format: 'webp' });
+    return { src, fullSrc: full.src, width: src.width, height: src.height };
+  }),
+);
+---
+
+{
+  images.length > 0 && (
+    <div id="impressions-gallery" class="impressions-grid">
+      {images.map(({ src, fullSrc, width, height }) => (
+        <a href={fullSrc} data-pswp-width={width} data-pswp-height={height}>
+          <Image src={src} alt="" width={600} height={400} />
+        </a>
+      ))}
+    </div>
+  )
+}
+
+<script>
+  import PhotoSwipeLightbox from 'photoswipe/lightbox';
+  import 'photoswipe/style.css';
+
+  const lightbox = new PhotoSwipeLightbox({
+    gallery: '#impressions-gallery',
+    children: 'a',
+    pswpModule: () => import('photoswipe'),
+  });
+  lightbox.init();
+</script>
+
+<style>
+  .impressions-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    margin: 1rem 0;
+  }
+
+  .impressions-grid a {
+    display: block;
+    overflow: hidden;
+    border-radius: 6px;
+    aspect-ratio: 4/3;
+  }
+
+  .impressions-grid img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+  }
+
+  .impressions-grid img:hover {
+    transform: scale(1.03);
+  }
+
+  @media (max-width: 600px) {
+    .impressions-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+</style>

src/components/LightboxImage.astro

@@ -0,0 +1,35 @@
+---
+import type { ImageMetadata } from 'astro';
+import { Image, getImage } from 'astro:assets';
+
+interface Props {
+  src: ImageMetadata;
+  alt: string;
+  width?: number;
+}
+
+const { src, alt, width = 800 } = Astro.props;
+const full = await getImage({ src, format: 'webp' });
+---
+
+<div class="lightbox-single">
+  <a href={full.src} data-pswp-width={src.width} data-pswp-height={src.height}>
+    <Image src={src} alt={alt} width={width} style="cursor: zoom-in;" />
+  </a>
+</div>
+
+<script>
+  import PhotoSwipeLightbox from 'photoswipe/lightbox';
+  import 'photoswipe/style.css';
+
+  document.querySelectorAll('.lightbox-single').forEach((el, i) => {
+    const id = `lightbox-single-${i}`;
+    el.id = id;
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: `#${id}`,
+      children: 'a',
+      pswpModule: () => import('photoswipe'),
+    });
+    lightbox.init();
+  });
+</script>

src/components/Navbar.vue

@@ -63,13 +63,22 @@ const links = [
     name: t.navbar.visit,
     path: props.navLinks.visit,
   },
+  {
+    name: t.navbar.events,
+    path: props.navLinks.events,
+  },
+
+  {
+    name: t.navbar.join,
+    path: props.navLinks.join,
+  },
   {
     name: t.navbar.contact,
     path: props.navLinks.contact,
   },
   {
-    name: t.navbar.events,
-    path: props.navLinks.events,
+    name: t.navbar.donate,
+    path: props.navLinks.donate,
   },
   {
     name: t.navbar.wiki,

src/i18n/ui/de.ts

@@ -20,6 +20,8 @@ export const de: Translations = {
     contact: 'Kontakt',
     events: 'Events',
     wiki: 'Wiki',
+    donate: 'Spenden',
+    join: 'Mitmachen',
   },
   footer: {
     formerChannels: 'Frühere Kanäle:',

src/i18n/ui/en.ts

@@ -18,6 +18,8 @@ export const en = {
     contact: 'Contact',
     events: 'Events',
     wiki: 'Wiki',
+    donate: 'Donate',
+    join: 'Join Us',
   },
   footer: {
     formerChannels: 'Former channels:',

src/layouts/Content.astro

@@ -12,6 +12,8 @@ const navLinks = {
   visit: getRelativeLocaleUrl(currentLocale, '/visit'),
   contact: getRelativeLocaleUrl(currentLocale, '/contact'),
   events: getRelativeLocaleUrl(currentLocale, '/events/'),
+  join: getRelativeLocaleUrl(currentLocale, '/join'),
+  donate: getRelativeLocaleUrl(currentLocale, '/donate'),
 };
 ---
 
@@ -68,6 +70,7 @@ const navLinks = {
     color-scheme: light;
     font-family: 'Lora', Arial, Helvetica, sans-serif;
     font-size: 20px;
+    line-height: 1.75;
     --bg: #ffffff;
     --fg: #404040;
     --muted: #666666;
@@ -105,21 +108,24 @@ const navLinks = {
   }
 
   a {
-    color: var(--fg);
+    color: var(--link);
+    text-underline-offset: 3px;
+    text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
+    transition:
+      text-decoration-color 0.15s ease,
+      color 0.15s ease;
   }
-  .content {
-    width: 50vw;
-    margin: auto;
-    margin-top: 5rem;
+  a:hover {
+    text-decoration-color: var(--link);
   }
 
-  @media (max-width: 950px) {
-    .content {
-      width: 90vw;
-    }
-    .content img {
-      max-width: 100%;
-      height: auto;
-    }
+  .content {
+    max-width: 1400px;
+    width: 90%;
+    margin: 5rem auto 0;
+  }
+  .content img {
+    max-width: 100%;
+    height: auto;
   }
 </style>