How to use assemble to add a directory of markdown files to my index - gruntjs

I'm trying to add static site generation to a site in order to make it more organised and easier to contribute to. The index file has a section with with an unordered list and a number of list items that all share the same formatting. I would like to dynamically load these list items from a folder of markdown files.
I'm trying to do something like
{{forEach file in the folder}}
<li>
<div class="container">
<div class="display">
{{markdown content of the file}}
</div>
<div class="code">
<pre>
<code class="language-javascript">
{{ string from YFM in markdown file }}
</code>
</pre>
</div>
</div>
</li>
{{/forEach}}
I don't actually want each markdown file to be assembled into it's own page in my dist folder, just used as a dynamic collection of partials for my index file.
Is this possible?

These two parts of an apparently never finished tutorial explain how to use markdown files as a dynamic collection of partials to integrate on the index site:
http://www.andismith.com/blog/2014/02/getting-started-with-assemble/
http://www.andismith.com/blog/2014/02/creating-a-list-of-posts-in-assemble/
Inside the loop that's iterating the md files I used this construct to get the yfm-stripped content "included" as content on the index site (took me quite a while to figure out):
{{#markdown}}
{{page}}
{{/markdown}}
Also refer to the documentation on Collections on http://assemble.io, but careful, there's some conflicting information out there as to the options hash for collections (name: posts vs. name: post, that is, singular vs. plural and autoinflection vs. inflection: post, but bottom line: stick with the variant in the links above :))

Related

Customize RSS dashlet alfresco - feed.utils.ftl

I'm new to freemarker.
I wan't to add more options in the config of the RSS dashlet and use it's value to decide if for example the title of an RSS item should be hidden.
I've found the file feed.utils.ftl which is responsible to show the title.
<#macro renderItem item target="_self">
<div class="headline">
<#if item.image??>
<img align="left" src="${item.image}" alt="" style="padding-right:10px"/>
</#if>
<h4>
<#if (item.link?exists)>
${item.title}
<#else>
${item.title}
</#if>
</h4>
<p>${item.description}</p>
<#if item.attachment??>
<div><img src="${url.context}/res/images/filetypes32/${item.attachment.type}.gif"/>${item.attachment.name}</div>
</#if>
<br />
</div>
</#macro>
There's a corresponding js file, feed.utils.js. I thought I could pass an argument from there to the ftl, for example "model.showTitle". But it has no effect.
The ftl is actively using properties of "item" so I thought maybe I can add my own property to it, but I'm unable to find where these objects are passed to the ftl. Is the macro used to include these?
If you look in share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/dashlets you'll find the web script files that implement the RSS dashlet. They are the files that start with rssfeed.
The rssfeed.get.js file is the server-side JavaScript controller for the dashlet.
If you were to add a line in that script's main function to set model.showTitle, you could access that value from the script's freemarker template.
The freemarker file that implements the dashlet is rssfeed.get.html.ftl.
One way to properly override either of these files is to copy them to web-extension and then the exact same package structure below that. Then you can make whatever changes you want without worrying about problems caused by changing the files distributed with Alfresco.
The latest, best approach would be to create a Share Module extension and override the files as part of that, but the copy-and-change approach to overriding is easiest.

How do you include a custom component resource into an AEM Social Communities handlebars template?

In AEM 6.2, I want to do this in handlebars.
<sly data-sly-resource="${'title' # resourceType='myproject/components/content/common/title'}"/>
Specifically, I overlaid the qnaforum.hbs and need to include it in there. The official documentation(link) says the correct way to do this is:
{{include this.id path="title" resourceType="myproject/components/content/common/title"}}
When done this way there are three problems:
The component appears, but then disappears from the page.
I get the warning "Forcing resource type is not supported when sling including on the client side"
There is a failed(404) GET request to http://localhost:4502/content/myproject/qna-index-page/jcr:content/qna-parsys/qna/title.html in the browser console (like it's trying to find the renderer for the title resource at that path).
In the same qnaforum.hbs file, Adobe is using the same include for their subscriptions component and it seems to work fine.
{{include this.id path="subscriptions" resourceType="/libs/social/subscriptions/components/hbs/subscriptions"}}
Does this type of include only work for Social Communities components? If so, how can I include a custom resource in the handlebars template?
I helped some one else who was facing a similar issue. I am attaching the code snippet that caused the issue you are facing (disappearing QnA list), and the fix for that.
The overlaid QnAForum component looked like this
{{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
{{#if-wcm-mode mode="EDIT" }}
<div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
{{!-- Other QnA code --}}
</div>
But code should be like this
{{#if-wcm-mode mode="EDIT" }}
<div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
{{!-- moving line1 from previous code snippet inside this parent div}}
{{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
{{!-- rest of QnA Code }}
</div>
The change I made is, moving line1 in first code snippet into line 5.
The JS console does say missing HTML, but it gets included though. The reason for console error is the way include works.We try to fetch the html, and if we fail in fetching the HTML, we ask to sling to resolve the component.

Plone 4 Zope Display Contents of specific folder TALES

Problem
I have a customer that wishes to display the entire contents of a certain folder (containing images) on their search page, should the search return 0 results. The folder is located at mysite.com/images
Setup:
As a test environment I have setup a seperate site with the following structure:
ROOT
|-Folder1 <-- current directory I am viewing
| |-images
|-Other folders
I modified the folder_summar_view template, to include the following code (I decided to modify a view to see if I could hack that to pieces to make it do what I want):
<div tal:define="image context/images/getFolderContents">
<div tal:content="i" tal:repeat="i image" />
</div>
What I see:
<Products.ZCatalog.Catalog.mybrains object at 0x9d2ddb8>
Things I've tried and further explanations
I was under the assumption that when the context/images/getFolderContents returns a brain for the 'objects' in my images folder, I could then iterate through each 'object' using my tal:repeat statement below it. Then display them on my page.
If I just use the following code:
<div tal:content="context/images/getFolderContents" />
My output is very similar to the above 'What I see' section:
<Products.ZCatalog.Catalog.mybrains object at [...]>
where [...] is another number
I've been doing some research and reading the Plone Theming book, but my code is similar to their tal:repeat examples on page 169, it seems the only difference is they are not using this on a brain (as far as I can tell).
I tried this, although it produced the same results (not sure why I tought it wouldn't):
<div tal:define="image python:context.images.getFolderContents()">
<div tal:content="i" tal:repeat="i image" />
</div>
I don't seem to be able to 'get inside' the returned brain. Everything I've looked for online doesn't quite help that much, I've also trawled through the atct_album_view and folder_listings templates to know avail. - I think I'm overlooking or missing something.
The first link I stumbled across was this, however I have moved on since that as although similar, it's not quite what I was trying to do.
The Plone guys on their chat room were kind enough to give me the context/images/getFolderContents statement, I tried to press on without asking for help again but it seems I've hit a wall.
More stuff I've tried
Using this link as inspiration I decided to try the following:
<div tal:define="image context/images/getFolderContents">
<div tal:content="image/getURL" />
</div>
But that throws an error when I try to view the template. The error reads along the lines of the 'getFolderContents brain does not have the attribute getURL' - Although image/Title displays the name of the folder, but that's not really what I need.
I also found this link however because I am making use of the default search, I don't really want to have to edit python scripts as I fear it may adversely effect the normal Plone site search. Also in this link they seem to be making use of more Python scripts. - To expand on this point, I'm not sure on how these scripts 'link' with page templates (how they know to 'talk' to one another).
Conclusion
In conclusion I need to display all of the images contained within a folder named "images" located at the root of my site, I am unable to access the contents of a returned brain using getFolderContents. And other than displaying the title of the "images" folder or the brain identifcation (<Products.ZCatalog.Catalog.mybrains object at 0x9d2ddb8>) , I have had no luck. Any help or ideas welcomed!
As getFoldercontents returns a list of brains i cant see how your code can work.
Just repeat over it with something like that :
<tal:block tal:repeat="image context/images/getFolderContents">
<a tal:attributes="href image/getURL" tal:content="image/Title"/>
</tal:block>

Changing attributes in Zope templates

I'm writing a template for an object that contains files. I'm following the theme building blocks instructions.
<a tal:attributes="href item/id">foo</a>
That makes that the liks downloads the file, as this:
foo
But I want that link points to the view page of the file, showing its title, description and also, allowing to download it. So I want to get the next output:
foo
How can I generate that attribute?
Use a string: expression adding the /view part:
<a tal:attributes="href string:${item/id}/view">foo</a>
Note that you probably want to use the .absolute_url() (for objects) or the .getURL() (for catalog results) methods instead to generate full absolute URLs for your items:
<a tal:attributes="href string:${item/absolute_url}/view">foo</a>

Building a "themeable" website

Websites like Wordpress and Tumblr allow designers to create themes that users can select. In general how would you architect a website to be flexible enough to allow custom themes for users?
Take a look on how Django does it. Django uses a Model-View-Controller-like approach in which you use views to populate a context, and then use that context to process a template. Note that Django has its own MVC terminology.
For example, if we say that our context reads as follows (in pseudo code),
author = 'mntnoe'
title = 'My Title'
content = '<p>This is my content</p>'
we could use the following template:
<h1>{{ title }}</h1>
<div class="author">Author: {{ author }}</div>
<div class="content">
{{ content }}
</div>
Now, you are free to replace the template (or collection of templates) with another one without affecting how the site works.
Seperate content from formatting by using proper html and css. That means using css files for the style rather than inline style inside the html.
You can make several css files (themes if you wish), and switch between them using javascript.
Let your serverside technology of choice simply generate easy to adjust, by css and images, html. A great site of examples is http://www.csszengarden.com/. It emits the same html every time but uses different css and images to style it. Take a look at the html they generate to get ideas.

Resources