From df803ff3e3241848e4541178a652e4623b42e2a4 Mon Sep 17 00:00:00 2001
From: Dima Boger <kotvberloge@gmail.com>
Date: Mon, 18 May 2020 15:50:50 +0300
Subject: [PATCH] :recycle: Rename example dir and add styling

---
 README.md                                     |  2 +-
 {vuepress-example => example}/package.json    |  4 +--
 .../src/.vuepress/config.js                   |  2 +-
 .../src/.vuepress/theme/index.js              |  0
 .../src/.vuepress/theme/layouts/Layout.vue    | 29 +++++++++++++++++++
 example/src/.vuepress/theme/package.json      |  7 +++++
 {vuepress-example => example}/src/index.md    |  0
 .../src/.vuepress/theme/layouts/Layout.vue    | 20 -------------
 8 files changed, 40 insertions(+), 24 deletions(-)
 rename {vuepress-example => example}/package.json (71%)
 rename {vuepress-example => example}/src/.vuepress/config.js (60%)
 rename {vuepress-example => example}/src/.vuepress/theme/index.js (100%)
 create mode 100644 example/src/.vuepress/theme/layouts/Layout.vue
 create mode 100644 example/src/.vuepress/theme/package.json
 rename {vuepress-example => example}/src/index.md (100%)
 delete mode 100644 vuepress-example/src/.vuepress/theme/layouts/Layout.vue

diff --git a/README.md b/README.md
index aca395a..f0b2993 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ You can use the component by itself: add `<Contributors/>` to any `.md` file and
 But the most valuable part of this plugin is the ability to inject a distinct contributor list into each page.
 Unfortunately, VuePress allows to customize the `Page` component only via custom themes, so you need to do some magic as follows.
 
-Create `theme` directory in your `.vuepress`, `index.js` and `layouts/Layout.vue` there as in (vuepress-example)[vuepress-example].
+Create `theme` directory in your `.vuepress`, `index.js` and `layouts/Layout.vue` there as in (example)[example].
 Then add this theme as file dependency to a project (example), and setup your theme to config.js (example).
 
 If you to want change size or position of the `Contributors` component in the `Page` component, please use `Layout.vue` and (theme customization instruction)[https://vuepress.vuejs.org/theme/writing-a-theme.html].
diff --git a/vuepress-example/package.json b/example/package.json
similarity index 71%
rename from vuepress-example/package.json
rename to example/package.json
index d4cf45c..1aa41c6 100644
--- a/vuepress-example/package.json
+++ b/example/package.json
@@ -10,7 +10,7 @@
   "license": "MIT",
   "dependencies": {
     "vuepress": "^1.5.0",
-    "custom-theme": "file:./src/.vuepress/theme",
-    "vuepress-plugin-contributors": "file:../lib"
+    "vuepress-plugin-contributors": "file:../",
+    "custom-theme": "file:./src/.vuepress/theme"
   }
 }
diff --git a/vuepress-example/src/.vuepress/config.js b/example/src/.vuepress/config.js
similarity index 60%
rename from vuepress-example/src/.vuepress/config.js
rename to example/src/.vuepress/config.js
index ef777f7..43e847c 100644
--- a/vuepress-example/src/.vuepress/config.js
+++ b/example/src/.vuepress/config.js
@@ -1,4 +1,4 @@
 module.exports = {
   theme: 'custom-theme',
-  plugins: [['contributors']],
+  plugins: ['contributors'],
 };
diff --git a/vuepress-example/src/.vuepress/theme/index.js b/example/src/.vuepress/theme/index.js
similarity index 100%
rename from vuepress-example/src/.vuepress/theme/index.js
rename to example/src/.vuepress/theme/index.js
diff --git a/example/src/.vuepress/theme/layouts/Layout.vue b/example/src/.vuepress/theme/layouts/Layout.vue
new file mode 100644
index 0000000..cc464b3
--- /dev/null
+++ b/example/src/.vuepress/theme/layouts/Layout.vue
@@ -0,0 +1,29 @@
+<template>
+  <ParentLayout>
+    <template #page-bottom>
+      <div class="contributor-list-footer">
+        <contributor-icon profile-name="123" />
+      </div>
+    </template>
+  </ParentLayout>
+</template>
+
+<script>
+import ContributorIcon from 'vuepress-plugin-contributors/lib/components/ContributorIcon'
+import ParentLayout from '@parent-theme/layouts/Layout.vue'
+
+export default {
+  name: 'Layout',
+  components: {
+    ContributorIcon,
+    ParentLayout
+  }
+}
+</script>
+
+<style lang="stylus">
+  // mimic the style of `PageEdit.vue` — footer of `Page.vue`
+  .contributor-list-footer
+    max-width $contentWidth
+    margin: 0 auto
+</style>
\ No newline at end of file
diff --git a/example/src/.vuepress/theme/package.json b/example/src/.vuepress/theme/package.json
new file mode 100644
index 0000000..8a11c4a
--- /dev/null
+++ b/example/src/.vuepress/theme/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "theme",
+  "version": "0.0.0",
+  "description": "Custom Theme with injected @tlbootcamp/contributor component",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/vuepress-example/src/index.md b/example/src/index.md
similarity index 100%
rename from vuepress-example/src/index.md
rename to example/src/index.md
diff --git a/vuepress-example/src/.vuepress/theme/layouts/Layout.vue b/vuepress-example/src/.vuepress/theme/layouts/Layout.vue
deleted file mode 100644
index c2bb514..0000000
--- a/vuepress-example/src/.vuepress/theme/layouts/Layout.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <ParentLayout>
-    <template #page-bottom>
-      <contributor-icon profile-name="123" />
-    </template>
-  </ParentLayout>
-</template>
-
-<script>
-import ContributorIcon from 'vuepress-plugin-contributors/components/ContributorIcon'
-import ParentLayout from '@parent-theme/layouts/Layout.vue'
-
-export default {
-  name: 'Layout',
-  components: {
-    ContributorIcon,
-    ParentLayout
-  }
-}
-</script>
\ No newline at end of file