add icons

.gitignore

@@ -2,4 +2,5 @@ node_modules
 dist/*.js
 dist/*.js.map
 dist/*.html
+bin/*
 package-lock.json

dist/logo.svg

@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400">
+  <defs>
+    <radialGradient id="radial-gradient" cx="-0.025" cy="1.021" r="1.434" gradientTransform="matrix(0.704, -0.71, 0.41, 0.407, -0.426, 0.588)" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#769ebe"/>
+      <stop offset="1" stop-color="#93c3e8"/>
+    </radialGradient>
+    <filter id="矩形_9" x="32.5" y="12.5" width="355" height="355" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="12.5" result="blur"/>
+      <feFlood flood-opacity="0.2"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <radialGradient id="radial-gradient-2" cx="-0.027" cy="1.043" r="1.428" gradientTransform="matrix(0.702, -0.712, 0.393, 0.387, -0.417, 0.62)" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#3a74a2"/>
+      <stop offset="1" stop-color="#64a5d6"/>
+    </radialGradient>
+    <filter id="矩形_8" x="22.5" y="77.5" width="300" height="300" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="12.5" result="blur-2"/>
+      <feFlood flood-opacity="0.2"/>
+      <feComposite operator="in" in2="blur-2"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <radialGradient id="radial-gradient-3" cx="-0.146" cy="1.148" r="1.171" gradientTransform="matrix(0.683, -0.73, 0.699, 0.654, -0.849, 0.291)" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#004e8c"/>
+      <stop offset="1" stop-color="#0078d4"/>
+    </radialGradient>
+    <filter id="矩形_7" x="12.5" y="142.5" width="245" height="245" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="12.5" result="blur-3"/>
+      <feFlood flood-opacity="0.2"/>
+      <feComposite operator="in" in2="blur-3"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="F" x="76" y="172" width="118" height="193" filterUnits="userSpaceOnUse">
+      <feOffset dy="3" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="5" result="blur-4"/>
+      <feFlood flood-opacity="0.161"/>
+      <feComposite operator="in" in2="blur-4"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <clipPath id="clip-Web_1280_3">
+      <rect width="400" height="400"/>
+    </clipPath>
+  </defs>
+  <g id="Web_1280_3" data-name="Web 1280 – 3" clip-path="url(#clip-Web_1280_3)">
+    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#矩形_9)">
+      <rect id="矩形_9-2" data-name="矩形 9" width="280" height="280" rx="5" transform="translate(70 50)" fill="url(#radial-gradient)"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#矩形_8)">
+      <rect id="矩形_8-2" data-name="矩形 8" width="225" height="225" rx="5" transform="translate(60 115)" fill="url(#radial-gradient-2)"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#矩形_7)">
+      <rect id="矩形_7-2" data-name="矩形 7" width="170" height="170" rx="5" transform="translate(50 180)" fill="url(#radial-gradient-3)"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#F)">
+      <text id="F-2" data-name="F" transform="translate(91 317)" fill="#faf9f8" font-size="144" font-family="MicrosoftSansSerif, Microsoft Sans Serif"><tspan x="0" y="0">F</tspan></text>
+    </g>
+  </g>
+</svg>

dist/styles.css

@@ -188,6 +188,7 @@ nav.menu-on .btn-group .btn.system, nav.item-on .btn-group .btn.system {
     font-size: 12px;
     color: #797775;
     margin: 2px 8px;
+    user-select: none;
 }
 
 .settings-container {
@@ -256,6 +257,13 @@ img.favicon {
     font-size: 12px;
     color: #605e5c;
 }
+.settings-about {
+    margin: 72px 0;
+}
+.settings-about > * {
+    margin: 0 !important;
+    -webkit-user-drag: none;
+}
 
 .main {
     height: calc(100% - 32px);
@@ -422,6 +430,10 @@ img.favicon {
     overflow: hidden scroll;
     position: relative;
 }
+.list-feed > div.load-more-wrapper {
+    text-align: center;
+    padding: 16px 0;
+}
 
 .cards-feed-container {
     display: inline-flex;
@@ -596,6 +608,7 @@ img.favicon {
 }
 .list-card .info {
     margin: 8px 10px;
+    height: 16px;
 }
 .list-card h3.title {
     font-size: 14px;

package.json

@@ -1,16 +1,38 @@
 {
-  "name": "rss-reader",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "name": "fluent-reader",
+  "version": "0.1.0",
+  "description": "A simplistic, modern desktop RSS reader",
+  "main": "./dist/electron.js",
   "scripts": {
     "build": "webpack --config ./webpack.config.js",
     "electron": "electron ./dist/electron.js",
-    "start": "npm run build && npm run electron"
+    "start": "npm run build && npm run electron",
+    "package-win": "electron-builder --win --x64"
   },
   "keywords": [],
-  "author": "",
-  "license": "ISC",
+  "author": "Haoyuan Liu",
+  "license": "BSD",
+  "build": {
+    "appId": "me.hyliu.fluentreader",
+    "productName": "Fluent Reader",
+    "copyright": "Copyright © 2020 Haoyuan Liu",
+    "files": "./dist/**/*",
+    "directories": {
+      "output": "./bin/"
+    },
+    "win": {
+      "target": ["nsis", "appx"]
+    },
+    "appx": {
+      "applicationId": "FluentReader",
+      "identityName": "25286HaoyuanLiu.FluentReader",
+      "publisher": "CN=FD70E7FA-E5AC-41C4-B9C4-6E8708A6616A",
+      "backgroundColor": "transparent",
+      "languages": ["zh-CN", "en-US"],
+      "showNameOnTiles": true,
+      "setBuildNumber": true
+    }
+  },
   "devDependencies": {
     "@fluentui/react": "^7.115.3",
     "@types/nedb": "^1.8.9",
@@ -23,6 +45,7 @@
     "@yang991178/electron-proxy-agent": "^1.2.1",
     "@yang991178/rss-parser": "^3.8.1",
     "electron": "^8.3.0",
+    "electron-builder": "^22.7.0",
     "electron-react-devtools": "^0.5.3",
     "electron-window-state": "^5.0.3",
     "favicon": "0.0.2",

src/components/feeds/list-feed.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { FeedProps } from "./feed"
-import { PrimaryButton } from 'office-ui-fabric-react';
+import { DefaultButton } from 'office-ui-fabric-react';
 import ListCard from "../cards/list-card";
 
 class ListFeed extends React.Component<FeedProps> {
@@ -21,7 +21,7 @@ class ListFeed extends React.Component<FeedProps> {
                 }
                 {
                     (this.props.feed.loaded && !this.props.feed.allLoaded)
-                    ? <div className="load-more-wrapper"><PrimaryButton 
+                    ? <div className="load-more-wrapper"><DefaultButton 
                         text="加载更多" 
                         disabled={this.props.feed.loading}
                         onClick={() => this.props.loadMore(this.props.feed)} /></div>

src/components/settings/about.tsx

@@ -1,9 +1,20 @@
 import * as React from "react"
+import { Stack, Link } from "@fluentui/react"
+import { openExternal } from "../../scripts/utils"
 
 class AboutTab extends React.Component {
     render = () => (
         <div className="tab-body">
-            <p>RSS Reader v0.1.0</p>
+            <Stack className="settings-about" horizontalAlign="center">
+                <img src="logo.svg" style={{width: 120, height: 120}} />
+                <h3>Fluent Reader</h3>
+                <small>版本 0.1.0</small>
+                <p className="settings-hint">Copyright © 2020 Haoyuan Liu. All rights reserved.</p>
+                <Stack horizontal horizontalAlign="center" tokens={{childrenGap: 8}}>
+                    <small><Link onClick={() => openExternal("https://github.com/yang991178/fluent-reader")}>开源项目</Link></small>
+                    <small><Link onClick={() => openExternal("https://github.com/yang991178/fluent-reader/issues")}>反馈</Link></small>
+                </Stack>
+            </Stack>
         </div>
     )
 }

src/electron.ts

@@ -10,6 +10,7 @@ function createWindow() {
     })
     // Create the browser window.
     mainWindow = new BrowserWindow({
+        title: "Fluent Reader",
         backgroundColor: "#faf9f8",
         x: mainWindowState.x,
         y: mainWindowState.y,
@@ -26,7 +27,7 @@ function createWindow() {
     })
     mainWindowState.manage(mainWindow)
     // and load the index.html of the app.
-    mainWindow.loadFile('index.html')
+    mainWindow.loadFile((app.isPackaged ? "dist/" : "") + 'index.html')
     mainWindow.webContents.openDevTools()
 }
 

src/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *; style-src 'self' 'unsafe-inline'; font-src 'self' https://static2.sharepointonline.com; connect-src *">
-    <title>Hello World!</title>
+    <title>Fluent Reader</title>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>

webpack.config.js

@@ -18,7 +18,7 @@ module.exports = [
     }
   },
   {
-    mode: 'development',
+    mode: 'production',
     entry: './src/index.tsx',
     target: 'electron-renderer',
     devtool: 'source-map',