I have created a Swagger documentation with a yaml file under:
api/swagger/swagger.yaml
Now I want to share a static HTML document with its definition, yet it was stated on the swagger project, that they don't plan to support HTML generation at all.
How can I generate a static HTML file from a Swagger project?
The easiest way I can think of is to use Swagger Editor:
Go to: https://editor.swagger.io
Click on "File" in the top menu bar and then select "Import File"
After import, click on "Generate Client" in the top menu bar, and then select "HTML" or "HTML2" to generate static HTML documentation
editor.swagger.io uses generator.swagger.io to generate API clients, server stubs and documentation, and generator.swagger.io is powered by the open-source project Swagger Codegen.
Download https://github.com/swagger-api/swagger-ui - folder of interest is "dist"
Copy your Swagger JSON into the dist folder
Open index.html and change the value of URL inside the tag at the bottom of the file to ./swagger.json (or whatever your swagger json is called) (see here)
Host online! (or start a local server to view output).
There is swagger2markup-cli that can generate a static adoc file.
Ensure that you have Java runtime installed. (I am using Java(TM) SE Runtime Environment (build 1.8.0_111-b14)).
You fetch the jar:
wget https://jcenter.bintray.com/io/github/swagger2markup/swagger2markup-cli/1.1.0/swagger2markup-cli-1.1.0.jar
And you can generate the a static adoc with it via:
java -jar ~/your/path/swagger2markup-cli-1.1.0.jar convert -i api/swagger/swagger.yaml --outputFile static-swagger
That adoc file can then be converted into a html file via asciidoctor:
asciidoctor *.adoc
You may need to install it, as I am using Ubuntu, I could via:
sudo apt-get -qq install asciidoctor
Are you trying to export it to create single documentation from different services? If yes, an alternative might be https://github.com/varghgeorge/microservices-single-swagger. This simple springboot microservice will show all your swagger documentation (from different servers) in one place based on YAML config.
Another answer suggested the Swagger Editor
, which is great. However, to obtain a single file to import into it:
npm install -g #apidevtools/swagger-cli
swagger-cli bundle openapi.yaml --outfile ./openapi-expanded.json --type json
The above command assumes your root file is named openapi.yaml and you want an output JSON file openapi-expanded.json: that JSON is what you'll import.
Use an HTML file like this to load your OpenAPI definition:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="//unpkg.com/swagger-ui-dist#3/swagger-ui.css">
<title>Your App API v1</title>
<body>
<div id="your-app-docs" />
<script src="//unpkg.com/swagger-ui-dist#3/swagger-ui-bundle.js"></script>
<script>
window.onload = function () {
const ui = SwaggerUIBundle({
url: "openapi.yml",
dom_id: "#your-app-docs",
deepLinking: true,
})
}
</script>
</body>
</html>
You can then later host it locally or use a service like Netlify to host it on the web.
Related
I want to inject a url (process.env.loginProviderUrl) in a static page for an external authentication provider which I've placed in the static folder which Gatsby automatically copies over to the public folder when building.
<html>
<head>
<meta name="salesforce-community" content="{process.env.loginProviderUrl}" />
<script
src="{process.env.loginProviderUrl}/servlet/servlet.loginwidgetcontroller?type=javascript_widget"
async="true"
defer="true"
></script>
</head>
<body></body>
</html>
But because it's in the static folder, it only gets copied over and the process.env.loginProviderUrl will never get replaced. How do I dynamically generate an html file in Gatsby which then gets copied to the static folder?
If you move your file to a separate folder that isn't processed by Gatsby you can instead set up a separate webpack configuration that will package files from that folder and provide them with ENV vars.
Alternately you could create a postbuild routine that uses simpler shell commands to find and replace instances of process.env.loginProviderUrl with the value from the local environment (e.g. sed).
This said, it may simply be easier to find another way to include this file in your Gatsby app.
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
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" />
So, I have a html file
<html>
<head>
..headstuff..
</head>
<body>
..bodystuff..
</body>
</html>
This file is included in the package, which I then deploy to my CRM. (rightclick -> deploy)
When I check my deployment, the file is present, and all looks visualy ok.
But when I check the code it now looks like this:
<html>
<head></head>
<body>
..headstuff..
..bodystuff..
</body>
</html>
How is this possible?
I've tried changing stuff in CRM and publishing, and it remains the same. I've also tried it with XrmToolbox with only the desired effect. So I'm suspecting the VS-CRM plugin to have something to do with this.
I've also tried different html's, they all get the same treatment.
I've seen issues with the WYSIWYG editor for web resource reformatting HTML incorrectly. If you're opening the web resource file in the web UI after deploying from VS and allowing the WYSIWYG editor render the content this maybe the issue.
I'm attempting to use LESS in a tab created via a Chrome extension (chrome.tabs.create), but I'm getting a cross domain error ("NETWORK_ERR: XMLHttpRequest Exception 101"), referring to the LESS JavaScript file. I'm not clear on how to set up the permissions. Adding the LESS JavaScript file to "web_accessible_resources" doesn't seem to help. All other files, such as css and js files load fine. It seems I only receive this error from within the less source. Any ideas?
To explain my setup a bit more, the LESS JavaScript file and .less file are loaded in an HTML file something like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" href="static/css/main.less">
<script src="/static/js/jquery-1.8.2.min.js"></script>
</head>
<body>
Whatever...
</body>
</html>
This html file is loaded in background.js like this:
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.create({url: 'mypage.html'})
});
The manifest file has permissions for "tabs" and "all urls", and loads background.js.
I'm not sure where you include the client side less.js compiler. See also: http://lesscss.org/#client-side-usage. Less.js is a client-side javascript. It seems the less.js loads from an other URL (domain) than your main.less file. This can be fixed by enabeling CORS, see: http://enable-cors.org/. On the domain where home.less has been installed, the server should send an Access-Control-Allow-Origin: * header.
less.js loads the less files with a XMLHttpRequests which supports CORS for most modern browsers see http://caniuse.com/#search=cors. More details can be found at http://www.html5rocks.com/en/tutorials/cors/
For development use less.js from local folder.
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
for release use any less compiler like lessc.