Begin all the things\!

jlord · Aug 17, 2016 · ad702e2 · ad702e2
commit ad702e2
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/footer.html b/footer.html
@@ -0,0 +1,3 @@
+    </div>
+  </body>
+</html>
diff --git a/header.html b/header.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <title>Essential Electron</title>
+    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div class="wrapper">
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <title>Essential Electron</title>
+    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div class="wrapper">
+<h1 id="essential-electron">Essential Electron</h1>
+<p>Below you&#39;ll (hopefully) find questions about Electron answered, words defined and resources linked. And concisely!</p>
+<h2 id="what-is-electron-">What is Electron?</h2>
+<p>Electron is a <span class="def">library</span> you can use to build desktop applications with <span class="def">JavaScript, HTML and CSS</span>. These applications can be packaged to run on Mac, Windows and Linux computers.</p>
+<h3 id="next">Next</h3>
+<ul>
+<li><a href="#why-is-this-important">Why is this important?</a></li>
+</ul>
+<h4 id="definitions-">Definitions:</h4>
+<ul>
+<li><strong>JavaScript, HTML and CSS</strong> Are web languages, meaning they are the building blocks of websites and web browsers like Chrome and Safari know how to turn this code into the visual graphics you see.</li>
+<li><strong>Electron is a library</strong> Electron is code that you can re-use and not have to write yourself. You can use it to write your project on top of.</li>
+</ul>
+<h2 id="why-is-this-important-">Why is this important?</h2>
+<p>Typically, desktop applications for each operating system are written in that operating systems native language. That can mean having three teams writing your app three times to work on each kind of system. With Electron, you can write your app just once and using the common web languages (HTML, CSS and JavaScript) which makes app development more</p>
+<h3 id="next">Next</h3>
+<ul>
+<li><a href="#how">How</a></li>
+</ul>
+<h2 id="how">How</h2>
+<p>Electron itself is mostly C++. It&#39;s a combination of <a href="">Chromium</a> (the open source version of Google Chrome), <a href="">Node.js</a> (server-side JavaScript language) and a set of APIs (Application Program Interface) for native operating system functions like open file dialogs, notifications, icons and more.</p>
+<h3 id="more">More</h3>
+<ul>
+<li><a href="#how-are-chrome-and-node-combined">How are Chrome and Node combined?</a></li>
+</ul>
+<h2 id="how-are-chrome-and-node-combined">How are Chrome and Node combined</h2>
+<p><a href="">Chromium</a> and <a href="">Node.js</a> projects are both built on the same JavaScript rendering engine, <a href="">V8</a> (built first for Chromium). In Electron they share one version of V8, the one in Chrome. Sometimes Electron&#39;s Node needs to be patched to make this work, sometimes not.</p>
+<p><img src="" alt="img of 3 parts"></p>
+<h2 id="what-are-the-trade-offs-">What are the trade offs?</h2>
+<h2 id="what-are-the-perks-">What are the perks?</h2>
+<h2 id="what-is-developing-on-electron-like-">What is developing on Electron like?</h2>
+    </div>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,12 @@
+var fs = require('fs')
+var marked = require('marked')
+
+var markdown = fs.readFileSync('index.md').toString()
+var header = fs.readFileSync('header.html').toString()
+var footer = fs.readFileSync('footer.html').toString()
+
+var html = marked(markdown)
+
+fs.writeFileSync('index.html', header + html + footer)
+
+console.log('(•◡•)/\n')
diff --git a/index.md b/index.md
@@ -0,0 +1,41 @@
+# Essential Electron
+
+Below you'll (hopefully) find questions about Electron answered, words defined and resources linked. And concisely!
+
+## What is Electron?
+
+Electron is a <span class="def">library</span> you can use to build desktop applications with <span class="def">JavaScript, HTML and CSS</span>. These applications can be packaged to run on Mac, Windows and Linux computers.
+
+### Next
+- [Why is this important?](#why-is-this-important)
+
+#### Definitions:
+- **JavaScript, HTML and CSS** Are web languages, meaning they are the building blocks of websites and web browsers like Chrome and Safari know how to turn this code into the visual graphics you see.
+- **Electron is a library** Electron is code that you can re-use and not have to write yourself. You can use it to write your project on top of.
+
+## Why is this important?
+
+Typically, desktop applications for each operating system are written in that operating systems native language. That can mean having three teams writing your app three times to work on each kind of system. With Electron, you can write your app just once and using the common web languages (HTML, CSS and JavaScript) which makes app development more
+
+### Next
+
+- [How](#how)
+
+## How
+
+Electron itself is mostly C++. It's a combination of [Chromium]() (the open source version of Google Chrome), [Node.js]() (server-side JavaScript language) and a set of APIs (Application Program Interface) for native operating system functions like open file dialogs, notifications, icons and more.
+
+### More
+- [How are Chrome and Node combined?](#how-are-chrome-and-node-combined)
+
+## How are Chrome and Node combined
+
+[Chromium]() and [Node.js]() projects are both built on the same JavaScript rendering engine, [V8]() (built first for Chromium). In Electron they share one version of V8, the one in Chrome. Sometimes Electron's Node needs to be patched to make this work, sometimes not.
+
+![img of 3 parts]()
+
+## What are the trade offs?
+
+## What are the perks?
+
+## What is developing on Electron like?
diff --git a/package.json b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "essential-electron",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "marked": "^0.3.6"
+  }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,63 @@
+body {
+  font-family: Source Sans Pro;
+  color: #333;
+  font-size: 1.3em;
+  line-height: 1.5em;
+}
+
+h1 {
+  font-size: 4em;
+}
+
+h1 + p {
+  padding-bottom: 40px;
+}
+
+h2 {
+  font-size: 3em;
+  line-height: 1.5em;
+}
+
+h1 +p,
+h2 + p {
+  font-size: 2em;
+  line-height: 1.5em;
+}
+
+h2 {
+  border-top: 2px solid #333;
+  padding-top: 40px;
+}
+
+h3,
+h3 + p {
+  /*color: rgb(161, 247, 234);*/
+}
+
+h4,
+h4 + ul {
+}
+
+h2, h3, h4, h5, h6 {
+  padding-top: 20px;
+  margin-bottom: 0;
+}
+
+
+a {
+  color: #333;
+  text-decoration: none;
+  padding-bottom: 2px;
+  border-bottom: 2px solid #333;
+}
+
+.wrapper {
+  max-width: 900px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+.def,
+h4 + ul strong {
+  color: #569efe;
+}
-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+        </div>
+      </body>
+    </html>