I'm using the Swashbuckle NuGet package to create Swagger documentation for my API. https://www.nuget.org/packages/Swashbuckle
I'm trying to make some minor changes to the UI - essentially just to add some corporate branding to the header.
I have added two files as embedded resources to my project, in a directory called resources.
These are injected into the UI via:
.EnableSwaggerUi(c =>
{
c.InjectStylesheet(thisAssembly, typeof(SwaggerConfig).Namespace + ".Resources.Swagger.css");
c.InjectJavaScript(thisAssembly, typeof(SwaggerConfig).Namespace + ".Resources.Swagger.js");
}
Which results in the following link being added to rendered page.
<link href="ext/ang_nav_api-Resources-Swagger-css" rel="stylesheet" type="text/css" media="screen">
This is all correct and the stylesheet works as expected.
However the .js script doesn't appear on the client.
Changing the c.InjectJavaScript to c.InjectStylesheet does inject the file as a <link> .. so I'm happy that the file itself is correctly embedded etc.
What could be wrong here?
The .js script will not appear on the client. (not on the way you would expect)
Look closely to the code of index.html:
https://github.com/domaindrivendev/Swashbuckle/blob/8223bedae706fec612c98ebbcee6b2d7033ae349/Swashbuckle.Core/SwaggerUi/CustomAssets/index.html#L98
Your customScripts will be loaded dynamically on the onComplete event
$.getScript(script);
Related
https://v3.vuejs.org/guide/installation.html#download-and-self-host
https://v3.vuejs.org/guide/installation.html#from-cdn-or-without-a-bundler
how do I import vue without CDN?
so what I care about is not having a build step. everything in pure human-legible js.
I found this https://github.com/maoberlehner/goodbye-webpack-building-vue-applications-without-webpack
I'm going to try and implement it inside unity Embedded browser https://assetstore.unity.com/packages/tools/gui/embedded-browser-55459
the challenge is that my interface cannot load things from the web and it can't be compiled.
Create index.html
index.html (using Vue 3 - important!)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Minimalistic Vue JS</title>
<script type="text/javascript" src="./vue.global.prod.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = Vue.createApp({
data() {
return {
message: "Hello world"
}
}
})
app.mount("#app")
</script>
</html>
Download vue.global.prod.js from https://unpkg.com/browse/vue#3.0.11/dist/vue.global.prod.js and save it along index.html
Open index.html in browser
Works just fine in Chrome or Firefox.
Notes
for the record my code is the repo I linked plus the vue libraries I downloaded and added in the root
Note: following is related to the repo linked before question was changed
The code in repo is written for Vue 2 (just try to open https://unpkg.com/vue in the browser). So if you downloaded distros for Vue 3 (for example the link I'm using above) the code from repo will not work
Even if you download Vue 2 version, the code in the repo will not work when opened from file system as it is using native ES6 modules - problem I described in the previous version of my answer:
As described here and here ES6 modules are always loaded with CORS. So just opening the index.html in the browser (without using server) will not work (definitely does not work in Chrome). Maybe Unity Embeded Browser has this restrictions weakened (as it's purpose is to be embeded) but without possibility to use desktop browser to develop and test your app, your experience will be terrible. I would reconsider the decision not to use bundler...
Update 1
Building Vue.js Applications Without webpack (sample project) will not help you either as it is again using native ES6 modules
To use Vue as a module from a local installation, you don't want to explicitly include it in a script tag in your page. Instead, import it in the scripts that use it. The whole idea of modules is that you can import them which makes explicitly including them in your page obsolete.
In https://bitbucket.org/letsdebugit/minimalistic-vue/src/master/index.js, import Vue:
import * as Vue from "./local/path/to/vue.esm-browser.prod.js";
I'm using Hippo CMS and trying to implement SEO plugin. I did everything by manual but I don't see any changes and meta tags in rendered results.
My basic layout is:
<#include "/WEB-INF/freemarker/include/imports.ftl">
<html lang="en">
<head>
<meta charset="utf-8"/>
<#hst.headContributions/>
<link rel="stylesheet" href="<#hst.link path="/css/bootstrap.css"/>" type="text/css"/>
<#hst.defineObjects/>
<#if hstRequest.requestContext.cmsRequest>
<link rel="stylesheet" href="<#hst.link path="/css/cms-request.css"/>" type="text/css"/>
</#if>
</head>
And I just enable plugin over Hippo Setup -> features. And sure then rebuild and run all again.
Then I'm going to Channel Editor -> Edit Page -> Add Component. The drag n drop component on page.
I did all changes by clicking on component. But anyway I don't see any changes on published page.
I didn't find any documentation about that, but maybe somebody resolve this issue and can help to me!
Thanks
I tried it out as well. It indeed does not work out of the box as you would expect. The component uses a template specific of the Setup feature, the seo.ftl. This makes it work as a draggable component in the channel manager. What it does not do is add the configured data to the html head.
If you check the seohelper.ftl [1] of the forge plugin, there you see the code that does this job. What you can do to make it work in your project is add the headcontribution tags as in [1] to seo.ftl. Also make sure you have a <#hst.headcontributions/> tag in the html head section of the base-layout.ftl of your project.
I will create a jira issue for this so.
[1] http://forge.onehippo.org/gf/project/hst-seo-support/scmsvn/?action=browse&path=%2Fcheckout%2Fhst-seo-support%2Fbranches%2Fhst-seo-support-1.01.xx%2Fsrc%2Fmain%2Fjava%2Forg%2Fonehippo%2Fforge%2Fseo%2Fsupport%2Fseohelper.ftl&revision=157
I think i have already read all the related questions here, but sadly i couldn't find an answer yet.
My problem is, locally everything runs fine without errors but when i deploy my website to my server, i'm getting there the following error:
The following sections have been defined but have not been rendered for the layout page >"~/Views/Shared/_Layout.cshtml": "styles"
I'm using Asp.Net MVC 4 with the Razor engine and .Net 4.5.
In _Layout.cshtml i have the following block defined:
<head>
....
#Styles.Render("~/Content/Css")
#Scripts.Render("~/bundles/modernizr")
#RenderSection("styles", required: false)
</head>
And in Index.cshtml the following block:
#section styles{
<link rel="stylesheet" href=... />
#Scripts.Render("~/bundles/js/somejs")
}
This is driving me crazy. If this error would also occur on my development machine, i could debug it. But it only happens on my server, locally everything runs fine.
Even other projects with similar code pieces run fine on my server.
Maybe someone has any hints for me?
I suspect that the contents of the _Layout.cshtml or Index.cshtml on your server is not what you think it is. Maybe the deployed version is different than what you have locally. Deployment went wrong?
I have a problem. I had a app on the manifest v1.
But now it tells me to change it to v2. But it gives me an error like:
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self'
chrome-extension-resource:".
I tried to change in the manifest:
"web_accessible_resources": [
"jquery-1.7.1.min.js",
"plugin.js"
]
But in the html code, I have:
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script src="plugin.js"></script>
How do I put it now? Should I delete that? If i delete it won't run! My popup doesn't even opens anymore :|
Hope you understood my problem, thanks
(I'll thank more if someone gave an example of API v2 using javaScript to download :) )
This error usually means that there is some script being executed directly inside your HTML page, not included via an external javascript file.
For example:
<script type="text/javascript">alert('hello');</script> embedded inside your html file is an inline script. The correct way to do it would be
<script type="text/javascript" src="hello.js"></script> .
Your file hello.js would include alert('hello');
I hope this helps.
I just started to learn Dojo. I followed one site Widget example with some different ways to load Dojo libraries. I like to use AOL reference to load dojo.js like this:
<script type="text/javascript"
src="http://o.aolcdn.com/dojo/1.2.0/dojo/dojo.xd.js">
</script>
and saved my widget codes in local web server like this:
scripts/
myWidget/
widgetExample.js
...
test.html
where widgetExample.js contains my widget class codes, and test.html is my testing page. The error message I got is: "uncaught exception: Could not load cross-domain resources: myWidget.widgetExample ...". I am not sure if I have to load dojo package locally? I really like to separate dojo library package as they are or loaded from AOL and only put my own codes in a local path. I tried to google about different domain loading, baseScriptUrl, and moduleMapping? Still not be able to figure out. Thanks for any detail instructions if any.
This may help: http://dojotoolkit.org/forum/dojo-core-dojo-0-9/dojo-core-support/xdomain-usage-dojo-loading-not-detecting-local-modules
The summary is: you need a djConfig item registering the modulePaths you want to be local, and specify a baseUrl to "trick" Dojo into thinking it knows where those paths are relative, across hosts.
djConfig = { modulePaths: { "mine":"/js/mine" };
then you can dojo.require("mine.Thing") from /js/mine/Thing.js
Regards,
Peter Higgins