Websharper : Using LI tags - f#

I want to create something like that :
<ul>
<li>menu1
<ul>
<li>sub-menu1</li>
</ul>
</li>
<li>menu2</li>
</ul>
So i write the following code using WebSharper :
let el =
UL [
LI [
Text "menu1"
UL [
LI [Text "sub-menu1"]
]
]
LI [Text "menu2"]
]
But it says that
UL [
LI [Text "sub-menu1"]
]
should have the type IPagelet but currently have the type Element.
Does anyone have an idea on how to put a text + something else under an li element using WebSharper ?
Edit: Just to say that I have a bug on stakc, I can't comment or accepted the answer of #Tarmil...

The issue here is that two elements in the same list, Text "menu1" and UL [...], have types IPagelet and Element respectively. Element is a subtype of IPagelet, so this should work, but unfortunately the F# type inference has some difficulties with this situation. So you need to help it by casting UL [...] to IPagelet:
let el =
UL [
LI [
Text "menu1"
UL [
LI [Text "sub-menu1"]
] :> IPagelet
]
LI [Text "menu2"]
]
In fact, this problem would be eliminated if the combinators had type seq<IPagelet> -> Element instead of seq<#IPagelet> -> Element. We will probably change them to that in the future, but since it would be a breaking change, we're keeping it for the next major version.

Related

How to generate the pagination links in Fluid by myself

I have an TYPO3 extension which shows a list of records. As it are more than 40 pages I would like to provide an additional alphabetic index which enables visitors to jump directly to the beginning of a character.
In general all is working - except the link to the n-th page.
I have the fluid variables cur containing current character (e.g. M) and the necessary page number in pageNumber (e.g. 23).
How can I get the correct url which should look like:
https://mydomain.tld/path/to/list?tx_myextension_myextension[#widget_0][currentPage]=23&cHash=a6193a7eab129df4789343911221584b#jumplabel_M
either
<a class="page-link" href="{f:uri.page(additionalParams:{tx_myextension_myextension{#widget_0:{currentPage:pageNumber}}})}#jmplabel_{cur}">{cur}</a>
nor
<a class="page-link" href="{f:uri.page(additionalParams:{tx_myextension_myextension[#widget_0][currentPage]:pageNumber})}#jmplabel_{cur}">{cur}</a>
call the f:uri.page VH. The result is an unreplaced string in the href-parameter.
<a class="page-link" href="{f:uri.page()}?tx_phonebook_phonebook[#widget_0][currentPage]={pageNumber}#jmplabel_{cur}">{cur}</a>
looks ok, but misses the cHash and therefore results in 404 page not found.
Check how Georg Ringer does it in his News extension. Actually that's a solution for your pagination.
PaginateAdditionalParamsViewHelper.php:
https://github.com/georgringer/news/blob/master/Classes/ViewHelpers/Widget/Ajax/PaginateAdditionalParamsViewHelper.php#L30
public function render()
{
$page = (int)$this->arguments['page'];
if ($page === 0) {
return [];
}
$params = [
'tx_news_pi1' => [
'#widget_0' => [
'currentPage' => $page
]
]
];
return $params;
}
And in some template:
https://github.com/georgringer/news/blob/master/Resources/Private/Templates/Styles/Twb/Templates/ViewHelpers/Widget/Paginate/IndexAjax.html#L56, especially additionalParams key.
<f:widget.link data="{container:recordId,link:'{t:uri.ajaxAction(contextRecord:\'tt_content:{recordId}\', pluginName: \'pi1\',additionalParams:\'{n:widget.ajax.paginateAdditionalParams(page:0)}\')}'}">
<f:translate key="paginate_previous" />
</f:widget.link>

Build html tag using variable name for element

I want to use a string variable which could contain the values h1, h2, h3 etc to build some html. This works fine for the opening tag, but does not work nicely for the closing tag. If I write
#{ var tag = "h1" ; }
<#tag>some title here</#tag>
I end up with the html
<h1>some title here</#h1>
A work-around which seems to work is
<#tag>some title here<#("/"+tag)>
but it's pretty ugly. Is there some escape sequence I need to use here?
You can use Html.Raw.
string lineTemplate = "<h{0}>{1}</h{0}>";
for (int tagCounter = 1; tagCounter < 7; tagCounter++)
{
#Html.Raw(string.Format(lineTemplate, tagCounter, "Header "+ tagCounter));
}
i am not sure which Razor version you are using
but i tested your code in my MVC4, it works perfectly
it will render <h1>something</h1>

How to capture and append to an HTML body tag with patterns in lua

I have an HTML page with the following opening body tag:
<body class="one two three" id="five" data-key="value">
And I'm using lua patterns append a div to the end:
<body class="one two three" id="five" data-key="value"><div></div>
How do I do this?
Note: I've used the following before to insert a script before the head tag:
body_filter_by_lua_block {
replacestr = "<script></script></head>"
ngx.arg[1] = ngx.re.sub(ngx.arg[1],"</head>", replacestr)
return
}
Therefore, if I add my div to replacestr, what do I replace ngx.re.sub(ngx.arg[1],"</head>", replacestr) with?
I did it.
ngx.re.sub(ngx.arg[1], '(<body[^>]*>)', "${0}" .. replacestr)

Is there any alternative to "a href" in html? I'm strictly mean "a"

Is there anything I can use instead of 'a' selector. Maybe something like <url href=""> or something similar. I'm trying to avoid 'a'. The reason for that is that I'm working with jQuery and its code modyfying every 'a' in the section. I want to keep some 'a's untouched. This is what i have:
HTML:
<div> <!-- █ POST █ -->
<h3>14 June 2012 - Noisettes for Spotify</h3>
<p>
We have supplied a sound equipment for the Noisettes concert on Spotify company event. Please enjoy <a class="inlink" target="_blank" href="http://www.youtube.com/watch?v=KRFHiBW9RE8">Noisettes on YouTube</a>.
</p>
</div>
JQUERY:
$(document).ready(function(){
var $posts = $('#items > div');
var maxHeight = 32;
$('a', $posts).live('click', function(){
var $par = $(this).prev('p');
var oH = parseInt($par.attr('class'));
if($par.height() == oH){
$par.animate({
'height': maxHeight
}, 'medium');
$(this).text('read more...');
}else{
$par.animate({
'height': oH
}, 'medium');
$(this).text('read less...');
}
});
$posts.each(function(){
if($('p', this).height() > maxHeight){
$('p', this)
.attr('class', $('p', this).height())
.css('height', maxHeight+'px');
$(this).append($('<a class="link">').text('read more...'));
}
});
});
It replaces my 'Noisettes on YouTube' (from html code) with 'read less...' (still working but wording changes. I was trying to use CSS but it still replaces it.
I hope I made myself clear on this :) Thanks for help in advance.
You should use a more specific selector:
$posts.find('a.SomeClass')...
Then change the links that you want this to apply to to <a class="SomeClass">.
Give all the "a" that you want to change a particular class, say "changeable", and then change your selector from $('a', $posts) to $('a.changeable', $posts)

How to parse Markdown in PHP?

First, I know, there already is a Markdown parser for PHP.
I also took a look to this question but it doesn't answer to my question.
Obviously, even if the title mention PHP, if it's language agnostic, because I'd like to know what are the step I've to go through to do that.
I've read about PEG, but I've to admit, I didn't really understand the example provided with the PHP parser.
I've also read about CFG.
I've found Zend_Markup_Parser_Textile which seems to construct a so called "Token Tree" (what's about it?) but it currently unusable. (Btw, Textile is not Markdown)
So, concretely, how would you go to this?
Obviously I though about using Regex but, I'm afraid.
Because Markdown supports several syntaxes for the same element (Setext and atx).
Could you give some starting point?
You should have a look at Parsedown.
It parses Markdown text the way people do. First, it divides texts into lines. Then it looks at how these lines start and relate to each other. Finally, it looks for special characters to identify inline elements.
There is PHP Markdown Extra that seems to be popular, you could start by looking at its source.
Also, there is an object-oriented implementation of Markdown which is faster: markdown-oo-php
Ciconia - A New Markdown Parser for PHP is a good one I found.
You just need 3 things to do :
1.Install Ciconia and parse file according to the document.
2. Add corresponding css theme to make it nice, like github markdown style or here.
3. Add syntax highlighting javascript, like google Javascript code prettifier.
Then everything will look pretty good.
If you want a complete example, here is my working demo for github style markdown:
<?php
header("Content-Type: text/html;charset=utf-8");
require 'vendor/autoload.php';
use Ciconia\Ciconia;
use Ciconia\Extension\Gfm;
$ciconia = new Ciconia();
$ciconia->addExtension(new Gfm\FencedCodeBlockExtension());
$ciconia->addExtension(new Gfm\TaskListExtension());
$ciconia->addExtension(new Gfm\InlineStyleExtension());
$ciconia->addExtension(new Gfm\WhiteSpaceExtension());
$ciconia->addExtension(new Gfm\TableExtension());
$ciconia->addExtension(new Gfm\UrlAutoLinkExtension());
$contents = file_get_contents('Readme.md');
$html = $ciconia->render($contents);
?>
<!DOCTYPE html>
<html>
<head>
<title>Excel to Lua table - Readme</title>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<link rel="stylesheet" href="./github-markdown.css">
<style>
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
</style>
</head>
<body>
<article class="markdown-body">
<?php
# Put HTML content in the document
echo $html;
?>
</article>
</body>
</html>
Using regexes.
<?php
/**
* Slimdown - A very basic regex-based Markdown parser. Supports the
* following elements (and can be extended via Slimdown::add_rule()):
*
* - Headers
* - Links
* - Bold
* - Emphasis
* - Deletions
* - Quotes
* - Inline code
* - Blockquotes
* - Ordered/unordered lists
* - Horizontal rules
*
* Author: Johnny Broadway <johnny#johnnybroadway.com>
* Website: https://gist.github.com/jbroadway/2836900
* License: MIT
*/
class Slimdown {
public static $rules = array (
'/(#+)(.*)/' => 'self::header', // headers
'/\[([^\[]+)\]\(([^\)]+)\)/' => '<a href=\'\2\'>\1</a>', // links
'/(\*\*|__)(.*?)\1/' => '<strong>\2</strong>', // bold
'/(\*|_)(.*?)\1/' => '<em>\2</em>', // emphasis
'/\~\~(.*?)\~\~/' => '<del>\1</del>', // del
'/\:\"(.*?)\"\:/' => '<q>\1</q>', // quote
'/`(.*?)`/' => '<code>\1</code>', // inline code
'/\n\*(.*)/' => 'self::ul_list', // ul lists
'/\n[0-9]+\.(.*)/' => 'self::ol_list', // ol lists
'/\n(>|\>)(.*)/' => 'self::blockquote ', // blockquotes
'/\n-{5,}/' => "\n<hr />", // horizontal rule
'/\n([^\n]+)\n/' => 'self::para', // add paragraphs
'/<\/ul>\s?<ul>/' => '', // fix extra ul
'/<\/ol>\s?<ol>/' => '', // fix extra ol
'/<\/blockquote><blockquote>/' => "\n" // fix extra blockquote
);
private static function para ($regs) {
$line = $regs[1];
$trimmed = trim ($line);
if (preg_match ('/^<\/?(ul|ol|li|h|p|bl)/', $trimmed)) {
return "\n" . $line . "\n";
}
return sprintf ("\n<p>%s</p>\n", $trimmed);
}
private static function ul_list ($regs) {
$item = $regs[1];
return sprintf ("\n<ul>\n\t<li>%s</li>\n</ul>", trim ($item));
}
private static function ol_list ($regs) {
$item = $regs[1];
return sprintf ("\n<ol>\n\t<li>%s</li>\n</ol>", trim ($item));
}
private static function blockquote ($regs) {
$item = $regs[2];
return sprintf ("\n<blockquote>%s</blockquote>", trim ($item));
}
private static function header ($regs) {
list ($tmp, $chars, $header) = $regs;
$level = strlen ($chars);
return sprintf ('<h%d>%s</h%d>', $level, trim ($header), $level);
}
/**
* Add a rule.
*/
public static function add_rule ($regex, $replacement) {
self::$rules[$regex] = $replacement;
}
/**
* Render some Markdown into HTML.
*/
public static function render ($text) {
$text = "\n" . $text . "\n";
foreach (self::$rules as $regex => $replacement) {
if (is_callable ( $replacement)) {
$text = preg_replace_callback ($regex, $replacement, $text);
} else {
$text = preg_replace ($regex, $replacement, $text);
}
}
return trim ($text);
}
}
echo Slimdown::render ("# Title
And *now* [a link](http://www.google.com) to **follow** and [another](http://yahoo.com/).
* One
* Two
* Three
## Subhead
One **two** three **four** five.
One __two__ three _four_ five __six__ seven _eight_.
1. One
2. Two
3. Three
More text with `inline($code)` sample.
> A block quote
> across two lines.
More text...");
Origin https://gist.github.com/jbroadway/2836900

Resources