Skip to content

Commit 90eaffb

Browse files
kevinsawickikevinsawicki
committed
Merge pull request electron#129 from electron/bind-code-blocks-to-files
Add helper to fill in code blocks
2 parents ee9a205 + 712f524 commit 90eaffb

File tree

11 files changed

+40
-146
lines changed

11 files changed

+40
-146
lines changed

‎assets/code-blocks.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
var fs = require('fs')
2+
var path = require('path')
3+
4+
var codeBlocks = document.querySelectorAll('code[data-path]')
5+
Array.prototype.forEach.call(codeBlocks, function (code) {
6+
code.textContent = fs.readFileSync(path.join(__dirname, code.dataset.path))
7+
})

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ <h5 class="nav-category">
103103
<script src="assets/ex-links.js"></script>
104104
<script src="assets/nav.js"></script>
105105
<script src="assets/demo-btns.js"></script>
106+
<script src="assets/code-blocks.js"></script>
106107
<script>hljs.initHighlightingOnLoad();</script>
107108

108109
</body>

‎sections/communication/ipc.html

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ <h3>The <code>ipc</code> (inter-process communication) module allows you to send
2727

2828
<p>This example sends a "ping" from this process (renderer) to the main process. The main process then replies with "pong".</p>
2929
<h5>Renderer Process</h5>
30-
<pre><code id="async-msg-renderer"></pre></code>
30+
<pre><code data-path="renderer-process/communication/async-msg.js"></pre></code>
3131
<h5>Main Process</h5>
32-
<pre><code id="async-msg-main"></code></pre>
32+
<pre><code data-path="main-process/communication/async-msg.js"></code></pre>
3333
</div>
3434
</div>
3535
</div>
@@ -47,9 +47,9 @@ <h5>Main Process</h5>
4747
<p>You can use the <code>ipc</code> module to send synchronous messages between processes as well, but note that the synchronous nature of this method means that it <b>will block</b> other operations while completing its task.</p>
4848
<p>This example sends a synchronous message, "ping", from this process (renderer) to the main process. The main process then replies with "pong".</p>
4949
<h5>Renderer Process</h5>
50-
<pre><code id="sync-msg-renderer"></pre></code>
50+
<pre><code data-path="renderer-process/communication/sync-msg.js"></pre></code>
5151
<h5>Main Process</h5>
52-
<pre><code id="sync-msg-main"></code></pre>
52+
<pre><code data-path="main-process/communication/sync-msg.js"></code></pre>
5353
</div>
5454
</div>
5555
</div>
@@ -68,9 +68,9 @@ <h5>Main Process</h5>
6868
<p>In this example we use the <code>remote</code> module to create a new invisible browser window from this renderer process. When the new page is loaded we send a message with <code>ipc</code> that the new window is listening for.</p>
6969
<p>The new window then computes the factorial and sends the result to be recieved by this, the original, window and added to the page above.</p>
7070
<h5>Renderer Process</h5>
71-
<pre><code id="invis-msg-renderer"></pre></code>
71+
<pre><code data-path="renderer-process/communication/invisible-msg.js"></pre></code>
7272
<h5>Invisible Window Page HTML</h5>
73-
<pre><code id="invis-window-renderer"></code></pre>
73+
<pre><code data-path="sections/communication/invisible.html"></code></pre>
7474
</div>
7575
</div>
7676
</div>
@@ -79,23 +79,5 @@ <h5>Invisible Window Page HTML</h5>
7979
<script type="text/javascript" src="renderer-process/communication/async-msg.js"></script>
8080
<script type="text/javascript" src="renderer-process/communication/invisible-msg.js"></script>
8181

82-
<script type="text/javascript">
83-
var fs = require('fs');
84-
// Sync Message
85-
var syncMsgRendererContent = fs.readFileSync(__dirname + '/renderer-process/communication/sync-msg.js');
86-
document.getElementById('sync-msg-renderer').textContent = syncMsgRendererContent;
87-
var syncMsgMainContent = fs.readFileSync(__dirname + '/main-process/communication/sync-msg.js');
88-
document.getElementById('sync-msg-main').textContent = syncMsgMainContent;
89-
// Async Message
90-
var asyncMsgRendererContent = fs.readFileSync(__dirname + '/renderer-process/communication/async-msg.js');
91-
document.getElementById('async-msg-renderer').textContent = asyncMsgRendererContent;
92-
var asyncMsgMainContent = fs.readFileSync(__dirname + '/main-process/communication/async-msg.js');
93-
document.getElementById('async-msg-main').textContent = asyncMsgMainContent;
94-
// Invisible Window Message
95-
var invisMsgRendererContent = fs.readFileSync(__dirname + '/renderer-process/communication/invisible-msg.js');
96-
document.getElementById('invis-msg-renderer').textContent = invisMsgRendererContent;
97-
var invisWindowRendererContent = fs.readFileSync(__dirname + '/sections/communication/invisible.html');
98-
document.getElementById('invis-window-renderer').textContent = invisWindowRendererContent;
99-
</script>
10082
</section>
10183
</template>

‎sections/menus/menus.html

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h3>The <code>menu</code> and <code>menuitem</code> modules can be used create c
2424

2525
<p>This app uses the code below to set the application menu. If you click the 'View' option in the application menu and then the 'App Menu Demo', you'll see an information box displayed.</p>
2626
<h5>Main Process</h5>
27-
<pre><code id="application-menu-main"></code></pre>
27+
<pre><code data-path="main-process/menus/application-menu.js"></code></pre>
2828

2929
<div class="demo-protip">
3030
<h2>ProTip</h2>
@@ -54,21 +54,12 @@ <h2>ProTip</h2>
5454

5555
<p>In this demo we use the <code>remote</code> module to access <code>menu</code> and <code>menuitem</code> from the renderer process.</p>
5656
<h5>Renderer Process</h5>
57-
<pre><code id="context-menu-renderer"></pre></code>
57+
<pre><code data-path="renderer-process/menus/context-menu.js"></pre></code>
5858
</div>
5959
</div>
6060
</div>
6161

6262
<script type="text/javascript" src="renderer-process/menus/context-menu.js"></script>
6363

64-
<script type="text/javascript">
65-
var fs = require('fs');
66-
// Application Menu
67-
var appMenuMainContent = fs.readFileSync(__dirname + '/main-process/menus/application-menu.js');
68-
document.getElementById('application-menu-main').textContent = appMenuMainContent;
69-
// Context Menu
70-
var contextMenuRendererContent = fs.readFileSync(__dirname + '/renderer-process/menus/context-menu.js');
71-
document.getElementById('context-menu-renderer').textContent = contextMenuRendererContent;
72-
</script>
7364
</section>
7465
</template>

‎sections/native-ui/dialogs.html

Lines changed: 8 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ <h3>The <code>dialog</code> module in Electron allows you to use native system d
2626
</div>
2727
<p>In this demo, the <code>ipc</code> module is used to send a message from the renderer process instructing the main process to launch the open file (or directory) dialog. If a file is selected, the main process can send that information back to the renderer process.</p>
2828
<h5>Renderer Process</h5>
29-
<pre><code id="open-file-renderer"></pre></code>
29+
<pre><code data-path="renderer-process/native-ui/dialogs/open-file.js"></pre></code>
3030
<h5>Main Process</h5>
31-
<pre><code id="open-file-main"></code></pre>
31+
<pre><code data-path="main-process/native-ui/dialogs/open-file.js"></code></pre>
3232

3333
<div class="demo-protip">
3434
<h2>ProTip</h2>
@@ -60,9 +60,9 @@ <h2>ProTip</h2>
6060

6161
<p>You can use an error dialog before the app's <code>ready</code> event, which is useful for showing errors upon startup.</p>
6262
<h5>Renderer Process</h5>
63-
<pre><code id="error-dialog-renderer"></pre></code>
63+
<pre><code data-path="renderer-process/native-ui/dialogs/error.js"></pre></code>
6464
<h5>Main Process</h5>
65-
<pre><code id="error-dialog-main"></code></pre>
65+
<pre><code data-path="main-process/native-ui/dialogs/error.js"></code></pre>
6666
</div>
6767
</div>
6868
</div>
@@ -81,9 +81,9 @@ <h5>Main Process</h5>
8181

8282
<p>An information dialog can contain an icon, your choice of buttons, title and message.</p>
8383
<h5>Renderer Process</h5>
84-
<pre><code id="information-dialog-renderer"></pre></code>
84+
<pre><code data-path="renderer-process/native-ui/dialogs/information.js"></pre></code>
8585
<h5>Main Process</h5>
86-
<pre><code id="information-dialog-main"></code></pre>
86+
<pre><code data-path="main-process/native-ui/dialogs/information.js"></code></pre>
8787
</div>
8888
</div>
8989
</div>
@@ -100,9 +100,9 @@ <h5>Main Process</h5>
100100
</div>
101101
<p>In this demo, the <code>ipc</code> module is used to send a message from the renderer process instructing the main process to launch the save dialog. It returns the path selected by the user which can be relayed back to the renderer process.</p>
102102
<h5>Renderer Process</h5>
103-
<pre><code id="save-dialog-renderer"></pre></code>
103+
<pre><code data-path="renderer-process/native-ui/dialogs/save.js"></pre></code>
104104
<h5>Main Process</h5>
105-
<pre><code id="save-dialog-main"></code></pre>
105+
<pre><code data-path="main-process/native-ui/dialogs/save.js"></code></pre>
106106
</div>
107107
</div>
108108
</div>
@@ -112,28 +112,5 @@ <h5>Main Process</h5>
112112
<script type="text/javascript" src="renderer-process/native-ui/dialogs/information.js"></script>
113113
<script type="text/javascript" src="renderer-process/native-ui/dialogs/save.js"></script>
114114

115-
<script type="text/javascript">
116-
var fs = require('fs')
117-
// Open File Dialog
118-
var OpenFileMainContent = fs.readFileSync(__dirname + '/main-process/native-ui/dialogs/open-file.js')
119-
document.getElementById('open-file-main').textContent = OpenFileMainContent
120-
var OpenFileRendererContent = fs.readFileSync(__dirname + '/renderer-process/native-ui/dialogs/open-file.js')
121-
document.getElementById('open-file-renderer').textContent = OpenFileRendererContent
122-
// Error Dialog
123-
var ErrorMainContent = fs.readFileSync(__dirname + '/main-process/native-ui/dialogs/error.js')
124-
document.getElementById('error-dialog-main').textContent = ErrorMainContent
125-
var ErrorRendererContent = fs.readFileSync(__dirname + '/renderer-process/native-ui/dialogs/error.js')
126-
document.getElementById('error-dialog-renderer').textContent = ErrorRendererContent
127-
// Information Dialog
128-
var InfoMainContent = fs.readFileSync(__dirname + '/main-process/native-ui/dialogs/information.js')
129-
document.getElementById('information-dialog-main').textContent = InfoMainContent
130-
var InfoRendererContent = fs.readFileSync(__dirname + '/renderer-process/native-ui/dialogs/information.js')
131-
document.getElementById('information-dialog-renderer').textContent = InfoRendererContent
132-
// Save Dialog
133-
var SaveMainContent = fs.readFileSync(__dirname + '/main-process/native-ui/dialogs/save.js')
134-
document.getElementById('save-dialog-main').textContent = SaveMainContent
135-
var SaveRendererContent = fs.readFileSync(__dirname + '/renderer-process/native-ui/dialogs/save.js')
136-
document.getElementById('save-dialog-renderer').textContent = SaveRendererContent
137-
</script>
138115
</section>
139116
</template>

‎sections/native-ui/ex-links-file-manager.html

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ <h3>The <code>shell</code> module in Electron allows you to access certain nativ
2525
<p>This demonstrates using the <code>shell</code> module to open the system file manager at a particular location.</p>
2626
<p>Clicking the demo button will open your file manager at the root.</p>
2727
<h5>Renderer Process</h5>
28-
<pre><code id="file-manager-renderer"></pre></code>
28+
<pre><code data-path="renderer-process/native-ui/ex-links-file-manager/file-manager.js"></pre></code>
2929
</div>
3030
</div>
3131
</div>
@@ -42,14 +42,14 @@ <h5>Renderer Process</h5>
4242
<p>If you do not want your app to open website links <em>within</em> the app, you can use the <code>shell</code> module to open them externally. When clicked, the links will open outside of your app and in the user's default web browser.</p>
4343
<p>When the demo button is clicked, the electron website will open in your browser.<p>
4444
<h5>Renderer Process</h5>
45-
<pre><code id="ex-links-renderer"></pre></code>
45+
<pre><code data-path="renderer-process/native-ui/ex-links-file-manager/ex-links.js"></pre></code>
4646

4747
<div class="demo-protip">
4848
<h2>ProTip</h2>
4949
<strong>Open all outbound links externally.</strong>
5050
<p>You may want to open all <code>http</code> and <code>https</code> links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in <code>assets/ex-links.js</code>.</h5>
5151
<h5>Renderer Process</h5>
52-
<pre><code id="all-ex-links-renderer"></pre></code>
52+
<pre><code data-path="assets/ex-links.js"></pre></code>
5353
</div>
5454
</div>
5555
</div>
@@ -58,17 +58,5 @@ <h5>Renderer Process</h5>
5858
<script type="text/javascript" src="renderer-process/native-ui/ex-links-file-manager/file-manager.js"></script>
5959
<script type="text/javascript" src="renderer-process/native-ui/ex-links-file-manager/ex-links.js"></script>
6060

61-
<script type="text/javascript">
62-
var fs = require('fs');
63-
// Open File Manager
64-
var openFileManagerRendererContent = fs.readFileSync(__dirname + '/renderer-process/native-ui/ex-links-file-manager/file-manager.js');
65-
document.getElementById('file-manager-renderer').textContent = openFileManagerRendererContent;
66-
// Open External Links
67-
var exLinksRendererContent = fs.readFileSync(__dirname + '/renderer-process/native-ui/ex-links-file-manager/ex-links.js');
68-
document.getElementById('ex-links-renderer').textContent = exLinksRendererContent;
69-
// Open All External Links
70-
var AllExLinksRendererContent = fs.readFileSync(__dirname + '/assets/ex-links.js');
71-
document.getElementById('all-ex-links-renderer').textContent = AllExLinksRendererContent;
72-
</script>
7361
</section>
7462
</template>

‎sections/native-ui/tray.html

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ <h3>The <code>tray</code> module allows you to create an icon in the operating s
2727

2828
<p>In this example the tray icon can be removed by clicking 'Remove' in the context menu or selecting the demo button again.</p>
2929
<h5>Main Process</h5>
30-
<pre><code id="tray-main"></pre></code>
30+
<pre><code data-path="main-process/native-ui/tray/tray.js"></pre></code>
3131
<h5>Renderer Process</h5>
32-
<pre><code id="tray-renderer"></pre></code>
32+
<pre><code data-path="renderer-process/native-ui/tray/tray.js"></pre></code>
3333

3434
<div class="demo-protip">
3535
<h2>ProTip</h2>
@@ -42,13 +42,5 @@ <h2>ProTip</h2>
4242

4343
<script type="text/javascript" src="renderer-process/native-ui/tray/tray.js"></script>
4444

45-
<script type="text/javascript">
46-
var fs = require('fs');
47-
// Put in Tray
48-
var trayRendererContent = fs.readFileSync(__dirname + '/renderer-process/native-ui/tray/tray.js');
49-
document.getElementById('tray-renderer').textContent = trayRendererContent;
50-
var trayMainContent = fs.readFileSync(__dirname + '/main-process/native-ui/tray/tray.js');
51-
document.getElementById('tray-main').textContent = trayMainContent;
52-
</script>
5345
</section>
5446
</template>

‎sections/printing/pdf.html

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,32 +25,21 @@ <h3>The <code>browser window</code> module in Electron has a property, <code>web
2525
<p>To demonstrate the print to PDF functionality, the demo button above will save this page as a PDF and, if you have a PDF viewer, open the file.</p>
2626
<p>In a real-world application you're more likely to add this to application menu, but for the purposes of the demo we've set it to the demo button.</p>
2727
<h5>Renderer Process</h5>
28-
<pre><code id="print-pdf-renderer"></pre></code>
28+
<pre><code data-path="renderer-process/printing/pdf.js"></pre></code>
2929
<h5>Main Process</h5>
30-
<pre><code id="print-pdf-main"></code></pre>
30+
<pre><code data-path="main-process/printing/pdf.js"></code></pre>
3131

3232
<div class="demo-protip">
3333
<h2>ProTip</h2>
3434
<strong>Use a print style sheet.</strong>
3535
<p>You can create a stylesheet targeting printing to optimize the look of what your users print. Below is the stylesheet used in this app, located in <code>assets/css/print.css</code>.</p>
36-
<pre><code id="print-style-sheet"></code></pre>
36+
<pre><code data-path="assets/css/print.css"></code></pre>
3737
</div>
3838
</div>
3939
</div>
4040
</div>
4141

4242
<script type="text/javascript" src="renderer-process/printing/pdf.js"></script>
4343

44-
<script type="text/javascript">
45-
var fs = require('fs');
46-
// Open File Dialog
47-
var printPDFRendererContent = fs.readFileSync(__dirname + '/renderer-process/printing/pdf.js');
48-
document.getElementById('print-pdf-renderer').textContent = printPDFRendererContent;
49-
var printPDFMainContent = fs.readFileSync(__dirname + '/main-process/printing/pdf.js');
50-
document.getElementById('print-pdf-main').textContent = printPDFMainContent;
51-
// Print Style Sheet
52-
var printStyleSheet = fs.readFileSync(__dirname + '/assets/css/print.css');
53-
document.getElementById('print-style-sheet').textContent = printStyleSheet;
54-
</script>
5544
</section>
5645
</tempalte>

‎sections/system/app-sys-information.html

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ <h3>With a few Node.js and Electron modules you can gather information about the
2525
<p>The example below gets the version of Electron in use by the app.</p>
2626
<p>See the <a class="u-exlink" href="http://electron.atom.io/docs/latest/api/process">process documentation</a> for more.</p>
2727
<h5>Renderer Process</h5>
28-
<pre><code id="app-info-renderer"></pre></code>
28+
<pre><code data-path="renderer-process/system/app-information.js"></pre></code>
2929

3030
<div class="demo-protip">
3131
<h2>ProTip</h2>
@@ -57,7 +57,7 @@ <h2>ProTip</h2>
5757

5858
<p>See the full <a class="u-exlink" href="https://nodejs.org/api/os.html"> os documentation</a> for more.</p>
5959
<h5>Renderer Process</h5>
60-
<pre><code id="sys-info-renderer"></pre></code>
60+
<pre><code data-path="renderer-process/system/sys-information.js"></pre></code>
6161
</div>
6262
</div>
6363
</div>
@@ -76,7 +76,7 @@ <h5>Renderer Process</h5>
7676

7777
<p>See the full <a class="u-exlink" href="http://electron.atom.io/docs/latest/api/screen">screen documentation</a> for more.</p>
7878
<h5>Renderer Process</h5>
79-
<pre><code id="screen-info-renderer"></pre></code>
79+
<pre><code data-path="renderer-process/system/screen-information.js"></pre></code>
8080
</div>
8181
</div>
8282
</div>
@@ -85,17 +85,5 @@ <h5>Renderer Process</h5>
8585
<script type="text/javascript" src="renderer-process/system/sys-information.js"></script>
8686
<script type="text/javascript" src="renderer-process/system/screen-information.js"></script>
8787

88-
<script type="text/javascript">
89-
var fs = require('fs')
90-
// App Information
91-
var appInfoRendererContent = fs.readFileSync(__dirname + '/renderer-process/system/app-information.js')
92-
document.getElementById('app-info-renderer').textContent = appInfoRendererContent
93-
// Sys Information
94-
var sysInfoRendererContent = fs.readFileSync(__dirname + '/renderer-process/system/sys-information.js')
95-
document.getElementById('sys-info-renderer').textContent = sysInfoRendererContent
96-
// Screen Information
97-
var screenInfoRendererContent = fs.readFileSync(__dirname + '/renderer-process/system/screen-information.js')
98-
document.getElementById('screen-info-renderer').textContent = screenInfoRendererContent
99-
</script>
10088
</section>
10189
</template>

0 commit comments

Comments
 (0)