Typically, writing out my problem ends with more clarity and I solve it on my own. That doesn't seem to be the case this time. So, would you be able to assist?
Background
I am working on my personal portfolio and it's in the form of a code snippet. I have one step left before I'm done. I would like to remove the currently redundant python snippet.
VickiLanger / vickilanger.com
A bit about Vicki
Right now, I have a Python file with my portfolio contents and I have an HTML file with the Python stuff manually pasted into a a code
block.
I figure there must be a way to extend or print the output and have it show up in my code
block. I feel like this should be able to be done with something like Jinga2.
I have tried tons of searching, but I must be using the wrong search terms. Being honest, I don't know what I don't know.
Problem
Thing is, I don't desire to write a brand new file. I just want my python stuff in the code
block of the HTML file.
Top comments (12)
I've done something like this before. Check out pystache. It allowed me to write nginx configs.
github.com/defunkt/pystache
My GitHub repo for my use of pystache is github.com/MikeCase/mkvhost if you want to check it out. Can't promise it's pretty though :p
Thanks! I see how that might help. I'll check it out further.
I also don't know the solution, but it sounds to me like you're already on the right track with Jinja2. It's a format-agnostic template system, I think you should be able to use it to do what you need here, but take this with all the grains of salt... it's what I'd try first, for what that's worth.
Yeah, I thought Jinja2 would do it, but so far it seems to only work with HTML files. I’ll keep looking though.
You won't be able to do that with plain HTML, you could do it with a script tag with a fetch request that edits the DOM. Could write up a sample later if you are interested.
Would it have to be a JavaScript thing or could I use the script tag for python stuff? That’s definitely not something I’ve done before. I’m not sure what a DOM is either,
Sure, so DOM is the document object model. It is what makes up a website. Each "element" you see on a web page is one object on the document. See MDN DOM reference.
Python, as of now, is not understood by browsers. So placing python inside a script tag will not do anything. However, a tiny bit of javascript should do the trick.
To understand the next bit you have to understand that as part of GitHub pages, which you use to host, they host the whole repo. Using index as the standard "default" file. Example both vickilanger.com and vickilanger.com/index.html map to the same page. We can see that your python file is hosted at vickilanger.com/portfolio.py. This by default will try and download the file, and run it. We will use this to our advantage.
We can use the javascript fetch API, with MDN docs here to dynamically request your portfolio file and insert the text inside an element.
So first, we can remove the code from the HTML and add an ID label to the code block. We will use this later. We also supply some default text that will be displayed while the fetch is in progress.
Then at the end of the body, we can add a script block with some javascript to dynamically updated it after the page is loaded.
This will request your portfolio file. If the response failed it will raise an error. Parses the text, and updates the code block to the text of the file, using the code element we tagged with ID above. On any error, it displays an error message.
That should do it, I tested it locally but I used the full URL, you should be able to use the local path URL.
Wow! Thank you so much for this awesomely detailed response.
DOM makes a lot more sense, thanks.
JavaScript isn't my thing. I just wanna make sure I understand what you gave me. There's a request
fetch
. Then thethen
,then
, andcatch
are the exception handling, right? When reading=>
what should I be saying in my head?So, the script works, but now the syntax highlighting from prism.js isn't working. I wonder if that's just going to be a tradeoff I have to make.
Then handles the response as a chain. This is due to the asynchronous nature of JavaScript. The catch is the error handling portion.
=>
is an anonymous function. Think of it as a shorthand for def but inline. Similar to lambda in Python but not limited to one line. Not sure why prism doesn't like it. Might have to pass the text into prism before setting to on the ID. I do not have experience with prism.I'm a Rookie. I Downloaded the project files from GitHub. I Opened .index and the error message "Unable to fetch portfolio, try again later". All files are together in my downloads directory.
I looked at the PRISM file and I have no idea what that code does.
I like it it's cool.
Can you recommend me any source about this Article?
I've done something like this before but with JS you can write python results as text for js HTML tag maker.