From 25393b0f96f15efcfce0e267adead4b6dcd3d1f1 Mon Sep 17 00:00:00 2001
From: jezzahehn <jezza.hehn@wikitribune.com>
Date: Sat, 24 May 2025 22:53:49 -0400
Subject: [PATCH] feat: first draft of learning resource cards

---
 .../molecules/LearningResourceWrapper.vue     | 24 +++++++++++
 src/locales/en_US.ts                          |  9 ++++
 src/routes/resources.vue                      | 41 ++++++++++++++++++-
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 src/components/molecules/LearningResourceWrapper.vue

diff --git a/src/components/molecules/LearningResourceWrapper.vue b/src/components/molecules/LearningResourceWrapper.vue
new file mode 100644
index 0000000..f2cacac
--- /dev/null
+++ b/src/components/molecules/LearningResourceWrapper.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="box m-3 p-3 columns">
+    <div class="column is-one-quarter" v-if="image">
+      <figure class="image">
+        <img :src="image" :alt="alt" />
+      </figure>
+    </div>
+    <div class="column">
+      <h2 class="title">{{ title }}</h2>
+      <p class="has-text-white is-size-4 mb-4">{{ desc }}</p>
+      <h3 class="is-size-3"><a href="{{ link }}">{{ link }}</a></h3>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: String,
+  desc: String,
+  link: String,
+  image: { type: String, required: false },
+  alt: { type: String, required: false },
+})
+</script>
\ No newline at end of file
diff --git a/src/locales/en_US.ts b/src/locales/en_US.ts
index 02c11b6..f234bb3 100644
--- a/src/locales/en_US.ts
+++ b/src/locales/en_US.ts
@@ -16,5 +16,14 @@ export default {
       "title": "Community",
       "text": "The Viossa community is rich and colourful, drawing from many global traditions due to its worldwide online membership. Since the teaching culture puts an emphasis on linguistic immersion, and discourages prescriptivism, the culture of Viossa is as diverse and varied as the language and the people who speak it. For many, their personal dialect is a key form of identity and expression. The fluid nature of Viossa and lack of defined meanings makes Viossa popular for creative purposes, such as poetry and songwriting.",
     }
+  ],
+  "resources": [
+    {
+      "title": "Discord Server",
+      "desc": "This is where most of the action happens! Hop on in!",
+      "link": "https://discord.gg/g3mG2gYjZD",
+      "image": "discord.png",
+      "alt": "Discord logo"
+    }
   ]
 }
\ No newline at end of file
diff --git a/src/routes/resources.vue b/src/routes/resources.vue
index 38957cb..d71181b 100644
--- a/src/routes/resources.vue
+++ b/src/routes/resources.vue
@@ -1,3 +1,42 @@
 <template>
-	<h1>Resources</h1>
+	<div class="min-h-screen flex flex-col" style="gap: 4rem">
+		<!-- Main application wrapper -->
+    <section class="section">
+      <h1 class="title has-text-black p-6">Learning Resources</h1>
+    </section>
+
+    <section class="section">
+      <LearningResourceWrapper class="is-one-quarter" 
+        v-for="(resource, index) in resourcesWithImages" 
+        :key="index"
+        :title="resource.title"
+        :desc="resource.desc"
+				:link="resource.link"
+        :image="resource.image"
+        :alt="resource.alt"
+      />
+    </section>
+	</div>
 </template>
+
+<script setup lang="ts">
+import LearningResourceWrapper from '@/components/molecules/LearningResourceWrapper.vue'
+import '@/assets/style.scss'
+import 'bulma/css/bulma.css'
+import { useI18n } from 'vue-i18n'
+import type { MessageSchema } from '../i18n/types'
+import { computed } from 'vue'
+
+const { tm } = useI18n()
+const resourceList = computed<MessageSchema['resources']>(() => tm('resources'))
+const resourcesWithImages = computed(() =>
+  resourceList.value.map(resource => {
+    if (!resource.image) return resource
+
+    return {
+      ...resource,
+      image: new URL(`../assets/${resource.image}`, import.meta.url).href
+    }
+  })
+)
+</script>