Redoc is a great tool, but I'm struggling to understand how it works. Currently I've been tasked with copying some docs from api-docs.io to be self served using redoc.
However, my issue is that the schemas aren't appearing in the side bar as they do on the api-docs site. I'm not sure how I can get models to show on the side as well... And I'm fairly new to api documentation. You can also check out how the models are displayed here. And see another example below.
I've taken a look to see if this is a feature of redoc and came across this merged PR which (based on the discussion in the PR's issue) states that we should add an html element, SchemaDefinition. I am using the basic html file (suggested in the readme of the redoc repo), but we want to use a json schema (which is referenced with spec-url) to render the docs on redoc so I'm struggling to understand how I can manipulate the side bar using just the html element.
Maybe it's just my understanding of how redoc works that is lacking. If you feel that's the case, a quick explanation would be wonderful.
You have to modify the json with additional information.
Sample json (without sidebar model section): https://petstore3.swagger.io/api/v3/openapi.json
Add to "tags" array
{
"name": "pet_model",
"description": <SchemaDefinition schemaRef="#/components/schemas/Pet" />,
"x-displayName": "Pet"
},
{
"name": "user_model",
"description": <SchemaDefinition schemaRef="#/components/schemas/User" />,
"x-displayName": "User"
}
Then to group the sidebar add the x-tagGroups extension
...
"tags": [...],
"x-tagGroups": [{
"name": "Api",
"tags": ["pet", "store", "user"]
},
{
"name": "Models",
"tags": ["pet_model", "user_model"]
}],
"paths": ...
Related
As we know, Minium Developer supports JSON files and it shows the code in green colour but, yesterday it turned into white colour code like plain text and doesn't recognize anything, even if I import an existing proyect or create a new proyect. Why is this happening?
The screenshot
The JSON code
{
"loginJSON":
{
"url": "https://minium.vilt.io/docs/developer/minium-developer/",
"idioma": "Castellano",
"usuario": "user",
"pin1": "2236",
"pin2": "6322"
},
"altaHuchaJSON":
{
"motivo": "Viaje",
"nombre": "Crear guardiola test",
"objetivo": "300",
"fecha": "15/8/2019",
"aportacion": "100"
}
}
Json files are always presented as white text, since Minium Developer does not support the syntax highlight for the json files, but Minium Developer is able to detect and read json files.
I'm currently having a regular HTML website in multiple languages. I've tried something with PHP, but that didn't turned out very well. What I need is a Multi language site without:
- Subdomains (like en.domain.tld)
- Paths (like domain.tld/en)
What I do need:
- Languages that are stored in sessions/cookies
- Languages which can be used around the whole site (with one place to store the language files, if that's necessary)
- Preferably without visible indications in the URL (like ?lang=en).
A bit like how Google does it, because I also have multiple TLDs, so the user shouldn't be required to change their language by visiting another domain like .de, if they set their language to English from the .com site.
What is the best solution for this? I'm also very new to making websites, so that's why I'm asking.
What i prefer to do is
Create a localization directory at the top level of your app
index.html
app.js
localization/
Inside localization directory create two files
web-en.json
{
"title":"Hello world",
"desc":"languages are fun"
}
web-es.json
{
"title":"Hola Mundo",
"desc":"idiomas son divertidos"
}
Install this library "jquery-localize": "https://github.com/coderifous/jquery-localize.git"
bower install jquery-localize
Include the library
Add the attributes to your HTML tags
Hello World will go here
Translated desc will replace this text
Call the library onReady
$(function(){
$("[data-localize]").localize("localization/web");
};
Yes it's possible to translate a website and save its selected language across the whole website without changing the URL.
You can use Cloud Translation, it's a free and open-source project from Angry Monkey Cloud: https://github.com/angrymonkeycloud/CloudTranslation.
You should add a reference to jQuery first, then to the CloudTranslation JavaScript file:
<script crossorigin="anonymous" src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js"></script>
And add the configuration within the HTML head as follows:
<script type="application/json" id="CloudTranslationConfig">
{
"Settings": {
"DefaultLanguage": "en",
"UrlLanguageLocation": "", // Keep empty
"TranslatorProvider": "Azure", // Could be empty if you want to provide the translations manually
"TranslatorProviderKey": "{Your Microsoft Azure Translator Key}",
"UrlLanguageLocation": "Subdirectory"
},
"Languages": [
{
"Code": "en",
"DisplayName": "English"
},
{
"Code": "de",
"DisplayName": "Deutsch"
}
]
}
</script>
and add your own custom select (dropdown) having the class "CloudTranslationSelect" to display the list of predefined languages.
More information found on https://www.angrymonkeycloud.com/translation
sorry if this has already been asked - I looked extensively, but can't find anything that seems to address it. Though it's quite possible it's been asked a dozen times already and the language used just went completely over my head. Which brings me to this: I'm not technologically stupid or anything, but as far as coding anything goes, that's another story entirely and I know virtually zero terminology regarding Chrome extensions. I just started googling about an hour ago.
Anyway, the question. I'm trying to make an extension to replace a single gif on a website I frequent. It's a loading image, so it appears on virtually every page, and it's just atrocious. The image is called (is that the right word?) by a script...rocket-script, I think it's called, which refers to it as ajax_loader, from browsing the page source? And the CSS stylesheet gave me the URL for the image.
So, here is the code I have, based on googling:
manifest.json
{
"manifest_version": 2,
"version": "1.0",
"name": "extensioname",
"description": "extensiondescription",
"content_scripts": [
{
"matches": ["websiteitselfurl.com*","URLofimagetobeblocked.gif"],
"js": ["part2.js"]
}
]
}
And then there's
part2.js
document.images[0].src = "replacementimage.gif";
document.images[0].height = "300";
document.images[0].width = "300";
Obviously those aren't the actual URLs, but...
All this ends up doing is replacing an image on every webpage, regardless of where it is, with the replacement gif. And not even the loading image in question on the site I am trying to replace in the first place.
I've tried changing the values in the "matches" line to a few different things, including at the end as in the example I found, and...that's literally all I can think to do.
I'd like to reiterate that I'm a complete know-nothing moron about this, so I apologize if it's already been asked, but I really cannot find an answer anywhere, and for the life of me I cannot get this to work myself and I'm out of ideas at this point. I registered here just to ask because I'm like ripping my hair out over it.
Any guidance whatsoever would be tremendously appreciated. Thank you!
Considering you are referring gif hosted in external site(imgur), you should use the full path of that image: https://i.imgur.com/Li7isRP.gif
manifest.json
{
"manifest_version": 2,
"version": "1.0",
"name": "extensioname",
"description": "extensiondescription",
"content_scripts": [
{
"matches": [
"http://websiteitselfurl.com/*", "https://websiteitselfurl.com/*"
],
"js": [
"content.js"
]
}
]
}
content.js
var ajax_loader = document.getElementById("ajax-loader");
ajax_loader.style.setProperty('background', 'url("https://i.imgur.com/Li7isRP.gif")', 'important');
// If needed, you could also change width/height of ajax_loader to better match the new image.
Just thought I would throw in another possible avenue for a solution. Since you want to replace a gif that loads in dynamically, it might be better to just redirect the request rather than try to alter the page after it is called. Something using the webRequest api would work well for this. For example:
manifest.json
{
"name": "VF Sample",
"version": "1.0.0",
"description": "A sample for VF gif replacement",
"manifest_version": 2,
"permissions": [
"webRequest","webRequestBlocking","http://vampirefreaks.com/*"
],
"background": {
"scripts": ["bgp.js"]
}
}
bgp.js
chrome.webRequest.onBeforeRequest.addListener(function(details){
return {redirectUrl:"http://i.imgur.com/Li7isRP.gif"};
},
{urls: ["http://vampirefreaks.com/_img/site/ajax-loader*"]},["blocking"]);
The integration guidlines for the Spotify Apps API mentions DefaultTabs and how it should be expressed in the manifest.json file to achieve tabbing in your Spotify app. Unfortunately I have problem getting this to work and the app that it refers to (Tabs, with the URI spotify:app:tabs) for example doesn't exist in my preview build of the Spotify application.
The application can specify what tabs it wants in the manifest file, in the DefaultTabs attribute. The attribute must be a list of records. Each record must contain the attributes arguments and title. The title can, and should, be localized by making it into a record with attributes for each language (currently en, fr and es).
I have tried the following:
Adding this snippet to my manifest.json file:
"DefaultTabs": [{
arguments: [],
title: {"en": "På TV4"}
}
]
Quitting the Spotify application and reloading it.
Load my app by entering it's address spotify:app:name in the address field.
Here I expected to see the tabs loaded, but it wasn't. Any help with the correct syntax would be appreciated.
I had a few issues at first too, but the following snippet works for me:
"DefaultTabs": [
{
"arguments": "test",
"title": { "en": "test" }
},
{
"arguments": "test2",
"title": { "en": "test2" }
}
]
I think you are probably missing the arguments.
Also check out the Kitchensink demo app and sourcecode in GitHub: https://github.com/ptrwtts/kitchensink
I'm designing a RESTful API based on JSON representations. In order to comply with HATEOAS, I use links between resources extensively. Therefore, I followed this suggestion for serializing links in way very similar to ATOM links.
Now I have sometimes problems identifying the correct link relation type. When a resource contains a link to itself, the self relation is obvious. It gets more complex when the resources are collections and aggregations of sub-resources, or contain many links to related resources.
Take a blog post as an example, and think of a resource that returns a snapshot of the blog post – including the author, tags and comments of this blog post.
Obviously, this resource contains many subresources and should of course also provides separate links to them:
Sample Resource:
{
"blogpost":{
"link":{
"rel":"self",
"href":"http://blog/post/4711"
},
"author":{
"name":"Bob",
"link":{
"rel":"???",
"href":"http://author/uri"
}
},
"title":"foobar",
"content":"A long article here…",
"comments":[
{
"comment":"great article",
"link":{
"rel":"???",
"href":"http://blog/post/4711/comment/1"
},
"author":{
"name":"John Doe",
"link":{
"rel":"???",
"href":"http://author/uri"
}
}
}
],
"tags":[
{
"value":"foo",
"link":{
"rel":"???",
"href":"http://blog/post/4711/tag/foo"
}
}
]
}
}
So what are appropriate relations for the given links? I know that there are relation types such as tag, but not all of my resources match the existing relation types. Or is it okay to use self when referring to the author/tag/comment, because it relates to the context of the enclosing JSON (sub-)object? What is the semantical entity self is referring to?
RFC 5988 states:
The context of the link is either a feed IRI or an entry ID, depending on where it appears
How can I interpret this in terms of JSON? Is each new object {…} a new context?
Thanks!
That is a great question. If you look at the example for Hal you will see that the rels are defined within the context of the sub-resource.
I do not know of any definitive guide on when the rel is related to the resource as a whole or a contained sub resource.
The only extra piece of information I can point you to is the anchor parameter in RFC5988 which allows you to redefine the context IRI using either a fragment or a completely new URI.
Ideally, your mediatype should state whether the context IRI is different for nested resources, or whether the context IRI needs to be explicitly changed. That would be another advantage of using a media type like application/vnd.hal+json instead of plain old application/json as the Hal spec states:
#rel - For identifying how the target URI relates to the 'Subject
Resource'. The Subject Resource is the closest parent Resource
element.
LSON-LD
You can maybe have a look at JSON-LD (JavaScript Object Notation for Linked Data. It looks like more complicated than HAL but you can do more with it.
JSON-LD is being standardized inside of the W3C, here is the proposal recommendation.
Also
HAL vs JSON-LD (answered by Manu Sporny, creator of JSON-LD)
JSON-LD articles and presentations
Hydra (console)
Sorry I don't have time to provide with an example..
It's a bit late to answer that question but for future reference, this is how I solve this problem :
{
"blogpost":{
"title":"foobar",
"content":"A long article here…",
"link":{
"rel":"self",
"href":"http://blog/post/4711"
},
"link":{
"rel": "author",
"href": "http://author/uri",
"alt":"Bob"
},
"link":{
"rel": "comment",
"alt": "great article",
"href":"http://blog/post/4711/comment/1"
},
"link": {
"rel":"tag",
"href":"http://blog/post/4711/tag/foo",
"alt":"foo"
}
}
}
when you think about it, comments, tags, etc are all distinct resources linked to your post ... why not then make them all what they are .. links ! You even save on the size of your response ;)