JSDuck Guides: How to Generate Subsection Navigation? - jsduck

I am using the Guides feature of JSDuck where I specify README.md files in the guides.json file.
The problem I have is that I can't specify an anchor in a README.md file in guides.json.
For example, my README.md file has an H1 Head, then 5 H2 heads. Assume above each H2 header, I put an anchor--e.g, <a name="h2_1">, <a name="h2_2">, <a name="h2_3">, etc.
I want the title: (param) I enter in the guides.json to appear in the JSDuck-generated navigation on the left of the page. So, assume i entered these parameters:
{
name:foo-section-h2_1,
title: This is Header2
}
The problem is that the -section tail - which is a valid link reference in JSDuck causes the parser to fail to render the README.md into the target README.js in a directory "foo".
Anyone have any suggestions - it is a huge hinderance if one can't express subsections in the main navigation of a guide.

Unfortunately this is not supported by JSDuck. It expects each entry name in the guides.json to reference a directory name, to which it appends "/README.md" and expects to find the guide file in there. There is no workaround that I know of, and I'm the author of this whole thing.
The whole guides feature is full of various quirks and unresolved corner-cases like this. It's largely a bolt-on feature to JSDuck. My main suggestion is, that when you want to do anything more than the most basic guides, you should look for an alternative solution.
Or you could try patching this. But I took a look around the code, and it's not a simple fix to make.

Related

How can I include a template in another with pandoc?

I am using Markdown files to create a series of webpages (calling that mess a website would probably be frowned upon). I use a general template to display each page with a similar look: they all have the same header, footer, etc.
I would like to add a navigation menu, in order to have links to the other pages. I can easily generate the menu itself, what I don't know is how to insert it in the page.
What I tried is the following:
options.yml (generated by a Python script):
metadata:
title: My very excellent title
navigation: HomeOther page
standalone: true
template: template.html
template.html:
<!doctype HTML>
<title>$title$</title>
<header>Yeepee, header!</header>
<nav>$navigation$</nav>
<main>$body$</main>
<footer>Best footah evah</footer>
I then run the script: pandoc -d options.yml index.md -o index.html (and same for the other files, in a loop in a Python script)
The result is that the content of my metadata.navigation is escaped before insertion, resulting in something like <a href="index.html">Home</a><a href="other.html">Other page</a>, which is really safe in practice, but doesn't help me there.
What I would like is to have another template, say navigation.html, that contains the navigation menu to be included in my main template when using pandoc.
If this is not possible, I would like to use the same technique as above, but with an "unescaped" navigation parameter (I'm not fond of it, as it would bring a major security issue into the project).
How can I achieve this?
There are two solutions to this:
Use variables instead of metadata in your defaults file. Variables are inserted verbatim, while metadata will be escaped.
To insert the file navigation.html in a template, use ${navigation.html()}. Pandoc uses the doctemplates package for templates, see the docs on "partials" for more details.

how can I enable Markdown in fossil tickets

Fossil docs says that markdown can be used in tickets as well. But I do not manage to turn it on.
https://www.fossil-scm.org/xfer/tktview/35343257ffd02ba47880 reports a similar problem.
I read a solution in the Fossil-scm mail list but I cannot find the exact email now. However I put my TH1 templates for ticket in the following snippet:
https://bitbucket.org/snippets/ivzhh/GeL9pq
The basic idea is to set $mutype to markdown (x-markdown or x-fossil-markdown). Then add the redering code on line 75~82 in ticket-edit.tcl (the original solution is this post). The markdown rendering returns two values instead of one (default fossil wiki command). Please check the snippet.
I managed to get it work and have created a fossil repository with the three templates I created a repository with the patches on https://chiselapp.com/user/bwl21/repository/fossil-markdown-patches. The repository holds the files but also has applied the same in the configuration such that you can see how it works.
Thanks to #etc-100g

Simple template system for static web development

I am currently in the process of designing and refining a landing page. Over the time, many things have been added and handling the amount of sections and modals is not as it easy as it used to be.
Coming straight to my question: Is there a simple solution to use templates in your normal web design flow to create static web sites. I do not need the advantages of a static site generator, like also compiling my sass or minifying my js files. Interpolation and a config file are also not needed nor wanted. Do you know any system that only allows me to split my html file into multiple components which will then be saved in different html files?
P.S. I am not looking for a Javascript template engine. The creation should happen once and produce a normal html file.
You can use a template engine like pug with client tool.
Example with pug:
Step 1: Install pug-cli
npm install -g pug-cli
Step 2: Code html using pug syntax (very easy to learn). Ex: Split home page file into multiple components (header, footer in folder template_parts):
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
title Document
body
include template-parts/header.pug
h1 Home page
include template-parts/footer.pug
Step 3: Run pug-cli to auto convert html code
$ pug -w ./ -o ./html -P
Change ./ after -w by location of pug files, ./html after -o by location of html files after convert.
Without using PHP includes, I'm not sure if this can be accomplished without using some form of JS Templating engine as:
The majority of the web's content has a simple and declarative way to load itself. Not so for HTML
You should check out:
Metalsmith
An extremely simple, pluggable static site generator.
Handlebars
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
If you're using GULP/GRUNT in your workflow anyway there are include plugins:
npmjs search for 'gulp include'
npmjs search for 'grunt include'
Best solution for that is to use server side rendering as the previous answare said.
But checkout this attaribute powered by w3schools it might help you.
I know this answare is to late. but it might help others.
Thanks.

Parsing HTML in Swift other than using regex

Below is the HTML code that I want to parse through in Swift:
<td class="pinyin">
<a href="rsc/audio/voice_pinyin_pz/yi1.mp3">
<span class="mpt1">yī</span></a>
<a href="rsc/audio/voice_pinyin_pz/yan3.mp3">
<span class="mpt3">yǎn</span>
</a>
</td>
I have read that Regex is not a good way to parse through HTML but nevertheless I have written an expression that capture what I want (which are the letters between the span): yī and yǎn
Regex expression:
/pinyin.+<span.+>(.+)<\/.+<span.+>(.+)<\//Us
I was wondering how to implement it in so that I can capture both yī and yǎn at the same time and save it into an array. Also, I was wondering if there is another way that I would be able to do this without Regex.
EDIT:
I ended up using TFHpple as suggested by Rob. Although I did take a long time to figure out how to import it into Swift so I thought it would be helpful to post it here for convenience:
1. Open your project and drag the TFHpple files into it
2. At this point XCode will probably prompt you to create a bridging-header class file if you haven't included any Obj-C code in your current project. In this bridging-header file you should add:
#import <Foundation/Foundation.h>
#import "TFHpple.h"
#import "TFHppleElement.h"
3. Select the target, under General, in Linked Frameworks and Libraries (just scroll down when you are in the General tab and you will see it, add libxml2.2.dylib and libxml2.dylib
4. Under Build Settings, in Header Search Paths, add $(SDKROOT)/usr/include/libxml2
WARNING: be sure that it isn't User Header Search Paths as this is not the same
5. Under Build Settings, in Other Linker Flags, add -lxml2
Enjoy!
You can use the typical iOS HTML parser, TFHpple:
let data = NSData(contentsOfFile: path)
let doc = TFHpple(HTMLData: data)
if let elements = doc.searchWithXPathQuery("//td[#class='pinyin']/a/span") as? [TFHppleElement] {
for element in elements {
println(element.content)
}
}
Or you can use NDHpple:
let data = NSData(contentsOfFile: path)!
let html = NSString(data: data, encoding: NSUTF8StringEncoding)!
let doc = NDHpple(HTMLData: html)
if let elements = doc.searchWithXPathQuery("//td/a/span") {
for element in elements {
println(element.children?.first?.content)
}
}
I have more miles with TFHpple, so I'm personally more comfortable with that. NDHpple seems like it theoretically could be an alternative, though I'm not as crazy about it personally (e.g. why does HTMLData parameter take string and not NSData? why do I have to navigate through children to get contents of //td/a/span results? the [#class='pinyin'] qualifier doesn't appear to work, etc.). But, try both and see which you prefer.
Both require bridging header: TFHpple requires TFHpple.h in the bridging header, NDHpple requires the libxml headers there. See the documentation for each for more information.
As you've said, you shouldn't use regex to parse HTML, it will go wrong (obligatory link). Just wrap yī within another <span> and you'll see why.
Instead, you should use a full-blown HTML parser. Make sure to check out How to Parse HTML on iOS for a detailed tutorial.

Magento - locate specific core files

I am familiar with theming and using template hints in the Magento back office to locate .phtml files.
What I am not really familiar with are the core files such as app/code/core/Mage/Catalog/Model
What I need to do is override a core file like I would a core phtml file by copying it to 'my theme'.
I basically want to amend some labels which appear on the order summary page of the Magento checkout process - domain.com/checkout/cart/
I followed the trail to the phtml files using template hints. Within the app/design/frontend/default/mytheme/template/checkout/cart I found the code
renderTotals(); ?>
Now I managed, by accident, to stumble upon two of the files I wanted to change:
/httpdocs/app/code/local/Mage/Sales/Model/Quote/Address/Total/Grand.php
/httpdocs/app/code/local/Mage/Sales/Model/Quote/Address/Total/Shipping.php
I made local copies of these files (http://www.magentocommerce.com/wiki/how_to/how_to_create_a_local_copy_of_app_code_core_mage) to override the default labels, like I would if I was overriding a template file.
My question is, how can you locate core files which pertain to the 'stuff' you want to change, located in function calls such as renderTotals(); ?> in the phtml files?
Not being able to pinpoint stuff like I can with template hints is slowing me down, and I am struggling to find a solution as I am not up on all the vocab surrounding Magento yet.
Hope this makes sense and thanks in advance!
From the same settings page where you turn on Template Path Hints, also turn on the "Add Block Names to Hints" setting. This will show you PHP class names such as: Mage_Sales_Model_Quote_Address_Total_Grand to which you can deduce the folder path (underscores represent a subfolder, and the last piece represents the file name).
If you're getting a block such as Mage_Sales_Model_Quote_Address_Total_Default then sometimes it just takes a little common sense to see that it's pulling in other files from the same folder (such as Grand.php and Shipping.php). But there are generally only a couple files in the same folder, so this is pretty easy to see.
As Sid Vel said, a good Search Project functionality is helpful. But if you find yourself looking at Abstract.php of some class, often you need to look in a subfolder in that directory with the proper name to find the concrete implementations. But still, it gets you very close to where you need to be.
I always use Dreamweaver's site / directory search function. It will scan through all the files in the Core folder and tell you where the function is from. In your case, I would search for "renderTotals". You need to enable PHTML editing in Dreamweaver.
Most IDE's will allow this kind of search option. In Aptana you can Ctrl + Click on the function to open the file it is coming from. Magento takes ages to index itself on Aptana, due to its sheer size.