Merge pull request #119 from skellock/homepage

✨ Makes home page link configurable.

Author: skellock

.prettierrc

@@ -1,5 +1,5 @@
 {
   "printWidth": 100,
   "semi": false,
-  "trailingComma": "es5"
+  "trailingComma": "all"
 }

docs/using.md

@@ -5,6 +5,9 @@ Want to try this out? Clone & run. There's a small sample project included.
 ```sh
 git clone --depth 1 git@github.com:skellock/typescript-with-electron-react-kit.git
 cd typescript-with-electron-react-kit
+rm -rf .git
+git init
+git add .
 npm i
 npm start
 ```
@@ -34,13 +37,10 @@ Open `package.json` and change these keys to be your own:
 * license
 * author
 * repository
+* homepage
 * build.mac.category
 * build.publish
 
-#### Change Web Site Menu Item
-
-Open `src/menu/shared-menu.ts` and change the visit menu item to point to your web site.
-
 ## Strip It Down to the Bones
 
 If you're looking for a really fresh start:

fuse.ts

@@ -1,5 +1,6 @@
-import { FuseBox, CSSPlugin, Sparky, CopyPlugin } from "fuse-box"
+import { FuseBox, CSSPlugin, Sparky, CopyPlugin, ReplacePlugin } from "fuse-box"
 import { spawn } from "child_process"
+import * as pjson from "./package.json"
 
 const DEV_PORT = 4445
 const OUTPUT_DIR = "out"
@@ -32,7 +33,16 @@ Sparky.task("default", ["copy-html"], () => {
   }
 
   // bundle the electron main code
-  const mainBundle = fuse.bundle("main").instructions("> [app/main.ts]")
+  const mainBundle = fuse
+    .bundle("main")
+    .target("server")
+    .instructions("> [app/main.ts]")
+    // inject in some configuration
+    .plugin(
+      ReplacePlugin({
+        "process.env.HOMEPAGE": pjson.homepage ? `"${pjson.homepage}"` : "null",
+      }),
+    )
 
   // and watch unless we're bundling for production
   if (!isProduction) {

package.json

@@ -10,7 +10,11 @@
     "email": "steve@kellock.ca",
     "name": "Steve Kellock"
   },
-  "repository": "skellock/typescript-with-electron-react-kit",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/skellock/typescript-with-electron-react-kit.git"
+  },
+  "homepage": "https://github.com/skellock/typescript-with-electron-react-kit",
   "build": {
     "appId": "com.example.typescript-with-electron-react-kit",
     "files": [

src/menu/linux-menu.ts

@@ -24,7 +24,7 @@ export function createLinuxMenu(
 
   const helpMenu: Electron.MenuItemConstructorOptions = {
     label: "Help",
-    submenu: [shared.visit],
+    submenu: [process.env.HOMEPAGE && shared.visit].filter(Boolean),
   }
 
   return [fileMenu, viewMenu, helpMenu]

src/menu/macos-menu.ts

@@ -34,7 +34,7 @@ export function createMacMenu(
 
   const helpMenu: Electron.MenuItemConstructorOptions = {
     label: "Help",
-    submenu: [shared.visit],
+    submenu: [process.env.HOMEPAGE && shared.visit].filter(Boolean),
   }
 
   return [appMenu, viewMenu, helpMenu]

src/menu/shared-menu.ts

@@ -4,7 +4,9 @@ export function createSharedMenuItems(window: Electron.BrowserWindow) {
   const visit: Electron.MenuItemConstructorOptions = {
     label: "On The Web",
     click() {
-      shell.openExternal("https://github.com/skellock/typescript-with-electron-react-kit")
+      if (process.env.HOMEPAGE) {
+        shell.openExternal(process.env.HOMEPAGE)
+      }
     },
   }
 

src/menu/windows-menu.ts

@@ -24,7 +24,7 @@ export function createWindowsMenu(
 
   const helpMenu: Electron.MenuItemConstructorOptions = {
     label: "Help",
-    submenu: [shared.visit],
+    submenu: [process.env.HOMEPAGE && shared.visit].filter(Boolean),
   }
 
   return [fileMenu, viewMenu, helpMenu]

typings/also-modules.d.ts

@@ -0,0 +1,18 @@
+// Tell the TS compiler that it's ok to load these
+// types of extensions. Fuse Box and Webpack will have
+// loaders that deal with these.
+//
+// You import like this:
+//
+//   import * as thing from "image.jpg"
+//
+// Note these commands tell TypeScript that it's ok. This doesn't
+// automatically mean that you *can* import them. Ensure you've
+// got the proper plugins loaded in the `fuse.ts` configuration.
+
+declare module "*.jpeg"
+declare module "*.jpg"
+declare module "*.gif"
+declare module "*.png"
+declare module "*.svg"
+declare module "*.json"