feat: create out-of-box component <newsletter>

Author: billyyyyy3320

.eslintrc.js

@@ -9,7 +9,8 @@ module.exports = {
   },
 
   globals: {
-    COMMENT_SERVICE: true
+    COMMENT_SERVICE: true,
+    IS_NEWSLETTER_ENABLED: true
   },
 
   extends: [

docs/.vuepress/public/Newsletter.png

@@ -96,4 +96,32 @@ export default {
 
 <img src="/Vssue.png" />
 
+## `<Newsletter>`
 
+- Source Code: [Comment.vue](https://github.com/ulivz/vuepress-plugin-blog/blob/master/src/client/components/Newsletter.vue)
+
+- Usage:
+
+```vue
+<template>
+  <Newsletter />
+</template>
+
+<script>
+import { Newsletter } from '@vuepress/plugin-blog/lib/client/components'
+export default {
+  components: {
+    Newsletter
+  }
+}
+</script>
+```
+- Output:
+
+<img src="/Newsletter.png" width="500"/>
+
+::: tip 
+For `<Comment>` and `<Newsletter>`:
+
+When you're writing your own theme, you may offer user options whether to enable or not. In this scenario, you can still simply put those components in your layout component because it has handled this condition. It'll render nothing without error if the feature is disabled.
+:::

docs/components/README.md

@@ -435,6 +435,30 @@ module.exports = {
   ],
 }
 ```
+
+Again, a out-of-box component `<Newsletter>`. you can import it from `'@vuepress/plugin-blog/lib/client/components'`.
+
+```vue
+// layouts/Post.vue
+<template>
+  <div>
+      <Content />
+      <Newsletter />
+      <Comment />
+  </div>
+</template>
+
+<script>
+import { Comment, Newsletter } from '@vuepress/plugin-blog/lib/client/components'
+
+export default {
+  components: {
+    Comment,
+    Newsletter
+  },
+}
+</script>
+```
 ## 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

docs/guide/getting-started.md

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

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

@@ -4,5 +4,7 @@ import Pagination from './components/Pagination.vue';
 import SimplePagination from './components/SimplePagination.vue';
 // @ts-ignore
 import Comment from './components/Comment.vue';
+// @ts-ignore
+import Newsletter from './components/Newsletter.vue';
 
-export { Pagination, SimplePagination, Comment };
+export { Pagination, SimplePagination, Comment, Newsletter };

src/client/components.ts

@@ -0,0 +1,15 @@
+<template>
+  <SimpleNewsletter v-if="isNewsletterEnabled" />
+</template>
+<script>
+export default {
+  data() {
+    return {
+      isNewsletterEnabled: IS_NEWSLETTER_ENABLED,
+    };
+  },
+  mounted() {
+    if (!this.isNewsletterEnabled) console.warn('Newsletter is disabled!');
+  },
+};
+</script>

src/client/components/Newsletter.vue

@@ -70,7 +70,11 @@ module.exports = (options: BlogPluginOptions, ctx: VuePressContext) => {
     }
   }
 
-  if (options.newsletter && options.newsletter.endpoint) {
+  const isNewsletterEnabled = !!(
+    options.newsletter && options.newsletter.endpoint
+  );
+
+  if (isNewsletterEnabled) {
     plugins.push(['vuepress-plugin-mailchimp', options.newsletter]);
   }
 
@@ -248,6 +252,7 @@ export default ${serializePaginations(ctx.serializedPaginations, [
 
     define: {
       COMMENT_SERVICE: options.comment && options.comment.service,
+      IS_NEWSLETTER_ENABLED: isNewsletterEnabled,
     },
   };
 };