lookbook 0.9.0 → 1.0.0.beta.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +90 -824
- data/app/assets/lookbook/css/lookbook.css +55 -0
- data/app/assets/lookbook/css/themes/blue.css +42 -0
- data/app/assets/lookbook/css/themes/indigo.css +42 -0
- data/app/assets/lookbook/css/themes/zinc.css +42 -0
- data/app/assets/lookbook/css/{tooltip_theme.css → tooltip.css} +14 -8
- data/app/assets/lookbook/js/app.js +64 -63
- data/app/assets/lookbook/js/components/clipboard.js +47 -0
- data/app/assets/lookbook/js/components/tooltip.js +30 -0
- data/app/assets/lookbook/js/config.js +7 -4
- data/app/assets/lookbook/js/helpers/build.js +22 -0
- data/app/assets/lookbook/js/helpers/dom.js +45 -0
- data/app/assets/lookbook/js/helpers/layout.js +21 -0
- data/app/assets/lookbook/js/helpers/request.js +16 -0
- data/app/assets/lookbook/js/helpers/string.js +11 -0
- data/app/assets/lookbook/js/lib/socket.js +4 -3
- data/app/assets/lookbook/js/lib/tippy.js +8 -0
- data/app/assets/lookbook/js/lookbook.js +61 -0
- data/app/assets/lookbook/js/plugins/logger.js +39 -0
- data/app/assets/lookbook/js/stores/filter.js +2 -2
- data/app/assets/lookbook/js/stores/inspector.js +23 -17
- data/app/assets/lookbook/js/stores/layout.js +101 -5
- data/app/assets/lookbook/js/stores/nav.js +17 -16
- data/app/assets/lookbook/js/stores/pages.js +4 -2
- data/app/assets/lookbook/js/stores/settings.js +7 -0
- data/app/assets/lookbook/js/stores/workbench.js +29 -0
- data/app/components/lookbook/button/component.html.erb +28 -0
- data/app/components/lookbook/button/component.js +55 -0
- data/app/components/lookbook/button/component.rb +39 -0
- data/app/components/lookbook/button_group/component.html.erb +3 -0
- data/app/components/lookbook/button_group/component.rb +18 -0
- data/app/components/lookbook/code/component.css +57 -0
- data/app/components/lookbook/code/component.html.erb +10 -0
- data/app/components/lookbook/code/component.js +3 -0
- data/app/components/lookbook/code/component.rb +56 -0
- data/app/components/lookbook/code/highlight_github_light.css +217 -0
- data/app/components/lookbook/component.rb +41 -0
- data/app/components/lookbook/copy_button/component.html.erb +11 -0
- data/app/components/lookbook/copy_button/component.js +16 -0
- data/app/components/lookbook/copy_button/component.rb +23 -0
- data/app/components/lookbook/dimensions_display/component.html.erb +11 -0
- data/app/components/lookbook/dimensions_display/component.js +37 -0
- data/app/components/lookbook/dimensions_display/component.rb +18 -0
- data/app/components/lookbook/embed/component.html.erb +50 -0
- data/app/components/lookbook/embed/component.js +39 -0
- data/app/components/lookbook/embed/component.rb +22 -0
- data/app/components/lookbook/filter/component.html.erb +17 -0
- data/app/components/lookbook/filter/component.js +21 -0
- data/app/components/lookbook/filter/component.rb +15 -0
- data/app/components/lookbook/header/component.html.erb +79 -0
- data/app/components/lookbook/header/component.rb +9 -0
- data/app/components/lookbook/icon/component.css +11 -0
- data/app/components/lookbook/icon/component.html.erb +5 -0
- data/app/components/lookbook/icon/component.js +5 -0
- data/app/components/lookbook/icon/component.rb +23 -0
- data/app/components/lookbook/nav/component.html.erb +33 -0
- data/app/components/lookbook/nav/component.js +52 -0
- data/app/components/lookbook/nav/component.rb +37 -0
- data/app/components/lookbook/nav/item/component.html.erb +23 -0
- data/app/components/lookbook/nav/item/component.js +66 -0
- data/app/components/lookbook/nav/item/component.rb +84 -0
- data/app/components/lookbook/page_tabs/component.html.erb +18 -0
- data/app/components/lookbook/page_tabs/component.rb +19 -0
- data/app/components/lookbook/params_editor/component.html.erb +3 -0
- data/app/components/lookbook/params_editor/component.js +12 -0
- data/app/components/lookbook/params_editor/component.rb +11 -0
- data/app/components/lookbook/params_editor/field/component.html.erb +50 -0
- data/app/components/lookbook/params_editor/field/component.js +36 -0
- data/app/components/lookbook/params_editor/field/component.rb +41 -0
- data/app/components/lookbook/prose/component.css +12 -0
- data/app/components/lookbook/prose/component.html.erb +3 -0
- data/app/components/lookbook/prose/component.rb +26 -0
- data/app/components/lookbook/split_layout/component.html.erb +13 -0
- data/app/components/lookbook/split_layout/component.js +151 -0
- data/app/components/lookbook/split_layout/component.rb +11 -0
- data/app/components/lookbook/tab_panels/component.html.erb +5 -0
- data/app/components/lookbook/tab_panels/component.js +25 -0
- data/app/components/lookbook/tab_panels/component.rb +20 -0
- data/app/components/lookbook/tab_panels/panel/component.html.erb +8 -0
- data/app/components/lookbook/tab_panels/panel/component.rb +9 -0
- data/app/components/lookbook/tabs/component.css +8 -0
- data/app/components/lookbook/tabs/component.html.erb +20 -0
- data/app/components/lookbook/tabs/component.js +115 -0
- data/app/components/lookbook/tabs/component.rb +28 -0
- data/app/components/lookbook/tabs/dropdown_tab/component.html.erb +20 -0
- data/app/components/lookbook/tabs/dropdown_tab/component.rb +17 -0
- data/app/components/lookbook/tabs/tab/component.html.erb +24 -0
- data/app/components/lookbook/tabs/tab/component.rb +17 -0
- data/app/components/lookbook/tag_component.rb +29 -0
- data/app/components/lookbook/toolbar/component.css +16 -0
- data/app/components/lookbook/toolbar/component.html.erb +5 -0
- data/app/components/lookbook/toolbar/component.rb +26 -0
- data/app/components/lookbook/viewport/component.css +11 -0
- data/app/components/lookbook/viewport/component.html.erb +57 -0
- data/app/{assets/lookbook/js/components/preview-window.js → components/lookbook/viewport/component.js} +57 -14
- data/app/components/lookbook/viewport/component.rb +21 -0
- data/app/controllers/lookbook/application_controller.rb +16 -5
- data/app/controllers/lookbook/pages_controller.rb +17 -8
- data/app/controllers/lookbook/previews_controller.rb +130 -89
- data/app/helpers/lookbook/application_helper.rb +6 -2
- data/app/helpers/lookbook/component_helper.rb +22 -10
- data/app/helpers/lookbook/output_helper.rb +8 -4
- data/app/helpers/lookbook/page_helper.rb +13 -21
- data/app/views/layouts/lookbook/application.html.erb +76 -28
- data/app/views/layouts/lookbook/inspector.html.erb +7 -0
- data/app/views/layouts/lookbook/page.html.erb +53 -0
- data/app/views/layouts/lookbook/shell.html.erb +64 -0
- data/app/views/layouts/lookbook/skeleton.html.erb +27 -10
- data/app/views/layouts/lookbook/standalone.html.erb +5 -0
- data/app/views/lookbook/404.html.erb +15 -0
- data/app/views/lookbook/error.html.erb +34 -34
- data/app/views/lookbook/index.html.erb +11 -6
- data/app/views/lookbook/pages/show.html.erb +37 -91
- data/app/views/{layouts/lookbook → lookbook}/preview.html.erb +6 -8
- data/app/views/lookbook/previews/panels/_content.html.erb +13 -0
- data/app/views/lookbook/previews/panels/_notes.html.erb +19 -25
- data/app/views/lookbook/previews/panels/_output.html.erb +7 -18
- data/app/views/lookbook/previews/panels/_params.html.erb +13 -15
- data/app/views/lookbook/previews/panels/_preview.html.erb +6 -52
- data/app/views/lookbook/previews/panels/_source.html.erb +6 -15
- data/app/views/lookbook/previews/show.html.erb +133 -24
- data/config/routes.rb +5 -5
- data/lib/lookbook/code_formatter.rb +37 -13
- data/lib/lookbook/collection.rb +19 -16
- data/lib/lookbook/config.rb +180 -0
- data/lib/lookbook/engine.rb +66 -59
- data/lib/lookbook/entity.rb +47 -0
- data/lib/lookbook/error.rb +1 -2
- data/lib/lookbook/features.rb +1 -1
- data/lib/lookbook/markdown.rb +3 -4
- data/lib/lookbook/page.rb +40 -34
- data/lib/lookbook/page_collection.rb +8 -0
- data/lib/lookbook/page_section.rb +31 -0
- data/lib/lookbook/params.rb +14 -3
- data/lib/lookbook/preview.rb +16 -7
- data/lib/lookbook/preview_collection.rb +8 -0
- data/lib/lookbook/preview_controller.rb +6 -2
- data/lib/lookbook/preview_example.rb +5 -6
- data/lib/lookbook/preview_group.rb +4 -9
- data/lib/lookbook/{code_inspector.rb → source_inspector.rb} +2 -2
- data/lib/lookbook/store.rb +36 -0
- data/lib/lookbook/theme.rb +29 -0
- data/lib/lookbook/utils.rb +10 -2
- data/lib/lookbook/version.rb +1 -1
- data/lib/lookbook.rb +6 -1
- data/lib/tasks/lookbook_tasks.rake +12 -0
- data/public/lookbook-assets/css/app.css +2340 -1
- data/public/lookbook-assets/css/app.css.map +11 -1
- data/public/lookbook-assets/css/lookbook.css +3069 -0
- data/public/lookbook-assets/css/lookbook.css.map +1 -0
- data/public/lookbook-assets/css/themes/blue.css +44 -0
- data/public/lookbook-assets/css/themes/blue.css.map +1 -0
- data/public/lookbook-assets/css/themes/indigo.css +44 -0
- data/public/lookbook-assets/css/themes/indigo.css.map +1 -0
- data/public/lookbook-assets/css/themes/zinc.css +44 -0
- data/public/lookbook-assets/css/themes/zinc.css.map +1 -0
- data/public/lookbook-assets/js/app.js +10861 -1
- data/public/lookbook-assets/js/app.js.map +2571 -1
- data/public/lookbook-assets/js/embed.js +895 -1
- data/public/lookbook-assets/js/embed.js.map +1 -1
- data/public/lookbook-assets/js/lookbook.js +13541 -0
- data/public/lookbook-assets/js/lookbook.js.map +1 -0
- metadata +133 -116
- data/app/assets/lookbook/css/app.css +0 -161
- data/app/assets/lookbook/css/code_theme.css +0 -214
- data/app/assets/lookbook/js/components/app.js +0 -55
- data/app/assets/lookbook/js/components/code.js +0 -5
- data/app/assets/lookbook/js/components/copy.js +0 -20
- data/app/assets/lookbook/js/components/embed.js +0 -89
- data/app/assets/lookbook/js/components/filter.js +0 -35
- data/app/assets/lookbook/js/components/inspector.js +0 -66
- data/app/assets/lookbook/js/components/nav-group.js +0 -47
- data/app/assets/lookbook/js/components/nav-item.js +0 -29
- data/app/assets/lookbook/js/components/nav.js +0 -28
- data/app/assets/lookbook/js/components/page-tabs.js +0 -9
- data/app/assets/lookbook/js/components/page.js +0 -25
- data/app/assets/lookbook/js/components/param.js +0 -34
- data/app/assets/lookbook/js/components/sidebar.js +0 -18
- data/app/assets/lookbook/js/components/sizes.js +0 -16
- data/app/assets/lookbook/js/components/splitter.js +0 -25
- data/app/assets/lookbook/js/components/tabs.js +0 -52
- data/app/assets/lookbook/js/lib/split.js +0 -15
- data/app/assets/lookbook/js/stores/sidebar.js +0 -26
- data/app/views/layouts/lookbook/basic.html.erb +0 -7
- data/app/views/lookbook/components/_branding.html.erb +0 -8
- data/app/views/lookbook/components/_code.html.erb +0 -17
- data/app/views/lookbook/components/_copy_button.html.erb +0 -11
- data/app/views/lookbook/components/_drawer.html.erb +0 -112
- data/app/views/lookbook/components/_embed.html.erb +0 -39
- data/app/views/lookbook/components/_errors.html.erb +0 -13
- data/app/views/lookbook/components/_filter.html.erb +0 -18
- data/app/views/lookbook/components/_header.html.erb +0 -6
- data/app/views/lookbook/components/_icon.html.erb +0 -5
- data/app/views/lookbook/components/_nav.html.erb +0 -16
- data/app/views/lookbook/components/_nav_collection.html.erb +0 -5
- data/app/views/lookbook/components/_nav_group.html.erb +0 -14
- data/app/views/lookbook/components/_nav_item.html.erb +0 -24
- data/app/views/lookbook/components/_nav_page.html.erb +0 -22
- data/app/views/lookbook/components/_nav_preview.html.erb +0 -13
- data/app/views/lookbook/components/_not_found.html.erb +0 -11
- data/app/views/lookbook/components/_param.html.erb +0 -21
- data/app/views/lookbook/components/_preview.html.erb +0 -77
- data/app/views/lookbook/components/_sidebar.html.erb +0 -69
- data/app/views/lookbook/pages/not_found.html.erb +0 -15
- data/app/views/lookbook/previews/error.html.erb +0 -1
- data/app/views/lookbook/previews/inputs/_select.html.erb +0 -7
- data/app/views/lookbook/previews/inputs/_text.html.erb +0 -8
- data/app/views/lookbook/previews/inputs/_textarea.html.erb +0 -8
- data/app/views/lookbook/previews/inputs/_toggle.html.erb +0 -13
- data/app/views/lookbook/previews/not_found.html.erb +0 -23
@@ -1,25 +1,19 @@
|
|
1
|
-
<% items = examples.
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
<
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
<% else %>
|
21
|
-
<em class='opacity-50'>No notes provided.</em>
|
22
|
-
<% end %>
|
23
|
-
</div>
|
24
|
-
<% end %>
|
25
|
-
</div>
|
1
|
+
<% items = examples.filter { |example| example.notes.present? } %>
|
2
|
+
<% if items.many? %>
|
3
|
+
<div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose h-full w-full">
|
4
|
+
<% items.each do |item| %>
|
5
|
+
<div class="px-4 py-6 relative">
|
6
|
+
<h6 class="italic font-mono mb-4 opacity-40">
|
7
|
+
# <%= item.label %>
|
8
|
+
</h6>
|
9
|
+
<%= render_component :prose, content: item.notes %>
|
10
|
+
</div>
|
11
|
+
<% end %>
|
12
|
+
</div>
|
13
|
+
<% else %>
|
14
|
+
<div class="p-4 bg-lookbook-prose w-full h-full">
|
15
|
+
<%= render_component :prose do %>
|
16
|
+
<%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
|
17
|
+
<% end %>
|
18
|
+
</div>
|
19
|
+
<% end %>
|
@@ -1,18 +1,7 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
<%
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
<%== beautify(examples.first[:html]) %>
|
9
|
-
<% end %>
|
10
|
-
<% end %>
|
11
|
-
<% if defined?(clipboard_id) %>
|
12
|
-
<template id="<%= clipboard_id %>">
|
13
|
-
<% examples.each do |example| -%>
|
14
|
-
<%== beautify(example[:html]) %>
|
15
|
-
<%- end %>
|
16
|
-
</template>
|
17
|
-
<% end %>
|
18
|
-
</div>
|
1
|
+
<%= render_component :code, line_numbers: true, full_height: true do -%>
|
2
|
+
<% if examples.many? -%>
|
3
|
+
<% examples.each do |example| -%><%== "<!-- #{example.label} -->\n#{beautify(example.output)}\n\n" -%><% end %>
|
4
|
+
<%- else -%>
|
5
|
+
<%== beautify(examples.first.output) -%>
|
6
|
+
<%- end %>
|
7
|
+
<% end %>
|
@@ -1,17 +1,15 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
<em class='opacity-50'>Params are not yet supported for grouped examples.</em>
|
5
|
-
</div>
|
6
|
-
<% elsif @example.params.none? %>
|
7
|
-
<div class="p-4 prose prose-sm">
|
1
|
+
<% if preview.params.none? %>
|
2
|
+
<div class="p-4 w-full h-full bg-lookbook-prose">
|
3
|
+
<%= render_component :prose do %>
|
8
4
|
<em class='opacity-50'>No params configured.</em>
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
5
|
+
<% end %>
|
6
|
+
</div>
|
7
|
+
<% else %>
|
8
|
+
<div class="py-3 h-full">
|
9
|
+
<%= render_component :params_editor do |editor| %>
|
10
|
+
<% preview.params.each do |param| %>
|
11
|
+
<% editor.field **param, value: params[param[:name]] %>
|
14
12
|
<% end %>
|
15
|
-
|
16
|
-
|
17
|
-
|
13
|
+
<% end %>
|
14
|
+
</div>
|
15
|
+
<% end %>
|
@@ -1,52 +1,6 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
<div class="grid bg-white relative grid-cols-[1fr_17px] grid-rows-[1fr_17px] -inset-px" style="width: calc(100% + 2px); height: calc(100% + 2px)">
|
8
|
-
|
9
|
-
<iframe seamless
|
10
|
-
class="h-full w-full border border-gray-300"
|
11
|
-
:class="{ 'pointer-events-none': $store.layout.reflowing }"
|
12
|
-
src="<%= lookbook_preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)) %>"
|
13
|
-
<% if config.preview_srcdoc %>srcdoc="<%== srcdoc %>"<% end %>
|
14
|
-
frameborder="0"
|
15
|
-
x-data="sizes"
|
16
|
-
x-effect="preview.width = width; preview.height = height;"
|
17
|
-
></iframe>
|
18
|
-
|
19
|
-
<div
|
20
|
-
class="resize-handle border-r border-t cursor-[col-resize]"
|
21
|
-
@pointerdown="onResizeWidthStart"
|
22
|
-
@dblclick="toggleFullWidth"
|
23
|
-
>
|
24
|
-
<svg class="h-4 w-4 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
25
|
-
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
26
|
-
</svg>
|
27
|
-
</div>
|
28
|
-
|
29
|
-
<div
|
30
|
-
class="resize-handle border-b border-l cursor-[col-resize]"
|
31
|
-
@pointerdown="onResizeHeightStart"
|
32
|
-
@dblclick="toggleFullHeight"
|
33
|
-
>
|
34
|
-
<svg class="h-4 w-4 pointer-events-none rotate-90" fill="currentColor" viewBox="0 0 24 24" >
|
35
|
-
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
36
|
-
</svg>
|
37
|
-
</div>
|
38
|
-
|
39
|
-
<div
|
40
|
-
class="resize-handle border-r border-b cursor-[nwse-resize]"
|
41
|
-
@pointerdown="onResizeStart"
|
42
|
-
@dblclick="toggleFullSize"
|
43
|
-
>
|
44
|
-
<svg class="h-3.5 w-3.5 pointer-events-none rotate-45 relative -top-px -left-px" fill="currentColor" viewBox="0 0 24 24" >
|
45
|
-
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
46
|
-
</svg>
|
47
|
-
</div>
|
48
|
-
|
49
|
-
</div>
|
50
|
-
|
51
|
-
</div>
|
52
|
-
</div>
|
1
|
+
<%= render_component :viewport,
|
2
|
+
src: lookbook_preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
|
3
|
+
alpine_data: "$store.inspector.main",
|
4
|
+
class: "-inset-px relative",
|
5
|
+
style: "width: calc(100% + 2px); height: calc(100% + 2px)"
|
6
|
+
%>
|
@@ -1,20 +1,11 @@
|
|
1
|
-
<div class="
|
1
|
+
<div class="h-full">
|
2
2
|
<% if examples.many? %>
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
<% end %>
|
3
|
+
<%= render_component :code, language: examples.first.source_lang[:name], line_numbers: true, full_height: true do -%>
|
4
|
+
<%- examples.each.with_index(1) do |example, i| -%>
|
5
|
+
<%== "#{sprintf example.source_lang[:comment], example.label}\n#{example.source}\n#{"\n" if i < examples.size}" %><% end %>
|
7
6
|
<% end %>
|
8
7
|
<% else %>
|
9
|
-
|
10
|
-
|
11
|
-
<% end %>
|
12
|
-
<% end %>
|
13
|
-
<% if defined?(clipboard_id) %>
|
14
|
-
<template id="<%= clipboard_id %>">
|
15
|
-
<% examples.each do |example| -%>
|
16
|
-
<%== example[:source] %>
|
17
|
-
<%- end %>
|
18
|
-
</template>
|
8
|
+
<% example = examples.first %>
|
9
|
+
<%= render_component :code, language: example.source_lang[:name], line_numbers: true, full_height: true do %><%== example.source %><% end %>
|
19
10
|
<% end %>
|
20
11
|
</div>
|
@@ -1,24 +1,133 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
class
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
1
|
+
<%= render_component :split_layout,
|
2
|
+
alpine_data: "$store.layout.inspector",
|
3
|
+
":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'" do |layout| %>
|
4
|
+
|
5
|
+
<%= layout.pane class: "flex flex-col h-full overflow-hidden",
|
6
|
+
x_effect: "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
|
7
|
+
|
8
|
+
<%= render_component :toolbar do |toolbar| %>
|
9
|
+
<% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
|
10
|
+
<%= render_component :tabs, alpine_data: "$store.inspector.main" do |tabs| %>
|
11
|
+
<%= @main_panels.each do |panel| %>
|
12
|
+
<% tabs.tab name: panel.name,
|
13
|
+
label: panel.label,
|
14
|
+
hotkey: panel.hotkey,
|
15
|
+
disabled: panel.disabled %>
|
16
|
+
<% end %>
|
17
|
+
<% end %>
|
18
|
+
<% end %>
|
19
|
+
|
20
|
+
<% toolbar.section align: :right, padded: true, class: "flex-none min-w-[140px]", ":class": "{invisible: $store.inspector.main.activeTab !== 'preview'}" do %>
|
21
|
+
<%= render_component :dimensions_display,
|
22
|
+
target: "[data-component=viewport] iframe",
|
23
|
+
class: "ml-auto opacity-30 hover:opacity-100" %>
|
24
|
+
<% end %>
|
25
|
+
|
26
|
+
<% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
|
27
|
+
<%= render_component :button_group do |group| %>
|
28
|
+
<% if Lookbook.pages.any? %>
|
29
|
+
<% group.button icon: :code,
|
30
|
+
tooltip: "Copy page embed code",
|
31
|
+
copy: true do %>
|
32
|
+
<%= embed <%= @preview.preview_class %>, :<%= @example.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %>
|
33
|
+
<% end %>
|
34
|
+
<% end %>
|
35
|
+
|
36
|
+
<% group.button icon: :refresh_cw,
|
37
|
+
tooltip: "Refresh preview",
|
38
|
+
"@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
|
39
|
+
|
40
|
+
<% group.button icon: :external_link,
|
41
|
+
href: lookbook_preview_path(@example.lookup_path),
|
42
|
+
tooltip: "Open preview in new window",
|
43
|
+
target: "_blank" %>
|
44
|
+
|
45
|
+
<% group.button icon: "vertical ? 'sidebar' : 'credit-card'",
|
46
|
+
tooltip: "Show drawer",
|
47
|
+
"@click": "$store.inspector.drawer.hidden = false",
|
48
|
+
class: "rotate-180",
|
49
|
+
x_show: "$store.inspector.drawer.hidden",
|
50
|
+
cloak: true %>
|
51
|
+
<% end %>
|
52
|
+
<% end %>
|
53
|
+
<% end %>
|
54
|
+
|
55
|
+
<div class="h-full relative overflow-auto">
|
56
|
+
<%= render_component :tab_panels, alpine_data: "$store.inspector.main" do |tabs| %>
|
57
|
+
<% @main_panels.each do |panel| %>
|
58
|
+
<% tabs.panel name: panel.name, class: panel.panel_classes do %>
|
59
|
+
<%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
|
60
|
+
<% end %>
|
61
|
+
<% end %>
|
62
|
+
<% end %>
|
63
|
+
</div>
|
64
|
+
<% end %>
|
65
|
+
|
66
|
+
<%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer",
|
67
|
+
x_show: "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
|
68
|
+
|
69
|
+
<%= render_component :toolbar do |toolbar| %>
|
70
|
+
<% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
|
71
|
+
<%= render_component :tabs, alpine_data: "$store.inspector.drawer" do |tabs| %>
|
72
|
+
<%= @drawer_panels.each do |panel| %>
|
73
|
+
<% tabs.tab name: panel.name,
|
74
|
+
label: panel.label,
|
75
|
+
hotkey: panel.hotkey,
|
76
|
+
disabled: panel.disabled %>
|
77
|
+
<% end %>
|
78
|
+
<% end %>
|
79
|
+
<% end %>
|
80
|
+
|
81
|
+
<% toolbar.section align: :right, class: "flex-none relative z-10" do %>
|
82
|
+
<%= render_component :button_group do |group| %>
|
83
|
+
<%= @drawer_panels.filter { |p| !p.disabled && p.copy }.each do |panel| %>
|
84
|
+
<% group.button icon: :copy,
|
85
|
+
tooltip: "Copy panel contents",
|
86
|
+
copy: !!panel.copy,
|
87
|
+
x_show: "$store.inspector.drawer.activeTab === '#{panel.name}'",
|
88
|
+
cloak: true do %>
|
89
|
+
<%== panel.copy ? panel.copy : "" %>
|
90
|
+
<% end %>
|
91
|
+
<% end %>
|
92
|
+
<% end %>
|
93
|
+
<% end %>
|
94
|
+
|
95
|
+
<% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
|
96
|
+
<%= render_component :button_group do |group| %>
|
97
|
+
|
98
|
+
<% group.button icon: :corner_up_right,
|
99
|
+
tooltip: "Move drawer to right",
|
100
|
+
"@click": "switchOrientation",
|
101
|
+
x_show: "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
|
102
|
+
cloak: true %>
|
103
|
+
|
104
|
+
<% group.button icon: :corner_up_right,
|
105
|
+
x_show: "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
|
106
|
+
disabled: true,
|
107
|
+
cloak: true %>
|
108
|
+
|
109
|
+
<% group.button icon: :corner_left_down,
|
110
|
+
tooltip: "Move drawer to bottom",
|
111
|
+
"@click": "switchOrientation",
|
112
|
+
x_show: "vertical",
|
113
|
+
cloak: true %>
|
114
|
+
|
115
|
+
<% group.button icon: :x_circle,
|
116
|
+
tooltip: "Hide drawer",
|
117
|
+
"@click": "$store.inspector.drawer.hidden = true",
|
118
|
+
cloak: true %>
|
119
|
+
<% end %>
|
120
|
+
<% end %>
|
121
|
+
<% end %>
|
122
|
+
|
123
|
+
<div class="h-full overflow-auto">
|
124
|
+
<%= render_component :tab_panels, alpine_data: "$store.inspector.drawer" do |tabs| %>
|
125
|
+
<% @drawer_panels.each do |panel| %>
|
126
|
+
<% tabs.panel name: panel.name do %>
|
127
|
+
<%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
|
128
|
+
<% end %>
|
129
|
+
<% end %>
|
130
|
+
<% end %>
|
131
|
+
</div>
|
132
|
+
<% end %>
|
133
|
+
<% end %>
|
data/config/routes.rb
CHANGED
@@ -5,11 +5,11 @@ Lookbook::Engine.routes.draw do
|
|
5
5
|
|
6
6
|
root to: "application#index", as: :lookbook_home
|
7
7
|
|
8
|
-
|
9
|
-
|
10
|
-
get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :lookbook_page
|
11
|
-
end
|
8
|
+
get "/#{Lookbook.config.page_route}", to: "pages#index", as: :lookbook_page_index
|
9
|
+
get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :lookbook_page
|
12
10
|
|
13
11
|
get "/preview/*path", to: "previews#preview", as: :lookbook_preview
|
14
|
-
get "/*path", to: "previews#show", as: :lookbook_inspect
|
12
|
+
get "/inspect/*path", to: "previews#show", as: :lookbook_inspect
|
13
|
+
|
14
|
+
get "/*path", to: "previews#show_legacy", as: :lookbook_inspect_legacy
|
15
15
|
end
|
@@ -1,19 +1,21 @@
|
|
1
1
|
require "rouge"
|
2
2
|
require "htmlbeautifier"
|
3
|
+
require 'htmlentities'
|
3
4
|
|
4
5
|
module Lookbook
|
5
6
|
module CodeFormatter
|
6
7
|
class << self
|
7
|
-
def highlight(source,
|
8
|
-
|
9
|
-
source
|
10
|
-
language
|
11
|
-
formatter = Formatter.new(opts)
|
8
|
+
def highlight(source, **opts)
|
9
|
+
coder = HTMLEntities.new
|
10
|
+
source = coder.decode source
|
11
|
+
language = opts[:language] || "ruby"
|
12
|
+
formatter = Formatter.new(**opts)
|
12
13
|
lexer = Rouge::Lexer.find(language.to_s) || Rouge::Lexer.find("plaintext")
|
13
14
|
formatter.format(lexer.lex(source)).html_safe
|
14
15
|
end
|
15
16
|
|
16
|
-
def beautify(source,
|
17
|
+
def beautify(source, **opts)
|
18
|
+
language = opts[:language] || "html"
|
17
19
|
source = source.strip
|
18
20
|
result = language.downcase == "html" ? HtmlBeautifier.beautify(source) : source
|
19
21
|
result.strip.html_safe
|
@@ -22,23 +24,45 @@ module Lookbook
|
|
22
24
|
end
|
23
25
|
|
24
26
|
class Formatter < Rouge::Formatters::HTML
|
25
|
-
def initialize(opts
|
27
|
+
def initialize(**opts)
|
26
28
|
@opts = opts
|
27
29
|
@highlight_lines = opts[:highlight_lines].to_a || []
|
28
|
-
@start_line = opts[:start_line] ||
|
30
|
+
@start_line = opts[:start_line] || 1
|
31
|
+
@language = opts[:language]
|
29
32
|
end
|
30
33
|
|
31
34
|
def stream(tokens, &block)
|
32
|
-
token_lines(tokens)
|
33
|
-
|
34
|
-
|
35
|
-
|
35
|
+
lines = token_lines(tokens)
|
36
|
+
|
37
|
+
yield "<div class='wrapper'>"
|
38
|
+
|
39
|
+
if @opts[:line_numbers]
|
40
|
+
yield "<div class='line-numbers'>"
|
41
|
+
lines.each.with_index do |line, i|
|
42
|
+
yield "<div class='line #{"highlighted" if highlighted?(i)}'><span class='line-number'>#{line_number(i)}</span></div>"
|
43
|
+
end
|
44
|
+
yield "</div>"
|
45
|
+
end
|
46
|
+
|
47
|
+
yield "<pre class='code highlight' data-lang='#{@language}'><code>"
|
48
|
+
lines.each.with_index do |line_tokens, i|
|
49
|
+
yield "<div class='line#{" highlighted" if highlighted?(i)}'>"
|
36
50
|
line_tokens.each do |token, value|
|
37
51
|
yield span(token, value)
|
38
52
|
end
|
39
|
-
yield "</span>"
|
40
53
|
yield "</div>"
|
41
54
|
end
|
55
|
+
yield "</code></pre>"
|
56
|
+
|
57
|
+
yield "</div>"
|
58
|
+
end
|
59
|
+
|
60
|
+
def highlighted?(i)
|
61
|
+
@highlight_lines.include?(i + 1)
|
62
|
+
end
|
63
|
+
|
64
|
+
def line_number(i)
|
65
|
+
@start_line + i
|
42
66
|
end
|
43
67
|
end
|
44
68
|
end
|
data/lib/lookbook/collection.rb
CHANGED
@@ -1,23 +1,24 @@
|
|
1
1
|
module Lookbook
|
2
|
-
class Collection
|
3
|
-
include Utils
|
2
|
+
class Collection < Entity
|
4
3
|
include Enumerable
|
5
4
|
|
6
|
-
attr_reader :path
|
7
5
|
delegate :size, :each, to: :items
|
8
6
|
|
9
7
|
def initialize(path = "", items = [])
|
8
|
+
@items = []
|
10
9
|
if path.is_a?(Array)
|
11
|
-
|
10
|
+
items = path
|
12
11
|
path = ""
|
13
|
-
else
|
14
|
-
@items = items
|
15
12
|
end
|
13
|
+
|
16
14
|
@path = path.delete_prefix("/").delete_suffix("/")
|
15
|
+
super(@path)
|
16
|
+
|
17
|
+
items.each { |item| add(item) }
|
17
18
|
end
|
18
19
|
|
19
20
|
def id
|
20
|
-
|
21
|
+
lookup_path.present? ? super : "root"
|
21
22
|
end
|
22
23
|
|
23
24
|
def name
|
@@ -28,26 +29,24 @@ module Lookbook
|
|
28
29
|
name&.titleize
|
29
30
|
end
|
30
31
|
|
31
|
-
def lookup_path
|
32
|
-
@lookup_path ||= to_lookup_path(@path)
|
33
|
-
end
|
34
|
-
|
35
32
|
def position
|
36
33
|
@position ||= parse_position_prefix(basename).first
|
37
34
|
end
|
38
35
|
|
39
|
-
def hierarchy_depth
|
40
|
-
@path ? @path.split("/").size : 0
|
41
|
-
end
|
42
|
-
|
43
36
|
def items
|
44
|
-
@items.sort_by { |item| [item.hierarchy_depth, item
|
37
|
+
@items.sort_by { |item| [item.hierarchy_depth, item&.position, item.label] }
|
45
38
|
end
|
46
39
|
|
47
40
|
def visible_items
|
48
41
|
reject { |i| i.hidden? }
|
49
42
|
end
|
50
43
|
|
44
|
+
def non_empty_items
|
45
|
+
items.filter do |item|
|
46
|
+
!item.is_a?(Lookbook::Collection) || item.items.any?
|
47
|
+
end
|
48
|
+
end
|
49
|
+
|
51
50
|
def add(item)
|
52
51
|
@ordered_entities = nil
|
53
52
|
@tree = nil
|
@@ -134,6 +133,10 @@ module Lookbook
|
|
134
133
|
@tree
|
135
134
|
end
|
136
135
|
|
136
|
+
def collapsible?
|
137
|
+
false
|
138
|
+
end
|
139
|
+
|
137
140
|
def type
|
138
141
|
:collection
|
139
142
|
end
|