add github icon

docs/package.json

@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@babel/preset-react": "^7.9.4",
+    "html-loader": "^1.1.0",
     "node-sass": "^4.13.1",
     "sass-loader": "^8.0.2",
     "style-resources-loader": "^1.3.3",

docs/src/assets/icons/github.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><path d="M11.999.5C5.649.5.5 5.648.5 12c0 5.082 3.294 9.392 7.865 10.914.574.103.756-.236.756-.541 0-.274.006-1.037 0-1.997-3.198.694-3.861-1.515-3.861-1.515-.523-1.329-1.275-1.682-1.275-1.682-1.045-.714.077-.699.077-.699 1.153.08 1.762 1.184 1.762 1.184 1.026 1.758 2.691 1.25 3.346.956.106-.742.402-1.251.731-1.536-2.554-.292-5.238-1.277-5.238-5.686 0-1.255.448-2.281 1.184-3.086-.118-.289-.514-1.46.112-3.043 0 0 .967-.309 3.162 1.18a11.011 11.011 0 012.88-.388c.976.005 1.96.132 2.88.388 2.195-1.488 3.159-1.18 3.159-1.18.627 1.583.232 2.754.114 3.043.736.805 1.183 1.831 1.183 3.086 0 4.42-2.689 5.391-5.251 5.674.412.357.787 1.047.787 2.12v3.184c0 .308.186.647.77.536C20.209 21.389 23.5 17.08 23.5 12 23.5 5.648 18.352.5 11.999.5z"></path></svg>

docs/src/components/Icon/index.vue

@@ -0,0 +1,38 @@
+<script>
+export default {
+  name: 'Icon',
+
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+
+    size: {
+      type: String,
+      default: 'normal',
+    },
+  },
+
+  render(createElement) {
+    let svgHTML = ''
+    try {
+      svgHTML = require(`!html-loader!@/assets/icons/${this.name}.svg`)
+    } catch (e) {
+      // eslint-disable-next-line
+      console.warn(`Unable to load "${this.name}.svg" icon. Verify it exists in the icons directory.`, e)
+    }
+    return createElement(
+      'div',
+      {
+        class: `icon icon--${this.size}`,
+        domProps: {
+          innerHTML: svgHTML,
+        },
+      },
+    )
+  },
+}
+</script>
+
+<style lang="scss" src="./style.scss" scoped></style>

docs/src/components/Icon/style.scss

@@ -0,0 +1,15 @@
+.icon {
+  display: inline-flex;
+  width: 1.3rem;
+  height: 1.3rem;
+
+  &::v-deep > svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+
+    * {
+      fill: inherit;
+    }
+  }
+}

docs/src/layouts/App/index.vue

@@ -1,35 +1,32 @@
 <template>
   <div class="app">
     <header class="app__header">
-      <div class="app__inner">
-        <g-link class="app__logo" to="/">
-          {{ $static.metadata.siteName }}
-        </g-link>
-      </div>
+      <g-link class="app__logo" to="/">
+        {{ $static.metadata.siteName }}
+      </g-link>
+      <g-link to="https://github.com/scrumpy/tiptap">
+        <icon name="github" />
+      </g-link>
     </header>
     <div class="app__content">
-      <div class="app__inner">
-        <div class="app__content-inner">
-          <nav class="app__sidebar">
-            <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
-              <div class="app__link-group-title">
-                {{ linkGroup.title }}
-              </div>
-              <ul>
-                <li v-for="(item, j) in linkGroup.items" :key="j">
-                  <g-link class="app__link" :to="item.link">
-                    {{ item.title }}
-                  </g-link>
-                </li>
-              </ul>
-            </div>
-          </nav>
-          <main class="app__main">
-            <slot/>
-            <page-navigation />
-          </main>
+      <nav class="app__sidebar">
+        <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
+          <div class="app__link-group-title">
+            {{ linkGroup.title }}
+          </div>
+          <ul>
+            <li v-for="(item, j) in linkGroup.items" :key="j">
+              <g-link class="app__link" :to="item.link">
+                {{ item.title }}
+              </g-link>
+            </li>
+          </ul>
         </div>
-      </div>
+      </nav>
+      <main class="app__main">
+        <slot/>
+        <page-navigation />
+      </main>
     </div>
   </div>
 </template>
@@ -44,10 +41,12 @@ query {
 
 <script>
 import linkGroups from '@/data/links.yaml'
+import Icon from '@/components/Icon'
 import PageNavigation from '@/components/PageNavigation'
 
 export default {
   components: {
+    Icon,
     PageNavigation,
   },
 

docs/src/layouts/App/style.scss

@@ -37,19 +37,28 @@
     }
   }
 
+  &__header,
+  &__content {
+    display: flex;
+    width: 100%;
+    max-width: 62rem;
+    margin: 0 auto;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   &__header {
     flex: 0 0 auto;
-    padding: 2rem 0;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
   }
 
   &__content {
     flex: 1 1 auto;
   }
 
-  &__content-inner {
-    display: flex;
-  }
-
   &__sidebar {
     flex: 0 0 auto;
     width: 18rem;