So it seems quite simple (yet I cannot make it work)..
I would like to set a custom property in the options object in Assemble within my Gruntfile and would like to access it from one of my partials context in YML.
So say I have a folder in my project with all my documentation in .md-files.. (app/src/documentation)
In the options object I would like to do something like:
assemble: {
options: {
jsDoc: '<%= yeoman.app %>/src/documentation',
},
And then within one of my partials I would like to do the following:
---
title: Headings
status: In progress
tabs:
- tab: html
- tab: css
- tab: js
- tab: description
- tab: links
jsDoc: filename.md
---
<!-- Show markdown documentation -->
{{md jsDoc}}
Right now I get an error saying :
Warning: Cannot call method 'indexOf' of undefined Use --force to continue.
Can anyone give any hints/ideas on how to get this to work?
Bonus info:
To make things a little more complicated, I would actually like to use {{md jsDoc}} in another partial (using my custom helper), where I have access to my other partials context..
I've made a couple of gists showing the code I have right now.
It's located here:
https://gist.github.com/dgsunesen
"sgComponent helper" - showing how i use my helper
"Gruntfile" - showing my current options for my custom helper.
"Headings" - partial that needs to access jsDoc option and get rendered inside of sgComponent.hbs
"sgComponent.js" - my custom helper that takes the base partial and the partial to be render inside of it
sgComponent.hbs - my base partial where my Headings-partial is rendered within.
Thanks in advance!
Dan
If you're only using the partial matter inside it's own partial, then it's pretty simple...
---
title: Headings
status: In progress
tabs:
- tab: html
- tab: css
- tab: js
- tab: description
- tab: links
jsDoc: "<%= jsDoc %>/filename.md"
---
<!-- Show markdown documentation -->
{{md headings.jsDoc}}
You can use lodash templates to combine the main jsDoc property with the one in the partial. Then reference based on the name of the partial {{headings.jsDoc}}
But from looking at your helper code, it looks like you want jsDoc to be set inside another partial (that's dynamically added), then used inside the sgComponent file.
To do that, I think instead of doing the process content you'll need to actually combine the variables from the main options with the jsDoc in the partial. If you try doing process content with the lodash, it'll get into a loop because of how you're getting the front matter in the helper.
Also, make sure parameters are being passed in properly because that indexof error could be coming from glob or yfm.
Hope this helps some.
Related
I have a TLDR switch on my blog.
This switch is a javascript that hides any element with the class="tldr" attribute attached to it, or unhides it.
I've created custom block_formats in TinyMCE for Paragraphs that will let me create a Paragraph with the TLDR class attached.
However, when I insert a codesample using that plugin it will generate a pre block that I can not format afterward.
I've already tried to create a custom PRE block with the TLDR class but TinyMCE won't let me apply this format to the code sample block that has been created.
Does anyone have another solution for my problem or can you see if I'm doing anything wrong?
Is there another way in TinyMCE to add attributes to elements that have been added to the code already?
I've tried the code viewer but that doesn't allow me to modify the generated HTML code.
You can use formats and style_formats to customize the styling options available to users and how they operate.
To add a custom pre block with class="tldr", you can add this config to TinyMCE:
style_formats: [
// Adds a pre format to style_formats that applies a 'tldr' class
{ title: 'TLDR', block: 'pre', classes: 'tldr' }
]
See this TinyMCE fiddle: http://fiddle.tinymce.com/Ikhaab
On its own, this will override the default style formats, but you can add them back in and position the new TLDR option within the Blocks submenu as shown here: http://fiddle.tinymce.com/Jkhaab
Resources:
https://www.tiny.cloud/docs/configure/editor-appearance/#style_formats
https://www.tiny.cloud/docs/configure/content-formatting/#formats
https://www.tiny.cloud/docs/demo/format-custom/
I installed the pug-bootstrap module in a nodejs project. I am trying to create a menu from a navbar.
I have done those files:
layout.pug:
include /node_modules/pug-bootstrap/_bootstrap.pug
index.pug:
extends layout
block head
+navbar("menu")
+nav_item("#", undefined, true)
string test
block body
h1= title
p Welcome to #{title}
the _bootstrap.pug contains the bootstrap css file : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css. But it is not loaded on the webpage.
Someone know why? And how to fix that?
Any help would be appreciate.
When you extend a part of a template with block, you're replacing any code that was already in that block, before. In this case, I assume that the head included a reference to that CSS file, which you're overwriting.
Generally speaking, use append instead of block for the head section (see this page from their docs). That way, previous content of parent templates is not overwritten.
In your usecase, I am doubtful whether you should be placing anything at all in that head block, since it is reserved for meta-tags, not for actual visible content. In other words: You'll need to move the code you have there to the body anyway, since visible document objects belong in the body, not in the head.
I have implemented JQuery Masonry into my portfolio website and I am also utilizing the Infinite Scroll feature.
JQuery Masonry Homepage: http://masonry.desandro.com/
Portfolio page with working Infinite Scroll: http://www.owenprescott.com/3d-digital-art.php
In order to append the next set of images it is instructed to create new html "pages" like this: 2.html, 3.html, 4.html and so on (organised numerical order). The problem is most of my site is .PHP not .HTML and I use includes etc to structure the site. I am hoping to find a way around having to label the pages in the above numerical order (& .HTML) and instead use the existing semantic PHP structure that describes the projects with keywords in the URL.
I hope this is an understandable dilemma I am putting across, I am still learning JQuery so I might struggle with the appropriate terminology. To put this another way, if you open the Masonry project files, how would you alter the code so that you append content for specific URL as below.
Pages:
2.html - - - > /conceptual-urban-architecture-3d.php <br>
3.html - - - > /futuristic-outdoor-architecture-3d.php
Try "path" option:
path: function(pageNumber) {
return "/your/custom/url";
}
I need to do the following,
I have a <select> (a list of team names), when the user selects a team, I get relevant information re: the team and display it.
How do I do this in jade?
I'm trying the following, (but I'm wrong obviously, I don't see a lot of documentation out there).
Briefly, I'm doing a include test.jade on my main page, and a res.render('test', {team: team_obj});
jade:
h1 #{team}.name
h2 #{team}.homeGround
h3 #{team}.manager
h4 #{team}.aka
nodejs:
collection.findOne(query, function(err, team_obj){
res.render('test', {team: team_obj});
});
I'm getting the information correctly in team_obj.
Get the following error when I run the app,
team is not defined
Now this is happening because test.jade is getting rendered before I feed it the team_obj.
Questions:
1) Am I doing this right? is include the correct way of partially rendering jade views? if yes, how do I make sure it renders only when the user has selected an option?
2) Is there a partial views concept in jade I'm unaware of?
1) you should use #{team.name}
2) you can't change the team object once the selector is changed. the template was rendered once with the database result. - such functionality should be handled by client side JavaScript and AJAX calls. partials in templates are just a way to share common pieces of templates, and its done in Jade via include.
I don't know what you're rendering and including and when.. but id you use a template variable like #{team.name} you have to make sure that the template was rendered with the team object.
In asp.net webpages framework what is the difference between using a content block versus a helper?
They both seem to be used to output HTML to multiple pages. They both can contain code and both can pass parameters.
Are there other differences? When should you use a helper versus a content block?
More info:
With Content Blocks we create a .cshtml (for example _MakeNote.cshtml) file to hold the content we want to insert into a page. Then we use:
#RenderPage("/Shared/_MakeNote.cshtml")
to insert the content into a page. We can pass parameters to the content block like this:
#RenderPage("/Shared/_MakeNote.cshtml", new { content = "hello from content block" })
It's somewhat like an include file, but I think does not share scope with the parent page.
With Helpers we create a .cshtml page in the App_Code folder (for example MyHelpers.cshtml) and place methods in that page which we want to call. The method looks something like this:
#helper MakeNote(string content) {
<div>#content</div>
}
The helper is called by using:
#MyHelpers.MakeNote("Hello from helper")
There isn't a lot of difference functionally. Helpers need to go into an App_Code folder - unless you download VWD or Visual C# Express and compile a binary - and the App_Code folder doesn't translate well to the MVC framework. Of course, that's only relevant if you want to upgrade to MVC at some point.
I would use a helper for generic functional snippets like your MakeNote. I would use a "content-block" (partial, really) for repeated site-specific sections of a page.