Tool which validates front-end structure of rendered pages - html

In my project, we are following microfrontend architecture where HTML pages are being constructed by amalgamation of multiple web-components. This results combination multiple HTML files into a single HTML file. By doing so, we have the risk of having a broken HTML code which is not syntactically valid.
To combine multiple dynamically generated HTML pages at runtime we are using nginx reverse proxy.
I want to a tool which can aid identifying such scenarios and provide suitable assistance to mitigate the same.
Let me know if there's any pretty tool or something
For Example:
This is my main page:
<!DOCTYPE html>
<div th:fragment="add-app(page_title, content_as_html, alert_html, menuitemid)">
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<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>my title</title>
<link rel="shortcut icon" th:href="#{/favicon.ico}" />
<!--#include virtual="/commons/inc/resources" --> <!-- It s separate component named as resource.html which is included here via nginx dynamically-->
</head>
<body>
<div class="overlay"></div>
<th:block th:replace="${alert_html}" />
<div class="my-custom-class position-relative">
<a
class="account-page-button d-flex align-items-center"
th:href="#{/}"
th:classappend="${menuitemid == 'App'? 'account-page-button--current' : '' }"
>
Apps
</a>
</div>
<!--# include virtual="/commons/inc/footer" -->
<!-- It s separate component named as footer.html which is included here via nginx dynamically-->
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script th:src="#{/apps/js/my-account.js}"></script>
</html>
</div>
The Resource.html page:
<link rel="icon" type="image/ico" href="/icons/favicon.ico" />
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css?family=Muli:400,700,900&display=swap" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="#{/lib/bootstrap/js/bootstrap.min.js}"></script>
The footer.html page:
<footer class="main-footer">
<link rel="stylesheet" th:href="#{/css/footer.css}" />
<div class="main-footer__row">
<div class="main-footer__link-container">
<a class="main-footer__link" href="#"> © 2020 myproject® </a>
</div>
<div class="main-footer__link-container">
<a class="main-footer__link" th:href="#{/terms/website}"> Website Terms of Use </a>
</div>
<div class="main-footer__link-container">
<a class="main-footer__link" th:href="#{/legal/privacy}"> Privacy Policy </a>
</div>
<div class="main-footer__link-container">
<a class="main-footer__link" href="#"> All prices exclude VAT </a>
</div>
</div>
</footer>
Please note down <!--#include virtual="/commons/inc/resources" --> and <!--# include virtual="/commons/inc/footer" --> tags. There are to include resources.html and footer.html pages, These tags gets resolved by nginx and nginx will replace these tags with the content of resources.html and footer.html respectively.
I want such a tool which can validate the final outcome i.e., the html page which nginx generates after resolving all <!--#include virtual....--> tags.

users.skynet.be/mgueury/mozilla/ extension for Chrome and Firefox works great to report the syntactical as well as semantic problems in the markup. It is also possible to ask HTML Validator to propose a corrected version of the page in HTML or convert it to XHTML.
Apart from above sonar with plugin https://www.sonarsource.com/html/ can also be used to have html validation during the build process.

Related

I'm having a problem loading a css sheet in an ejs file. I specified exactly where the css file is and it is still not working

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD Application</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="/crud_app/asset/css/style.css">
</head>
<body>
<!-- Header -->
<header id="header">
<nav>
<div class="container">
<div class="text-center">
User Management system
</div>
</div>
</nav>
</header>
<!-- /Header -->
This is the code that is used and note that I also tried the static method using express. When that didn't work I tried this method. Any help is appreciated. Thanks
I think you will have to use inline CSS, although it is a bad practice.
You should use express then make folder inside the main folder of the project then name it public
just like this : /curd/public
then create css folder and move the style sheet folder inside it, it will be like this : /curd/public/css/style.css
then go to the app.js file or your entry point file whatever you name it,
then put that code inside it
app.use(express.static("public"))
then go to the ejs file to load the stylesheet file just like this
<link rel="stylesheet" href="/public/css/style.css">

CSS styles for <x-> tags

I need help with setting color to html divs. I use Laravel 8 and of course I installed simple auth module Breeze with tailwind css framework. But now I need to change auth card color.
All my views use blade template engine and this is my guest blade source:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
{{ $slot }}
</div>
</body>
</html>
And my login view source:
<x-guest-layout>
<x-auth-card>
<x-slot name="logo">
<a href="/">
<img class="header-logo-image" width="100" height="100" src="{{ asset('images/welcome_images/logo.svg') }}" alt="Logo">
</a>
</x-slot>
<!-- Session Status -->
<x-auth-session-status class="mb-4" :status="session('status')" />
<!-- Validation Errors -->
<x-auth-validation-errors class="mb-4" :errors="$errors" />
<form method="POST" action="{{ route('login') }}">
<!-- This is form for posting my request -->
</form>
</x-auth-card>
</x-guest-layout>
As you can see I use $slot variable in my guest blade to inject login page content using "x-" tags. But how can I change background color? I tried to set it using 'class="lol" style="background-color: white;"' in tag but it didn't work.
Solved. Of course I am going to explain it.
The first thing is we need to find out what classes was used to construct containers in template. I used inspect element function in my browser, I found 'min-h-screen' class that is used as main.
Well, now I can set color to this class using internal CSS style. And that worked.
<!-- Internal styles -->
<style type="text/css">
.min-h-screen {
background-color: #1D2026;
}
Ps The most important thing is to insert this code in guest blade template in order to apply styles to content in $slot variable.
The recommendation is: in your laravel application go to \resources\views\vendor\jetstream\components\authentication-card.blade
Took me a whole year to figure it out 😂

Toolbar misaligned when embedding Bokeh in WebSlides

I am trying to embed Bokeh plots in to portable html slideshows using WebSlides (note that Reveal.js doesn't suit my needs).
The problem is illustrated below with the toolbar being misaligned:
My steps were:
1) I downloaded the source code for WebSlides
2) ran a simple Bokeh plot obtaining the div and script components
3) Inserted the relevant html links, div and scripts components in to 'index.html' from the WebSlides folder. The components were inserted using the Component Instructions for Bokeh 0.12.10. The div was inserted in to a blank component of the WebSlides.
Does anyone know how I might prevent the toolbar misalignment? Any advice, however vague is appreciated as I am loathe to dropping Bokeh for this application.
A copy of the html doc is here and a snippet without the javascript is below:
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.css"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.js"></script>
<BOKEH SCRIPT IS PLACED HERE>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
<!-- CSS WebSlides -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
</head>
<body>
<main role="main">
<article id="webslides" class="horizontal">
<section>
<div class="bk-root">
<div class="bk-plotdiv" id="dac8b20e-c981-49a6-8c18-cf0ca0ddc43a"></div>
</div>
</section>
</article>
</main>
<script src="static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<script defer src="static/js/svg-icons.js"></script>
</body>
</html>
Toolbars were reimplemented almost from scratch in bokeh 0.12.11dev1 and they don't use fragile float positioning anymore, so this shouldn't be an issue. You can follow our developer guide to get you started with dev version of bokeh. However, if the issue persists in 0.12.11dev1, please submit an issue with a complete, reproducible example.

Basic problems: Bootstrap templates displayed wrong Grails 3

I am pretty new to Grails/ Bootstrap/ HTML and webprogramming in general. I am not an IT-guy but I have to implement a little monitoring website for a research project. I am pretty sure there is a simple solution to my problem - I would really appreciate if someone could help me!
I am using IntelliJ with Grails 3 and I am trying to integrate the SB Admin2 Bootstrap template from Start Bootstrap into my project.
My problem is, that the Website is not displayed as it should. First I tried to follow this tutorial http://grails.asia/how-to-apply-a-commercial-bootstrap-theme-to-your-grails-application/ but it didn't work for me - don't know where I failed. Then I just copied the index.html content into my gsp file. First only the text was shown, then I followed an answer from this post Bootstrap template not getting displayed and added a link to BootstrapCDN - It worked.. but not correctly. Screenshot
Now the head of my layout gsp file looks the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 -Bootstrap Admin Template</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../vendor/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Hope someone can help me!
Thank you in advance!
edit1: If I use the IntelliJ preview in the html file it works perfect.
First of all, I saw you use relative paths in your links to the javascripts etc.
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
I would prefere to use absolute ones like
<link href="${request.contextPath}/css/sb-admin-2.css" rel="stylesheet">
I use a few Bootstrap-Layouts in different Grails Applications (in one application even the sb-admin). Let me try to explain my way (btw. seems that it's nearly the same as your first link, but another description might help out a bit) ...:
copy the index.html to views->layout->main.gsp
place the e.g. g:layoutBody in apropriate places in the main.gsp page and remove the elements which are not useful for your app.
<div id="page-wrapper">
<g:layoutBody/>
</div>
<!-- /#page-wrapper -->
copy the javascripts, images etc. to the web-app directory and check the references in the main.gsp layout that they refer to the javascripts etc. via
<script src="${request.contextPath}/js/bootstrap.min.js"></script>
after that, your views could look like this:
<%# page import="urlaub.Employee" %>
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<g:set var="entityName" value="${message(code: 'employee.label', default: 'Employee')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<body>
<g:if test="${session.user.admin}">
<div class="row">
<g:link class="btn btn-primary btn-flat" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link>
</div>
</g:if>
<g:render template="/flash_message" bean="${flash}" />
<div class="row">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<hr>
</div>
Grails 3 comes with Asset pipeline plugin to manage static assets, minimize them, etc,...
Check its documentation. In your case you should move your assets to the corresponding asset folder (javascripts, stylesheets, images) into de assets folder.
For example, for including a css placed in assets/stylesheets/bootstrap/bootstrap.min.css you have to include in you gsp the following:
<asset:stylesheet href="bootstrap/bootstrap.min.css"/>
Other example with javascript and assetPath:
<script type="text/javascript" src="${assetPath(src:'register.js')}"></script>

JSP unable to detect Bootstrap Spring MVC

I've been struggling for hours to include the Bootstrap CSS file into my file. My code snippet is as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-
1">
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css"> <!--Works fine now, but not with local path -->
<title>Welcome</title>
</head>
<body>
<section>
<div class="jumbotron">
<div class="container">
<h1> Hello </h1>
<p> world </p>
</div>
</div>
</section>
</body>
</html>
This works perfectly and the Bootstrap shows up just fine. However, I wish to include the localized files. The moment I change the link in the head of the code to <link rel="stylesheet" href="resources/bootstrap.css" type="text/css">, The bootstrap disappears.
Just to make sure and convince you that the bootstrap.css is indeed there at resources/bootstrap.css I included <%# include file="/resources/bootstrap.css"%> at the top of the code and it actually showed me the entire content of the file.
What am I missing? How do I resolve this?
If you have this project structure (I suggest trying this,because resource folder content is not used for static web contentnt ):
|_webapp
|_css
|_bootstrap.css
you can load the css by
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.css" type="text/css">