Merge pull request #42 from fribyte-code/27-add-more-sponsor-info

💬 add more info in sponsor-section

src/i18n/translations.ts

@@ -31,8 +31,17 @@ export const no = {
     "gir sponsorer muligheten til å nå en bred målgruppe som inkluderer studenter og etablerte utviklere innen bransjen, under Bergen Open Source-konferansen. Vi ønsker selvsagt å gjøre konferansedagen enda mer minneverdig for dem! Dette kan inkludere alt i fra en kort presentasjon av selskapet til tilpassede logo-merkede sokker og godbiter. (Kanskje til og med noen overraskelser som gleder deltakerne🎫🍺?)",
   "sponsors.contact1": "Ønsker du også å støtte konferansen som sponsor?",
   "sponsors.contact2": "Ta kontakt med Sindre på 📨: ",
-  "sponsors.contact3":
-    "Vennligst merk at vi har et begrenset antall plasser tilgjengelig for lyntaler.",
+  "sponsors.price":
+    "Vi har en sponsorpakke til 5000,- som inneholder følgende ting: ",
+  "sponsors.goods": [
+    "Vår takknemlighet via SoMe innlegg",
+    "Logo på nettside",
+    "Roll-up banner på konferanse (sponsor må stille med egen)",
+    "Bruke BOSkonf logo selv",
+    "Jobbutlysninger kan bli nevnt i introduksjon og avslutning av konferansen (høyst relevant for både studenter og deltakere allerede i jobb)",
+  ],
+  "sponsors.highest":
+    "I tillegg vil høyeste spons få et eget tidsrom for lynpresentasjon fra deres eget selskap (må være relatert til Open Source).",
 };
 export const en: typeof no = {
   "header.home": "Home",
@@ -63,6 +72,15 @@ export const en: typeof no = {
   "sponsors.contact1":
     "Do you also want to support the conference as a sponsor?",
   "sponsors.contact2": "Contact Sindre at 📨: ",
-  "sponsors.contact3":
-    "Please note that we have a limited number of spots available for lightning talks.",
+  "sponsors.price":
+    "We have a sponsor package for 5000,- which includes the following items:",
+  "sponsors.goods": [
+    "Our gratitude via SoMe posts",
+    "Logo on website",
+    "Roll-up banner at the conference (sponsor must provide their own)",
+    "Use of BOSkonf logo themselves",
+    "Job postings can be mentioned in the introduction and conclusion of the conference (highly relevant for both students and participants already in jobs)",
+  ],
+  "sponsors.highest":
+    "In addition, the highest sponsor will get a dedicated time slot for a lightning presentation from their company (must be related to Open Source).",
 };

src/i18n/utils.ts

@@ -3,25 +3,37 @@ import { en, no } from "./translations";
 export const langs = { no, en };
 const defaultLang = "no";
 
+/**
+ * Get the language from the URL.
+ * @param url The URL to get the language from
+ * @returns The language from the URL
+ */
 export function getLangFromUrl(url: URL) {
   const [, lang] = url.pathname.split("/");
   if (lang in langs) return lang as keyof typeof langs;
   return defaultLang;
 }
 
 /**
- * Get the localized string from `key`.
- * @param key
+ * Use this hook to get the correct translation of a key.
  */
 export function useTranslation(url?: URL, language?: keyof typeof langs) {
   if (!url && !language) {
     throw new Error("Either url or language must be defined");
   }
 
-  return function t(key: keyof typeof no): string {
-    const currentLanguage = url
-      ? getLangFromUrl(url)
-      : (language ?? defaultLang);
-    return langs[currentLanguage][key];
+  function getCurrentLang() {
+    return url ? getLangFromUrl(url) : (language ?? defaultLang);
+  }
+  /**
+   * Fetches the correct translation of key from the current language.
+   * If the text is an array of strings you can use `t<string[]>("key")` to get correct TS.
+   * @param key The key to fetch from the translations, e.g. "sponsors.goods"
+   * @returns The translation of the key
+   * @example t<string[]>("sponsors.goods") // ["string A", "string B"]
+   * @example t("sponsors.become") // "gives sponsors the opportunity..."
+   */
+  return function t<T extends string | string[]>(key: keyof typeof no) {
+    return langs[getCurrentLang()][key] as T;
   };
 }

src/pages/en/sponsor.astro

@@ -0,0 +1,5 @@
+---
+import GenericSponsor from "../sponsor.astro";
+---
+
+<GenericSponsor />

src/pages/sponsor.astro

@@ -2,6 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import { useTranslation } from "../i18n/utils";
 const t = useTranslation(Astro.url);
+const goods = t<string[]>("sponsors.goods");
 ---
 
 <Layout title="Bergen Open Source-konferanse">
@@ -18,14 +19,23 @@ const t = useTranslation(Astro.url);
               class="heroTxt">friByte</a
             >
             {t("sponsors.become")}
-            <p>{t("sponsors.contact1")}</p>
             <p>
+              {t("sponsors.contact1")}
               {t("sponsors.contact2")}<a
                 href="mailto:sindre.kjelsrud@fribyte.no"
                 class="heroTxt">sindre.kjelsrud@fribyte.no</a
               >
             </p>
-            <p>{t("sponsors.contact3")}</p>
+            <p>{t("sponsors.price")}</p>
+            <div>
+              {
+                goods.map((item) => (
+                  <ul>
+                    <li>{item}</li>
+                  </ul>
+                ))
+              }
+            </div>
           </p>
         </div>
       </div>
@@ -36,7 +46,7 @@ const t = useTranslation(Astro.url);
 <style>
   .content {
     color: #f1f1f1;
-    padding: 5rem 2rem;
+    padding: 1rem 2rem;
     max-width: var(--content-width);
     margin: 0 auto;
   }
@@ -45,13 +55,17 @@ const t = useTranslation(Astro.url);
     width: 100%;
 
     p {
-      font-size: 1.75rem;
+      font-size: 1.2rem;
       font-weight: 300;
     }
     a {
       width: max-content;
       margin: 6rem 0 0 0;
     }
+    ul li {
+      margin-left: 2rem;
+      list-style-type: disc;
+    }
   }
   .txtCont .heroTxt {
     color: #12e8be;