♻️ Rename example dir and add styling

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].

vuepress-example/src/.vuepress/config.js → example/src/.vuepress/config.js

@@ -1,4 +1,4 @@
 module.exports = {
   theme: 'custom-theme',
-  plugins: [['contributors']],
+  plugins: ['contributors'],
 };

vuepress-example/src/.vuepress/theme/layouts/Layout.vue → example/src/.vuepress/theme/layouts/Layout.vue

@@ -1,7 +1,9 @@
 <template>
   <ParentLayout>
     <template #page-bottom>
-      <contributor-icon profile-name="123" />
+      <div class="contributor-list-footer">
+        <contributor-icon profile-name="123" />
+      </div>
     </template>
   </ParentLayout>
 </template>
@@ -17,4 +19,11 @@ export default {
     ParentLayout
   }
 }
-</script>
+</script>
+
+<style lang="stylus">
+  // mimic the style of `PageEdit.vue` — footer of `Page.vue`
+  .contributor-list-footer
+    max-width $contentWidth
+    margin: 0 auto
+</style>

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": {}
+}