hackfoldr / hackfoldr-2.0

hackfoldr ui improvement inspired by moztw

Hackfoldr

Organize gdoc and hackpad documents for hackathons.

Why?

We need a way to organize many dynamic documents before and during hackathon.

The shared folder feature in google docs comes very close to what we want, but as every document is opened in edit mode, it soon becomes unusable. It is also impossible to sort the items and we had to use numeric prefix to achieve that.

Hackpad collections are great too, but we also want to include spreadsheets as one of the item types.

So we build this small single-page static web application that reads a list of url from an EtherCalc document, rendering it in a way similar to a google docs folder. If the document supports read-only mode, we use that by default when it is opened by the user, and provide an additional edit link.

For example, with an index like http://ethercalc.org/g0v-hackath2n, you'll get http://hackfoldr.org/g0v-hackath2n/BfddbG2JBOi

Supported document types

• Google Docs
• Google Spreadsheets
• Google Prensetation
• Google Drawing
• Hackpad
• EtherCalc

Prerequisites

Node.js is required on your system.

Check it with the following commands:

$ npm -v
$ node -v

Install

$ npm i
$ npm start

Then after the building message completes, connect to http://localhost:3333/.

Using Vagrant to develop

Vagrant provides easy-to-configure, reproducible, and portable work environments. It will create a headless VirtualBox VM, then prepare the development environment and launch the server for you. You can then develop and test the code anywhere :).

To use Vagrant, you need to install:

• Vagrant (>= 1.6.x)
• VirtualBox

To setup up work environment:

$ vagrant up

It will take several minutes for the first time, since it will have to configure its Ubuntu VM image. After the operation is finished, browse to http://localhost:6987/ in your favorite browser. You are all set!

vagrant halt if you need to shut down the Vagrant VM. For more information about Vagrant, see the documentation of Vagrant.

Note: Have to use older Vagrant (1.3.0+)? Change the Vagrantfile.

Google API key

To use the google APIs client to query YouTube Data API and check live status of Youtube videos, you need to apply your own Google API Key for browser applications at https://code.google.com/apis/console#:access. After getting your API key, commit it into app/config.jsenv

Fork

1. fork to your github account
2. $ git clone [email protected]/GITHUB_ACCOUNT/hackfoldr
3. $ npm install
4. replace GITHUB_ACCOUNT, HACKFOLDR_ID, DOMAIN_NAME, GA_ID in gulpfile.ls
5. $ npm run fork
6. $ npm run build
7. $ ./deploy

CC0 1.0 Universal

To the extent possible under law, Chia-liang Kao has waived all copyright and related or neighboring rights to hackfoldr.

This work is published from Taiwan.

http://creativecommons.org/publicdomain/zero/1.0

hackfoldr-2.0's Issues

內容物 <5 的 subfoldr 展開

1.0 的功能，不過還在想 2.0 要不要實作，不管是要特別去標 expand: true 或 expand: false 都有點麻煩，到底哪一種的機率會比較高呢 www

新增 url 時, ethercalc 的 row 位置問題

新增時會在上面增加，但左邊連結會在下面增加
決定新列要插在哪裡的那個變數是壞的

另外注意兩個人同時開 foldr 時，都想增加連結
連結會彼此覆蓋

jade compile err msg

jade . -o . --pretty
TypeError: ./library.jade:26
24| else
25| //- from local

26| if lib.tabletop
27| script(type="text/javascript",src="#{assets}/tabletop/tabletop.js")
28| if lib.jquery
29| script(type="text/javascript",src="#{assets}/jquery/jquery-2.1.1.min
.js")

Cannot read property 'tabletop' of undefined

semantic ui popup tooltip

hackfoldr/hackfoldr@3f54aa1 by @caasi

Clarify relation between 1.0 / 2.0 / 2.0-forkme

Hello all!

I would be very much appreciative if someone clarify a some of all of these points for me:

1. What are the differences between the 3 repos?
2. Who, if anyone, is actively maintaining each one?
3. Which codebases are actively used by vTaiwan or other groups?
4. Are there any roadmaps for this project?

Thanks very much for your consideration!

Meta API for hackfoldr

Something like http://hackfoldr.org/hackathon/meta, which will provides the basic info like

{
 files:[
    "subfolder1":{
       "title" :"Projects"
       files:[
            "Hackpad for project 1": "http://www.hackpad.com/project1"
       ]
    },
    "About": "http://www.hackathon.com/about"
  ]
}

Use case:
We are building hackfoldr-mobile
To open a hackfoldr, we either

1. scrap / invoke api of a running Hackfoldr to get the links it provides
2. use the same mechanism as hackfoldr to get from google spreadsheet or ethercalc

We now have 2) for google spreadsheet, which one of the benefit is not to rely on centralized site like hackfoldr.org.
Meanwhile in the long run it might be hard to maintain the spreadsheet parsing logic across hackfoldr1, 2 and mobile version

Any thoughts?

youtube embed

title 無法用數字開頭

2.0版好像無法用數字當title, 會整個不見

Create new document in a catalog

I've tried to collaborate on notes from Civic Tech Fest, but I couldn't find as simple feature as adding a new document in the catalogue/folder structure. TTcat came to the rescue. Editing the spreadsheet is the acky way, but it should be a way more straightforward.

It could be an empty row with a plus sign at the end (or the beginning) of catalogue documents.

add tag function

[support] Advice on frequent data loss on ethercalc.org

Hi there,

I have been introducing beta.hackfoldr.org (which is backed by ethercalc.org) at an organization where I am on contract, EDGI. I really really love this tool (Hackfoldr), and hope to be able to continue sharing it with others.

Facts & Feelings

🔍 We use ethercalc.org through beta.hackfoldr.org.
🔍 We update our sheet once or twice a day.
🔍 We are active in Pacific through Eastern timezones.
🔍 We experience fairly frequent data loss (at least once a week).
❤️ I feel the data loss is preventing us from relying on the tool.
🔍 The lost data is always available in the backup/revision backlog.
❤️ Using the backup/revision backlog seems too complicated for our users.

I'm wondering whether perhaps there might be an edge-case that is only affecting heavy users in timezones opposite Taiwan.

I was hoping to solicit advice on possible solutions before we must otherwise migrate to using another tool in the near future :)

Thanks so much for any consideration!

Questions

• What time does the restart mentioned in audreyt/ethercalc#522 (comment) occur? That might at the very least help to avoid data loss in my own personal usage of hackfoldr :)

cc: @audreyt

foldr id prefix

from @irvin

像是我們 hack.moztw.org，下面自動產生的新 pad 應該要掛上一個名字，才不會跟 ethercalc 很容易撞名
ex., hack.moztw.org/test
應該要產生 ethercalc/moztw-test 之類
不然就會跟 ethercalc/test 撞到了
我覺得高雄他們可能也是這樣才撞到你的原始文件

drag and drop to reorder links in edit mode

http://api.jqueryui.com/sortable/
http://api.jqueryui.com/sortable/#event-change

  $.ajax({
    contentType: 'text/plain',
    data: 'moveinsert '+'A2:F2'+' A5',
    type: 'POST',
    processData: false 
  });

same link

「？」 icon 下的使用說明、開發與回報連到的是相同的 pad.

Support source from HackMD

Few months ago @clkao hacked a util to let hackfoldr support markdown as source.
https://github.com/clkao/hackfoldr-util

HackMD is a online collaborative markdown notes platform which is pretty suitable for this occasion.
https://github.com/hackmdio/hackmd

I think we could merge that util and let hackfoldr have more source choices.

auto hackpad static mode on mobile

不然在滷肉飯上一直閃退QQ 但其實可能不是這問題因為單開hackpad可以

refresh 後加號會不見

內嵌 google spreadsheet 網址失效

http://hack.etblue.tw/unlimited/https%253A%252F%252Fdocs.google.com%252Fspreadsheet%252Fccc%253Fkey%253D0AkNsS2a-Qx8ZdGk1ZWI0QnNLak5henRYMXFVSTYxOHc%2526usp%253Dsharing 不會連到 spreadsheet www

白牌打包用的設定檔

在 hosting service 出來之前先把自行架站一定要更改的部分抽出來變成設定檔，以免發生 pull 即悲劇的慘況…… by @irvin

連結中的連結

這 tittle 感覺有點怪XD...(但其實是我不知道該怎麼簡短表示問題...)

原 hackfoldr 在 embed 的 link 中，如果有連結導向另外的頁面的話，通常不會是 _blank ，而是直接繼續用 embed 的方式開啟。

在一般使用者操作的習慣下，會按「上一頁」以回到原本 hackfoldr 所提供的 link 頁面；但這也延伸出另一個問題是：「有些人並不會這樣做」，而是繼續瀏覽 hackfoldr 所提供的其他頁面。
((瀏覽過其他頁面再按上一頁的話，並不會讓 "外連的頁面" 回到原本 hackfoldr 提供的頁面....

因此會造成 "提供的頁面不是原本提供的頁面" XD

螢幕夠大的話，sidebar 捲軸只捲 toc

現在有哪幾台直播

由華航罷工觀察經驗，直播台的公告就二個重點：時段、地點。

我覺得就「現在有哪幾台直播」這個問題做設計，是值得做的。

support option column {"expand": true}

網站發行者不允許內容在框架中顯示

對於「網站發行者不允許內容在框架中顯示」需要做一些識別及開新視窗的 引導。

fix typo in tabletop setting

foldrexpend -> foldrexpand reported by @vincentlaucy , traced by @tka

Add support for multiple languages

I've always had a hard time getting English-speaking groups to use Hackfolder, and it seems to mostly be a reflection of the non-English language communicating "this is not for you".

I'd like to discuss how multilingual support (i18n) might be possible :)

Here are some thoughts -- 🔍 facts, feelings ❤️ and 💡 ideas -- related to this issue:

1. 🔍 hackfoldr is totally client-side
2. 🔍 Multilingual support on same page can hurt SEO.
3. 🔍 The recommended tactic for best SEO is to use different routes for each language: example.com/en/:slug
4. 🔍 No pages of hackholdr.org or subdomains are indexed in Google right now.
5. ❤️ I feel that perhaps we could ignore SEO advice because we already aren't very SEO-compatible.
6. 🔍 i18next is a popular multilingual JS framework.
7. ❤️ I feel uncertain whether i18next is right for us
8. 🔍 i18next has a browser language detector plugin for apps like hackfoldr.
9. 💡 We could use i18next without language routes, since we're not getting hit by SEO and this will be minimal change from current hackfoldr.
10. 🔍 i18next can easily pull translations from a url stored at one of the app's endpoints.
11. 🔍 This is a codepen example of the simple behavior described above.
12. 💡 The MVP could use javascript's navigator property to auto-detect language.
13. 💡 We could later add a langauge selector and use the detector's cookie/localStorage features.

Support new ethercalc api

Dump Json format. http://docs.ethercalc.apiary.io/#get-%2F{id}.csv.json

example: https://ethercalc.org/g0v-hackath7n.csv.json

投稿表單的 post 功能不知被我改爛什麼失效了，它曾經是好的… QQ

而且 post 的參數會跑到網址列，頁面還會重新整理 o_0

when iframe source url accidentally contains ethercalc id, the sheet can't be compiled

e.g.
http://hack.etblue.tw/NECTW2014/edit

sidebar expansion buttons 應該用 css class.. 不要直接去改 css properties

https 支援

目前把網址加上 https 連線到 https://beta.hackfoldr.org 會是錯誤

easy white label setup

• complete navbar menu for g0v.tw or moztw
• split any possible customized part in index.jade
• write comments thoroughly in source code
• fork a g0v.tw / moztw version and test deploy process (temporary CNAME: g0vfoldr.etblue.tw / mozfoldr.etblue.tw)
• write a "how to build a hackfoldr 2.0 for your own community" doc
• invite mozillians or g0vers to test on the fork

build process

versioning generated files considered harmful

performance: local storage for csv data

Anchors not changing current URL when document viewed as a folder item [HackMD]

I've landed on Civic Tech Fest unconference notes on http://beta.hackfoldr.org/civictechfest/https%253A%252F%252Fhackmd.io%252FKwUwhgZgzAbAxsAtAIwBwAYKICxmAdhQEYQQd1URsYRUAmEATiiA and clicking links on documents section doesn't update URL.

I have to copy it manually from the TableOfContents list or from the section headers. Then it works. I see that the links have different format: https://hackmd.io/KwUwhgZgzAbAxsAtAIwBwAYKICxmAdhQEYQQd1URsYRUAmEATiiA#findings-of-the-taiwan-open-government-report-po-yu-tseng-and-mg-lee-open-culture-foundation-taiwan

As @SISheogorath wrote in hackmdio/codimd#546 (comment) it's due to the fact that HackMD doc is inside the iframe.

Could something be done about it? It quite affects sharing.

PS. #57

拖曳排序且自動 refresh 後，subfoldr 拖曳功能會消失。但只發生在從 foldr 首頁進入 /edit，如果一開始就從 /edit 連上，則不會

foldr 標題旁邊加上 home icon

用 > 代替空白縮排

因為空白縮排實在太難教了，所以在支援原語法的同時，也支援：

• 如果 A 欄為 > 的話，表示是 Foldr
• 以下的所有有連結的項目，無論以空白開頭與否，都是子項目
• 以下的 Foldr（即 A 欄為空白或 >）， 則另起一 Foldr。
• 特殊規則：A 欄為 < 的為，不另起 Foldr，但結束縮排。

wrong target on ipad: links are opened in new tab, not in iframe

多 iframe 切換功能 like hack.g0v.tw

另一個跟速度有關的：csv 資料 local storage

使用者貢獻鏈結

如果在 EtherCalc 裡有 > 的格子的話，把 Edit 鍵換成一個「填入鏈結」鍵：

• 按了之後會跳出 太陽花怪獸 形狀的鏈結、標題欄位
• 可考慮把現有的 Foldr 列為按鈕（建議分類）
• 把新的鏈結貼到最後一列
• 按筆形 Edit 按鈕後，出現 Add 和 Refresh
• 按筆形 Edit 按鈕後， 不要 出現 ethercalc 畫面

hack.g0v.tw 上的固定連結，產生不會 404 的靜態頁面

從這裡： http://beta.hackfoldr.org/g0v-hackath21n
產生： g0v-hackath21n.html
網址相同，但分享時不會 404

詳見 http://www.slideshare.net/autang/hackfoldr-pdistw/13

make mopad switch to fullscreen by default

from @petercpg :

i've tried using:
$("#iframe").contents().find("body").addClass("maximized");

but encountered a cross domain security error.

seems there's nothing we can do?

nav bar's link

如果是 link 到另一個 hackfoldr 的情況下(like 各期黑客松's hackfoldr)，也許改用 _blank 開新頁面會較佳。
(提醒 user 目前是處在不用的 hackfoldr, 以避免迷路在一堆 hackfoldr 裡面)

EtherCalc 跳轉 Google Doc

用 EtherCalc A1 寫 Google Doc ID（也許白底白字，加上隱藏橫列、直欄）時，跳轉 Google Spreadsheet，這樣可以保留短網址。

Hackfoldr Spam Bot activities

Hi,

I'm running two instances of an English translation (happened in the night/morning/noon after of http://chn.io/2014/nov-14-alpha-steppa-mighty-melody-saetchmo-et-al) at

• http://hack.transforlab.net
• http://dossier.allmende.io

, sources at

• http://chn.io/2014/nov-14-alpha-steppa-mighty-melody-saetchmo-et-al
• https://github.com/transforlab/hack.transforlab.net

and just experienced some spam erasing my entries in the associated ethercalc (which unfortunately doesn't support authentication and ACLs).
Wanted to let you know.

Removed the spam.

But the threat remains.