Skip to content

Commit a62d834

Browse files
koppenkoppen
authored
Merge pull request #76 from substancelab/docs
Improve docs
2 parents b61ed34 + 09decd8 commit a62d834

File tree

10 files changed

+365
-223
lines changed

10 files changed

+365
-223
lines changed

‎app/components/flowbite/breadcrumb.rb‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ module Flowbite
55
#
66
# See https://flowbite.com/docs/components/breadcrumb/
77
#
8+
# Use {Flowbite::Breadcrumb} and the child {Flowbite::BreadcrumbItem} components to create and indicate a series of page structure and URLs to help the user navigate through the website.
9+
#
810
# Breadcrumbs consist of the following components:
911
#
1012
# - {Flowbite::Breadcrumb}: Container for breadcrumb items.

‎demo/.yardoc/checksums‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ app/components/flowbite/toast.rb 20c14599e8a9f33cf36450edbad59b3dbeaf6bbd
55
app/components/flowbite/button.rb 6ae7681d3b842d73aa99cddfa5a9b107ede7fea4
66
app/components/flowbite/styles.rb 929c42e428ba5a8e16efacaae0f35380e2f5f95c
77
app/components/flowbite/input/url.rb 2ad9461aaa799e0ce457279df1bd63641b845e95
8-
app/components/flowbite/breadcrumb.rb bc7e606726c6b1ffa211db7440b743153aa93575
8+
app/components/flowbite/breadcrumb.rb e04fc0fb7b5e845a95a80052cb2996ba5eb7a144
99
app/components/flowbite/card/title.rb 8067aa1e027c725896b063b67364aecfbf2f7d4e
1010
app/components/flowbite/input/date.rb 5b93e5b98eef5e6e54ef18e74c72fb8746bac48b
1111
app/components/flowbite/input/file.rb fde42ca92377f212397f350cca288a9c80de7b8a

‎demo/.yardoc/objects/root.dat‎

372 Bytes
Binary file not shown.

‎demo/app/controllers/docs/components_controller.rb‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,37 @@ def show
1515
@code_object = Yard.new.code_object(params[:id])
1616
raise ActiveRecord::RecordNotFound if @code_object.nil?
1717

18+
@child_classes = @code_object.children.select { |c| c.is_a?(YARD::CodeObjects::ClassObject) }.sort_by(&:name)
19+
@constructor = @code_object.meths.find { |meth| meth.name == :initialize }
20+
@constructor_arguments = if @constructor
21+
@constructor.tags(:param)
22+
else
23+
[]
24+
end
25+
@examples = @code_object.tags(:example)
26+
@lookbook_embeds = @code_object.tags(:lookbook_embed)
27+
@viewcomponent_slots = @code_object.tags(:viewcomponent_slot)
28+
1829
respond_to do |format|
1930
format.html
2031
format.md
2132
end
2233
end
34+
35+
private
36+
37+
helper_method def all_components
38+
flowbite = Yard.new.code_object("Flowbite")
39+
child_classes = flowbite.children.select { |child|
40+
child.type == :class && child.inheritance_tree.map(&:path).include?("ViewComponent::Base")
41+
}
42+
child_classes.sort_by(&:name)
43+
end
44+
45+
helper_method def rubydoc_url(code_object)
46+
name = code_object.path
47+
slug = name.gsub("::", "/")
48+
"https://www.rubydoc.info/gems/flowbite-components/#{slug}.html"
49+
end
2350
end
2451
end

‎demo/app/views/docs/components/show.html.erb‎

Lines changed: 118 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,121 @@
1-
<div class="format max-w-full dark:format-invert">
2-
<h1><%= @code_object.name %></h1>
3-
4-
<%= simple_format(@code_object.docstring) %>
5-
6-
<% if @code_object.tags(:viewcomponent_slot).any? %>
7-
<div class="tags">
8-
<p class="tag_title">Slots:</p>
9-
<ul class="viewcomponent_slot">
10-
<% @code_object.tags(:viewcomponent_slot).each do |slot_tag| %>
11-
<li>
12-
<span class="name"><%= slot_tag.name %></span>
13-
<% if slot_tag.types&.any? %>
14-
<span class="type">(<%= slot_tag.types.map { |t| link_to(t, "#") }.join(", ").html_safe %>)</span>
1+
<article
2+
class="
3+
flex flex-wrap md:flex-nowrap gap-8 w-full items-center
4+
justify-between mx-auto
5+
"
6+
>
7+
<nav
8+
id="default-sidebar"
9+
class="flex-none h-full transition-transform -translate-x-full sm:translate-x-0"
10+
aria-label="Sidebar"
11+
>
12+
<div
13+
class="
14+
h-full -ml-2 pr-6 py-4 overflow-y-auto border-e
15+
border-default
16+
"
17+
>
18+
<ul class="space-y-2 font-medium">
19+
<% all_components.each do |component| %>
20+
<li>
21+
<%= link_to component.name, docs_component_path(:id => component.path), class: "flex items-center px-2 py-1.5 text-body rounded-base hover:bg-neutral-tertiary hover:text-fg-brand group" %>
22+
</li>
23+
<% end %>
24+
</ul>
25+
</div>
26+
</nav>
27+
28+
<main class="py-4 flex-1 space-y-8">
29+
<h1 class="mb-4 text-4xl tracking-tight font-bold text-gray-900 dark:text-white"><%= @code_object.path %></h1>
30+
31+
<% if @code_object.type == :class && @code_object.parent && !@code_object.parent.root? %>
32+
<section>
33+
Inherits from
34+
<%= render(Flowbite::Link.new(href: docs_component_path(@code_object.parent))) do %>
35+
<code><%= @code_object.parent %></code>
36+
<% end %>
37+
</section>
38+
<% end %>
39+
40+
<% if @child_classes.any? %>
41+
<section>
42+
<h2 class="mb-4 mt-8 text-2xl font-bold">In namespace</h2>
43+
<ul class="list-disc list-inside space-y-2">
44+
<% @child_classes.each do |subclass| %>
45+
<li>
46+
<%= link_to subclass.name, docs_component_path(:id => subclass.path), class: "text-blue-600 hover:underline" %>
47+
</li>
1548
<% end %>
16-
<% if slot_tag.text.present? %>
17-
&mdash; <%= simple_format(slot_tag.text, {}, wrapper_tag: "span") %>
49+
</ul>
50+
</section>
51+
<% end %>
52+
53+
<section class="format dark:format-invert">
54+
<%= simple_format(@code_object.docstring) %>
55+
</section>
56+
57+
<% if @viewcomponent_slots.any? %>
58+
<section>
59+
<h2 class="mt-8 text-2xl font-bold">Slots</h2>
60+
61+
<table>
62+
<% @viewcomponent_slots.each do |slot_tag| %>
63+
<tr>
64+
<th class="pt-4 text-left align-top" scope="col"><strong><code><%= slot_tag.name %></code></strong></th>
65+
<td class="pt-4 align-top ps-4"><%= (slot_tag.types || []).join(", ") %></td>
66+
<td class="pt-4 align-top ps-4"><%= slot_tag.text %></td>
67+
</tr>
1868
<% end %>
19-
</li>
69+
</table>
70+
</section>
71+
<% end %>
72+
73+
<% if @examples.any? %>
74+
<section>
75+
<%- @examples.each do |example| %>
76+
<h2 class="mt-8 text-2xl font-bold"><%= example.name %></h2>
77+
<pre><code><%= example.text %></code></pre>
78+
<% end %>
79+
</section>
80+
<% end %>
81+
82+
<% if @lookbook_embeds.any? %>
83+
<section>
84+
<h2 class="mt-8 text-2xl font-bold">Examples</h2>
85+
86+
<% @lookbook_embeds.each do |lookbook_tag| %>
87+
<lookbook-embed panels="source" preview="<%= lookbook_tag.text.strip %>" scenario="*"></lookbook-embed>
88+
<% end %>
89+
</section>
90+
<% end %>
91+
92+
<% if @constructor %>
93+
<section>
94+
<h2 class="mt-8 text-2xl font-bold">Constructor</h2>
95+
96+
<code><%= @constructor.signature %></code>
97+
98+
<% if @constructor_arguments.any? %>
99+
<h3 class="mt-4 text-xl font-bold">Parameters</h3>
100+
<table>
101+
<% @constructor_arguments.each do |param| %>
102+
<tr>
103+
<th class="pt-4 text-left align-top" scope="col"><strong><code><%= param.name %></code></strong></th>
104+
<td class="pt-4 align-top ps-4"><%= (param.types || []).join(", ") %></td>
105+
<td class="pt-4 align-top ps-4"><%= param.text %></td>
106+
</tr>
107+
<% end %>
108+
</table>
109+
<% end %>
110+
</section>
111+
<% end %>
112+
113+
<section>
114+
<h2 class="mt-8 text-2xl font-bold">See also</h2>
115+
<%= render(Flowbite::Link.new(href: rubydoc_url(@code_object), data: {turbo: false})) do %>
116+
Ruby API documentation for
117+
<code><%= @code_object.type %> <%= @code_object.path %></code>
20118
<% end %>
21-
</ul>
22-
</div>
23-
<% end %>
24-
25-
<%- @code_object.tags(:example).each do |example| %>
26-
<h2><%= example.name %></h2>
27-
<pre><code><%= example.text %></code></pre>
28-
<% end %>
29-
30-
<% if @code_object.tags(:lookbook_embed).any? %>
31-
<h2>Examples</h2>
32-
33-
<% @code_object.tags(:lookbook_embed).each do |lookbook_tag| %>
34-
<lookbook-embed panels="source" preview="<%= lookbook_tag.text.strip %>" scenario="*"></lookbook-embed>
35-
<% end %>
36-
<% end %>
119+
</section>
120+
</main>
121+
</article>

‎demo/app/views/docs/pages/show.html.erb‎

Lines changed: 44 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,49 @@
1-
<% all_pages.each do |page| %>
2-
<%= link_to page.title, docs_page_path(page.slug), class: "block mb-2 text-blue-600 hover:underline" %>
3-
<% end %>
4-
5-
<div class="format max-w-full dark:format-invert">
6-
<h1><%= @page.title %></h1>
1+
<article
2+
class="
3+
flex flex-wrap gap-8 w-full max-w-screen-xl items-center
4+
justify-between mx-auto
5+
"
6+
>
7+
<nav
8+
id="default-sidebar"
9+
class="flex-none h-full transition-transform -translate-x-full sm:translate-x-0"
10+
aria-label="Sidebar"
11+
>
12+
<div
13+
class="
14+
h-full -ml-2 pr-6 py-4 overflow-y-auto border-e
15+
border-default
16+
"
17+
>
18+
<ul class="space-y-2 font-medium">
19+
<% all_pages.each do |page| %>
20+
<li>
21+
<%= link_to page.title, docs_page_path(page.slug), class: "flex items-center px-2 py-1.5 text-body rounded-base hover:bg-neutral-tertiary hover:text-fg-brand group" %>
22+
</li>
23+
<% end %>
24+
</ul>
25+
</div>
26+
</nav>
727

8-
<%= render_markdown(@page.content) %>
9-
</div>
28+
<main class="py-4 flex-1">
29+
<div class="format dark:format-invert">
30+
<h1 class="mb-4 text-4xl tracking-tight font-bold text-gray-900 dark:text-white"><%= @page.title %></h1>
1031

11-
<div>
12-
<% if @previous_page %>
13-
<div class="mt-8">
14-
<%= link_to "← #{@previous_page.title}", docs_page_path(@previous_page.slug), class: "text-blue-600 hover:underline" %>
32+
<%= render_markdown(@page.content) %>
1533
</div>
16-
<% end %>
1734

18-
<% if @next_page %>
19-
<div class="mt-8">
20-
<%= link_to "#{@next_page.title} →", docs_page_path(@next_page.slug), class: "text-blue-600 hover:underline" %>
35+
<div class="flex justify-between">
36+
<% if @previous_page %>
37+
<div class="mt-8">
38+
<%= link_to "← #{@previous_page.title}", docs_page_path(@previous_page.slug), class: "text-blue-600 hover:underline" %>
39+
</div>
40+
<% end %>
41+
42+
<% if @next_page %>
43+
<div class="mt-8">
44+
<%= link_to "#{@next_page.title} →", docs_page_path(@next_page.slug), class: "text-blue-600 hover:underline" %>
45+
</div>
46+
<% end %>
2147
</div>
22-
<% end %>
23-
</div>
48+
</main>
49+
</article>

0 commit comments

Comments
 (0)