d92e9d1af4
* feat: first pass at CTA Tag * fix: strip_tags before using the link * default hover * feat: add the type of cta * feat: add own ltag by copying the utility class * feat: rename property to style * feat: add style and width * feat: add xit test * feat: add spec for unordered options * chore: some css * feat: update the cta spec to remove style and width options * feat: move billboard related code out of widgets * fix: mobile display ad below the comments section * feat: cta_tag strip tags input * feat: update the editor docs * feat: add help text to teh liquid guide and the editor guide * feat: fix the css styles of the CTA * cgore: alphabetical order * chore: move everything on one line --------- Co-authored-by: Mac Siri <mac@forem.com>
80 lines
3.8 KiB
Text
80 lines
3.8 KiB
Text
<div id="editor-liquid-help">
|
|
<div class="text-styles">
|
|
<h3>Supported URL Embeds</h3>
|
|
|
|
<ul class="crayons-card grid gap-2 grid-cols-2 p-4 list-disc">
|
|
<li class="ml-4"><%= community_name %> Comment</li>
|
|
<li class="ml-4"><%= community_name %> Link</li>
|
|
<li class="ml-4"><%= community_name %> Link</li>
|
|
<li class="ml-4"><%= community_name %> Listing</li>
|
|
<li class="ml-4"><%= community_name %> Organization</li>
|
|
<li class="ml-4"><%= community_name %> Podcast Episode</li>
|
|
<li class="ml-4"><%= community_name %> Tag</li>
|
|
<li class="ml-4"><%= community_name %> User Profile</li>
|
|
<li class="ml-4">asciinema</li>
|
|
<li class="ml-4">CodePen</li>
|
|
<li class="ml-4">CodeSandbox</li>
|
|
<li class="ml-4">DotNetFiddle</li>
|
|
<li class="ml-4">GitHub Gist, Issue or Repository</li>
|
|
<li class="ml-4">Glitch</li>
|
|
<li class="ml-4">Instagram</li>
|
|
<li class="ml-4">JSFiddle</li>
|
|
<li class="ml-4">JSitor</li>
|
|
<li class="ml-4">Loom</li>
|
|
<li class="ml-4">Kotlin</li>
|
|
<li class="ml-4">Medium</li>
|
|
<li class="ml-4">Next Tech</li>
|
|
<li class="ml-4">Reddit</li>
|
|
<li class="ml-4">Replit</li>
|
|
<li class="ml-4">Slideshare</li>
|
|
<li class="ml-4">Speaker Deck</li>
|
|
<li class="ml-4">SoundCloud</li>
|
|
<li class="ml-4">Spotify</li>
|
|
<li class="ml-4">StackBlitz</li>
|
|
<li class="ml-4">Stackery</li>
|
|
<li class="ml-4">Stack Exchange or Stack Overflow</li>
|
|
<li class="ml-4">Twitch</li>
|
|
<li class="ml-4">Twitter</li>
|
|
<li class="ml-4">Twitter timeline</li>
|
|
<li class="ml-4">Wikipedia</li>
|
|
<li class="ml-4">Vimeo</li>
|
|
<li class="ml-4">YouTube</li>
|
|
</ul>
|
|
|
|
<hr />
|
|
|
|
<h3>Supported Non-URL Embeds</h3>
|
|
|
|
<h4>Call To Action (CTA)</h4>
|
|
<p><pre>{% cta link %} description {% endcta %}</pre></p>
|
|
<p>Provide a <em>link</em> that a user will be redirected to. The <em>description</em> will contain the label/description for the call to action.</p>
|
|
|
|
<h4>Details</h4>
|
|
<p>You can embed a <code>details</code> HTML element by using details, spoiler, or collapsible. The <em>summary</em> will be what the dropdown title displays. The <em>content</em> will be the text hidden behind the dropdown. This is great for when you want to hide text (i.e. answers to questions) behind a user action/intent (i.e. a click).</p>
|
|
<p><code>{% details summary %} content {% enddetails %}</code></p>
|
|
<p><code>{% spoiler summary %} content {% endspoiler %}</code></p>
|
|
<p><code>{% collapsible summary %} content {% endcollapsible %}</code></p>
|
|
|
|
<h4>KaTex</h4>
|
|
<p>Place your mathematical expression within a KaTeX liquid block, as follows:</p>
|
|
<pre>{% katex %}<br> c = \pm\sqrt{a^2 + b^2}<br>{% endkatex %}<br></pre>
|
|
<p>To render KaTeX inline add the "inline" option:</p>
|
|
<pre>{% katex inline %}<br> c = \pm\sqrt{a^2 + b^2}<br>{% endkatex %}<br></pre>
|
|
|
|
<h4>RunKit</h4>
|
|
<p>Put executable code within a runkit liquid block, as follows:</p>
|
|
<pre>{% runkit<br>// hidden setup JavaScript code goes in this preamble area<br>const hiddenVar = 42<br>%}<br>// visible, reader-editable JavaScript code goes here<br>console.log(hiddenVar)<br>{% endrunkit %}<br></pre>
|
|
|
|
<% if @user_approved_liquid_tags.include? UserSubscriptionTag %>
|
|
<h4><%= community_name %> User Subscriptions</h4>
|
|
<p class="fs-s fw-bold">This embed can only be created within posts by Admins.</p>
|
|
<p>You can add call-to-action text that will show above the subscribe button:</p>
|
|
<code>{% user_subscription If you'd like to receive future updates, subscribe below! %}</code>
|
|
<p class="fs-s">
|
|
If a reader is signed out, the button will prompt them to sign in first
|
|
to subscribe. If the reader is signed in, the button will prompt them
|
|
to subscribe.
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|