feat: integrate mailchimp (#49)

* feat: intergrate mailchimp plugin

* docs: add newsletter

docs/config/README.md

@@ -218,3 +218,20 @@ Service to accomplish commenting.
 Other options depend on which service you pick since this feature is accomplished by the plugins below. All options except `service` will be passed directly to the plugin, so take a look at their documentation for more details:
 - [vuepress-plugin-disqus-comment](https://vuepress-plugin-disqus.netlify.com/#config)
 - [vuepress-plugin-vssue](https://vssue.js.org/guide/vuepress.html#usage)
+
+## newsletter
+
+- Type: `object`
+- Default: `{}`
+- Required: `false`
+
+It will be enabled when `endpoint` is provided. e.g.
+
+```js
+{
+  endpoint: 'https://billyyyyy3320.us4.list-manage.com/subscribe/post?u=4905113ee00d8210c2004e038&id=bd18d40138'
+}
+```
+[vuepress-plugin-mailchimp](https://vuepress-plugin-mailchimp.billyyyyy3320.com/) is how we implement the feature. This config will be pass directly to it, so please head [vuepress-plugin-mailchimp](https://vuepress-plugin-mailchimp.billyyyyy3320.com/#config) for more details.  
+
+

docs/guide/getting-started.md

@@ -393,7 +393,27 @@ module.exports = {
 Of course you can use whatever service you like or roll your own comment system. Just simply ignore the config.
 :::
 
+## Newsletter
 
+A blog newsletter is an email to notify subscribers you’ve published a new blog post. Emails are a great way to build relationships and engage with your readers. 
+
+Just like [Comment](#comment), we integrate a service to help you accomplish it easily. [MailChimp](https://mailchimp.com/) is probably the most well-known email marketing tool. The only required config option is `endpoint`, please head [vuepress-plugin-mailchimp](https://vuepress-plugin-mailchimp.billyyyyy3320.com/#install) to see how to get your own endpoint.
+```js
+// .vuepress/config.js
+module.exports = {
+  plugins: [
+    [
+      '@vuepress/blog',
+      {
+        newsletter: {
+          // Put your endpoint, not mine.
+          endpoint: "https://billyyyyy3320.us4.list-manage.com/subscribe/post?u=4905113ee00d8210c2004e038&id=bd18d40138"
+        },
+      },
+    ],
+  ],
+}
+```
 ## Writing a blog theme
 
 If everything is ok, you can start to write a blog theme. Actually, there are only 2 necessary layout components to

examples/newsletter/.vuepress/config.js

@@ -0,0 +1,31 @@
+module.exports = {
+  title: `ULIVZ`,
+  plugins: [
+    [require('../../../lib/node'), {
+      directories: [
+        {
+          id: 'post',
+          dirname: '_posts',
+          path: '/',
+        },
+      ],
+      frontmatters: [
+        {
+          id: "tag",
+          keys: ['tag', 'tags'],
+          path: '/tag/',
+          frontmatter: { title: 'Tag' },
+        },
+        {
+          id: "location",
+          keys: ['location'],
+          path: '/location/',
+          frontmatter: { title: 'Location' },
+        }
+      ],
+      newsletter: {
+        endpoint: "https://billyyyyy3320.us4.list-manage.com/subscribe/post?u=4905113ee00d8210c2004e038&id=bd18d40138"
+      },
+    }],
+  ],
+}

examples/newsletter/.vuepress/theme/layouts/FrontmatterKey.vue

@@ -0,0 +1,7 @@
+<template>
+  <ul id="default-layout">
+    <li v-for="item in $frontmatterKey.list">
+      <router-link class="page-link" :to="item.path">{{ item.name }}</router-link>
+    </li>
+  </ul>
+</template>

examples/newsletter/.vuepress/theme/layouts/GlobalLayout.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="global-layout">
+    <header style="background-color: #DDD">
+      <router-link to="/">Home</router-link>·
+      <router-link to="/tag/">Tag</router-link>·
+      <router-link to="/location/">Location</router-link>
+    </header>
+    <DefaultGlobalLayout/>
+    <footer style="background-color: #DDD">Powered by VuePress</footer>
+  </div>
+</template>
+
+<script>
+  import GlobalLayout from '@app/components/GlobalLayout.vue'
+  
+  export default {
+    components: { DefaultGlobalLayout: GlobalLayout },
+    created() {
+      console.log()
+    }
+  }
+</script>

examples/newsletter/.vuepress/theme/layouts/Layout.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <ul id="default-layout">
+      <li v-for="page in $pagination.pages">
+        <router-link class="page-link" :to="page.path">{{ page.title }}</router-link>
+      </li>
+    </ul>
+    <div id="pagination">
+      <router-link v-if="$pagination.hasPrev" :to="$pagination.prevLink">Prev</router-link>
+      <router-link v-if="$pagination.hasNext" :to="$pagination.nextLink">Next</router-link>
+    </div>
+
+    <Pagination v-if="$pagination.length > 1"/>
+  </div>
+</template>
+
+<script>
+  import { Pagination } from '../../../../../lib/client/components.js'
+  
+  export default {
+    components: { Pagination },
+    created() {},
+  }
+</script>

examples/newsletter/.vuepress/theme/layouts/Post.vue

@@ -0,0 +1,16 @@
+<template>
+<div>
+  <Content />
+  <SimpleNewsletter />
+</div>
+
+</template>
+
+<script>
+import SimpleNewsletter from "vuepress-plugin-mailchimp/src/components/SimpleNewsletter";
+export default {
+  components: {
+    SimpleNewsletter
+  }
+};
+</script>

examples/newsletter/_posts/2018-11-7-frontmatter-in-vuepress.md

@@ -0,0 +1,12 @@
+---
+date: 2018-11-7
+tag: 
+  - frontmatter
+  - vuepress
+author: ULIVZ
+location: Hangzhou  
+---
+
+# Front Matter in VuePress
+
+

examples/newsletter/_posts/2019-2-26-markdown-slot.md

@@ -0,0 +1,11 @@
+---
+date: 2019-2-26
+tag: 
+  - markdown
+  - vuepress
+author: ULIVZ
+location: Hangzhou  
+---
+
+# Markdown Slot
+

examples/newsletter/_posts/2019-5-16-writing-a-vuepress-theme-4.md

@@ -0,0 +1,12 @@
+---
+date: 2019-5-6
+tag: 
+  - theme
+  - blog
+  - vuepress
+author: ULIVZ
+location: Shanghai  
+---
+
+# Writing a VuePress theme 
+

examples/newsletter/_posts/2019-8-15-why-I-like-git-rebase.md

@@ -0,0 +1,9 @@
+---
+date: 2019-8-15
+tag: 
+  - git
+location: Taipei  
+---
+
+# Why I like "git rebase"
+

examples/newsletter/_posts/2019-9-8-dive-into-vuepress-with-plugin-apis.md

@@ -0,0 +1,9 @@
+---
+date: 2019-9-8
+tag: 
+  - vuepress
+location: Taipei  
+---
+
+# Dive into VuePress with Plugin APIs
+

package.json

@@ -55,6 +55,7 @@
     "@vssue/vuepress-plugin-vssue": "^1.2.0",
     "vuejs-paginate": "^2.1.0",
     "vuepress-plugin-disqus-comment": "^0.2.3",
+    "vuepress-plugin-mailchimp": "^1.2.0",
     "vuepress-plugin-sitemap": "^2.3.0"
   },
   "devDependencies": {

src/node/index.ts

@@ -70,6 +70,10 @@ module.exports = (options: BlogPluginOptions, ctx: VuePressContext) => {
     }
   }
 
+  if (options.newsletter && options.newsletter.endpoint) {
+    plugins.push(['vuepress-plugin-mailchimp', options.newsletter]);
+  }
+
   return {
     name: 'vuepress-plugin-blog',
 

src/node/interface/Options.ts

@@ -128,6 +128,19 @@ export interface Comment extends Partial<VssueOptions>, Partial<DisqusOptions> {
   service: 'vssue' | 'disqus';
 }
 
+export interface Newsletter {
+  endpoint: string;
+  title: string;
+  content: string;
+  popupConfig: PopupConfig;
+}
+
+interface PopupConfig {
+  enabled: boolean;
+  popupComponent: string;
+  timeout: number;
+}
+
 /**
  * Options for this plugin.
  */
@@ -138,4 +151,5 @@ export interface BlogPluginOptions {
   //TODO: define types
   sitemap: any;
   comment: Comment;
+  newsletter: Newsletter;
 }

yarn.lock

@@ -3071,7 +3071,7 @@ de-indent@^1.0.2:
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
+debug@2.6.9, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -5624,6 +5624,13 @@ jsonfile@^4.0.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonp@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/jsonp/-/jsonp-0.2.1.tgz#a65b4fa0f10bda719a05441ea7b94c55f3e15bae"
+  integrity sha1-pltPoPEL2nGaBUQep7lMVfPhW64=
+  dependencies:
+    debug "^2.1.3"
+
 jsonparse@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
@@ -7794,6 +7801,15 @@ query-string@^5.0.1:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^6.9.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.9.0.tgz#1c3b727c370cf00f177c99f328fda2108f8fa3dd"
+  integrity sha512-KG4bhCFYapExLsUHrFt+kQVEegF2agm4cpF/VNc6pZVthIfCc/GK8t8VyNIE3nyXG9DK3Tf2EGkxjR6/uRdYsA==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystring-es3@^0.2.0, querystring-es3@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -8726,6 +8742,11 @@ spdy@^4.0.1:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -8841,6 +8862,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
+
 string-argv@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
@@ -9826,6 +9852,14 @@ vuepress-plugin-disqus-comment@^0.2.3:
   dependencies:
     vue-disqus "^3.0.5"
 
+vuepress-plugin-mailchimp@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/vuepress-plugin-mailchimp/-/vuepress-plugin-mailchimp-1.2.0.tgz#674ff69e94fc6b780920787685f40e2867ceb5cd"
+  integrity sha512-MI3hZnI8UmuVJppbnGQjUwcv5Ylx73SO3n9jt+7MFR///SEU8Dx6BHVYMLKPPMYHcIFuJstvDgsYvhCkP155vg==
+  dependencies:
+    jsonp "^0.2.1"
+    query-string "^6.9.0"
+
 vuepress-plugin-sitemap@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vuepress-plugin-sitemap/-/vuepress-plugin-sitemap-2.3.0.tgz#4fc2573b62235ca80db237fe5e407a241067318b"