I want to remove the Bootstrap stylesheet from my Hyperledger Composer-compiled project.
I compiled using yo hyperledger-composer then npm start. Whenever src/index.html gets served at http://localhost:4200/, a Twitter Bootstrap <style> tag is being inserted right before the closing </head> tag. Here is the source:
<head>
<meta charset="utf-8">
<title>My App</title>
<base href="/">
<style type="text/css">/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
...
[bootstrap.min.css is being inserted here, I don't know why]
...
/*# sourceMappingURL=bootstrap.min.css.map */
</style>
<style type="text/css">/* You can add global styles to this file, and also import other style files */
</style>
<style></style>
<style>{%BLOCK%}</style>
</head>
Where in my project do I look for the offending code? I want to remove this Bootstrap tag altogether.
I grep'ed the /src/ directory, but "bootstrap" doesn't turn up any hits (besides .bootstrapModule(AppModule);.
In the root directory, it is listed as a dependency in package.json as "bootstrap": "^3.3.7",. Therefore, I think it is importing the style from node_modules/bootstrap/dist/bootstrap.min.css.
There is no .angular-cli.json file. We're not using ng-bootstrap, as far as I can tell. Where is this style injection coming from?
Never mind, there is an .angular-cli.json file after all. You can remove it from the script loader there.
Related
I am trying to Bundle Bigcommerce Theme but I am getting this kind of error. I tried deleting the line but another one will appear from a different file. I have tried following the recommendation
npm install --use-old-node-sass-fork.
but it didn't work and I keep getting the same error
Error: ".visually-hidden" failed to #extend "%visually-hidden".
The selector "%visually-hidden" was not found.
Use "#extend %visually-hidden !optional" if the extend should be able to fail.
on line 22 of base/base.scss
>> #extend %visually-hidden;
----------^
:
---------WARNING---------
We are currently in the process of deprecating node-sass fork
https://github.com/bigcommerce-labs/node-sass
Your scss files were compiled using latest node-sass version
https://github.com/sass/node-sass
This error might indicate that your scss file is not compatible with it.
There is still an option to compile scss file old fork by using --use-old-node-sass-fork.
But note, that this will lead to 500 error in production in near future.
---------WARNING---------
I saw a thread that " I had to just upgrade my bootstrap version in Base.html file and the error was solved." but I do not have that on the theme that I am using
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>{{head.title}}</title>
{{{head.meta_tags}}}
{{{head.config}}}
<link href="{{head.favicon}}" rel="shortcut icon">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');</script>
{{> components/common/polyfill-script }}
{{!-- Load Lazysizes script ASAP so images will appear --}}
<script>
{{!-- Only load visible elements until the onload event fires,
after which preload nearby elements. --}}
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadMode = 1;
</script>
<script async src="{{cdn 'assets/dist/theme-bundle.head_async.js'}}"></script>
{{{stylesheet '/assets/css/theme.css'}}}
{{ getFontsCollection }}
{{{head.scripts}}}
{{{head.rsslinks}}}
{{inject 'themeImageSizes' theme_images}}
{{> components/common/global-injects}}
{{{snippet 'html_head'}}}
{{> core/structured-data/website}}
</head>
On new install of Foundation 6 Zurb stack, installing building block sticky-shrinknav and injecting it into index.html template using {{> sticky-shrinknav}} shows the component on the page but scrolling the page does not produce the expected result.
Tried installing Zurb stack multiple times in different locations. Same results are produced.
This is the index.html template:
<!doctype html>
<html class="no-js" 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>Veridata</title>
<link rel="stylesheet" href="{{root}}assets/css/app.css">
</head>
<body>
{{> sticky-shrinknav}}
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
{{> body}}
<script src="{{root}}assets/js/app.js"></script>
</body>
</html>
My app.scss file contains:
#import 'components/building-blocks/sticky-shrinknav';
and my config.yml contains:
# Paths to JavaScript entry points for webpack to bundle modules
entries:
- "src/assets/js/building-blocks/sticky-shrinknav.js"
- "src/assets/js/app.js"
Expecting the same as demonstrated on this page:
https://foundation.zurb.com/building-blocks/blocks/sticky-shrinknav.html
Instead, the nav bar is static (doesn't shrink or move) and some page components are above the navbar when scrolling, while others are beneath the navbar as i scroll.
My apologies if this is a noob question. I am new to Foundation.
EDIT: this is the app.js file contents:
import $ from 'jquery';
import 'what-input';
// Foundation JS relies on a global varaible. In ES6, all imports are hoisted
// to the top of the file so if we used`import` to import Foundation,
// it would execute earlier than we have assigned the global variable.
// This is why we have to use CommonJS require() here since it doesn't
// have the hoisting behavior.
window.jQuery = $;
require('foundation-sites');
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';
$(document).foundation();
You have to import the sticky-shrinknav component in your app.js (if you want to bundle it there). Otherwise you have to also include the generated bundle in your html file too.
But in general you need const $ = require('jquery') or import $ from 'jquery' as first line in the sticky-shrinknav file to load jQuery for it.
Looking at the documentation for installing Swagger-UI one can see that two official npm modules are being published: swagger-ui and swagger-ui-dist. However, I really struggle to figure out how these are supposed to be used with an already existing OpenApi 3.0 specification.
The only thing I need is a simple web application (plain node.js or express.js or whatever works) which will serve my existing specification.yml document embedded into the plain Swagger-UI files on a path like /docs.
Since this needs to be done in a repeatable manner (will run in a Docker container in the end), manual editing of files is not desired in the process.
The closest I could get was downloading a release tar ball, extracting the dist folder, use tools like sed to replace the default specification file with my own one and finally host this on a webserver like nginx.
However, this looks unnecessary complex to me and makes me wonder what the npm modules are supposed to be used for.
Finally I found two approaches to achieve my goal as outlined in the question.
Using unpkg
unpkg is an automated content delivery network for all modules that are published on the npm registry. It allows to include and use any npm module in a static HTML file without any complex package managers, dependency resolvers etc. This is especially great if you don't have any other need to use the npm ecosystem directly.
For swagger-ui, such an HTML file would look like this. Note that we are importing the swagger-ui-dist package which already includes all necessary dependencies.
<!DOCTYPE html>
<!--Inspired by https://gist.github.com/buzztaiki/e243ccc3203f96777e2e8141d4993664-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist#3/swagger-ui.css" >
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist#3/swagger-ui-bundle.js"> </script>
<script type="text/javascript">
window.onload = function() {
// Swagger-ui configuration goes here.
// See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
SwaggerUIBundle({
deepLinking: true,
dom_id: '#swagger-ui',
showExtensions: true,
showCommonExtensions: true,
url: specification.json // <-- adjust this to your webserver's structure
});
};
</script>
</body>
</html>
Host this HTML file on your webserver and your all settled.
Using browserify / webpack
browserify and webpack are module bundlers from the npm ecosystem that can collect an npm module and all its dependencies, then bundle them up in one single js file. This file can then be loaded and used in an HTML page.
While both tools might differ feature-wise in the details, for this job both of them work almost in the same way. The following example uses browserify, however, the general approach with webpack is the same.
First, install browserify globally:
npm install -g browserify
Then, install the swagger-ui module locally in your current folder:
npm install --save swagger-ui
Finally, bundle the swagger-ui module and all of its dependencies into a single output file:
browserify --require swagger-ui -o bundle.js
The according HTML page to include it could look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/swagger-ui/dist/swagger-ui.css">
<title>Swagger-UI</title>
</head>
<body>
<div id="swagger-ui"></div>
</body>
<script type="text/javascript" src="./bundle.js"></script>
<script type="text/javascript">
window.onload = function() {
// Swagger-ui configuration goes here.
// See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
SwaggerUI({
deepLinking: true,
dom_id: '#swagger-ui',
showExtensions: true,
showCommonExtensions: true,
url: specification.json // <-- adjust this to your webserver's structure
});
};
</script>
</html>
This approach might be preferred if you are using browserify or webpack within your ecosystem for other tasks anyway.
If you are looking for whatever works the easiest solution will be to use an existing swagger-ui like the demo store and pass your spec in the url param:
http://petstore.swagger.io/?url=https://raw.githack.com/heldersepu/hs-scripts/master/swagger/4411/7.json
If you want more of a standalone solution copy the swagger-ui dist directory to your deployment:
https://github.com/swagger-api/swagger-ui/tree/master/dist
then tweak the index.html to suit your needs
I'm using meteor and I ran npm install request to get access to that library. Everything seems to install correctly but when I run the meteor server, I then get the following error. Is there any word on why this is or how to solve it? Thanks.
While building the application:
node_modules/request/node_modules/node-uuid/test/test.html:1: bad formatting in HTML template
node_modules/request/node_modules/form-data/node_modules/combined-stream/node_modules/delayed-stream/test/run.js:1:15: Unexpected token ILLEGAL
node_modules/request/node_modules/form-data/node_modules/combined-stream/test/run.js:1:15: Unexpected token ILLEGAL
For reference:
test.html
<html>
<head>
<style>
div {
font-family: monospace;
font-size: 8pt;
}
div.log {color: #444;}
div.warn {color: #550;}
div.error {color: #800; font-weight: bold;}
</style>
<script src="../uuid.js"></script>
</head>
<body>
<script src="./test.js"></script>
</body>
</html>
run.js (same)
#!/usr/bin/env node
var far = require('far').create();
far.add(__dirname);
far.include(/test-.*\.js$/);
far.execute();
Meteor constructs the entire DOM itself so it will typically reject any script tags included in the html (but it will include scripts in the head, thanks Andrew). It also only supports handlebars style templating (right now).
<html>
<head>
<title>Something</title>
</head>
<body>
{{>yourHandlebarsTemplate}}
</body>
</html>
My advice would be to have your js and css located as files inside the client folder under your projects root.
As for NPM request, you will not be able to:
install it normally like you do in most node projects, so node_module is out/npm install require is out
access the functions in it without a Npm.require
At this point you have two options: adding the package NPM from Atmosphere(unofficial package repository) and including request. Or try placing the lib into /packages/ and then using Npm.require('request').
Alternatively you can just use Meteor's built in HTTP package (meteor add http) which functions similar to request.
Remove from your template as it seems Meteor wants to create this tag for you when building the template. This should take care of the "bad formatting in HTML template" error in test.html.
I started today with LESS. It looks awesome to work with and I will need it on my internship soon.
My less code:
#color: #4D926F;
body {
background-color: #color;
}
Not anything special.
My html:
<!Doctype HTML>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/style.less")" type="stylesheet" rel="stylesheet/less" />
<script src="#Url.Content("~/Scripts/less-1.4.1.min.js")" type="text/javascript"></script>
</head>
<body>
#RenderBody()
</body>
</html>
The Less script file is downloaded from http://lesscss.org/
My file structure:
The result:
FileError: 'http://localhost:58123/Content/style.less' wasn't found (404)
in style.less
Index
When I install dotless via Package Manager everything works perfect.
My question is what do I need to runn it without Dotles? I dont have problems installing Dotless or using it. I just want to know whats the missing link why the LESS gives that error. Why do I get a 404 error when the file is there?
Dotless compiles the .less to .css. So you would need to add a reference to the resulting .css that Dotless compiles. Also you would want to remove this line from your code.
<link href="#Url.Content("~/Content/style.less")" type="stylesheet" rel="stylesheet/less" />