@rocket/js 0.0.0 → 0.1.0

package/src/components/Footer.js

@@ -0,0 +1,116 @@
+import { LitElement, html, css } from 'lit';
+
+/** @typedef {import('@rocket/js/types.js').FooterSection} FooterSection */
+
+export class Footer extends LitElement {
+  static properties = {
+    data: { type: Array },
+  };
+
+  constructor() {
+    super();
+    /** @type {FooterSection[]} */
+    this.data = [];
+  }
+
+  /** @param {FooterSection} section */
+  renderSection(section) {
+    return html`
+      <nav>
+        <h3>${section.title}</h3>
+        <ul>
+          ${section.links.map(link => html`<li><a href=${link.href}>${link.text}</a></li>`)}
+        </ul>
+      </nav>
+    `;
+  }
+
+  render() {
+    return html`
+      <footer class="main-footer">
+        <div class="footer-menu">${this.data?.map(section => this.renderSection(section))}</div>
+      </footer>
+    `;
+  }
+
+  static styles = [
+    css`
+      .main-footer {
+        margin-top: 112px;
+        border-top: 1px solid #edf1f6;
+        background-color: #f8fafc;
+        color: var(--primary-text-color);
+        padding: 30px 0 32px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .footer-menu {
+        display: flex;
+        justify-content: center;
+        gap: clamp(2.5rem, 7vw, 5.5rem);
+        flex-direction: row;
+        max-width: 1200px;
+        width: 100%;
+        padding: 0 20px;
+        text-align: center;
+        flex-wrap: wrap;
+      }
+
+      .footer-menu nav {
+        min-width: 150px;
+      }
+
+      .footer-menu nav h3 {
+        margin: 0 0 10px;
+        color: var(--primary-text-color-dark);
+        font-size: 0.9rem;
+        font-weight: 700;
+      }
+
+      .footer-menu ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      .footer-menu li {
+        margin-bottom: 4px;
+      }
+
+      .footer-menu a {
+        text-decoration: none;
+        color: var(--secondary-text-color, #4b5563);
+        padding: 5px 0;
+        display: block;
+        font-size: 0.84rem;
+        font-weight: 400;
+        line-height: 1.4;
+        transition: opacity 0.2s;
+      }
+
+      .footer-menu a:hover {
+        opacity: 0.7;
+      }
+
+      @media (max-width: 768px) {
+        .footer-menu {
+          flex-direction: column;
+          align-items: center;
+          padding: 0 10px;
+          gap: 1.5rem;
+          text-align: center;
+        }
+
+        nav {
+          width: 100%;
+        }
+
+        .footer-menu a {
+          padding: 7px 0;
+        }
+      }
+    `,
+  ];
+}

package/src/components/Header.js

@@ -0,0 +1,122 @@
+import { css, html, LitElement } from 'lit';
+
+export class Header extends LitElement {
+  render() {
+    return html`
+      <header>
+        <div id="content-area">
+          <slot name="logo"></slot>
+          <slot name="search"></slot>
+          <slot id="content"></slot>
+          <slot name="mobile-menu"></slot>
+          <slot name="navigation"></slot>
+          <slot name="social"></slot>
+        </div>
+      </header>
+    `;
+  }
+
+  static styles = [
+    css`
+      header {
+        padding: 20px 0;
+        position: sticky;
+        top: 0;
+        --shadow-color-dark: 220 3% 15%;
+        box-shadow:
+          0 3px 5px -2px hsl(var(--shadow-color-dark) / 4%),
+          0 7px 14px -5px hsl(var(--shadow-color-dark) / 6%);
+        background-color: hsl(0 0% 100% / 0.6);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        z-index: 999;
+      }
+
+      #content-area {
+        max-height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
+      }
+
+      slot[name='logo']::slotted(*) {
+        margin-right: auto;
+      }
+      slot[name='social']::slotted(*) {
+        margin-right: 15px;
+      }
+      slot[name='social']::slotted(*:last-child) {
+        margin-right: 0;
+      }
+
+      slot[name='social'],
+      slot[name='logo'],
+      slot[name='search'],
+      slot[name='navigation'] {
+        display: flex;
+      }
+      slot[name='navigation'] {
+        align-items: center;
+        margin-left: auto;
+        margin-right: 28px;
+      }
+      slot[name='mobile-menu'] {
+        display: none;
+      }
+
+      #content {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-right: auto;
+      }
+      #content::slotted(a) {
+        text-decoration: none;
+        color: var(--primary-text-color);
+        transition: color 0.3s ease-in-out;
+        font-weight: bold;
+      }
+      #content::slotted(a:hover),
+      #content::slotted(a[aria-current='page']) {
+        color: var(--primary-color);
+      }
+
+      @media (max-width: 768px) {
+        slot[name='social'] {
+          display: flex;
+        }
+        slot[name='social']::slotted(*:nth-of-type(n + 3)) {
+          display: none;
+        }
+        slot[name='social']::slotted(*:nth-of-type(n + 2)) {
+          margin-right: 0;
+        }
+        :host([hide-social-mobile]) slot[name='social'] {
+          display: none;
+        }
+        slot[name='navigation'] {
+          display: none;
+        }
+        slot[name='mobile-menu'] {
+          display: flex;
+          order: 1;
+        }
+      }
+
+      :host([hide-logo]) slot[name='logo'] {
+        visibility: hidden;
+      }
+      :host([no-background]) {
+        background-color: transparent;
+        box-shadow: none;
+      }
+      :host([not-sticky]) header {
+        position: static;
+      }
+    `,
+  ];
+}

package/src/components/RocketDrawer.js

@@ -0,0 +1,193 @@
+import { LitElement, html, css } from 'lit';
+
+export class RocketDrawer extends LitElement {
+  static properties = {
+    open: { type: Boolean, reflect: true },
+  };
+
+  constructor() {
+    super();
+    this.open = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._onDocClick = this._onDocClick.bind(this);
+    document.addEventListener('click', this._onDocClick, { capture: true });
+  }
+  disconnectedCallback() {
+    document.removeEventListener('click', this._onDocClick, { capture: true });
+    super.disconnectedCallback();
+  }
+
+  render() {
+    return html`
+      <slot name="invoker">
+        <button
+          class="burger-menu"
+          @click=${this.toggle}
+          aria-expanded=${this.open ? 'true' : 'false'}
+          aria-label=${this.open ? 'Close menu' : 'Open menu'}
+          title=${this.open ? 'Close menu' : 'Open menu'}
+        >
+          <span class="sr-only">${this.open ? 'Close Menu' : 'Show Menu'}</span>
+          ${this.open ? this.#iconClose() : this.#iconBurger()}
+        </button>
+      </slot>
+
+      <dialog ?open=${this.open} id="rd-dialog">
+        <div id="content">
+          <slot></slot>
+        </div>
+      </dialog>
+    `;
+  }
+
+  // Close when clicking anywhere outside the dialog or the invoker
+  /**
+   * @param {any} ev
+   */
+  _onDocClick(ev) {
+    if (!this.open) return;
+    const path = ev.composedPath();
+    const dlg = this.shadowRoot?.getElementById('rd-dialog');
+    const invoker = this.shadowRoot?.querySelector('slot[name="invoker"]');
+
+    const clickInsideDialog = path.includes(dlg);
+    const clickOnInvoker =
+      path.includes(invoker) ||
+      path.some((/** @type {{ assignedSlot: Element | null | undefined; }} */ n) => {
+        if (n?.assignedSlot && n.assignedSlot === invoker) return true;
+        return false;
+      });
+
+    if (!clickInsideDialog && !clickOnInvoker) this.close();
+  }
+
+  close() {
+    this.open = false;
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+
+  #iconBurger() {
+    return html`<svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="icon"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+      />
+    </svg>`;
+  }
+
+  #iconClose() {
+    return html`<svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="icon"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+    </svg>`;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      --rd-text-1: #2c3e50;
+      --rd-ease-3: cubic-bezier(0.25, 0, 0.3, 1);
+      --rd-target-width: 80%;
+    }
+    * {
+      box-sizing: border-box;
+    }
+
+    .burger-menu {
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      line-height: 0;
+      cursor: pointer;
+      color: var(--rd-text-1);
+      position: relative;
+      z-index: 101;
+    }
+    .icon {
+      width: 2.3rem;
+      display: block;
+      transition: transform 0.2s ease;
+    }
+    .burger-menu[aria-expanded='true'] .icon {
+      transform: rotate(90deg);
+    }
+
+    dialog {
+      display: block;
+      position: fixed;
+      top: 0;
+      right: 0;
+      left: auto;
+      height: 100vh;
+      width: 0;
+      margin: 0;
+      padding: 0;
+      border: none;
+      color: var(--rd-text-1);
+      box-shadow: -4px 0 16px rgba(0, 0, 0, 0.35);
+      z-index: 100;
+      overflow: hidden;
+      opacity: 0;
+      pointer-events: none;
+      transition:
+        width 0.35s var(--rd-ease-3),
+        opacity 0.35s var(--rd-ease-3);
+      will-change: width;
+    }
+    dialog[open] {
+      width: var(--rd-target-width);
+      opacity: 1;
+      pointer-events: auto;
+    }
+    dialog::backdrop {
+      background: rgba(0, 0, 0, 0.4);
+      transition: opacity 0.35s var(--rd-ease-3);
+      opacity: 0;
+    }
+    dialog[open]::backdrop {
+      opacity: 1;
+    }
+
+    #content {
+      height: 100%;
+      padding: 1rem;
+      max-width: var(--rd-target-width);
+      overflow-y: auto;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      dialog,
+      dialog::backdrop {
+        transition: none;
+      }
+    }
+    .sr-only {
+      position: absolute;
+      left: -10000px;
+      top: auto;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+    }
+  `;
+}

package/src/components/RocketSocialLink.js

@@ -0,0 +1,128 @@
+import { readFileSync } from 'fs';
+import { LitElement, html, css } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+/**
+ * @param {string} brandName
+ * @returns {import('lit/directive.js').DirectiveResult}
+ */
+function getIcon(brandName) {
+  const brand = brandName.toLowerCase();
+  const fileContent = readFileSync(new URL(`./assets/${brand}.svg`, import.meta.url), 'utf8');
+  return unsafeHTML(fileContent.toString());
+}
+
+export class RocketSocialLink extends LitElement {
+  static properties = {
+    url: { type: String },
+    name: { type: String },
+    label: { type: String },
+    ariaLabel: { type: String, attribute: 'aria-label' },
+    siteName: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.url = '';
+    this.name = '';
+    this.label = '';
+    this.ariaLabel = '';
+    this.siteName = '';
+  }
+
+  get accessibleLabel() {
+    if (this.ariaLabel) {
+      return this.ariaLabel;
+    }
+
+    const destination = this.siteName ? `${this.siteName} on ${this.name}` : this.name;
+    return this.label ? `${this.label}: ${destination}` : destination;
+  }
+
+  render() {
+    return html`
+      <a
+        class="social-link"
+        href="${this.url}"
+        aria-label="${this.accessibleLabel}"
+        rel="noopener noreferrer"
+        target="_blank"
+        slot="social"
+      >
+        <span class="icon" aria-hidden="true">${getIcon(this.name)}</span>
+        ${this.label ? html`<span class="label">${this.label}</span>` : html``}
+      </a>
+    `;
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: inline-block;
+        height: var(--rocket-social-link-height, 30px);
+        --rocket-social-link-color: var(--primary-text-color);
+        --rocket-social-link-hover-color: var(--primary-color);
+        --rocket-social-link-icon-size: 30px;
+        --rocket-social-link-label-font-size: 0.95rem;
+        --rocket-social-link-label-font-weight: 600;
+      }
+
+      .social-link {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--rocket-social-link-gap, 0.45rem);
+        height: 100%;
+        color: var(--rocket-social-link-color);
+        line-height: 1;
+        text-decoration: none;
+      }
+
+      .icon {
+        display: inline-flex;
+        flex: 0 0 auto;
+        width: var(--rocket-social-link-icon-size);
+        height: var(--rocket-social-link-icon-size);
+      }
+
+      .social-link svg {
+        color: var(--rocket-social-link-icon-color, var(--rocket-social-link-color));
+        display: block;
+        width: 100%;
+        height: 100%;
+        transition: color 0.2s ease-in-out;
+      }
+
+      .label {
+        color: var(--rocket-social-link-label-color, var(--rocket-social-link-color));
+        font-size: var(--rocket-social-link-label-font-size);
+        font-weight: var(--rocket-social-link-label-font-weight);
+        line-height: 1.2;
+        transition: color 0.2s ease-in-out;
+        white-space: nowrap;
+      }
+
+      .social-link:hover svg {
+        color: var(--rocket-social-link-hover-color);
+        transform: scale(1.04);
+        transition: transform 0.2s ease-in-out;
+      }
+
+      .social-link:hover .label {
+        color: var(--rocket-social-link-hover-color);
+      }
+
+      :host([dark-background]) svg {
+        color: #fff;
+      }
+
+      :host([dark-background]) .label {
+        color: #fff;
+      }
+
+      :host([dark-background]) .social-link:hover svg,
+      :host([dark-background]) .social-link:hover .label {
+        color: var(--primary-text-color);
+      }
+    `,
+  ];
+}

package/src/components/assets/discord.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <title>Discord</title>
+  <path
+    d="m3.58 21.196h14.259l-.681-2.205 1.629 1.398 1.493 1.338 2.72 2.273v-21.525c-.068-1.338-1.22-2.475-2.648-2.475l-16.767.003c-1.427 0-2.585 1.139-2.585 2.477v16.24c0 1.411 1.156 2.476 2.58 2.476zm10.548-15.513-.033.012.012-.012zm-7.631 1.269c1.833-1.334 3.532-1.27 3.532-1.27l.137.135c-2.243.535-3.26 1.537-3.26 1.537s.272-.133.747-.336c3.021-1.188 6.32-1.102 9.374.402 0 0-1.019-.937-3.124-1.537l.186-.183c.291.001 1.831.055 3.479 1.26 0 0 1.844 3.15 1.844 7.02-.061-.074-1.144 1.666-3.931 1.726 0 0-.472-.534-.808-1 1.63-.468 2.24-1.404 2.24-1.404-.535.337-1.023.537-1.419.737-.609.268-1.219.4-1.828.535-2.884.468-4.503-.315-6.033-.936l-.523-.266s.609.936 2.174 1.404c-.411.469-.818 1.002-.818 1.002-2.786-.066-3.802-1.806-3.802-1.806 0-3.876 1.833-7.02 1.833-7.02z"></path>
+  <path d="m14.308 12.771c.711 0 1.29-.6 1.29-1.34 0-.735-.576-1.335-1.29-1.335v.003c-.708 0-1.288.598-1.29 1.338 0 .734.579 1.334 1.29 1.334z"></path>
+  <path d="m9.69 12.771c.711 0 1.29-.6 1.29-1.34 0-.735-.575-1.335-1.286-1.335l-.004.003c-.711 0-1.29.598-1.29 1.338 0 .734.579 1.334 1.29 1.334z"></path>
+</svg>

package/src/components/assets/github.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 17 16" fill="none">
+  <title>GitHub</title>
+  <path fill="currentColor" fill-rule="evenodd" d="M8.18391.249268C3.82241.249268.253906 3.81777.253906 8.17927c0 3.46933 2.279874 6.44313 5.451874 7.53353.3965.0991.49563-.1983.49563-.3965v-1.3878c-2.18075.4956-2.67638-.9912-2.67638-.9912-.3965-.8922-.89212-1.1895-.89212-1.1895-.69388-.4957.09912-.4957.09912-.4957.793.0992 1.1895.793 1.1895.793.69388 1.2887 1.88338.8922 2.27988.6939.09912-.4956.29737-.8921.49562-1.0904-1.78425-.1982-3.5685-.8921-3.5685-3.96496 0-.89212.29738-1.586.793-2.08162-.09912-.19825-.3965-.99125.09913-2.08163 0 0 .69387-.19825 2.18075.793.59475-.19825 1.28862-.29737 1.9825-.29737.69387 0 1.38775.09912 1.98249.29737 1.4869-.99125 2.1808-.793 2.1808-.793.3965 1.09038.1982 1.88338.0991 2.08163.4956.59475.793 1.28862.793 2.08162 0 3.07286-1.8834 3.66766-3.66764 3.86586.29737.3965.59474.8921.59474 1.586v2.1808c0 .1982.0991.4956.5948.3965 3.172-1.0904 5.4518-4.0642 5.4518-7.53353-.0991-4.3615-3.6676-7.930002-8.02909-7.930002z" clip-rule="evenodd"></path>
+</svg>

package/src/components/assets/gitlab.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><title>GitLab</title><path fill="currentColor" d="M 38.011719 4 C 37.574219 3.996094 37.183594 4.273438 37.046875 4.691406 L 32.074219 20 L 17.925781 20 L 12.953125 4.691406 C 12.820313 4.289063 12.449219 4.011719 12.023438 4 C 11.597656 3.992188 11.214844 4.25 11.0625 4.648438 L 5.070313 20.640625 C 5.066406 20.640625 5.066406 20.644531 5.0625 20.648438 L 2.0625 28.648438 C 1.90625 29.070313 2.046875 29.542969 2.414063 29.808594 L 24.40625 45.800781 L 24.410156 45.808594 C 24.414063 45.808594 24.414063 45.808594 24.414063 45.8125 C 24.425781 45.820313 24.441406 45.828125 24.453125 45.835938 C 24.46875 45.84375 24.480469 45.855469 24.496094 45.863281 C 24.5 45.863281 24.5 45.867188 24.503906 45.867188 C 24.503906 45.867188 24.507813 45.871094 24.511719 45.871094 C 24.515625 45.875 24.519531 45.878906 24.527344 45.878906 C 24.53125 45.882813 24.539063 45.886719 24.542969 45.890625 C 24.5625 45.898438 24.585938 45.910156 24.609375 45.917969 C 24.609375 45.917969 24.609375 45.917969 24.609375 45.921875 C 24.632813 45.929688 24.65625 45.9375 24.675781 45.945313 C 24.679688 45.945313 24.679688 45.945313 24.683594 45.949219 C 24.699219 45.953125 24.714844 45.957031 24.734375 45.964844 C 24.742188 45.964844 24.75 45.96875 24.761719 45.96875 C 24.761719 45.972656 24.761719 45.972656 24.761719 45.96875 C 24.78125 45.976563 24.800781 45.980469 24.820313 45.984375 C 24.847656 45.988281 24.871094 45.992188 24.898438 45.996094 C 24.9375 45.996094 24.980469 46 25.019531 46 C 25.058594 45.996094 25.09375 45.996094 25.128906 45.988281 C 25.144531 45.988281 25.15625 45.988281 25.171875 45.984375 C 25.171875 45.984375 25.175781 45.984375 25.179688 45.984375 C 25.1875 45.980469 25.191406 45.980469 25.199219 45.980469 C 25.203125 45.980469 25.207031 45.976563 25.214844 45.976563 C 25.222656 45.972656 25.234375 45.972656 25.242188 45.96875 C 25.257813 45.964844 25.269531 45.960938 25.28125 45.957031 C 25.289063 45.957031 25.292969 45.957031 25.296875 45.953125 C 25.300781 45.953125 25.304688 45.953125 25.308594 45.953125 C 25.324219 45.945313 25.34375 45.9375 25.359375 45.933594 C 25.378906 45.925781 25.394531 45.917969 25.410156 45.910156 C 25.414063 45.910156 25.414063 45.910156 25.417969 45.90625 C 25.421875 45.90625 25.425781 45.90625 25.429688 45.902344 C 25.4375 45.898438 25.445313 45.894531 25.453125 45.890625 C 25.476563 45.878906 25.496094 45.867188 25.515625 45.855469 C 25.523438 45.851563 25.527344 45.847656 25.53125 45.84375 C 25.535156 45.84375 25.539063 45.839844 25.542969 45.839844 C 25.558594 45.828125 25.574219 45.820313 25.589844 45.808594 L 25.597656 45.796875 L 47.589844 29.808594 C 47.953125 29.542969 48.09375 29.070313 47.9375 28.648438 L 44.945313 20.675781 C 44.941406 20.667969 44.9375 20.65625 44.9375 20.648438 L 38.9375 4.648438 C 38.789063 4.261719 38.425781 4.003906 38.011719 4 Z M 11.933594 8.027344 L 15.824219 20 L 7.445313 20 Z M 38.066406 8.027344 L 42.558594 20 L 34.175781 20 Z M 8.066406 22 L 16.472656 22 L 22.328125 40.015625 Z M 18.578125 22 L 31.421875 22 L 25 41.765625 Z M 33.527344 22 L 41.933594 22 L 27.671875 40.015625 Z M 6.3125 23.007813 L 19.6875 39.902344 L 4.203125 28.640625 Z M 43.6875 23.007813 L 45.796875 28.640625 L 30.3125 39.902344 Z"/></svg>

package/src/components/assets/info.txt

@@ -0,0 +1 @@
+from https://github.com/edent/SuperTinyIcons

package/src/components/assets/license.svg

@@ -0,0 +1,3 @@
+<svg aria-hidden="true" fill="currentColor" height="16" viewBox="0 0 16 16" version="1.1" width="16">
+    <path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path>
+</svg>

package/src/components/assets/npm.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+aria-label="npm" role="img"
+viewBox="0 0 512 512"><path
+d="m0 0H512V512H0"
+fill="#fff"/><path fill="none" stroke="#cb3837" stroke-width="22" d="M234 311H447V199H65V311H178V210 333h78M133 232v68m112-68v45m45-67v90m67-68v79h45v-79"/></svg>

package/src/components/assets/slack.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123 123" fill="currentColor">
+  <title>Slack</title>
+  <path stroke="none" stroke-width="1" stroke-dasharray="none" stroke-linecap="butt" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" fill-rule="nonzero"
+    d="M26.4 78.2c0 7.1-5.8 12.9-12.9 12.9S.6 85.3.6 78.2c0-7.1 5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V78.2zm12.9-51.8c-7.1 0-12.9-5.8-12.9-12.9S38.7.6 45.8.6s12.9 5.8 12.9 12.9v12.9H45.8zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H13.5C6.4 58.7.6 52.9.6 45.8s5.8-12.9 12.9-12.9h32.3zM97.6 45.8c0-7.1 5.8-12.9 12.9-12.9 7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H97.6V45.8zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9-7.1 0-12.9-5.8-12.9-12.9V13.5C65.3 6.4 71.1.6 78.2.6c7.1 0 12.9 5.8 12.9 12.9v32.3zM78.2 97.6c7.1 0 12.9 5.8 12.9 12.9 0 7.1-5.8 12.9-12.9 12.9-7.1 0-12.9-5.8-12.9-12.9V97.6h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9 0-7.1 5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9 0 7.1-5.8 12.9-12.9 12.9H78.2z"/>
+</svg>

package/src/components/assets/telegram.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="currentColor">
+  <path d="M-.2.1h53.8v53.4H-.2z" fill="none"/>
+  <path d="M49.7 16.5c1.3 3.1 2 6.3 2 9.7s-.7 6.6-2 9.7c-1.3 3.1-3.1 5.7-5.3 8-2.2 2.2-4.9 4-8 5.3-3.1 1.3-6.3 2-9.7 2-3.4 0-6.6-.7-9.7-2s-5.7-3.1-8-5.3c-2.2-2.2-4-4.9-5.3-8-1.3-3.1-2-6.3-2-9.7s.7-6.6 2-9.7c1.3-3.1 3.1-5.7 5.3-8 2.2-2.2 4.9-4 8-5.3s6.3-2 9.7-2c3.4 0 6.6.7 9.7 2 3.1 1.3 5.7 3.1 8 5.3 2.2 2.3 3.9 5 5.3 8zM34.8 37.7l4.1-19.3c.2-.8.1-1.4-.3-1.8-.4-.4-.8-.4-1.4-.2l-24.1 9.3c-.5.2-.9.4-1.1.7-.2.3-.2.5-.1.7.1.2.4.4.9.5l6.2 1.9 14.3-9c.4-.3.7-.3.9-.2.1.1.1.2-.1.4L22.5 31.3l-.5 6.4c.4 0 .8-.2 1.3-.6l3-2.9 6.2 4.6c1.3.7 2 .3 2.3-1.1z"/>
+</svg>

package/src/components/assets/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 274 223"><title>Twitter</title><path d="M85.98 223c-31.675 0-61.158-9.285-85.98-25.199 4.388.518 8.853.783 13.38.783 26.278 0 50.463-8.967 69.659-24.01-24.544-.453-45.258-16.669-52.395-38.953a56.014 56.014 0 0 0 10.552 1.006c5.116 0 10.071-.685 14.778-1.967-25.66-5.152-44.993-27.822-44.993-54.998 0-.236 0-.471.004-.705a55.865 55.865 0 0 0 25.406 7.015c-15.05-10.058-24.953-27.226-24.953-46.685 0-10.279 2.766-19.914 7.594-28.198 27.664 33.934 68.993 56.264 115.609 58.603a56.31 56.31 0 0 1-1.453-12.782c0-30.975 25.114-56.088 56.091-56.088 16.132 0 30.709 6.812 40.941 17.713a112.328 112.328 0 0 0 35.617-13.611c-4.188 13.097-13.081 24.089-24.662 31.031a112.148 112.148 0 0 0 32.215-8.832 114 114 0 0 1-27.988 29.035c.108 2.405.162 4.824.162 7.256C245.564 137.533 189.148 223 85.98 223" fill="currentColor"/></svg>

package/src/components.js

@@ -0,0 +1,15 @@
+import { resolve } from '@rocket/js/resolve.js';
+import { createComponentHydration } from './component-hydration.js';
+
+/**
+ * @param {import('@rocket/js/types.js').Components} components
+ */
+export const parseComponents = createComponentHydration({
+  loadComponentModule(file) {
+    return import(file);
+  },
+  resolveBrowserImport(file) {
+    return resolve(file, import.meta);
+  },
+  hydrationLoaderSpecifier: '@rocket/js/hydration/hydrationLoader.js',
+});