Multiple languages by tab

bep / docuapi

Beautiful multilingual API documentation theme for Hugo

https://docuapi.netlify.app/

Other

750 stars 200 forks source link

Multiple languages by tab #55

Open maelle opened 4 years ago

maelle commented 4 years ago

Fix #54

I realize this PR is not very elegant yet.

The body data attributes are now a list of all languages including "otherlangs", and a list by tab of languages to go with the main language.

<body class="index" data-languages='[ &#34;go&#34; ,  &#34;java&#34; ,  &#34;javascript&#34; ,  &#34;python&#34; ,  &#34;ruby&#34; ,  &#34;shell&#34; ]'  data-withgo='[ &#34;go&#34; ]' data-withshell='[ &#34;shell&#34; ]' data-withruby='[ &#34;ruby&#34; ]' data-withpython='[ &#34;python&#34; ]' data-withjavascript='[ &#34;javascript&#34; ,  &#34;java&#34; ]'>

It now works

in the JavaScript tab one sees both Java and JavaScript,
JSON is in all tabs.

maelle commented 4 years ago

I suppose the CSS could also be tinkered with (to add spacing between languages), but that is probably best kept for custom CSS.

Something like

content pre {
margin-top: 20px;
}

maelle commented 4 years ago

This PR can only handle one otherlangs (i.e. I'll need to add for loops for maps in otherlangs)

maelle commented 4 years ago

In this PR there is now

tweaks to baseof.html to store more data attributes related to languages.
changes in _lang.js to show more than one language per tab
changes in exampleSite to exemplify the features
changes in the styles.html partial to be able to add custom CSS because I couldn't find a variable to override to add some margin before pre elements.

I'm not sure whether any of this might be useful to add to the theme, but if some of it is, happy to incorporate feedback & to document stuff.