[Footer] Social networks

components/Footer.vue

@@ -9,15 +9,15 @@
         {{ year }}
       </a>
     </div>
-    <!-- <div class="socials container">
-      <a v-for="(link, social) in social_network"
-        :key="social"
-        :href="link"
+    <div class="socials container">
+      <a v-for="network in socialNetworks"
+        :key="network.name"
+        :href="network.link"
         target="_blank"
       >
-        {{ social }}
+        <Icon :icon="network.icon" />
       </a>
-    </div> -->
+    </div>
   </footer>
 </template>
 
@@ -37,10 +37,33 @@ import {
 
 const MainState = namespace(mainStoreName, State)
 
+const socialIconMapping = {
+  blog: ['fab', 'blogger'],
+  facebook: ['fab', 'facebook'],
+  flickr: ['fab', 'flickr'],
+  google_plus: ['fab', 'google-plus'],
+  plurk: ['ext', 'plurk'],
+  twitter: ['fab', 'twitter'],
+  youtube: ['fab', 'youtube'],
+  telegram_group: ['fab', 'telegram'],
+  telegram_channel: 'bullhorn',
+}
+
 @Component
 export default class extends Vue {
   @MainState previous_websites
-  @MainState social_network
+  @MainState('social_network') socialNetworkLinks
+
+  get socialIconMapping() { return socialIconMapping }
+
+  get socialNetworks() {
+    return Object.entries(this.socialNetworkLinks).map(([name, link]) => ({
+      name,
+      link,
+      icon: socialIconMapping[name],
+      title: name,
+    }))
+  }
 }
 </script>
 
@@ -59,7 +82,6 @@ footer {
   background-color: var(--secondary);
   box-shadow: inset 0px 6px 12px -12px rgba(0, 0, 0, 0.5);
   color: var(--accent);
-  font-size: .9em;
 
   display: flex;
   flex-direction: column;
@@ -78,11 +100,27 @@ footer a {
 .years, .socials {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: space-evenly;
 }
 
 .years a,
 .socials a {
-  margin: 0 .5em;
+  flex-grow: 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.years {
+  font-size: .9em;
+}
+
+.socials {
+  font-size: 1.6em;
+}
+
+.socials a {
+  padding: .2em 0;
 }
 </style>

fonticons/constants.ts

@@ -0,0 +1 @@
+export const prefix = "ext"

fonticons/extPlurk.ts

@@ -0,0 +1,13 @@
+import { prefix } from './constants'
+
+export default {
+  prefix,
+  iconName: 'plurk',
+  icon: [
+    24,
+    24,
+    [],
+    '',
+    "M11.259 23.992c-.543-.049-1.08-.115-1.424-.18-2.056-.379-3.957-1.279-5.59-2.645-.342-.283-1.123-1.066-1.416-1.41C1.276 17.903.349 15.75.056 13.316c-.074-.624-.074-2.014 0-2.64.334-2.785 1.505-5.203 3.459-7.16C5.472 1.561 7.896.391 10.681.057c.625-.076 2.017-.076 2.639 0 2.436.29 4.581 1.215 6.439 2.775.344.285 1.125 1.068 1.413 1.41 1.56 1.863 2.491 4.02 2.775 6.435.039.333.053.671.053 1.319 0 .652-.015.99-.053 1.32-.284 2.426-1.206 4.559-2.775 6.438-.285.342-1.069 1.125-1.413 1.412-1.871 1.559-4.027 2.492-6.407 2.77-.39.045-1.785.082-2.091.055l-.002.001zm-1.944-2.935c.555-.096 1.141-.33 1.619-.65.273-.182.866-.764 1.035-1.02.338-.5.561-1.131.6-1.695l.01-.105.461-.02c1.832-.08 3.401-.621 4.76-1.639 1.614-1.209 2.599-2.782 2.883-4.612.075-.473.075-1.511 0-1.979-.232-1.482-.941-2.821-2.069-3.905-1.348-1.294-2.985-2.06-4.894-2.286-.541-.066-1.6-.066-2.15 0-1.402.164-2.615.6-3.707 1.324C6.065 5.663 4.958 7.289 4.63 9.21c-.097.561-.109 1.278-.1 4.979l.012 3.633.068.299c.362 1.621 1.745 2.795 3.504 2.986.297.029.873.006 1.199-.051h.002zM8.19 19.15c-.897-.146-1.574-.768-1.68-1.533-.02-.162-.027-1.447-.02-4.033.01-3.716.015-3.802.074-4.121.089-.453.216-.83.425-1.245.239-.487.51-.853.945-1.293 1.053-1.055 2.294-1.649 3.844-1.841.379-.048 1.371-.048 1.734 0 .155.018.447.068.648.107 1.891.381 3.589 1.705 4.289 3.346.413.967.451 2.247.103 3.296-.42 1.257-1.492 2.423-2.861 3.104-.552.278-1.11.459-1.822.59-.311.061-.471.064-1.788.078l-1.446.016v.951c0 1.33-.038 1.484-.501 1.951-.285.285-.57.453-.951.559-.245.07-.754.102-.99.064l-.003.004zm5.063-7.175c1.34-.37 1.844-1.75.99-2.695-.631-.698-1.691-.894-2.554-.471-.524.259-.885.66-1.008 1.135-.034.135-.046.375-.046 1.145v.975l1.197-.01c1.102-.012 1.211-.016 1.42-.076v-.003z",
+  ],
+}

fonticons/index.d.ts

@@ -0,0 +1,4 @@
+declare module 'ext*.ts' {
+  import { IconDefinition } from '@fortawesome/fontawesome-common-types'
+  export default IconDefinition
+}

fonticons/index.ts

@@ -0,0 +1,13 @@
+import { IconPack } from '@fortawesome/fontawesome-common-types'
+
+import { prefix } from './constants'
+import extPlurk from './extPlurk'
+
+export default <IconPack> {
+  extPlurk,
+}
+export {
+  prefix,
+
+  extPlurk,
+}

nuxt.config.js

@@ -38,6 +38,11 @@ module.exports = {
           exclude: /(node_modules)/
         })
       }
+
+      // Tree shaking fontAwesome icons
+      ['fontawesome-free-solid', 'fontawesome-free-brands'].forEach((iconset) => {
+        config.resolve.alias[`@fortawesome/${iconset}$`] = `@fortawesome/${iconset}/shakable.es.js`
+      })
     },
     vendors: [
       'babel-polyfill',
@@ -66,6 +71,7 @@ module.exports = {
       defaultLocale: 'zh-TW',
     }],
     '@nuxtjs/sitemap',
+    'nuxt-fontawesome',
   ],
   plugins: [
     {
@@ -81,4 +87,34 @@ module.exports = {
     hostname: 'https://2018.coscup.org',
     generate: true,
   },
+  fontawesome: {
+    component: 'Icon',
+    imports: [
+      {
+        set: '@fortawesome/fontawesome-free-solid',
+        icons: [
+          'faBullhorn',
+        ],
+      },
+      {
+        set: '@fortawesome/fontawesome-free-brands',
+        icons: [
+          /* Social networks */
+          'faBlogger',
+          'faFacebook',
+          'faFlickr',
+          'faGooglePlus',
+          'faTwitter',
+          'faYoutube',
+          'faTelegram',
+        ],
+      },
+      {
+        set: '~/fonticons',
+        icons: [
+          'extPlurk',
+        ],
+      },
+    ],
+  },
 }

package.json

@@ -14,10 +14,13 @@
     "precommit": "npm run lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free-brands": "^5.0.13",
+    "@fortawesome/fontawesome-free-solid": "^5.0.13",
     "@nuxtjs/moment": "^1.0.0",
     "@nuxtjs/sitemap": "^0.1.1",
     "moment": "^2.22.1",
     "nuxt": "^1.4.0",
+    "nuxt-fontawesome": "^0.1.3",
     "nuxt-i18n": "^3.2.3",
     "nuxt-property-decorator": "^1.2.0",
     "vue2-google-maps": "^0.9.7",

yarn.lock

@@ -78,6 +78,32 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-common-types@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz#4336c4b06d0b5608ff1215464b66fcf9f4795284"
+
+"@fortawesome/fontawesome-free-brands@^5.0.13":
+  version "5.0.13"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.13.tgz#4d15ff4e1e862d5e4a4df3654f8e8acbd47e9c09"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.1.7"
+
+"@fortawesome/fontawesome-free-solid@^5.0.13":
+  version "5.0.13"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.13.tgz#24b61aaf471a9d34a5364b052d64a516285ba894"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.1.7"
+
+"@fortawesome/fontawesome@^1.1.3":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz#75fe66a60f95508160bb16bd781ad7d89b280f5b"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.1.7"
+
+"@fortawesome/vue-fontawesome@^0.0.22":
+  version "0.0.22"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.0.22.tgz#720457bda0e5866265e5e0f8fe4fbd857fa5653f"
+
 "@nuxtjs/moment@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@nuxtjs/moment/-/moment-1.0.0.tgz#f7758911849323e22e23bb62feff06db05e16d91"
@@ -3714,6 +3740,13 @@ number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
+nuxt-fontawesome@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/nuxt-fontawesome/-/nuxt-fontawesome-0.1.3.tgz#0f56abadf0fcf7fee5324d32c5610ae75c49b954"
+  dependencies:
+    "@fortawesome/fontawesome" "^1.1.3"
+    "@fortawesome/vue-fontawesome" "^0.0.22"
+
 nuxt-i18n@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/nuxt-i18n/-/nuxt-i18n-3.2.3.tgz#5dacc5a4fa93f0cf25f66ab1af320dba3d9463a8"