From e6774fa740ea303073f77f3f7e50ce3e03e8de58 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan.tuomi@eficode.com>
Date: Sat, 3 Mar 2018 16:41:55 +0200
Subject: Initial commit

---
 src/app.js                                  |  4 +++
 src/components/content/content.tag          |  3 ++
 src/components/counter/counter.tag          | 13 ++++++++
 src/components/header/header.less           |  9 ++++++
 src/components/header/header.tag            |  8 +++++
 src/components/push-button/push-button.less |  1 +
 src/components/push-button/push-button.tag  | 13 ++++++++
 src/components/site/site.tag                | 10 ++++++
 src/components/subheading/subheading.tag    |  5 +++
 src/index.html                              | 17 ++++++++++
 src/observables/clicker.js                  |  9 ++++++
 src/observables/index.js                    |  3 ++
 src/reset.css                               | 48 ++++++++++++++++++++++++++++
 src/style.less                              | 49 +++++++++++++++++++++++++++++
 14 files changed, 192 insertions(+)
 create mode 100644 src/app.js
 create mode 100644 src/components/content/content.tag
 create mode 100644 src/components/counter/counter.tag
 create mode 100644 src/components/header/header.less
 create mode 100644 src/components/header/header.tag
 create mode 100644 src/components/push-button/push-button.less
 create mode 100644 src/components/push-button/push-button.tag
 create mode 100644 src/components/site/site.tag
 create mode 100644 src/components/subheading/subheading.tag
 create mode 100644 src/index.html
 create mode 100644 src/observables/clicker.js
 create mode 100644 src/observables/index.js
 create mode 100644 src/reset.css
 create mode 100644 src/style.less

(limited to 'src')

diff --git a/src/app.js b/src/app.js
new file mode 100644
index 0000000..6541e13
--- /dev/null
+++ b/src/app.js
@@ -0,0 +1,4 @@
+import riot from 'riot';
+import './tags';
+
+riot.mount('site');
\ No newline at end of file
diff --git a/src/components/content/content.tag b/src/components/content/content.tag
new file mode 100644
index 0000000..5cd08a6
--- /dev/null
+++ b/src/components/content/content.tag
@@ -0,0 +1,3 @@
+<content>
+  <counter />
+</content>
\ No newline at end of file
diff --git a/src/components/counter/counter.tag b/src/components/counter/counter.tag
new file mode 100644
index 0000000..d558e8e
--- /dev/null
+++ b/src/components/counter/counter.tag
@@ -0,0 +1,13 @@
+<counter>
+  <h3>Times clicked: { count }</h3>
+  <push-button />
+  <script>
+    this.count = 0;
+    const counter = this;
+
+    clicker.on('click', () => {
+      counter.count += 1;
+      counter.update();
+    });
+  </script>
+</counter>
\ No newline at end of file
diff --git a/src/components/header/header.less b/src/components/header/header.less
new file mode 100644
index 0000000..13ac353
--- /dev/null
+++ b/src/components/header/header.less
@@ -0,0 +1,9 @@
+@import "../../style.less";
+
+header h1 {
+  font-size: 5rem;
+  font-weight: 300;
+  @media screen and (max-width: @mobile-width) {
+    font-size: 3rem;
+  }
+}
\ No newline at end of file
diff --git a/src/components/header/header.tag b/src/components/header/header.tag
new file mode 100644
index 0000000..d0ebe95
--- /dev/null
+++ b/src/components/header/header.tag
@@ -0,0 +1,8 @@
+<header>
+  <h1>Riot + Parcel example</h1>
+  <subheading>A sample project using riot.js, less and parcel.</subheading>
+
+  <style type="less">
+    @import "header.less";
+  </style>
+</header>
\ No newline at end of file
diff --git a/src/components/push-button/push-button.less b/src/components/push-button/push-button.less
new file mode 100644
index 0000000..488fc37
--- /dev/null
+++ b/src/components/push-button/push-button.less
@@ -0,0 +1 @@
+@import "../../style.less";
\ No newline at end of file
diff --git a/src/components/push-button/push-button.tag b/src/components/push-button/push-button.tag
new file mode 100644
index 0000000..2d24c88
--- /dev/null
+++ b/src/components/push-button/push-button.tag
@@ -0,0 +1,13 @@
+<push-button>
+  <button onclick={ click }>Click me!</button>
+
+  <style type="less">
+    @import "./push-button";
+  </style>
+
+  <script>
+    click() {
+      clicker.trigger('click');
+    }
+  </script>
+</push-button>
\ No newline at end of file
diff --git a/src/components/site/site.tag b/src/components/site/site.tag
new file mode 100644
index 0000000..c5e8706
--- /dev/null
+++ b/src/components/site/site.tag
@@ -0,0 +1,10 @@
+<site>
+  <header />
+  <content />
+
+  <script>
+  /* Import everything that you want to have in scope in your tags here */
+  import riot from 'riot';
+  import { clicker } from './observables';
+  </script>
+</site>
\ No newline at end of file
diff --git a/src/components/subheading/subheading.tag b/src/components/subheading/subheading.tag
new file mode 100644
index 0000000..4266a7b
--- /dev/null
+++ b/src/components/subheading/subheading.tag
@@ -0,0 +1,5 @@
+<subheading>
+  <h2>
+    <yield />
+  </h2>
+</subheading>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..901d8ff
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Riot + Parcel example</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Riot + Parcel example.">
+    <link ref="stylesheet" href="reset.css">
+    <link rel="stylesheet" href="style.less">
+    <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">
+  </head>
+
+  <body>
+    <site></site>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/src/observables/clicker.js b/src/observables/clicker.js
new file mode 100644
index 0000000..ae3d3b1
--- /dev/null
+++ b/src/observables/clicker.js
@@ -0,0 +1,9 @@
+import riot from 'riot';
+
+function Clicker() {
+  riot.observable(this);
+}
+
+const clicker = new Clicker();
+
+export default clicker;
\ No newline at end of file
diff --git a/src/observables/index.js b/src/observables/index.js
new file mode 100644
index 0000000..d26b412
--- /dev/null
+++ b/src/observables/index.js
@@ -0,0 +1,3 @@
+import clicker from './clicker';
+
+export { clicker };
\ No newline at end of file
diff --git a/src/reset.css b/src/reset.css
new file mode 100644
index 0000000..e29c0f5
--- /dev/null
+++ b/src/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+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;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/src/style.less b/src/style.less
new file mode 100644
index 0000000..7edb45e
--- /dev/null
+++ b/src/style.less
@@ -0,0 +1,49 @@
+@riot-color-red:      #fc0e49;
+@riot-color-white:    #fff;
+@riot-color-black:    #313131;
+@riot-color-blue:     #268bd2;
+
+@mobile-width:        600px;
+
+@font:                'Lato', sans-serif;
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+.lato-font(@size) {
+  font-family: 'Lato', sans-serif;
+  font-size: @size;
+}
+
+html {
+  .lato-font(20px);
+  
+  background-color: @riot-color-white;
+  color: @riot-color-black;
+  box-sizing: border-box;
+}
+
+body {
+  border: 0;
+
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+
+  padding: 1rem;
+}
+
+a {
+  color: @riot-color-blue;
+}
+
+button {
+  .lato-font(1rem);
+
+  padding: 0.5rem 1rem;
+  background-color: @riot-color-red;
+  color: @riot-color-white;
+  border: 0;
+  border-radius: 5px;
+}
\ No newline at end of file
-- 
cgit v1.3