Downloading swagger-documentation in the same style as displayed - swagger-editor

I'm using the swagger-editor docker.
It produces, in the right column, a beautiful and functional interactive version of the documentation I'm writing in the right column.
I am trying to export such documentation but to no luck.
Is it possible to export an interactive, stand alone, documentation looking and working as the one shown in the right column?

The right-side panel of Swagger Editor is Swagger UI. You can download Swagger UI assets and host them on your own website.
Download (or clone) the Swagger UI repository:
https://github.com/swagger-api/swagger-ui
Take the dist folder - it contains the static assets.
Put your OpenAPI YAML/JSON file to the dist folder.
In the dist\index.html file, change the url parameter to point to your YAML/JSON file:
const ui = SwaggerUIBundle({
url: "myapi.yaml", // <----
Put the files from the dist folder on your web server.
It's also possible to embed Swagger UI into your existing web page, e.g. if you want to have your custom branded header and footer.
See also:
Is it possible to get an offline version of Swagger documentation for a website?
Swagger UI single interactive HTML

Related

cypress testing of mendix app - unable to find mxui.js, theme.compiled.css files

I am trying to test a mendix app with cypress.
On trying to load the index file, I get the following in both the mendix and cypress logs.
404 - file not found for file: index.html/theme.compiled.css
404 - file not found for file: index.html/mxclientsystem/mxui/mxui.js
Which makes sense as it would be very unlikely that there are files under an html file in a directory structure.
Looking at the source code in the browser
<script src="mxclientsystem/mxui/mxui.js?637896725776724820"></script>
Why would cypress be searching for mxui.js under index.html?
Is this a problem with mendix? With cypress?
Cypress works with a served web page.
Not sure how a mendix app works, but if I want to test an index.html that has scripts and css resources to load, I would use VSCode "Open with live server" option on the index.
This will give me a URL usually localhost:5500 to visit in the app.
If there's any transforms required (e.g is CSS is in SASS format), you would need something more sophisticated involving Webpack and Babel.
Bottom line, serve your app in dev mode and use
cy.visit('url-as-used-in-browser')
to give Cypress access to the compiled page.
I see from the mendix tag
Mendix is a app platform-as-a-service (aPaaS) for Rapid Application Development. The rapid aPaaS offering prioritizes speed and agility and utilizes a “no code” principle
So, there's no code to serve. Just use the cy.visit(url) command using the same URL a user would access.

How to add image to REST docs api documentation

I'm using Spring Rest Docs to generate the API documentation for my APIs.
Now I want to add an image to this documentation. I know how to link the image in the asciidoctor file, and in IntelliJ Idea the preview shows the image, but when I generate the API documentation using Rest Docs and Gradle, the image is not shown.
What do I need to do in order to get the image in the generated API documentation?
It was actually rather simple to get this done. Thanks to the remark by Andy Wilkinson I dug back into the documentation.
I used a folder called 'resources' relative to the .adoc file instead of naming that folder 'images', after renaming it to 'images' my images show up.

webpack2 i18n-plugin How to decide the bundle to load

I have a working webpack config which can generate i18n bundles. I am using i18n-webpack-plugin. My website is a static website. I can see the bundles generated as [language].[name].bundle.js. eg: "de.login.bundle.js", "en.login.bundle.js".
Now in my login html page, how do I decide which of these bundles to load ? I will provide my users an option for language selection, say in top nav bar. Once user has selected it, how do I load the appropriate language bundle?
I found a solution to achieve this using HtmlWebpackPlugin :
new HtmlWebpackPlugin({
filename: language + '/login.html',
template: 'html/login.html',
chunks: ['login']
})
This generates separate Html files under each language directory eg: en/login.html, de/login.html. Now , based on the user's language selection, he can be redirected to appropriate URL.
I would still be interested to know if there's any alternate way to achieve this.

Adding a browse server image option to my ckeditor

I'm trying to add browse server image option to my ckeditor.
I know I need to add this:
CKEDITOR.replace('editor', {
filebrowserImageBrowseUrl: ''
});
But what then? What am I to do in order to add this feature to my ckeditor?
What link should I put there?
How I build a directory with all of my images?
What is the difference between "filebrowserImageBrowseUrl" and "extraPlugins: 'imageuploader'"?
CKEditor itself does not provide any server side code that handles image uploads. It just provides JavaScript plugins which let you integrate your own file manager/uploader (if you have any).
If you don't have a file manager, you may try CKFinder, which integrates well with CKEditor: https://cksource.com/ckfinder/download
There is a "CKEditor" example included in the samples folder which shows both applications running together. Make sure to enable CKFinder in config.php - due to security reasons it's disabled by default.

Jenkins UI customization

I want to change the look and feel(ui customization) of Jenkins. Also I would like to add new views(say like new html pages or web pages) with navigation to the required jenkins pages etc.
Please let me know if any single plugins will help me to do so.Any relevant information(how ever generic) will be very helpful.
Any suggestions or links or tutorials is also appreciated.
PS:- Pretty new to jenkins.The inputs from here will help me to add more details to the questions.
I am looking for documents or tutorials that specify Skinning Jenkins using plugins like :-
https://wiki.jenkins-ci.org/display/JENKINS/Simple+Theme+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+UI+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/JSWidgets+Plugin
The plugin page is providing very little information on how to use these and the benefits and the extend to which the UI can be changed.
Any doc or link is appreciated.
Assuming you don't want to write a Jenkins plugin, for adding pages, the best suggestion I can make is to use an HTTP proxy such as NginX, and configure it so that the pages you want to add are plain html files, and Jenkins is proxied for the rest of them. To a visitor, they will look like they are all part of the same site; you could copy code from the head and body sections of Jenkins-served pages to include some of the navigation.
The Simple Theme Plugin, which you found, will let you do basic customization of the look and feel of Jenkins. I do that for my build server and proxy it using this configuration fragment for NginX. The relevant CSS is in this CSS file - toward the end, look for the // JENKINS CUSTOMIZATION comment.
We use the Simple theme plugin - pointed at a css file for the simple styling, and a JS file to fix a couple of DOM oddities (some of the tables in the new look and feel have mismatching column counts).
Those two files need only be hosted either a handy http server, or you can place them in usercontent.
You need only refresh the page in the browser to see the changes. Both files can then happily reference other files served up too.
Handy things to note:
Jenkins has jquery, parts of YUI loaded and prototype loaded - so you can use them in your scripts.
If while debugging, the refresh gets in the way then use the console to enter the following to temporarily stop it without pausing JS: refreshPart = function() {}
When making DOM tree changes to content that is refreshed - attach it to the layout updates with:
layoutUpdatecallback.add(my_function) - that way your changes are applied to new incoming content.

Resources