Merge branch 'ep2025' into ep2025-overview

Author: clytaemnestra

.github/workflows/preview.yml

@@ -32,19 +32,21 @@ jobs:
       - name: Install dependencies
         run: make install
 
+      - name: Get current branch name
+        run: |
+          BRANCH_NAME=$(make safe_branch BRANCH=$GITHUB_BRANCH_NAME)
+          echo "BRANCH_NAME=${BRANCH_NAME}" >> $GITHUB_ENV
+
       - name: Build the website
-        run: make build PREVIEW=true
+        run:
+          make build PREVIEW=true
+          SITE_URL="https://${BRANCH_NAME}.ep-preview.click"
 
       - name: Set up SSH key
         uses: webfactory/[email protected]
         with:
           ssh-private-key: ${{ secrets.DEPLOY_SSH_KEY }}
 
-      - name: Get current branch name
-        run: |
-          BRANCH_NAME=$(make safe_branch BRANCH=$GITHUB_BRANCH_NAME)
-          echo "BRANCH_NAME=${BRANCH_NAME}" >> $GITHUB_ENV
-
       - name: ssh keyscan
         run: ssh-keyscan "static.europython.eu" > ~/.ssh/known_hosts
 

.readthedocs.yaml

@@ -20,6 +20,6 @@ build:
   commands:
     - npm install -g pnpm@latest-10
     - make install
-    - make build PREVIEW=true
+    - make build PREVIEW=true SITE_URL=$READTHEDOCS_CANONICAL_URL
     - mkdir -p $READTHEDOCS_OUTPUT/html
     - cd dist && cp -r * $READTHEDOCS_OUTPUT/html

Makefile

@@ -6,6 +6,7 @@ VPS_HOST  ?= static.europython.eu
 VPS_PROD_PATH  ?= /home/static_content_user/content/europython_websites/ep2025
 VPS_PREVIEW_PATH  ?= /home/static_content_user/content/previews
 REMOTE_CMD=ssh $(VPS_USER)@$(VPS_HOST)
+PREVIEW_SITE_URL ?= "https://$(SAFE_BRANCH).ep-preview.click"
 
 # Variables for build/deploy
 # ==========================
@@ -47,13 +48,14 @@ build:
 preview: RELEASES_DIR = $(VPS_PREVIEW_PATH)/$(SAFE_BRANCH)/releases
 preview: TARGET = $(RELEASES_DIR)/$(TIMESTAMP)
 preview:
-	@echo "Preview site URL: $(SITE_URL)"  # Output preview URL
+	@echo "Preview site URL: $(PREVIEW_SITE_URL)"
 	echo $(TARGET)
 	@echo "\n\n**** Deploying preview of a branch '$(BRANCH)' (safe: $(SAFE_BRANCH)) to $(TARGET)...\n\n"
 	$(REMOTE_CMD) "mkdir -p $(TARGET)"
 	rsync -avz --delete ./dist/ $(VPS_USER)@$(VPS_HOST):$(TARGET)/
 	$(REMOTE_CMD) "cd $(RELEASES_DIR) && ln -snf $(TIMESTAMP) current"
 	@echo "\n\n**** Preview complete.\n\n"
+	@echo "Open the preview site at: $(PREVIEW_SITE_URL)\n\n"
 
 
 ifeq ($(FORCE_DEPLOY), true)

package.json

@@ -18,6 +18,7 @@
     "@astrojs/sitemap": "^3.3.0",
     "@astrojs/tailwind": "^5.1.4",
     "@fontsource-variable/inter": "^5.1.1",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@tailwindcss/typography": "^0.5.16",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.1",

pnpm-lock.yaml

@@ -1,8 +1,4 @@
 ---
-// Import the global.css file here so that it is included on
-// all pages through the use of the <BaseHead /> component.
-import "../styles/global.css";
-import "@fontsource-variable/inter";
 
 interface Props {
   title: string;
@@ -58,8 +54,3 @@ const { title, description, image = "/social-card.png" } = Astro.props;
   is:inline
   data-domain="ep2025.europython.eu"
   src="https://plausible.io/js/script.js"></script>
-
-<script
-  is:inline
-  src="https://kit.fontawesome.com/14a4971ab3.js"
-  crossorigin="anonymous"></script>

src/components/BaseHead.astro

@@ -8,6 +8,7 @@ const buildTimestamp = import.meta.env.TIMESTAMP;
 const gitVersion = import.meta.env.GIT_VERSION;
 ---
 
+      <div class="mt-auto">
 <Fullbleed className="bg-primary text-white">
   <footer
     class="max-w-4xl lg:max-w-6xl mx-auto py-16 lg:grid grid-cols-2 px-6 gap-60"
@@ -106,3 +107,4 @@ const gitVersion = import.meta.env.GIT_VERSION;
     </article>
   </footer>
 </Fullbleed>
+</div>

src/components/footer.astro renamed to src/components/Footer.astro

@@ -1,10 +1,10 @@
 ---
 import { promises as fs } from "fs";
-import { NavItems } from "../nav-items";
-import HeaderActions from "./header-actions.astro";
-import HeaderLogo from "./header-logo.astro";
+import { NavItems } from "@components/nav-items";
+import HeaderActions from "@components/header/header-actions.astro";
+import HeaderLogo from "@components/header/header-logo.astro";
 
-const links = JSON.parse(await fs.readFile("./src/data/links.json", "utf-8"));
+import links from "../data/links.json";
 ---
 
 <header class="p-6 flex items-center justify-between relative z-40">
@@ -27,7 +27,7 @@ const links = JSON.parse(await fs.readFile("./src/data/links.json", "utf-8"));
   <div
     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 p-6"
   >
-    <div class="flex items-center">
+    <div class="flex items-center justify-between">
       <HeaderLogo />
       <HeaderActions mobile />
     </div>

src/components/header/header.astro renamed to src/components/Header.astro

@@ -0,0 +1,115 @@
+---
+import Button from '@ui/Button.astro';
+const { id = 'modal', open = false, closeOnOutsideClick = false } = Astro.props;
+---
+<div
+  id={id}
+  class={`fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300 ${
+    open ? 'opacity-100 visible bg-black/50' : 'opacity-0 invisible'
+  }`}
+  data-modal-wrapper
+  data-close-on-outside-click={closeOnOutsideClick.toString()}
+>
+  <div
+    class="relative bg-white dark:bg-gray-800 p-6 lg:rounded-2xl lg:shadow-xl lg:max-w-4xl lg:mx-4 h-full lg:h-[80vh] w-full lg:w-[70vw] max-h-full overflow-y-auto"
+    data-modal-content
+  >
+    <Button
+      id="search-close"
+      clear
+      icon="close"
+      iconSize="fa-xl"
+      data-close-modal
+      class="w-[3em] h-[3em] absolute top-4 right-4 text-primary hover:text-black "
+    />
+    <slot />
+  </div>
+</div>
+<script is:inline>
+  document.addEventListener('DOMContentLoaded', () => {
+    // Function to toggle body scroll
+    const toggleBodyScroll = (disable) => {
+      if (disable) {
+        // Save the current scroll position
+        const scrollY = window.scrollY;
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${scrollY}px`;
+        document.body.style.width = '100%';
+        document.body.dataset.scrollPosition = scrollY.toString();
+      } else {
+        // Restore scroll position
+        const scrollY = parseInt(document.body.dataset.scrollPosition || '0');
+        document.body.style.position = '';
+        document.body.style.top = '';
+        document.body.style.width = '';
+        window.scrollTo(0, scrollY);
+        delete document.body.dataset.scrollPosition;
+      }
+    };
+
+    // Function to open modal
+    const openModal = (modal) => {
+      if (modal) {
+        // Disable body scroll
+        toggleBodyScroll(true);
+        // Show modal
+        modal.classList.remove('opacity-0', 'invisible');
+        modal.classList.add('opacity-100', 'visible');
+      }
+    };
+
+    // Function to close modal
+    const closeModal = (modal) => {
+      if (modal) {
+        // Enable body scroll
+        toggleBodyScroll(false);
+        // Hide modal
+        modal.classList.remove('opacity-100', 'visible');
+        modal.classList.add('opacity-0', 'invisible');
+      }
+    };
+
+    // Open modal buttons
+    document.querySelectorAll('[data-open-modal]').forEach(button => {
+      button.addEventListener('click', () => {
+        const modal = document.getElementById(button.dataset.openModal);
+        openModal(modal);
+      });
+    });
+
+    // Close modal buttons
+    document.querySelectorAll('[data-close-modal]').forEach(button => {
+      button.addEventListener('click', () => {
+        const modal = button.closest('[data-modal-wrapper]');
+        closeModal(modal);
+      });
+    });
+
+    // Close when clicking outside the modal content - only if enabled
+    document.querySelectorAll('[data-modal-wrapper]').forEach(modal => {
+      const closeOnOutsideClick = modal.dataset.closeOnOutsideClick === 'true';
+
+      if (closeOnOutsideClick) {
+        modal.addEventListener('click', (event) => {
+          // Check if the click was on the wrapper but not on the content
+          if (event.target === modal) {
+            closeModal(modal);
+          }
+        });
+      }
+
+      // Initialize any modal that's set to open by default
+      if (modal.classList.contains('opacity-100') && modal.classList.contains('visible')) {
+        toggleBodyScroll(true);
+      }
+    });
+
+    // Handle escape key to close all modals
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        const visibleModals = document.querySelectorAll('[data-modal-wrapper].visible, [data-modal-wrapper].opacity-100');
+        visibleModals.forEach(modal => closeModal(modal));
+      }
+    });
+  });
+</script>