docs: add system get version info Fiddle example (#20536)

electron · Oct 15, 2019 · 16d4ace · 16d4ace
1 parent 5273930
commit 16d4ace
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 0 deletions.
diff --git a/docs/fiddles/system/system-information/get-version-information/index.html b/docs/fiddles/system/system-information/get-version-information/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <div>
+      <div>
+        <h1>Get version information</h1>
+        <i>Supports: Win, macOS, Linux <span>|</span> Process: Both</i>
+        <div>
+          <div>
+            <button id="version-info">View Demo</button>
+            <span id="got-version-info"></span>
+          </div>
+          <p>The <code>process</code> module is built into Node.js (therefore you can use this in both the main and renderer processes) and in Electron apps this object has a few more useful properties on it.</p>
+          <p>The example below gets the version of Electron in use by the app.</p>
+          <p>See the <a href="http://electron.atom.io/docs/api/process">process documentation <span>(opens in new window)</span></a> for more.</p>
+        </div>
+      </div>
+    </div>
+  </body>
+  <script>
+    require('./renderer.js')
+  </script>
+</html>
diff --git a/docs/fiddles/system/system-information/get-version-information/main.js b/docs/fiddles/system/system-information/get-version-information/main.js
@@ -0,0 +1,25 @@
+const { app, BrowserWindow } = require('electron')
+
+let mainWindow = null
+
+function createWindow () {
+  const windowOptions = {
+    width: 600,
+    height: 400,
+    title: 'Get version information',
+    webPreferences: {
+      nodeIntegration: true
+    }
+  }
+
+  mainWindow = new BrowserWindow(windowOptions)
+  mainWindow.loadFile('index.html')
+
+  mainWindow.on('closed', () => {
+    mainWindow = null
+  })
+}
+
+app.on('ready', () => {
+  createWindow()
+})
diff --git a/docs/fiddles/system/system-information/get-version-information/renderer.js b/docs/fiddles/system/system-information/get-version-information/renderer.js
@@ -0,0 +1,8 @@
+const versionInfoBtn = document.getElementById('version-info')
+
+const electronVersion = process.versions.electron
+
+versionInfoBtn.addEventListener('click', () => {
+  const message = `This app is using Electron version: ${electronVersion}`
+  document.getElementById('got-version-info').innerHTML = message
+})