Finishing V1.1 Build

octaniumdev · Feb 11, 2021 · 523dec6 · 523dec6
1 parent 029812f
commit 523dec6
Show file tree

Hide file tree

Showing 12 changed files with 132 additions and 24 deletions.
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -13,6 +13,11 @@
 
 @import './colors.scss';
 
+.hero {
+  background-color: $p-light-alt;
+  margin-bottom: 2rem;
+}
+
 @import './overrides.scss';
 
 @import './nav.scss';

diff --git a/assets/scss/nav.scss b/assets/scss/nav.scss
@@ -1,2 +1,6 @@
 $navbar-background-color: $p-dark-alt !important;
 $footer-background-color: $p-light-alt;
+
+a.navbar-item {
+  color: $text-icons;
+}
diff --git a/assets/scss/post.scss b/assets/scss/post.scss
@@ -1,4 +1,12 @@
 .post p {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.title.article-title {
+  margin-bottom: 1rem;
+}
+
+.read_more {
+  margin-top: 1rem;
 }
diff --git a/components/Post.vue b/components/Post.vue
@@ -1,18 +1,25 @@
 <template>
   <div class="section">
-    <div class="content">
+    <div class="card article">
       <img
         v-if="img"
-        width="600"
-        height="200"
-        :src="`https://api.aclevo.xyz/assets/` +  img + `?fit=cover&height=200&width=600&quality=80`"
+        width="1600"
+        height="400"
+        :src="`https://api.aclevo.xyz/assets/` +  img + `?fit=cover&height=400&width=1600&quality=80`"
       />
-      <nuxt-link :to="`/blog/post/`+ slug">
-        <h2>
-          <u>{{ title }}</u>
-        </h2>
-      </nuxt-link>
-      <div class="content-inner" v-html="content"></div>
+      <div class="content card-content">
+        <div class="media-content has-text-centered">
+          <nuxt-link :to="`/blog/post/`+ slug">
+            <h2 class="title article-title">{{ title }}</h2>
+          </nuxt-link>
+        </div>
+        <div class="content-inner" v-html="content"></div>
+        <div class="read_more has-text-centered">
+          <nuxt-link :to="`/blog/post/` + slug" class="button">
+            <font-awesome-icon :icon="['fas', 'book-open']" />&nbsp;Read More
+          </nuxt-link>
+        </div>
+      </div>
     </div>
   </div>
 </template>

diff --git a/components/nav/Footer.vue b/components/nav/Footer.vue
@@ -1,11 +1,23 @@
 <template>
   <div>
     <footer class="footer">
+      <p class="has-text-centered">(These icons are not functional yet.)</p>
+      <div class="content has-text-centered social_medias" style="font-size: 1.5rem;">
+        <font-awesome-icon :icon="['fab', 'twitter']" />&nbsp;
+        <font-awesome-icon :icon="['fab', 'youtube']" />&nbsp;
+        <font-awesome-icon :icon="['fab', 'mastodon']" />&nbsp;
+        <font-awesome-icon :icon="['fab', 'reddit-alien']" />&nbsp;
+      </div>
       <div class="content has-text-centered">
         <p>
           <strong>Aclevo</strong> ⓒ 2015-2020 All Rights Reserved
         </p>
-        <p>Made using NuxtJS and Bulma. Website content is licensed under CC-BY-SA 4.0.</p>
+        <p>
+          Made using NuxtJS
+          <font-awesome-icon :icon="['fab', 'vuejs']" />&nbsp;and Bulma. Website content is licensed under CC-BY-SA 4.0
+          <font-awesome-icon :icon="['fab', 'creative-commons-by']" />
+          <font-awesome-icon :icon="['fab', 'creative-commons-sa']" />.
+        </p>
       </div>
     </footer>
   </div>

diff --git a/components/nav/Header.vue b/components/nav/Header.vue
@@ -4,13 +4,20 @@
       <nuxt-link class="navbar-item" to="/">
         <h1 class="has-text-weight-bold">Aclevo</h1>
       </nuxt-link>
-      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
+      <a
+        role="button"
+        class="navbar-burger"
+        aria-label="menu"
+        aria-expanded="false"
+        @click="isOpen = !isOpen"
+        v-bind:class="{'is-active': isOpen}"
+      >
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
       </a>
     </div>
-    <div class="navbar-menu">
+    <div class="navbar-menu" :class="{'is-active': isOpen}">
       <div class="navbar-start">
         <nuxt-link to="/" class="navbar-item">Projects</nuxt-link>
         <nuxt-link to="/" class="navbar-item">Series</nuxt-link>
@@ -29,3 +36,12 @@
     </div>
   </nav>
 </template>
+<script>
+export default {
+  data: function () {
+    return {
+      isOpen: false,
+    };
+  },
+};
+</script>
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -64,10 +64,18 @@ export default {
   ** Nuxt.js dev-modules
   */
   buildModules: [
-    '@/modules/sitemapRouteGenerator',
-    '@nuxtjs/google-analytics'
+    '@/utils/sitemapRouteGenerator',
+    '@nuxtjs/google-analytics',
+    '@nuxtjs/fontawesome',
   ],
 
+  fontawesome: {
+    icons: {
+      solid: true,
+      brands: true,
+    }
+  },
+
   googleAnalytics: {
     id: 'UA-63265906-2'
   },

diff --git a/package.json b/package.json
@@ -19,6 +19,9 @@
     "vue2-filters": "^0.11.1"
   },
   "devDependencies": {
+    "@fortawesome/free-brands-svg-icons": "^5.15.2",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@nuxtjs/fontawesome": "^1.1.2",
     "@nuxtjs/google-analytics": "^2.4.0",
     "node-sass": "^4.14.1",
     "sass-loader": "^10.0.2"

diff --git a/pages/blog/_number.vue b/pages/blog/_number.vue
@@ -14,15 +14,19 @@
         :key="post._id"
         :id="post._id"
         :title="post.title"
-        :content="post.post | truncate(1000)"
+        :content="post.post | truncate(1200)"
         :img="post.image"
         :slug="post.slug"
       />
     </div>
     <div class="container">
-      <section class="section" id="prev-next">
-        <nuxt-link :to="prevLink">Prev page</nuxt-link>
-        <nuxt-link v-if="nextPage" :to="`/blog/${pageNo + 1}`">Next page</nuxt-link>
+      <section class="section has-text-centered" id="prev-next">
+        <nuxt-link class="button" :to="prevLink">
+          <font-awesome-icon :icon="['fas', 'arrow-left']" />&nbsp;Previous Page
+        </nuxt-link>
+        <nuxt-link v-if="nextPage" class="button" :to="`/blog/${pageNo + 1}`">
+          <font-awesome-icon :icon="['fas', 'arrow-right']" />&nbsp;Next Page
+        </nuxt-link>
       </section>
     </div>
   </div>

diff --git a/pages/blog/index.vue b/pages/blog/index.vue
@@ -14,14 +14,16 @@
         :key="post._id"
         :id="post._id"
         :title="post.title"
-        :content="post.post | truncate(1000)"
+        :content="post.post  | truncate(1200)"
         :img="post.image"
         :slug="post.slug"
       />
     </div>
     <div class="container">
-      <section class="section" id="next" v-if="nextPage">
-        <nuxt-link to="/blog/2">Next page</nuxt-link>
+      <section class="section has-text-centered" id="next" v-if="nextPage">
+        <nuxt-link class="button" to="/blog/2">
+          <font-awesome-icon :icon="['fas', 'arrow-right']" />&nbsp;Next Page
+        </nuxt-link>
       </section>
     </div>
   </div>

diff --git a/modules/sitemapRouteGenerator.js → utils/sitemapRouteGenerator.js b/modules/sitemapRouteGenerator.js → utils/sitemapRouteGenerator.js
diff --git a/yarn.lock b/yarn.lock
@@ -851,6 +851,37 @@
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
+"@fortawesome/fontawesome-common-types@^0.2.34":
+  version "0.2.34"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz#0a8c348bb23b7b760030f5b1d912e582be4ec915"
+  integrity sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA==
+
+"@fortawesome/fontawesome-svg-core@^1.2.27":
+  version "1.2.34"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz#1d1a7c92537cbc2b8a83eef6b6d824b4b5b46b26"
+  integrity sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.34"
+
+"@fortawesome/free-brands-svg-icons@^5.15.2":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.2.tgz#d74e2540b5552b915d6bef719f17e361b70a8d65"
+  integrity sha512-YPlVjE1cEO+OJ9I9ay3TQ3I88+XkxMTYwnnddqAboxLhPNGncsHV0DjWOVLCyuAY66yPfyndWwVn4v7vuqsO1g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.34"
+
+"@fortawesome/free-solid-svg-icons@^5.15.2":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz#25bb035de57cf85aee8072965732368ccc8e8943"
+  integrity sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.34"
+
+"@fortawesome/vue-fontawesome@^0.1.9":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.10.tgz#eeeec1e4e8850bed0468f938292b06cda793bf34"
+  integrity sha512-b2+SLF31h32LSepVcXe+BQ63yvbq5qmTCy4KfFogCYm2bn68H5sDWUnX+U7MBqnM2aeEk9M7xSoqGnu+wSdY6w==
+
 "@lokidb/full-text-search@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@lokidb/full-text-search/-/full-text-search-2.1.0.tgz#5f0b36dc0d67ba365f84663a9c0438537c186a76"
@@ -1285,6 +1316,14 @@
   dependencies:
     bulma "^0.9.0"
 
+"@nuxtjs/fontawesome@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/fontawesome/-/fontawesome-1.1.2.tgz#0add6519095b392bdffb6e3ad40f3026d20f5c44"
+  integrity sha512-QAfo7hdc6hiCOohdR861oNQ+riKW/kD22bYyvaC++xXiiC1hBQcrRQ6xXd5gln+6SKCwT09+C4kGjzTgrwtr7w==
+  dependencies:
+    "@fortawesome/fontawesome-svg-core" "^1.2.27"
+    "@fortawesome/vue-fontawesome" "^0.1.9"
+
 "@nuxtjs/google-analytics@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@nuxtjs/google-analytics/-/google-analytics-2.4.0.tgz#3bb9f398a05cc23340d1f423f8d8653dc4114f46"