I'm working on the documentation (https://global-coffee-data-standard.readthedocs.io) of my JSON schema (https://raw.githubusercontent.com/andrejellema/GlobalCoffeeDataStandard/master/schema/global-coffee-data-standard.schema.json)
The basics I have working (thanks to a lot of help from this forum) but now I would like to include the docson widget to show my code more beautiful (https://global-coffee-data-standard.readthedocs.io/en/latest/explanation.html#id13)
I've read this page https://threesixtygiving-standard.readthedocs.io/en/latest/_static/docson/README/ and I'm wondering how to install docson locally but more important on ReadTheDocs.
Do I need to run npm i docson localy? If so which files do I commit to my _static folder so ReadTheDocs can work with it as well?
Or can I put some magic in conf.py to let Sphinx handle it?
EDIT
I tried adding the docson files to my _static folder and it seems to work when I add this code to my ReST file:
<script src="_static/docson/js/widget.js" data-schema="https://raw.githubusercontent.com/andrejellema/GlobalCoffeeDataStandard/master/schema/global-unique-id.json"></script>
But only when I add just one docson widget. When I add more I get this error in the console:
only one instance of babel-polyfill is allowed.
So I'm assuming this is not the correct workflow.
What is the correct workflow to add multiple docson widgets to my page.
Related
Is there a way to format correctly HTML in VSCode when we use Twig or Swig tags, like
{% if ... %} {%else%} {%endif%} {% for %} {%endfor%} {% include %}, etc...
For now code formatters remove all line breaks before and after those tags.
Was not able to find an suitable extension for that.. Neither a way to configure the internal code formatter.
I had the same problem and solved installing this extension:
Twig Language
Install it, restart the editor and ff you are on windows you can format with standard ALT + SHIFT + F.
Hope it helps.
I've been struggling SO MUCH with this, and finally found a fully working solution; so wanted to share it here. Follow the steps below and you should be good to go:
Download the Vs Code Extension Prettier Code Formatter. Pay close attention to grab this Prettier Package, as Visual Studio proposes several different Prettier Extension Packages.
In the Visual Studio Editor, go to Settings --> type "format" until the formatting settings pop up, and then select Prettier Code Formatter - esbenp.prettier-vscode as your default formatter. Do this for both the User as well as the Workspace tab, if not automatically done.
Next, you'll need to add the melody plugin used for the proper formatting of twig files using Prettier in Vs Code. This is actually a nodejs package, so you first need to install Node JS. It can occur that you will run into permission issues when installing node packages later on. To try to avoid this at max, install node using a nvm.
Now you can install the melody plugin. To do so, follow the instructions of the linked repository. Note that you previously need to install yarn if you don't have it already installed, via npm install --global yarn.
To hold project-specific formattings within your github repo / project, you can add a .vscode/settings.json file which holds the general prettier configs you're currently using in your project. That's pretty useful to share the prettier formatting settings across developers / repos.
Also add the .prettierrc file to your projects root, with the following content:
{
"printWidth": 80,
"tabWidth": 4,
"plugins": ["./node_modules/prettier-plugin-twig-melody"]
}
This defines the additional use of the above-mentioned plugin. You may adapt the configs according to your needs. You can either put your node_modules folder holding the package within it into your local project, or adapt the path as needed to wherever your melody plugin is located on your local machine.
FYI: The node_modules folder is normally not uploaded to project repos due to its size. Once you install node, you will automatically get that node_modules folder on your local machine. And when you then install the above-mentioned package, it should get installed into that node_modules folder.
Now add the Twig Syntax highlighting package from whatwedo. Now, VS Code should recognize Twig files when you open them. Verify this by opening a .twig file within VS Code and checking in the bottom right corner that the file is recognized as HTML (Twig). This will additionally highlight your swig tags.
To verify that everything's working properly, you can open the prettier terminal by clicking on Prettier at the bottom right in your VS Code. Now write some twig content into a .twig file and trigger the formatter. If no errors were reported in the console, and the console informs that the melody plugin is used for formatting; and of course the code has been properly formatted; you're good to go.
There is a built-in way nowadays; when you try to format a document you get forwarded to the extension page and a search for a formatter for a given file format. For Twig:
category:formatters twig
Twig Language 2 seems to be the go-to VS Code Twig extension with the best formatter as of now.
Something related to this, i did it by installing twig in vs code.
Open VS Code and
Ctrl+Shift+X
And get the twig extension and install it. Thanks.
I am in the process of rebuilding a API documentation site for an open source project where we want to keep an archive of previous releases. I am wondering how I can configure Jekyll to generate the right hierarchy?
We have the following directory layout in our current /docs folder (which we would like to reuse in Jekyll somehow):
current/
v1/
v2/
v3/
Whenever we release a new version the current folder gets copied to a new folder (say v4). The contents of each folder is something like this:
introduction.md
testing.md
api-foo.md
api-bar.md
I'd like these to be available under the url domain.com/v3/testing/, domain.com/current/testing/, etc. I see that I could probably employ collections to do this, having one collection per version. To do this I see myself auto-updating the _config.yml as part of a build script (I made an example doing this here), but I am not sure how to progress from here, or if using collections for this is the wrong approach ...
This is too brief of an update to be of real quality, but thought I would mention that we solved this in the end in the Sinon project. Check out the repo at GitHub sinonjs/sinon and see the docs folder as well as the scripts called from package.json.
Feel free to improve on this answer by editing it and adding content and links.
Magento version: 1.9.2.4
I am currently working through this tutorial, and am trying to install the Layoutviewer module.
I following the link on the page to where I could get the layout viewer, and then used the manual install guide on this page to install it.
The module is being detected by magento, and is listed on the Disable Modules Output section (it is enabled).
The directory tree for the module is as follows:
magento1
app
code
local
Magentotutorial
Layoutviewer
I have also made sure that the config file's name and contents are 100% correct.
When I try to use the module (http://127.0.0.1/magento1/helloworld/index/index/?showLayout=page) it doesn't work, and just shows me the screen as it was before.
Is there anything I could be missing, or did I perhaps install the module incorrectly?
edit
I have already found this previous question that is basically identical to mine, but it's very old so I don't want to comment on in - it did not help me solve the problem.
Problem resolved:
I placed the Layoutviewer in the Magentotutorial directory, but it was supposed to be in it's own (Alanstormdotcom) directory.
Both of these solutions worked:
Move the module to the correct directory or
Replace all references to Alanstormdotcom/alanstormdotcom to Magentotutorial/magentotutorial
Found this Googling for the same problem. My problem was that I put Storm's module in /community/Alanstormdotcom/. It won't work from there, it must be in local (/local/Alanstormdotcom/).
I'm using this yeoman generator (https://github.com/Swiip/generator-gulp-angular) for my project. And have added a couple of bower libraries, namely, videojs, ngDialog.
The problem I'm experiencing is that the css files included in these libraries aren't being packaged up into the vendor.css file like the rest of the packages are. I know that that the generator uses wiredep, but I'm afraid I don't know enough about it to find out what went wrong.
Basically, when I go to view source, I see that there are style includes underneath the vendor.css style include, eg.
<link rel="stylesheet" href="../bower_components/ngDialog/css/ngDialog.css">
Also notice how it is included using "../". This would break if I'm in an HTML file that is in a directory other than the root.
Any pointers?
Thanks.
John.
Basically you don't have to worry about the building process, the gulpfile provided by gulp-angular is well configured for you future including bower components.
Once you run bower install your_component, be sure to run gulp build again in command line, it will then include the needed styles to your index.html.
If you would like to know more about the underlying process with that, you may check yourapp/src/index.html from line 12 to line 20 to get a sense of it. For how wiredep works for your bower components, the official document should suffice.
Sorry for the noob question but I'm trying to start up a new application with Sails and include my assets. I'm using Bower to manage my packages for things like Bootstrap and JQuery. I had a read of this question and added a .bowerrc file which is now installing my Bower components to /assets.
I'm now confused as to how I should proceed to add these files into my project. It seems as though I can't just do a <script> tag in the header as I'm used to because it's giving me a file not found. Reading through the sails documentation it seems like Grunt should be creating a .tmp/public/assets folder in my project, but whenever I run sails lift and go to .tmp/ there is nothing in there.
I also read in the documentation that I should be using some kind of asset injection, I tried adding this to my HTML and it seems like it doesn't do anything.
My other question is around how I go about referencing images in my HTML. Obviously I can't just do something like src='assets/images/image.png, how should I go about this? Is there something really obvious that I'm missing?
Sails use grunt tasks to do lot of things during lift and build. You can get much better look how everything work if you take some time and check what is inside Gruntfile.js from root of your sails project.
About your specific question here is some information:
- from sails docs: "In order to take advantage of asset injection, minification, and concatenation you must put your assets in folder under assets/linker". This exactly mean that everything what you will put inside assets/linker directory will be affected by grunt tasks during lift. It mean that all files/directories from linker will be copy to .tmp/public and also some of that files will be processed before saved to .tmp/public.
- About adding tags. If you take a look at Gruntfile.js you will find this variables: var cssFilesToInject = [...] and var jsFilesToInject = [...] which contain files that will be automatic added to layout header during sails lift.
- About your 'other question', yes you can do something like 'src='linker/images/image.png' if you move that files to linker directory (assets/linker).
I hope this help :).