Merge pull request #26 from yang991178/0.4.1

Version 0.4.1

.github/FUNDING.yml

@@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
-custom: ["https://www.paypal.me/yang991178", "https://hyliu.me/fluent-reader/imgs/alipay.jpg", "https://hyliu.me/fluent-reader/imgs/wechat-pay.jpg"]
+custom: ["https://www.paypal.me/yang991178", "https://hyliu.me/fluent-reader/imgs/alipay.jpg"]

.gitignore

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

README.md

@@ -10,7 +10,7 @@
 For Windows 10 users, the recommended way of installation is through [Microsoft Store](https://www.microsoft.com/store/apps/9P71FC94LRH8?cid=github). 
 This enables auto-update and experimental ARM64 support.
 
-If you are using macOS or an older version of Windows, you can also [get Fluent Reader from GitHub releases](https://github.com/yang991178/fluent-reader/releases).
+If you are using macOS, Linux, or an older version of Windows, you can also [get Fluent Reader from GitHub releases](https://github.com/yang991178/fluent-reader/releases).
 
 ## Features
 

dist/icons/logo.svg

@@ -1,5 +1,45 @@
 <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>
+    <style>
+      .cls-1 {
+        clip-path: url(#clip-Web_1280_6);
+      }
+
+      .cls-2 {
+        fill: url(#radial-gradient);
+      }
+
+      .cls-3 {
+        fill: url(#radial-gradient-2);
+      }
+
+      .cls-4 {
+        fill: url(#radial-gradient-3);
+      }
+
+      .cls-5 {
+        fill: #faf9f8;
+        font-size: 144px;
+        font-family: Arial-BoldMT, Arial;
+        font-weight: 700;
+      }
+
+      .cls-6 {
+        filter: url(#F);
+      }
+
+      .cls-7 {
+        filter: url(#矩形_7);
+      }
+
+      .cls-8 {
+        filter: url(#矩形_8);
+      }
+
+      .cls-9 {
+        filter: url(#矩形_9);
+      }
+    </style>
     <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"/>
@@ -33,29 +73,29 @@
       <feComposite operator="in" in2="blur-3"/>
       <feComposite in="SourceGraphic"/>
     </filter>
-    <filter id="F" x="76" y="172" width="118" height="193" filterUnits="userSpaceOnUse">
+    <filter id="F" x="76" y="177" width="118" height="191" 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">
+    <clipPath id="clip-Web_1280_6">
       <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 id="Web_1280_6" data-name="Web 1280 – 6" class="cls-1">
-    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#矩形_9)">
+    <g class="cls-9" transform="matrix(1, 0, 0, 1, 0, 0)">
-      <rect id="矩形_9-2" data-name="矩形 9" width="280" height="280" rx="5" transform="translate(70 50)" fill="url(#radial-gradient)"/>
+      <rect id="矩形_9-2" data-name="矩形 9" class="cls-2" width="280" height="280" rx="5" transform="translate(70 50)"/>
     </g>
-    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#矩形_8)">
+    <g class="cls-8" transform="matrix(1, 0, 0, 1, 0, 0)">
-      <rect id="矩形_8-2" data-name="矩形 8" width="225" height="225" rx="5" transform="translate(60 115)" fill="url(#radial-gradient-2)"/>
+      <rect id="矩形_8-2" data-name="矩形 8" class="cls-3" width="225" height="225" rx="5" transform="translate(60 115)"/>
     </g>
-    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#矩形_7)">
+    <g class="cls-7" transform="matrix(1, 0, 0, 1, 0, 0)">
-      <rect id="矩形_7-2" data-name="矩形 7" width="170" height="170" rx="5" transform="translate(50 180)" fill="url(#radial-gradient-3)"/>
+      <rect id="矩形_7-2" data-name="矩形 7" class="cls-4" width="170" height="170" rx="5" transform="translate(50 180)"/>
     </g>
-    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#F)">
+    <g class="cls-6" transform="matrix(1, 0, 0, 1, 0, 0)">
-      <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>
+      <text id="F-2" data-name="F" class="cls-5" transform="translate(91 319)"><tspan x="0" y="0">F</tspan></text>
     </g>
   </g>
 </svg>

dist/styles.css

@@ -15,6 +15,7 @@
     --black: #000;
     --white: #fff;
     --whiteConstant: #fff;
+    --navHeight: 32px;
 }
 @media (prefers-color-scheme: dark) {
     :root {
@@ -36,7 +37,9 @@
         --whiteConstant: #f8f8f8;
     }
 }
-
+body.darwin {
+    --navHeight: 38px;
+}
 
 html, body {
     background-color: transparent;
@@ -104,7 +107,7 @@ i.ms-Nav-chevron {
 }
 
 #root > nav {
-    height: 32px;
+    height: var(--navHeight);
     -webkit-app-region: drag;
     user-select: none;
     overflow: hidden;
@@ -130,17 +133,20 @@ nav .progress {
 }
 #root > nav span.title {
     font-size: 12px;
-    line-height: 32px;
+    line-height: var(--navHeight);
     vertical-align: top;
     letter-spacing: 2px;
     margin: 0 4px;
     display: inline-block;
-    max-width: 300px;
+    max-width: 280px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     color: var(--black);
 }
+body.darwin #root > nav span.title {
+    max-width: 220px;
+}
 .btn-group {
     display: inline-block;
     user-select: none;
@@ -148,14 +154,14 @@ nav .progress {
 }
 .btn-group .seperator {
     display: inline-block;
-    width: 32px;
+    width: var(--navHeight);
     font-size: 12px;
     color: #c8c6c4;
     text-align: center;
     vertical-align: middle;
 }
 body.darwin .btn-group .seperator {
-    line-height: 32px;
+    display: none;
 }
 .btn-group .seperator::before {
     content: "|";
@@ -171,6 +177,13 @@ body.darwin .btn-group .seperator {
     font-size: 14px;
     vertical-align: top;
 }
+#root > nav .btn-group .btn, .menu .btn-group .btn {
+    height: var(--navHeight);
+    line-height: var(--navHeight);
+}
+body.darwin #root > nav .btn-group .btn:first-of-type {
+    margin-left: 72px;
+}
 #root > nav .btn-group .btn.system {
     position: relative;
     z-index: 10;
@@ -215,6 +228,9 @@ nav.menu-on .btn-group .btn.system, nav.item-on .btn-group .btn.system {
 .btn-group .btn.inline-block-wide { 
     display: none;
 }
+body.darwin .btn-group .btn.system {
+    display: none;
+}
 
 .menu-container, .article-container {
     position: fixed;
@@ -237,8 +253,12 @@ nav.menu-on .btn-group .btn.system, nav.item-on .btn-group .btn.system {
     height: 100%;
     background-color: var(--neutralLighterAlt);
 }
+body.darwin .menu .btn-group {
+    display: flex;
+    flex-direction: row-reverse;
+}
 .menu-container .menu .nav-wrapper {
-    max-height: calc(100% - 32px);
+    max-height: calc(100% - var(--navHeight));
     overflow: hidden auto;
 }
 .menu-container .menu p.subs-header {
@@ -356,7 +376,7 @@ img.favicon.dropdown {
 }
 
 .main {
-    margin-top: -32px;
+    margin-top: calc(-1 * var(--navHeight));
     height: 100%;
     overflow: hidden;
     background-color: var(--neutralLighterAlt);
@@ -365,11 +385,11 @@ img.favicon.dropdown {
     content: "";
     display: block;
     position: sticky;
-    top: 32px;
+    top: var(--navHeight);
     left: 0;
     width: calc(100% - 16px);
-    height: 32px;
+    height: var(--navHeight);
-    margin-bottom: -32px;
+    margin-bottom: calc(-1 * var(--navHeight));
     background: linear-gradient(var(--neutralLighterAlt), #faf9f800);
     z-index: 1;
 }
@@ -383,18 +403,31 @@ img.favicon.dropdown {
     margin: 4px 16px;
     border: none;
     -webkit-app-region: none;
-    height: 28px;
+    height: calc(var(--navHeight) - 4px);
     box-shadow: 0 1.6px 3.6px 0 rgba(0,0,0,.132), 0 0.3px 0.9px 0 rgba(0,0,0,.108);
 }
+body.darwin .article-search {
+    left: 108px;
+    max-width: calc(100% - 384px);
+}
 .list-main .article-search {
     max-width: 294px;
     margin: 4px 10px;
 }
+body.darwin .list-main .article-search {
+    max-width: 314px;
+    left: 0;
+    top: var(--navHeight);
+    margin: 0 10px;
+}
 
 @media (min-width: 1441px) {
     #root > nav.menu-on {
         padding-left: 296px;
     }
+    #root > nav.menu-on span.title, body.darwin #root > nav.menu-on span.title {
+        max-width: 300px;
+    }
     nav.menu-on .btn-group .btn {
         display: inline-block;
     }
@@ -436,10 +469,18 @@ img.favicon.dropdown {
         left: 280px;
         max-width: calc(100% - 728px);
     }
+    body.darwin .menu-on .article-search {
+        left: 280px;
+        max-width: calc(100% - 556px);
+    }
     .list-main.menu-on .article-search {
         left: 0;
         width: 330px;
     }
+    body.darwin .list-main.menu-on .article-search {
+        left: 0;
+        top: 4px;
+    }
 
     nav.hide-btns .btn-group .btn, nav.menu-on .btn-group .btn.hide-wide, .menu .btn-group .btn.hide-wide {
         display: none;
@@ -500,8 +541,8 @@ img.favicon.dropdown {
 }
 .side-article-wrapper, .side-logo-wrapper {
     flex-grow: 1;
-    padding-top: 32px;
+    padding-top: var(--navHeight);
-    height: calc(100% - 32px);
+    height: calc(100% - var(--navHeight));
     background: var(--white);
 }
 .side-logo-wrapper {
@@ -542,7 +583,7 @@ img.favicon.dropdown {
     width: 100%;
     border-bottom: 1px solid var(--neutralQuaternaryAlt);
     position: absolute;
-    top: 31px;
+    top: calc(var(--navHeight) - 1px);
 }
 
 .list-main {
@@ -550,7 +591,7 @@ img.favicon.dropdown {
     flex-wrap: wrap;
     height: 100%;
     position: relative;
-    margin-top: -32px;
+    margin-top: calc(-1 * var(--navHeight));
     overflow: hidden;
     background: var(--white);
 }
@@ -572,8 +613,8 @@ img.favicon.dropdown {
     box-shadow: inset 5px 0 25px #0004;
 }
 .list-feed {
-    margin-top: 32px;
+    margin-top: var(--navHeight);
-    height: calc(100% - 32px);
+    height: calc(100% - var(--navHeight));
     overflow: hidden scroll;
     position: relative;
 }
@@ -589,7 +630,7 @@ img.favicon.dropdown {
     padding: 12px;
     height: calc(100% - 56px);
     overflow: hidden scroll;
-    margin-top: 32px;
+    margin-top: var(--navHeight);
 }
 .cards-feed-container > div.load-more-wrapper, .flex-fix {
     text-align: center;

docs/imgs/logo.svg

@@ -1,5 +1,45 @@
 <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>
+    <style>
+      .cls-1 {
+        clip-path: url(#clip-Web_1280_6);
+      }
+
+      .cls-2 {
+        fill: url(#radial-gradient);
+      }
+
+      .cls-3 {
+        fill: url(#radial-gradient-2);
+      }
+
+      .cls-4 {
+        fill: url(#radial-gradient-3);
+      }
+
+      .cls-5 {
+        fill: #faf9f8;
+        font-size: 144px;
+        font-family: Arial-BoldMT, Arial;
+        font-weight: 700;
+      }
+
+      .cls-6 {
+        filter: url(#F);
+      }
+
+      .cls-7 {
+        filter: url(#矩形_7);
+      }
+
+      .cls-8 {
+        filter: url(#矩形_8);
+      }
+
+      .cls-9 {
+        filter: url(#矩形_9);
+      }
+    </style>
     <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"/>
@@ -33,29 +73,29 @@
       <feComposite operator="in" in2="blur-3"/>
       <feComposite in="SourceGraphic"/>
     </filter>
-    <filter id="F" x="76" y="172" width="118" height="193" filterUnits="userSpaceOnUse">
+    <filter id="F" x="76" y="177" width="118" height="191" 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">
+    <clipPath id="clip-Web_1280_6">
       <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 id="Web_1280_6" data-name="Web 1280 – 6" class="cls-1">
-    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#矩形_9)">
+    <g class="cls-9" transform="matrix(1, 0, 0, 1, 0, 0)">
-      <rect id="矩形_9-2" data-name="矩形 9" width="280" height="280" rx="5" transform="translate(70 50)" fill="url(#radial-gradient)"/>
+      <rect id="矩形_9-2" data-name="矩形 9" class="cls-2" width="280" height="280" rx="5" transform="translate(70 50)"/>
     </g>
-    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#矩形_8)">
+    <g class="cls-8" transform="matrix(1, 0, 0, 1, 0, 0)">
-      <rect id="矩形_8-2" data-name="矩形 8" width="225" height="225" rx="5" transform="translate(60 115)" fill="url(#radial-gradient-2)"/>
+      <rect id="矩形_8-2" data-name="矩形 8" class="cls-3" width="225" height="225" rx="5" transform="translate(60 115)"/>
     </g>
-    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#矩形_7)">
+    <g class="cls-7" transform="matrix(1, 0, 0, 1, 0, 0)">
-      <rect id="矩形_7-2" data-name="矩形 7" width="170" height="170" rx="5" transform="translate(50 180)" fill="url(#radial-gradient-3)"/>
+      <rect id="矩形_7-2" data-name="矩形 7" class="cls-4" width="170" height="170" rx="5" transform="translate(50 180)"/>
     </g>
-    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#F)">
+    <g class="cls-6" transform="matrix(1, 0, 0, 1, 0, 0)">
-      <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>
+      <text id="F-2" data-name="F" class="cls-5" transform="translate(91 319)"><tspan x="0" y="0">F</tspan></text>
     </g>
   </g>
 </svg>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluent-reader",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A simplistic, modern desktop RSS reader",
   "main": "./dist/electron.js",
   "scripts": {
@@ -37,7 +37,8 @@
       "languages": [
         "zh-CN",
         "en-US",
-        "fr-FR"
+        "fr-FR",
+        "es"
       ],
       "showNameOnTiles": true,
       "setBuildNumber": true

src/components/menu.tsx

@@ -119,7 +119,9 @@ export class Menu extends React.Component<MenuProps> {
                 <div className={"menu" + (this.props.itemOn ? " item-on" : "")} onClick={(e) => e.stopPropagation()}>
                     <div className="btn-group">
                         <a className="btn hide-wide" title={intl.get("menu.close")} onClick={this.props.toggleMenu}><Icon iconName="Back" /></a>
-                        <a className="btn inline-block-wide" title={intl.get("menu.close")} onClick={this.props.toggleMenu}><Icon iconName="GlobalNavButton" /></a>
+                        <a className="btn inline-block-wide" title={intl.get("menu.close")} onClick={this.props.toggleMenu}>
+                            <Icon iconName={process.platform === "darwin" ? "SidePanel" : "GlobalNavButton"} />
+                        </a>
                     </div>
                     <div className="nav-wrapper">
                         <Nav 

src/components/nav.tsx

@@ -120,7 +120,7 @@ class Nav extends React.Component<NavProps, NavState> {
                     <a className="btn hide-wide" 
                         title={intl.get("nav.menu")} 
                         onClick={this.props.menu}>
-                        <Icon iconName="GlobalNavButton" />
+                        <Icon iconName={process.platform === "darwin" ? "SidePanel" : "GlobalNavButton"} />
                     </a>
                 </div>
                 <span className="title">{this.props.state.title}</span>

src/components/settings/app.tsx

@@ -80,6 +80,7 @@ class AppTab extends React.Component<AppTabProps, AppTabState> {
     languageOptions = (): IDropdownOption[] => [
         { key: "default", text: intl.get("followSystem") },
         { key: "en-US", text: "English" },
+        { key: "es", text: "Español"},
         { key: "fr-FR", text: "Français"},
         { key: "zh-CN", text: "中文（简体）"},
     ]

src/electron.ts

@@ -37,7 +37,8 @@ function createWindow() {
         height: mainWindowState.height,
         minWidth: 992,
         minHeight: 600,
-        frame: false,
+        frame: process.platform === "darwin",
+        titleBarStyle: "hiddenInset",
         fullscreenable: false,
         show: false,
         webPreferences: {

src/scripts/i18n/README.md

@@ -0,0 +1,12 @@
+## Internationalization
+
+Currently, Fluent Reader supports the following languages.
+
+| Locale | Language | Credit |
+| --- | --- | --- |
+| en-US | English | [@yang991178](https://github.com/yang991178) |
+| es | Español | [@kant](https://github.com/kant) |
+| fr-FR | Français | [@Toinane](https://github.com/Toinane) |
+| zh-CN | 中文（简体） | [@yang991178](https://github.com/yang991178) |
+
+Refer to the repo of [react-intl-universal](https://github.com/alibaba/react-intl-universal) to get started on internationalization. 

src/scripts/i18n/_locales.ts

@@ -1,11 +1,13 @@
 import en_US from "./en-US.json"
 import zh_CN from "./zh-CN.json"
 import fr_FR from "./fr-FR.json"
+import es from "./es.json"
 
 const locales = {
     "en-US": en_US,
     "zh-CN": zh_CN,
     "fr-FR": fr_FR,
+    "es": es,
 }
 
 export default locales

src/scripts/utils.ts

@@ -35,7 +35,7 @@ export async function parseRSS(url: string) {
             throw new Error(result.statusText)
         }
     } catch {
-        throw new Error("A network error has occured.")
+        throw new Error("A network error has occurred.")
     }
 }