feat: setup monorepo for static frontend app (vdn-static)

apps/vdn-static/src/components/atoms/atoms.md

@@ -0,0 +1,9 @@
+# What are atoms?
+
+https://bradfrost.com/blog/post/atomic-web-design/
+
+Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
+
+Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.
+
+Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.

apps/vdn-static/src/components/molecules/HomeSectionWrapper.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+	title: string;
+	text: string;
+	image?: string;
+	alt?: string;
+	reverse: boolean;
+}>();
+</script>
+
+<template>
+	<div class="box my-5 px-4 py-3 columns is-vcentered">
+		<template v-if="reverse">
+			<div class="column">
+				<h2 class="title is-4">{{ title }}</h2>
+				<p class="has-text-white">{{ text }}</p>
+			</div>
+			<div class="column is-one-quarter" v-if="image">
+				<figure class="image">
+					<img :src="image" :alt="alt" :title="alt" />
+				</figure>
+			</div>
+		</template>
+
+		<template v-else>
+			<div class="column is-one-quarter" v-if="image">
+				<figure class="image">
+					<img :src="image" :alt="alt" :title="alt" />
+				</figure>
+			</div>
+			<div class="column">
+				<h2 class="title is-4">{{ title }}</h2>
+				<p class="has-text-white">{{ text }}</p>
+			</div>
+		</template>
+	</div>
+</template>

apps/vdn-static/src/components/molecules/LearningResourceWrapper.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="box columns is-vcentered is-gap-4">
+    <div class="column is-one-quarter" v-if="image">
+      <figure class="image">
+        <img :src="image" :alt="alt" :title="alt" />
+      </figure>
+    </div>
+    <div class="column">
+      <h4 class="title">{{ title }}</h4>
+      <p class="subtitle">{{ subtitle }}</p>
+      <p class="content">{{ desc }}</p>
+
+      <div class="level">
+        <a :href="link" 
+          target="_blank" 
+          rel="noopener noreferrer nofollow" 
+          class="button is-primary is-medium"
+          :text="joinText">
+        </a>
+
+        <a :href="``" 
+          target="_blank" 
+          rel="noopener noreferrer nofollow"
+          class="button is-info is-outlined is-medium" 
+          :text="rulesText">
+        </a>
+
+        <a :href="rulesLink" 
+          target="_blank" 
+          rel="noopener noreferrer nofollow"
+          class="button is-warning is-outlined is-medium" 
+          :text="rulesText">
+        </a>
+      </div>
+
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: String,
+  subtitle: String,
+  desc: String,
+  link: String,
+  rulesLink: String,
+  joinText: String,
+  rulesText: String,
+  image: { type: String, required: false },
+  alt: { type: String, required: false },
+})
+</script>

apps/vdn-static/src/components/molecules/PaddingWrapper.vue

@@ -0,0 +1,9 @@
+<template>
+	<div class="box my-6">
+		<slot />
+	</div>
+</template>
+
+<script lang="ts">
+export default { name: "PaddingWrapper" };
+</script>

apps/vdn-static/src/components/molecules/molecules.md

@@ -0,0 +1,9 @@
+# What are molecules?
+
+https://bradfrost.com/blog/post/atomic-web-design/
+
+Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.
+
+For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
+
+Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.

apps/vdn-static/src/components/organisms/SideBar.vue

@@ -0,0 +1,3 @@
+<script setup></script>
+
+<template></template>

apps/vdn-static/src/components/organisms/organisms.md

@@ -0,0 +1,11 @@
+# What are organisms?
+
+https://bradfrost.com/blog/post/atomic-web-design/
+
+Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
+
+We’re starting to get increasingly concrete. A client might not be terribly interested in the molecules of a design system, but with organisms we can see the final interface beginning to take shape. Dan Mall (who I’m working with on several projects) uses element collages, which articulate ideas for a few key organisms to facilitate client conversations and shape the visual direction (all without having to construct full comps).
+
+Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.
+
+Building up from molecules to organisms encourages creating standalone, portable, reusable components.

apps/vdn-static/src/components/pages/HomePage.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import HomeSectionWrapper from "@/components/molecules/HomeSectionWrapper.vue";
+import "@/assets/style.scss";
+import { useI18n } from "vue-i18n";
+import type { MessageSchema } from "@/i18n/types";
+import { computed } from "vue";
+
+const { tm } = useI18n();
+const sectionList = computed<MessageSchema["sections"]>(() => tm("sections"));
+const sectionsWithImages = computed(() =>
+	sectionList.value.map((section) => {
+		if (!section.image) return section;
+
+		return {
+			...section,
+			image: new URL(`../../assets/${section.image}`, import.meta.url)
+				.href,
+		};
+	}),
+);
+
+console.log(sectionList.value);
+</script>
+
+<template>
+	<div>
+		<section class="hero is-primary">
+			<div class="hero-body">
+				<div class="title">BRÅTULA VIOSSA.NET MÅDE</div>
+				<div class="subtitle">
+					Hadjiplas per lera para Viossa – glossa fu vi
+				</div>
+			</div>
+		</section>
+
+		<section class="section container">
+			<HomeSectionWrapper
+				v-for="(section, index) in sectionsWithImages"
+				:key="index"
+				:title="section.title"
+				:text="section.text"
+				:image="section.image"
+				:alt="section.alt"
+				:reverse="index % 2 !== 0" />
+		</section>
+	</div>
+</template>

apps/vdn-static/src/components/pages/ResourcesPage.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import LearningResourceWrapper from "@/components/molecules/LearningResourceWrapper.vue";
+import "@/assets/style.scss";
+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>
+
+<template>
+	<div>
+		<section class="section">
+			<h1 class="title">Learning Resources</h1>
+		</section>
+
+		<section class="section container">
+			<LearningResourceWrapper
+				v-for="(resource, index) in resourcesWithImages"
+				:key="index"
+				:title="resource.title"
+				:subtitle="resource.subtitle"
+				:desc="resource.desc"
+				:link="resource.link"
+				:rulesLink="resource.rulesLink"
+				:image="resource.image"
+				:alt="resource.alt"
+				:joinText="resource.joinText"
+				:rulesText="resource.rulesText" />
+		</section>
+	</div>
+</template>