I'm building a simple personal site in Django, the main mission of which is to embed my GitHub projects inside blog posts so I can write about them in detail.
The GitHub projects are all self-contained HTML/CSS/JS projects and include the HTML files that demo the project. (For example, this Javascript metronome has a demo.html file that, if rendered, embeds the metronome and so forth.)
I have a nimble blog post model that allows for custom code of any sort, but I'm sure there's a better way to embed this project than pasting the HTML+CSS for the demo into the body text of the post and calling the JS files.
I do not want to use an <iframe>, so I'm thinking there should be a server-side way to load the HTML from the demo pages and its dependencies on GitHub directly onto the page before it is served to the reader. If necessary, I can keep up-to-date clones on the server to get around cross-domain issues.
Or maybe there's a better way to embed GitHub projects on a page? Gist?
Related
I am quite new to django so I am sorry if I have overlooked something simple.
This is my current website: https://www.michealnestor.com
I am trying to remake it using react and django, and a lot of it is different, however I want to keep the functionality of being able to run my js apps from the website: https://www.michealnestor.com/projects EXAMPLE: https://www.michealnestor.com/projects/sortingalgorithms/ .
I want to be able to upload project folders, with html, css and js in them from the admin page, and then be able to open these projects from my website. I am not sure how to do this though.
I have tried manually placing such a folder in a templates folder in my app, and I have managed to use a view to load the html file, but this file can't seem to find the css and js.
Maybe I am going about this the wrong way, in any case I would appreciate some guidance!
I am very new to web development and the following is my use-case :
I have a large number of Bokeh charts, each in a separate HTML file.
In simple terms, I would like to have a home page, where I can provide
links to each one of these charts. However, During runtime, I would
like to edit these separate HTML files, so as to provide a link to go
back to the home page or to other pages. I would not like to modify
the HTML files permanently, so I can make use of them outside of the
web page as well for simple visualization on my system.
What is the best way to do this ? Are there technologies outside Django, I should be looking at to do something like this ?
If most of the content is static, maybe have a look at Jekyll.
The include functionality would let you create one file with the 'link back to the homepage' or in fact further content which you want to avoid repeating (such as navbars, headers, footers).
Bootstrap 4 is your freind for making the site look shiney.
As you're building the site you can run the development server with jekyll serve which allows you to connect to a development server from your browser, and preview changes as you're making them. This would be accessible somewhere like http://localhost:4000/
When you're ready to publish, you can use the jekyll build command, which outputs all of the static HTML files to the _site directory. Notice that at this point, the step of 'putting the homepage link in every page' is handled automatically by Jekyll and you end up with a directory you can upload directly to any hosting platform. The original HTML files/Boken Charts can therefor remain in their original form for use elsewhere.
This method is probably much more effiient than using Django for your use-case, which seems to require serving lots of static content whch already exists. With Django in production you'd need an application server, as well as a webserver and possibly a database which means more things to go wrong.
For bonus points, once you've got the hosting setup, stick the whole thing behind CloudFlare to reduce your hosting costs, and improve access speeds for visitors around the world!
Good luck.
EDIT: response to comment:*
Do you mean that I should abandon django altogether ?
If the purpose is just to serve your exising HTML files to the public, without any requirement for authentication, editing of content by users through the frontend, or more advanced back-end functions, then yes Django is probably overkill for this task.
How is Jekyll different from Django ?
Django is a Python Web Framework, which allows you to build an interactive site on which users or staff can login, post articles, comment, etc. One of its key features is the ability to define database relationships trough 'Models' and then have all the admin-side forms generated automatically in the background. This means, with minimal work, you can instantly have the 'admin portal' side of the site live, which works great for use-cases like large blogs or news sites. You would then build the frontend, which can also be interactive. To launch this into production is a separate task which involves configuring multiple server components.
Jeykll on the other hand is much simpler, and basically gives you a way to create some template HTML files (avoiding the need to repeat code for stuff like navigation bars) and then with the jekyll build command outputs a _site directory which can be uploaded straight to a basic webserver. This is the crucial part, as you then only need a webserver which can serve static content, rather than requiring python, a database, application server like UWSGI, etc
Let's look at this example from the Jeyll Docs with your usecase in mind.
You could define a YML file with a list of all your charts:
docs_list_title: All Charts here.
docs:
- title: A Lovely Bokeh Chart.
url: bokeh_chart_1.html
- title: This Bokeh Chart is even Better
url: bokeh_chart_2.html
You mentioned previously that you already have the HTML files, so really what you've done here is made a list of those, which can be interpreted by the frontend.
The HTML template portion would look something like this:
<h2>{{ site.data.samplelist.docs_list_title }}</h2>
<ul>
{% for item in site.data.samplelist.docs %}
<li>{{ item.title }}</li>
{% endfor %}
</ul>
This would result in a list of links to all of your Charts, with the link text as the title.
Obviously you could then go further and add further info to the YML file, like beneath each url put publisher: someone which could then be accessed in the template's for loop as {{item.publisher}}
Can such tools like Jekyll, Django and Bootstrap be used together ?
Bootstrap can be used with Django or Jekyll, as it is a CSS library which controls how HTML is rendered in the user's browser. Check the documentation for more examples of its capability.
A good starting point may be to download a theme from somewhere like Start Bootstrap. Once you have that as a ZIP file, you can put it in your Jeykll project and attempt to have it render through the dev server with jekyll serve. You can then remove nav bar or header code to separate include files (see my earlier link to the Jeykll docs) and before you know it you'll be seeing progress.
The best way to learn is to just go ahead and try this!
First of all, thank you for everything that you do. Without this community, I would hate web design and be reliant on my teacher's outdated, static methods. Much love <3
So, this is a tricky one (maybe).
I want to have, essentially, an iframe on a webpage that contains a website I coded previously. It was a project for school that never went live, but I'd like to include it as part of my portfolio. Problem is, an iframe needs a URL for a source, but I just have the folder with more folders full of code, fonts, and images. How can I tell the browser to populate this box with everything from "name" folder? And then how will it know to run the code instead of just showing a file tree or something?
In the end, I want a page describing a previous web project and let the client experience that project within the one page. And I don't want to get a domain for every project I do.
Maybe there's an easier way I'm not thinking of?
To make it interesting, my new portfolio site is being made in Squarespace...maybe. I bought a domain from them because I had a promo code and wanted to try the platform, but I kind of hate it. I can't change any of the code and it won't maintain a connection to Typekit. So all I can do is change the basic appearance of preexisting elements. It's like WordPress all over again....LAME! Sadly, I already bought the domain.
Can Squarespace just be a host? Is there a way to download the raw code of these templates, edit it, and upload it again?
Thanks for all your help!
I want to have, essentially, an iframe on a webpage that contains a
website I coded previously.
Squarespace's file upload mechanism is very limited. Without using the Developers Platform, there is no effective way to upload many files at once. Furthermore, there is no way to create folders. Therefore, even if you were willing to upload each .html file and each asset one-by-one, there'd be no way to organize the files into folders (assuming that the "tree" you mentioned includes additional sub-folders).
Initially, in order to get the files to be accessible by Squarespace, you'd have to do one of the following:
Use Squarespace Developers Platform (A.K.A. "Developer Mode") and upload your to-be-iframed
(TBI) website files to the "assets" folder using SFTP or Git.
Host your TBI website files somewhere else (a different host
environment, for example) which will maintain your file/folder
structure.
How can I tell the browser to populate this box with everything from
"name" folder? And then how will it know to run the code instead of
just showing a file tree or something?
Assuming that the TBI website has an index.html file or home.html file or similar, and assuming you were to use the Squarespace Developer Platform, you'd insert the iframe either in a Code Block or within a template/.region file directly using something like
<iframe src="/assets/tbiwebsitefolder/index.html"></iframe>
while setting your other iframe attributes (such as height and width) as needed.
Is there a way to download the raw code of these templates, edit it,
and upload it again?
Yes. You select a template and then enable Developer Mode on that template. From there, you use SFTP or Git to download the template files, edit, and reupload.
You may benefit by reviewing some considerations of enabling Developer Mode on a Squarespace Template.
One other idea, to avoid the iframe and Developer Mode entirely, would be to capture images of the TBI website rendered in a browser, and then simply add those images to a gallery block or gallery page. This could allow you to convey the general idea of the project but would of course not capture the full "experience" of it.
I need to add a currency converter and a calculator to my website that runs on the client side.
something similar to a servlet in java.
Adding a client-side "whatever" to a django project is no different than adding an image, or a video, or anything else. Django doesn't particularly care what you put into your templates. It simply renders the templates server-side to parse your template language code, and then serves up a normal web page to the client.
So the answer to your question is... Do whatever you would normally do in an html page to embed your chosen solution into the page.
The only django-specific issues here could be how to source the path to the media using template tags, which is also no different than sourcing static content like images, javascript, and css. You can read more about that on the django docs: Managing static files
I met the django-uploadify (multiple file uploading) application, but the only template-use is described in wiki of the project. I need to integrate it with django admin. Any ideas?
#rebus and #Mordi have good suggestions; one of those is probably your best bet. Still...
The current implementation of file uploads in web browsers is single file only. That's a limitation of the HTML standards and the browsers themselves. When you see multiple file upload capability (all at once / select multiple) in some web app, something like Flash or Java is in play. You could potentially use a Flash or Java applet (check out Uploadify - about the easiest to work with you'll find), if you wanted, but you'd have to do some work tying it into Django: namely mapping the output of the applet to the input the Django Admin expects on POST.
Personally I found this package to be painful when I attempted to do this locally. It is 7 years old and not maintained. django-filer is a more modern implementation that has this exact functionality built into the admin panel, it was quick to set up and it seems to be maintained a lot better. And the UI is excellent!
If your really set on using uploadify my attempt was quite painful. When I went to the website to download the uploadify jQuery plugin it was a paid download. After looking a bit I found a fork, and was able to get it going locally, but because the python package is old it required a lot of changes from python 2.7..
To integrate this with your project in the admin will definitely require you to write your own custom admin template. In your admin.py you would have to override the default template and methods, this faq has some insights. In your new template you would include the uploadify jquery script and put the upload file field inside the form where your model fields would be. When you upload files the signal sender in the package will fire, and you would just have to intercept the signal and handle it with your intended logic
Very easy to implement multiple image upload with this project:
https://github.com/tstone/django-uploadify