<script setup lang="ts">
// AI-Generated test data.
const projects = [
  {
    name: 'MalwareWatch',
    description:
      'A website that tracks malware and ransomware attacks in real time.',
    url: 'https://malwarewatch.org',
  },
  {
    name: 'You Are an Idiot! (dot cc)',
    description: 'A recreation of the infamous "You Are an Idiot!" virus.',
    url: 'https://youareanidiot.cc',
  },
  {
    name: 'HURR-DURR (dot cc)',
    description: 'A recreation of the infamous "HURR-DURR" virus.',
    url: 'https://hurr-durr.cc',
  },
  {
    name: 'ClickSword',
    description: 'A clicker game with a sword theme.',
    url: 'https://clicksword.org',
  },
  {
    name: 'Windows XP Keygen / UMSKT',
    description: 'A key generator for Windows XP.',
    url: 'https://go.enderman.ch/xpkeygen',
  },
]

const meta = {
  title: "Enderman's Projects",
  description:
    "A display of my largest projects. Some of them aren't published on YouTube.",
  image: 'https://enderman.ch/images/logo.png',
  url: 'https://enderman.ch/projects',
}

useSeoMeta({
  title: meta.title,
  description: meta.description,
  ogTitle: meta.title,
  ogDescription: meta.description,
  ogImage: meta.image,
  ogUrl: meta.url,
  ogType: 'website',
  twitterTitle: meta.title,
  twitterDescription: meta.description,
  twitterImage: meta.image,
  twitterCard: 'summary',
})

useHead({
  title: 'Projects',
  htmlAttrs: {
    lang: 'en',
  },
  link: [
    {
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico',
    },
  ],
})

defineRobotMeta()
</script>

<template>
  <section>
    <h3 class="alex">Projects</h3>
    <hr />
    <p>
      <strong>🚧 This page is currently under construction.</strong> Expect a
      lot more content to be added as time passes.
      <em>Please report all bugs you encounter via the link in the footer</em>,
      I will make sure to sand them down.
    </p>
    <hr />
    <p><strong>My current projects are:</strong></p>
    <ul>
      <li v-for="(item, index) in projects" :key="index">
        <a class="link-hi" :href="item.url">
          {{ item.name }}
        </a>
      </li>
    </ul>
    <p>
      The list above is not exhaustive and only includes the most recent and
      largest projects I remembered while constructing this page.
    </p>
  </section>
</template>
