added dynamic announements

src/components/NewMap.jsx → src/components/NewMap.tsx

@@ -3,24 +3,36 @@ import * as maptilersdk from '@maptiler/sdk';
 import "@maptiler/sdk/dist/maptiler-sdk.css";
 import './map.css';
 
-export default function Map() {
+interface PropOptions {
+  airport: object;
+  id: string;
+}
+
+export default function Map(props: PropOptions) {
   const mapContainer = useRef(null);
   const map = useRef(null);
-  const tokyo = { lng: 12.648131871581867, lat: 55.62513369975767};
+  var airport = { lng: 12.648131871581867, lat: 55.62513369975767};
   const [zoom] = useState(15);
   maptilersdk.config.apiKey = 'YPWvjXSB1Key9mipDYw6';
+  if(props.airport) {
+    airport = props.airport
+  }
 
   useEffect(() => {
     if (map.current) return; // stops map from intializing more than once
 
     map.current = new maptilersdk.Map({
       container: mapContainer.current,
       style: "e9102954-ab40-4063-bca6-f84df33f9e0b",
-      center: [tokyo.lng, tokyo.lat],
-      zoom: zoom
+      center: [airport.lng, airport.lat],
+      zoom: zoom,
+      terrainControl: false,
+      scaleControl: false,
+      geolocateControl: false,
+      navigationControl: false
     });
 
-  }, [tokyo.lng, tokyo.lat, zoom]);
+  }, [airport.lng, airport.lat, zoom]);
 
   return (
     <div className="map-wrap">

src/components/navbar.astro

@@ -131,7 +131,7 @@ const menuitems = [
             )}
 
             {!item.children && (
-                <li>
+                <li class="relative">
                   <a
                       href={item.path}
                       class="flex lg:px-3 py-2 items-center text-vatsca3 dark:text-gray-200 hover:text-gray-900">

src/content/announcements/appointment-director-of-vatsim-scandinavia.md

@@ -0,0 +1,21 @@
+---
+    title: "[APPOINTMENT] Director of VATSIM Scandinavia"
+    author: Christian Kovanen
+    role: Director
+    date: 1/04/2024
+---
+he votes have now been counted and verified by the Web Services Director and I.
+
+In total, 136 votes were cast with 20 blanks and 116 in favour of Daniel Dahl Andersen (1384322)
+
+We found 4 duplicate votes from people that had already voted but those do not affect the election result. 
+
+
+Congratulations Daniel on your appointment as the next Director!
+
+
+We will share the duties until Daniel is fully up to speed. Daniel will make an announcement once he has assumed all the responsibilities.
+
+![](/img/1.png)
+
+**[Results in Control Center](https://cc.vatsim-scandinavia.org/vote/4)**

src/content/announcements/words-from-the-new-director.md

@@ -0,0 +1,21 @@
+---
+    title: Words from the new Director
+    author: Daniel Dahl Andersen
+    role: Director
+    date: 15/04/2024
+---
+
+***Dear VATSCA member.***
+
+The handover is now complete, and I want to take this moment to thank Christian Kovanen for the hard work he has done over the last 3+ years. I am taking over a vACC which is running smoothly. The handover has also been smooth and I´m slowly getting up to speed.
+<br /><br />
+I also wanna thank all of you who have voted. Even if it doesn't seem to matter with only one applicant, it does show me that I have the support from the majority of the voters. I hope I can live up to your expectations. There were 136 votes (incl. 4 duplicates), which is a record high number of votes. Last times there were 104 (incl. 6 duplicates). Prior elections did only have 50-80 votes. So a huge thanks to all of you who have taken your time to vote.
+<br /><br />
+We have a well functional vACC and I´m not here to make a lot of changes right away. However I will say, that I am not going into discussions on Discord or any other open forums. If you have an issue, I´ll be glad to look at it, but I do need you to write a mail to me directly or to the relevant departement, like training, web etc. If you think something is relevant for me to see on a Discord channel, feel free to tag me, but don´t expect me to answer. My DM is always open, if you have a question or two. Don´t hesitate to reach out.
+<br /><br />
+I will keep you updated once in a while, so you know what is going on in our vACC.\
+<br />
+That´s all for now
+
+Take care.\
+Daniel...

src/content/config.ts

@@ -0,0 +1,17 @@
+import { z, defineCollection } from 'astro:content';
+
+const announcementsCollection = defineCollection({ 
+    type: 'content',
+    schema: z.object({
+        title: z.string(),
+        author: z.string(),
+        role: z.string().optional(),
+        date: z.string(),
+        tags: z.array(z.string()).optional(),
+        image: z.string().optional(),
+      }),
+});
+
+export const collections = {
+  'announcements': announcementsCollection,
+};

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/pages/announcements.astro

@@ -0,0 +1,19 @@
+---
+import Layout from "../layout/layout.astro";
+import { getCollection } from 'astro:content'
+
+const allAnnouncements = await getCollection('announcements');
+console.log(allAnnouncements)
+---
+<Layout SiteTitle="VATSIM Scandinavia">
+    <div class="w-full h-[81.6vh]">
+        <ul>
+            {allAnnouncements.map(announcement => (
+                <li>
+                    <h2 class="text-xl font-semibold">{announcement.data.title}</h2>
+                    <p>{announcement.body}</p>
+                </li>
+            ))}
+        </ul>
+    </div>
+</Layout>

src/pages/announcements/[...slug].astro

@@ -0,0 +1,48 @@
+---
+import Layout from "../../layout/layout.astro";
+import { getCollection } from 'astro:content';
+import Contact from "../about/contact.astro";
+
+export async function getStaticPaths() {
+  const blogEntries = await getCollection('announcements');
+  return blogEntries.map(entry => ({
+    params: { slug: entry.slug }, props: { entry },
+  }));
+}
+// 2. For your template, you can get the entry directly from the prop
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+---
+<Layout>
+    <div class="flex justify-center min-h-[calc(100vh-240px)]">
+        <div class="w-full max-w-[1300px] flex justify-center flex-col">
+            <div class="py-4">
+                <h1 class="text-4xl font-bold">{entry.data.title}</h1>
+                <hr class="border-2 my-2"/>
+                <p class="text-2xl font-semibold">{entry.data.role} | {entry.data.author}</p>
+                <p class="text-2xl">{entry.data.date}</p>
+            </div>
+            <Content class="text-xl"/>
+        </div>
+    </div>
+</Layout>
+
+<style is:inline>
+  h1 {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+  h2 {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+  h3 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+  img {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+</style>

src/pages/index.astro

@@ -3,21 +3,11 @@ import Layout from "../layout/layout.astro";
 import Bookings from "../components/Bookings.astro";
 import Map from "../components/Map";
 import { Button } from "@nextui-org/react";
+import { getCollection } from 'astro:content'
+
+const allAnnouncements = await getCollection('announcements');
+
 
-const announcement = [{
-    title:"[VACANT POSITION] Director of VATSIM Scandinavia",
-    description: "Due to the recent discussions in various channels of our Discord server and on these forums, I have been asked to make this announcement explaining our position and the position of VATSIM regarding the ongoing war.",
-    date: "February 29",
-    author: "Christian Kovanen",
-    link: ""
-  },
-  {
-    title: "Real-world conflicts on VATSIM",
-    description: "Due to the recent discussions in various channels of our Discord server and on these forums, I have been asked to make this announcement explaining our position and the position of VATSIM regarding the ongoing war.",
-    date: "February 29",
-    author: "Christian Kovanen",
-    link: ""
-  }]
 ---
 
 <Layout SiteTitle="VATSIM Scandinavia">
@@ -57,19 +47,23 @@ const announcement = [{
           Latest announcements
         </div>
         <div class="bg-white dark:bg-vatsca3">
-          {announcement.map(post => <div class="w-full p-4 hover:bg-vatsca2/50">
-            <a href="" class="font-semibold text-xl">
-              {post.title}
-            </a>
-            <br/>
-            <a href="">
-              {post.description}
-            </a>
-            <br/>
-            <a href="" class="text-lg font-semibold">
-              {post.date} | By {post.author}
-            </a>
-          </div>)}
+          {allAnnouncements.slice(0, 2).map(post => 
+            <div class="w-full p-2 hover:bg-vatsca2/50">
+              <a href={"/announcements/"+post.slug}>
+                <span class="font-semibold text-xl">
+                  {post.data.title}
+                </span>
+                <br/>
+                <span>
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur pariatur enim quod, eveniet vero aspernatur accusamus quo cupiditate, iure et dolores, fugiat beatae? Enim neque sapiente maxime beatae a nisi?
+                </span>
+                <br/>
+                <span class="text-lg font-semibold">
+                  {post.data.date} | By {post.data.author}
+                </span>
+              </a>
+            </div>
+          )}
 
         </div>
       </div>

src/pages/stands.astro

@@ -0,0 +1,25 @@
+---
+import Layout from "../layout/layout.astro";
+import Map from "../components/NewMap.tsx";
+const EKBI = { lng: 9.148173216130179, lat: 55.741714236886445};
+const airport = EKBI;
+---
+<Layout SiteTitle="VATSIM Scandinavia">
+    <div class="top-32 left-24 absolute z-10">
+        <label class="text-2xl">Airport:</label>
+        <select id="select" class="w-fit bg-transparent appearance-auto text-xl">
+            <option value="EKCH" title="Title for Item 1" class="bg-vatsca3">EKCH</option>
+            <option value="EKBI" title="Title for Item 2">EKBI</option>
+            <option value="EKYT">EKYT</option>
+        </select>
+    </div>
+    <Map id="Map" client:visible airport={airport}/>
+</Layout>
+
+<script is:inline>
+    document.getElementById('select').addEventListener('change', function(event) {
+        const selectedAirport = event.target.value;
+        console.log(selectedAirport);
+        document.getElementsByid
+    });
+</script>

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
+    "strictNullChecks": true,
     "jsx": "react-jsx",
     "jsxImportSource": "react"
   }