Cloud storage front-end

Wed. Jun 22, 09:10PM, 1 year and 3 months ago

Inspired by I’ve decided to have a go at making a type of file storage front-end-ish type thing, obviously due to the restrictions of gh-pages and Jekyll it’s going to be different from how a Cloud storage system would usually be done with PHP, MySQL and whatnot.

To do this is quite simple really, anytime I upload a ‘file’, it’s actually a post, to create the illusion of directories I create different HTML which display different folder contents, which Jekyll parses as categories. The front-end for this is:

{% for post in site.categories.baseftp %}
	{% if post.url %}
		<a href="{{ site.baseurl }}{{ post.url }}" class="square col-md-1 col-sm-1 col-xs-1">
			<div class="icon_cont">
			{% if post.img %}
			  <img class="icon" src="{% for img in post.img %}{{site.baseurl}}{{ site.url }}{{ }}/{{img}}{% endfor %}">
			{% endif %}
		<div class="filedes">{{ post.title }}</div>
	{% endif %}
{% endfor %}

Where baseftp is the first container folder, holding the root directory of the files and folders. Inside baseftp is a _posts; which contains the posts, which are actually masked as files and folders, a folder post is actually a post with the permalink of another html file, which contains the contents of the specified directory, so for each directory I have to create another HTML file that corresponds to the directory name, or category if you prefer, and then include the above code into it.

In order for the correct icon to be displayed for a file/folder, I include into the post yaml front matter, img: folder or img: lua, or whatever else file type. Jekyll then automatically parses the img variable to the corresponding file, and everything works out fine.

I’m also considering doing a file preview, when the file is clicked, similar to twily’s file using some jQuery or something of the like, I can also easily show the file creation time too, since all the files are posts, and therefore must have a timestamp attached.


Submit a comment

twentytwoo a3c6c0a932dfa9915aa78470b46191b0

> @Ashish I'm using Staticman for my blog section, the source code for my comments is here.

Ashish 65cc5458c10405441af7c003e7badfb2

> How does your comment section works?