9 files changed, 234 insertions, 0 deletions
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..7d3a0b8
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,13 @@
+<template>
+  <div id="nav">
+    senpy = [
+    <router-link to="/">home</router-link>,
+    <router-link to="/languages">languages</router-link>,
+    <a href="http://api.senpy.club">api</a>
+    ]
+  </div>
+
+  <router-view />
+
+  <p>// Copyleft (ɔ) 2021-2021 The Senpy Club</p>
+</template>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..e001a8f
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,9 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+
+import 'normalize.css/normalize.css';
+import 'sakura.css/scss/sakura-dark.scss';
+import './styles/main.scss';
+
+createApp(App).use(router).mount('#app');
diff --git a/src/mixins.ts b/src/mixins.ts
new file mode 100644
index 0000000..bea2fca
--- /dev/null
+++ b/src/mixins.ts
@@ -0,0 +1,47 @@
+import { Options, Vue } from 'vue-class-component';
+
+@Options({})
+export default class APIExtendableLanguage extends Vue {
+  isLoading = true;
+
+  images: any;
+
+  language = '';
+
+  languages: any;
+
+  random: any;
+
+  async fetchImages(): Promise<void> {
+    fetch(`http://localhost/api/v1/language?lang=${this.language}`, {
+      method: 'GET',
+    })
+      .then((response) => response.json())
+      .then((response) => {
+        this.images = response;
+        this.isLoading = false;
+      });
+  }
+
+  async fetchLanguages(): Promise<void> {
+    fetch('http://localhost/api/v1/languages', {
+      method: 'GET',
+    })
+      .then((response) => response.json())
+      .then((response) => {
+        this.languages = response;
+        this.isLoading = false;
+      });
+  }
+
+  async fetchRandom(): Promise<void> {
+    fetch('http://localhost/api/v1/random', {
+      method: 'GET',
+    })
+      .then((response) => response.json())
+      .then((response) => {
+        this.random = response;
+        this.isLoading = false;
+      });
+  }
+}
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..c0fabee
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,27 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import Home from '../views/Home.vue';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+  },
+  {
+    path: '/language/:lang',
+    name: 'Language',
+    component: () => import('../views/Language.vue'),
+  },
+  {
+    path: '/languages',
+    name: 'languages',
+    component: () => import('../views/Languages.vue'),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..3804a43
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 0000000..42fdfb6
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1,49 @@
+html {
+  scroll-behavior: smooth;
+  overflow: scroll;
+  overflow-x: hidden;
+}
+body {
+  max-width: 58em;
+}
+
+img {
+  border-radius: 5px;
+}
+
+#random-image {
+  img {
+    height: 20em;
+  }
+  a:hover {
+    border-bottom: none;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 0px;
+  background: transparent;
+}
+
+.image-rack {
+  text-align: center;
+  list-style-type: none;
+}
+
+#image-rack-item {
+  display: inline;
+  padding: 10px;
+
+  a:hover {
+    border-bottom: none;
+  }
+
+  img {
+    width: 20%;
+    transition: 0.25s;;
+  }
+  img:hover {
+    opacity: 0.75;
+    width: 25%;
+  }
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..d70e565
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="home">
+    <h1>home</h1>
+
+    <div v-if="!isLoading" id="random-image">
+      <a :href="random.image">
+        <img :src="random.image">
+      </a>
+    </div>
+    <p v-else>
+      fetching image...
+    </p>
+
+    <p style="white-space: pre-wrap;">hi there, this site is still under construction. if you would
+      like to help with anything, feel
+      free to!
+      <ul>
+        <li><a href="https://github.com/senpy-club/api">api</a></li>
+        <li><a href="https://github.com/senpy-club/frontend">frontend</a></li>
+      </ul>
+    </p>
+  </div>
+</template>
+
+<script>
+import { mixins, Options } from 'vue-class-component';
+import APIExtendableLanguage from '../mixins';
+
+@Options({})
+export default class Language extends mixins(APIExtendableLanguage) {
+  async mounted() { await this.fetchRandom(); }
+}
+</script>
diff --git a/src/views/Language.vue b/src/views/Language.vue
new file mode 100644
index 0000000..ca5bbfb
--- /dev/null
+++ b/src/views/Language.vue
@@ -0,0 +1,26 @@
+<template>
+  <h1>{{ $route.params.lang.toLowerCase() }}</h1>
+
+  <template v-if="!isLoading">
+    <ul class="image-rack">
+      <li v-for="image in images" :key="image" id="image-rack-item">
+        <a :href="image"><img :src="image"></a>
+      </li>
+    </ul>
+    <p v-if="images.length == 0">sorry... no images were found for this language...</p>
+  </template>
+  <p v-else>fetching images...</p>
+</template>
+
+<script>
+import { mixins, Options } from 'vue-class-component';
+import APIExtendableLanguage from '../mixins';
+
+@Options({})
+export default class Language extends mixins(APIExtendableLanguage) {
+  async mounted() {
+    this.language = this.$route.params.lang;
+    await this.fetchImages();
+  }
+}
+</script>
diff --git a/src/views/Languages.vue b/src/views/Languages.vue
new file mode 100644
index 0000000..41074ca
--- /dev/null
+++ b/src/views/Languages.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="languages">
+    <h1>languages</h1>
+
+    <template v-if="!isLoading">
+      <ul>
+        <li v-for="language in languages" :key="language">
+          <a :href="'/language/' + language">{{ language.toLowerCase() }}</a>
+        </li>
+      </ul>
+    </template>
+    <p v-else>fetching languages...</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { mixins, Options } from 'vue-class-component';
+import APIExtendableLanguage from '../mixins';
+
+@Options({})
+export default class Language extends mixins(APIExtendableLanguage) {
+  async mounted() { await this.fetchLanguages(); }
+}
+</script>