I am trying to implement a proof of concept for a personal project which is a hypertextual blog. The project is built using expressjs and I am storing the blog data in a JSON file. Part of the structure of the JSON file is as follows:
{
"id": 1,
"name_kanji": "δΊδΈε ",
[...]
"trivia": [ "Favorite food are Mikan and bell pepper stuffed with meat",
"Lightstick Colors are red and white",
"Favorite color is mustard yellow",
"Favorite Nogizaka46song is Arigachi na Renai",
"Her favorite animes are 86 Eighty Six, Vivy and No Game No Life",
"She likes anime songs, vocaloid, Yonezu Kenshi and Yorushika",
"Her favorite mangas are Magi and Tokimeki Tonight",
"She was the first Nogizaka46 5th Generation Member to be announced"
],
"tv_participation": ["Nogizaka Shin Star Tanjo!",
"Nogizaka Under Construction",
"Music Blood"],
"single_participation": ["Actually...",
"Suki to Iu no wa Rock daze!",
"Koko ni wa Nai Mono"],
[...]
}
Ideally, I want to be able to add links to specific words in the JSON file, and then render them as hyperlinks within pug.
As a more specific example:
block col-2
ul
each val in member.trivia
li= val
I am trying to add hyperlinks to specific words within the JSON file, and then render them as hyperlinks within a Pug template. For example, I want to turn the words 'Mikan', 'Lightstick Colors', 'Arigachi na Renai' etc. into hyperlinks so that I can connect them to other pages. I have tried adding the hyperlink directly in the JSON file but it did not work. Is there a straightforward way to do this that I am not aware of?
If you store the full HTML anchor tag as escaped text within a JSON text string, you can use unescaped interpolation to render the link:
JSON
{
"myProperty": "Lorem <a href=\"#\">Ipsum</>"
}
Pug
ul
li!= myProperty
HTML
<ul>
<li>Lorem Ipsum</li>
</ul>
It's not very pretty though. And be sure to heed the warnings about unescaped interpolation on that page in the Pug docs.
Is there a reason you're writing and storing the blog data in JSON and not in Pug?
Related
Just to make things clear, I have used an RTE in the backend to store some description. Later, through an api, I am receiving the description along with other details as a response. Now the styles are intact till now. For example, bold headings. But when I render it in the HTML document using innerHTML property, all I see is unformatted text. The headings are not bold anymore.
Here's a part of response:
</p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">Features</span> \n </p>\r\n\n\r\n<p>Gives even skin tone, smoother complexion and sculpted facial features.
Clearly, font-style="bold" can be seen here. But after this, the rendered version does not contain those styles.
Here's the full response:
"cart_count":2,
"images":[
],
"success":true,
"message":"Sucessfully",
"data":{
"product_id":1,
"name":"Dr G Butterfly Gua Sha",
"category_id":1,
"category":"Skin Tool",
"description":"<p>Dr G Butterfly Rose Quartz Gua Sha is a beauty and wellness tool designed to heal and enhance natural beauty. It lifts and sculpts your face, drains the lymph node, which reduces puffy eyes and face. By scraping with repeated strokes on the surface of the skin, this tool helps stimulate muscles and increases the blood flow. \n </p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">Features</span> \n </p>\r\n\n\r\n<p>Gives even skin tone, smoother complexion and sculpted facial features. Reduces the signs of ageing and gives younger-looking skin. Increases lymphatic function. Stimulates blood circulation. Improves the appearance of dark circles and reduces under-eye puffiness. </p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">How To Use \n</span></p>\r\n\n\r\n<p>Apply Dr G oil or Dr G gel as per your skin type covering the face and neck. </p>\r\n<p>Hold the butterfly gua sha tool firmly and sweep across gently up and out, starting with the neck, cheeks, jawline, chin, around the mouth, and slowly glide under the eyes, across your eyebrows and from your forehead up to your hairline. </p>\r\n<p>You can sweep it 3-5 times per area. </p>\r\n<p>Recommended at least a few times a week for best results. </p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">About Dr G</span> \n </p>\r\n\n\r\n<p>Dr G offers luxury skincare products, backed by over a decade of dermatology expertise and on-ground practice. Made for Indian weather conditions, with variants for different skin types, including sensitive skin, and to address specific skin concerns - these innovative products are a perfect balance of nature and science. Drawing from ancient Ayurveda and combining natural extracts with skin-safe science, Dr G's range of products bridge modern skincare with holistic science.</p>",
"short_description":"Sculpts, Tones, Reduces Puffiness, Lifts",
"max_quantity":500,
"status":1,
"in_stock":1,
"measurement":[
{
"is_cart":true,
"ordered_quantity":2,
"is_wish":false,
"discounted_price":1400.0,
"weight":"200 Gram",
"price":1400.0,
"prod_id":1,
"percentage":100,
"max_quantity":500
}
]
}
}
The HTML from your response isn't valid. You can easily test it, if you copy the HTML string from your response to a text file with .html file ending and open it with your browser (index.html for example). Or use a validator like this one: https://www.freeformatter.com/html-validator.html
Let's pick one part from the HTML string which has wrong characters and gets displayed unformatted:
<span style=\"font-weight: bold;\">Features</span> \n
If you remove the backslashes \ here this peace gets rendered correctly:
<span style="font-weight: bold;">Features</span> \n
I would reccomend you to encode the HTML before sending it to the frondend. You could use Base64 which can be easily encoded in the backend and decoded on the frontend before displaying it.
If this "wrong" characters are already there when you recive this HTML (on your Backend) you have to parse it first to clean it.
I want to use some informative icons that depict specific meanings. Hover your mouse over an icon and you see a tooltip showing what it means. Allow non-graphical user agents (e.g. browsers that do not support CSS, text-to-speech devices) to read it too.
Consider you write a list
Chicken sandwich
Tofu sandwich - vegan
Chicken salad
House salad - vegan
and you want to change this as below, where π₯ means "vegan".
Chicken sandwich
Tofu sandwich - π₯
Chicken salad
House salad - π₯
One idea I come up with is to write
* Chicken sandwich
* Tofu sandwich - &&VEGAN&&
...
then replace the string &&VEGAN&& with <span class="vegan">VEGAN</span>,
Also add custom CSS snippets
span.vegan {
display: none;
}
span.vegan:hover {
visibility: visible;
/* some position settings for the tool tip go here */
}
span.vegan::before {
display: inline;
font-family: "Font Awesome";
content: "\f06c";
}
The string replacement can be done every time I perform make html followed by a shell command
find /path/to/build/html/ -name *.html -exec \
sed -i 's/\&\&VEGAN\&\&/\<span class="vegan"\>VEGAN\<\/span\>/g' {} \;
Does Sphinx or Read the Docs already have this sort of feature?
Create a (custom) directive. Use replace:: to put some other texts, image:: to put an image, and unicode:: to put a (special) Unicode character.
In the original question, I wanted the cucumber character represents every |vegan|. Create the following directive in the same reStructuredText source document or the rst_prolog in conf.py which allows you to apply this directive in entire documents.
.. |vegan| unicode:: U+1F952
* Chicken sandwich
* Tofu sandwich - |vegan|
* Chicken salad
* House salad - |vegan|
Run make html and open the created HTML file with a browser. You will see a result like below:
Restriction: Simply replacing directive texts by another texts or images will leave web accessibility concerns.
As stated in the original question, none of these directive methods can have the title attribute. In the HTML file, you will want to replace |vegan| by the following HTML code:
<span title="Vegan">🥒</span>
The example directive will only makes π₯. On a web browser, hover your mouse over the cucumber character and you will see a tooltip saying "Vegan". It will also allow you to see the meaning of this character even if your browser doesn't support some special characters including that emoji.
Workaround 1. Make HTML anyway and replace the text by a desired one. Find and replace every cucumber character by the HTML code. In Bash, use
find /path/to/build/html/ -name *.html -exec \
sed -i 's/π₯/<span title="vegan">π₯<\/span>/g' {} \;
Workaround 2. Use different directives for each output format type. (In research. Someone answer StackOverflow: "Sphinx: Use a different directive for a different output format".)
I have bits like the following in an XML file that is a data source for an HTML page that uses CSS and javascript only. The special XML codes are my own, and I want to process them with javascript.
<listitem>regular text could be in here</listitem>
<listitem>possibly with <b>HTML markup</b></listitem>
<listitem>or <special>special xml</special></listitem>
What I dream of is a way to get from .getElementsByTagName("listitem") to the following array.
["regular text could be in here", "possibly with <b>HTML markup</b>", "or <special>special xml</special>"]
That way, I could process each listitem as part of the array. However, the XML parser breaks apart all the XML for each listitem. Other than using CDATA, which gets messy, is there another way?
I think the answer is:
Array.prototype.slice.call(document.getElementsByTagName("listitem")).map(function(x) {return x.innerHTML})
It will return:
["regular text could be in here", "possibly with <b>HTML markup</b>", "or <special>special xml</special>"]
I have a XML document with this specitic structure :
<ul>
<li>
the
dog
is black
</li>
<li >
the
cat
is white
</li>
</ul>
But I have also this :
<ul>
<li>
the bird is blue
</li>
<li >
the
frog
</li>
</ul>
I don't know if there is a <a> in my <li> and where is it.
I would like the XPath query to get sentences like "the dog is black", "the cat is white", "the bird is blue" and "the frog"
Thanks !
If you're bound to XPath 1.0, you cannot get the sentences as separated tokens. You can get all text in all list elements using
//ul//text()
, but for the first HTML snippet this will return something like "the dog is black the cat is white".
If you need the sentences seperated, retrieve the list items and but the sentences together from outside XPath (eg. PHP, Java, ...; whatever you're using). How to do this differs from language to language, have a look at the reference or refine question / ask another question.
//ul/li
With XPath 2.0 you've got more luck and you can use one of these queries:
//ul/li/data(.)
//ul/li/string-join(.//text. ' ')
If the first one returns what you need use it, if there are problems with whitespace (whitespace handling is different for different implementations, but usually can be configured) go for the more flexible second query and adjust it as needed.
Thanks for your repply, I use Xpath for an iOS application with an HTML Parser : hpple (https://github.com/topfunky/hpple)
I think it use Xpath 1.0, because the log say me string-join function isn't recognized
//ul//text()
works but he return one word per word, and not one line per line
So I'm creating a game for work, which grabs question and answer data from a JSON file that someone helped me create. All I want to figure out, is how to make the string that is returned from the data below display with line breaks for each of the multiple choice answers:
{
"question": "1",
"text" : "How many times has the Actuarial computer lab been moved? A. Once B. Twice C. Six times D. Fifteen times",
"answer" : "1,1"
},
I've been googling for a while (lots of Stackoverflow threads) but every solution appears to be something different or slightly more complex than what I want to do.
Here is how I'm displaying the string into my div:
var displayDiv = $("#textdisplay");
displayDiv.text(question.text);
You probably want to add <br/> or <p> tags to your text in the JSON file itself. If you've got a text editor that can do regex string replacement, then you want to do something like
Find: ([ABCD]\.\s)
Replace: <br/>$1
Or if you're on a machine with sed, you can use
sed -E 's/([ABCD]\. )/<br\/>\1/g' test.txt
That'd be my recommendation, at least. If you can't change the JSON file, use the same Regex to add breaks in JavaScript, like so:
question.text.replace(/([ABCD]\. )/g, '<br/>$1')