IN razor format, we can use #Html.Raw to add meta-tags from string, for example, in controller we can write;
Model header = new Model();
header = "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">";
in Layout Page we can add the above string in <Head> section as
#Html.Raw(Model.header)
How can I do the same in Index.Html in Angular 8 (not using razor). The string "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">"
is retrieved from DB and need to be appended to "<Head>" section in index.html. I do not have control over what will be provided from DB. But whatever will be the value it will be <Head> or section related, and may also include <scripts>.
Thanks
Found the answer, for someone who is also looking for this solution:
let fragment = document.createRange().createContextualFragment("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">");
document.head.append(fragment);
Related
I am trying to send the html content of the file (report.html in the pic below) and this file opens up in browser perfectly as the reference of css works fine when opening it from the folder. But when I am trying to send this file as html body using nodemailer it just loses all its styling and in email I am just receiving a plain text email just like below.
Can someone tell me how to tell nodemailer that all the css are present of this file is present in the html-reports folder and it should appear in the email body same as it opens up in the browser.
If anyone using WDIO and sharing any such information over email then please share this info with me.
I am using latest version of the WDIO btw viz. V7.7 (cucumber framework)
Basically I want to achieve below use case -
After running the test html report comes of all the cucumber scenario pass/fail/skipped along with error trace
I want to share this info in email body and not as attachment and my email body should be properly styled
Thanks much in advance !
To achieve the results that you mentioned you have to use internal CSS, this is placed in the head section of your report.html, within a style element.
So where you have the link to your external CSS you want to replace that with the actual CSS that is in the report-styles.css and place it in a style element.
report-styles.css:
h1 {
color: blue;
}
p {
color: red;
}
report.html before:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="report-styles.css">
</head>
<body>
<div>Your report</div>
</body>
</html>
Replace the CSS link with the actual CSS in the file
report.html after:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<div>Your report</div>
</body>
</html>
Then you can add the report.html to your email and all the styles will be there without having to reference that external file.
This will require some additional coding on your end after your report is completed and before you send your email.
You can use something like gulp to do the replacement for you or write your own code for the replacement.
gulp.js example:
var gulp = require('gulp');
var replace = require('gulp-replace');
var fs = require('fs');
function getCSSFilename(linkTag) {
var hrefValue = /href\=\"([A-Za-z0-9/._]*)\"/g;
var cssFilename = linkTag.match(hrefValue);
cssFilename = cssFilename[0].replace("href=\"", "").replace("\"", "");
return cssFilename;
}
gulp.task('inject-styles', function () {
return gulp.src("./report/report.html")
.pipe(replace(/<link rel="stylesheet" href="[^"]*"*>/g, function(linkTag) {
var style = fs.readFileSync(`.${getCSSFilename(linkTag)}`, 'utf8');
return '<style>\n' + style + '\t</style>';
}))
.pipe(gulp.dest('./report'));
});
Hope this is helpful enough to let you know how you achieve what you described.
I want to store in my database a large text from an HTML file that could have Twig directives such as double curly braces, pipes, etc. From that string, I want to render a Twig template and send it back to the client.
public function renderAction (Request $request) {
$text = "<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
</head>
<body>
{{SomeVariable}}
</body>
</html>";
$template = $this->render($text, $parameters);
return new JsonResponse(["status" => "ok", "template" => $template], 200);
}
When I try this I got an error, it seems like the first param from $this->render is always used as a path to a twig file but I will not be storing URI but the HTML file content in my database. Is there any way to render a twig template from a string?
I also tried using
$template = $this->get('twig')->createTemplate($text);
return new JsonResponse(["status" => "ok", "template" => $template], 200);
but the "template" prop is always empty when the client receives it
I am using Symfony 2.8.52 and PHP 5.6
I am trying to convert a asciidoc file containing math expression to html using AsciidoctorJ, but have been unsuccessful so far.
This is the math.asciidoc that i am trying to convert.
= My Diabolical Mathmatical Opus
Jamie Moriarty
sample1
asciimath:[sqrt(4) = 2]
stem:[sqrt(4) = 2]
I am using the below configuration in Asciidoc
Attributes attributes = AttributesBuilder.attributes()
.math("asciimath")
.get();
Options options = OptionsBuilder.options()
.attributes(attributes)
.docType("article")
.safe(SafeMode.SERVER)
.backend("html5")
.get();
asciidoctor.convert(asciiDoc, options);
The output always shows something like this:
sample1
\$sqrt(4) = 2\$
\$sqrt(4) = 2\$
In the above generated HTML output, how do we render the mathematical equations?
Asciidoctor support asciimath and latexmath syntax and the output produced by asciimath can be rendered on browser using http://asciimath.org js library (other asciimath libraries can also be used).
Asciidoctorj uses \$ as the delimiter for asciimath markup, so we need to configure MathJax using the following configuration:
<html>
<head>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
asciimath2jax: {
delimiters: [['\\$','\\$'], ['`','`']]
}
});
</script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
...
</head>
//rest of html
</html>
After we include the above code snippet in <head> section of html, asciimath rendering shall work fine.
We can refer to this section of Asciidoctor documents for activating support of asciimath inside asciidocs: https://asciidoctor.org/docs/user-manual/#activating-stem-support
I have a settings page called posting.pug and it extends a pug settingsLayout template.
Where are several settings pages in my app. And I want to pass a variable posting=1 to the settingsLayout page to show a user that the posting page is the current.
How should I pass a variable to the template I extend?
I tried to set a variable before extends. That's not allowed.
I tried passing it as an attribute -- doesn't work.
You can try like this
settingsLayout.pug
block variables
doctype html
html
head
body
// Try to call variable here
h1 posting
posting.pug
extends settingsLayout
block variables
- var posting = 1
I hope this work!
The only thing which does not work is overriding pug variables in included files.
It works well with
php compiler pug-php/pug#^3.4
but does not work with
webpack pug-loader#^2.4.0 pug#^2.0.4 webpack#^4.43.0 webpack-dev-server#^3.11.0.
I have a more complicated version.
I would like to override a lot of variables, for instance I have pageTitle, siteTitle, siteDivider variables.
I have a homepage which is views/index.pug.
I have a layout which is views/layouts/default.pug.
I have default variables stored in a few files: views/vars/page.pug, views/vars/site.pug.
Let's start with variables:
File views/vars/page.pug
- var pageTitle = "##Default##"
File views/vars/site.pug
- var siteTitle = "Yaro"
- var siteDivider = "|"
File views/index.pug
extend layouts/default
block vars
include vars/site
include vars/page
- var pageTitle = "Business Solutions & IT development"
File views/layouts/default.pug
block vars
include ../vars/site
include ../vars/page
doctype html
html
head
meta(charset="utf-8")
meta(name="viewport", content="width=device-width, initial-scale=1, shrink-to-fit=no")
title #{pageTitle} #{siteDivider} #{siteTitle}
body
block body
So I wait for the result in the title: Business Solutions & IT development | Yaro
But I receive only: Business Solutions & IT development
without siteDivider and siteTitle :(
But if I have a file like this views/index.pug
extend layouts/default
block vars
include vars/site
include vars/page
- var pageTitle = "Business Solutions & IT development"
- var siteDivider = "|"
- var siteTitle = "Yaro"
It works just fine.
My point is to use default variables to override only needed but not all.
We're having a weird issue on our website with facebook comments. It looks like the facebook scraper is incorrectly parsing (at least one of) our web pages so that it isn't picking up on admins to moderate the comments.
If you go to this link:
http://www.beliefnet.com/Espanol/10-Atletas-olimpicos-mas-inspiradores.aspx
and view source, you'll see that we have the appropriate tags in the head, including one for fb:admins. If I am logged into facebook on that account, I get no moderator options.
Running the page through facebook object debugger, I get an error that we have meta tags in the body. Specifically, this error:
Meta Tags In Body: You have tags ouside of your . This is either because
your was malformed and they fell lower in the parse tree, or you accidentally
put your Open Graph tags in the wrong place. Either way you need to fix it
before the tags are usable.
Looking at the scraped URL at the bottom of that page, I see what looks to be that facebook has 'reorganized' our html, and placed the meta tags from the head into the body.
Does anyone have any idea what is causing this? I thought that maybe we had some malformed html somewhere in the page that was throwing everything off, but I went through the html for that page and it looks good. Is there something else that i'm missing here?
Running your URL through validator.w3.org shows a few warning signs:
Line 77, Column 14: document type does not allow element "noscript" here; assuming missing "object" start-tag
Line 154, Column 699: document type does not allow element "meta" here
I was able to narrow down the (potential) issue to these lines in your page:
document.write('<a href="' + OAS.config.url + 'click_nx.ads/' + OAS.config.sitepage + '/1' + OAS.config.rns + '#' + OAS.config.listpos + '!' + pos + '?' + OAS.config.query + '" target=' + OAS.config.target + '>');
document.write('<img src="' + OAS.config.url + 'adstream_nx.ads/' + OAS.config.sitepage + '/1' + OAS.config.rns + '#' + OAS.config.listpos + '!' + pos + '?' + OAS.config.query + '" border=\"0\" /></a>');
These document.write() lines are also failing the w3.org validator:
Line 53, Column 197: character "+" is not allowed in the value of attribute "target"
Moreover, I think it's bad to use document.write() for DOM insertion (and because it can lead to blocking of page rendering).
Can you change to using js objects and DOM manipulation?
After FB fetches your URL, it runs it through a DOM parser that is probably choking when it encounters those document.write() lines. The fact that those lines have an <a> element spanning two document.writes() is probably confusing the parser. And the parser probably thinks it has reached the <body> of the page, thus the 'Meta tags in body' error.
As a quick test, try putting the fb:admins meta tag above those document.write() lines. Though, I wouldn't be surprised if the parser still chokes, but it's worth a try.
To test your page's html source, I used the simple script provided in a comment at the end of this php.net page:
http://www.php.net/manual/en/class.domxpath.php
It produced errors:
Unexpected end tag : a in /home/dlee/tmp/tmp.html, line: 54
Unexpected end tag : head in /home/dlee/tmp/tmp.html, line: 183
htmlParseStartTag: misplaced <body> tag in /home/dlee/tmp/tmp.html, line: 184
Where tmp.html was the html of your page saved to a file.
Line 54 is the previously mentioned document.write() line.
Let me know if any of the above results in progress, and I will edit this answer accordingly.
so the problem ultimately was that there was a <noscript>...</noscript> nested in the head, that was trying to include a tracking pixel for browsers without javascript enabled, as part of an ad service we use.
the issue should've been obvious looking at the output facebook gave us for 'how they see your page'. the body begins immediately after the script, but immediately before where the tag starts. apparently the facebook parser freaks out when it sees an element in the head that should be in the body, so it immediately starts the body there.
... facebook output ...
console.log(OAS);
})();
</script><!-- End OAS Setup --><!-- Begin comScore Tag --><script>
var _comscore = _comscore || [];
_comscore.push({ c1: "2", c2: "8428430" });
(function() {
var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true;
s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js";
el.parentNode.insertBefore(s, el);
})();
</script>
</head>
<body>
<noscript>
</noscript>
<!-- End comScore Tag -->
... our html ...
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<asp:PlaceHolder id="OASHeader" runat="server" />
<!-- Begin comScore Tag -->
<script type="text/javascript">
var _comscore = _comscore || [];
_comscore.push({ c1: "2", c2: "8428430" });
(function() {
var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true;
s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js";
el.parentNode.insertBefore(s, el);
})();
</script>
<!-- End comScore Tag -->
<noscript>
<img src="http://b.scorecardresearch.com/p?c1=2&c2=8428430&cv=2.0&cj=1" alt="" />
</noscript>
<script type="text/javascript">
....
<body>
....
so in the future, invalid head elements could definitely be causing this problem.