I want to use Material Design Component: Lists into my Progressive Web App Starter Kit.
So...
npm install #material/list
Now what?
All I can think to do is
import { MDCList } from '#material/list/dist/mdc.list.css'
or
<link rel="stylesheet" href="/node_modules/#material/list/dist/mdc.list.css"/>
Both produce errors. What should I do?
You can download the materialize css and js files at keep it at the root level of the project folder
then in the app.js (your entry point file)
html`
<link rel="stylesheet" href="./styles/materialize.min.css" />
<script type="text/javascript" src="./js/materialize.min.js"></script>
<div> Your content here..</div>
`
give the path according to the folder you have created
Related
As per Apple's requirements for Universal Links, I have a file called "apple-app-site-association", which is in the root folder of a web site in azure. Visiting mysite.com/apple-app-site-association should return the JSON text in the browser. I am hosting the site on Azure, and am running a Blazor server project. My project does not have a web.config file.
To be clear, the file "apple-app-site-association" should not have the extension of ".json"
I have looked at this solution and this solution.
I have also tried modifying the Configure() method in Startup.cs to serve static files
app.UseStaticFiles(new StaticFileOptions
{
ServeUnknownFileTypes = true,
DefaultContentType = "application/json"
});
While the above code does correctly serve mysite.com/apple-app-site-association, it has an unwanted side-effect of 404'ing _framework/blazor.server.js.
How can I modify the MIME type of apple-app-site-association so my Blazor server project serves the file up when visiting mysite.com/apple-app-site-association?
Or, using the UseStaticFiles() method above, how can I resolve the 404 error when loading _framework/blazor.server.js?
In _Host.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css" />
</head>
<body>
...some stuff...
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Although you're using Blazor, it's still an ASP.NET Core application at heart and the issue is really one about ASP.NET Core, routing and how static files are handled.
As seen in this answer it's probably simplest to do this via a controller, rather than trying to coerce the router to process URLs with no extension. I've also done this for robots.txt in a project to control what is shown for different brands.
I tried this:
public class StaticContentController : Controller
{
[HttpGet]
[Route("apple-app-site-association")]
public ContentResult AppleAppSiteAssociation()
{
// source in root of wwwroot folder
const string source = #"apple-app-site-association.json";
string json = System.IO.File.ReadAllText(source);
return Content(json, "application/json", Encoding.UTF8);
}
}
The source file (with the .json extension) is in the project with a "Copy if newer" property set, so it's present in the /bin folder.
Running:
I have built a small node server using express and I want to serve index.html which contains angular app. How ever the browser sends GET request for favicon.ico. I have installed serve-favicon, however still it looks for physical file. Is there a way to override it? or from where can I find such file
The recommended way is actually just to use a link tag in your index.html:
<link rel="icon" href="/img/favicon.png">
Just change the href to link to an img in your public folder and you're good to go.
http://www.w3.org/2005/10/howto-favicon
You can use this site to get free favicon.ico
Then add your favorite favicon.ico to your html .
<link rel="icon" type="image/png" href="../images/favicon.ico" />
I am using Orchard v.1.9.1.0.
I have my custom theme with a layout page that starts off like this:
#using Orchard.UI.Resources;
#{
Script.Require("ShapesBase");
// css
Style.Include("//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css");
Style.Include("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css");
}
Using Script.Include, I thought loading the CDN reference would work, but when building the project and viewing it locally, the reference is not there and instead renders like this:
<link href="/Themes/HotToddy5K/Styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
Why does Orchard do this? I can't seem to find where in the base/core it's applying this. I tried to delete that bootstrap.min.css file in that "scripts" folder, hoping it would then fall back to my CDN reference, but no luck.
Any ideas?
You can easily do this on your ResourceManifest.cs.
Actually it is better, because you can provide fallbacks as for debugging files. you can manage this feature from the Settings section in the Admin.
Where is says "Resource Mode", in 1.9x you can trigger the CDN too.
I use Script/Style.Require instead of Include as it gives me more control. it also maintains your script/style dependencies.
Basically I got the following HTML:
<button class="disabled btn-primary btn" type="submit" disabled="">
<i class="glyphicon glyphicon-ban-circle"></i>
Log in
</button>
Locally the icon displays fine on the button but when I run on Windows Azure I get the following button with a weird looks prefix instead of the icon:
Looking into this, I realized that when accessing my website locally the browser would attempt to load the file:
/Content/fonts/glyphicons-halflings-regular.woff (which it did successfully)
while when online (on azure) it would attempt to load at:
/fonts/glyphicons-halflings-regular.woff
Why does it not put the /Content prefix that it does locally.
I'm using the standard bootstrap files and it is the EXACT same websites running locally and online.
Also I'm bundling the content the following way:
bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include(
"~/Content/bootstrap/bootstrap.css"));
And the file structure looks the following:
Also bootstrap is looking for the files like this:
url('../fonts/glyphicons-halflings-regular.woff')
So I would suppose it would look in the Content folder and not root since it currently resides in the Content/bootstrapcss folder.
We recently had similar issue (though we were using metroUI - http://metroui.org.ua/). Essentially it turned out we were bundling the css files and because of that when we deployed the application in Windows Azure, none of the fonts were loaded.
In our case, we had the following directory structure:
and modern.css was referencing fonts like
../fonts/iconFont.eot
and we were bundling the css file like this:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/css/modern.css",
"~/Content/css/modern-responsive.css"));
Because of bundling, the application was looking for fonts in /fonts directory at the application root which was obviously not there.
Long story short, we ended up changing the bundle name:
bundles.Add(new StyleBundle("~/Content/css/metroUI").Include(
"~/Content/css/modern.css",
"~/Content/css/modern-responsive.css"));
Once the bundle name was changed, things started working properly.
Changing the path does work but the 'answered question' missed one vital point.
If you're using _Layout.cshtml that references the bundle, this will no longer work locally and on Azure.
You need to update the _Layout.cshtml page too!
So if you change your bundles path from Content/css to Scripts/css then you need to change _Layout.cshtml to #Styles.Render("~/Scripts/css") respetively.
Encountered this error with ASP.NET Core 2.0 MVC web app when publishing to Azure Web Service.
I had my stylesheets within the following code.
<environment include="Development">
<link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
Simply copying and pasting the links into any environment besides Development worked
<environment exclude="Development">
<link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
/>
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
If you have downloaded a theme.zip or theme.rar that includes the bootstrap icons, before you extract do this:
right click on the compressed package
check the box "unblock" if it is visible
For icons to work- i had to set the folder permissions to "everyone = read" on the folder that the image was in
Using h:outputStylesheet I can embed CSS resources in the HTML head section, but how can I build a <link> for a favicon image resource which renders HTML like in this example:
HTML output:
<head>
...
<link rel="icon" type="image/png" href="favicon.png" />
...
</head>
The image resource is located in <web>/resources/images.
If I use direct HTML code in the JSF template like href="/resources/images/favicon.png" the resource is not found - navigating to /resources/images/favicon.png leads to the error
/resources/images/favicon.png/index.jsf
not found
(I have set index.jsf as index page in web.xml which might explain this path)
Your webapp is apparently running on a non-empty context path. The leading slash / brings you to the domain root. Use #{request.contextPath} to dynamically inline the context path.
<link rel="shortcut icon" type="image/png" href="#{request.contextPath}/resources/images/favicon.png" />
(note that I fixed the rel as well to make it crossbrowser compatible)
The href="/resources/images/favicon.png" is actually looking in the root direcotry of your server http://localhost/resources/images/favicon.png and not inside your web application directory.
Your href location will need to include the web application directory href="/webappname/resources/images/favicon.png" http://localhost/webappname/resources/images/favicon.png
If your .xhtml file is in the same directory as your resources folder then removing the forward slash at the being should work as well.
href="resources/images/favicon.png"