Implement HTML like template in PUG - express

I am trying to implement html like template in pug with
#{name}
but this is not working it double prints it then I use pipeline character
|#{name}
but its output is <h1>This Is Content<h1&gt
my full template is
<html lang="en">
<head>
SomeRandomStuff
</head>
<body>
|#{Content}
</body>
Scripts
</html>

Use !{name} instead.
<html lang="en">
<head>
SomeRandomStuff
</head>
<body>
!{Content}
</body>
Scripts
</html>
See docs here.

Related

Vue js change structure dist

I need to change the structure of my files when I put in production :
default :
-dist
--css
--fonts
--img
--js
--favicon.ico
--index.html
and i want like this :
-dist
--index.html
--app
---css
---fonts
---img
---js
---favicon.ico
I try to change directly the html in index.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="app/favicon.ico">
<title>Roquette</title>
<script defer="defer" src="app/js/chunk-vendors.6e8aa085.js"></script>
<script defer="defer" src="app/js/app.4955a200.js"></script>
<link href="app/css/app.d0b83381.css" rel="stylesheet">
</head>
<body>
<noscript><strong>We're sorry but serveur-roquette doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div>
</body>
</html>
But it doesn't work there must be some paths missing somewhere

CSP settings for separate js file

Does script-src parameter using hashes works for inline scripts only?
This config works for for me (inline script in HTML code):
Apache config:
Header set Content-Security-Policy-Report-Only: "script-src 'sha256-U82JgRvGjy4mzia+G8DutvX8V/W33LIoO2UuwT+rE/0='"
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
<script>alert('hello everybody')</script>
</html>
where:
U82JgRvGjy4mzia+G8DutvX8V/W33LIoO2UuwT+rE/0= is a sha256 hash code of
alert('hello everybody') converted into base64
Once I moved the same script alert('hello everybody') into separate js file test.js and have updated index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
<script src="test.js"></script>
</html>
CSP blocking test.js file, however hash for it still the same
[Report Only] Refused to load the script 'http://localhost/test.js'
because it violates the following Content Security Policy directive:
"script-src 'sha256-U82JgRvGjy4mzia+G8DutvX8V/W33LIoO2UuwT+rE/0='".
Note that 'script-src-elem' was not explicitly set, so 'script-src' is
used as a fallback.
What parameter should I use for CSP to allow local js file by hash?
This should allow loading a script from the same source: "script-src 'self';"

how to write backspace html in vue js

how to to wire html backspace in vue js in have try code bellow but not working, try template but dont working to
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p><span v-html="backspace"></span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
backspace:"&larr"
}
})
</script>
</body>
</html>
You're missing semi-colon:
&larr // missing semi-colon ;
You may also use:
←
As I understood, you would like to display the left arrow HTML character "&laar;", that looks like an arrow pointing backwards.
You simple missed a semicolon (;) at the end of the HTML within your data array.
Here is the updated snipped:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p><span v-html="backspace"></span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
backspace:"←"
}
})
</script>
</body>
</html>

dojo.image.Gallery does not work with addOnLoad?

This is really weired, I'm trying to use dojo.image.Gallery, but when I require the dojox.image.Gallery, the dojo.addOnLoad() does not fire, however if i comment the line which require dojo.image.Gallery, i can see 'onload' in the console, code is like below
anything i missed?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testing the Image Gallery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require('dojox.image.Gallery');
dojo.require('dojox.data.FlickrRestStore');
dojo.require("dojo.parser"); // find widgets
dojo.addOnLoad(function(){
console.log('onload');
});
</script>
</head>
<body>
<h1 class="testTitle">dojox.image.Gallery</h1>
</body>
</html>
I do have this same problem. After some effort, I happened to find out that with the full version dojo-release-1.7.2-src, it WORKS. Does it have anything to do with javascript compression? Kindly share if any one happens to know why...

LESS.js isn't working, I'm aware of the chrome bug... using Firefox

Firefox isn't reading any of the styling. Not even the width or height. Am I missing some part of the setup?
My index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Learning Less</title>
<link rel="stylesheet/less" href="style.less" type="text/css"/>
<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>
</head>
<body>
<div id="container">
Hello World
</div>
</body>
</html>
My Stylesheet style.less
#primary-color: red;
#container {
width:200px;
height:200px;
background: #primary-color;
}