aldeacomputer · anabeeella · Oct 24, 2023 · Oct 25, 2023 · Oct 26, 2023 · Oct 27, 2023
diff --git a/website/assets/css/main.css b/website/assets/css/main.css
@@ -7,7 +7,30 @@
  * scope typographic styles with .md
  */
 
-.md p { @apply my-4; }
+.md p { @apply mb-8 }
+
+.md h1 { @apply font-light text-4xl mb-4 }
+
+.md h2 { @apply text-3xl mb-3}
+.md h2 a { @apply text-gray-100 hover:text-gray-80}
+
+.md h3 { @apply text-2xl mb-2}
+.md h3 a { @apply text-gray-100 hover:text-gray-80}
+
+.md h4 { @apply text-xl font-medium mb-2}
+.md h4 a { @apply text-gray-100 hover:text-gray-80}
+
+.md h5 { @apply text-lg font-medium mb-2}
+
+.md h6 { @apply font-medium mb-2}
+
+.md a { @apply font-medium text-blue-primary hover:text-blue-lighter}
+
+.md pre { @apply my-8 p-4; }
+
+/* Code highlighting */
+.shiki { @apply bg-gray-900; }
+
 
 /**
  * UTILITIES

diff --git a/website/components/mobile-nav.vue b/website/components/mobile-nav.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="bg-gray-90 h-screen flex flex-col px-5 py-4">
+    <div class="flex justify-between items-center mb-6 h-9">
+    <NuxtLink to="/">
+        <img src="/images/logo.png" class="h-6" alt="Aldea Computer" />
+    </NuxtLink>
+    <CaLogoGithub class="text-white"/>
+    </div>
+    <nav class="md:hidden block px-2">
+      <ul class="flex flex-col text-xl">
+        <li v-for="node of navTree" class="p-4 text-white active:bg-gray-80 rounded-sm">
+          <NuxtLink :to="node.link">{{ node.text }}</NuxtLink>
+        </li>
+      </ul>
+    </nav>
+    <div class="md:flex flex-col justify-between text-white">
+      <ul>
+        <li class="inline-block px-2" v-for="link of socialLinks">
+            <a :href="link.url"
+            target="_blank"
+            rel="noopener noreferrer">
+            <component :is="link.icon" class="w-6 h-7" />
+          </a>
+        </li>
+      </ul>
+      <p class="p-2 text-sm">Terms, Privacy & Acceptable Use</p>
+      <p class="p-2 text-sm">Copyright &copy; 2023 Aldea Computer Company</p>
+    </div>
+  </div>
+</template>
+
+
+
+<script setup lang="ts">
+import {
+CaLogoTwitter,
+CaLogoLinkedin,
+CaLogoGithub,
+} from '~/icons'
+
+const navTree: NavLink[] = [
+{
+text: 'Blog',
+link: '/blog',
+}, {
+text: 'About',
+link: '/about/faqs',
+}, {
+text: 'Docs',
+link: 'https://docs.aldea.computer',
+}
+]
+
+const socialLinks: SocialLink[] = [
+{ icon: CaLogoTwitter, url: 'https://twitter.com/aldeacomputer' },
+{ icon: CaLogoLinkedin, url: 'https://www.linkedin.com/company/aldea-computer/' },
+{ icon: CaLogoGithub, url: 'https://github.com/orgs/aldeacomputer' },
+]
+</script>
diff --git a/website/components/related-content.vue b/website/components/related-content.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class=" bg-gray-90 py-24 md:py-32 px-4">
+      <h3 class="mb-16 font-mono text-base text-gray-50 text-center">See more:</h3>
+      <div class="flex flex-col md:flex-row md:px-20 xl:px-60 gap-4 mb-16">
+        <div class="p-4 flex-auto md:w-1/3 flex flex-col border border-gray-50 hover:border-blue-interactive rounded"
+        v-for="item of items">
+          <span class="self-end text-cream-20">
+            <component :is="item.icon" class="w-5 h-5" />
+          </span>
+          <h3 class="mt-2 mb-3 font-mono text-3xl font-light text-cream-20">
+          {{ item.title }}
+          </h3>
+          <p class="font-mono text-sm text-cream-20">{{ item.description }}</p>
+        </div>
+      </div>
+  </div>
+</template>
+
+  <script setup lang="ts">
+  defineProps<{
+    items: RelatedItem[];
+  }>()
+
+  </script>
diff --git a/website/content/about/another-page.md b/website/content/about/another-page.md
diff --git a/website/content/about/faqs.md b/website/content/about/faqs.md
@@ -0,0 +1,29 @@
+---
+layout: generic
+---
+
+# FAQs
+
+## Llamco minim id deserunt exercitatio? 
+
+Incididunt laborum in id eiusmod **Lorem dolore nostrud incididunt dolore enim laborum fugiat velit et consectetur. Ex ut id pariatur dolore culpa velit commodo id elit do nostrud eu.** Ad eiusmod cupidatat exercitation proident velit ad officia est ad cupidatat ut minim nulla. Ex proident minim id deserunt exercitation. Est culpa et aute in. Eu fugiat ea cupidatat. Veniam sint occaecat ut minim incididunt pariatur non. Commodo cillum incididunt cillum pariatur nostrud. Non ex aliqua et in deserunt cillum id.
+
+
+### Ut ex duis elit nisi voluptate nostrud aliquip. 
+Ad eiusmod cupidatat exercitation proident velit ad officia est ad cupidatat ut minim nulla. Ex proident minim id deserunt exercitation. Est culpa et aute in. Eu fugiat ea cupidatat. Veniam `sint occaecat ut minim incididunt` pariatur non. Commodo cillum incididunt cillum pariatur nostrud. Non ex aliqua et in deserunt cillum id.
+
+
+#### Ullamco qui veniam reprehenderit lit adipisicing labore adipisicing sint sunt elit mollit duis nisi. 
+Est culpa et aute in. Eu fugiat ea cupidatat. Veniam sint occaecat ut minim incididunt pariatur non. Commodo cillum incididunt cillum pariatur nostrud. Non ex aliqua et in deserunt cillum id.
+
+##### Elit veniam labore laboris est. Cupidatat elit et consectetur. Ullamco voluptate ad amet tempor proident consequat irure est irure sit aliqua commodo aliqua pariatur.
+Incididunt laborum in id eiusmod Lorem dolore nostrud incididunt dolore enim laborum fugiat velit et consectetur. Ex ut id pariatur dolore culpa velit commodo id elit do nostrud eu. Ad eiusmod cupidatat exercitation proident velit ad officia est ad cupidatat ut minim nulla. Ex proident minim id deserunt exercitation. Est culpa et aute in. Eu fugiat ea cupidatat. Veniam sint occaecat ut minim incididunt pariatur non. Commodo cillum incididunt cillum pariatur nostrud. Non ex aliqua et in deserunt cillum id. Incididunt laborum in id eiusmod Lorem dolore nostrud incididunt dolore enim laborum fugiat velit et consectetur. Ex ut id pariatur dolore culpa velit commodo id elit do nostrud eu. Ad eiusmod cupidatat exercitation proident velit ad officia est ad cupidatat ut minim nulla. Ex proident minim id deserunt exercitation. Est culpa et aute in. Eu fugiat ea cupidatat. Veniam sint occaecat ut minim incididunt pariatur non. Commodo cillum incididunt cillum pariatur nostrud. Non ex aliqua et in deserunt cillum id.
+
+###### Incididunt laborum in id eiusmod 
+
+Est culpa et aute in. *Eu fugiat ea cupidatat*. Veniam sint occaecat ut minim **incididunt pariatur non**. Commodo cillum incididunt cillum pariatur nostrud. `Non ex aliqua et in deserunt` cillum id.   
+Eu fugiat ea cupidatat. Veniam sint occaecat ut minim incididunt pariatur non. Commodo cillum incididunt cillum pariatur nostrud. Non ex aliqua et in deserunt cillum id. Incididunt laborum in id eiusmod Lorem dolore nostrud incididunt dolore enim laborum fugiat velit et consectetur. Ex ut id pariatur dolore culpa velit commodo id elit do nostrud eu. Ad eiusmod cupidatat exercitation proident velit.
+
+[span]
+
+Ex ut id pariatur dolore culpa velit commodo id elit do nostrud eu. Ad eiusmod cupidatat exercitation proident velit. [More info...](https://aldea.computer/)
diff --git a/website/content/about/misadventures-of-markdown.md b/website/content/about/misadventures-of-markdown.md
@@ -0,0 +1,60 @@
+---
+layout: generic
+---
+
+# The Misadventures of Markdown Man
+
+Once upon a time, in a **bold** and _italic_ kingdom called *Markdownville*, there lived a dashing hero named Markdown Man. His mission in life was to spread the joy of `code` and bring smiles to the faces of the townspeople through the power of ~~strikethrough~~ humor.
+
+## The Mysterious Link
+
+One day, Markdown Man woke up to discover a mysterious [link](https://example.com) on his bed. Curiosity overwhelmed him, and he clicked the link without hesitation. Little did he know, it was a trap set by the mischievous *Markdown Monster*!
+
+With a loud roar, the monster appeared out of thin air, `code` syntax swirling around him like a tornado. Markdown Man had to think quickly. He reached into his backpack and pulled out a bag of unordered lists:
+
+- 🍎
+- 🍊
+- 🍌
+
+He tossed the fruits at the monster, hoping to distract him. But the Markdown Monster was no fool. He retaliated with a barrage of numbers.
+
+1. Markdown Man ducked.
+2. Markdown Man dodged.
+3. And finally, Markdown Man countered with a 10x `code` strike!
+
+With the Markdown Monster defeated, Markdown Man celebrated his victory by performing a victory dance in his ~~strikethrough~~ stylish markdown cape. The townspeople cheered and **applauded** his bravery.
+
+> "Markdown Man, our hero! You saved us with your magical syntax powers!"
+> - Mayor Markdown
+
+And so, Markdown Man continued his adventures, using his knowledge of headers, emphasis, `code blocks`, [links](https://example.com), ~~strikethroughs~~, unordered lists, ordered lists, blockquotes, and more to bring cheer and order to the land of Markdownville.
+
+### A Mardown Man code snippet:
+
+Here's a code snippet showcasing Markdown Man's code prowess:
+
+```python
+def defeat_markdown_monster():
+    # Let's defeat the Markdown Monster!
+    count = 0
+    while count < 10:
+        print("Markdown Man strikes!")
+        count += 1
+```
+
+### A Mardown Man table:
+
+And here's a table highlighting some of Markdown Man's abilities:
+
+| Syntax          | Description                                      |
+| --------------- | ------------------------------------------------ |
+| Headers         | Used for section headings                        |
+| Emphasis        | Used for emphasizing text                         |
+| `Code blocks`   | Used for displaying code snippets                 |
+| [Links](https://example.com)   | Used for creating clickable links              |
+| ~~Strikethroughs~~ | Used for striking through text                    |
+| Unordered lists | Used for displaying bullet point lists            |
+| Ordered lists   | Used for displaying numbered lists                |
+| Blockquotes     | Used for emphasizing quoted text                  |
+
+The end.
diff --git a/website/content/about/how-aldea-works.md → website/content/about/tokenomics.md b/website/content/about/how-aldea-works.md → website/content/about/tokenomics.md
@@ -2,7 +2,7 @@
 layout: generic
 ---
 
-# How Aldea Works
+# Tokenomics
 
 Eu cupidatat veniam labore. Lorem sit veniam enim culpa reprehenderit velit. Proident anim adipisicing incididunt elit veniam laboris aliquip cupidatat. Est cupidatat veniam consequat ad ipsum ullamco qui labore duis officia laboris.
 

diff --git a/website/content/blog/1.first-post.md b/website/content/blog/1.first-post.md
@@ -0,0 +1,12 @@
+---
+layout: article
+pubdate: 2023-10-20
+author: Aaron
+summary: Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
+---
+
+# First Post
+
+Quis anim nisi voluptate non ea. Laborum laboris nisi laboris laborum laboris consequat laboris ut est aute nostrud pariatur ut quis aliqua. Irure nulla quis laboris aliquip fugiat. **Lorem tempor ex mollit nisi culpa quis.** Non qui sunt ad duis adipisicing qui et occaecat sint dolor. Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
+
+Esse tempor dolore cupidatat in sunt. Amet cillum nisi ea fugiat. Voluptate consequat exercitation nulla commodo ad esse excepteur aliquip qui irure sint. Et enim tempor laborum ipsum veniam excepteur enim elit aute consectetur culpa eu. Enim cillum ipsum in exercitation. Velit tempor eiusmod mollit cillum sit reprehenderit commodo in dolore est officia.
diff --git a/website/content/blog/1.my-first-post.md b/website/content/blog/1.my-first-post.md
diff --git a/website/content/blog/2.another-post.md b/website/content/blog/2.another-post.md
@@ -1,12 +1,13 @@
 ---
 layout: article
 pubdate: 2023-10-20
+author: Aaron
+summary: Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
 ---
 
 # Wow another post!
 
-Excepteur nisi sint culpa consequat Lorem magna quis laboris mollit incididunt et adipisicing tempor mollit quis. Quis cillum exercitation ipsum cupidatat reprehenderit ex mollit do dolor. Esse aliqua irure nulla commodo sunt. Sunt et ullamco in commodo ea irure sunt incididunt laborum do est id irure voluptate.
-
 Quis anim nisi voluptate non ea. Laborum laboris nisi laboris laborum laboris consequat laboris ut est aute nostrud pariatur ut quis aliqua. Irure nulla quis laboris aliquip fugiat. Lorem tempor ex mollit nisi culpa quis. Non qui sunt ad duis adipisicing qui et occaecat sint dolor. Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
 
-Esse tempor dolore cupidatat in sunt. Amet cillum nisi ea fugiat. Voluptate consequat exercitation nulla commodo ad esse excepteur aliquip qui irure sint. Et enim tempor laborum ipsum veniam excepteur enim elit aute consectetur culpa eu. Enim cillum ipsum in exercitation. Velit tempor eiusmod mollit cillum sit reprehenderit commodo in dolore est officia.
+Esse tempor dolore cupidatat in sunt. Amet cillum nisi ea fugiat. Voluptate consequat exercitation nulla commodo ad esse excepteur aliquip qui irure sint. Et enim tempor laborum ipsum veniam excepteur enim elit aute consectetur culpa eu. Enim cillum ipsum in exercitation. Velit tempor eiusmod mollit cillum sit reprehenderit commodo in dolore est officia.
+
diff --git a/website/content/blog/3.another-one copy.md b/website/content/blog/3.another-one copy.md
@@ -0,0 +1,14 @@
+---
+layout: article
+pubdate: 2023-10-20
+author: Rius
+summary: Ex sint non velit officia sunt irure voluptate dolore laborum enim duis Lorem ullamco culpa. Culpa id sit et exercitation nisi pariatur eu enim adipisicing. Eiusmod laboris est sit amet occaecat.
+---
+
+# Quis anim nisi voluptate non ea.
+
+Quis anim nisi voluptate non ea. Laborum laboris nisi laboris laborum laboris consequat laboris ut est aute nostrud pariatur ut quis aliqua. Irure nulla quis laboris aliquip fugiat. Lorem tempor ex mollit nisi culpa quis. Non qui sunt ad duis adipisicing qui et occaecat sint dolor. Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
+
+Esse tempor dolore cupidatat in sunt. Amet cillum nisi ea fugiat. Voluptate consequat exercitation nulla commodo ad esse excepteur aliquip qui irure sint. Et enim tempor laborum ipsum veniam excepteur enim elit aute consectetur culpa eu. Enim cillum ipsum in exercitation. Velit tempor eiusmod mollit cillum sit reprehenderit commodo in dolore est officia.
+
+Quis anim nisi voluptate non ea. Laborum laboris nisi laboris laborum laboris consequat laboris ut est aute nostrud pariatur ut quis aliqua. Irure nulla quis laboris aliquip fugiat. Lorem tempor ex mollit nisi culpa quis. Non qui sunt ad duis adipisicing qui et occaecat sint dolor. Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
diff --git a/website/content/blog/4.another-one.md b/website/content/blog/4.another-one.md
@@ -0,0 +1,14 @@
+---
+layout: article
+pubdate: 2023-10-20
+author: Rius
+summary: Ex sint non velit officia sunt irure voluptate dolore laborum enim duis Lorem ullamco culpa. Culpa id sit et exercitation nisi pariatur eu enim adipisicing. Eiusmod laboris est sit amet occaecat.
+---
+
+# Quis anim nisi voluptate non ea.
+
+Quis anim nisi voluptate non ea. Laborum laboris nisi laboris laborum laboris consequat laboris ut est aute nostrud pariatur ut quis aliqua. Irure nulla quis laboris aliquip fugiat. Lorem tempor ex mollit nisi culpa quis. Non qui sunt ad duis adipisicing qui et occaecat sint dolor. Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
+
+Esse tempor dolore cupidatat in sunt. Amet cillum nisi ea fugiat. Voluptate consequat exercitation nulla commodo ad esse excepteur aliquip qui irure sint. Et enim tempor laborum ipsum veniam excepteur enim elit aute consectetur culpa eu. Enim cillum ipsum in exercitation. Velit tempor eiusmod mollit cillum sit reprehenderit commodo in dolore est officia.
+
+Quis anim nisi voluptate non ea. Laborum laboris nisi laboris laborum laboris consequat laboris ut est aute nostrud pariatur ut quis aliqua. Irure nulla quis laboris aliquip fugiat. Lorem tempor ex mollit nisi culpa quis. Non qui sunt ad duis adipisicing qui et occaecat sint dolor. Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
diff --git a/website/layouts/article.vue b/website/layouts/article.vue
@@ -1,25 +1,45 @@
 <template>
   <NuxtLayout name="default">
-    <div class="p-12">
-      <p class="mb-4">ARTICLE LAYOUT</p>
-      <div class="md">
-        <slot />
-      </div>
+    <div class="w-full grid grid-cols-4 md:grid-cols-8 lg:grid-cols-10 gap-4 animate-fade-up">
+      <div class="py-12 mx-4 lg:mx-0 col-span-4 md:col-start-2 md:col-span-6 lg:col-start-3">
+        <img src="https://unsplash.it/1000/240" class="w-full mb-4">  
+        <div class="md">
+          <slot />
+          <div class="flex items-center gap-4 mb-24">
+            <img src="https://unsplash.it/44/44" class="rounded-full h-11">
+              <div>
+                <span class="text-md block">Posted by: <strong>{{ page.author }}</strong></span>
+                <span class="text-sm mb-0">{{ $formatDate(page.pubdate) }}</span>
+              </div>
+          </div>      
+        </div>
+
+
+        <p class="mb-4">Recent posts</p>
+          <ul class="md:flex gap-4 mb-8">
+            <li v-for="page of posts" class="mb-6">
+              <NuxtLink :to="page._path">
+                <img src= "https://unsplash.it/400/200" class="mb-2 w-full md:min-win-400"/>
+                <h2 class="text-xl">{{ page.title }}</h2>
+                <span class="text-xs">{{ $formatDate(page.pubdate) }}</span>
+              </NuxtLink>
+            </li>
+          </ul>
 
-      <!-- recents posts: for side column -->
-      <ul>
-        <li v-for="page of posts">
-          <NuxtLink :to="page._path" class="text-blue-500 underline">{{ page.title }}</NuxtLink>
-        </li>
-      </ul>
+      </div>
     </div>
+
+
+
+
   </NuxtLayout>
 </template>
 
 
 <script setup lang="ts">
 const route = useRoute()
 const { page } = useContent()
+const { $formatDate } = useNuxtApp()
 
 const { data: posts } = await useAsyncData(`recent:${route.path}`, () => {
   return queryContent('blog')