瀏覽代碼

init docs rendering system

Started writing zh-HK docs
Toby Chui 5 年之前
父節點
當前提交
378f7a772e
共有 11 個文件被更改,包括 299 次插入0 次删除
  1. 17 0
      docs/README.md
  2. 二進制
      docs/img/banner.png
  3. 二進制
      docs/img/maninstall.png
  4. 二進制
      docs/img/maninstall.psd
  5. 59 0
      docs/index.html
  6. 16 0
      docs/lang/zh-HK/0.md
  7. 2 0
      docs/lang/zh-HK/1.md
  8. 72 0
      docs/lang/zh-HK/2.md
  9. 132 0
      docs/reader.html
  10. 1 0
      docs/showdown.min.js
  11. 0 0
      docs/showdown.min.js.map

+ 17 - 0
docs/README.md

@@ -0,0 +1,17 @@
+# ArOZ Online Documentation Rendering Interface
+This is the documentation rendering script for ArOZ Online Documentation System.
+The json files follow the following structure
+
+## How it works
+It works by passing the lanauge into the html file as hash and ask the script to search all the JSON files which contain the content of the documentation in the respective directories.
+
+## Structure
+The first line is the meta tag in JSON string format and the rest of the document is in markdown format.
+For example:
+```
+["Hello World!"]
+# This is a document file for the ArOZ Online System
+More lines here
+```
+
+The reader.php will then render the JSON content into css + HTML. All image should be placed inside /img directory under the /docs documentation root folder.

二進制
docs/img/banner.png


二進制
docs/img/maninstall.png


二進制
docs/img/maninstall.psd


+ 59 - 0
docs/index.html

@@ -0,0 +1,59 @@
+<html>
+<head>
+<title>ArOZ Online System Documentation</title>
+<!-- Tocas UI:CSS 與元件 -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
+<!-- Tocas JS:模塊與 JavaScript 函式 -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
+<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+</head>
+<body>
+<br><br>
+	<div class="ts container">
+		<div class="ts basic padded dashed slate">
+			<i class="book symbol icon"></i>
+			<span class="header">ArOZ Online Documentation</span>
+			<span class="description">Everything you need to know about ArOZ Online is in here</span>
+		</div>
+		<p>Here are a list of translated documentations for different language users:</p>
+		<table class="ts table">
+			<thead>
+				<tr>
+					<th>Language</th>
+					<th>Code Name</th>
+					<th>Last Update</th>
+					<th>Open</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>en-US</td>
+					<td>aCloud</td>
+					<td>Pending</td>
+					<td>-</td>
+				</tr>
+				<tr>
+					<td>zh-HK</td>
+					<td>aCloud</td>
+					<td>N/A</td>
+					<td><a href="reader.html#zh-HK">Open</a></td>
+				</tr>
+				<tr>
+					<td>zh-TW</td>
+					<td>aCloud</td>
+					<td>Pending</td>
+					<td>-</td>
+				</tr>
+			</tbody>
+			<tfoot>
+				<tr>
+					<th colspan="3">All documentations can be found under the main repo's /docs directory.<br>CopyRight ArOZ Online Project, 2016 - <span id="currentYear">2016</span></th>
+				</tr>
+			</tfoot>
+		</table>
+	</div>
+	<script>
+	$("#currentYear").text(new Date().getFullYear());
+	</script>
+</body>
+</html>

+ 16 - 0
docs/lang/zh-HK/0.md

@@ -0,0 +1,16 @@
+["歡迎使用 ArOZ Online 個人雲端系統"]
+<img class="ts fluid image" src="img/banner.png"></img>
+
+<img src="https://img.shields.io/badge/組建-社群版本-brightgreen"> <img src="https://img.shields.io/badge/裝置-Raspberry%20Pi%203B%2B%20%2F%204B-red"> <img src="https://img.shields.io/badge/香港制造-Hong%20Kong-blueviolet">
+
+# ArOZ 在線系統 / 雲端A
+這是一個特別設計給 Raspberry Pi 開發板專用的,並帶有網頁桌面的雲端系統。你可以使用它來進行雲端影音串流、資料儲存、文書及文字處理、3D打印檔案預覽、雲端編程界面等。
+
+## 下載映像檔
+如果你是一般使用者,你可以使用以下連結來取得已壓縮好的 Raspberry Pi 映像檔:
+[傳送門](https://hkwtc.org/aroz_online/dist/)
+
+下載完後可按左上方的下一頁按鈕以繼續安裝教學。
+
+## 開發人員說明
+如果你是開發人員而且對開發 ArOZ 在線應用程式感興趣,請直接翻到開發人員說明一項。

+ 2 - 0
docs/lang/zh-HK/1.md

@@ -0,0 +1,2 @@
+["快速入門"]
+# Work In Progress

+ 72 - 0
docs/lang/zh-HK/2.md

@@ -0,0 +1,72 @@
+["手動安裝"]
+<img class="ts fluid image" src="img/maninstall.png">
+
+# 手動安裝
+對於非 Raspberry Pi 類的開發板,我們亦有為部分其他架構的系統提供支援,包括
+- ARM64 (如 Orange Pi Zero Plus)
+- x86_64 (如 Intel / AMD 處理器並運行 Debian 9, 10)
+- Windows (7 / 8.1 / 10 並使用 WAMP / XMAPP 伺服器,有功能限制)
+
+然而,需要安裝到以上系統就必須要以手動安裝。以下為手動安裝之方法。
+
+## 必備條件
+你必須先安裝以下的軟件包才能安裝 ArOZ 在線系統
+- apache2
+- libapache2-mod-xsendfile
+- php libapache2-mod-php php-cli php-common php-mbstring php-gd php xml php-zip
+- php-mysql (可選)
+- ffmpeg (可選,Debian Jessie 請使用 libav-tools)
+- samba (可選)
+
+你亦可以使用以下指令一拼安裝所有軟件包
+
+<code>sudo apt-get install -y apache2</code>
+<code>sudo apt-get install -y php libapache2-mod-php php-cli php-common php-mbstring php-gd php xml php-zip </code>
+<code>sudo apt-get install libapache2-mod-xsendfile</code>
+<code>sudo apt-get install php-mysql</code>
+<code>sudo apt-get install ffmpeg</code>
+<code>sudo apt-get install samba</code>
+
+
+若果你是使用官方 Debian Buster 或其 fork 之版本的 Linux,你或許在運行上述指令前要先使用超級使用者模式 (su)安裝以下軟件包。
+
+apt-get install sudo unzip net-tools ntfs-3g
+
+
+## 安裝 ArOZ 在線系統
+首先,你要先調高 PHP 上傳檔案大小限制。這個選項一般能在  /etc/php/{php-version}/apache2/php.ini 裡找到。找出以下兩行並作出更改。
+
+<code>upload_max_filesize = 2048M</code>
+<code>post_max_size = 2048M</code>
+
+  
+把 www-data 加入至 /etc/sudoers 文件 (注:若你的雲端是打算開放給公眾使用,基於安全原因此處應需要根據你的需求作更改,個人使用的話則無需更改)
+
+<code>www-data ALL=(ALL:ALL) NOPASSWD:ALL
+
+  
+編輯 /etc/apache2/apache2.conf ,在最底部加入以下兩行:
+
+<code>XSendFile on</code>
+<code>XSendFilePath /media</code>
+
+  
+創建資料夾 /media/storage1 及 /media/storage2 作外接儲存器之用
+
+<code>sudo mkdir /media/storage1 /media/storage2</code>
+
+  
+進入 /var/www/html/ ,使用 wget 下載 ArOZ 在線系統之 dist 壓縮包 (請自行更換 {dist-pack} 至 壓縮包的網絡位置)
+
+<code>cd /var/www/html/</code>
+<code>sudo wget {dist-pack}.zip</code>
+<code>sudo chmod 777 {dist-pack}.zip</code>
+<code>sudo unzip -o {dist-pack}.zip</code>
+<code>rm install.zip</code>
+<code>sudo mkdir -p "/etc/AOB"</code>
+<code>sudo chmod 777 -R "/etc/AOB"</code>
+<code>sudo chmod 777 -R ./AOB</code>
+<code>sudo chown -R www-data ./</code>
+
+  
+打開你的常用瀏覽器,進入 http://{裝置的IP地址}/AOB/ 並跟隨屏幕上的指示開設用戶帳號。

+ 132 - 0
docs/reader.html

@@ -0,0 +1,132 @@
+<html>
+<head>
+<meta charset="utf-8"> 
+<title>ArOZ Online System Documentation</title>
+<!-- Tocas UI:CSS 與元件 -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
+<!-- Tocas JS:模塊與 JavaScript 函式 -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
+<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+<script src="showdown.min.js"></script>
+<style>
+.specialpadding{
+	margin-top:0px !important;
+	padding-left:20px;
+}
+.rightPadded{
+	position:absolute !important;
+	right:10px;
+	width:55px;
+}
+</style>
+</head>
+<body>
+<br><br>
+<div class="ts container">
+<div class="ts segment">
+<div class="ts icon buttons" style="width:100% !important;">
+    <button id="backbtn" class="ts button" onClick="lastPage();"><i class="arrow left icon"></i></button>
+    <button id="nextbtn" class="ts button" onClick="nextPage();"><i class="arrow right icon"></i></button>
+	<button id="nextbtn" class="ts button" onClick="showList();"><i class="content icon"></i></button>
+	<div class="ts specialpadding header"><i class="bookmark icon"></i><span id="readerTitle">Welcome to ArOZ Online Documentation Reader</span></div>
+</div>
+<button class="ts rightPadded button" onClick="starThispage();"><i class="empty star icon"></i></button>
+</div>
+<div id="docLoader" class="ts segment">
+</div>
+<div class="ts segment">
+ArOZ Documentation Reader v1.0
+</div>
+</div>
+<br><br><br><br>
+<script>
+var currentRenderPage = 0;
+var searchingPage = 0; 
+var lang = window.location.hash.replace("#",""); //get lang id
+var docs = []; //All documents will be loaded into memory as the reader loads, but not rendered yet
+var baseFolder = "lang/" + lang + "/";
+initLoad();
+
+function loadAllDocs(){
+	$.ajax({
+		type: 'get',
+		timeout: 5000,
+		url: baseFolder + searchingPage + ".md",
+		success: function(data, textStatus, XMLHttpRequest){
+			data = data.split("\r\n").join("\n");
+			docs.push(data.split("\n"));
+			//console.log(data.split("\n"));
+			searchingPage++;
+			loadAllDocs();
+		},
+		error:function (xhr, ajaxOptions, thrownError){
+			//End of documentation
+			//console.log(docs);
+			readDoc(); //Start rendering
+		}
+	});
+}
+
+function nextPage(){
+	currentRenderPage = currentRenderPage + 1;
+	if (currentRenderPage >= docs.length){
+		//No more pages
+		currentRenderPage = currentRenderPage - 1;
+		return;
+	}
+	readDoc();
+}
+
+
+function lastPage(){
+	currentRenderPage = currentRenderPage - 1;
+	if (currentRenderPage < 0){
+		//No more pages
+		currentRenderPage = currentRenderPage + 1;
+		return;
+	}
+	readDoc();
+}
+
+function readDoc(){
+	let pageInfo = Array.from(docs[currentRenderPage]);
+	var metaTag = JSON.parse(pageInfo.shift());
+	document.title = metaTag[0];
+	$("#readerTitle").text(metaTag[0]);
+	$("#docLoader").html("");
+	for (var i =0; i < pageInfo.length; i++){
+		$("#docLoader").append(md2html(pageInfo[i]));
+	}
+	
+}
+
+function md2html(input){
+	var converter = new showdown.Converter();
+	return converter.makeHtml(input);
+}
+
+//Initiate the loading interface
+function initLoad(){
+	$("#docLoader").html('<div align="center" style="width:100%;">\
+		<br><br>\
+		<i class="big spinner loading icon stillLoading"></i><br>\
+		<p class="loadFailMsg">Loading...</p>\
+		<br><br>\
+	</div>');
+	setTimeout(chkLoadFail,15000);
+	loadAllDocs();
+}
+
+//Check if the load failed using setTimeout
+function chkLoadFail(){
+	if ($(".stillLoading").length > 0){
+		//Something screwed up during loading of JSON based documentation. Ask for refresh
+		$(".stillLoading").removeClass("spinner").removeClass("loading").addClass("remove");
+		$(".loadFailMsg").text("Seems something went wrong. Try refreshing the page?");
+	}
+}
+
+
+</script>
+</body>
+</html>

File diff suppressed because it is too large
+ 1 - 0
docs/showdown.min.js


File diff suppressed because it is too large
+ 0 - 0
docs/showdown.min.js.map


Some files were not shown because too many files changed in this diff