Merge pull request #2 from sarbbottam/editorconfig

hemanth · web-flow · commit ec904f8fe656 · 2016-11-10T17:00:49.000-08:00
chore(editor): added .editorconfig and fixed indentation at corresponding files
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,11 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+tab_width = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,20 +1,20 @@
 {
-	"name": "Codelabs",
-	"short_name": "Codelabs",
-	"icons": [
-		{
-			"src": "./android-chrome-192x192.png",
-			"sizes": "192x192",
-			"type": "image/png"
-		},
-		{
-			"src": "./android-chrome-512x512.png",
-			"sizes": "512x512",
-			"type": "image/png"
-		}
-	],
-	"orientation": "portrait",
-	"theme_color": "#1976d2",
-	"background_color": "#fff",
-	"display": "standalone"
+  "name": "Codelabs",
+  "short_name": "Codelabs",
+  "icons": [
+    {
+      "src": "./android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "orientation": "portrait",
+  "theme_color": "#1976d2",
+  "background_color": "#fff",
+  "display": "standalone"
 }
diff --git a/src/reset.css b/src/reset.css
@@ -15,33 +15,33 @@ article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
-	display: block;
+  display: block;
 }
 body {
-	line-height: 1;
+  line-height: 1;
 }
 ol, ul {
-	list-style: none;
+  list-style: none;
 }
 blockquote, q {
-	quotes: none;
+  quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
-	content: '';
-	content: none;
+  content: '';
+  content: none;
 }
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
diff --git a/src/step-3/AppShell.js b/src/step-3/AppShell.js
@@ -7,7 +7,7 @@ import filmStrip from './filmstrip.png';
 
 class AppShell extends Component {
   render() {
-    const appShellCode = 
+    const appShellCode =
     `<!-- Header  -->
 <header class="header">
   <div class="header__container">
@@ -34,8 +34,8 @@ class AppShell extends Component {
 
     return(
       <div className="introduction appshell">
-      	<h1>App Shell Architecture</h1>
-      	<p>An app shell architecture is minimal level <span className="highlight bold no--bg">HTML, CSS, Javascript</span> required to power the application user interface.</p>
+        <h1>App Shell Architecture</h1>
+        <p>An app shell architecture is minimal level <span className="highlight bold no--bg">HTML, CSS, Javascript</span> required to power the application user interface.</p>
 
         <h3>Components for App Shell</h3>
         <ul className="">
@@ -49,7 +49,7 @@ class AppShell extends Component {
         <Highlight lang='html' value={appShellCode} />
 
         <i><b>Screenshot:</b></i>
-        
+
         <div className="offline__container">
           <img src={appShellImg} alt="app shell" />
         </div>
@@ -63,7 +63,7 @@ class AppShell extends Component {
         <div className="offline__container">
           <img src={appShellRepeated} alt="devTools network panel" />
         </div>
-        
+
         <b>Test 2: Webpagetest</b>
         <p>In webpagetest, we measured the same site in <span className="highlight bold no--bg">Chrome - 3G</span>. Load time for repeat visits was <span className="highlight bold no--bg">3.015s</span> Results are below.</p>
 
@@ -79,8 +79,8 @@ class AppShell extends Component {
           <li><a href="flipkart.com" target="_blank">Flipkar Lite</a></li>
           <li><a href="housing.com" target="_blank">Housing.com</a> mobile site</li>
         </ul>
- 
-      	<Note type="facts">
+
+        <Note type="facts">
           <p><span>Facts: </span> Using app shell model, <a href="housing.com" target="_blank">Housing.com</a> were able to load the page 30% faster than before. Read thier full case study <a href="https://developers.google.com/web/showcase/2016/pdfs/housing.pdf" target="_blank">here</a>.</p>
         </Note>
       </div>
diff --git a/src/step-5/Offline.js b/src/step-5/Offline.js
@@ -6,10 +6,10 @@ import Note from '../Note';
 
 class Offline extends Component {
   render() {
-  	const offlineEvent = `/* app.js */
+    const offlineEvent = `/* app.js */
 
 //After DOM load
-document.addEventListener('DOMContentLoaded', function(event) { 
+document.addEventListener('DOMContentLoaded', function(event) {
   var headerElement = document.querySelector('.header');
   var menuElement = document.querySelector('.menu__header');
 
@@ -28,7 +28,7 @@ document.addEventListener('DOMContentLoaded', function(event) {
     headerElement.style.background = '';
     menuElement.style.background = '';
   });
-  
+
   //To change the header colors
   function goOffline() {
     var greyColor = '#9E9E9E';
@@ -55,11 +55,11 @@ document.addEventListener('DOMContentLoaded', function(event) {
 
         <p>More details about <a href="https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage">Cache API</a>.</p>
 
-        <h2>Offline/Online Events</h2>     
-				<p>By using <span className="highlight bold no--bg">offline/online events</span>, we can let the user know when he is offline or call an API when he has connectivity again.</p>        
-				
-				<Highlight lang='javascript' value={offlineEvent} />
-        
+        <h2>Offline/Online Events</h2>
+        <p>By using <span className="highlight bold no--bg">offline/online events</span>, we can let the user know when he is offline or call an API when he has connectivity again.</p>
+
+        <Highlight lang='javascript' value={offlineEvent} />
+
         <b>Screenshot when user is offline:</b>
 
         <div className="offline__container">
@@ -69,7 +69,7 @@ document.addEventListener('DOMContentLoaded', function(event) {
         <Note type="tips">
           <p><span>Tips:</span> Emulate offline in Devtools by opening <span className="highlight bold no--bg">Chrome Dev Tools > Network > Offline</span>.</p>
         </Note>
-        
+
       </div>
     );
   }
diff --git a/src/step-6/AppLike.js b/src/step-6/AppLike.js
@@ -5,7 +5,7 @@ import manifest from './manifest.png';
 
 class AppLike extends Component {
   render() {
-  	const manifestJson = `{
+    const manifestJson = `{
   "name": "Application Name",
   "short_name": "App Name",
   "icons": [{
@@ -18,37 +18,37 @@ class AppLike extends Component {
   "background_color": "#fff",
   "display": "standalone",
   "orientation": "portrait"
-}`; 
+}`;
 
-  	return(
+    return(
       <div className="introduction">
         <h1>AppLike</h1>
         <p>Using <span className="highlight bold no--bg">web manifest</span>, gives you extra control over the add to homescreen, splash screen experience. Add to homescreen gives us the ability to install the web application quickly without having to worry about the size of the application.</p>
-				
-				<p>Manifest.json should contain the following criteria.</p>
 
-				<ul>
-					<li>Site should be in <span className="highlight bold no--bg">HTTPS</span>.</li>
-					<li>Should have a <span className="highlight bold no--bg">registered service worker</span>.</li>
-					<li>Should contain a <span className="highlight bold no--bg">name</span>, <span className="highlight bold no--bg">short_name</span> to display in banner and homescreen.</li>
-					<li>Icon should be <span className="highlight bold no--bg">PNG</span> image and at least <span className="highlight bold no--bg">144px</span> in dimension.</li>
-					<li><span className="highlight bold no--bg">Add to homescreen</span> banner will show when user should visits your site at least twice with some time intervals in between.</li>
-				</ul>
+        <p>Manifest.json should contain the following criteria.</p>
 
-				<Note>
-					<p><span>Note: </span>Above listed criertia's will change over the time, for more info <a href="https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android#criteria-faq">Google Developers Site</a>.</p>
-				</Note>
+        <ul>
+          <li>Site should be in <span className="highlight bold no--bg">HTTPS</span>.</li>
+          <li>Should have a <span className="highlight bold no--bg">registered service worker</span>.</li>
+          <li>Should contain a <span className="highlight bold no--bg">name</span>, <span className="highlight bold no--bg">short_name</span> to display in banner and homescreen.</li>
+          <li>Icon should be <span className="highlight bold no--bg">PNG</span> image and at least <span className="highlight bold no--bg">144px</span> in dimension.</li>
+          <li><span className="highlight bold no--bg">Add to homescreen</span> banner will show when user should visits your site at least twice with some time intervals in between.</li>
+        </ul>
 
-				<b>Sample Manifest</b>
-				
-				<Highlight lang="json" value={manifestJson} />
+        <Note>
+          <p><span>Note: </span>Above listed criertia's will change over the time, for more info <a href="https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android#criteria-faq">Google Developers Site</a>.</p>
+        </Note>
 
-				<p>More about manifest in <a href="https://w3c.github.io/manifest/">W3C Specification</a>.</p>
+        <b>Sample Manifest</b>
+
+        <Highlight lang="json" value={manifestJson} />
+
+        <p>More about manifest in <a href="https://w3c.github.io/manifest/">W3C Specification</a>.</p>
 
         <h2>Cross Browser</h2>
         <p>Add to homescreen, splash screen are supported in <span className="highlight bold no--bg">Chrome</span>, <span className="highlight bold no--bg">Mozilla Firefox</span>, <span className="highlight bold no--bg">Opera</span> and <span className="highlight bold no--bg">Safari</span> as well.</p>
 
-				<div className="offline__container">
+        <div className="offline__container">
           <img className="" src={manifest} alt="Manifest File" />
         </div>
       </div>
diff --git a/src/step-7/Finish.js b/src/step-7/Finish.js
@@ -4,36 +4,36 @@ import Note from '../Note';
 
 class Finish extends Component {
   render() {
-		const surgeInstall = `$ npm install --global surge`;
-		const finalDir = `$ cd final`;
-		const surgeDeploy = `$ surge`;
-		const surgeDeployHTTPS = `$ surge --domain https://my-project.surge.sh`;
+    const surgeInstall = `$ npm install --global surge`;
+    const finalDir = `$ cd final`;
+    const surgeDeploy = `$ surge`;
+    const surgeDeployHTTPS = `$ surge --domain https://my-project.surge.sh`;
     return(
       <div>
         <h1>Deploy</h1>
         <p>The final step of this codelabs is deploying our github cards with HTTPS server.</p>
         <h3>Follow the below steps.</h3>
-				<p><span className="highlight bold no--bg">Step 1</span> - Install surge via npm.</p>
-				<Highlight lang="bash" value={surgeInstall} />
+        <p><span className="highlight bold no--bg">Step 1</span> - Install surge via npm.</p>
+        <Highlight lang="bash" value={surgeInstall} />
 
-				<p><span className="highlight bold no--bg">Step 2</span> - Go to <span className="highlight bold no--bg">final directory</span> in sample repository.</p>
-				<Highlight lang="bash" value={finalDir} />
-				
-				<p><span className="highlight bold no--bg">Step 3</span> - Type the below command to deploy.</p>
-				<Highlight lang="bash" value={surgeDeploy} />
+        <p><span className="highlight bold no--bg">Step 2</span> - Go to <span className="highlight bold no--bg">final directory</span> in sample repository.</p>
+        <Highlight lang="bash" value={finalDir} />
 
-				<p>After successful deployment, you will get an url in your terminal. Copy it and open in your desktop and mobile browsers :D</p>
+        <p><span className="highlight bold no--bg">Step 3</span> - Type the below command to deploy.</p>
+        <Highlight lang="bash" value={surgeDeploy} />
 
-				<h3>What next?</h3>
-				<p>Everything is perfect, except the deployed site is loading in HTTP unless we change the url to HTTPS. So lets fix it by forcing HTTP to redirect to HTTPS.</p>
-					
-				<Highlight lang="bash" value={surgeDeployHTTPS} />
+        <p>After successful deployment, you will get an url in your terminal. Copy it and open in your desktop and mobile browsers :D</p>
 
-				<Note type="tips">
-					<p><span>Tips: </span> <a href="https://chrome.google.com/webstore/detail/blipmdconlkpinefehnmjammfjpmpbjk" target="_blank">Lighthouse</a> analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices. Our application score was <span className="highlight bold no--bg">91/100</span>.</p>
-				</Note>
+        <h3>What next?</h3>
+        <p>Everything is perfect, except the deployed site is loading in HTTP unless we change the url to HTTPS. So lets fix it by forcing HTTP to redirect to HTTPS.</p>
 
-				<p>Thats it all done!!</p>
+        <Highlight lang="bash" value={surgeDeployHTTPS} />
+
+        <Note type="tips">
+          <p><span>Tips: </span> <a href="https://chrome.google.com/webstore/detail/blipmdconlkpinefehnmjammfjpmpbjk" target="_blank">Lighthouse</a> analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices. Our application score was <span className="highlight bold no--bg">91/100</span>.</p>
+        </Note>
+
+        <p>Thats it all done!!</p>
       </div>
     );
   }
diff --git a/src/syntax.css b/src/syntax.css
@@ -11,10 +11,10 @@
 
 .hljs::selection,
 .hljs span::selection {
-	background: #d4d4d4;	
+  background: #d4d4d4;
 }
 
-.hljs::-moz-selection, 
+.hljs::-moz-selection,
 .hljs span::-moz-selection {
-	background: #d4d4d4;	
-}
+  background: #d4d4d4;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1,7 +1,5 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
-
-
 abab@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
@@ -5537,3 +5535,4 @@ yargs@~3.10.0:
     cliui "^2.1.0"
     decamelize "^1.0.0"
     window-size "0.1.0"
+
