Home

Front Matter

You can specify the page's metadata via YAML front matter, which is supported automatically in any markdown file. JSON or TOML works also if you prefer those formats.

The important point is that VuePress makes this frontmatter data available via $page.frontmatter.

$page will be made available to the rest of the page including any components being used.

For example:

# YAML frontmatter, specifying our page metadata
---
title: homepage
description: this is the homepage
---

# Vue syntax, will evaluate valid JS expressions
{{ $page.frontmatter }}

Will result in $page.frontmatter to become:

{ "title": "homepage", "description": "this is the homepage" }

docs/README.md

The content for the homepage goes here.

---
layout: Landing
heroImage: /img/cute_doggo_0.jpeg
socials:
- target: github
  src: https://github.com/
- target: linkedin
  src: https://www.linkedin.com/
- target: facebook
  src: 'https://www.facebook.com/'
- target: instagram
  src: 'https://www.instagram.com/'
footer: MIT Licensed | Made with ♥ by strychemi
---

Velit ut officia velit amet veniam adipisicing dolore ex magna Lorem. Consequat nostrud ullamco sint nostrud minim do voluptate aute fugiat cupidatat in adipisicing reprehenderit commodo. Nisi sit do commodo laborum est velit nostrud. Eiusmod est exercitation duis exercitation voluptate occaecat aliquip.

By default, each *.md file is parsed to html and rendered inside a <div class="page"> container, and comes with autogenerated sidebar/edit links/etc.

This works great for doc-focused pages, but if you want to use your own custom page layout/component, just specify the component to use in the YAML front matter via the layout field as shown above.

This will use .vuepress/components/Landing.vue as the layout for the page.

How this component is structured

Taking a look at .vuepress/components/Landing.vue:

<template>
<div class="home">
  <div class="hero">

    <!-- Profile Image -->
    <img
      class="profile-img"
      v-if="data.heroImage"
      :src="$withBase(data.heroImage)"
      alt="hero"
    >

    <!-- Title & Description -->
    <h1>{{ data.heroText || $title || 'Hello' }}</h1>

    <p class="description">
      {{ data.tagline || $description || 'Welcome to your VuePress site' }}
    </p>

    <!-- Social Links -->
    <div class="socials">
      <div v-for="item in data.socials">
        <a :href="item.src" target="_blank">
          <font-awesome-icon 
            :icon="['fab', item.target]" 
            size="3x"
          />
        </a>
      </div>
    </div>
    
  </div>

  <!-- all markdown content after the YAML frontmatter will go in here -->
  <Content custom/>

  <!-- Footer -->
  <div
    class="footer"
    v-if="data.footer"
  >
    {{ data.footer }}
  </div>
  
</div>
</template>

<script>
export default {
  name: "Landing",
  computed: {
    data() {
      return this.$page.frontmatter;
    }
  }
}
</script>

<style lang="stylus" scoped>
.home
  .hero
    border-bottom: 1px solid #eaecef
    img
      max-height: 200px

.profile-img 
  border-radius: 150px

.socials
  display: flex
  flex-direction: row
  justify-content: center
  div
    padding: 1em
</style>

Data supplied to the component is specified via YAML frontmatter in README.md in the docs/ dir.

Relative links to profile images, social button links, and footer content should be specified within the the YAML frontmatter.

Vuepress takes this frontmatter data and makes it available to this component as this.$page.frontmatter.

In the code above, we assign this.$page.frontmatter to the component's computed property data so we don't have to type this.$page.frontmatter in our template multiple times.

Any content/markdown that comes after the frontmatter in README.md will go to <Content custom/>, as seen in this component's template.

This Content component is globally available component and can be used in any custom component, which is quite useful if you are using a lot of custom layouts.

You can take advantage of this structure to easily customize the landing page.

FontAwesome Integration

For the social icons (Github, LinkedIn, etc.), I went with FontAwesome for the ease of integration and maintenance.

This template project comes with it integrated, but if you want to learn how to integrate it in a Vue system, check out the official Font Awesome Vue Component.

Here's the steps to integrate it into VuePress:

Install dependencies (should already be done, if you ran yarn on this project).

Import the icons you need to .vuepress/enhanceApp.js.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faGithub, faLinkedin, faInstagram, faFacebook } from '@fortawesome/free-brands-svg-icons';
import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome';


export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData // site metadata
}) => {
  // ...apply enhancements to the app

  // adding the fontawesome icons we need
  library.add(faGithub, faLinkedin, faInstagram, faFacebook, faEnvelope);
  // globally registering the Vue components
  Vue.component('font-awesome-icon', FontAwesomeIcon);
  Vue.component('font-awesome-layers', FontAwesomeLayers);
  Vue.component('font-awesome-layers-text', FontAwesomeLayersText);
}

For more info on the full API head here: vue-fontawesome.

To search for icons, you can search for them on the font awesome homepage.