* Moved nuxt app to main app

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).

pages/astres/_slug.vue

@@ -0,0 +1,90 @@
+<template>
+  <section class="celestial bg-image">
+    <header>
+      <h1 class="heading-1">
+        <span>{{ celestial.name }}</span>
+        <span v-if="celestial.name != celestial.englishName">/ {{ celestial.englishName }}</span>
+        <span class="txt-capitalize">- {{ celestial.type }}</span>
+      </h1>
+    </header>
+    <div class="section-content">
+      <main v-if="celestial" class="celestial-body">
+        <div>
+          <h3 class="heading-3">
+            Informations
+          </h3>
+          <p v-if="celestial.aroundPlanet">
+            Orbite autour de
+            <nuxt-link
+              :to="`/astres/${celestial.aroundPlanet.planet}`"
+              class="txt-capitalize"
+            >
+              {{ celestial.aroundPlanet.planet }}
+            </nuxt-link>
+          </p>
+          <p v-if="celestial.discoveredBy">
+            Découvert par {{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
+          </p>
+          <p>Facteur Gravité : {{ celestial.gravity }}</p>
+          <p>Facteur Densité : {{ celestial.density }}</p>
+          <p>Inclinaison : {{ celestial.inclination }}</p>
+        </div>
+        <div v-if="celestial.moons" class="celestial-moons">
+          <h2 class="heading-2">
+            Astres orbitant {{ celestial.name }}
+          </h2>
+          <celestials-list :celestials="celestial.moons" :has-filters="false" />
+        </div>
+      </main>
+    </div>
+  </section>
+</template>
+
+<script>
+// API
+import { fetchCelestial } from '@/api/le-systeme-solaire'
+
+export default {
+  name: 'Celestial',
+
+  data () {
+    return {
+      celestial: {}
+    }
+  },
+
+  mounted () {
+    // Fetches from API...
+    fetchCelestial(this.$route.params.slug)
+      .then((res) => {
+        this.celestial = res
+        return this.celestial
+      })
+      // .catch((err) => {
+      //   console.error(err)
+      // })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.celestial {
+  position: relative;
+  min-height: 100%;
+  padding: 25px 5%;
+
+  &:after {
+    background-image: url("/celestials_bg-min.jpg");
+  }
+
+  .celestial-body {
+    a {
+      color: $primary-xxlight;
+      text-decoration: underline;
+      &:hover {
+        color: $primary-xlight;
+      }
+    }
+  }
+}
+</style>

pages/astres/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <section class="celestials bg-image">
+    <header>
+      <h1 class="heading-1">
+        Le système solaire
+      </h1>
+    </header>
+    <div class="section-content">
+      <celestials-list :celestials="celestials" />
+    </div>
+  </section>
+</template>
+
+<script>
+// API
+import { fetchCelestials } from '@/api/le-systeme-solaire'
+
+import CelestialsList from '@/components/celestials/CelestialsList.vue'
+
+export default {
+  name: 'Celestials',
+  components: {
+    CelestialsList
+  },
+
+  data () {
+    return {
+      celestials: []
+    }
+  },
+
+  mounted () {
+    fetchCelestials()
+      .then((res) => {
+        this.celestials = res
+      })
+      .catch(() => {
+        this.error = 'Impossible de récupérer les astres.'
+      })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.celestials {
+  position: relative;
+  min-height: 100%;
+  padding: 25px 5%;
+
+  &:after {
+    background-image: url("/celestials_bg-min.jpg");
+  }
+}
+</style>

pages/favoris/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <section class="favourites bg-image">
+    <header>
+      <h1 class="heading-1">
+        Mes favoris
+      </h1>
+    </header>
+    <div class="section-content">
+      <celestials-list :celestials="favourites" />
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'Favourites',
+
+  data () {
+    return {
+      favourites: []
+    }
+  },
+
+  created () {
+    // const favourites = this.$store.state.user.favourites
+  }
+}
+</script>
+
+<style lang="scss">
+.favourites {
+  position: relative;
+  min-height: 100%;
+  padding: 25px 5%;
+
+  &:after {
+    background-image: url("/home_bg-min.jpg");
+  }
+}
+</style>

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>