I have a repository of some web files I'm building. There are a few stylesheets that I maintain separately so they're included with <link> tags. To deploy the HTML I need to replace the <link> tags with <style> tags containing the content of the file. Sort of like using #include <style.css>
Is there a good Linux utility that I can use in a Makefile? Do any of the HTML preprocessors do this sort of thing? (This is different from CSS inlining.)
To be more specific:
I'm writing a custom brew sheet for BeerSmith - which is just an HTML page.
I'm using a couple of stylesheets for a grid layout, print layout, cleanup some unwanted auto-generated HTML, etc.
I would rather maintain each sheet separately instead of stuffing it all into one page.
BeerSmith does not include the separate CSS when exporting recipes, so I need to build in in to the final brew sheet.
I have a deploy script to copy the sheets into my .beersmith3 directory which I'd like to use to assemble the sheet.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="beersmith-cleanup.css" />
etc ....
this is very specific to your case
sed -e 's/<link\(.*\)>/<style\1>/' -e 's/<\/link\(.*\)>/<\/style\1>/' <filename>
here is sample output
Note I have added two line to handle <link> and </link> cases
cat x
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="beersmith-cleanup.css" />
<link>
</link>
output is
sed -e 's/<link\(.*\)>/<style\1>/' -e 's/<\/link\(.*\)>/<\/style\1>/' x
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<style rel="stylesheet" href="base.css" />
<style rel="stylesheet" href="grid.css" />
<style rel="stylesheet" href="beersmith-cleanup.css" />
<style>
</style>
I should have known there was a perl utility.... The Template Toolkit solves this problem handily.
HTML
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<style>
[% INCLUDE base.css %]
[% INCLUDE grid.css %]
[% INCLUDE beersmith_cleanup.css %]
</style>
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="beersmith_cleanup.css" />
</head>
Command line
0 fatty:0.0 .beersmith3/Reports % tpage test.html > llama.html
Output
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<style>
#media screen {
html {
font-size: 1em;
}
}
....
Related
I am new to VSCode. I tried using the Emmet to get a HTML5 boilerplate. When I type ! for Emmet, it does not give the full boilerplate. I got this boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body></body>
</html>
but I expected this:
<!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=7" />
<title>Document</title>
</head>
<body></body>
</html>
The <meta https-equiv /> line is missing.
I am on Windows 7.
Don't use any other extensions for HTML and CSS auto complete.
If you have already installed please remove it.
I had the same problem and all I do is update the newest VScode version and it fixed. Now the code looks like this.
<!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.0">
<title>Document</title>
</head>
<body>
</body>
</html>
I set up a website using TYPO3 v9.5.9 and I can't find the <title> tag on the HTML source.
How can I insert the current page <title> automatically into the header?
Here is how my header is currently displayed:
<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="TYPO3 CMS" />
<link rel="stylesheet" type="text/css" href="typo3conf/ext/frontend_editing/Resources/Public/Css/frontend_editing.css?1562352305" media="all" />
<link rel="stylesheet" type="text/css" href="typo3/sysext/backend/Resources/Public/Css/backend.css?1566293615" media="all" />
This solution solved my problem. It was necessary to remove the line :
config.noPageTitle = 2
Thanks to #Riccardo De Contardi for this solution.
I am new to Thymleaf. The following is my folder structure. Here I am not able to include my css file into ".html" file.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<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>Hello Spring MVC</title>
<link rel="stylesheet" media="all" href="../resources/css/bootstrap.min.css" th:href="#{../resources/css/bootstrap.min.css}" />
<link rel="stylesheet" media="all" href="../resources/css/style.css" th:href="#{../resources/css/style.css}" />
<style>
body {
background-color: lightblue;
}
</style>
</head>
Thanks.
The code is working. It is not including CSS because of ""(double-quotes) are not in compatible.(Copied code from a Blog).
Thanks.
I am using Framework7 for hybird development.
and In my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>My App</title>
<!-- Path to Framework7 Library CSS-->
<link rel="stylesheet" href="dist/css/framework7.ios.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="css/my-app.css">
</head>
<body>
....
</body>
</html>
The effect on my simulator:
I want the body is fixed, can not be drag, how to fix the position, if drag can not can not let the whole view move up or down ?
Try to add this to you config.xml
<preference name="DisallowOverscroll" value="true" />
It was once not responsive so had to reconfigure to do figure it.
What could be the issue?
<!DOCTYPE html>
<html lang="en" class="testTheme">
<head>
<meta charset="utf-8">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="img\logo.ico">
<title>Testing Website</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
</body>
</html>
Based on the above comments, your issue is how you're redirecting your custom domain to your heroku deploy. See heroku's docs for a setup that will work for you!