feat: Initial commit

.github/workflows/build-and-deploy.yml

@@ -0,0 +1,35 @@
+name: Build and deploy
+
+on:
+  push:
+    branches: main
+  repository_dispatch:
+    types: [jekyll-build]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Build
+      uses: docker://jekyll/jekyll
+      with:
+        entrypoint: bash
+        args:  -c "/usr/local/bin/bundle install && /usr/local/bin/bundle exec jekyll build --incremental"
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Deploy
+      run: |
+        sudo chown -R $(whoami):$(whoami) .
+        git config --global user.email "[email protected]"
+        git config --global user.name "$GITHUB_ACTOR"
+        cp -r _site /tmp
+        cd /tmp/_site
+        git init
+        git branch -M gh-pages
+        git add .
+        git commit -m "Deploy Jekyll to GitHub Pages"
+        git remote add origin "https://$GITHUB_ACTOR:${{ secrets.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY"
+        git push -f origin gh-pages

.gitignore

@@ -0,0 +1,6 @@
+_site
+.sass-cache
+.jekyll-cache
+.jekyll-metadata
+vendor
+Gemfile.lock

Gemfile

@@ -0,0 +1,10 @@
+source 'https://rubygems.org'
+
+group :jekyll_plugins do
+  gem 'jekyll', '~> 3.9.3'
+  gem 'webrick', '~> 1.8', '>= 1.8.1'
+  gem 'kramdown-parser-gfm', '~> 1.1.0'
+  gem 'jekyll-optional-front-matter', '~> 0.3.2'
+  gem 'cssminify2', '~> 2.0', '>= 2.0.1'
+  gem 'uglifier', '~> 4.2'
+end

_config.yml

@@ -0,0 +1,17 @@
+title: xmp3
+description: Listen and download music
+
+github:
+  username: xmp3
+  collections:
+    branch: main
+    repository: data
+    filename: collections
+  tracks:
+    branch: main
+    repository: users
+
+defaults:
+  -
+    values:
+      layout: default

_includes/components/icons/collections.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 24 24"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M14.5 2.134a1 1 0 0 1 1 0l6 3.464a1 1 0 0 1 .5.866V21a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V3a1 1 0 0 1 .5-.866zM16 4.732V20h4V7.041l-4-2.309zM3 22a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v18a1 1 0 0 1-1 1zm6 0a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v18a1 1 0 0 1-1 1z"></path></svg>

_includes/components/icons/crotchet.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 16 16"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M10 2v9.5a2.75 2.75 0 1 1-2.75-2.75H8.5V2H10zm-1.5 8.25H7.25A1.25 1.25 0 1 0 8.5 11.5v-1.25z"></path></svg>

_includes/components/icons/download.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 16 16"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M4.995 8.745a.75.75 0 0 1 1.06 0L7.25 9.939V4a.75.75 0 0 1 1.5 0v5.94l1.195-1.195a.75.75 0 1 1 1.06 1.06L8 12.811l-.528-.528a.945.945 0 0 1-.005-.005L4.995 9.805a.75.75 0 0 1 0-1.06z"></path><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z"></path></svg>

_includes/components/icons/next.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 16 16"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M12.7 1a.7.7 0 0 0-.7.7v5.15L2.05 1.107A.7.7 0 0 0 1 1.712v12.575a.7.7 0 0 0 1.05.607L12 9.149V14.3a.7.7 0 0 0 .7.7h1.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7h-1.6z"></path></svg>

_includes/components/icons/play.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 16 16"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z"></path></svg>

_includes/components/icons/previous.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 16 16"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M3.3 1a.7.7 0 0 1 .7.7v5.15l9.95-5.744a.7.7 0 0 1 1.05.606v12.575a.7.7 0 0 1-1.05.607L4 9.149V14.3a.7.7 0 0 1-.7.7H1.7a.7.7 0 0 1-.7-.7V1.7a.7.7 0 0 1 .7-.7h1.6z"></path></svg>

_includes/components/icons/quaver.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 24 24"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M6 3h15v15.167a3.5 3.5 0 1 1-3.5-3.5H19V5H8v13.167a3.5 3.5 0 1 1-3.5-3.5H6V3zm0 13.667H4.5a1.5 1.5 0 1 0 1.5 1.5v-1.5zm13 0h-1.5a1.5 1.5 0 1 0 1.5 1.5v-1.5z"></path></svg>

_includes/components/icons/search.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 16 16"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M7 1.75a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5zM.25 7a6.75 6.75 0 1 1 12.096 4.12l3.184 3.185a.75.75 0 1 1-1.06 1.06L11.304 12.2A6.75 6.75 0 0 1 .25 7z"></path></svg>

_includes/components/icons/sound.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 16 16"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M9.741.85a.75.75 0 0 1 .375.65v13a.75.75 0 0 1-1.125.65l-6.925-4a3.642 3.642 0 0 1-1.33-4.967 3.639 3.639 0 0 1 1.33-1.332l6.925-4a.75.75 0 0 1 .75 0zm-6.924 5.3a2.139 2.139 0 0 0 0 3.7l5.8 3.35V2.8l-5.8 3.35zm8.683 4.29V5.56a2.75 2.75 0 0 1 0 4.88z"></path><path d="M11.5 13.614a5.752 5.752 0 0 0 0-11.228v1.55a4.252 4.252 0 0 1 0 8.127v1.55z"></path></svg>

_includes/components/progressbar.css.html

@@ -0,0 +1,56 @@
+<style>
+  .progressbar-container {
+    width: 100%;
+    height: 20px;
+    cursor: pointer;
+    position: relative;
+    --fg-color: rgb(255,255,255);
+    --bg-color: rgba(255,255,255,.2);
+    --progressbar-height: 4px;
+    --progressbar-transform: 0%;
+    --progressbar-radius: calc(var(--progressbar-height) / 2);
+  }
+  .progressbar-background,
+  .progressbar-filled-container {
+    width: 100%;
+    height: var(--progressbar-height);
+    border-radius: var(--progressbar-radius);
+  }
+  .progressbar-background {
+    top: 50%;
+    position: absolute;
+    display: flex;
+    display: -ms-flexbox;
+    pointer-events: none;
+    transform: translateY(-50%);
+    background-color: var(--bg-color);
+  }
+  .progressbar-filled-container {
+    overflow: hidden;
+  }
+  .progressbar-filled {
+    width: 100%;
+    height: var(--progressbar-height);
+    will-change: transform;
+    transform: translateX(calc(var(--progressbar-transform) - 100%));
+    border-radius: var(--progressbar-radius);
+    background-color: var(--fg-color);
+  }
+  .progressbar-thumb {
+    top: 50%;
+    left: var(--progressbar-transform);
+    position: absolute;
+    will-change: left;
+    z-index: 100;
+    width: 12px;
+    height: 12px;
+    cursor: pointer;
+    margin-left: -6px;
+    border-radius: 50%;
+    transform: translateY(-50%);
+    background-color: transparent;
+  }
+  .progressbar-container:hover .progressbar-thumb {
+    background-color: var(--fg-color);
+  }
+</style>

_includes/components/progressbar.html

@@ -0,0 +1,16 @@
+<div
+  {% if include.id %}id="{{ include.id }}"{% endif %}
+  {% if include.min %}attr-min="{{ include.min }}"{% endif %}
+  {% if include.max %}attr-max="{{ include.max }}"{% endif %}
+  {% if include.step %}attr-step="{{ include.step }}"{% endif %}
+  {% if include.value %}attr-value="{{ include.value }}"{% endif %}
+  class="progressbar-container{% if include.extra_class %} {{ include.extra_class }}{% endif %}"
+  style="--progressbar-transform: {% if include.value and include.max %}{{ include.value | divided_by: include.max | times: 100 }}{% else %}0%;{% endif %} --progressbar-duration: 1000ms;"
+>
+  <div class="progressbar-background">
+    <div class="progressbar-filled-container">
+      <div class="progressbar-filled"></div>
+    </div>
+    <div class="progressbar-thumb" tabindex="0"></div>
+  </div>
+</div>

_includes/components/search-bar.html

@@ -0,0 +1,13 @@
+<div class="relative{% if include.class %} {{ include.class }}{% endif %}">
+  <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+    {% include components/icons/search.html class="w-5 h-5 fill-black" %}
+  </div>
+  {% if include.id %}<label for="{{ include.id }}" class="sr-only">Search</label>{% endif %}
+  <input
+    {% if include.id %}id="{{ include.id }}"{% endif %}
+    class="block w-full h-12 pr-4 pl-10 font-medium text-black rounded placeholder:font-semibold placeholder-black/70 bg-white{% if include.extra_class %} {{ include.extra_class }}{% endif %}"
+    {% if include.spellcheck %}spellcheck="{{ include.spellcheck }}"{% endif %}
+    {% if include.autocomplete %}autocomplete="{{ include.autocomplete }}"{% endif %}
+    {% if include.placeholder %}placeholder="{{ include.placeholder }}"{% endif %}
+  >
+</div>

_includes/scripts/listitem.js.html

@@ -0,0 +1,15 @@
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    handleHashChange(window.location.hash);
+    window.addEventListener('hashchange', event =>
+      handleHashChange(new URL(event.newURL).hash)
+    );
+  });
+
+  function handleHashChange(hash) {
+    document.querySelectorAll('.item[attr-selected=true]')
+      .forEach(item => item.setAttribute('attr-selected', 'false'));
+    document.querySelectorAll(`.item[href="${hash}"]`)
+      .forEach(item => item.setAttribute('attr-selected', 'true'));
+  }
+</script>

_includes/scripts/player.js.html

@@ -0,0 +1,12 @@
+<script>
+const colorThief = new ColorThief();
+
+document.addEventListener('DOMContentLoaded', function () {
+  const cover = document.getElementById('cover');
+
+  cover.addEventListener('load', function () {
+    const [r, g, b] = colorThief.getColor(this);
+    document.body.style.background = `linear-gradient(180deg, rgb(${r}, ${g}, ${b}), #111 50em)`;
+  });
+});
+</script>

_includes/scripts/user.js.html

@@ -0,0 +1,59 @@
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+  const chips = document.querySelectorAll('.chip');
+  const output = document.querySelector('main nav');
+  const input = document.getElementById('search-bar');
+  const items = [...document.querySelectorAll('.listitem')];
+
+  const list = items.map(item => ({
+    id: item.getAttribute('attr-id'),
+    name: item.getAttribute('attr-name'),
+    description: item.getAttribute('attr-description'),
+    element: item,
+  }));
+
+  const fuseOptions = {
+    keys: ['name', 'description'],
+    threshold: 0.3
+  };
+
+  function search(id) {
+    let elements = filterById(id);
+    if (input.value.length > 0) {
+      const fuse = new Fuse(elements.map(item => list.find(i => i.element === item)), fuseOptions);
+      elements = fuse.search(input.value).map(result => result.item.element);
+    }
+    render(elements);
+  }
+
+  function filterById(id) {
+    if (id === 'all') {
+      return items;
+    }
+    return list.filter(item => item.id === id)
+      .map(item => item.element);
+  }
+
+  function render(elements) {
+    output.innerHTML = '';
+    const fragment = document.createDocumentFragment();
+    elements.forEach(element => fragment.appendChild(element));
+    output.appendChild(fragment);
+  }
+
+  function currentId() {
+    const filter = document.querySelector('.chip[attr-selected=true]');
+    return filter?.getAttribute('attr-id') || 'all';
+  }
+
+  chips.forEach(chip => chip.addEventListener('click', function() {
+    search(this.getAttribute('attr-id'));
+  }));
+
+  input.addEventListener('input', function () {
+    search(currentId());
+  });
+
+  render(filterById(currentId()));
+});
+</script>