add save page

Author: Doge Chan

.electron-vue/webpack.renderer.config.js

@@ -1,16 +1,16 @@
-'use strict'
+"use strict";
 
-process.env.BABEL_ENV = 'renderer'
+process.env.BABEL_ENV = "renderer";
 
-const path = require('path')
-const { dependencies } = require('../package.json')
-const webpack = require('webpack')
+const path = require("path");
+const { dependencies } = require("../package.json");
+const webpack = require("webpack");
 
-const BabiliWebpackPlugin = require('babili-webpack-plugin')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const { VueLoaderPlugin } = require('vue-loader')
+const BabiliWebpackPlugin = require("babili-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { VueLoaderPlugin } = require("vue-loader");
 
 /**
  * List of node_modules to include in webpack bundle
@@ -19,161 +19,164 @@ const { VueLoaderPlugin } = require('vue-loader')
  * that provide pure *.vue files that need compiling
  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
  */
-let whiteListedModules = ['vue', 'vuetify']
+let whiteListedModules = ["vue", "vuetify", "vue-notification"];
 
 let rendererConfig = {
-  devtool: '#cheap-module-eval-source-map',
+  devtool: "#cheap-module-eval-source-map",
   entry: {
-    renderer: path.join(__dirname, '../src/renderer/main.js')
+    renderer: path.join(__dirname, "../src/renderer/main.js")
   },
   externals: [
-    ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
+    ...Object.keys(dependencies || {}).filter(
+      d => !whiteListedModules.includes(d)
+    )
   ],
   module: {
     rules: [
       {
         test: /\.scss$/,
-        use: ['vue-style-loader', 'css-loader', 'sass-loader']
+        use: ["vue-style-loader", "css-loader", "sass-loader"]
       },
       {
         test: /\.sass$/,
-        use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']
+        use: ["vue-style-loader", "css-loader", "sass-loader?indentedSyntax"]
       },
       {
         test: /\.less$/,
-        use: ['vue-style-loader', 'css-loader', 'less-loader']
+        use: ["vue-style-loader", "css-loader", "less-loader"]
       },
       {
         test: /\.css$/,
-        use: ['vue-style-loader', 'css-loader']
+        use: ["vue-style-loader", "css-loader"]
       },
       {
         test: /\.html$/,
-        use: 'vue-html-loader'
+        use: "vue-html-loader"
       },
       {
         test: /\.js$/,
-        use: 'babel-loader',
+        use: "babel-loader",
         exclude: /node_modules/
       },
       {
         test: /\.node$/,
-        use: 'node-loader'
+        use: "node-loader"
       },
       {
         test: /\.vue$/,
         use: {
-          loader: 'vue-loader',
+          loader: "vue-loader",
           options: {
-            extractCSS: process.env.NODE_ENV === 'production',
+            extractCSS: process.env.NODE_ENV === "production",
             loaders: {
-              sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
-              scss: 'vue-style-loader!css-loader!sass-loader',
-              less: 'vue-style-loader!css-loader!less-loader'
+              sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax=1",
+              scss: "vue-style-loader!css-loader!sass-loader",
+              less: "vue-style-loader!css-loader!less-loader"
             }
           }
         }
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         use: {
-          loader: 'url-loader',
+          loader: "url-loader",
           query: {
             limit: 10000,
-            name: 'imgs/[name]--[folder].[ext]'
+            name: "imgs/[name]--[folder].[ext]"
           }
         }
       },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
+        loader: "url-loader",
         options: {
           limit: 10000,
-          name: 'media/[name]--[folder].[ext]'
+          name: "media/[name]--[folder].[ext]"
         }
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
         use: {
-          loader: 'url-loader',
+          loader: "url-loader",
           query: {
             limit: 10000,
-            name: 'fonts/[name]--[folder].[ext]'
+            name: "fonts/[name]--[folder].[ext]"
           }
         }
       }
     ]
   },
   node: {
-    __dirname: process.env.NODE_ENV !== 'production',
-    __filename: process.env.NODE_ENV !== 'production'
+    __dirname: process.env.NODE_ENV !== "production",
+    __filename: process.env.NODE_ENV !== "production"
   },
   plugins: [
     new VueLoaderPlugin(),
-    new MiniCssExtractPlugin({filename: 'styles.css'}),
+    new MiniCssExtractPlugin({ filename: "styles.css" }),
     new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: path.resolve(__dirname, '../src/index.ejs'),
+      filename: "index.html",
+      template: path.resolve(__dirname, "../src/index.ejs"),
       minify: {
         collapseWhitespace: true,
         removeAttributeQuotes: true,
         removeComments: true
       },
-      nodeModules: process.env.NODE_ENV !== 'production'
-        ? path.resolve(__dirname, '../node_modules')
-        : false
+      nodeModules:
+        process.env.NODE_ENV !== "production"
+          ? path.resolve(__dirname, "../node_modules")
+          : false
     }),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin()
   ],
   output: {
-    filename: '[name].js',
-    libraryTarget: 'commonjs2',
-    path: path.join(__dirname, '../dist/electron')
+    filename: "[name].js",
+    libraryTarget: "commonjs2",
+    path: path.join(__dirname, "../dist/electron")
   },
   resolve: {
     alias: {
-      '@': path.join(__dirname, '../src/renderer'),
-      'vue$': 'vue/dist/vue.esm.js'
+      "@": path.join(__dirname, "../src/renderer"),
+      vue$: "vue/dist/vue.esm.js"
     },
-    extensions: ['.js', '.vue', '.json', '.css', '.node']
+    extensions: [".js", ".vue", ".json", ".css", ".node"]
   },
-  target: 'electron-renderer'
-}
+  target: "electron-renderer"
+};
 
 /**
  * Adjust rendererConfig for development settings
  */
-if (process.env.NODE_ENV !== 'production') {
+if (process.env.NODE_ENV !== "production") {
   rendererConfig.plugins.push(
     new webpack.DefinePlugin({
-      '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
+      __static: `"${path.join(__dirname, "../static").replace(/\\/g, "\\\\")}"`
     })
-  )
+  );
 }
 
 /**
  * Adjust rendererConfig for production settings
  */
-if (process.env.NODE_ENV === 'production') {
-  rendererConfig.devtool = ''
+if (process.env.NODE_ENV === "production") {
+  rendererConfig.devtool = "";
 
   rendererConfig.plugins.push(
     new BabiliWebpackPlugin(),
     new CopyWebpackPlugin([
       {
-        from: path.join(__dirname, '../static'),
-        to: path.join(__dirname, '../dist/electron/static'),
-        ignore: ['.*']
+        from: path.join(__dirname, "../static"),
+        to: path.join(__dirname, "../dist/electron/static"),
+        ignore: [".*"]
       }
     ]),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"production"'
+      "process.env.NODE_ENV": '"production"'
     }),
     new webpack.LoaderOptionsPlugin({
       minimize: true
     })
-  )
+  );
 }
 
-module.exports = rendererConfig
+module.exports = rendererConfig;

package.json

@@ -55,6 +55,7 @@
     "rss-parser": "^3.5.3",
     "vue": "^2.5.16",
     "vue-electron": "^1.0.6",
+    "vue-notification": "^1.3.13",
     "vue-router": "^3.0.1",
     "vuetify": "^1.3.8",
     "vuex": "^3.0.1",

src/main/index.js

@@ -3,6 +3,8 @@ import { fetchFeed } from "./feeds.js";
 import { resolve } from "url";
 import { __await } from "tslib";
 import "../renderer/store";
+var fs = require("fs");
+
 /**
  * Set `__static` path to static files in production
  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
@@ -42,7 +44,11 @@ function createWindow() {
     mainWindow = null;
   });
   mainWindow.webContents.on("did-finish-load", () => {
-    mainWindow.webContents.send("ping", "whoooooooh!");
+    var path = app.getPath("userData") + "/electron-rss-saved/";
+    if (!fs.existsSync(path)) {
+      fs.mkdirSync(path);
+    }
+    mainWindow.webContents.send("ping", path);
   });
   mainWindow.on("resize", () => {
     mainWindow.webContents.send("resize", mainWindow.getSize());

src/renderer/components/index.vue

@@ -30,7 +30,7 @@
               <v-divider v-if="index + 1 < acticles.length" :key="`divider-${index}`"></v-divider>
             </template>
           </v-list>
-          <webview id="foo" :src="webViewSrc" autosize="on" @did-finish-load="didfinishload"></webview>
+          <webview ref="webView" id="foo" :src="webViewSrc" autosize="on" @did-finish-load="didfinishload"></webview>
           <v-speed-dial id="floatBtn" v-model="fab" :top="true" :bottom="false" :right="true" :left="false" direction="left" :open-on-hover="true" transition="slide-x-reverse-transition">
             <v-btn slot="activator" v-model="fab" color="blue darken-2" dark fab>
               <v-icon>account_circle</v-icon>
@@ -39,22 +39,26 @@
             <v-btn fab dark small color="green">
               <v-icon>edit</v-icon>
             </v-btn>
-            <v-btn fab dark small color="indigo">
-              <v-icon>add</v-icon>
+
+            <v-btn fab dark small color="indigo" @click="saveHtml">
+              <v-icon>save</v-icon>
             </v-btn>
             <v-btn fab dark small color="red">
               <v-icon>delete</v-icon>
             </v-btn>
           </v-speed-dial>
-
+          <notifications group="foo" position="bottom right" />
         </v-layout>
       </v-container>
+
     </v-content>
     <v-progress-linear v-show="this.$store.getters.isLoading" id="loadbar" :indeterminate="true" height="5"></v-progress-linear>
+
   </v-app>
 </template>
 <script>
 import { mapActions } from "vuex";
+import Vue from "vue";
 export default {
   name: "landing-page",
   data() {
@@ -93,11 +97,41 @@ export default {
       acticles: [],
       listHeight: "760px",
       curFeed: "",
-      feedCount: {}
+      feedCount: {},
+      appPath: ""
     };
   },
   methods: {
     ...mapActions(["setLoadingState"]),
+    saveHtml() {
+      var path =
+        this.appPath +
+        this.$refs.webView
+          .getURL()
+          .replace(/^.*?:\/\//, "")
+          .replace(/\//g, "_") +
+        ".mhtml";
+      console.log(path);
+      var res = this.$refs.webView
+        .getWebContents()
+        .savePage(path, "MHTML", function(error) {
+          var text = "";
+          var type = "";
+          if (error) {
+            text = error;
+            type = "error";
+          } else {
+            text = "save complete";
+            type = "success";
+          }
+          Vue.notify({
+            group: "foo",
+            title: "savePage",
+            text: text,
+            type: type
+          });
+        });
+    },
     didfinishload() {
       // console.log("didfinishload");
       this.setLoadingState(false);
@@ -122,6 +156,7 @@ export default {
   },
   created() {
     this.$electron.ipcRenderer.on("ping", (e, data) => {
+      this.appPath = data;
       this.$electron.ipcRenderer.send("pong", "pong from render");
     });
     this.$electron.ipcRenderer.on("feed", (e, data) => {

src/renderer/main.js

@@ -5,6 +5,7 @@ import App from "./App";
 import router from "./router";
 import store from "./store";
 import "./plugins/vuetify.js";
+import "./plugins/notifications.js";
 
 if (!process.env.IS_WEB) Vue.use(require("vue-electron"));
 Vue.http = Vue.prototype.$http = axios;

src/renderer/plugins/notifications.js

@@ -0,0 +1,3 @@
+import Vue from "vue";
+import Notifications from "vue-notification";
+Vue.use(Notifications);