Added main page and basic axios query

.eslintrc.js

@@ -15,6 +15,6 @@ module.exports = {
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
   }
 };

src/App.vue

@@ -23,8 +23,7 @@ export default defineComponent({
   position: relative;
   .fs-content {
     margin-top: 70px;
-    padding-top: 20px;
+    min-height: calc(100vh - 70px);
-    min-height: calc(100vh - 90px);
   }
 }
 </style>

src/assets/scss/_animations.scss

@@ -0,0 +1,20 @@
+@keyframes fadeInBg {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 33%;
+  }
+}
+
+@keyframes paneBgAround {
+  0% {
+    background-position: -10vw 0%;
+  }
+  50% {
+    background-position: -20vw 0%;
+  }
+  100% {
+    background-position: -10vw 0%;
+  }
+}

src/assets/scss/_global.scss

@@ -2,6 +2,7 @@
 
 @import 'fonts';
 @import 'variables';
+@import 'animations';
 
 body {
   font-family: $body-font-family;
@@ -11,7 +12,7 @@ body {
   background: $black;
 }
 
-h1, h2, h3, h4, h5, h6, .heading {
+h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   font-family: $heading-font-family;
   font-weight: $fw-regular;
@@ -21,6 +22,18 @@ h2 { font-size: 25px; }
 h3 { font-size: 22px; }
 h4 { font-size: 18px; }
 
+.heading {
+  &-1 {
+    margin-bottom: 20px;
+    font-size: 30px;
+    font-weight: $fw-semibold;
+  }
+  &-2 {
+    margin-bottom: 20px;
+    font-size: 25px;
+  }
+}
+
 ul {
   &.no-style {
     margin: 0;

src/components/Navbar.vue

@@ -23,12 +23,16 @@ export default defineComponent({
           link: "/"
         },
         {
-          text: "About",
+          text: "Célestes",
-          link: "/about"
+          link: "/celestes"
         },
         {
-          text: "Profile",
+          text: "À propos",
-          link: "/profile"
+          link: "/a-propos"
+        },
+        {
+          text: "Profil",
+          link: "/profil"
         }
       ]
     };

src/components/celestials/CelestialCard.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="celestial-card">
+    {{ celestial.name }}
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "celestial-card",
+  props: {
+    celestial: Object
+  }
+});
+</script>

src/components/celestials/CelestialsList.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="celestial-list-wrapper">
+    <ul v-if="celestials" class="celestial-list grid no-style">
+      <li
+        v-for="(celestial, index) in celestials"
+        :key="index"
+        class="celestial-item"
+      >
+        <celestial-card :celestial="celestial" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import CelestialCard from "@/components/celestials/CelestialCard.vue";
+
+export default defineComponent({
+  name: "celestial-list",
+  components: {
+    CelestialCard
+  },
+  props: {
+    celestials: {
+      type: Array
+    }
+  }
+});
+</script>

src/router/index.ts

@@ -4,6 +4,9 @@ import Home from "../views/Home.vue";
 import About from "../views/About.vue";
 import Profile from "../views/Profile.vue";
 
+import Celestials from "../views/celestials/Celestials.vue";
+import Celestial from "../views/celestials/Celestial.vue";
+
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
@@ -11,12 +14,23 @@ const routes: Array<RouteRecordRaw> = [
     component: Home
   },
   {
-    path: "/about",
+    path: "/a-propos",
     name: "About",
     component: About
   },
   {
-    path: "/profile",
+    path: "/celestes",
+    name: "Célestes",
+    component: Celestials
+  },
+  {
+    path: "/celestes/:slug",
+    name: "Céleste",
+    component: Celestial,
+    props: true
+  },
+  {
+    path: "/profil",
     name: "Profile",
     component: Profile
   }

src/views/About.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="about">
+  <section class="about">
     <h2>About</h2>
-  </div>
+  </section>
 </template>
 
 <script lang="ts">

src/views/Home.vue

@@ -1,6 +1,15 @@
 <template>
   <section class="home">
-    <h2 class="heading">Homepage</h2>
+    <div class="splash">
+      <h2 class="heading-1">Full Skies</h2>
+      <p class="heading-2">
+        L'application Full Skies explore les cieux à votre place !
+      </p>
+      <p class="heading-2">
+        Embarquez pour un voyage stellaire ; destination : le système solaire et
+        ses astres.
+      </p>
+    </div>
   </section>
 </template>
 
@@ -16,21 +25,32 @@ export default defineComponent({
 .home {
   position: relative;
   min-height: inherit;
-  padding: 0 20px;
+  padding: 0 10%;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
 
   &:after {
     display: block;
     content: "";
     position: absolute;
-    top: -20px;
+    top: 0;
     bottom: 0;
     left: 0;
-    width: 100%;
+    width: 120vw;
     background-image: url("/home_bg-min.jpg");
     background-size: cover;
-    opacity: 0.5;
     z-index: -1;
+    opacity: 0;
     pointer-events: none;
+    animation: fadeInBg 5s ease-out 1s 1 forwards,
+      paneBgAround 35s ease-in-out 1s infinite forwards;
+  }
+
+  .splash {
+    .heading-1 {
+      font-size: 50px;
+    }
   }
 }
 </style>

src/views/celestials/Celestial.vue

@@ -0,0 +1,13 @@
+<template>
+  <section class="celestial">
+    <h2>Single Celestial</h2>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Celestial"
+});
+</script>

src/views/celestials/Celestials.vue

@@ -0,0 +1,43 @@
+<template>
+  <section class="celestials">
+    <h2>Le système solaire</h2>
+    <div class="section-content">
+      <celestials-list :celestials="celestials" />
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import axios from "axios";
+
+import CelestialsList from "@/components/celestials/CelestialsList.vue";
+
+export default defineComponent({
+  name: "Celestials",
+  components: {
+    CelestialsList
+  },
+  data() {
+    return {
+      celestials: []
+    };
+  },
+  methods: {
+    fetchBodies() {
+      return axios
+        .get("https://api.le-systeme-solaire.net/rest/bodies/")
+        .then(res => {
+          return res.data.bodies;
+        })
+        .catch(err => {
+          console.log(err);
+          return [];
+        });
+    }
+  },
+  async mounted() {
+    this.celestials = await this.fetchBodies();
+  }
+});
+</script>