fix: light gh-pages work

6eDesign · Dec 12, 2018 · 5bb9739 · 5bb9739
1 parent da8675b
commit 5bb9739
Show file tree

Hide file tree

Showing 15 changed files with 409 additions and 561 deletions.
diff --git a/public/bundle.css → docs/bundle.css b/public/bundle.css → docs/bundle.css
diff --git a/public/bundle.css.map → docs/bundle.css.map b/public/bundle.css.map → docs/bundle.css.map
diff --git a/public/bundle.js → docs/bundle.js b/public/bundle.js → docs/bundle.js
diff --git a/docs/bundle.js.map b/docs/bundle.js.map
diff --git a/public/global.css → docs/global.css b/public/global.css → docs/global.css
@@ -1,7 +1,7 @@
 body {
 	color: #333;
 	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 	margin: 0; 
 	padding: 0; 
 }

diff --git a/public/index.html → docs/index.html b/public/index.html → docs/index.html
@@ -7,7 +7,10 @@
 	<title>Svelte app</title>
 
 	<link rel='stylesheet' href='global.css'>
+	<link href="https://fonts.googleapis.com/css?family=Rajdhani:400,700" rel="stylesheet">
 	<link rel='stylesheet' href='test.css'>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/rainbow.min.css">
+
 	<style>
 		html {
 			box-sizing: border-box;
@@ -19,6 +22,7 @@
 </head>
 
 <body>
+	<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js'></script>
 	<script src='test.js'></script>
 </body>
 </html>
diff --git a/public/test.css → docs/test.css b/public/test.css → docs/test.css
diff --git a/public/test.css.map → docs/test.css.map b/public/test.css.map → docs/test.css.map
diff --git a/public/test.html → docs/test.html b/public/test.html → docs/test.html
diff --git a/public/test.js → docs/test.js b/public/test.js → docs/test.js
diff --git a/docs/test.js.map b/docs/test.js.map
diff --git a/public/bundle.js.map b/public/bundle.js.map
diff --git a/public/test.js.map b/public/test.js.map
diff --git a/rollup.config.js b/rollup.config.js
@@ -13,7 +13,7 @@ const bundle = {
     sourcemap: true,
     format: "iife",
     name: "SvelteCalendar",
-    file: "public/bundle.js"
+    file: "docs/bundle.js"
   },
   plugins: [
     svelte({
@@ -26,7 +26,7 @@ const bundle = {
       // we'll extract any component CSS out into
       // a separate file — better for performance
       css: css => {
-        css.write("public/bundle.css");
+        css.write("docs/bundle.css");
       }
     }),
 
@@ -51,7 +51,7 @@ const test = {
     sourcemap: true,
     format: "iife",
     name: "app",
-    file: "public/test.js"
+    file: "docs/test.js"
   },
   plugins: [
     svelte({
@@ -64,7 +64,7 @@ const test = {
       // we'll extract any component CSS out into
       // a separate file — better for performance
       css: css => {
-        css.write("public/test.css");
+        css.write("docs/test.css");
       }
     }),
 
@@ -77,7 +77,7 @@ const test = {
     commonjs(),
     buble({ objectAssign: true }),
 
-    !production && browsersync({ server: "public" }),
+    !production && browsersync({ server: "docs" }),
 
     // If we're building for production (npm run build
     // instead of npm run dev), minify

diff --git a/src/App.html b/src/App.html
@@ -1,55 +1,76 @@
-<h1>Date Picker</h1>
+<h1>SvelteCalendar</h1>
 <div class="container">
-	<p>Get your dates here, hot off the presses.</p>
+	<p>A lightweight date picker written with Svelte. Here is an example: </p>
+
 	<Datepicker format="{dateFormat}" />
 	<!-- <Datepicker ref:cal {start} {end} format="mm/dd/yyyy" /> -->
 
-	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit mollitia fugiat praesentium, beatae possimus vero ullam
-		voluptatibus numquam nostrum magni enim expedita commodi doloribus assumenda fuga? Veniam pariatur laudantium amet?</p>
-	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit mollitia fugiat praesentium, beatae possimus vero ullam
-		voluptatibus numquam nostrum magni enim expedita commodi doloribus assumenda fuga? Veniam pariatur laudantium amet?</p>
+	<p>This component can be used with or without the Svelte compiler.</p>
+	<ul>
+		<li>Lightweight (~7KB)</li>
+		<li>IE11+ Compatible</li>
+		<li>Usable as a Svelte component</li>
+		<li>Usable with Vanilla JS / &lt;Your Framework Here&gt;</li>
+		<li>Usable as custom element</li>
+		<li>Mobile/thumb friendly</li>
+		<li>Keyboard navigation</li>
+	</ul>
 
-	<div class="text-center">
-		<Datepicker />
-	</div>
+	<p>Above you can see the default styling of this component.  This will be created for you by default when using the component but you can also pass in your own calendar 'trigger' either as a slot (custom element or svelte) or as a DOM node reference (use as vanilla JS).  Here are some examples:</p>
+
+	<h4>With Svelte:</h4>
+	<pre><code class="html">
+&lt;Datepicker format={dateFormat} bind:formattedSelected bind:dateChosen&gt;
+  &lt;button class="custom-button"&gt;
+    &#123;#if dateChosen} Chosen: &#123;formattedSelected} &#123;:else} Pick a date &#123;/if}
+  &lt;/button&gt;
+&lt;/Datepicker&gt;
+	</code></pre>
 
-	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit mollitia fugiat praesentium, beatae possimus vero ullam
-		voluptatibus numquam nostrum magni enim expedita commodi doloribus assumenda fuga? Veniam pariatur laudantium amet?</p>
-	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit mollitia fugiat praesentium, beatae possimus vero ullam
-		voluptatibus numquam nostrum magni enim expedita commodi doloribus assumenda fuga? Veniam pariatur laudantium amet?</p>
-	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit mollitia fugiat praesentium, beatae possimus vero ullam
-		voluptatibus numquam nostrum magni enim expedita commodi doloribus assumenda fuga? Veniam pariatur laudantium amet?</p>
 	<div class="text-center">
 		<Datepicker format={dateFormat} bind:formattedSelected bind:dateChosen>
 			<button class="custom-button">
 				{#if dateChosen} Chosen: {formattedSelected} {:else} Pick a date {/if}
 			</button>
 		</Datepicker>
 	</div>
-</div>
-<div class="container">
-	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit mollitia fugiat praesentium, beatae possimus vero ullam
-		voluptatibus numquam nostrum magni enim expedita commodi doloribus assumenda fuga? Veniam pariatur laudantium amet?</p>
-	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit mollitia fugiat praesentium, beatae possimus vero ullam
-		voluptatibus numquam nostrum magni enim expedita commodi doloribus assumenda fuga? Veniam pariatur laudantium amet?</p>
-	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit mollitia fugiat praesentium, beatae possimus vero ullam
-		voluptatibus numquam nostrum magni enim expedita commodi doloribus assumenda fuga? Veniam pariatur laudantium amet?</p>
 
-	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit mollitia fugiat praesentium, beatae possimus vero ullam
-		voluptatibus numquam nostrum magni enim expedita commodi doloribus assumenda fuga? Veniam pariatur laudantium amet?</p>
-	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit mollitia fugiat praesentium, beatae possimus vero ullam
-		voluptatibus numquam nostrum magni enim expedita commodi doloribus assumenda fuga? Veniam pariatur laudantium amet?</p>
-	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit mollitia fugiat praesentium, beatae possimus vero ullam
-		voluptatibus numquam nostrum magni enim expedita commodi doloribus assumenda fuga? Veniam pariatur laudantium amet?</p>
-	<div class="text-right">
-		<Datepicker />
+	<h4>Without Svelte:</h4>
+	<pre><code class="html">
+&lt;div class="button-container"&gt;
+  &lt;button id="test"&gt;My Custom Button&lt;/button&gt;
+&lt;/div&gt;
+	</code></pre>
+
+	<pre><code class="js">
+var trigger = document.getElementById('test');
+var cal = new SvelteCalendar(&#123; 
+  target: document.querySelector('.button-container'),
+  anchor: trigger, 
+  data: &#123;
+    trigger: trigger
+  }
+});
+	</code></pre>
+
+	<div>
+		<Datepicker>
+			<button id="test">My Custom Button</button>
+		</Datepicker>
 	</div>
 </div>
 
 <style>
+	h1 { 
+		text-align: center;
+		margin: 100px 0;
+	}
 	.container {
 	  background: #eee;
-	  padding: 10px;
+		padding: 15px;
+		max-width: 100%; 
+		width: 800px;
+		margin: 0 auto;
 	}
 	.custom-button {
 	  display: inline-block;
@@ -81,6 +102,9 @@ <h1>Date Picker</h1>
 	  },
 	  components: {
 	    Datepicker: "./Components/Datepicker.html"
-	  }
+		},
+		oncreate() { 
+			hljs.initHighlightingOnLoad();
+		}
 	};
 </script>