Cloud storage front-end

2016-06-22 21:10:00 +0000, 2 years and 3 months ago

Inspired by twily.info 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 }}{{ site.data.dirs.ftp_img }}/{{img}}{% endfor %}">
			{% endif %}
			</div>
		<div class="filedes">{{ post.title }}</div>
		</a>
	{% 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.

Return?


Comments

there's some rate-limiting going on with my comment provider atm, so i'd reccommend copying your message incase it gets blocked and retrying