Added basic theme support

.gitignore

@@ -4,3 +4,4 @@
 /src/data/backup/
 /src/node_modules/
 /src/config.php
+/src/server/theme/*/css/

src/.htaccess

@@ -1,6 +1,7 @@
 RewriteEngine On
 
 RewriteCond %{THE_REQUEST} !^GET\ .*?/client/([a-z]\.(js|css)|img/|libs/)
+RewriteCond %{THE_REQUEST} !^GET\ .*?/server/theme/
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule ^(.*)$ index.php [L,QSA]

src/Gruntfile.js

@@ -42,18 +42,17 @@ module.exports = function (grunt) {
           { expand: true, src: 'client/img/**', dest: dist + '/' },
           { expand: true, src: 'client/libs/prism/components/*.min.js', dest: dist + '/' },
           { expand: true, src: 'data/articles/**', dest: dist + '/' },
-          { expand: true, src: 'server/**', dest: dist + '/' }
+          { expand: true, src: [ 'server/**', '!**/less/**' ], dest: dist + '/' }
         ]
       }
     },
 
     less: {
       dist: {
-        files: (function () {
-          var files = {};
-          files['.tmp/app-view.css'] = 'client/less/app-view.less';
-          return files;
-        })()
+        files: {
+          '.tmp/app-view.css': 'client/less/app-view.less',
+          'server/theme/slim/css/theme.css': 'server/theme/slim/less/theme.less'
+        }
       }
     },
 
@@ -97,7 +96,10 @@ module.exports = function (grunt) {
 
     watch: {
       less: {
-        files: 'client/less/*.less',
+        files: [
+          'client/less/*.less',
+          'server/theme/*/less/*.less'
+        ],
         tasks: 'less'
       },
       copy: {

src/client/less/app-view.less

@@ -1,5 +1,3 @@
 @import "config.less";
-@import "custom-bootstrap.less";
 @import "layout.less";
 @import "view.less";
-@import "markdown.less";

src/client/less/config.less

@@ -1,9 +1,5 @@
-@contentMaxWidth: 800px;
-@contentMinMarginX: 30px;
 
 @colorText: #444;
-@colorLink: #1982C4;
-@colorLinkHover: #000;
 
 // This doesn't set the editor's background (this is done in their theme) - it's just the same color they use
 @colorEditorBg: #2b2b2b;

src/client/less/layout.less

@@ -1,8 +1,4 @@
 
-// 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);
-
 html, body {
   height: 100%;
 }
@@ -55,43 +51,6 @@ html, body {
   }
 }
 
-.main-column {
-  width: @contentMaxWidth;
-  margin: 0 auto;
-
-  .mode-edit & {
-    width: auto;
-    margin: 0 @contentMinMarginX;
-  }
-
-  @media (max-width: @small-screen-breakpoint) {
-    width: auto;
-    margin: 0 @contentMinMarginX;
-  }
-}
-
-.breadcrumbs {
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 100%;
-
-  .mode-edit & {
-    width: 50%;
-  }
-}
-
-#content {
-  padding: 30px 0 150px;
-}
-
-footer {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-}
-
 .mode-createUser {
   form {
     width: 600px;

src/client/less/view.less

@@ -1,15 +1,4 @@
 
-// Basic styling
-
-body {
-  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
-  font-size: 16px;
-  color: @colorText;
-  -webkit-font-smoothing: antialiased;
-}
-
-// Views
-
 #jumbo-message {
   margin-top: 150px;
   text-align: center;
@@ -47,34 +36,6 @@ body {
   }
 }
 
-.breadcrumbs {
-  background-color: white;
-  cursor: default;
-
-  a, span {
-    white-space: nowrap;
-  }
-
-  .main-column {
-    padding: 15px 0;
-    border-bottom: 1px solid #ddd;
-  }
-  .pull-right {
-    margin-left: 5px;
-  }
-}
-
-footer {
-  height: 80px;
-  padding-top: 30px;
-  border-top: 1px solid #ddd;
-  color: #666;
-  background: #f5f5f5;
-
-  font-size: 13px;
-  text-shadow: 0 1px 0 #fff;
-}
-
 #editor-wrapper {
   font-size: 14px;
 

src/config-example.php

@@ -7,6 +7,8 @@ if (function_exists('date_default_timezone_set')) {
 $config['wikiName'] = 'Slim Wiki';
 $config['lang'] = 'en'; // 'de' or 'en'
 
+//$config['theme'] = 'slim';
+
 // Hide directories having no 'index.md' in breadcrumbs
 //$config['showCompleteBreadcrumbs'] = false;
 

src/server/layout/page.php

@@ -1,6 +1,10 @@
 <?php
 
 $mode = $data['mode'];
+$themeDir = __DIR__ . '/../theme/' . $data['theme'];
+$themePath = 'server/theme/' . $data['theme'];
+
+include($themeDir . '/init-theme.php');
 
 ?><!doctype html>
 <html>
@@ -19,8 +23,6 @@ $mode = $data['mode'];
 
   <base href="<?php echo $data['baseUrl']; ?>">
 
-  <link href="client/img/favicon-32.png" rel="shortcut icon" />
-
   <?php if ($mode == 'edit') { ?>
   <!-- build:css client/edit.css -->
   <link href="client/libs/CodeMirror/lib/codemirror.css" rel="stylesheet">
@@ -34,6 +36,8 @@ $mode = $data['mode'];
   <link href=".tmp/app-view.css" rel="stylesheet" />
   <!-- endbuild -->
 
+  <?php include($themeDir . '/head.php'); ?>
+
   <script type="text/javascript">
     window.slimwiki = {
       <?php // We support IE 9+. We need addEventListener, querySelectorAll and JSON.parse  ?>
@@ -105,27 +109,7 @@ if ($mode == 'edit') {
   }
 
   if ($mode == 'view' || $mode == 'edit' || $mode == 'noSuchArticle' || $mode == 'createArticle') {
-    ?><nav class="breadcrumbs"><div class="main-column"><?php
-      if ($data['showCreateUserButton']) {
-        ?><a class="btn btn-default btn-xs pull-right" href="<?php echo $data['requestPath']; ?>?createUser"><?php echo $i18n['button.createUser']; ?></a><?php
-      }
-      if ($mode == 'view' || $mode == 'noSuchArticle') {
-        ?><a class="btn btn-default btn-xs pull-right" href="<?php echo $data['requestPath']; ?>?edit"><?php echo $i18n['button.edit']; ?></a><?php
-      }
-
-      $isFirst = true;
-      foreach ($data['breadcrumbs'] as $item) {
-        if (! $isFirst) {
-          echo ' / ';
-        }
-        if ($item['active'] || is_null($item['path'])) {
-          echo '<span>' . $item['name'] . '</span>';
-        } else {
-          ?><a href="<?php echo $data['basePath'] . $item['path'] . (($mode == 'edit') ? '?edit' : ''); ?>"><?php echo $item['name']; ?></a><?php
-        }
-        $isFirst = false;
-      }
-    ?></div></nav><?php
+    include($themeDir . '/page-header.php');
   }
 
   if ($mode == 'edit' && $data['demoMode']) {
@@ -136,7 +120,7 @@ if ($mode == 'edit') {
   }
 
   if ($mode == 'view' || $mode == 'edit') {
-    ?><article id="content" class="markdown main-column"><?php echo $data['articleHtml']; ?></article><?php
+    include($themeDir . '/content.php');
   }
 
   if ($mode == 'noSuchArticle' || $mode == 'createArticle') {
@@ -165,15 +149,9 @@ if ($mode == 'edit') {
       </div>
     </form><?php
   } // if ($mode == 'createUser')
-  ?>
 
-  <footer><div class="main-column">
-    <?php
-      if (isset($data['footerHtml'])) {
-        echo $data['footerHtml'];
-      }
-    ?><div class="pull-right">powered by <a href="https://github.com/til-schneider/slim-wiki" target="blank">slim-wiki</a></div>
-  </div></footer>
+  include($themeDir . '/page-footer.php');
+  ?>
 
 </div><?php // id="main-wrapper" ?>
 

src/server/logic/Context.php

@@ -29,6 +29,7 @@ class Context {
             'wikiName' => 'Slim Wiki',
             'timezone' => 'Europe/Berlin',
             'lang'     => 'en',
+            'theme'    => 'slim',
             'demoMode' => false,
             'showCompleteBreadcrumbs' => true
         );

src/server/logic/Main.php

@@ -119,7 +119,7 @@ class Main {
             $data['mode'] = $mode;
             $data['fatalErrorMessage'] = $fatalErrorMessage;
 
-            foreach (array('wikiName', 'demoMode', 'footerHtml') as $key) {
+            foreach (array('wikiName', 'theme', 'demoMode', 'footerHtml') as $key) {
                 if (isset($config[$key])) {
                     $data[$key] = $config[$key];
                 }

src/server/theme/slim/content.php

@@ -0,0 +1 @@
+<article id="content" class="markdown main-column"><?php echo $data['articleHtml']; ?></article>

src/server/theme/slim/head.php

@@ -0,0 +1,2 @@
+<link href="<?php echo $themePath; ?>/img/favicon-32.png" rel="shortcut icon" />
+<link href="<?php echo $themePath; ?>/css/theme.css" rel="stylesheet" />

src/server/theme/slim/less/_custom-bootstrap.less

@@ -1,6 +1,6 @@
 // Copied and adjusted from: src/client/libs/bootstrap/less/bootstrap.less
 
-@bootstrap-src: '../libs/bootstrap/less';
+@bootstrap-src: '../../../../client/libs/bootstrap/less';
 
 // Core variables and mixins
 @import "@{bootstrap-src}/variables.less";

src/server/theme/slim/less/_layout.less

@@ -0,0 +1,44 @@
+
+@contentMaxWidth: 800px;
+@contentMinMarginX: 30px;
+
+// 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;
+
+  .mode-edit & {
+    width: auto;
+    margin: 0 @contentMinMarginX;
+  }
+
+  @media (max-width: @small-screen-breakpoint) {
+    width: auto;
+    margin: 0 @contentMinMarginX;
+  }
+}
+
+.breadcrumbs {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+
+  .mode-edit & {
+    width: 50%;
+  }
+}
+
+#content {
+  padding: 30px 0 150px;
+}
+
+footer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}

src/server/theme/slim/less/_view.less

@@ -0,0 +1,38 @@
+// Basic styling
+
+body {
+  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
+  font-size: 16px;
+  color: @colorText;
+  -webkit-font-smoothing: antialiased;
+}
+
+// Views
+
+.breadcrumbs {
+  background-color: white;
+  cursor: default;
+
+  a, span {
+    white-space: nowrap;
+  }
+
+  .main-column {
+    padding: 15px 0;
+    border-bottom: 1px solid #ddd;
+  }
+  .pull-right {
+    margin-left: 5px;
+  }
+}
+
+footer {
+  height: 80px;
+  padding-top: 30px;
+  border-top: 1px solid #ddd;
+  color: #666;
+  background: #f5f5f5;
+
+  font-size: 13px;
+  text-shadow: 0 1px 0 #fff;
+}

src/server/theme/slim/less/theme.less

@@ -0,0 +1,6 @@
+@colorText: #444;
+
+@import "_custom-bootstrap.less";
+@import "_layout.less";
+@import "_view.less";
+@import "_markdown.less";

src/server/theme/slim/page-footer.php

@@ -0,0 +1,7 @@
+<footer><div class="main-column">
+    <?php
+    if (isset($data['footerHtml'])) {
+        echo $data['footerHtml'];
+    }
+    ?><div class="pull-right">powered by <a href="https://github.com/til-schneider/slim-wiki" target="blank">slim-wiki</a></div>
+</div></footer>

src/server/theme/slim/page-header.php

@@ -0,0 +1,21 @@
+<nav class="breadcrumbs"><div class="main-column"><?php
+if ($data['showCreateUserButton']) {
+    ?><a class="btn btn-default btn-xs pull-right" href="<?php echo $data['requestPath']; ?>?createUser"><?php echo $i18n['button.createUser']; ?></a><?php
+}
+if ($mode == 'view' || $mode == 'noSuchArticle') {
+    ?><a class="btn btn-default btn-xs pull-right" href="<?php echo $data['requestPath']; ?>?edit"><?php echo $i18n['button.edit']; ?></a><?php
+}
+
+$isFirst = true;
+foreach ($data['breadcrumbs'] as $item) {
+    if (! $isFirst) {
+        echo ' / ';
+    }
+    if ($item['active'] || is_null($item['path'])) {
+        echo '<span>' . $item['name'] . '</span>';
+    } else {
+        ?><a href="<?php echo $data['basePath'] . $item['path'] . (($mode == 'edit') ? '?edit' : ''); ?>"><?php echo $item['name']; ?></a><?php
+    }
+    $isFirst = false;
+}
+?></div></nav>