Embedding a functional website inside a Squarespace webpage - templates

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.

Related

Editing a previously generated HTML file with Django

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!

What is the sense of using robots.txt in GitHub pages?

I know that the file robots.txt is used for to block web crawler of index content sites of third parties.
However, if the goal this file is to delimit a private area of site or to protect a private area, which is the sense in try to hidden the content with robots.txt, if all will can be see in GitHub repository?
My question extend the examples using custom domain.
Is there motivation in to use file robots.txt inside of GitHub pages? Yes or no? And why?
Alternative 1
For that content stay effectively hidden, then will been need to pay for the web site is to get a private repository.
The intention of robots.txt is not to delimit private areas, because robots don't even have access to them. Instead it's in case you have some garbage or whatever miscellaneous that you don't want to be indexed by search engines or so.
Say for example. I write Flash games for entertainment and I use GitHub Pages to allow the games to check for updates. I have this file hosted on my GHP, all of whose content is
10579
2.2.3
https://github.com/iBug/SpaceRider/tree/master/SpaceRider%202
It contains three pieces of information: internal number of new version, display name of new version, and download link. Therefore it is surely useless when indexed by crawlers, so when I have a robots.txt that's a kind of stuff I would keep away from being indexed.

How to write mark-up in the dashboard?

I've been working with Microstrategy for awhile. I was hired into a company to help customize it. All the data is being pulled in by the Dataset Objects correctly. Before I was hired the whole Dashboard was created using the WYSIWYG tool by someone else. I've since created a html container that links to my custom javascript and css. But I've never been able to actually write my own HTML. It's only been the WYSIWYG tool.
I desperately want the ability to not have to use this terrible Design mode WYSIWYG tool and write my own mark-up. Is there a way? When I create a new dashboard is there a .html file that I can edit somewhere on the server?
Any help on customization will be greatly appreciated.
There isn't an HTML file that you can edit, because a Report Services document isn't (necessarily) just HTML output. Obviously it can be Flash, or if it's mostly static, PDF or Excel.
It actually sounds as though you want to build your own custom page entirely. This isn't a straightforward process, and you need (theoretically) to have an API licence. There is some reasonable documentation included with the product, and you can build an HTML page, using MicroStrategy's custom ASP/JSP tags to display content as you wish.
It's hard to be more specific without knowing what sort of customisation you want to do, but you really need to build a new page, rather than modifying/tinkering with an existing Report Services document.
If you want to do something more sophisticated, then you should be aware that you may need to be conversant in Java, which is the language MSTR has written its web API in.

coldfusion - file content editing

I've got fw1 using the content of the default.cfm page as the editable content region. While this works fine for static content, I'd like to add the ability to edit the content over with fckeditor or some other in-browser WYSIWYG tool.
Is there any tool you could recommend that would make this easy? I don't want to convert to a CMS like mura, just want to login and the ability to edit the contents of about 5 files, with the possibility of creating a timestamped backup of the file.
We have the concept of a dynamic text area on some pages on applications that don't require a full on cms.
This is with ColdBox, but you should be able to implement something similar in fw1.
We have a helper component with a method that allows us to "render dynamic text" with a specific code eg. "helppagetext" in a zone in the page. We then have a very simple CRUD application using CKEditor that saves text blocks against those codes. The CRUD application is protected by a pre-existing login system.
It is pretty simple to implement something like this, especially if you already have a security and login system in place.
Hope that helps.
ColdFusion 8 and above has a built in WSYIWYG editor. It is a part of <cftextarea
http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_t_02.html

Iframe working correctly on localserver but not production server

A question like this was asked before and the person got nothing but criticisms, hope this won't be the case here.
I have a website that allows a business to add their menu to my site, and some have requested to be able to import a menu (a pdf or jpg) that is already online elsewhere. So I made a form that saves a url to the db and then that url is used in the src of an iframe on my site.
I tested it all and it worked fine on my local machine (using Django development server). When I synced it over to my production server and saved the same url I was testing with, the iframe loads no content.
I imagine that it has something to do with trying to read an individual file from another server because it works if I make the url google.com or to an image that is under my domain name. Is there anything I can do to fix this? Storing a url instead of a pdf in my db is much more efficient so doing this way is preferred over uploading their menu to my site.
I don't think this question needs any code attached, but if you want to see some let me hear it.
Thanks
The menu you're testing with probably has the X-Frame-Options response header set.
Is there a reason you're putting the image/pdf as the src on an iframe instead of just using the img tag (or putting an img tag inside your iframe)? There's still no guarantee that will work for all pages, as some sites will refuse to serve media to an external page, but I suspect this is your problem in this case.