Merge pull request #42 from xsanda/landing-screen

Landing page

.eslintignore

@@ -0,0 +1 @@
+demo

.travis.yml

@@ -2,14 +2,23 @@ language: node_js
 node_js: node
 
 script:
-- npm run eslint
-- npm run build
+  - npm run eslint
+  - npm run build
 
 deploy:
-  provider: releases
-  api_key: $GH_KEY
-  file:
-    - "dist/*.js"
-  skip_cleanup: true
-  on:
-    tags: true
+  - provider: pages
+    skip_cleanup: true
+    github_token: $GH_KEY # Set in the settings page of your repository as a secure variable
+    keep_history: true
+    committer_from_gh: true
+    local_dir: ./demo
+    on:
+      branch: master
+
+  - provider: releases
+    api_key: $GH_KEY
+    file:
+      - "dist/*.js"
+    skip_cleanup: true
+    on:
+      tags: true

README.md

@@ -16,6 +16,8 @@ To install CJSS, add the [JavaScript](https://github.com/scottkellum/CJSS/blob/m
 
 Your editor probably has [a plugin](https://eslint.org/docs/user-guide/integrations) for automatically linting as you type.
 
+The demo website can be built by leaving `npm run dev` running, and opening `demo/index.html` in your web browser.
+
 ## Using CJSS
 
 First off, everything happens in your CSS file. You can layer this into your websites as you see fit. You can use this to layer on just a little bit more functionality in your CSS here and there or construct an entire page. It’s up to you!

demo/CNAME

@@ -0,0 +1 @@
+cjss.js.org

demo/component/body.css

@@ -0,0 +1,114 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
+
+body {
+  /* Data */
+  --data: js-expr({
+    name: 'world',
+  });
+
+  /* Markup */
+  --body: html(
+    <a href="https://github.com/cjss-group/CJSS/" class="github-link">
+      <span><code>cjss-group/CJSS</code></span>
+      <img src="media/github.png" srcset="media/github@2x.png 2x, media/github@3x.png 3x">
+    </a>
+    <div class="spacer">
+      <main class="center">
+        <h1>Hello ${data.name}!</h1>
+        <h2>This page was constructed entirely within CSS files. That includes all the data, markup, scripts, and also styles.</h2>
+
+        <h3>Click the items below to toggle.</h3>
+        <nav class="click-demo">{nav}</nav>
+        <h3>Download CJSS for your own project (please don’t!)</h3>
+        <nav class="downloads"
+            data-links="[{&quot;title&quot;: &quot;Development version&quot;, &quot;name&quot;: &quot;cjss.js&quot;}, {&quot;title&quot;: &quot;Minified version&quot;, &quot;name&quot;: &quot;cjss.min.js&quot;}]">
+          Title
+        </nav>
+        <p><recursion data-depth="4"></recursion></p>
+      </main>
+    </div>
+  );
+
+  /* Just some regular old CSS */
+  font-family: Roboto, sans-serif;
+  margin: 0;
+  background-image: linear-gradient( 70.6deg, rgba(172,30,255,1) 0.3%, rgba(65,35,251,1) 55.8%, rgba(35,251,224,1) 105.1% );
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  flex-direction: column;
+  flex: 1;
+}
+
+body > .github-link {
+  padding: 1rem;
+  align-self: flex-end;
+  text-decoration: none;
+  color: inherit;
+  font-size: 1.5em;
+  display: flex;
+  align-items: center;
+}
+
+body > .github-link > span {
+  overflow: hidden;
+  margin-right: -5px;
+}
+body > .github-link > img {
+  position: relative;
+  z-index: 1;
+  width: 64px;
+}
+
+body > .github-link > span > code {
+  padding: 1rem;
+  display: inline-block;
+  transition: transform 0.5s ease-out;
+}
+
+body > .github-link:not(:hover) > span > code {
+  transform: translateX(100%);
+  transition-timing-function: ease-in;
+}
+
+body > .spacer {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+html {
+  height: 100%;
+}
+
+body h1 {
+  font-size: 50px;
+  margin: 0;
+}
+
+body h3 {
+  opacity: 0.6;
+  margin: 30px 0 20px 0;
+}
+
+.center {
+  text-align: center;
+}
+
+recursion {
+  border: 1.5px solid;
+  padding: 3px;
+  padding-left: 6px;
+  position: relative;
+  display: inline-block;
+  font-size: 0;
+
+  --data: js-expr({
+    depth: this.dataset.depth,
+  });
+  --body: js-expr(
+    data.depth > 0 ? `<recursion data-depth="${data.depth-1}"></recursion>` : ''
+  );
+}

demo/component/buttons.css

@@ -0,0 +1,14 @@
+.buttons {
+  display: flex;
+  justify-content: center;
+}
+
+.buttons > * {
+  padding: 0.3em 0.5em;
+  margin: 0 0.3em;
+  color: white;
+  text-decoration: none;
+  font-size: 1.2em;
+  border-radius: 0.2em;
+  box-shadow: 0 0 0 1px white;
+}

example/component/nav.css → demo/component/click-demo.css

@@ -1,16 +1,19 @@
-nav {
+@import url('buttons.css');
+
+.click-demo {
   --data: json({
     "name": ["one", "two", "three"],
     "link": []
   });
 
   --prepare: js(
+    this.classList.add('buttons');
     data.link = data.name.map((name, index) => (`#${name}-${index + 1}`));
   );
 
   --body: js-expr(
     [0, 1, 2].map(i => `
-      <a class="item" href="${data.link[i]}">${data.name[i]}</a>
+      <a href="${data.link[i]}">${data.name[i]}</a>
     `).join('')
   );
 
@@ -19,16 +22,7 @@ nav {
   );
 }
 
-nav .item {
-  cursor: pointer;
-  padding: 6px 8px;
-  margin: 0 5px;
-  color: white;
-  text-decoration: none;
-  font-size: 21px;
-  border-radius: 3px;
-  box-shadow: 0 0 0 1px white;
-
+.click-demo > * {
   --script: js(
     function toggle() {
       this.classList.toggle('active');
@@ -38,7 +32,7 @@ nav .item {
   );
 }
 
-nav .item.active {
+.click-demo > .active {
   outline: none;
   text-shadow: 0 0 5px white;
   box-shadow: 0 0 5px white;

demo/component/downloads.css

@@ -0,0 +1,35 @@
+@import url('buttons.css');
+
+.downloads {
+  display: flex;
+  justify-content: center;
+  --data: js-expr(
+    JSON.parse(this.dataset.links)
+  );
+
+  --prepare: js(
+    this.classList.add('buttons');
+  );
+
+  --body: js-expr(
+    data.map(({ title, name }) => `
+      <a href="dist/${name}" download="${name}">${title} (<code>${name}</code>)</a>
+    `).join('')
+  );
+}
+
+.downloads > * {
+  --script: js(
+    function toggle() {
+      this.classList.toggle('active');
+    }
+
+    this.addEventListener('click', toggle);
+  );
+}
+
+.downloads > :hover {
+  outline: none;
+  text-shadow: 0 0 5px white;
+  box-shadow: 0 0 5px white;
+}

example/index.html → demo/index.html

@@ -7,7 +7,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>CJSS</title>
   <link rel="stylesheet" href="style.css">
-  <script src="../dist/cjss.js"></script>
+  <script src="dist/cjss.js"></script>
 </head>
 
 <body>

example/style.css → demo/style.css

@@ -1,5 +1,6 @@
-@import url('component/nav.css');
 @import url('component/body.css');
+@import url('component/click-demo.css');
+@import url('component/downloads.css');
 
 /* Run a global script */
 script {

rollup.config.js

@@ -5,7 +5,7 @@ export default [
     input: './src/index.js',
     plugins: [],
     output: {
-      file: './dist/cjss.js',
+      file: './demo/dist/cjss.js',
       format: 'iife',
       name: 'cjss',
       sourcemap: 'inline',
@@ -15,7 +15,7 @@ export default [
     input: './src/index.js',
     plugins: [terser()],
     output: {
-      file: './dist/cjss.min.js',
+      file: './demo/dist/cjss.min.js',
       format: 'iife',
       name: 'cjss',
     },