Merge pull request #17 from resonatecoop/new-website-search

Add search component to new website
* Removes gulp and replace with hugo pipes (css, js, images)

.gitignore

@@ -7,11 +7,12 @@ nginx-conf/
 
 docker-compose-*
 
-public/
-static/
 src/data/css/hash.json
 src/data/js/hash.json
 src/data/images/hash.json
+src/public/
+src/static/
+src/resources/
 
 # Compiled source #
 ###################

README.md

@@ -22,14 +22,14 @@ npm install gulp-cli --global
 
 ```sh
 cd src && \
-npm install && \
-gulp
+npm install -g @babel/cli @babel/core [email protected] [email protected] && \
+npm install
 ```
 
 ### Server
 
 ```sh
-hugo server --baseURL http://localhost:1314 --port 1314
+hugo server --baseURL http://localhost:1314 --environment development --port 1314
 ```
 
 ## Docker

src/Dockerfile

@@ -29,15 +29,13 @@ ENV NODE_ENV development
 
 WORKDIR /build/website/src
 
+RUN npm install -g @babel/cli @babel/core [email protected] [email protected]
 RUN npm install
-RUN npm install -g gulp
 
 ARG NODE_ENV
 ENV NODE_ENV=$NODE_ENV
 
-RUN gulp
-
-RUN hugo -d ./public
+RUN hugo -d ./public -e ${NODE_ENV}
 
 FROM alpine:latest
 

src/css/_header.css → src/assets/css/_header.css

@@ -96,3 +96,14 @@ ul.menu.flex-column li.active::after {
     top: 100%;
   }
 }
+
+.right-4 {
+  right: 4rem;
+}
+
+@media (--breakpoint-large) {
+  .initial-l {
+    position: static;
+    position: initial;
+  }
+}

src/assets/css/main.css

@@ -0,0 +1,21 @@
+@import '@resonate/tachyons';
+@import 'assets/css/_variables';
+@import 'assets/css/_typography';
+@import 'assets/css/_fills';
+@import 'assets/css/_code';
+@import 'assets/css/_hugo-internal-templates';
+@import 'assets/css/_social-icons';
+@import 'assets/css/_styles';
+@import 'assets/css/_syntax';
+
+@import 'assets/css/_forms';
+@import 'assets/css/_buttons';
+@import 'assets/css/_grid';
+@import 'assets/css/_header';
+@import 'assets/css/_footer';
+@import 'assets/css/_nav';
+
+@import '@resonate/search-component/index.css';
+
+@import 'assets/css/_marketing';
+@import 'assets/css/_manifesto';

src/assets/js/main.js

@@ -0,0 +1,127 @@
+import 'regenerator-runtime/runtime.js'
+import Nanocomponent from 'nanocomponent'
+import nanostate from 'nanostate'
+import choo from 'nanochoo' // resonatecoop/nanochoo (fork of nanochoo with added support for cached components)
+import html from 'nanohtml'
+import icon from '@resonate/icon-element'
+import Search from '@resonate/search-component'
+
+import './tabbing.js'
+
+document.addEventListener('DOMContentLoaded', DOMContentLoaded)
+
+function DOMContentLoaded () {
+  // nav()
+  search('.search')
+}
+
+// Search outer
+class SearchOuter extends Nanocomponent {
+  constructor (id, state, emit) {
+    super(id)
+
+    this.state = state
+    this.emit = emit
+    this.local = state.components[id] = {}
+
+    this.local.tags = [
+      'ambient',
+      'acoustic',
+      'alternative',
+      'electro',
+      'electronic',
+      'experimental',
+      'folk',
+      'funk',
+      'hiphop',
+      'house',
+      'indie',
+      'instrumental',
+      'jazz',
+      'metal',
+      'pop',
+      'punk'
+    ]
+
+    this.local.machine = nanostate.parallel({
+      search: nanostate('off', {
+        on: { toggle: 'off' },
+        off: { toggle: 'on' }
+      })
+    })
+
+    this.local.machine.on('search:toggle', () => {
+      this.rerender()
+      if (this.local.machine.state.search === 'on') {
+        const input = document.querySelector('input[type="search"]')
+        if (input && input !== document.activeElement) input.focus()
+      }
+      document.body.classList.toggle('search-open', this.local.machine.state.search === 'on')
+    })
+  }
+
+  createElement () {
+    const machine = {
+      on: () => this.state.cache(Search, 'search').render({ tags: this.local.tags }),
+      off: () => {
+        const attrs = {
+          onclick: (e) => {
+            this.local.machine.emit('search:toggle')
+          },
+          class: 'js bn dn db-l bg-transparent'
+        }
+        return html`
+          <button ${attrs}>
+            <div class="flex items-center">
+              ${icon('search', { size: 'sm' })}
+              <span class="db pl3 near-black near-black--light near-white--dark">Search</span>
+            </div>
+          </button>
+        `
+      }
+    }[this.local.machine.state.search]
+
+    return html`
+      <div class="search flex-l flex-auto-l w-100-l justify-center-l">
+        ${machine()}
+      </div>
+    `
+  }
+
+  update () {
+    return false
+  }
+}
+
+function search (selector) {
+  if (!document.querySelector(selector)) {
+    console.log(`${selector} element not found`)
+    return
+  }
+
+  const app = choo()
+
+  app.use((state, emitter, app) => {
+    state.search = state.search || {
+      notFound: false,
+      q: '',
+      results: [],
+      placeholder: 'search by name, artist, album, tag'
+    }
+
+    state.user = {}
+    state.params = {} // nanochoo does not have a router
+
+    state.cache(Search, 'search')
+
+    emitter.on('search', (q) => {
+      window.open(`https://beta.stream.resonate.coop/search?q=${q}`, '_blank')
+    })
+  })
+
+  app.view((state, emit) => {
+    return state.cache(SearchOuter, 'header').render()
+  })
+
+  app.mount(selector)
+}

src/assets/js/tabbing.js

@@ -0,0 +1,17 @@
+window.addEventListener('keydown', handleFirstTab)
+
+function handleFirstTab (e) {
+  if (e.keyCode === 9) {
+    document.body.classList.add('user-is-tabbing')
+
+    window.removeEventListener('keydown', handleFirstTab)
+    window.addEventListener('mousedown', handleMouseDownOnce)
+  }
+}
+
+function handleMouseDownOnce () {
+  document.body.classList.remove('user-is-tabbing')
+
+  window.removeEventListener('mousedown', handleMouseDownOnce)
+  window.addEventListener('keydown', handleFirstTab)
+}

src/assets/jsconfig.json

@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+  "baseUrl": ".",
+  "paths": {
+   "*": [
+    "*"
+   ]
+  }
+ }
+}

src/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      require('@babel/preset-env'),
+      {
+        useBuiltIns: 'entry',
+        corejs: 3
+      }
+    ]
+  ],
+  plugins: ['module:nanohtml']
+}

src/content/_index.en.md

@@ -30,23 +30,23 @@ features:
     text: "**[STREAM2OWN](/pricing)** Directly supports the artists you love and listen to with our user-centric payment model. Stream2own pays artists more each time you listen, 5× higher than corporate platforms."
     details: "For the first listen, artists receive 1c per stream, listeners pay 0.2c per stream, because the community supports discovery of new music and artists. After 9 plays, the listener owns the track and the artist receives the full cost of a track sale."
     img:
-      src: "illustrations/Ethical_streaming.png"
+      src: "images/illustrations/Ethical_streaming.png"
   - id: discover
     title: "Discover"
     text: "**[DISCOVER](https://stream.resonate.is/discover)** Immerse yourself in new sounds and genres from artists and labels all over the world. Our shuffle everything function and playlists open up a world of music."
     details: "Use our player on desktop or mobile phone. 
<br>Native apps are coming soon."
     img:
-      src: "illustrations/Resonate_Ear.png"
+      src: "images/illustrations/Resonate_Ear.png"
   - id: govern-and-own
     title: "Gover & own your platform"
     text: "**[GOVERN & OWN your platform](/the-coop)** Join as a co-op member to have a real say in the future of digital audio. Be a part of an active co-operative community; govern the decisions and development, share in the profits, build a fairer future."
     details: "Our members are artists, labels, listeners and workers. <br>One member, one share, one vote."
     img:
-      src: "illustrations/Badge.png"
+      src: "images/illustrations/Badge.png"
   - id: digital-dignity
     title: "Digital dignity"
     text: "**[DIGITAL DIGNITY](/community-credentials)** Our privacy respecting architecture is built to safeguard the digital dignity of our human users. Reject data harvesting big tech and AI tools tracking your network. Be part of a community of music lovers, building the genuine social power of music."
     details: "Our stream2own model is ethical for artists and listeners. We are working on a new net privacy protocol called [Community Credentials](/community-credentials)."
     img:
-      src: "illustrations/Verified.png"
+      src: "images/illustrations/Verified.png"
 ---

src/content/_index.es.md

@@ -30,23 +30,23 @@ features:
     text: "**[STREAM2OWN](/pricing)** Directly supports the artists you love and listen to with our user-centric payment model. Stream2own pays artists more each time you listen, 5× higher than corporate platforms."
     details: "For the first listen, artists receive 1c per stream, listeners pay 0.2c per stream, because the community supports discovery of new music and artists. After 9 plays, the listener owns the track and the artist receives the full cost of a track sale."
     img:
-      src: "illustrations/Ethical_streaming.png"
+      src: "images/illustrations/Ethical_streaming.png"
   - id: discover
     title: "Discover"
     text: "**[DISCOVER](https://stream.resonate.is/discover)** Immerse yourself in new sounds and genres from artists and labels all over the world. Our shuffle everything function and playlists open up a world of music."
     details: "Use our player on desktop or mobile phone. 
<br>Native apps are coming soon."
     img:
-      src: "illustrations/Resonate_Ear.png"
+      src: "images/illustrations/Resonate_Ear.png"
   - id: govern-and-own
     title: "Gover & own your platform"
     text: "**[GOVERN & OWN your platform](/the-coop)** Join as a co-op member to have a real say in the future of digital audio. Be a part of an active co-operative community; govern the decisions and development, share in the profits, build a fairer future."
     details: "Our members are artists, labels, listeners and workers. <br>One member, one share, one vote."
     img:
-      src: "illustrations/Badge.png"
+      src: "images/illustrations/Badge.png"
   - id: digital-dignity
     title: "Digital dignity"
     text: "**[DIGITAL DIGNITY](/community-credentials)** Our privacy respecting architecture is built to safeguard the digital dignity of our human users. Reject data harvesting big tech and AI tools tracking your network. Be part of a community of music lovers, building the genuine social power of music."
     details: "Our stream2own model is ethical for artists and listeners. We are working on a new net privacy protocol called [Community Credentials](/community-credentials)."
     img:
-      src: "illustrations/Verified.png"
+      src: "images/illustrations/Verified.png"
 ---

src/content/_index.fr.md

@@ -30,23 +30,23 @@ features:
     text: "**[STREAM2OWN](/pricing)** Directly supports the artists you love and listen to with our user-centric payment model. Stream2own pays artists more each time you listen, 5× higher than corporate platforms."
     details: "For the first listen, artists receive 1c per stream, listeners pay 0.2c per stream, because the community supports discovery of new music and artists. After 9 plays, the listener owns the track and the artist receives the full cost of a track sale."
     img:
-      src: "illustrations/Ethical_streaming.png"
+      src: "images/illustrations/Ethical_streaming.png"
   - id: discover
     title: "Discover"
     text: "**[DISCOVER](https://stream.resonate.is/discover)** Immerse yourself in new sounds and genres from artists and labels all over the world. Our shuffle everything function and playlists open up a world of music."
     details: "Use our player on desktop or mobile phone. 
<br>Native apps are coming soon."
     img:
-      src: "illustrations/Resonate_Ear.png"
+      src: "images/illustrations/Resonate_Ear.png"
   - id: govern-and-own
     title: "Gover & own your platform"
     text: "**[GOVERN & OWN your platform](/the-coop)** Join as a co-op member to have a real say in the future of digital audio. Be a part of an active co-operative community; govern the decisions and development, share in the profits, build a fairer future."
     details: "Our members are artists, labels, listeners and workers. <br>One member, one share, one vote."
     img:
-      src: "illustrations/Badge.png"
+      src: "images/illustrations/Badge.png"
   - id: digital-dignity
     title: "Digital dignity"
     text: "**[DIGITAL DIGNITY](/community-credentials)** Our privacy respecting architecture is built to safeguard the digital dignity of our human users. Reject data harvesting big tech and AI tools tracking your network. Be part of a community of music lovers, building the genuine social power of music."
     details: "Our stream2own model is ethical for artists and listeners. We are working on a new net privacy protocol called [Community Credentials](/community-credentials)."
     img:
-      src: "illustrations/Verified.png"
+      src: "images/illustrations/Verified.png"
 ---