playing around with components

docs/.vuepress/components/CallToAction.vue

@@ -0,0 +1,30 @@
+<template>
+<div>
+  <a :href="link">{{ caption }}</a>
+</div>
+</template>
+
+<script>
+export default {
+  props: ['caption', 'link', 'image']
+}
+</script>
+
+<style scoped>
+  a {
+    color: white;
+    background-color: #2ecc71;
+    box-sizing: border-box;
+    border-radius: 6px;
+    padding: 12px 20px;
+    font-size: 20px;
+    line-height: 22px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    box-shadow: 2px 2px 10px rgba(154,171,237,1);
+  }
+  a:hover {
+    background-color: red;
+  }
+</style>

docs/.vuepress/components/Funkwetter.vue

@@ -0,0 +1,9 @@
+<template>
+<h1>caption {{ caption }}</h1>
+</template>
+
+<script>
+export default {
+  props: ['caption']
+}
+</script>

docs/.vuepress/config.js

@@ -1,7 +1,7 @@
+const { registerComponentsPlugin } = require('@vuepress/plugin-register-components')
 const { defaultTheme } = require('@vuepress/theme-default')
 const { socialSharePlugin } = require(`vuepress-plugin-social-share`)
-
-
+const { path } = require('@vuepress/utils')
 
 module.exports = {
   lang: 'de-DE',
@@ -9,6 +9,9 @@ module.exports = {
   description: 'Wir sind eine Gruppe von Funkamateuren die sich mit dem Thema Funken im Freien beschäftigen.',
   plugins: [
     socialSharePlugin(),
+    registerComponentsPlugin({
+      componentsDir: path.resolve(__dirname, './components'),
+    }),
   ],
   theme: defaultTheme({
     sidebarDepth: 0,
@@ -33,4 +36,4 @@ module.exports = {
       }
     ],
   }),
-}
+}