I have been checking out some terminal to svg recorders like termtosvg written in Python and svg-term-cli in Typescript.
I installed termtosvg and recorded a small terminal session to keep in my README as a demo. However github doesn't render it. Strangely it renders all the svg animations that termtosvg has.
svg-term-cli is using Rawgit to render, but I don't want to use it as it will be taken down.
I made a small repository for testing purposes here. I downloaded one svg from termtosvg, one from svg-term-cli and one of my own and put it in docs folder in the repo. And linked to them from my README.md.
Issue
The svg animation from svg-term-cli renders in README however the other two don't.
NOTE:
Inside docs folder I can clearly see Github rendering the animated svgs.
I'd like to use termtosvg and not svg-term-cli.
Why is this happening? How do I make README render my animated svg.
I had a chat with the creators of termtosvg and found out that termtosvg uses animation tags which GitHub considers as scripts thereby removing them. That's why we see just a black screen and no animation when we try to link svgs output by termtosvg.
svg-term-cli and the shark animation on the other hand uses CSS to achieve the same thing which GitHub doesn't seem to have an issue with. That's why they get rendered.
Possible workarounds:
Using github.io to host the images and link that to README as that seems to work.
Using Rawgit. But keeping in mind that it will be taken down soon.
Related
Here is an example page of the Tensorflow documentation:
https://www.tensorflow.org/probability/examples/A_Tour_of_TensorFlow_Probability
Here is the source of that page: Link
How is the Jupyter notebook converted into the HTML website? I think the collapsible code blocks and the table of contents on the right look really nice. I want to do the same thing with my Jupyter notebooks (or at least get some inspiration).
I couldn't find the script which converts the notebooks nor the CSS or template, which Tensorflow uses.
The "flag" which created the collapsible code cell is ##title Import { display-mode: "form" }, but I could not find reference for that.
Some ressources:
Description of the usage of the script which generates the API documentation: Link
There is tool called nbfmt, which can format notebook, but as I understand it can only update the code style, but does not convert it: Link
I've found _book.yaml and _index.yaml in some repositories, which might indicate bookdown.
Note that I'm not looking for an answer on how to create a collapsible code cell or a table of contents, but how Tensorflow did it. I know that there are already answers for the other two questions out there.
Thanks in advance!
As you've discovered, the tools the TF docs team use are all available on GitHub, including nbconvert, nbfmt, etc. There are also some localisation tools.
Mostly, the system works at the notebook -> markdown level, but it also generates reference docs for code -> html. These are all un-styled, "plain" content. Some YAML is also generated for navigation. In theory, these outputs can be published anywhere.
Once the content is generated, the hosting/publishing platform it's served from is a proprietary system unfortunately. You can see the same system is used on developers.google.com, firebase.google.com, cloud.google.com, quantumai.google, developer.android.com and many more (check out the page layouts, custom HTML elements, etc), but it's not available outside of Google.
If you have any specific questions about the tooling, you can find us over on GitHub in the tensorflow/docs repo. Feel free to ask, we'll help if we can!
I am using Github API to create an issue (specifically, with requests module in python).
I need to include the picture in the issue content, but I could't find any way that worked for me.
Could you please suggest something that works from python?
Thanks
Edit: It could be really easily done by Github markdowns for linking the pictures that I stored at Amazon S3.
Assuming you are already able to post things to the Issues Page of a given repository then follow these steps to post the image.
I too at first found it annoying to post pictures to github... Github uses markdown and with markdown you can theoretically use an image sourced on your computer (this I believe only works on markdown that you host) but you can also provide a link or image source which is on the internet... particularly convenient for posting pictures to github... is github or you can use dropbox, picasa, photobucket, instagram, or flixster or 20 other image hosting services on the internet, but the point is you then once the image has an href="http://photobucket.com/myimage/3549604690" you can now host that into your markdown file.
Like so:
Format: 
Meaning in my case:
Screen shot of Python stuff http://photobucket.com/myimage/3549604690
Notice that it works on stackOverflow as well.
For guides on markdown syntax:
http://daringfireball.net/projects/markdown/syntax#img
https://guides.github.com/features/mastering-markdown/
So STEP BY STEP (if you want to do it all through Github) and not apply any other APIs then have the user:
Create a new Github Repo or use their existing repo. (Your choice).
Make a post request to insert the image inside the repository's files.
Post the issue to the repository and now use the url of the image
where it was hosted. From what I've seen when images are added to a
repository they go to the path:
https://github.com/myUser/PictureHoster/blob/master/myscreenshot.jpg.
Python should brush my teeth! I tried to get it to work and here:  it is not working.
.
(Or something like that to find out I would go to your github page click on repositories click on the image inside your repo then right click on it once it's open and do copy Image URL).
Basically to use a different picture hosting service you do the same right click on it inside your flixster account and copy/paste that image url.
I've been making plots in Bokeh, they work fine in Chrome, but I just get blank pages in IE. I thought this was because my company uses IE8 by default, but we've now been upgraded to IE11 and I see the same problem.
The IE debug console reports that the page targets document mode 7, so it may be an issue with the metadata in the page header.
Is there a way to make Bokeh output plots with the correct metadata for IE?
I ran into a similar issue with a Bokeh figure at work not showing in Internet Explorer, but the figure worked fine in other browsers.
For me the problem seemed to be that intranet sites were shown in Compatability View (I must admit I don't know what Compatability View means...). The fix was to choose the options icon in the upper right corner, then Compatibility View Settings and then remove the checkmark at Display intranet sites in Compatibility View. After close and reload the figure appeared.
We regularly test on IE before release, so I am not sure what the issue could be. You can definitely get just the plot components using various functions in bokeh.embed and template them into what whatever larger documents you like, but perhaps the default template needs updating or tweaking. I don't know what "document mode 7" is, but some of the other devs might be more familiar with IE and can help investigate. In any case I encourage you to make a proper issue not the GitHub issue tracker:
https://github.com/bokeh/bokeh/issues
Also had this issue with IE11.
I fixed it by removing webgl=True option from bokeh.plotting.figure() call.
cf. [http://docs.bokeh.org/en/0.11.1/docs/user_guide/webgl.html]
I have a parent file type that is folderish, and I would like to include a thumbnail of the first page of a child pdf in the template. Can someone roughly outline the tools and process you can imagine would achieve this, so that I can investigate further?
Getting out the first page of pdf can be achieved by using ghostscript.
This is an example script which forms an gostscript command and stores the images. I took this from collective.pdfpeek. Which by the way could solve your problem right away :-)
Until few days ago I would have recommended you not to use it, since it was a little bit buggy, but they recently shipped a new version, so give it a try! I'm not sure whether they now support DX or not.
So the workflow for you should be.
Uploading a PDF
Subscribe modified/creation events.
create image of first page using ghostscript (check my command, or collective.pdfpeek)
store it as blob (NamedBlobImage) on your uploaded pdf.
Also implement some queueing like collective.pdfpeek to not block all your threads with ghostscript commands.
OR
Give collective.pdfpeek a shot!
BTW:
imho on a large scale the preview generation for pdfs needs to be implemented as a service, which stores/manages the images for you.
I have a project with many scripts using Matplotlib. I'd like to build a web interface for this project.
How do you place a Bokeh chart within a Chameleon template? I'm using Pyramid and the Deform bootstrap if that matters.
Does anyone have a good example out there?
There are several different issues to address here.
If you are truly trying to port a lot of Matplotlib plots into interactive JS, then it's possible that the mpld3 project is a good fit for you. However, you should be aware that by using D3, there will be performance implications, depending on how many points are in your plot. Bokeh also does have basic Matplotlib support now, and will only be getting more. Jake is currently refactoring the mpld3 project into an explicit exporter and then D3 renderer, and we will also be potentially building off of this work for the Bokeh Matplotlib support.
To do this with Bokeh, you can grab the raw HTML for a plot by looking at how e.g. HTMLFileSession.dumps() is implemented: https://github.com/ContinuumIO/bokeh/blob/master/bokeh/session.py#L295. The default template is bokeh/templates/base.html; however, this is a full HTML file, and not a fragment. The dumps() method is pretty straightforward, as is the default template, so you should be able to get what you need from looking at those. Hopefully for the next release, we will have finished out a HTMLFragmentSession which will make it easier to embed.
You want to use plot.create_html_snippet. This function returns the code that you want to appear in the HTML, the function also writes out an embed file.
This is what an embed snippet looks like
<script src="http://localhost:5006/static/dc0c7cfd-e657-4c79-8150-6a66be4dccb8.embed.js" bokeh_plottype="embeddata" bokeh_modelid="dc0c7cfd-e657-4c79-8150-6a66be4dccb8" bokeh_modeltype="Plot" async="true"></script>
the following arguments control how the embed file is written out, and where the js code searches for the embed files.
embed_base_url controls the url path (it can be absolute or relative) that the javascript will search for the embed file in.
embed_save_loc controls the directory that python will write out the embed file in. embed_save_loc isn't necessary when server=True
static_path controls the url path (it can absolute or relative) that the javascript will use to construct URLS for bokeh.js and bokeh.css. It defaults to http://localhost:5006/static/, but could just as easily point to a CDN
When running the bokeh server, navigate to http://localhost:5006/bokeh/generate_embed/static . I think this requires you to be running on master because of a bug.
I hope this helps.