I try to minify partial HTML in which I minify some JS using terser (using a jsmin filter as showed in 11ty docs):
<!doctype html>
<html lang="fr"><head><meta charset="utf-8"><title></title></head>
{% set html %}
<body>
<div class="foo">
Bar
</div>
<script>{% set js %}
var foo = 'foo',
bar = 'bar';
{% endset %}{{ js | jsmin | safe }}</script>
{% endset %}
{{ html | htmlmin | safe }}
</body>
</html>
But since the terser process is asynchronous, it throws an error in 11ty (callback is not a function, and <script>[object Promise]</script> in the generated file).
Same problem if I try to minify all the HTML using an 11ty transform (as suggested in their docs: Minify HTML Output – and removing all the {% set html %} / {{ html | … }} tags): it throws some similar Promise errors (Having trouble writing template … Cannot read properties of undefined … at async Promise.all)
Problem solved if I move the script part outside of the Nunjucks set declaration:
<!doctype html>
<html lang="fr"><head><meta charset="utf-8"><title></title></head>
{% set html %}
<body>
<div class="foo">
Bar
</div>
{% endset %}
{{ html | htmlmin | safe }}
<script>{% set js %}
var foo = 'foo',
bar = 'bar';
{% endset %}{{ js | jsmin | safe }}</script>
</body>
</html>
But that's not what I want.
Trying to make terser synchronous seems to need some more npm packages so I'm hoping there's an easier way before trying it.
Edit: tried to use html-minifier-terser instead of html-minifier, with this code for the htmlmin filter:
const TerserHTML = require('html-minifier-terser');
…
eleventyConfig.addNunjucksAsyncFilter('htmlmin', async function(code, callback) {
try {
let minified = await TerserHTML.minify(code, {
removeComments: true,
collapseWhitespace: true
});
callback(null, minified);
} catch (err) {
console.error('Terser HTML error: ', err);
callback(null, code);
}
});
→ same issue
Related
Picture 1 Picture 2 Picture 3 I am building a page in Django that first renders a blank page with a loading picture, and then calls an Ajax get function to one of my views. Once my Ajax get function succeeds, it is supposed to load one of my HTML files. I get a 404 error saying that the template cannot be found, but the template is in the same folder as my other file. Is my file path wrong?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
{% extends "stocks_sites/base.html" %}
<!-- The loading image -->
{% block loader %}
<div id="loading">
<p>Loading</p>
</div>
<div id="articles">
</div>
<script>
// AJAX call when page has loaded
$(document).ready(function(){
$.ajax({
type: "GET",
url: "{% url 'stocks_sites:get_news_articles' %}",
success: function(response) {
const news_articles = response;
const posts = news_articles.posts;
const search = news_articles.search;
document.getElementById("loading").style.display = "none";
$("#articles").load("news_articles.html");
}
});
});
</script>
{% endblock loader %}
TLDR
Total n00b with rust, yew and trunk.
I want to find out how to rust, yew and trunk to build an HTML file containing just one DOM node, not a whole HTML page.
Background
Day-to-day, I use Django, the python web framework. Its admin console uses HTML template rendering, and an example of a template might look like this:
{% extends 'django_twined/question_changeform.html' %}
{% block object-tools-items %}
{% if show_set_active %}
<li>Set active</li>
{% endif %}
{{ block.super }}
{% endblock %}
Where in this example the {% %} and {{ }} get evaluated at render time into a valid HTML structure (from other template files), and the <li> is an extra node that gets added to the DOM.
Instead of a vanilla li element, I want to build a complex DOM node using Rust/Yew/Trunk. Then I can include the resulting head and body elements file in a django template, something like:
{% extends 'django_twined/question_changeform.html' %}
{% block head %}
{{ block.super }}
<!-- Include the scripts generated by trunk build -->
{% include 'my-dom-node-head.html' %}
{% endblock %}
{% block object-tools-items %}
<!-- Include the elements generated by trunk build -->
{% include 'my-dom-node-body.html' %}
{{ block.super }}
{% endblock %}
Where I'm at
I've used the yew starter app to get myself to an app. The input index.html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Yew App</title>
</head>
</html>
And the main.rs file looks like:
use yew::prelude::*;
enum Msg {
AddOne,
}
struct Model {
value: i64,
}
impl Component for Model {
type Message = Msg;
type Properties = ();
fn create(_ctx: &Context<Self>) -> Self {
Self {
value: 0,
}
}
fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
match msg {
Msg::AddOne => {
self.value += 1;
// the value has changed so we need to
// re-render for it to appear on the page
true
}
}
}
fn view(&self, ctx: &Context<Self>) -> Html {
// This gives us a component's "`Scope`" which allows us to send messages, etc to the component.
let link = ctx.link();
html! {
<div>
<button onclick={link.callback(|_| Msg::AddOne)}>{ "+1" }</button>
<p>{ self.value }</p>
</div>
}
}
}
fn main() {
yew::start_app::<Model>();
}
After trunk build, the output index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Yew App</title>
<link
rel="preload"
href="/yew-app-caccf6c60742c530_bg.wasm"
as="fetch"
type="application/wasm"
crossorigin=""
/>
<link rel="modulepreload" href="/yew-app-caccf6c60742c530.js" />
</head>
<body>
<script type="module">
import init from "/yew-app-caccf6c60742c530.js";
init("/yew-app-caccf6c60742c530_bg.wasm");
</script>
</body>
</html>
Where next?
So basically I need to get the <link> and <script> elements added by trunk build and put them into my template.
What should I do next? Would you suggest I try to:
Get trunk build --filehash false to output deterministic .js and .wasm file names without the hash (caccf6c60742c530 in this case) so that I can directly write the includes into my template (I'm concerned this will cause me development problems down the road)?
Get trunk build to output separate head link and body script?
Post-process the output index.html to extract the inserted scripts?
Alter main.rs in some way to output only what I need/want?
I created an environment using pycharm & installed adminlte by git clone from https://github.com/app-generator/django-dashboard-adminlte.git. And installed adminlte3 , django3.1 & all requirements. Then run python manage.py runserver and registered a new user & was able to login ,view all pages, added new link to a html page. But I am unable to add view with jsonresponse to a button click on new page, geting Error 500 - Server Error.
My new html page is
{% extends "layouts/base.html" %}
{% block title %} Layout Boxed {% endblock %}
<!-- Element injected in the BODY element -->
{% block body_class %} sidebar-mini layout-boxed {% endblock body_class %}
<!-- Specific Page CSS goes HERE -->
{% block stylesheets %}
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
<link rel="stylesheet" href="/static/assets/css/mapstyle.css">
<link rel="stylesheet" href="/static/assets/js/pages/gis/dist/map.css">
<style>
.map {
margin: 0;
padding: 0;
width: 900px;
height: 500px;
background:white !important;
border:1px solid #ccc;
}
</style>
{% endblock stylesheets %}
{% block content %}
<div class="content-wrapper">
<div id="lyrDiv"></div>
<div id="map" class="map"></div>
<button id="search">Search</button>
</div>
{% endblock content %}
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<!-- jQuery -->
<script src="/static/assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/assets/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/assets/js/demo.js"></script>
<script src="/static/assets/js/pages/map.js"></script>
<script src="/static/assets/js/pages/search.js"></script>
{% endblock javascripts %}
search.js
$( "#search" ).click(function() {
$.get('/search/',{'csrfmiddlewaretoken':csrftoken},function(data){
alert(data); // here getting Error 500 - Server Error
});
});
I added below line to /django-dashboard-adminlte/app/urls.py
re_path(r'^search/$', search.spatial_srch, name='search'),
and search.py
from app.models import *
from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse
#csrf_exempt
def spatial_srch(request):
data= Demotable.objects.all()
searchArr = []
output = {}
for c in data:
searchArr.append({'type': 'Feature', 'properties': {'id':c.id,'name': str(c.name)},'geometry': {'type': 'Point', 'coordinates': [c.the_geom.x, c.the_geom.y]}})
output = {'type': 'FeatureCollection', 'features': searchArr}
return JsonResponse(output)
When I click on the 'Serach' button the request is not going to the view search.py What is wrong in my code ? what configuration did I miss?
The post shows
The Error 500 shows only adminlte Error page. Nothing more
The problem is in the (not so nice) way they generate the error. It's anti-pattern hell there, but in short it means there's an except thrown in either:
finding the template
loading the template
or rendering the template
and they catch it and don't let you see what happened. Not very nice code and you're have to modify that file to even begin debugging it:
#login_required(login_url="/login/")
def pages(request):
context = {}
# All resource paths end in .html.
# Pick out the html file name from the url. And load that template.
try:
load_template = request.path.split('/')[-1]
html_template = loader.get_template( load_template )
return HttpResponse(html_template.render(context, request))
except template.TemplateDoesNotExist:
html_template = loader.get_template( 'page-404.html' )
return HttpResponse(html_template.render(context, request))
# Remove or comment these lines:
#except:
#
# html_template = loader.get_template( 'page-500.html' )
# return HttpResponse(html_template.render(context, request))
Also I'm not sure this the specific spot where the error is generated, they might be doing similar things in other places.
Edit
This is very .... unprofessional code:
# Matches any html file
re_path(r'^.*\.*', views.pages, name='pages'),
No, it doesn't not match any "html" file - it matches everything cause they don't get regular expressions:
^ - start of string
.* - anything or nothing
\.* - >>>zero<<< or more dots
Result: \.* is ignored as it is irrelevant so it matches everything and if you placed your re_path below it, it will never be consulted, because Django uses first match wins approach.
So your url matches theirs, which then routes it to pages view:
load_template = request.path.split('/')[-1]
Since request.path is '/search/', '/search/'.split('/')[-1] gives the empty string and that creates your problem.
I highly suggest fixing their url path:
# Matches any html file
re_path(r'\.html$', views.pages, name='pages'),
Or put your re_path above theirs.
#app.route('/')
def index():
users = [[1],[2],[3]]
return render_template('index.html', users=users)
#app.route('/update', methods=['GET', 'POST'])
def update():
print(' post received ')
if request.method == 'POST':
print(request.form['idval']
return jsonify({'result': 'success'})
and this is my simple html
{% block body %}
<body>
{% for user in users %}
<td id='position{{user[0]}}' class='updateposition'></td>
<td id='amount{{user[0]}}' class='updateamount'></td>
{% endfor %}
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
{% endblock %}
and here's my app.js file within static folder which contains the jquery
$(document).ready(function() {
setInterval(ajaxCall, 1000);
function ajaxCall(){
var positionIds = Array.prototype.slice.call(document.querySelectorAll('.updatecurrposition')).map(function ( element ) { return element.id;});
var amountIds = Array.prototype.slice.call(document.querySelectorAll('.updatepositionamount')).map(function ( element ) {return element.id;});
console.log(positionIds[0])
for (i = 0; i < positionIds.length; i++){
req = $.ajax({
url : '/update',
type : 'POST',
data : {idval : positionIds[i]}
});
}
}
and this example was taken from
https://github.com/PrettyPrinted/youtube_video_code/tree/master/2017/03/27/Using%20jQuery%20to%20Update%20a%20Page%20Without%20Refresh%20(Part%201%20of%202)/ajax_without_update
I've literally copied every single tutorials online and tried to implement it in my own (and most of the tutorials themselves fail in my computer for some reason)
and it just seems it can't get the data. I get a proper initial 200 response to get the html template but when the POST request does work, it only shows 304 redirect message, but nothing gets printed in the console
this perhaps seems to be the reason when I try to update the value upon receiving the data from the flask server, nothing happens. i.e.
req.done(function(data){
$('#'+positionIds[i]).text(data.result);
});
adding this right after req = $.ajax seems to change nothing
Does changing the td tags to something like p work? From tests I think that empty td tags aren't generated. I changed the tags and it was printing (to the console) successfully.
I have been using sendFile method to render Html in Express project.
I would like to use partials with my project. And, not switch to jade.
Is there a way to use traditional HTML with partials in Express 3.x.
I have tried ejs, but dont understand it completely.
A more 'HTML-like' templating engine would be nunjucks (whose syntax is similar to Jinja2, which you have experience with).
Here's a simple setup. This assumes both Express and Nunjucks are installed, if not:
npm install express
npm install nunjucks
– app.js
var nunjucks = require('nunjucks');
var express = require('express');
var app = express();
app.listen(3012);
nunjucks.configure('views', {
autoescape: true,
express : app
});
app.get('/', function(req, res) {
res.render('index.html', {
title : 'My First Nunjucks Page',
items : [
{ name : 'item #1' },
{ name : 'item #2' },
{ name : 'item #3' },
{ name : 'item #4' },
]
});
});
– views/index.html
<!doctype html>
<html>
<head>
<title>welcome to {{ title }}</title>
</head>
<body>
<ul>
{% for item in items %}
{% include "item.html" %}
{% endfor %}
</ul>
</body>
</html>
– views/item.html
<li>{{ item.name }}</li>