Improve prague section. (#1119)

Author: nikoshell

astro.config.mjs

@@ -1,8 +1,6 @@
-import path, { dirname } from "path";
-import { fileURLToPath } from "url";
+import path from "path";
 import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
-import { h } from "hastscript";
 import sitemap from "@astrojs/sitemap";
 import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
@@ -13,9 +11,6 @@ import metaTags from "astro-meta-tags";
 import pagefind from "astro-pagefind";
 import deleteUnusedImages from "astro-delete-unused-images";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename); // @type-check enabled!
-
 // https://astro.build/config
 export default defineConfig({
   vite: {
@@ -24,6 +19,7 @@ export default defineConfig({
     },
     resolve: {
       alias: {
+        "@data": path.resolve("./src/data"),
         "@components": path.resolve("./src/components"),
         "@sections": path.resolve("./src/components/sections"),
         "@layouts": path.resolve("./src/layouts"),
@@ -80,4 +76,7 @@ export default defineConfig({
   build: {
     minify: true,
   },
+  experimental: {
+    svg: true,
+  },
 });

src/components/hero-section/prague.png renamed to src/assets/prague.png

@@ -1,9 +1,63 @@
 ---
-import PragueComponent from "@components/hero-section/prague.astro";
-import * as venue from "../../data/home/prague.mdx";
+import Button from "@ui/Button.astro";
+import { Title } from "@components/typography/title";
+import { Image } from "astro:assets";
+import pragueImage from "@assets/prague.png";
+import Logo from "@assets/prague.svg";
 ---
-  <div class="mt-12 px-6 pb-32 overflow-visible">
-    <PragueComponent title={venue.frontmatter.title}>
-      <venue.Content />
-    </PragueComponent>
-  </div>
+
+<div class="mt-12 px-6 pb-32 overflow-visible">
+  <article class="lg:grid gap-12 grid-cols-2">
+    <div class="relative hidden lg:block">
+      <Image
+        src={pragueImage}
+        class="w-full h-auto border-4 border-white rounded-lg shadow-lg"
+        alt="Beautiful view of Prague"
+        width={1200}
+        height={900}
+      />
+    </div>
+    <div class="flex flex-col justify-center">
+      <Title level={2}>Prague</Title>
+      <div
+        class:list={[
+          "mb-4 prose prose-xl",
+          "prose-h1:text-text prose-headings:font-title",
+          "prose-headings:text-text",
+        ]}
+      >
+        While we are getting the conference ready for you,
+        why don't you take a look at the beautiful city of Prague?
+      </div>
+      <div class="space-x-4 mb-5">
+        <Button url="/where"> Where is EuroPython? </Button>
+      </div>
+      <div class="space-x-12">
+        <Button url="/explore"> Explore Prague </Button>
+      </div>
+    </div>
+  </article>
+</div>
+
+<div class="city full-bleed" id="one">
+  <Logo />
+</div>
+
+<style>
+  article {
+    position: relative;
+    top: 20vh;
+    margin-top: -20vh;
+  }
+  .city {
+    position: relative;
+    top:0;
+    width: 100vw;
+  }
+  .city svg {
+    width: 100vw;
+    position: relative;
+    bottom: -4px;
+    z-index: -1;
+  }
+</style>

src/assets/prague.svg

@@ -16,7 +16,6 @@ import Prague from "@sections/prague.astro";
   <Updates />
 
   <KeynotersComponent />
-
   <Prague />
 
   <Sponsors />

src/components/hero-section/prague.astro

@@ -5,6 +5,7 @@
     "jsx": "react-jsx",
     "jsxImportSource": "react",
     "paths": {
+      "@data/*": ["src/data/*"],
       "@components/*": ["src/components/*"],
       "@sections/*": ["src/components/sections/*"],
       "@ui/*": ["src/components/ui/*"],