/ Basic nuxt setup (some areas still broken)

full-skies-nuxt/pages/README.md

@@ -0,0 +1,6 @@
+# PAGES
+
+This directory contains your Application Views and Routes.
+The framework reads all the `*.vue` files inside this directory and creates the router of your application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

full-skies-nuxt/pages/astres/_id.vue

@@ -0,0 +1,81 @@
+<template>
+  <section class="celestial bg-image">
+    <div v-if="celestialLoaded">
+      <header>
+        <h1 class="heading-1">
+          {{ celestial.name }}
+        </h1>
+      </header>
+      <div class="section-content">
+        <div v-if="error">
+          Une erreur est survenue : {{ error }}
+        </div>
+        <div>{{ celestial }}</div>
+      </div>
+    </div>
+    <div v-else>
+      <nest-loader />
+    </div>
+  </section>
+</template>
+
+<script>
+// API
+import { fetchCelestial } from '@/api/le-systeme-solaire'
+// import { fetchWikipediaExcerpt } from "@/api/wikipedia";
+
+// Global methods
+import { addCelestialType } from '@/plugins/methods'
+import NestLoader from '@/components/NestLoader.vue'
+
+export default {
+  name: 'Celestial',
+  components: {
+    NestLoader
+  },
+
+  props: {
+    slug: {
+      type: String,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      celestial: {},
+      celestialLoaded: false,
+      excerpt: '',
+      error: ''
+    }
+  },
+
+  mounted () {
+    // Fetches from API...
+    fetchCelestial(this.slug)
+      .then((res) => {
+        this.celestial = addCelestialType(res)
+        this.celestialLoaded = true
+        return this.celestial
+      })
+      .catch(() => {
+        this.error = "Impossible de récupérer l'astre demandé."
+      })
+      .then(() => {
+        // fetchWikipediaExcerpt(celestial);
+      })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.celestial {
+  position: relative;
+  min-height: 100%;
+  padding: 25px 5%;
+
+  &:after {
+    background-image: url("/celestials_bg-min.jpg");
+  }
+}
+</style>

full-skies-nuxt/pages/astres/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <section class="celestials bg-image">
+    <header>
+      <h1 class="heading-1">
+        Le système solaire
+      </h1>
+    </header>
+    <div class="section-content">
+      <div v-if="error">
+        Une erreur est survenue : {{ error }}
+      </div>
+      <div v-if="celestials.length > 1">
+        <celestials-list :celestials="celestials" />
+      </div>
+      <div v-else>
+        <nest-loader />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { onMounted, ref } from '@vue/composition-api'
+
+// API
+import { fetchCelestials } from '@/api/le-systeme-solaire'
+
+// Global methods
+import { addCelestialsType } from '@/plugins/methods'
+
+import CelestialsList from '@/components/celestials/CelestialsList.vue'
+import NestLoader from '@/components/NestLoader.vue'
+
+export default {
+  name: 'Celestials',
+  components: {
+    CelestialsList,
+    NestLoader
+  },
+
+  setup () {
+    const celestials = ref([])
+
+    const getCelestials = async () => {
+      celestials.value = await fetchCelestials()
+      celestials.value = addCelestialsType(celestials.value)
+    }
+
+    onMounted(getCelestials)
+
+    return { celestials }
+  },
+  data () {
+    return {
+      error: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.celestials {
+  position: relative;
+  min-height: 100%;
+  padding: 25px 5%;
+
+  &:after {
+    background-image: url("/celestials_bg-min.jpg");
+  }
+}
+</style>

full-skies-nuxt/pages/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <section class="home bg-image bg-fade-in">
+    <div class="splash fade-in-children">
+      <h2 class="heading-1">
+        Full Skies
+      </h2>
+      <p class="heading-2">
+        Explorez les cieux et le système solaire avec Full Skies !
+      </p>
+      <p class="heading-2">
+        Embarquez pour un voyage stellaire ; destination : le système solaire et
+        ses astres si proches.
+      </p>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'Home'
+}
+</script>
+
+<style lang="scss" scoped>
+.home {
+  position: relative;
+  min-height: inherit;
+  padding: 0 10%;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  &:after {
+    background-image: url("/home_bg-min.jpg");
+  }
+}
+</style>