diff --git a/src/articles/cheat-sheets/index.md b/src/articles/cheat-sheets/index.md new file mode 100644 index 0000000..56e39df --- /dev/null +++ b/src/articles/cheat-sheets/index.md @@ -0,0 +1,4 @@ +Cheat sheets +============ + +If you add an `index.md` into a directory, it will become a part of the breadcrumbs. diff --git a/src/client/less/app-view.less b/src/client/less/app-view.less index a0fc077..28163ca 100644 --- a/src/client/less/app-view.less +++ b/src/client/less/app-view.less @@ -1,2 +1,4 @@ +@import "config.less"; @import "layout.less"; +@import "view.less"; @import "markdown.less"; diff --git a/src/client/less/config.less b/src/client/less/config.less new file mode 100644 index 0000000..0822602 --- /dev/null +++ b/src/client/less/config.less @@ -0,0 +1,6 @@ +@contentMaxWidth: 800px; +@contentMinMarginX: 30px; + +@colorText: #666; +@colorLink: #1982C4; +@colorLinkHover: #000; diff --git a/src/client/less/layout.less b/src/client/less/layout.less index 86ae87c..e691c69 100644 --- a/src/client/less/layout.less +++ b/src/client/less/layout.less @@ -1,5 +1,5 @@ -// Reset browser styles +// Reset browser sizes //ol, ul, li, html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, b, u, i, form, label, table, tbody, tfoot, thead, tr, th, td { @@ -22,14 +22,19 @@ table { border-spacing: 0; } -// Basic styling +// Layout -body { - font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; - font-size: 16px; - color: #333; -} +// We need a variable using brackets here, otherwise less won't calculate the width +// See: https://github.com/less/less.js/issues/1903 +@small-screen-breakpoint: (@contentMaxWidth + 2 * @contentMinMarginX); + +.main-column { + width: @contentMaxWidth; + margin: 0 auto; + + @media (max-width: @small-screen-breakpoint) { + width: auto; + margin: 0 @contentMinMarginX; + } -article { - margin: 0 50px 100px; } diff --git a/src/client/less/markdown.less b/src/client/less/markdown.less index 43d78b9..2323a7a 100644 --- a/src/client/less/markdown.less +++ b/src/client/less/markdown.less @@ -1,6 +1,6 @@ .markdown-body { font-size: 16px; - color: #666; + color: @colorText; line-height: 1.4; p, blockquote, ul, ol, dl, li, table, pre, h5, h6 { @@ -39,7 +39,6 @@ ul, ol { margin: 0 0 45px; - color: #666; } blockquote { diff --git a/src/client/less/view.less b/src/client/less/view.less new file mode 100644 index 0000000..d522e35 --- /dev/null +++ b/src/client/less/view.less @@ -0,0 +1,33 @@ + +// Basic styling + +body { + font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; + font-size: 16px; + color: @colorText; +} + +a, a:visited { + color: @colorLink; + text-decoration: none; +} +a:hover, a:active { + color: @colorLinkHover; + text-decoration: underline; +} + +// Views + +.breadcrumbs { + position: fixed; + left: 0; + top: 0; + width: 100%; + + background-color: white; + + .main-column { + padding: 15px 0; + border-bottom: 1px solid #ddd; + } +} diff --git a/src/server/layout/page.php b/src/server/layout/page.php index 877b06e..8a67854 100644 --- a/src/server/layout/page.php +++ b/src/server/layout/page.php @@ -5,9 +5,9 @@ - Slim Wiki + <?php echo $data['wikiName']; ?> - + diff --git a/src/server/logic/Main.php b/src/server/logic/Main.php index f64bc28..a55a207 100644 --- a/src/server/logic/Main.php +++ b/src/server/logic/Main.php @@ -9,17 +9,27 @@ class Main { // - $basePath: E.g. '/slim-wiki/' // - $requestPathArray: E.g. array('myfolder', 'mypage') public function dispatch($baseUrl, $basePath, $requestPathArray) { - $articleBaseDir = realpath(__DIR__ . '/../../articles'); - $articleFilename = $articleBaseDir . '/' . implode('/', $requestPathArray); + $articleBaseDir = realpath(__DIR__ . '/../../articles') . '/'; + $articleFilename = $articleBaseDir . implode('/', $requestPathArray); if (is_dir($articleFilename)) { $articleFilename = rtrim($articleFilename, '/') . '/index.md'; } if (($articleFilename == realpath($articleFilename)) && file_exists($articleFilename) && is_readable($articleFilename)) { + $wikiName = 'Slim Wiki'; // TODO: Make this configurable + + $data = array(); + $data['baseUrl'] = $baseUrl; + $data['basePath'] = $basePath; + $data['wikiName'] = $wikiName; + + $data['breadcrumbs'] = $this->createBreadcrumbs($articleBaseDir, $requestPathArray, $wikiName); + $articleContent = file_get_contents($articleFilename); - $articleMarkup = Parsedown::instance()->text($articleContent); - include(__DIR__ . '/../layout/page.php'); + $data['articleHtml'] = Parsedown::instance()->text($articleContent); + + $this->renderPage($data); } else { // TODO: Show error page echo '

File does not exist or is not readable: '.$articleFilename.'

'; @@ -27,4 +37,29 @@ class Main { } + + private function createBreadcrumbs($articleBaseDir, $requestPathArray, $wikiName) { + $pathCount = count($requestPathArray); + $breadcrumbArray = array(array('name' => $wikiName, 'path' => '', 'active' => ($pathCount == 0))); + + $currentPath = ''; + for ($i = 0; $i < $pathCount; $i++) { + $pathPart = $requestPathArray[$i]; + $currentPath .= ($i == 0 ? '' : '/') . $pathPart; + $isLast = ($i == $pathCount - 1); + + if ($isLast || file_exists($articleBaseDir . $currentPath . '/index.md')) { + // This is the requested file or an directory having an index -> Add it + $breadcrumbArray[] = array('name' => $pathPart, 'path' => urlencode($currentPath), 'active' => $isLast); + } + } + + return $breadcrumbArray; + } + + + private function renderPage($data) { + include(__DIR__ . '/../layout/page.php'); + } + }