docrb-html 0.2.0

data/assets/js/filtering.js

@@ -0,0 +1,66 @@
+// ((document) => {
+  // document.addEventListener('DOMContentLoaded', () => {
+    const hideInternalCheck = document.querySelector("#filter-hide-internal");
+    const hidePrivateCheck = document.querySelector("#filter-hide-private");
+    const hideAttrsCheck = document.querySelector("#filter-hide-attrs");
+    const hideInheritedCheck = document.querySelector("#filter-hide-inherited");
+    const showExtendedCheck = document.querySelector("#filter-show-extended");
+    const showIncludedCheck = document.querySelector("#filter-show-included");
+
+    const allChecks = [
+        hideInternalCheck,
+        hidePrivateCheck,
+        hideAttrsCheck,
+        hideInheritedCheck,
+        showExtendedCheck,
+        showIncludedCheck,
+    ].filter(el => el);
+
+    const determineVisibility = () => ({
+      '[data-visibility="internal"]': !hideInternalCheck.checked,
+      '[data-visibility="private"]': !hidePrivateCheck.checked,
+      '[data-type="attribute"]': !hideAttrsCheck.checked,
+      '[data-origin="inheritance"]': !hideInheritedCheck.checked,
+      '[data-origin="inclusion"]': showIncludedCheck.checked,
+      '[data-origin="extension"]': showExtendedCheck.checked,
+    });
+    const attrs = ["data-visibility", "data-type", "data-origin"];
+    const filters = Object.keys(determineVisibility());
+
+    const applyVisibility = () => {
+        const opts = determineVisibility()
+        document
+            .querySelectorAll(attrs.map(i => `[${i}]`).join(","))
+            .forEach(el => {
+                const show = attrs
+                    .map(k => el.attributes[k])
+                    .filter(att => att)
+                    .map(({name, value}) => opts[`[${name}="${value}"]`])
+                    .filter(i => i !== undefined)
+                    .reduce((a, b) => a && b, true);
+                el.style.display = show ? "" : "none";
+            });
+
+        document
+            .querySelectorAll("#attributes,#class-methods,#instance-methods")
+            .forEach(parent => {
+                const anyVisible = Array
+                    .from(parent.querySelectorAll("[id]"))
+                    .some(el => el.style.display != "none");
+
+                parent.style.display = anyVisible ? "" : "none";
+                document
+                    .querySelectorAll(`a[href="#${parent.id}"]`)
+                    .forEach(el => {
+                        el.style.display = anyVisible ? "" : "none";
+                    })
+            })
+    };
+
+    allChecks.forEach(el => {
+        el.addEventListener('change', () => applyVisibility());
+    });
+
+    applyVisibility();
+//   });
+// })(document);

data/assets/links.scss

@@ -0,0 +1,16 @@
+a {
+    @include body($weight: 500);
+    color: #FFFFFF;
+    cursor: pointer;
+    text-decoration: none;
+
+    &.dotted {
+        border-bottom: white 1px dotted;
+        padding-bottom: 3px;
+    }
+
+    &.dashed {
+        border-bottom: white 1px dashed;
+        padding-bottom: 3px;
+    }
+}

data/assets/markdown.scss

@@ -0,0 +1,41 @@
+div.markdown-base {
+    @include body;
+    color: #fff;
+    background-color: #1C1C1E;
+    padding: 12px 24px;
+
+    h1 {
+        border-bottom: 1px solid #373e47;
+    padding-bottom: 8px;
+    }
+
+    h1, h2, h3, h4, h5 {
+        margin: 12px 0;
+    }
+
+    p code {
+        background-color: #242426;
+        font-size: 80%;
+        padding: 3px 4px;
+        border-radius: 3px;
+    }
+
+    p {
+        margin-bottom: 8px;
+        line-height: 22px;
+    }
+
+    p + h1, p + h2, p + h3, p + h4, p + h5 {
+      margin-top: 24px;
+    }
+
+    a {
+        color: #fff;
+        border-bottom: dashed 1px white;
+        text-decoration: none;
+    }
+
+    code, pre {
+        @include mono($size: 15);
+    }
+}

data/assets/method_argument.scss

@@ -0,0 +1,75 @@
+div.method-argument-base {
+    color: #FFAB42;
+    display: inline;
+    display: flex;
+
+    span { display: inline-block; }
+
+    &:not(:first-of-type) {
+        margin-left: 8px;
+    }
+
+    &:not(:last-of-type) {
+        &:after {
+            content: ',';
+            color: #A5ACBA;
+        }
+    }
+
+    .rest-arg {
+        color: #FF724C;
+        &.double {
+            &:after { content: "**" }
+        }
+        &.single {
+            &:after { content: "*" }
+        }
+        &.block  {
+            &:after { content: "&" }
+        }
+    }
+
+    @mixin base_arg { margin-left: 8px; }
+
+    .continuation {
+        @include base_arg;
+        margin: 0;
+        &.equal {
+            color: #FF724C;
+            margin: 0 0 0 8px;
+            &:after {
+              content: "=";
+            }
+        }
+        &.colon {
+            color: #A5ACBA;
+
+            &:after {
+              content: ':';
+            }
+
+            &.double {
+                &:after {
+                    content: '::';
+                }
+            }
+        }
+
+        + span {
+            margin-left: 8px;
+        }
+    }
+
+    .simple-argument {
+        &.symbol { color: #CF91C9; }
+        &.number { color: #FF724C; }
+        &.string {
+            color: #8CC98F;
+            :before, :after {
+                content: '"';
+                color: #39B6B5;
+            }
+        }
+        &.plain  { color: white; }
+    }
+}

data/assets/method_display.scss

@@ -0,0 +1,27 @@
+div.method-display-base {
+    @include container;
+    margin-top: 8px;
+    .container {
+        @include container;
+    }
+
+    .method-name {
+        @include mono;
+        color: #39B6B5;
+    }
+
+    .argument-container {
+        @include mono;
+        color: #39B6B5;
+        display: flex;
+
+        &.not-empty {
+            &:before { content: '(' }
+            &:after { content: ')' }
+        }
+    }
+
+    .label {
+        @include label;
+    }
+}

data/assets/method_list.scss

@@ -0,0 +1,51 @@
+div.method-list-base {
+    .method-definition {
+        margin-bottom: 23px;
+    }
+
+    .doc-block {
+        margin-top: 8px;
+    }
+
+    .source-block {
+        margin: 13px 0 22px 0;
+        position: relative;
+        display: block;
+
+        &[open] {
+            summary {
+                .expanded { display: block }
+                .collapsed { display: none }
+            }
+        }
+
+        summary {
+            display: inline-block;
+            list-style: none;
+            > span {
+                @include body($weight: 500);
+                border-bottom: white 1px dotted;
+                cursor: pointer;
+                color: #FFF;
+            }
+
+            .expanded { display: none }
+            .collapsed { display: block }
+        }
+
+        .markdown-base > .highlight {
+            margin-bottom: 0;
+        }
+
+        .from {
+            @include body;
+            font-size: 80%;
+            color: white;
+            margin-bottom: 30px;
+            a {
+              font-size: inherit;
+            }
+        }
+    }
+
+}

data/assets/project_header.scss

@@ -0,0 +1,55 @@
+div.project-header-base {
+    padding-left: 52px;
+    padding-right: 40px;
+    background-color: #101010;
+    min-height: 240px;
+    display: flex;
+    justify-content: space-between;
+
+    .project {
+        @include body;
+        color: white;
+
+        h1 {
+            font-size: 64px;
+            font-weight: 300;
+            margin: 64px 0 0;
+            padding: 0;
+        }
+
+        h3 {
+            font-size: 16px;
+            font-weight: 400;
+            margin: 8px 0 0;
+            padding: 0;
+        }
+    }
+
+    .right {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        color: white;
+        @include body;
+
+        .label {
+            display: inline-block;
+        }
+
+        .link-panel {
+            margin-top: 30px;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+
+            .link-row {
+                display: flex;
+                margin-bottom: 6px;
+
+                svg {
+                    margin-left: 8px;
+                }
+            }
+        }
+    }
+}

data/assets/reference.scss

@@ -0,0 +1,36 @@
+div.reference-base {
+    display: inline-flex;
+    cursor: pointer;
+    color: white;
+
+    .resolved {
+        border-color: white;
+        border-bottom: 1px dashed;
+
+        &.class { color: #FFAB42; border-color: #FFAB42; }
+        &.module { color: #579AD1; border-color: #579AD1; }
+    }
+
+    .unresolved {
+        border: 1px dotted #D8D8D8;
+        border-radius: 10px 3px 3px 10px;
+        display: inline-flex;
+        color: white;
+        justify-content: center;
+        align-content: center;
+        align-items: center;
+
+        .icon {
+            margin-left: 2px;
+            margin-right: 2px;
+        }
+
+        span {
+            @include mono($size: 15);
+        }
+    }
+
+    a {
+        @include mono($weight: 300, $size: 15);
+    }
+}

data/assets/shared.scss

@@ -0,0 +1,23 @@
+.section-container {
+    margin: 25px 0 0;
+
+    .horizontal-container {
+        display: flex;
+        column-gap: 50px;
+
+        .child-structure {
+            .heading {
+                @include body($size: 24);
+                color: #FFFFFF;
+                padding-bottom: 12px;
+            }
+
+            .link-column {
+                display: flex;
+                flex-direction: column;
+                row-gap: 8px;
+                padding-left: 12px;
+            }
+        }
+    }
+}

data/assets/style.scss

@@ -0,0 +1,43 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  min-height: 100vh;
+  font-size: 15px;
+  justify-content: center;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  text-rendering: geometricPrecision;
+  background-color: #1C1C1E;
+}
+
+@import "./fonts";
+@import "./container";
+@import "./shared";
+
+@import "./links";
+@import "./breadcrumb";
+@import './footer';
+@import './project_header';
+@import './tab_bar';
+@import './markdown';
+@import './component_list';
+@import './type_definition';
+@import './class_mod_name';
+@import './method_display';
+@import './typedef';
+@import './method_argument';
+@import './class_header';
+@import './checkbox';
+@import './doc_box';
+@import './documentation_block';
+@import './text_block';
+@import './reference';
+@import './symbol';
+@import './method_list';

data/assets/symbol.scss

@@ -0,0 +1,5 @@
+div.symbol-base {
+    display: inline;
+    @include mono;
+    color: #CF91C9;
+}

data/assets/tab_bar.scss

@@ -0,0 +1,22 @@
+div.tab-bar-base {
+  height: 57px;
+  background: #161617;
+  padding: 12px 12px 0;
+  display: flex;
+
+  a {
+    padding: 12px 27px;
+    color: #FFFFFF;
+    border-radius: 3px 3px 0 0;
+    @include body;
+    cursor: pointer;
+
+    &.selected {
+        background-color: #1C1C1E;
+    }
+
+    &:hover:not(.selected) {
+        background-color: #18181A;
+    }
+  }
+}

data/assets/text_block.scss

@@ -0,0 +1,23 @@
+div.text-block-base {
+    .html {
+        display: block;
+        &.inline {
+            display: inline;
+        }
+
+        margin-bottom: 12px;
+        &.no-margin {
+            margin-bottom: 0;
+        }
+
+        @include body;
+        color: #FFFFFF;
+        p code {
+            @include mono;
+            font-size: 95%;
+            padding: 3px 4px;
+            background-color: #29292B;
+            border-radius: 3px;
+        }
+    }
+}

data/assets/type_definition.scss

@@ -0,0 +1,3 @@
+div.type-definition-base {
+  @include container;
+}

data/assets/typedef.scss

@@ -0,0 +1,6 @@
+div.typedef-base {
+  @include mono($weight: 500);
+  color: #808080;
+  margin-right: 11px;
+  text-transform: capitalize;
+}

data/bin/console

@@ -0,0 +1,15 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require "bundler/setup"
+require "renderer"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start(__FILE__)

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/exe/docrb-html

@@ -0,0 +1,12 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require "bundler/setup"
+require "renderer"
+
+if ARGV.length != 2
+  puts "Usage: docrb-html INPUT OUTPUT"
+  exit 1
+end
+
+Renderer.new.render

data/lib/renderer/component/breadcrumb.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class Renderer
+  class Component
+    class Breadcrumb < Component
+      prop :project_name, :items
+
+      def prepare
+        @items ||= []
+        items.unshift({ name: "Components", parents: [] })
+      end
+    end
+  end
+end

data/lib/renderer/component/checkbox.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Renderer
+  class Component
+    class Checkbox < Component
+      prop :label, :checked
+    end
+  end
+end

data/lib/renderer/component/class_header.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class Renderer
+  class Component
+    class ClassHeader < Component
+      prop :type, :name, :definitions, :def_collection
+
+      def prepare
+        @definitions ||= []
+        @def_collection = @definitions.dup
+      end
+    end
+  end
+end

data/lib/renderer/component/class_mod_name.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Renderer
+  class Component
+    class ClassModName < Component
+      prop :href, :name
+    end
+  end
+end

data/lib/renderer/component/component_list.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Renderer
+  class Component
+    class ComponentList < Component
+      prop :list, :parents, :class_name
+
+      def prepare
+        @list ||= []
+        @parents ||= []
+        nil
+      end
+    end
+  end
+end

data/lib/renderer/component/doc_box.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+class Renderer
+  class Component
+    class DocBox < Component
+      prop :item, :meta, :defs, :has_class_docs, :has_class_details, :has_attrs,
+           :has_class_methods, :has_instance_methods, :page_components,
+           :defs, :sdefs, :attrs
+
+      def prepare
+        @item = defs.specialized_projection.find_path(@item)
+
+        @has_class_docs = item[:doc] && !item[:doc].empty?
+        @defs = item.defs || []
+        @sdefs = item.sdefs || []
+        @attrs = item.attributes || []
+
+        @has_attrs = !@attrs.empty?
+        @has_class_methods = !@sdefs.empty?
+        @has_instance_methods = !@defs.empty?
+        @has_class_details =
+          !item[:inherits].nil? \
+          || !item.fetch(:extends, []).empty? \
+          || !item.fetch(:includes, []).empty? \
+          || !item.fetch(:modules, []).empty? \
+          || !item.fetch(:classes, []).empty?
+
+        @page_components = {
+          "class-documentation" => { enabled: has_class_docs, name: "Class Documentation" },
+          "class-details" => { enabled: has_class_details, name: "Inheritance" },
+          "attributes" => { enabled: has_attrs, name: "Attributes" },
+          "class-methods" => { enabled: has_class_methods, name: "Class Methods" },
+          "instance-methods" => { enabled: has_instance_methods, name: "Instance Methods" }
+        }
+      end
+    end
+  end
+end

data/lib/renderer/component/documentation_block.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Renderer
+  class Component
+    class DocumentationBlock < Component
+      prop :doc, :class_name
+    end
+  end
+end

data/lib/renderer/component/footer.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Renderer
+  class Component
+    class Footer < Component
+      prop :updated_at, :version
+    end
+  end
+end

data/lib/renderer/component/markdown.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Renderer
+  class Component
+    class Markdown < Component
+      prop :source
+    end
+  end
+end