railsui 3.4.1 → 3.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c52e751d26db3957900faa41e81fa9506f4bf76e103cb0157cb96c8da55974e5
|
|
4
|
+
data.tar.gz: ddc98fa8752fede4a76eec1518f0d8c9d3f166fcc362dfd6d942de051ad2b846
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: adfad7751e7f2665b07edf5647eb58243e60ef5c45e29a1786f87165dd5cecfccc751b02e49e9b624e565191719fc81361c5a8277cde1c1123c07da56a3527c3
|
|
7
|
+
data.tar.gz: 8802fa30544225f12f13fd38873ee15c36f9e574d0d1b5acc6abf5805b3f37a17ce28d217677a2ea970373e28f9ffb8ea7dc77e3357646a656f7da64c09bab81
|
data/Gemfile.lock
CHANGED
|
@@ -1,48 +1,21 @@
|
|
|
1
1
|
<!-- Stylesheets -->
|
|
2
2
|
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
|
|
3
|
-
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/atom-one-dark.min.css" />
|
|
4
3
|
<style>
|
|
5
|
-
/*
|
|
6
|
-
.
|
|
7
|
-
.railsui .language-haml .hljs-comment {
|
|
8
|
-
color: #637777 !important;
|
|
9
|
-
font-style: italic;
|
|
10
|
-
}
|
|
11
|
-
/* Style HTML-like tags in ERB when they're not highlighted */
|
|
12
|
-
.railsui .language-erb code,
|
|
13
|
-
.railsui .language-haml code {
|
|
14
|
-
/* Ensure base text is visible */
|
|
15
|
-
color: #f5f5f5;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
/* Ensure highlight.js styles aren't overridden */
|
|
19
|
-
.hljs {
|
|
4
|
+
/* Shiki code block styles */
|
|
5
|
+
.shiki {
|
|
20
6
|
background: transparent !important;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
/* CSS syntax highlighting colors */
|
|
25
|
-
.language-css .hljs-attribute {
|
|
26
|
-
color: #e06c75 !important;
|
|
27
|
-
}
|
|
28
|
-
.language-css .hljs-number,
|
|
29
|
-
.language-css .hljs-literal {
|
|
30
|
-
color: #d19a66 !important;
|
|
31
|
-
}
|
|
32
|
-
.language-css .hljs-selector-class,
|
|
33
|
-
.language-css .hljs-selector-tag {
|
|
34
|
-
color: #e5c07b !important;
|
|
7
|
+
padding: 1rem;
|
|
8
|
+
overflow-x: auto;
|
|
35
9
|
}
|
|
36
|
-
.
|
|
37
|
-
|
|
38
|
-
|
|
10
|
+
.shiki code {
|
|
11
|
+
display: block;
|
|
12
|
+
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
13
|
+
font-size: 1rem;
|
|
14
|
+
line-height: 1.7;
|
|
39
15
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
.language-css .hljs-string {
|
|
45
|
-
color: #98c379 !important;
|
|
16
|
+
/* Dark theme adjustments */
|
|
17
|
+
pre code {
|
|
18
|
+
background: transparent !important;
|
|
46
19
|
}
|
|
47
20
|
</style>
|
|
48
21
|
|
|
@@ -65,36 +38,94 @@
|
|
|
65
38
|
<script src="https://unpkg.com/tippy.js@6.3.7/dist/tippy-bundle.umd.min.js"></script>
|
|
66
39
|
<%= javascript_include_tag "https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js", defer: true %>
|
|
67
40
|
|
|
68
|
-
<!-- Syntax Highlighting -->
|
|
69
|
-
<script
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
41
|
+
<!-- Syntax Highlighting with Shiki -->
|
|
42
|
+
<script type="module">
|
|
43
|
+
import { codeToHtml, bundledLanguages } from 'https://esm.sh/shiki@1.22.0';
|
|
44
|
+
|
|
45
|
+
// Language mapping for code blocks
|
|
46
|
+
const languageMap = {
|
|
47
|
+
'language-ruby': 'ruby',
|
|
48
|
+
'language-erb': 'erb',
|
|
49
|
+
'language-html': 'html',
|
|
50
|
+
'language-javascript': 'javascript',
|
|
51
|
+
'language-js': 'javascript',
|
|
52
|
+
'language-bash': 'bash',
|
|
53
|
+
'language-shell': 'bash',
|
|
54
|
+
'language-css': 'css',
|
|
55
|
+
'language-xml': 'xml',
|
|
56
|
+
'language-haml': 'ruby'
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
// Highlight a single code element
|
|
60
|
+
async function highlightElement(codeEl) {
|
|
61
|
+
if (codeEl.dataset.shikiHighlighted) return;
|
|
62
|
+
|
|
63
|
+
const classNames = Array.from(codeEl.classList);
|
|
64
|
+
const langClass = classNames.find(c => c.startsWith('language-'));
|
|
65
|
+
const lang = languageMap[langClass] || 'text';
|
|
66
|
+
|
|
67
|
+
// Check if language is available
|
|
68
|
+
const availableLang = bundledLanguages[lang] ? lang : 'text';
|
|
69
|
+
|
|
70
|
+
try {
|
|
71
|
+
const code = codeEl.textContent;
|
|
72
|
+
const html = await codeToHtml(code, {
|
|
73
|
+
lang: availableLang,
|
|
74
|
+
theme: 'material-theme-palenight'
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
// Replace pre>code with Shiki output
|
|
78
|
+
const preEl = codeEl.parentElement;
|
|
79
|
+
if (preEl && preEl.tagName === 'PRE') {
|
|
80
|
+
const wrapper = document.createElement('div');
|
|
81
|
+
wrapper.innerHTML = html;
|
|
82
|
+
const shikiPre = wrapper.firstChild;
|
|
83
|
+
const shikiCode = shikiPre.querySelector('code');
|
|
84
|
+
|
|
85
|
+
// Preserve original pre classes
|
|
86
|
+
preEl.classList.forEach(c => shikiPre.classList.add(c));
|
|
87
|
+
|
|
88
|
+
// Transfer data attributes for clipboard functionality
|
|
89
|
+
if (shikiCode) {
|
|
90
|
+
Array.from(codeEl.attributes).forEach(attr => {
|
|
91
|
+
if (attr.name.startsWith('data-')) {
|
|
92
|
+
shikiCode.setAttribute(attr.name, attr.value);
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
// Store original text for clipboard
|
|
96
|
+
shikiCode.dataset.clipboardText = code;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
preEl.replaceWith(shikiPre);
|
|
100
|
+
}
|
|
101
|
+
codeEl.dataset.shikiHighlighted = 'true';
|
|
102
|
+
} catch (e) {
|
|
103
|
+
console.warn('Shiki highlighting failed for', lang, e);
|
|
96
104
|
}
|
|
97
105
|
}
|
|
106
|
+
|
|
107
|
+
// Highlight all visible code blocks
|
|
108
|
+
async function highlightAll() {
|
|
109
|
+
const codeElements = document.querySelectorAll('pre code[class*="language-"]');
|
|
110
|
+
for (const el of codeElements) {
|
|
111
|
+
if (el.offsetParent !== null) {
|
|
112
|
+
await highlightElement(el);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// Expose for use by Alpine.js tab switching
|
|
118
|
+
window.shikiHighlight = {
|
|
119
|
+
highlightElement,
|
|
120
|
+
highlightAll
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
// Initial highlight on DOM ready
|
|
124
|
+
if (document.readyState === 'loading') {
|
|
125
|
+
document.addEventListener('DOMContentLoaded', highlightAll);
|
|
126
|
+
} else {
|
|
127
|
+
highlightAll();
|
|
128
|
+
}
|
|
98
129
|
</script>
|
|
99
130
|
|
|
100
131
|
<!-- Initialize Stimulus and register controllers -->
|
|
@@ -113,7 +144,6 @@
|
|
|
113
144
|
Application: StimulusApplication
|
|
114
145
|
}
|
|
115
146
|
|
|
116
|
-
const hljs = window.hljs
|
|
117
147
|
const { useTransition, useClickOutside } = window.StimulusUse || {}
|
|
118
148
|
|
|
119
149
|
<%= render partial: "railsui/shared/inline_controllers" %>;
|
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
(function() {
|
|
3
3
|
const controller = class extends Stimulus.Controller {
|
|
4
4
|
connect() {
|
|
5
|
-
|
|
5
|
+
// Use Shiki for syntax highlighting
|
|
6
|
+
if (window.shikiHighlight) {
|
|
6
7
|
this.snippetTargets.forEach((el) => {
|
|
7
|
-
if (!el.
|
|
8
|
-
|
|
8
|
+
if (!el.dataset.shikiHighlighted) {
|
|
9
|
+
window.shikiHighlight.highlightElement(el)
|
|
9
10
|
}
|
|
10
11
|
})
|
|
11
12
|
}
|
|
@@ -185,11 +186,11 @@ Stimulus.application.register("railsui-flash", class extends Stimulus.Controller
|
|
|
185
186
|
}
|
|
186
187
|
}
|
|
187
188
|
highlightCode() {
|
|
188
|
-
if (
|
|
189
|
-
const codeElements = this.codeTarget.querySelectorAll('pre code')
|
|
189
|
+
if (window.shikiHighlight && this.hasCodeTarget) {
|
|
190
|
+
const codeElements = this.codeTarget.querySelectorAll('pre code[class*=language-]')
|
|
190
191
|
codeElements.forEach((el) => {
|
|
191
|
-
if (!el.
|
|
192
|
-
|
|
192
|
+
if (!el.dataset.shikiHighlighted) {
|
|
193
|
+
window.shikiHighlight.highlightElement(el)
|
|
193
194
|
}
|
|
194
195
|
})
|
|
195
196
|
}
|
|
@@ -1,45 +1,48 @@
|
|
|
1
1
|
<%
|
|
2
2
|
html_content = yield :html
|
|
3
3
|
erb_content = yield :erb
|
|
4
|
-
haml_content = yield :haml
|
|
5
4
|
js_content = yield :js
|
|
6
5
|
bash_content = yield :bash
|
|
7
6
|
ruby_content = yield :ruby
|
|
8
7
|
css_content = yield :css
|
|
9
8
|
%>
|
|
10
9
|
|
|
11
|
-
<div data-controller="railsui-code" class="mt-5 mb-8 first:mt-0 last:mb-0 bg-
|
|
12
|
-
// Highlight visible code on load
|
|
10
|
+
<div data-controller="railsui-code" class="mt-5 mb-8 first:mt-0 last:mb-0 bg-[#292d3e] rounded-lg overflow-clip dark:border dark:border-indigo-400/20 selection:bg-slate-300/90 selection:text-slate-800 relative scrollbar border-transparent" x-data="{ active: '<%= local_assigns[:active_tab] %>' }" x-init="
|
|
11
|
+
// Highlight visible code on load using Shiki
|
|
13
12
|
setTimeout(() => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
13
|
+
if (window.shikiHighlight) {
|
|
14
|
+
const codeElements = $el.querySelectorAll('pre code[class*=language-]');
|
|
15
|
+
codeElements.forEach(el => {
|
|
16
|
+
if (el.offsetParent !== null && !el.dataset.shikiHighlighted) {
|
|
17
|
+
window.shikiHighlight.highlightElement(el);
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
20
21
|
}, 100);
|
|
21
22
|
|
|
22
23
|
// Watch for tab changes and highlight new code
|
|
23
24
|
$watch('active', () => {
|
|
24
25
|
setTimeout(() => {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
26
|
+
if (window.shikiHighlight) {
|
|
27
|
+
const codeElements = $el.querySelectorAll('pre code[class*=language-]');
|
|
28
|
+
codeElements.forEach(el => {
|
|
29
|
+
if (el.offsetParent !== null && !el.dataset.shikiHighlighted) {
|
|
30
|
+
window.shikiHighlight.highlightElement(el);
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
}
|
|
31
34
|
}, 50);
|
|
32
35
|
});
|
|
33
36
|
">
|
|
34
|
-
<div class="bg-
|
|
35
|
-
<ul class="flex items-center justify-start space-x-2 border-b border-
|
|
37
|
+
<div class="bg-[#232738]">
|
|
38
|
+
<ul class="flex items-center justify-start space-x-2 border-b border-[#4e5579] px-3">
|
|
36
39
|
<% if content_for?(:html) %>
|
|
37
40
|
<li class="flex items-center">
|
|
38
41
|
<a href="#html"
|
|
39
42
|
@click.prevent="active = 'html'"
|
|
40
43
|
:class="active == 'html' ? 'text-pink-400 border-pink-400' : 'border-transparent text-white/90'"
|
|
41
44
|
class="-ml-2 pl-5 pr-3 py-3 font-mono text-sm border-b-2 hover:text-pink-400 hover:border-pink-400"><%= local_assigns[:html_filename] %></a>
|
|
42
|
-
<span class="w-px h-11 bg-gradient-to-b from-
|
|
45
|
+
<span class="w-px h-11 bg-gradient-to-b from-indigo-400/30 to-indigo-500/20 transform rotate-[20deg] block ml-2"></span>
|
|
43
46
|
</li>
|
|
44
47
|
<% end %>
|
|
45
48
|
<% if content_for?(:erb) %>
|
|
@@ -48,19 +51,10 @@
|
|
|
48
51
|
@click.prevent="active = 'erb'"
|
|
49
52
|
:class="active == 'erb' ? 'text-rose-400 border-rose-400' : 'border-transparent text-white/90'"
|
|
50
53
|
class="-ml-3 pl-6 pr-4 py-3 font-mono text-sm border-b-2 hover:text-rose-400 hover:border-rose-400"><%= local_assigns[:erb_filename] %></a>
|
|
51
|
-
<span class="w-px h-11 bg-gradient-to-b from-
|
|
54
|
+
<span class="w-px h-11 bg-gradient-to-b from-indigo-400/30 to-indigo-500/20 transform rotate-[20deg] block ml-2"></span>
|
|
52
55
|
</li>
|
|
53
56
|
<% end %>
|
|
54
57
|
|
|
55
|
-
<% if content_for(:haml) %>
|
|
56
|
-
<li class="flex items-center">
|
|
57
|
-
<a href="#haml"
|
|
58
|
-
@click.prevent="active = 'haml'"
|
|
59
|
-
:class="active == 'haml' ? 'text-sky-400 border-sky-400' : 'border-transparent text-white/90'"
|
|
60
|
-
class="-ml-3 pl-5 pr-3 py-3 font-mono text-sm border-b-2 hover:text-sky-400 hover:border-sky-400"><%= local_assigns[:haml_filename] %></a>
|
|
61
|
-
<span class="w-px h-11 bg-gradient-to-b from-neutral-600 to-neutral-700 transform rotate-[20deg] block ml-2"></span>
|
|
62
|
-
</li>
|
|
63
|
-
<% end %>
|
|
64
58
|
|
|
65
59
|
<% if content_for?(:bash) %>
|
|
66
60
|
<li class="flex items-center">
|
|
@@ -68,7 +62,7 @@
|
|
|
68
62
|
@click.prevent="active = 'bash'"
|
|
69
63
|
:class="active == 'bash' ? 'text-cyan-400 border-cyan-400' : 'border-transparent text-white/90'"
|
|
70
64
|
class="-ml-2 pl-5 pr-3 py-3 font-mono text-sm border-b-2 hover:text-cyan-400 hover:border-cyan-400">bash</a>
|
|
71
|
-
<span class="w-px h-11 bg-gradient-to-b from-
|
|
65
|
+
<span class="w-px h-11 bg-gradient-to-b from-indigo-400/30 to-indigo-500/20 transform rotate-[20deg] block ml-2"></span>
|
|
72
66
|
</li>
|
|
73
67
|
<% end %>
|
|
74
68
|
|
|
@@ -78,7 +72,7 @@
|
|
|
78
72
|
@click.prevent="active = 'js'"
|
|
79
73
|
:class="active == 'js' ? 'text-amber-400 border-amber-400' : 'border-transparent text-white/90'"
|
|
80
74
|
class="-ml-3 pl-5 pr-3 py-3 font-mono text-sm border-b-2 hover:text-amber-400 hover:border-amber-400"><%= local_assigns[:js_filename] %></a>
|
|
81
|
-
<span class="w-px h-11 bg-gradient-to-b from-
|
|
75
|
+
<span class="w-px h-11 bg-gradient-to-b from-indigo-400/30 to-indigo-500/20 transform rotate-[20deg] block ml-2"></span>
|
|
82
76
|
</li>
|
|
83
77
|
<% end %>
|
|
84
78
|
|
|
@@ -88,7 +82,7 @@
|
|
|
88
82
|
@click.prevent="active = 'ruby'"
|
|
89
83
|
:class="active == 'ruby' ? 'text-rose-400 border-rose-400' : 'border-transparent text-white/90'"
|
|
90
84
|
class="-ml-3 pl-5 pr-3 py-3 font-mono text-sm border-b-2 hover:text-rose-400 hover:border-rose-400"><%= local_assigns[:ruby_filename] %></a>
|
|
91
|
-
<span class="w-px h-11 bg-gradient-to-b from-
|
|
85
|
+
<span class="w-px h-11 bg-gradient-to-b from-indigo-400/30 to-indigo-500/20 transform rotate-[20deg] block ml-2"></span>
|
|
92
86
|
</li>
|
|
93
87
|
<% end %>
|
|
94
88
|
|
|
@@ -98,12 +92,12 @@
|
|
|
98
92
|
@click.prevent="active = 'css'"
|
|
99
93
|
:class="active == 'css' ? 'text-fuchsia-400 border-fuchsia-400' : 'border-transparent text-white/90'"
|
|
100
94
|
class="-ml-2 pl-5 pr-3 py-3 font-mono text-sm border-b-2 hover:text-fuchsia-400 hover:border-fuchsia-400"><%= local_assigns[:css_filename] %></a>
|
|
101
|
-
<span class="w-px h-11 bg-gradient-to-b from-
|
|
95
|
+
<span class="w-px h-11 bg-gradient-to-b from-indigo-400/30 to-indigo-500/20 transform rotate-[20deg] block ml-2"></span>
|
|
102
96
|
</li>
|
|
103
97
|
<% end %>
|
|
104
98
|
</ul>
|
|
105
99
|
</div>
|
|
106
|
-
<div role="tabpanels" class="overflow-y-auto max-h-[650px] scrollbar scrollbar-track-
|
|
100
|
+
<div role="tabpanels" class="overflow-y-auto max-h-[650px] scrollbar scrollbar-track-[#292d3e] scrollbar-thumb-indigo-400/50">
|
|
107
101
|
<% if content_for?(:html) %>
|
|
108
102
|
<div role="tabpanel"
|
|
109
103
|
x-show="active == 'html'"
|
|
@@ -132,20 +126,6 @@
|
|
|
132
126
|
<pre><code data-railsui-code-target="snippet" data-railsui-clipboard-target="content" class="language-erb scrollbar"><%= erb_content.to_param.strip %></code></pre>
|
|
133
127
|
</div>
|
|
134
128
|
<% end %>
|
|
135
|
-
<% if content_for(:haml) %>
|
|
136
|
-
<div
|
|
137
|
-
role="tabpanel"
|
|
138
|
-
x-show="active == 'haml'"
|
|
139
|
-
data-controller="railsui-clipboard"
|
|
140
|
-
>
|
|
141
|
-
<button data-action="click->railsui-clipboard#copy"
|
|
142
|
-
class="bg-white/10 backdrop-blur-sm p-1 rounded-lg absolute right-2 top-2 hover:bg-gradient-to-br hover:to-sky-600 hover:from-sky-400 transition ease-in-out w-duration-200"
|
|
143
|
-
type="button">
|
|
144
|
-
<%= icon "clipboard", class: "stroke-current text-white select-none size-5" %>
|
|
145
|
-
</button>
|
|
146
|
-
<pre><code data-railsui-code-target="snippet" data-railsui-clipboard-target="content" class="language-haml scrollbar"><%= haml_content.to_param.strip %></code></pre>
|
|
147
|
-
</div>
|
|
148
|
-
<% end %>
|
|
149
129
|
<% if content_for(:bash) %>
|
|
150
130
|
<div
|
|
151
131
|
role="tabpanel"
|
data/lib/railsui/version.rb
CHANGED