head 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 11835ad46d870dcdc415a869c67328331f67eff34b8d1e704c2df9b184f48e30
+  data.tar.gz: f913154fbd0cb1b807fec777b50a736b25352232d88d67ea60d2ecc9abc489e2
+SHA512:
+  metadata.gz: a79743be804f0101a40d6696fd4266641ac1741bd7451d2e5558ff6b6b90160c6461bb40124b4c8938a903e0101193ff383c7099a7df01c3ba8fa56df961fc92
+  data.tar.gz: 4ec8047baec015c2a05d96914ce983f81e2c4e3c4316980b86d4226a00948d8816039512f4a9a6a8a3a61a5360dbf0f6f266d8b6b734933a29fce3eee7df22cb

data/CHANGELOG.md

@@ -0,0 +1,5 @@
+## [Unreleased]
+
+## [0.0.1] - 2025-10-02
+
+- Initial release

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) halo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,37 @@
+# Head
+
+Opinionated ViewComponents for building forms.
+
+## Usage
+
+```ruby
+# In Rails view
+```
+
+## Installation
+
+Install the gem and add to the application's Gemfile by executing:
+
+    bundle add head
+
+If bundler is not being used to manage dependencies, install the gem by executing:
+
+    gem install head
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `bin/ci` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+## Testing
+
+Run one test individually with:
+
+    bundle exec ruby -I test test/lib/wrappers/test_required.rb
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/halo/head.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/fonts/icomoon.json

@@ -0,0 +1,228 @@
+{
+  "metadata": {
+    "name": "headicons",
+    "lastOpened": 0,
+    "created": 1759221184557
+  },
+  "iconSets": [
+    {
+      "selection": [
+        {
+          "order": 9,
+          "id": 7,
+          "name": "gear",
+          "prevSize": 32,
+          "code": 59654,
+          "tempChar": ""
+        },
+        {
+          "order": 8,
+          "id": 6,
+          "name": "question-mark",
+          "prevSize": 32,
+          "code": 59648,
+          "tempChar": ""
+        },
+        {
+          "order": 7,
+          "id": 5,
+          "name": "bell-ringing",
+          "prevSize": 32,
+          "code": 59649,
+          "tempChar": ""
+        },
+        {
+          "order": 6,
+          "id": 4,
+          "name": "bell",
+          "prevSize": 32,
+          "code": 59650,
+          "tempChar": ""
+        },
+        {
+          "order": 5,
+          "id": 3,
+          "name": "magnifier",
+          "prevSize": 32,
+          "code": 59651,
+          "tempChar": ""
+        },
+        {
+          "order": 4,
+          "id": 2,
+          "name": "bars-thin",
+          "prevSize": 32,
+          "code": 59652,
+          "tempChar": ""
+        },
+        {
+          "order": 3,
+          "id": 1,
+          "name": "bars-bold",
+          "prevSize": 32,
+          "code": 59653,
+          "tempChar": ""
+        }
+      ],
+      "id": 0,
+      "metadata": {
+        "name": "Untitled Set",
+        "importSize": {
+          "width": 24,
+          "height": 24
+        }
+      },
+      "height": 1024,
+      "prevSize": 32,
+      "icons": [
+        {
+          "id": 7,
+          "paths": [
+            "M1024 580.949v-137.899c-70.443-25.045-114.944-32.085-137.344-86.144v-0.043c-22.485-54.229 4.267-91.051 36.139-158.165l-97.493-97.493c-66.603 31.659-103.808 58.667-158.165 36.139h-0.043c-54.144-22.443-61.227-67.243-86.144-137.344h-137.899c-24.832 69.76-31.957 114.859-86.144 137.344h-0.043c-54.229 22.528-90.965-4.181-158.165-36.139l-97.493 97.493c31.787 66.901 58.667 103.851 36.139 158.165-22.485 54.229-67.584 61.355-137.344 86.187v137.899c69.632 24.747 114.859 31.957 137.344 86.144 22.613 54.699-4.864 92.416-36.139 158.165l97.493 97.536c66.645-31.701 103.851-58.667 158.165-36.139h0.043c54.187 22.443 61.269 67.371 86.144 137.344h137.899c24.832-69.803 32-114.773 86.485-137.472h0.043c53.845-22.357 90.453 4.309 157.781 36.309l97.493-97.536c-31.744-66.688-58.667-103.808-36.181-158.123 22.485-54.229 67.755-61.44 137.429-86.229zM512 682.667c-94.251 0-170.667-76.416-170.667-170.667s76.416-170.667 170.667-170.667 170.667 76.416 170.667 170.667-76.416 170.667-170.667 170.667z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 0,
+          "tags": [
+            "gear"
+          ]
+        },
+        {
+          "id": 6,
+          "paths": [
+            "M622.976 917.333c0 58.88-47.616 106.667-106.624 106.667-58.795 0-106.624-47.787-106.624-106.667s47.829-106.667 106.624-106.667c59.008 0 106.624 47.744 106.624 106.667zM519.723 0c-171.904 0-301.227 114.901-301.227 341.333h168.747c0-98.304 38.656-178.731 129.024-178.731 53.205 0 109.653 35.328 114.517 102.869 5.248 71.083-32.725 107.136-80.725 152.832-124.757 118.613-120.149 172.757-120.149 307.029h168.235c0-61.952-6.699-107.008 78.421-198.784 56.789-61.269 127.403-137.472 128.896-253.568 2.005-169.088-117.376-272.981-285.739-272.981z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 0,
+          "tags": [
+            "question-mark"
+          ]
+        },
+        {
+          "id": 5,
+          "paths": [
+            "M645.845 168.32c-27.477-15.957-44.459-45.653-44.416-77.653v-0.128c0.043-50.005-40.021-90.539-89.429-90.539s-89.472 40.533-89.472 90.539v0.128c0.043 32.043-16.896 61.696-44.416 77.653-199.125 115.712-84.693 499.84-292.779 567.723v74.624h853.333v-74.624c-208.085-67.883-93.653-452.011-292.821-567.723zM512 42.667c23.552 0 42.667 19.157 42.667 42.667 0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667c0-23.509 19.115-42.667 42.667-42.667zM640 896c0 68.181-59.392 128-126.763 128s-129.237-59.819-129.237-128h256zM886.528 397.696c7.68 30.763 2.133 61.696-12.971 86.827l41.387 24.917c21.504-35.755 29.355-79.744 18.475-123.392-10.88-43.691-38.4-78.848-74.197-100.309l-24.832 41.387c25.131 15.147 44.501 39.851 52.139 70.571zM903.424 212.267l-25.472 42.453c43.648 26.283 77.312 69.248 90.667 122.624 13.269 53.376 3.627 107.093-22.613 150.784l42.411 25.515c22.869-38.059 35.627-82.176 35.627-128-0.043-84.48-43.093-166.784-120.619-213.376zM189.611 327.125l-24.832-41.387c-35.797 21.504-63.317 56.619-74.197 100.309-10.88 43.648-3.029 87.595 18.475 123.392l41.387-24.917c-15.104-25.088-20.651-56.064-12.971-86.827 7.637-30.72 27.008-55.424 52.139-70.571zM-0 425.6c0 45.824 12.757 89.941 35.627 128l42.411-25.515c-26.24-43.691-35.883-97.408-22.613-150.784 13.312-53.376 46.976-96.341 90.624-122.581l-25.472-42.453c-77.525 46.592-120.576 128.896-120.576 213.333z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 0,
+          "tags": [
+            "bell-ringing"
+          ]
+        },
+        {
+          "id": 4,
+          "paths": [
+            "M645.845 168.32c-27.477-15.957-44.459-45.653-44.416-77.653v-0.128c0.043-50.005-40.021-90.539-89.429-90.539s-89.472 40.533-89.472 90.539v0.128c0.043 32.043-16.896 61.696-44.416 77.653-199.125 115.712-84.693 499.84-292.779 567.723v74.624h853.333v-74.624c-208.085-67.883-93.653-452.011-292.821-567.723zM512 42.667c23.552 0 42.667 19.157 42.667 42.667 0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667c0-23.509 19.115-42.667 42.667-42.667zM640 896c0 68.181-59.392 128-126.763 128s-129.237-59.819-129.237-128h256z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 0,
+          "tags": [
+            "bell"
+          ]
+        },
+        {
+          "id": 3,
+          "paths": [
+            "M1015.851 923.563l-264.747-264.747c49.792-68.48 79.232-152.704 79.232-243.669 0-228.907-186.24-415.147-415.189-415.147-228.907 0-415.147 186.24-415.147 415.147 0 228.949 186.24 415.147 415.147 415.147 86.784 0 167.381-26.752 234.112-72.448l266.155 266.155 100.437-100.437zM121.771 415.147c0-161.792 131.627-293.419 293.419-293.419s293.419 131.627 293.419 293.419-131.627 293.419-293.419 293.419c-161.835 0-293.419-131.627-293.419-293.419z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 0,
+          "tags": [
+            "magnifier"
+          ]
+        },
+        {
+          "id": 2,
+          "paths": [
+            "M1024 757.333c0-21.205-17.195-38.4-38.4-38.4h-947.2c-21.205 0-38.4 17.195-38.4 38.4s17.195 38.4 38.4 38.4h947.2c21.205 0 38.4-17.195 38.4-38.4zM1024 501.333c0-21.205-17.195-38.4-38.4-38.4h-947.2c-21.205 0-38.4 17.195-38.4 38.4s17.195 38.4 38.4 38.4h947.2c21.205 0 38.4-17.195 38.4-38.4zM1024 245.333c0-21.205-17.195-38.4-38.4-38.4h-947.2c-21.205 0-38.4 17.195-38.4 38.4s17.195 38.4 38.4 38.4h947.2c21.205 0 38.4-17.195 38.4-38.4z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 0,
+          "tags": [
+            "bars-thin"
+          ]
+        },
+        {
+          "id": 1,
+          "paths": [
+            "M1024 256h-1024v-170.667h1024v170.667zM1024 426.667h-1024v170.667h1024v-170.667zM1024 768h-1024v170.667h1024v-170.667z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 0,
+          "tags": [
+            "bars-bold"
+          ]
+        }
+      ],
+      "colorThemes": [],
+      "invisible": false
+    }
+  ],
+  "uid": -1,
+  "preferences": {
+    "showGlyphs": true,
+    "showCodes": true,
+    "showQuickUse": true,
+    "showQuickUse2": true,
+    "showSVGs": true,
+    "fontPref": {
+      "prefix": "",
+      "metadata": {
+        "fontFamily": "headicons",
+        "majorVersion": 1,
+        "minorVersion": 0
+      },
+      "metrics": {
+        "emSize": 1024,
+        "baseline": 6.25,
+        "whitespace": 50
+      },
+      "embed": false,
+      "noie8": true,
+      "ie7": false,
+      "cssVars": true,
+      "cssVarsFormat": "scss",
+      "showSelector": true,
+      "selector": "i",
+      "showMetrics": true,
+      "showMetadata": true,
+      "showVersion": true
+    },
+    "imagePref": {
+      "prefix": "icon-",
+      "png": true,
+      "useClassSelector": true,
+      "color": 0,
+      "bgColor": 16777215
+    },
+    "historySize": 50,
+    "gridSize": 16
+  }
+}

data/app/assets/javascript/head/index.js

@@ -0,0 +1,2 @@
+import "head/knob"
+import "head/wing"

data/app/assets/javascript/head/knob.js

@@ -0,0 +1,51 @@
+document.addEventListener('DOMContentLoaded', function () {
+  document.querySelectorAll('.js-head-knob').forEach((knob) => {
+    const href = knob.getAttribute('href')
+
+    // If this knob doesn't open a sidebar, it is a standalone link.
+    if (href != '#') return
+
+    knob.addEventListener('click', function (event) {
+      event.preventDefault()
+      const knob = event.currentTarget
+
+      // The identifier of a knob always matches that of its wing.
+      const identifier = knob.dataset.identifier
+
+      // Check screen size
+      const mainMenuWing = document.querySelector(`.js-head-wing[data-identifier="mainmenu"]`)
+      const tight = getComputedStyle(mainMenuWing).getPropertyValue('position') == 'absolute'
+
+      // Handle current wing
+      const wing = document.querySelector(`.js-head-wing[data-identifier="${identifier}"]`)
+      const visible = getComputedStyle(wing).getPropertyValue('display') == 'block'
+      const group = knob.dataset.group
+
+      // Always close sidebars on the same side of the screen (left/right)
+      document.querySelectorAll(`.js-head-wing[data-group="${group}"]`).forEach((someWing) => {
+        someWing.classList.remove('is-active')
+        someWing.classList.add('is-force-deactive')
+      })
+
+      if (tight) {
+        // On small screens, only ever show one menu, so close all others.
+        document.querySelectorAll('.js-head-wing').forEach((someWing) => {
+          if (someWing != wing) {
+            someWing.classList.remove('is-active')
+            someWing.classList.add('is-force-deactive')
+          }
+        })
+      }
+
+      // Now toggle the desired one.
+      if (visible) {
+        wing.classList.remove('is-active')
+        wing.classList.add('is-force-deactive')
+      } else {
+        wing.classList.add('is-active')
+        wing.classList.remove('is-force-deactive')
+      }
+    })
+
+  })
+})

data/app/assets/javascript/head/wing.js

@@ -0,0 +1,18 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+  document.querySelectorAll('.js-head-wing__curtain').forEach(function (item) {
+    console.debug("Binding to Head Wing Curtain")
+
+    item.addEventListener('click', function(event) {
+      event.preventDefault()
+
+      const wing = event.currentTarget.parentNode
+      const identifier = wing.dataset.identifier
+
+      document.querySelectorAll(`.js-head-knob[data-identifier="${identifier}"]`).forEach(function (knob) {
+        knob.click()
+      })
+    })
+  })
+
+})

data/app/assets/stylesheets/head/components/knob.sass

@@ -0,0 +1,49 @@
+@use "iglu/font-size"
+@use "iglu/spacing"
+@use "head/settings/colors"
+@use "head/tools/link"
+
+.c-head-knob
+  display: grid
+  padding-left: 0.25em
+  padding-right: 0.25em
+  text-decoration: none
+  +spacing.padding-vertical--tiny
+  +font-size.gigantic
+
+  +link.states
+    color: colors.$steel-gray
+
+  &:hover
+    color: colors.$silver-gray
+
+  &:active
+    color: colors.$white
+
+  &--identicon
+    max-width: 1em
+    border-radius: 50%
+    aspect-ratio: 1
+    display: grid
+    place-items: center
+    overflow: hidden
+
+    svg
+      width: 100%
+      height: 100%
+      object-fit: contain
+
+  &--avatar
+    max-width: 1em
+    border-radius: 50%
+    aspect-ratio: 1
+    display: grid
+    place-items: center
+    overflow: hidden
+
+    img
+      width: 100%
+      height: 100%
+      object-fit: contain
+      clip-path: circle()
+      background-color: #fff

data/app/assets/stylesheets/head/components/theater.sass

@@ -0,0 +1,55 @@
+@use "iglu/spacing"
+@use "head/settings/colors"
+
+.c-head-theater
+  height: 100%
+  display: grid
+  grid-template-rows: auto 1fr
+
+  &__roof
+    background-color: #444
+    display: grid
+    align-items: center
+    grid-template-columns: auto 1fr auto
+    grid-template-areas: "knobs--left logo knobs--right"
+
+  @each $column in knobs--left logo knobs--right
+    &__#{$column}
+      grid-area: #{$column}
+
+  &__knobs
+    display: flex
+    white-space: nowrap
+
+    &--left
+      +spacing.margin-left--smaller
+
+    &--right
+      justify-content: flex-end
+      +spacing.margin-right--smaller
+
+  &__logo
+    display: flex
+    justify-content: center
+    position: relative
+    color: colors.$white
+    padding: 0.3rem
+    overflow: auto // Clip wide logos on small screens
+
+    &:active
+      top: 1px
+
+  &__stage
+    display: grid
+    // So we can track the width of the curtain
+    container-type: inline-size
+    grid-template-columns: auto 1fr auto
+    grid-template-areas: "wings--left content wings--right"
+
+  &__wings
+    &--right
+      position: relative
+
+  @each $column in wings--left content wings--right
+    &__#{$column}
+      grid-area: #{$column}

data/app/assets/stylesheets/head/components/wing.sass

@@ -0,0 +1,70 @@
+@use "iglu/responsive"
+@use "head/settings/colors"
+
+.c-head-wing
+  display: none
+  // 320px is the min screen width we support.
+  // Our sidebar cannot be bigger, and it needs to leave some space
+  // at the right so that a click/tap there can close the sidebar.
+  max-width: 265px
+  height: 100%
+  z-index: 1000
+  position: absolute
+  background: colors.$granite-gray
+  color: colors.$white
+
+  &--left
+    // On rather large screens, always show the main menu in left sidebar
+    +responsive.xlarge-container
+      position: static
+
+      &[data-identifier="mainmenu"]
+        // We "force" this item to be active without having the `is-active` class.
+        display: block
+        // So we need some way to deactivate it again using JS.
+        &.is-force-deactive
+          display: none
+
+  &--right
+    right: 0
+
+    // On very very large screens, show notifications sidebar on the right.
+    +responsive.xxlarge-container
+      position: static
+
+      &[data-identifier="notifications"]
+        display: block
+
+        &.is-force-deactive
+          display: none
+
+  &.is-active
+    display: block
+
+
+  &__curtain
+    position: absolute
+    top: 0
+    left: 100%
+    width: 100vw
+    height: 100%
+    z-index: 1001
+
+    &--right
+      right: 100%
+      left: inherit
+
+    +responsive.xlarge-container
+      display: none
+
+
+// +responsive.xxlarge
+//   .c-head-wing
+
+//     // We "force" this item to be active without having the `is-active` class.
+//     &[data-identifier="mainmenu"]
+//       display: block
+
+//       // So we need some way to deactivate it again using JS.
+//       &.is-force-deactive
+//         display: none

data/app/assets/stylesheets/head/generics/flip.sass

@@ -0,0 +1,3 @@
+@keyframes head-flip
+  0%, 80%
+    transform: rotateY(360deg)

data/app/assets/stylesheets/head/generics/fonts.sass

@@ -0,0 +1,6 @@
+@font-face
+  font-family: 'headicons'
+  font-weight: normal
+  font-style: normal
+  src: url('head/headicons.woff') format('woff')
+

data/app/assets/stylesheets/head/index.sass

@@ -0,0 +1,12 @@
+// ITCSS
+
+@use "./generics/flip"
+@use "./generics/fonts"
+
+@use "./components/theater"
+@use "./components/knob"
+@use "./components/wing"
+
+@use "./objects/headicon"
+
+@use "./utilities/smokescreen"

data/app/assets/stylesheets/head/objects/headicon.sass

@@ -0,0 +1,28 @@
+@use 'head/settings/icons'
+
+.o-headicon
+  font-family: "headicons"
+  speak: none
+  font-style: normal
+  font-weight: normal
+  font-variant: normal
+  text-transform: none
+
+  // &:before
+  //   vertical-align: middle
+
+.o-headicon--bars-bold
+  &:before
+    content: icons.$bars-bold
+
+.o-headicon--magnifier
+  &:before
+    content: icons.$magnifier
+
+.o-headicon--bell
+  &:before
+    content: icons.$bell
+
+.o-headicon--gear
+  &:before
+    content: icons.$gear

data/app/assets/stylesheets/head/package.json

@@ -0,0 +1,5 @@
+{
+  "exports": {
+    "sass": "head/index.sass"
+  }
+}

data/app/assets/stylesheets/head/settings/_colors.sass

@@ -0,0 +1,14 @@
+@use "sass:color"
+
+$black: #222
+$white: #fff
+
+$paradise-pink: rgb(240, 30, 80)
+$neon-yellow: #ffd400
+$jade-green: rgb(0, 190, 130)
+
+$granite-gray: rgb(70, 70, 70)
+$steel-gray: color.adjust($granite-gray, $lightness: 25%)
+$silver-gray: color.adjust($granite-gray, $lightness: 50%)
+
+$transparent-gray: rgba(100, 100, 100, 0.5)

data/app/assets/stylesheets/head/settings/_icons.scss

@@ -0,0 +1,7 @@
+$gear: "\e906";
+$question-mark: "\e900";
+$bell-ringing: "\e901";
+$bell: "\e902";
+$magnifier: "\e903";
+$bars-thin: "\e904";
+$bars-bold: "\e905";

data/app/assets/stylesheets/head/tools/_cloud.sass

@@ -0,0 +1,17 @@
+=state
+  &.is-loading,
+  &.is-saved,
+  &.is-failed
+    background-position: right 0.29rem bottom 0.29rem
+    background-repeat: no-repeat
+    background-size: 22px 22px
+
+  &.is-loading
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"1024\" height=\"1024\" viewBox=\"0 0 1024 1024\"><path d=\"M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z\" style=\"fill: rgba(139, 139, 139, 0.243)\"></path></svg>")
+
+  &.is-saved
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"1024\" height=\"1024\" viewBox=\"0 0 1024 1024\"><path d=\"M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z\" style=\"fill: rgb(0, 163, 0)\"></path></svg>")
+
+  &.is-failed
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"1024\" height=\"1024\" viewBox=\"0 0 1024 1024\"><path d=\"M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z\" style=\"fill: rgb(185, 1, 1)\"></path></svg>")
+    background-color: red

data/app/assets/stylesheets/head/tools/_link.sass

@@ -0,0 +1,3 @@
+=states
+  &, &:hover, &:active, &:visited
+    @content

data/app/assets/stylesheets/head/tools/_mandatory.sass

@@ -0,0 +1,6 @@
+@use "head/settings/colors"
+
+=indicator
+  &
+    border-left-color: colors.$paradise-pink
+    border-left-width: 2px

data/app/assets/stylesheets/head/tools/_terminal.sass

@@ -0,0 +1,3 @@
+=font
+  &
+    font-family: Inconsolata, "Roboto Mono", "Source Code Pro", "SF Mono", Monaco, "Fira Mono", "Droid Sans Mono", monospace !important

data/app/assets/stylesheets/head/tools/_theme.sass

@@ -0,0 +1,3 @@
+=dark
+  @media (prefers-color-scheme: dark)
+    @content

data/app/assets/stylesheets/head/utilities/smokescreen.sass

@@ -0,0 +1,5 @@
+@use "head/settings/colors"
+
+.u-head-smokescreen
+  background-color: colors.$transparent-gray
+  backdrop-filter: blur(2px)

data/app/components/head/application_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Head
+  # A component that every other component inherits from in this gem.
+  # It adds convenience methods for initialization of a component.
+  class ApplicationComponent < ViewComponent::Base
+    extend Dry::Initializer
+
+    # By default, Dry::Initializer doesn't complain about invalid arguments.
+    # We want it to raise an error.
+    def initialize(...)
+      __check_for_unknown_options(...)
+      super
+    end
+
+    private
+
+    def __check_for_unknown_options(*args, **kwargs)
+      return if __defined_options.empty?
+
+      # Checking params
+      opts = args.drop(__defined_params.length).first || kwargs
+      raise ArgumentError, "Unexpected argument #{opts}" unless opts.is_a? Hash
+
+      # Checking options
+      unknown_options = opts.keys - __defined_options
+      message = "Key(s) #{unknown_options} not found in #{__defined_options} of #{self.class}"
+      raise KeyError, message if unknown_options.any?
+    end
+
+    def __defined_options
+      self.class.dry_initializer.options.map(&:source)
+    end
+
+    def __defined_params
+      self.class.dry_initializer.params.map(&:source)
+    end
+  end
+end

data/app/components/head/knob.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module Head
+  class Knob < ApplicationComponent
+    erb_template <<~ERB
+      <%= link_to(url, class: classes, data: { identifier: id, group: group }, **options.except(:url)) do %>
+        <% if icon %>
+          <i class="o-headicon <%= icon_class%><%=  %>"></i>
+        <% end %>
+
+        <%= content %>
+      <% end %>
+    ERB
+
+    option :preset, default: -> {}
+    option :right, default: -> { false }
+    option :id, as: :manual_id, default: -> { false }
+    option :icon, as: :manual_icon, default: -> {}
+    option :url, as: :manual_url, default: -> {}
+    option :options, default: -> { {} }
+
+    def id
+      manual_id || preset
+    end
+
+    def icon
+      return manual_icon if manual_icon
+      return :'bars-bold' if preset_mainmenu?
+      return :bell if preset_notifications?
+      return :gear if preset_settings?
+
+      :magnifier if preset_search?
+    end
+
+    def icon_class
+      "o-headicon--#{icon.to_sym.to_s.gsub('_', '-')}"
+    end
+
+    def url
+      manual_url || options[:url] || '#'
+    end
+
+    def classes
+      result = %w[c-head-knob js-head-knob]
+      result.push 'c-head-knob--identicon' if preset_identicon?
+      result.push 'c-head-knob--avatar' if preset_avatar?
+      result
+    end
+
+    def group
+      left? ? :left : :right
+    end
+
+    def left?
+      !right?
+    end
+
+    def right?
+      @right
+    end
+
+    def preset_mainmenu?
+      preset == :mainmenu
+    end
+
+    def preset_search?
+      preset == :search
+    end
+
+    def preset_identicon?
+      preset == :identicon
+    end
+
+    def preset_avatar?
+      preset == :avatar
+    end
+
+    def preset_notifications?
+      preset == :notifications
+    end
+
+    def preset_settings?
+      preset == :settings
+    end
+  end
+end

data/app/components/head/theater.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+module Head
+  class Theater < ApplicationComponent
+    erb_template <<~ERB
+      <div class="c-head-theater">
+        <div class="c-head-theater__roof">
+
+          <div class="c-head-theater__knobs c-head-theater__knobs--left">
+            <% Array(knobs).select(&:left?).each do |knob| %>
+              <%= knob %>
+            <% end %>
+          </div>
+
+          <div class="c-head-theater__logo">
+            <%= logo %>
+          </div>
+
+          <div class="c-head-theater__knobs c-head-theater__knobs--right">
+            <% Array(knobs).select(&:right).each do |knob| %>
+              <%= knob %>
+            <% end %>
+          </div>
+
+        </div>
+        <div class="c-head-theater__stage">
+
+          <div class="c-head-theater__wings c-head-theater__wings--left">
+          <%# fail wings.first.content.inspect %>
+            <% Array(wings).select(&:left?).each do |wing| %>
+              <%= wing %>
+            <% end %>
+          </div>
+
+          <div class="c-head-theater__content">
+            <%= body %>
+          </div>
+
+          <div class="c-head-theater__wings c-head-theater__wings--right">
+            <% Array(wings).select(&:right?).each do |wing| %>
+              <%= wing %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    ERB
+
+    def with_mainmenu(&)
+      with_knob(preset: :mainmenu)
+      with_wing(id: :mainmenu, &)
+    end
+
+    def with_notifications(&)
+      with_knob(preset: :notifications, right: true)
+      with_wing(id: :notifications, right: true, &)
+    end
+
+    def with_settings(&)
+      with_knob(preset: :settings, right: true)
+      with_wing(id: :settings, right: true, &)
+    end
+
+    def with_search(**options)
+      with_knob(preset: :search, options:)
+    end
+
+    def with_identicon(username:, &)
+      with_knob(preset: :identicon, right: true) do
+        ::Head::Identicon.new(username.to_s).to_svg
+      end
+      with_wing(id: :identicon, right: true, &)
+    end
+
+    def with_avatar(image:, &)
+      with_knob(preset: :avatar, right: true) do
+        image_tag(image)
+      end
+      with_wing(id: :avatar, right: true, &)
+    end
+
+    renders_many :knobs, ::Head::Knob
+    renders_many :wings, ::Head::Wing
+
+    renders_one :logo
+    renders_one :body
+  end
+end

data/app/components/head/wing.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Head
+  class Wing < ApplicationComponent
+    erb_template <<~ERB
+      <div class="<%= classes.join(' ') %>" data-identifier="<%= id %>" data-group="<%= group %>">
+        <%= content %>
+        <div class="c-head-wing__curtain c-head-wing__curtain--<%= group %> js-head-wing__curtain u-head-smokescreen">
+        </div>
+      </div>
+    ERB
+
+    option :id, as: :id, default: -> {}
+    option :right, default: -> { false }
+
+    def self.mainmenu
+      new(id: :mainmenu)
+    end
+
+
+    def classes
+      %W[c-head-wing c-head-wing--#{group} js-head-wing]
+    end
+
+    def group
+      left? ? :left : :right
+    end
+
+    def left?
+      !right?
+    end
+
+    def right?
+      @right
+    end
+  end
+end

data/config/importmap.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+pin 'head', to: 'head/index.js'
+
+pin 'head/knob', to: 'head/knob.js'
+pin 'head/wing', to: 'head/wing.js'

data/config/locales/head.en.yml

@@ -0,0 +1 @@
+en:

data/lib/head/css.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Head
+  # Simple helper to unify Strings and Arrays of CSS class names.
+  class Css
+    def self.call(*input)
+      Array(input).flatten.compact.join(' ')
+    end
+  end
+end

data/lib/head/engine.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require 'rails/engine'
+
+module Head
+  # :nodoc:
+  class Engine < ::Rails::Engine
+    isolate_namespace Head
+
+    config.autoload_paths << root.join('lib')
+
+    initializer 'head.importmap', before: 'importmap' do |app|
+      app.config.importmap.paths << Engine.root.join('config/importmap.rb')
+      # Watch JS changes in development
+      app.config.importmap.cache_sweepers << Engine.root.join('app/assets/javascripts')
+    end
+
+    config.to_prepare do
+      # Our Head components are subclasses of `ViewComponent::Base`.
+      # When `ViewComponent::Base` is subclassed, two things happen:
+      #
+      #   1. Rails routes are included into the component
+      #   2. The ViewComponent configuration is accessed
+      #
+      # So we can only require our components, once Rails has booted
+      # AND the view_component gem has been fully initialized (configured).
+      #
+      # That's right here and now.
+      require_relative '../../app/components/head/application_component'
+
+      # Components
+      require_relative '../../app/components/head/wing'
+      require_relative '../../app/components/head/knob'
+      require_relative '../../app/components/head/theater'
+    end
+  end
+end

data/lib/head/identicon.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+require 'digest/md5'
+
+module Head
+  class Identicon
+    DARK_COLORS = %w[#39FF14 #FF3131 #1F51FF #FFE700 #F000FF #7FFF00 #CCFF00 #FF5E00 #00FFFF].freeze
+    LIGHT_COLORS = [
+      'A799B7', # gray
+      'E384FF', # rose
+      'c300cE', # purple
+      'F8DE22', # yellow
+      '9EDDFF', # light blue
+      'FF004D', # red
+      'F72798', # pink
+      'FFAF00', # orange
+      '39FF14'  # neon grass green
+    ].freeze
+    GRID_SIZE = 5
+    HALF_GRID = (GRID_SIZE / 2.0).round
+    DENSITY = 0.5
+
+    def initialize(input, theme: :light)
+      @seed = Digest::MD5.hexdigest(input).to_i(16)
+      @random = Random.new(@seed)
+      colors = theme == :light ? LIGHT_COLORS : DARK_COLORS
+      @color = colors[@seed % (LIGHT_COLORS.size - 1)]
+    end
+
+    def to_svg
+      svg = +%(<svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg" fill="" shape-rendering="crispEdges">)
+      GRID_SIZE.times do |row|
+        HALF_GRID.times do |column|
+          add_pixel(column, row, svg) if @random.rand < DENSITY
+        end
+      end
+      svg << '</svg>'
+      svg.html_safe
+    end
+
+    private
+
+    def add_pixel(column, row, svg)
+      positions = [[column, row]]
+      mirrored_column = GRID_SIZE - 1 - column
+      positions << [mirrored_column, row] unless column == mirrored_column
+
+      positions.each do |current_column, current_row|
+        svg << %(<rect x="#{current_column}" y="#{current_row}" width="1" height="1" fill="##{@color}"></rect>)
+      end
+    end
+  end
+end

data/lib/head/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module Head
+  VERSION = '0.0.1'
+end

data/lib/head.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+require 'calls'
+require 'dry/initializer'
+require 'countries'
+require 'holidays'
+require 'importmap-rails'
+
+require 'head/version'
+require 'head/engine' if defined?(Rails::Engine)

metadata

@@ -0,0 +1,177 @@
+--- !ruby/object:Gem::Specification
+name: head
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- halo
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: actionview
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: calls
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: countries
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: dry-initializer
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: holidays
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: importmap-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: With sidebars that work well on all screen widths.
+email:
+- github@posteo.org
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- app/assets/fonts/head/headicons.woff
+- app/assets/fonts/icomoon.json
+- app/assets/javascript/head/index.js
+- app/assets/javascript/head/knob.js
+- app/assets/javascript/head/wing.js
+- app/assets/stylesheets/head/components/knob.sass
+- app/assets/stylesheets/head/components/theater.sass
+- app/assets/stylesheets/head/components/wing.sass
+- app/assets/stylesheets/head/generics/flip.sass
+- app/assets/stylesheets/head/generics/fonts.sass
+- app/assets/stylesheets/head/index.sass
+- app/assets/stylesheets/head/objects/headicon.sass
+- app/assets/stylesheets/head/package.json
+- app/assets/stylesheets/head/settings/_colors.sass
+- app/assets/stylesheets/head/settings/_icons.scss
+- app/assets/stylesheets/head/tools/_cloud.sass
+- app/assets/stylesheets/head/tools/_link.sass
+- app/assets/stylesheets/head/tools/_mandatory.sass
+- app/assets/stylesheets/head/tools/_terminal.sass
+- app/assets/stylesheets/head/tools/_theme.sass
+- app/assets/stylesheets/head/utilities/smokescreen.sass
+- app/components/head/application_component.rb
+- app/components/head/knob.rb
+- app/components/head/theater.rb
+- app/components/head/wing.rb
+- config/importmap.rb
+- config/locales/head.en.yml
+- lib/head.rb
+- lib/head/css.rb
+- lib/head/engine.rb
+- lib/head/identicon.rb
+- lib/head/version.rb
+homepage: https://github.com/halo/head
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/halo/head
+  source_code_uri: https://github.com/halo/head
+  changelog_uri: https://github.com/halo/halo/blob/main/CHANGELOG.md
+  rubygems_mfa_required: 'true'
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '3.4'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.7.2
+specification_version: 4
+summary: A simple, opinionated navigation menu ViewComponent
+test_files: []