Merge branch 'develop'

README.md

@@ -1,4 +1,85 @@
-xyDocs
-A fast, lightweight PHP file/documentation viewer and editor.
+# xyDocs
 
-Project started December 2016.
+**THIS PROJECT IS STILL UNDER DEVELOPMENT.**
+
+xyDocs is a lightweight tool for viewing files in a browser. Great for documentation, wiki, notes, etc.
+Renders Markdown, HTML, syntax highlighting code, images, GIFs, audio and videos.
+
+
+## Screenshots
+(Coming when v1.0 is done)
+
+
+## Setup
+### Requirements
+- PHP 7.0 or above
+- Apache or alike
+
+
+### Setup guide
+1. [Download the latest release](https://github.com/xy2z/xyDocs/releases) or `git clone`.
+1. Edit the `config.yaml` file
+1. Setup web server: Apache/Nginx/etc - or use `php -S localhost:89` for testing.
+
+
+## Configuration
+Feel free to edit the `config.yaml` file to fit your needs.
+
+
+#### Required settings
+- **`title`**  (string) The title of the site, used in tabs and bookmarks.
+
+- **`content_dir`** (string) Path to the dir you want to use.
+
+#### Optional settings
+- **`theme`** (string) Available themes: `default`, `default-dark`, `wiki`, `wiki-dark`.
+
+- **`logo`** (string) Path to the logo. If nothing is set, the `xyDocs` logo will be used.
+
+- **`code_transparent_bg`** (bool) If `true`, all  will use the highlight theme. If `false`, the background will be transparent.
+
+- **`open_dirs`** (int|string) The number of levels of dirs that should be opnened on page load. Use `all` to open all dirs.
+
+
+## Todo v1.0
+- Responsive themes: default + wiki
+- Themes should only be in 1 file? (so you can't fuck up) ('theme_structure' and 'theme_color'?)
+- Theme template (in 'themes' dir)
+- Security: Are there other ways to go back in a dir like '../'?
+- Custom dir for custom themes? (so it won't be lost when upgrading?)
+- Config should be ignored? How to keep it from being overwritten.
+- Test:
+	- Test on ubuntu with content_dir? :) (testpingu01)
+	- Test images: jpg, png, gif + more?
+	- Test videos: ogg, etc.
+	- Test audio files: avi?
+	- Test in all browser + mobile browsers.
+
+
+## Known issues
+- Work when browser goes back/forward between pages.
+- Can't load files with special chars path (maybe encoding?)
+- Rendering (binary) files (images/videos/audio etc) bigger than ~50MB. (Possible solution: if the file is over XXMB then show a download link instead)
+
+
+## Future features
+- htaccess
+- File icons should match file types.
+- Remember scroll position when browsing between files (should also work when using the browsers back/forward)
+- Search (filenames, dirs and content) (with keypress 'F' to focus, config for binding key)
+- Exclude files/folders in config (glob).
+- More themes (sepia)
+- Markdown: Generate table of contents (config)
+- Show error message if filesize is bigger than PHP memory_limit. (instead of php's fatal error)
+- Create/delete/edit files directly on the site?
+- YAML exclude files with filter ("\*.git") (set in default config)
+- Bind '*' key to open all dirs.
+- Support for more markup languages (https://en.wikipedia.org/wiki/Lightweight_markup_language)
+- Config: show_file_extensions,
+- Make all content links open in new tab (setting)
+- File actions (in content_path)
+	- Fullscreen file-content
+	- Copy file content to clipboard
+	- Download file
+	- Switch between raw/rendered (for html, markdown, etc.) (bind to key 'R'?)
+	- File details (filesize, created, edited, etc.) (bind to key 'D'?)

config.yaml

@@ -1,13 +1,39 @@
+#
+# See a detailed list of all settings here:
+# https://github.com/xy2z/xyDocs/tree/master##configuration
+#
+
+# The title of the
+title: xyDocs
+
 # The directory that contains all the content
 content_dir: D:\Test\Docs\Dokumenter
 # content_dir: P:\Dokumenter
-theme:
-  - Default
-  - default-dark-twilight
+
+# What logo to show in the top of the menu?
 logo: Logo.png
-title: xyDocs v0.1
 
-binds:
-  search: f
-  # edit: e
-  # save: s
+#################
+# Optional settings:
+
+# Theme to use.
+theme:
+  - Wiki
+  # - Wiki-Dark
+  # - Default
+  # - Default-twilight
+
+# Highlight themes: default, monokai, tomorrow, sunbust. See all on https://highlightjs.org/static/demo/.
+highlight_theme: Tomorrow-Night
+
+# Use transparent bacground on code?
+code_transparent_bg: False
+
+open_dirs: 1 # (int or 'all')
+
+# render_footer: true
+
+
+#binds:
+#  search: f
+#  switch_raw_rendered: r

css/base.css

@@ -1,3 +1,10 @@
+/**
+ *
+ * Do not edit this file as it would be overwritten when upgrading.
+ * Edit the custom theme instead.
+
+ */
+
 html,
 body {
 	margin: 0;
@@ -9,52 +16,117 @@ body {
 	box-sizing: border-box;
 }
 
+
+
+/*** MAIN ***/
 #main {
 	width: 900px;
+	width: 1200px;
+	height: 100%;
+}
+
+
+
+/*** MENU ***/
+#menu_wrapper {
+	width: 350px;
 	height: 100%;
+	overflow: hidden;
+	float: left;
 }
 
 #menu {
 	min-height: 100%;
 	padding: 20px;
 	width: 350px;
-	float: left;
+	height: 100%;
+	width: 368px;
+	overflow-y: scroll;
 }
 
-#logo {
-	width: 100%;
+#menu ul > ul {
+	display: none;
+}
+
+#menu a {
+	word-break: break-all;
+}
+
+#menu_top {
+	padding: 20px 0;
+	width: 310px;
+	background: inherit;
+}
+
+#menu i.fa {
+	margin-right: 10px;
+}
+
+
+
+/*** MENU FOOTER ***/
+#menu footer {
+	margin-top: 2em;
+	font-size: 0.8em;
 }
 
+#logo,
 #search {
 	width: 100%;
 }
 
+
+
+/*** CONTENT ***/
 #content {
 	float: left;
 	width: 850px;
-	min-height: 100%;
+	height: 100%;
+}
+
+#content_path {
+	width: 850px;
+}
+
+#content_path .filesize {
+	padding-left: 1em;
+	font-size: 0.8em;
 }
 
 #content_path,
+#loading,
 #file_content {
 	padding: 20px;
 }
 
-footer {
-	clear: both;
+#file_content {
+	overflow-y: auto;
+	width: 850px;
+	height: 90%;
+	/*height: 500px;*/
+}
+
+
+
+/*** LOADING ***/
+#loading {
 }
 
 
-i.fa {
-	padding-right: 10px;
+
+/*** ERROR ***/
+.error {
+	text-align: center;
+	color: #f66;
 }
 
 
 
 /*** Text/Markdown ***/
 #content p,
 #content ul,
-#content ol {
+#content ol,
+#content code {
 	line-height: 1.5em;
 }
 
@@ -95,6 +167,22 @@ img {
 	max-width: 100%;
 }
 
-audio {
+audio,
+video {
+	width: 100%;
+}
+
+#content code {
+	display: block;
 	width: 100%;
+	white-space: pre-wrap;
+	padding: 1em;
+}
+
+#content code.file {
 }
+
+#content code.nobg {
+	background: none;
+}
+

css/default-dark-twilight.css → css/default-twilight.css

@@ -13,7 +13,7 @@ body {
 }
 
 
-
+/*** MENU ***/
 #menu {
 	background: #333;
 }
@@ -25,27 +25,61 @@ body {
 }
 
 #menu ul li a:hover {
+	background: rgba(249, 238, 152, 0.1);
+	color: #F9EE98;
+}
+
+#menu ul li a.active:hover,
+#menu ul li a.active,
+#menu ul li a.active i.fa {
+	color: #fff;
+	color: #f70;
+	/*color: #CF6A4C;*/
+}
+
+
+
+/*** MENU ICONS ***/
+#menu i.fa {
+	color: #8F9D6A;
+}
+
+#menu a.link_dir_open i.fa {
 	color: #F9EE98;
+	/*color: #CDA869;*/
+
 }
 
 
 
+
+/*** CONTENT PATH ***/
 #content_path {
 	background: #CDA869;
 	color: #333;
 }
 
+
+
+/*** CONTENT ***/
 #content {
 	background: #292929;
+	/*overflow-y: hidden;*/
+
 }
 
 
 
-i.fa {
-	color: #8F9D6A;
+#loading {
+	color: #F9EE98;
+}
+
+.error {
+	color: #CF6A4C;
 }
 
 
+
 /* Text/Markdown */
 h1,
 h2 {
@@ -58,9 +92,8 @@ code {
 code {
 	display: block;
 	padding: 1em;
-	margin: 1em 0.5em;
 }
 
 a {
 	color: #39d;
-}
+}