I am working on documentation site using a template that runs on Markdown-Jekyll-Liquid-YAML. Everything works fine but have one niggling issue. There's an FAQ template that shows/hides an answer panel; it's all done in CSS and HTML and it works, too. Except, if I include hyperlinks using the Markdown syntax that works everywhere else, the hyperlinks are not being rendered, simply displayed as raw text. (I tried entering the links in plain HTML format, to no avail.)
Here is the relevant snippet of HTML:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="noCrossRef accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseEight">Is DDOS protection in place?</a>
</h4>
</div>
<div id="collapseEight" class="panel-collapse collapse">
<div class="panel-body">
Yes, basic Azure DDOS defence is provided by default and [Azure DDOS Protection Standard] (https://learn.microsoft.com/en-us/azure/virtual-network/ddos-protection-overview) can be activated if required.
</div>
</div>
</div>
Any tips appreciated!
First of all you wrote:
[Azure DDOS Protection Standard] (https://learn.microsoft.com/en-us/azure/virtual-network/ddos-protection-overview)
It should be (without the space between the two parts):
[Azure DDOS Protection Standard](https://learn.microsoft.com/en-us/azure/virtual-network/ddos-protection-overview)
Second of all you should know that using HTML in a Markdown file is allowed... but it does not always work very well. I would use a plain HTML link here:
Azure DDOS Protection Standard
To be more precise (thank you Chris):
Markdown is explicitly "not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.".
Related
DNN 9.3.2 / 2sxc 10.25.2
Using 2sxc Content and c# Razor templates, I'm able to create a content type with some fields and enable the list mode on the template so that I can have a list of items and manage it. This is great because it lets me have one (1) 2sxc Content module on the page and list out as much content as I need.
However, in many cases, I need a "list within a list" so that I can have a repeating list of content within a repeating list of content and manage the design through the template instead of relying on my Content Editors to write HTML. See screenshot for an example.
In this design, I have 1 module that has "List" enabled and in that module I have 3 items called "Spotlights" which are just Content items. But then in each "Spotlight", there is a list of "PRE-CONFERENCE SESSIONS" which each have a title, link, and specific style (colour) for each item. In this setup, I simply made the "PRE-CONFERENCE SESSIONS" section a DNN Editor (tinymce) and then manually edit the HTML to make the FontAwesome caret and assign a CSS class to style each accordingly (each colour is important as it indicates the type of session). This method works but is cumbersome and involves me as a developer to maintain the list as the Content Editors don't know HTML.
I know that I can break this 1 module apart into 3 modules where each Spotlight is the Header content, and then the PRE-CONFERENCE SESSIONS links are the content item, but I was hoping to keep everything contained in 1 module for ease of maintenance. I also run into other scenarios in design where a sort of "sub" (or nested) list content would be really useful.
Is it possible to do this in 2sxc? Or is there a better way of achieving this?
I've done something similar to this where I created an Bootstrap Accordion and then also had a nested Bootstrap Accordion within that. Here's an example, maybe it'll help. https://www.crawfordinsurancegroup.com/commercial-insurance expand the Target Markets Accordion and you'll see a nested one within it.
I used the concept of Content-Blocks for this. In the main Accordion, I added another field called AccordionItem and made it an Entity Type and the Input Type as ContentBlocks. This give you the ability to select another 2sxc entity within your content,
https://www.screencast.com/t/iwCn2zmH8H
In your template, you can add a foreach to loop through the content items and render them
#foreach(var cb in AsDynamic(Content.AccordionItem)){
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<a role="button" data-toggle="collapse" data-parent="#accordion-#(Dnn.Module.ModuleID)" href="#collapse-#cb.EntityId" aria-expanded="true" aria-controls="collapseOne">
<strong>#cb.Title</strong>
</a>
<div class="panel-title"></div>
</div>
<div id="collapse-#cb.EntityId" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
#Html.Raw(cb.Content)
</div>
</div>
</div>
}
So in my example, I'm creating new Bootstrap accordions. You can reference the fields that are part of the nested entity (cb in my case) and output them in the template as you need them. Hope this helps.
Just as an added info: 2sxc 11.0 enhances lists-in-lists, so that the edit-toolbar of items-in-property-lists actually also get buttons like move-up/move-down etc.
enjoy ;)
I want to show/hide a specific div on-click, but there are some serious caveats. I should also mention I fundamentally know how to do this, using answers gleaned from similar questions here (eg., http://jsfiddle.net/6W7XD/1/), but this is more for the specific situation.
I have a CMS which will not allow me to edit the HTML at all outside of specific modules. Additionally, the CMS is one of those which disables id selectors, so I cannot use those, either.
I understand that the JSFiddle example I provided hinges on specific sibling/child selectors, but I'm wondering if there's a selector which would work for this situation. I can only edit the html in the first module (for simplicity's sake, I'll call it .module-1), but I want to show/hide .module-4
The arrangement of the code in the CMS, however, is a little bit byzantine.
This is a parred down version of what I'm working with (this is for a sidebar, by the way, housed under the beta id). I cannot edit any of the fundamental structure, except in the place marked:
<div id="beta-inner" class="pkg">
<div class="module-1 module">
<div class="module-inner">
<div class="module-content">
<!-- I can edit this area only, so this is where I would place my show/hide link. If the jsfiddle method I posted is appropriate in this situation, I'm assuming it would show/hide after clicking on links placed here. -->
<span class="span3" tabindex="0">Hide Module-4</span>
<span class="span2" tabindex="0">Show Module-4</span>
</div>
</div>
</div>
<div class="module-4 module">
<!-- this is the module I want to show/hide -->
<div class="module-inner">
<div class="module-content">
</div>
</div>
</div>
</div>
</div>
I can edit the CSS as much as I want, provided I don't use id (which has been made inaccessible to prevent people messing up the CMS? I think that's the rationale offered), and I believe that precludes the checkbox hack entirely.
I cannot use JQuery/JS/anything of that nature, since they're disabled. I know this would be a quick thing with jquery, but unfortunately, there's nothing I can do about that.
So... if this is possible... how would I go about doing it?
I'm trying to build a basic documentation site using asciidoctor. One thing I am struggling with is how I can inject a standard site header (a banner with a logo and top-level navigation) into each documentation page.
I render my asciidoc directly to html from the command line. I have tried to find a way to somehow inject an extra div element and position it fixed at the top, but I can't figure out what mechanism to use for this. My early attempts involved using docinfo.html but that gets injected into the html in the <head> element, instead of the <body>.
I am aware that full-on publication systems like Jekyll allow me to configure "front matter" that can probably take care of this, but I was hoping there was a mechanism or trick using vanilla asciidoctor that can achieve this.
Ted Bergeron on the Mailing List mentioned a simple project:
Demo website created just using Asciidoctor.
Check the corresponding repo to see the files and how to create the site (just using one command).
In summary: simply create a header asciidoc file that includes your site nav (in the demo site this is done using table markup), without including a level-0 (document) title. Include this header file right at the top in every page of your site. Then render by just running asciidoctor *.txt on your project.
--embedded option + simple post processing
With this option, asciidoctor generates only the interior part of the <body> element.
For example:
main.adoc
= Super title
== Second level
asdf
== Also second level
qwer
then:
asciidoctor --embedded main.adoc
produces:
main.html
<div class="sect1">
<h2 id="_second_level">Second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>asdf</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_also_second_level">Also second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>qwer</p>
</div>
</div>
</div>
You can then just cat a header and closing footer, and you are done.
Tested with Asciidoctor 2.0.10.
I'm trying to publish a piece of html to umbraco.
I managed to setup tinymce to accept all the html tags, however, there is still some wrong transformations being done.
When I publish this piece of html:
<div class="col-md-4">
<a href="" class="card-link">
<div class="panel panel-default">
<div class="panel-body">
<h2 class="card-link-title">Currencies</h2>
<i class="card-link-icon icon icon-money-currencies"></i>
</div>
</div>
</a>
</div>
It is transformed to:
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<h2 class="card-link-title">Currencies</h2>
<i class="card-link-icon icon icon-money-currencies"></i>
</div>
</div>
</div>
The a tag is removed. According to new html5 standards, div under a tag is valid (http://w3c.github.io/html-reference/a.html#a-changes), so I'm wondering if there's a way to make tinymce in umbraco accept the piece of html as it is
You need to edit the javascript in umbraco/lib/tinymce/tinymce.min.js. (The file mentioned by Jannik Anker in the other answer is a legacy version of tinymce, no longer used)
Look for a line
n("a","href target rel media hreflang type",u)
and try amending it to
n("a","href target rel media hreflang type",u,"div")
Make sure to clear your browser cache after editing so the updated file is used.
A quick look inside /umbraco_client/tinymce3/tiny_mce_src.js reveals a function named getHTML5() where these rules seem to be defined. In my 7.4.0 test site I'd change line 2507 to
'a[A|href|target|ping|rel|media|type][B][div]' +
BUT that's not really doing anything, even if you make the same change in /umbraco_client/tinymce3/tiny_mce.js, because the RTE editor is using a different JS entirely, namely /umbraco/lib/tinymce/tinymce.min.js in which I cannot find that same function :-s
I don't have time for much further investigation, but maybe this can get you a little bit further?
I'm trying to use Bootstrap's collapse functionality in Umbraco, but when I edit the HTML of a page in the rich text editor (TinyMCE), the data- attributes are scrubbed when I save the page so the plugin doesn't work. I've followed Allow any markup in the tinymce editor with no effect. Can I stop TinyMCE scrubbing my HTML?
EDIT: I've reproduced the problem at http://fiddle.tinymce.com/BNcaab
Try pasting the code below into the HTML editor, then saving and clickig the HTML editor again.
<a class="accordion-toggle down" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<h4>Slide 1</h4>
<span class="accordion-arrow"></span>
</a>
Umbraco has TidyHtml run after a save/publish event and unfortunately doesn't 100% sysnc with the tinyMCE valid/invalid_elements. There are a number of html5 elements and attributes that get discarded and i believe some other basic elements like <scripts> (this is for the better, i say!) and <iframes>. I can't remember the exact list of elements that tidy will squash, but this is a problem that we ran into on our latest Umbraco 4.8.11 implementation and unfortunately had to resort to disabling tidy.
Disabling Tidy can be done in the [/config/umbracoSettings.config] with the following:
<!-- clean editor content with use of tidy -->
<TidyEditorContent>False</TidyEditorContent> <!-- gross but: http://our.umbraco.org/wiki/how-tos/customizing-the-wysiwyg-rich-text-editor-(tinymce)/allow-any-markup-in-the-tinymce-editor -->
Unfortunatly, this setting is buggy: <![CDATA[*[*]]]> in the recent version of tinymce.
You will have to use the config option valid_elements and set the attributes as valid there.