lookbook 0.6.1 → 0.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (91) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +233 -5
  3. data/app/assets/lookbook/css/app.css +15 -3
  4. data/app/assets/lookbook/js/app.js +8 -0
  5. data/app/assets/lookbook/js/components/app.js +55 -0
  6. data/app/assets/lookbook/js/components/embed.js +89 -0
  7. data/app/assets/lookbook/js/components/filter.js +13 -2
  8. data/app/assets/lookbook/js/components/nav-group.js +3 -6
  9. data/app/assets/lookbook/js/components/nav-item.js +3 -1
  10. data/app/assets/lookbook/js/components/nav.js +8 -15
  11. data/app/assets/lookbook/js/components/page.js +19 -41
  12. data/app/assets/lookbook/js/components/sidebar.js +16 -1
  13. data/app/assets/lookbook/js/components/splitter.js +1 -1
  14. data/app/assets/lookbook/js/components/tabs.js +3 -1
  15. data/app/assets/lookbook/js/embed.js +1 -0
  16. data/app/assets/lookbook/js/lib/split.js +0 -6
  17. data/app/assets/lookbook/js/stores/layout.js +3 -0
  18. data/app/assets/lookbook/js/stores/pages.js +5 -0
  19. data/app/assets/lookbook/js/stores/sidebar.js +2 -1
  20. data/app/controllers/lookbook/application_controller.rb +28 -0
  21. data/app/controllers/lookbook/page_controller.rb +20 -0
  22. data/app/controllers/lookbook/pages_controller.rb +40 -0
  23. data/app/controllers/lookbook/{app_controller.rb → previews_controller.rb} +39 -67
  24. data/app/helpers/lookbook/application_helper.rb +8 -61
  25. data/app/helpers/lookbook/component_helper.rb +40 -0
  26. data/app/helpers/lookbook/output_helper.rb +15 -0
  27. data/app/helpers/lookbook/page_helper.rb +46 -0
  28. data/app/helpers/lookbook/preview_helper.rb +1 -1
  29. data/app/views/layouts/lookbook/application.html.erb +30 -0
  30. data/app/views/layouts/lookbook/basic.html.erb +7 -0
  31. data/app/views/layouts/lookbook/preview.html.erb +5 -1
  32. data/app/views/layouts/lookbook/skeleton.html.erb +28 -0
  33. data/app/views/lookbook/components/_branding.html.erb +8 -0
  34. data/app/views/lookbook/components/_code.html.erb +2 -2
  35. data/app/views/lookbook/components/_copy_button.html.erb +11 -0
  36. data/app/views/lookbook/components/_drawer.html.erb +4 -16
  37. data/app/views/lookbook/components/_embed.html.erb +39 -0
  38. data/app/views/lookbook/components/_filter.html.erb +8 -5
  39. data/app/views/lookbook/components/_header.html.erb +2 -4
  40. data/app/views/lookbook/components/_icon.html.erb +2 -2
  41. data/app/views/lookbook/components/_nav.html.erb +7 -8
  42. data/app/views/lookbook/components/_nav_group.html.erb +1 -1
  43. data/app/views/lookbook/components/_nav_item.html.erb +4 -3
  44. data/app/views/lookbook/components/_nav_page.html.erb +22 -0
  45. data/app/views/lookbook/components/_nav_preview.html.erb +1 -1
  46. data/app/views/lookbook/components/_not_found.html.erb +11 -0
  47. data/app/views/lookbook/components/_param.html.erb +1 -1
  48. data/app/views/lookbook/components/_preview.html.erb +16 -10
  49. data/app/views/lookbook/components/_sidebar.html.erb +55 -0
  50. data/app/views/lookbook/pages/not_found.html.erb +15 -0
  51. data/app/views/lookbook/pages/show.html.erb +71 -0
  52. data/app/views/lookbook/previews/error.html.erb +1 -0
  53. data/app/views/lookbook/{inputs → previews/inputs}/_select.html.erb +0 -0
  54. data/app/views/lookbook/{inputs → previews/inputs}/_text.html.erb +0 -0
  55. data/app/views/lookbook/{inputs → previews/inputs}/_textarea.html.erb +0 -0
  56. data/app/views/lookbook/{inputs → previews/inputs}/_toggle.html.erb +0 -0
  57. data/app/views/lookbook/{not_found.html.erb → previews/not_found.html.erb} +2 -2
  58. data/app/views/lookbook/{panels → previews/panels}/_notes.html.erb +2 -2
  59. data/app/views/lookbook/{panels → previews/panels}/_output.html.erb +0 -0
  60. data/app/views/lookbook/{panels → previews/panels}/_params.html.erb +0 -0
  61. data/app/views/lookbook/{panels → previews/panels}/_preview.html.erb +0 -0
  62. data/app/views/lookbook/{panels → previews/panels}/_source.html.erb +0 -0
  63. data/app/views/lookbook/{show.html.erb → previews/show.html.erb} +0 -0
  64. data/config/routes.rb +9 -4
  65. data/lib/lookbook/code_formatter.rb +22 -1
  66. data/lib/lookbook/code_inspector.rb +73 -0
  67. data/lib/lookbook/collection.rb +110 -8
  68. data/lib/lookbook/engine.rb +59 -32
  69. data/lib/lookbook/features.rb +1 -1
  70. data/lib/lookbook/markdown.rb +31 -0
  71. data/lib/lookbook/page.rb +146 -0
  72. data/lib/lookbook/page_collection.rb +11 -0
  73. data/lib/lookbook/parser.rb +2 -0
  74. data/lib/lookbook/preview.rb +52 -56
  75. data/lib/lookbook/preview_collection.rb +15 -0
  76. data/lib/lookbook/preview_example.rb +27 -29
  77. data/lib/lookbook/preview_group.rb +12 -6
  78. data/lib/lookbook/utils.rb +74 -0
  79. data/lib/lookbook/version.rb +1 -1
  80. data/lib/lookbook.rb +18 -1
  81. data/public/lookbook-assets/css/app.css +1 -1
  82. data/public/lookbook-assets/css/app.css.map +1 -1
  83. data/public/lookbook-assets/js/app.js +1 -1
  84. data/public/lookbook-assets/js/app.js.map +1 -1
  85. data/public/lookbook-assets/js/embed.js +2 -0
  86. data/public/lookbook-assets/js/embed.js.map +1 -0
  87. metadata +44 -18
  88. data/app/assets/lookbook/js/lib/utils.js +0 -3
  89. data/app/views/layouts/lookbook/app.html.erb +0 -60
  90. data/app/views/lookbook/error.html.erb +0 -1
  91. data/lib/lookbook/taggable.rb +0 -46
@@ -0,0 +1,7 @@
1
+ <%= content_for :body do %>
2
+ <div id="app" x-data="app" @popstate.window="update">
3
+ <%= yield %>
4
+ </div>
5
+ <% end %>
6
+
7
+ <%= render template: "layouts/lookbook/skeleton" %>
@@ -9,4 +9,8 @@
9
9
  <% end %>
10
10
  <% else %>
11
11
  <%= examples.first[:html] %>
12
- <% end %>
12
+ <% end %>
13
+
14
+ <% if params[:lookbook_embed] == "true" %>
15
+ <script src="/lookbook-assets/js/embed.js?v=<%= Lookbook.version %>" defer></script>
16
+ <% end %>
@@ -0,0 +1,28 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="h-screen">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
7
+
8
+ <link href="/lookbook-assets/css/app.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
9
+ <% if config.ui_favicon != false %>
10
+ <link rel="icon" href="<%= config.ui_favicon || "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👀</text></svg>" %>">
11
+ <% end %>
12
+
13
+ <% if Lookbook::Engine.websocket %>
14
+ <script>
15
+ window.SOCKET_PATH = "<%= Lookbook::Engine.websocket_mount_path %>";
16
+ </script>
17
+ <% end %>
18
+ <script src="/lookbook-assets/js/app.js?v=<%= Lookbook.version %>" defer></script>
19
+ <% if params[:lookbook_embed] %>
20
+ <script src="/lookbook-assets/js/embed.js?v=<%= Lookbook.version %>" defer></script>
21
+ <% end %>
22
+
23
+ <title><%= [@title, config.project_name || "Lookbook"].compact.join(" :: ") %></title>
24
+ </head>
25
+ <body class="text-gray-800 font-sans text-sm antialiased overflow-hidden">
26
+ <%= yield :body %>
27
+ </body>
28
+ </html>
@@ -0,0 +1,8 @@
1
+ <% if config.project_name %>
2
+ <a
3
+ href="<%= landing_path %>"
4
+ class="text-xs truncate uppercase font-black tracking-wide pr-2"
5
+ @click="setLocation">
6
+ <%= config.project_name %>
7
+ </a>
8
+ <% end %>
@@ -3,8 +3,8 @@ line_numbers ||= false
3
3
  language ||= "html"
4
4
  wrap ||= nil;
5
5
  %>
6
- <% code = capture do %><%= yield %><% end %>
7
- <div class="code <%= "numbered" if line_numbers %> <%= classes %>"
6
+ <% code ||= capture do %><%= yield %><% end %>
7
+ <div class="code not-prose <%= "numbered" if line_numbers %> <%= classes ||= "" %>"
8
8
  x-data="code"
9
9
  :class="{'wrapped': wrap}"
10
10
  <% if wrap.present? %>x-effect="wrap = <%= wrap %>"<% end %>
@@ -0,0 +1,11 @@
1
+ <%= tag.button disabled: disabled ||= false,
2
+ "x-data": "copy",
3
+ "x-tooltip.theme.lookbook": "done ? 'copied!' : '#{tooltip ||= "copy to clipboard"}'",
4
+ "@click": "save",
5
+ ":class": "{ '!text-green-600 hover:text-green-600': done, 'hover:text-indigo-500': !done}",
6
+ "x-cloak": true,
7
+ class: "text-gray-400 transition",
8
+ data: { target: target },
9
+ **(attrs ||= {}) do %>
10
+ <%= icon "${done ? 'check' : '#{icon ||= "clipboard"}'}", size: 4 %>
11
+ <% end %>
@@ -65,22 +65,10 @@
65
65
  class="flex items-center"
66
66
  :class="{'pointer-events-none opacity-30': <%= !props[:copy].present? %>}"
67
67
  x-show="isActiveDrawerPanel('<%= key %>')"
68
- x-cloak
69
- >
70
- <button
71
- data-target="<%= "inspector-panel-#{example.id}-#{key}-clipboard" %>"
72
- class="text-gray-400 transition"
73
- x-data="copy"
74
- x-tooltip.theme.lookbook="done ? 'copied!' : 'copy to clipboard'"
75
- @click="save"
76
- :class="{
77
- '!text-green-600 hover:text-green-600': done,
78
- 'hover:text-indigo-500': !done}"
79
- x-cloak
80
- <% unless props[:copy].present? %>disabled<% end %>
81
- >
82
- <%= icon "${done ? 'check' : 'clipboard'}", size: 4 %>
83
- </button>
68
+ x-cloak>
69
+ <%= component "copy-button",
70
+ target: "inspector-panel-#{example.id}-#{key}-clipboard",
71
+ disabled: !props[:copy].present? %>
84
72
  </div>
85
73
  <% end %>
86
74
  </div>
@@ -0,0 +1,39 @@
1
+ <div id="<%= id %>" x-data="embed" class="not-prose embed border border-gray-300 rounded-md overflow-hidden" @page:morphed.window="recaclulateIframeHeight">
2
+ <header class="px-3 py-2 flex items-center text-xs text-gray-400 bg-white border-b border-gray-300">
3
+ <div class="text-gray-500">
4
+ <%= example.preview.label %> (<%= example.label %>)
5
+ </div>
6
+ <div class="ml-auto flex items-center space-x-3">
7
+ <a href="<%= lookbook.show_path(example.path, params) %>" class="" x-tooltip.theme.lookbook="`View in Inspector`">
8
+ <%= icon "eye", size: 4, class: "hover:text-indigo-800" %>
9
+ </a>
10
+ <a
11
+ href="<%= lookbook.preview_path(example.path, params) %>"
12
+ target="_blank"
13
+ class="-top-px relative"
14
+ x-tooltip.theme.lookbook="`Open in new window`">
15
+ <%= icon "external-link", size: 4, class: "hover:text-indigo-800" %>
16
+ </a>
17
+ </div>
18
+ </header>
19
+ <div class="checked-bg overflow-hidden">
20
+ <div x-ref="resizer" class="grid bg-white relative grid-cols-[1fr_17px] w-full" :style="`max-width: ${maxWidth}; height: ${height ? `${height}px` : 'auto'}`">
21
+ <iframe seamless
22
+ id="<%= id %>-iframe"
23
+ x-ref="iframe"
24
+ src="<%= lookbook.preview_path(example.path, params.merge(lookbook_embed: true)) %>"
25
+ class="min-w-full h-full w-px"
26
+ :class="{ 'pointer-events-none': reflowing }"
27
+ @load="recaclulateIframeHeight">
28
+ </iframe>
29
+ <div
30
+ class="resize-handle border-r border-l cursor-[col-resize] relative -right-px"
31
+ @pointerdown="onResizeWidthStart"
32
+ @dblclick="toggleFullWidth">
33
+ <svg class="h-4 w-4 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
34
+ <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
35
+ </svg>
36
+ </div>
37
+ </div>
38
+ </div>
39
+ </div>
@@ -1,15 +1,18 @@
1
- <div x-data="filter" class="flex items-center w-full">
1
+ <div x-data="filter" class="bg-white rounded-md border border-gray-200 " :class="{'!border-gray-300': focussed}">
2
2
  <input
3
3
  type="text"
4
- class="text-sm px-4 h-10 w-full border-0 bg-transparent focus:outline-none outline-none focus:ring-0"
5
- placeholder="Filter previews&hellip;"
4
+ class="text-sm pl-3 pr-8 w-full border-0 bg-transparent focus:outline-none outline-none focus:ring-0 text-gray-500 placeholder:italic placeholder:text-gray-500"
5
+ placeholder="Filter by name&hellip;"
6
6
  x-ref="input"
7
7
  x-model="$store.filter.raw"
8
8
  x-effect="if (!$store.layout.desktop && $store.sidebar.open) focus()"
9
9
  @keyup.stop="checkEsc"
10
10
  @keyup.f.document="focus"
11
- >
12
- <button class="text-gray-400 hover:text-indigo-500 focus:ring-0 focus:outline-none absolute top-1/2 right-2 -translate-y-1/2" @click="clear">
11
+ @filter:clear.document="clear"
12
+ @filter:focus.document="focus"
13
+ @focus.stop="focussed = true"
14
+ @blur.stop="focussed = false">
15
+ <button class="text-gray-400 hover:text-indigo-500 focus:ring-0 focus:outline-none absolute top-1/2 right-5 -translate-y-1/2" @click="clear" :class="{hidden: !$store.filter.active}">
13
16
  <%= icon "x", size: 3, class: "hover:text-indigo-500" %>
14
17
  </button>
15
18
  </div>
@@ -1,8 +1,6 @@
1
1
  <header class="pl-4 w-full flex-none bg-white border-b border-gray-300 flex items-center h-10 select-none min-w-0">
2
- <button class="flex-none mr-6" x-show="!$store.layout.desktop" @click="$store.sidebar.toggle">
3
- <svg class="feather w-5 h-5 hover:text-indigo-500 transition">
4
- <use xlink:href="/lookbook-assets/feather-sprite.svg#menu" />
5
- </svg>
2
+ <button class="flex-none mr-6" x-show="!$store.sidebar.open" @click="$store.sidebar.toggle">
3
+ <%= icon "menu", size: 4, class: "text-gray-400 hover:text-indigo-500 transition" %>
6
4
  </button>
7
5
  <%= yield %>
8
6
  </header>
@@ -1,5 +1,5 @@
1
- <i class="transition block flex-none leading-none w-<%= size %> h-<%= size %> <%= classes %>">
1
+ <i class="transition block flex-none leading-none w-<%= size %> h-<%= size %> <%= classes ||= "" %>">
2
2
  <svg class="feather w-full h-full">
3
- <use :href="`/lookbook-assets/feather-sprite.svg#<%= name %>`" x-cloak />
3
+ <use :href="`/lookbook-assets/feather-sprite.svg#<%= name.to_s %>`" x-cloak />
4
4
  </svg>
5
5
  </i>
@@ -1,17 +1,16 @@
1
- <nav id="nav" x-data="nav" @popstate.window="setActive">
1
+ <nav id="nav" x-data="nav(<%= filterable %>)">
2
2
  <% if items.any? %>
3
- <ul x-ref="items">
4
- <% items.each do |node| %>
5
- <%= component "nav_#{node.type}", node: node %>
3
+ <ul x-ref="items" id="nav-<%= items.class.describe_as %>">
4
+ <% items.each do |item| %>
5
+ <%= component "nav_#{item.type}", node: item %>
6
6
  <% end %>
7
7
  </ul>
8
8
  <div class="p-4 text-center" x-show="empty" x-cloak>
9
- <em class="text-gray-400">No matching previews found.</em>
9
+ <em class="text-gray-400 italic">No matching <%= items.class.describe_as %> found.</em>
10
10
  </div>
11
11
  <% else %>
12
- <div class="p-4">
13
- <h4 class="text-gray-500 mb-1">No previews found.</h4>
14
- <p class="text-gray-400 text-xs">Have you set your <a class="underline" href="https://viewcomponent.org/api.html#preview_paths">preview paths</a> config correctly?</p>
12
+ <div class="p-4 text-center">
13
+ <h4 class="text-gray-400 italic">No <%= items.class.describe_as %> found.</h4>
15
14
  </div>
16
15
  <% end %>
17
16
  </nav>
@@ -1,4 +1,4 @@
1
- <li key="<%= node.id %>" class="<%= classes %>">
1
+ <li key="nav-group-<%= node.id %>-item" class="<%= classes %>">
2
2
  <div id="nav-group-<%= node.id %>" x-data="navGroup" :class="{hidden}" x-cloak>
3
3
  <div @click="toggle" class="nav-toggle py-[5px]" style="padding-left: calc((<%= node.hierarchy_depth - 1 %> * 12px) + 0.5rem);">
4
4
  <%= icon "${open ? 'chevron-down' : 'chevron-right'}", size: 3, class: "mr-1 text-gray-500" %>
@@ -1,9 +1,10 @@
1
1
  <%
2
- path = show_path item.path
2
+ path = show_path(item.lookup_path)
3
3
  display ||= :item
4
4
  label ||= item.label
5
+ item_icon = display == :node ? "layers" : "eye"
5
6
  %>
6
- <li key="<%= item.id %>">
7
+ <li key="nav-item-<%= item.id %>-item">
7
8
  <div id="nav-item-<%= item.id %>" x-data="navItem(<%= item.matchers.to_json %>)" :class="{hidden}" data-path="<%= path %>" x-cloak>
8
9
  <a href="<%= path %>"
9
10
  class="nav-link pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
@@ -13,7 +14,7 @@ label ||= item.label
13
14
  @click.stop.prevent="navigate"
14
15
  >
15
16
  <div class="relative w-3.5 h-3.5 mr-1.5 <%= "ml-[3px]" if display == :node %> " :class="active ? 'text-gray-900' : 'text-indigo-500'">
16
- <%= icon display == :node ? "layers" : "eye", size: 3.5, class: "group-hover:text-indigo-800" %>
17
+ <%= icon item_icon, size: 3.5, class: "group-hover:text-indigo-800" %>
17
18
  </div>
18
19
  <div class="truncate whitespace-nowrap select-none <%= "font-bold" if display == :node %>">
19
20
  <%= label %>
@@ -0,0 +1,22 @@
1
+ <%
2
+ path = page_path(node.lookup_path)
3
+ depth = node.hierarchy_depth + 1
4
+ %>
5
+ <li key="nav-page-<%= node.id %>-item">
6
+ <div id="nav-page-<%= node.id %>" x-data="navItem(<%= node.matchers.to_json %>)" :class="{hidden}" data-path="<%= path %>" x-cloak>
7
+ <a href="<%= path %>"
8
+ class="nav-link pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
9
+ style="padding-left: calc((<%= depth - 1 %> * 12px) + 0.5rem);"
10
+ x-ref="link"
11
+ :class="{'!bg-indigo-100':active}"
12
+ @click.stop.prevent="navigate"
13
+ >
14
+ <div class="relative w-3.5 h-3.5 mr-1.5 ml-[3px]" :class="active ? 'text-gray-900' : 'text-indigo-500'">
15
+ <%= icon "file", size: 3.5, class: "group-hover:text-indigo-800" %>
16
+ </div>
17
+ <div class="truncate whitespace-nowrap select-none">
18
+ <%= node.label %>
19
+ </div>
20
+ </a>
21
+ </div>
22
+ </li>
@@ -1,4 +1,4 @@
1
- <% examples = node.get_examples.reject(&:hidden?) %>
1
+ <% examples = node.examples.reject(&:hidden?) %>
2
2
  <% if examples.many? %>
3
3
  <%= component "nav_group", node: node, path: show_path(examples.first.path) do %>
4
4
  <% examples.each do |example| %>
@@ -0,0 +1,11 @@
1
+ <div class="bg-white flex flex-col items-center justify-center border-2 border-dashed border-gray-200 p-6 rounded-md not-prose">
2
+ <div class="px-4 text-center">
3
+ <%= icon "alert-triangle", size: 6, class: "text-red-300 mx-auto" %>
4
+ <div class="mt-2 text-gray-700 max-w-xs">
5
+ <h5 class="text-base"><%= title %></h5>
6
+ <p class="mt-1 text-gray-400 text-sm">
7
+ <%== text %>
8
+ </p>
9
+ </div>
10
+ </div>
11
+ </div>
@@ -12,7 +12,7 @@ value = params.key?(param[:name]) ? params[param[:name]] : param[:default]
12
12
  </label>
13
13
  </div>
14
14
  <div class="flex-grow">
15
- <%= render "lookbook/inputs/#{param[:input]}",
15
+ <%= render "lookbook/previews/inputs/#{param[:input]}",
16
16
  **param,
17
17
  value: value
18
18
  %>
@@ -31,28 +31,34 @@
31
31
  </div>
32
32
  <div class="flex items-center bg-white border-l border-gray-200 space-x-3 text-gray-400 divide-x divide-gray-300 px-3">
33
33
  <div class="flex items-center space-x-3">
34
+ <% if feature_enabled? :pages %>
35
+ <%= component "copy-button",
36
+ icon: :code,
37
+ target: "pages-embed-code",
38
+ tooltip: "Copy page embed code" %>
39
+ <div id="pages-embed-code" class="hidden">
40
+ &lt;%= embed <%= @preview.preview_class %>, :<%= @example.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
41
+ </div>
42
+ <% end %>
34
43
  <button
35
44
  x-tooltip.theme.lookbook="`Refresh preview`"
36
45
  @click.prevent.stop="refresh"
37
- data-hotkey="r"
38
- >
39
- <%= icon "refresh-cw", size: 4, class: "hover:text-indigo-800" %>
46
+ data-hotkey="r">
47
+ <%= icon "refresh-cw", size: 3.5, class: "hover:text-indigo-800" %>
40
48
  </button>
41
49
  <a
42
50
  href="<%= preview_path %>"
43
51
  target="_blank"
44
52
  x-tooltip.theme.lookbook="`Open in new window`"
45
- data-hotkey="w"
46
- >
47
- <%= icon "external-link", size: 4, class: "hover:text-indigo-800" %>
53
+ data-hotkey="w">
54
+ <%= icon "external-link", size: 4, class: "hover:text-indigo-800" %>
48
55
  </a>
49
56
  <button
50
57
  x-tooltip.theme.lookbook="`${drawerHidden ? 'show' : 'hide'} drawer`"
51
58
  @click="toggleDrawer"
52
- x-show="drawerHidden"
53
- data-hotkey="i"
54
- >
55
- <%= icon "${horizontal ? 'credit-card' : 'sidebar'}", size: 4, class: "hover:text-indigo-800 scale-[-1]" %>
59
+ x-show="drawerHidden"
60
+ data-hotkey="i">
61
+ <%= icon "${horizontal ? 'credit-card' : 'sidebar'}", size: 4, class: "hover:text-indigo-800 scale-[-1]" %>
56
62
  </button>
57
63
  </div>
58
64
 
@@ -0,0 +1,55 @@
1
+ <div
2
+ x-data="sidebar"
3
+ @page:morphed.window="setActiveNavItem"
4
+ class="h-full bg-gray-100 overflow-hidden flex flex-col"
5
+ x-show="$store.sidebar.open"
6
+ x-cloak>
7
+
8
+ <div class="bg-white h-10 border-b border-gray-300 flex flex-none items-center relative pl-4 pr-4">
9
+ <%= component "branding" %>
10
+ <button class="flex-none flex items-center ml-auto" @click="$store.sidebar.toggle">
11
+ <%= icon "menu", size: 4, class: "text-indigo-500 transition" %>
12
+ </button>
13
+ </div>
14
+
15
+ <% if feature_enabled?(:pages) && Lookbook.pages.any? %>
16
+ <div
17
+ class="grid overflow-hidden"
18
+ :style="`grid-template-rows: ${$store.sidebar.panelSplits[0] || 1}fr 1px ${$store.sidebar.panelSplits[1] || 1}fr; height: calc(100vh - 40px)`"
19
+ x-ref="sidebarPanels">
20
+ <div class="flex flex-col overflow-hidden">
21
+ <div class="flex items-center flex-none border-b border-gray-300 h-10 bg-white relative px-4">
22
+ <h2 class="whitespace-nowrap relative">Previews</h2>
23
+ </div>
24
+ <div x-ref="filter" class="px-2 py-2 relative" x-cloak>
25
+ <%= component "filter" %>
26
+ </div>
27
+ <div class="flex-grow pb-3 overflow-auto">
28
+ <%= component "nav", items: Lookbook.previews.as_tree, filterable: true %>
29
+ </div>
30
+ </div>
31
+ <div
32
+ x-data="splitter('horizontal', {minSize: 40})"
33
+ class="w-full gutter border-t border-gray-300 relative"
34
+ x-effect="setSplits(splits)">
35
+ <div class="h-[11px] w-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute left-0 right-0 -translate-y-1/2 cursor-[row-resize]"></div>
36
+ </div>
37
+ <div class="flex flex-col overflow-hidden">
38
+ <div class="flex items-center flex-none border-b border-gray-300 h-10 bg-white relative px-4">
39
+ <h2 class="whitespace-nowrap relative">Pages</h2>
40
+ </div>
41
+ <div class="flex-grow pt-2 pb-3 overflow-auto">
42
+ <%= component "nav", items: Lookbook.pages.as_tree, filterable: false %>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ <% else %>
47
+ <div x-ref="filter" class="px-2 py-2 relative" x-cloak>
48
+ <%= component "filter" %>
49
+ </div>
50
+ <div class="flex-grow overflow-y-auto unsectioned">
51
+ <%= component "nav", items: Lookbook.previews.as_tree, filterable: true %>
52
+ </div>
53
+ <% end %>
54
+
55
+ </div>
@@ -0,0 +1,15 @@
1
+ <div id="page-not-found" class="bg-white flex flex-col items-center justify-center h-screen w-full">
2
+ <div class="p-4 text-center">
3
+ <%= icon "alert-triangle", size: 10, class: "text-red-300 mx-auto" %>
4
+ <div class="mt-3 text-gray-700 max-w-xs">
5
+ <div data-role="page-not-found">
6
+ <h5 class="text-base">Page not found</h5>
7
+ <% if params[:path].present? %>
8
+ <p class="mt-2 text-gray-400 text-sm">
9
+ The page "<span class="text-gray-500"><%= params[:path] %></span>" does not exist.
10
+ </p>
11
+ <% end %>
12
+ </div>
13
+ </div>
14
+ </div>
15
+ </div>
@@ -0,0 +1,71 @@
1
+ <div
2
+ id="page"
3
+ class="grid grid-rows-[40px_1fr] bg-gray-50 h-full"
4
+ x-data="page"
5
+ @click="checkForNavigation"
6
+ @page:changed.window="scrollToTop">
7
+ <%= component "header" do %>
8
+ <div id="page-banner-<%= @page.id %>" class="flex items-center ml-auto pr-2">
9
+ <% if @previous_page %>
10
+ <a ref="header-previous-page"
11
+ href="<%= page_path @previous_page.lookup_path %>"
12
+ x-tooltip.theme.lookbook="`Previous page`"
13
+ class="flex-none p-1">
14
+ <%= icon "chevron-left", size: 4, class: "hover:text-indigo-800" %>
15
+ </a>
16
+ <% else %>
17
+ <span ref="header-previous-page" class="flex-none p-1">
18
+ <%= icon "chevron-left", size: 4, class: "opacity-20" %>
19
+ </span>
20
+ <% end %>
21
+
22
+ <% if @next_page %>
23
+ <a ref="header-next-page"
24
+ href="<%= page_path @next_page.lookup_path %>"
25
+ x-tooltip.theme.lookbook="`Next page`"
26
+ class="flex-none p-1">
27
+ <%= icon "chevron-right", size: 4, class: "hover:text-indigo-800" %>
28
+ </a>
29
+ <% else %>
30
+ <span ref="header-next-page" class="flex-none p-1">
31
+ <%= icon "chevron-right", size: 4, class: "opacity-20" %>
32
+ </span>
33
+ <% end %>
34
+ </div>
35
+ <% end %>
36
+ <div class="px-4 md:px-10 w-full pt-8 md:pt-12 overflow-auto pb-10 scroll-smooth" x-ref="scroller">
37
+ <div class="w-full max-w-3xl mx-auto text-gray-600">
38
+ <% if @page.header? %>
39
+ <header id="page-header-<%= @page.id %>" class="mb-10 prose max-w-none">
40
+ <h1><%= @page.title %></h1>
41
+ </header>
42
+ <% end %>
43
+ <div id="page-main-<%= @page.id %>" data-morph-strategy="replace">
44
+ <div class="prose max-w-none prose-a:text-indigo-900">
45
+ <%= @page_content %>
46
+ </div>
47
+ </div>
48
+ <% if @page.footer? %>
49
+ <footer id="page-footer-<%= @page.id %>" class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8">
50
+ <% if @previous_page %>
51
+ <a ref="footer-previous-page"
52
+ href="<%= page_path @previous_page.lookup_path %>"
53
+ class="flex items-center flex-none">
54
+ <%= icon "arrow-left", size: 4, class: "hover:text-indigo-800" %>
55
+ <span class="ml-2 underline"><%= @previous_page.title %></span>
56
+ </a>
57
+ <% end %>
58
+
59
+ <% if @next_page %>
60
+ <a ref="footer-next-page"
61
+ href="<%= page_path @next_page.lookup_path %>"
62
+ class="flex items-center flex-none ml-auto">
63
+ <span class="mr-2 underline"><%= @next_page.title %></span>
64
+ <%= icon "arrow-right", size: 4, class: "hover:text-indigo-800" %>
65
+ </a>
66
+ <% end %>
67
+ </footer>
68
+ <% end %>
69
+ </div>
70
+ </div>
71
+ </div>
@@ -0,0 +1 @@
1
+ <iframe id="error-iframe" src="<%= url_for lookbook.preview_path %>" frameborder="0" class=" h-screen w-full" seamless></iframe>
@@ -1,5 +1,5 @@
1
- <div class="bg-white flex flex-col items-center justify-center h-screen w-full">
2
- <div class="p-4 text-center">
1
+ <div id="not-found" class="bg-white flex flex-col items-center justify-center h-screen w-full">
2
+ <div class="px-4 text-center">
3
3
  <%= icon "alert-triangle", size: 10, class: "text-red-300 mx-auto" %>
4
4
  <div class="mt-3 text-gray-700 max-w-xs">
5
5
  <% if @preview %>
@@ -7,14 +7,14 @@
7
7
  <h6 class="text-[11px] text-gray-500 italic inline-block uppercase tracking-wide mb-4">
8
8
  <%= item[:label] %>
9
9
  </h6>
10
- <div class="prose prose-sm">
10
+ <div class="prose prose-sm prose-a:text-indigo-900">
11
11
  <%= markdown(item[:notes]) %>
12
12
  </div>
13
13
  </div>
14
14
  <% end %>
15
15
  </div>
16
16
  <% else %>
17
- <div class="p-4 prose prose-sm">
17
+ <div class="p-4 prose prose-sm prose-a:text-indigo-900">
18
18
  <% if items.any? %>
19
19
  <%= markdown(items.first[:notes]) %>
20
20
  <% else %>
data/config/routes.rb CHANGED
@@ -1,10 +1,15 @@
1
1
  Lookbook::Engine.routes.draw do
2
2
  if Lookbook.config.auto_refresh
3
- mount Lookbook::Engine.websocket => Lookbook::Engine.cable.mount_path
3
+ mount Lookbook::Engine.websocket => Lookbook.config.cable.mount_path
4
4
  end
5
5
 
6
- root to: "app#index", as: :home
6
+ root to: "application#index", as: :home
7
7
 
8
- get "/preview/*path", to: "app#preview", as: :preview
9
- get "/*path", to: "app#show", as: :show
8
+ if Lookbook::Features.enabled?(:pages)
9
+ get "/#{Lookbook.config.page_route}", to: "pages#index", as: :page_index
10
+ get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :page
11
+ end
12
+
13
+ get "/preview/*path", to: "previews#preview", as: :preview
14
+ get "/*path", to: "previews#show", as: :show
10
15
  end
@@ -1,5 +1,26 @@
1
+ require "rouge"
2
+ require "htmlbeautifier"
3
+
1
4
  module Lookbook
2
- class CodeFormatter < Rouge::Formatters::HTML
5
+ module CodeFormatter
6
+ class << self
7
+ def highlight(source, language, opts = {})
8
+ source&.gsub!("&gt;", "<")&.gsub!("&lt;", ">")
9
+ language ||= "ruby"
10
+ formatter = Formatter.new(opts)
11
+ lexer = Rouge::Lexer.find(language.to_s) || Rouge::Lexer.find("plaintext")
12
+ formatter.format(lexer.lex(source)).html_safe
13
+ end
14
+
15
+ def beautify(source, language = "html")
16
+ source = source.strip
17
+ result = language.downcase == "html" ? HtmlBeautifier.beautify(source) : source
18
+ result.strip.html_safe
19
+ end
20
+ end
21
+ end
22
+
23
+ class Formatter < Rouge::Formatters::HTML
3
24
  def initialize(opts = {})
4
25
  @opts = opts
5
26
  end