How to get markdown working in Assemble? - assemble

I'm setting up assemble in grunt. It's a little difficult because the devs seem to have changed a lot about the installation process, but there's no updated documentation.
Does anyone know how to set up markdown processing?
I've tried a few things - I found a post that mentioned installing handlebars-helper-md so I tried that.
My assemble task looks like this:
assemble: {
options: {
layout: 'page.hbs',
layoutdir: './src/content/layouts',
partials: ['./src/content/partials/**/*.hbs', './src/content/partials/**/*.md'],
assets: 'assets',
helpers: ['handlebars-helper-md'],
data: ['package.json', './src/content/data/*.json'],
marked: {
breaks: false,
gfm: true,
langPrefix: 'language-',
pedantic: false,
sanitize: false,
silent: false,
smartLists: false,
smartypants: false,
tables: true
}
},
project: {
files: [{
cwd: './src/content/pages',
dest: './dist/www',
expand: true,
src: ['**/*.hbs']
}]
}
},
then I've put markdown files into these places (none of which work):
./src/content/markdown/privacy.md
./src/content/partials/privacy.md
Directly in the template
my template is located in ./src/content/pages/content/privacy-policy.hbs and looks like this:
title: Privacy
description: The privacy policy
tags:
- content
- legal
text: ./markdown/privacy.md
---
<div class="row">
<div class="col s12">
<p>This is a quick test for the privacy policy content</p>
<div style="border: 1px solid black">
Test 1:
{{md './markdown/privacy.md'}}
relative to the hbs file perhaps?
{{md '../../markdown/privacy.md'}}
</div>
<div style="border: 1px solid black">
Test 2:
{{>privacy}}
</div>
<div style="border: 1px solid black">
Test3:
{{md text}}
</div>
<div style="border: 1px solid black">
Test4:
{{#markdown}}
## Hello World
{{/markdown}}
</div>
</div>
</div>
smartLists: false,
smartypants: false,
tables: true
}
},
project: {
files: [{
cwd: './src/content/pages',
dest: './dist/www',
expand: true,
src: ['**/*.hbs']
}]
}
},
Then, basically two methods kind of work - but the markdown isn't processed. This is a picture of the output:

handlebars-helper-markdown is still designed to work with grunt-assemble and it looks for partials that have been registered with the partials option in the task configuration.
You just need to add ./src/content/markdown/*.md to your partials array, then use {{md "privacy"}} for the helper to find the privacy.md file to render.
I notice you have privacy.md in 2 places. In grunt-assemble this will result in only the last privacy.md partial being loaded. FYI in case you run into that issue. We'll be refactoring the grunt-assemble internals soon to match up to functionality in assemble#0.7.0 to handle situations like this.

Related

Text Popups OnMouseOvers, No WeaselOvers Allowed

Jeopardy: "a gimmick to separate it from other quiz and game shows. Because the prompt is the answer!"
This weaselly question appears to be OK, .. But what a terrible coding (Hole) I've dug for myself in the process.
I have a problem, in that I want to create several sets of:-
-- [ div text popup rollovers ]
-- [ that appear and disappear again ], but only when a mouse goes into, and then out of an <a href link, as in:-
<a href="#"
onmouseover=show('popup1')
onmouseout=hide('popup1')>Help Text One</a>
<br /><br /><br />
<a href="#"
onmouseover=show('popup2')
onmouseout=hide('popup2')>Help Text Two</a>
This weasel is an insidious creature to track down, being as all the other weasels are far too clever by half, and for the life of me I couldn't see what was really happening as the other weasels were running: nor even where the Ron Weaselly code went in my Harried Pottering Code.
This website has helped me so many times in the past, that I wanted to give a [ pop-goes-the-weasel ] back to future generations.
The answer to my rollover weasels is found here, that also has a rider attached:-
"It’s also perfectly fine to ask and answer your own question, as long as you pretend you’re on Jeopardy! — phrase it in the form of a question."
Here's the [ text rollover popup solution ] that I end up with, and this was after a day and a half of mumbling to myself and re-editing on codepen.io, then mumbling some more to get the simple coded weasel to popup on command.
Note: the resulting rollover code doesn't look that impressive, but it works. My issue now is whether it could made to work even better, and be made even simpler without me getting lost in the Triwizard Maze, populated by popping weasels of course.
Not sure if codebase.io examples are allowed here, being as all of the demonstrations I've seen thus far are in (fiddle.)
So I've created a fiddle account for you knowledgeable folks to give it the once over.
** Note: I've also magicked up a rather helpful line of helpful text: that actually gets changed by JS, to then reflect the state of the variables going (on) in the JavaScript section, the (alert) popup kept stopping the code from working.
The weaselly fiddly link is as follows:-
https://jsfiddle.net/terrymcb/4gL0ntvs/
Here's the HTML code, three blind rollover links that correspond to three divs, that are individually nested.
<p>DIV BOX ROLLOVERS</p>
<a href="#"
onmouseover=javascript:show('gcinfo')
onmouseout=javascript:hide('gcinfo')>TEXT-1</a> JS-1
<br /><br /><br />
<a href="#"
onmouseover=javascript:show('ucinfo')
onmouseout=javascript:hide('ucinfo')>TEXT-2</a> JS-2
<br /><br /><br />
<a href="#"
onmouseover=javascript:show('uainfo')
onmouseout=javascript:hide('uainfo')>TEXT-3</a> JS-3
<br /><br />
<p id="tValue"> Show in-out OBJ value. </p>
Here's the DIVS laid out.
<div id="ucinfo"><!-- which is hidden -->
<div class="dialog"><!-- is the common style -->
<p>This is the ucinfo included text.</p>
</div>
</div>
<div id="uainfo"><!-- which is hidden -->
<div class="dialog"><!-- is the common style -->
<p>This is the uainfo included text.</p>
</div>
</div>
<div id="gcinfo"><!-- which is hidden -->
<div class="dialog"><!-- is the common style -->
<p>This is gcinfo included text.</p>
</div>
</div>
The CSS, dialog box followed by three outer classes: (visible & display?) Over kill perhaps.
.dialog {
position: fixed;
top: 50px;
right: 50px;
bottom: 50px;
left: 150px;
z-index: 10;
display: flex;
padding: 1em;
background-color: rgba(0,0,0,.100);
/* opacity: 1; */
pointer-events: pointer;
transition: .25s ease-out;
}
#uainfo {
visibility: hidden;
display: none;
}
#ucinfo {
visibility: hidden;
display: none;
}
#gcinfo {
visibility: hidden;
display: none;
}
The all important JavaScript, note: I've cleaned the variables on every call, it seems to keep the function functioning, but I might well be paranoid at this point where JS is concerned. What I do know for a fact, is that calling the document.getElementById( direct keeps failing with the second call to JS, and I've no idea why! - Which is why the variables disp and vist have been used.
function hide(obj) {
disp0 = '0';
visp0 = '0';
disp0 = document.getElementById(obj);
visp0 = document.getElementById(obj);
disp0.style.display="none";
visp0.style.visibility="hidden";
document.getElementById("tValue").innerText='hide ' + obj;
}
function show(obj) {
disp1 = '0';
visp1 = '0';
disp1 = document.getElementById(obj);
visp1 = document.getElementById(obj);
disp1.style.display="block";
visp1.style.visibility="visible";
document.getElementById("tValue").innerText='show ' + obj;
}
That's all folks ..

helpful focus overlay in bootstrap

we use Material Showcase in iOS and FancyShowCaseView in Android to provide tutorial-esque
Reveal animations
Focus user on a specific view or position
Is there anything we can use for bootstrap that would do the same? We had (in desperation) looked at modal popovers but they didn't really work well.
If it's jquery compatible it is still fine.
We'd like to simply pass a div and give it "focus" and have access to some sort of dismiss callback.
Does anyone have any experience of this sort of product?
I'n not super familiar with the two showcases you mentioned, but animations are possible with bootstrap and JQuery, with a wide variety of possibilities. I'll list a few I know of below.
Pure CSS
Pure CSS Animations the most basic, but not always very elegant.
More complex CSS
This example shows how to get a simple attention getting blink animation. It may be enlightening on how to make more complex CSS animations:
The HTML:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="container">
<div class="row">
<a href="#" class="intro-banner-vdo-play-btn pinkBg" target="_blank">
<i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i>
<span class="ripple pinkBg"></span>
<span class="ripple pinkBg"></span>
<span class="ripple pinkBg"></span>
</a>
</div>
</div>
</div>
The CSS:
.pinkBg {
background-color: #ed184f!important;
background-image: linear-gradient(90deg, #fd5581, #fd8b55);
}
.intro-banner-vdo-play-btn{
height:60px;
width:60px;
position:absolute;
top:50%;
left:50%;
text-align:center;
margin:-30px 0 0 -30px;
border-radius:100px;
z-index:1
}
.intro-banner-vdo-play-btn i{
line-height:56px;
font-size:30px
}
.intro-banner-vdo-play-btn .ripple{
position:absolute;
width:160px;
height:160px;
z-index:-1;
left:50%;
top:50%;
opacity:0;
margin:-80px 0 0 -80px;
border-radius:100px;
-webkit-animation:ripple 1.8s infinite;
animation:ripple 1.8s infinite
}
#-webkit-keyframes ripple{
0%{
opacity:1;
-webkit-transform:scale(0);
transform:scale(0)
}
100%{
opacity:0;
-webkit-transform:scale(1);
transform:scale(1)
}
}
#keyframes ripple{
0%{
opacity:1;
-webkit-transform:scale(0);
transform:scale(0)
}
100%{
opacity:0;
-webkit-transform:scale(1);
transform:scale(1)
}
}
.intro-banner-vdo-play-btn .ripple:nth-child(2){
animation-delay:.3s;
-webkit-animation-delay:.3s
}
.intro-banner-vdo-play-btn .ripple:nth-child(3){
animation-delay:.6s;
-webkit-animation-delay:.6s
}
MD Bootstrap Library
The MD Bootstrap Library has more complex animations that are easy to use and require less code to get functional than pure CSS animations. The Attention Seeker animations seem most similar to some of what I saw on a quick search for Material Showcase. The link above has lots of examples on one page so you can see what kind of behaviors are supported.
UI Cookies
This site also has many free and licensed examples of bootstrap animations that are even more complex.

Instafeed JS template

I am using instafeed js to get instagram images to display on my website. I want to pull 5 images and display it together like this example that I have created on codepen. However, the template feature for the instafeed js posed a constraint on how I can organize the images the way that I had on the codepen example since there isn't a way to specifically target each image to a div.
The code on codepen showing how I would want to place each of my images.
<div class="row1">
<div class="column1">
<img src="/assets/placeholder/c1.jpg" alt="placeholder 1" style="width:100%">
<img src="/assets/placeholder/c2.jpg" alt="placeholder 2" style="width:100%">
</div>
<div class="column1">
<img src="/assets/placeholder/c3.jpeg" alt="placeholder 3" style="width:100%">
<img src="/assets/placeholder/c4.jpg" alt="placeholder 4" style="width:100%">
</div>
<div class="column1">
<img src="/assets/placeholder/c5.jpg" alt="placeholder 5" style="width:100%">
</div>
</div>
Here's the code using instafeedjs
var feed = new Instafeed({
get: 'user',
userId: '3xxxxx01',
accessToken: '3xxxxx3446',
limit: 5,
resolution: 'standard_resolution',
template: '<img src="{{image}}" />'
});
feed.run();
You can use the mock option to fetch only the image data without updating the DOM. Then use the success option to do something with that data:
var feed = new Instafeed({
get: 'user',
userId: '3xxxxx01',
accessToken: '3xxxxx3446',
limit: 5,
clientId: 'xxxxxxxxxxxxxx',
resolution: 'standard_resolution',
mock: true,
success: function(images) {
//iterate over images and add them to the DOM as you wish
}
});
This allows you to display the images in any manner you wish.

Algolia instantsearch.js Minified exception occurred; invariant

I'm getting an error from instantsearch.js that doesn't make any sense to me. The error is:
Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
I've created a fiddle with the code in question:
https://jsfiddle.net/qkqzgsv9/
Here's the HTML:
<div type="text" id="search-box" class="form-control"></div>
<table class="table table-striped">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Starts</th>
<th>Duration</th>
<th>Room</th>
<th><span class="glyphicon glyphicon-info-sign"></span></th>
</tr>
</thead>
<tbody id="hits-container">
</tbody>
</table>
<div id="pagination-container"></div>
And here's the Javascript:
var search = instantsearch({
appId: '5V0BUFDX8J',
apiKey: 'a25692c12853aea7a77c5a7125498512',
indexName: 'C86FE050-6C48-11E5-84AA-BA5F164D0BA4_events',
urlSync: { useHash: true }
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-box',
autofocus: true,
placeholder: 'Search for events by keyword, description, or event number.'
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '#hits-container',
templates: {
empty: 'No events found',
item: '<tr><td>{{event_number}}</td><td>{{name}}</td><td>{{startdaypart_name}}</td><td>{{duration_name}}</td><td>{{room_name}}</td><td><span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" title="{{description}}"></span></td></tr>'
},
})
);
search.addWidget(
instantsearch.widgets.pagination({
container: '#pagination-container'
})
);
search.start();
It happens in both Safari and Chrome. And I'm not even using the minified version of instantsearch.js. Any idea what's causing it?
This is a tricky bug and it is generated becauses this widget uses React internally.
The widget tries to render a div that will contain your template. But this is incorrect because your template contains td's which can't be rendered in div's, so the browser tries to fix that. This leads to React throwing an invariant violation error because the DOM is not what it expected. And finally you can see this specific error because React is minified in the build.
The fix would be to not use td's or wait for this issue https://github.com/algolia/instantsearch.js/issues/707 to be fixed.

How to disable multi-select-component in ember-widgets

Is there any way to disable the multi-select-component from addepar's ember-widgets?
This works for the single select-component
{{select-component
contentBinding="selectCountries"
prompt="Select a Country"
value=selectSelected
disabled=true
}}
The same does not work for the multi-select-component
{{multi-select-component
contentBinding="selectCountries"
prompt="Select a Country"
selections=multiSelectSelected
disabled=true
}}
Here's a not-working JS bin example. I looked through the source code, there doesn't seem to be an option for this.
The fastest way I could think of doing it, short of editing the source code was this (updated JS bin):
I defined an Ember component that takes an array of strings (selections) as its only parameter. I used all the classes that are used by the multi-select-component so I didn't have to redefine all the CSS:
<script type="text/x-handlebars" id="components/disabled-multi-select">
<div class="ember-view ember-select multi-select-disabled" tabindex="-1">
<div class="ember-select-container ember-select-multi dropdown-toggle js-dropdown-toggle">
<ul class="form-control ember-select-choices">
{{#each selection in selections}}
<li class="ember-view ember-select-search-choice">
<div>{{selection}}</div>
<div class="ember-select-search-choice-close">×</div>
</li>
{{/each}}
</ul>
</div>
</div>
</script>
Then I added some css to make it look like a disabled select:
.ember-select.multi-select-disabled > .ember-select-container > .form-control {
cursor: not-allowed;
background-color: #EEE;
opacity: 1;
}
.ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice {
background-color: #D8D8D8;
cursor: not-allowed;
}
.ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice .ember-select-search-choice-close {
cursor: not-allowed;
}
.ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice .ember-select-search-choice-close:hover {
background-color: #D8D8D8;
}
It's used like this:
{{#if isInputDisabled}}
// Stick your multi-select-component in here
{{else}}
{{disabled-multi-select selections=multiSelectSelected}}
{{/if}}