demo site content

gfogelson · Nov 25, 2011 · d32f362 · d32f362
1 parent 041786c
commit d32f362
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 14 deletions.
diff --git a/demo/header.php b/demo/header.php
@@ -30,10 +30,11 @@
         </ul>
 
 
-
+    <? /*
         <div id="page_title">
             <h2><?=$page['headline']?></h2>
         </div>
-
+        */
+    ?>
 
         <div id="content">
diff --git a/demo/pages/guide.php b/demo/pages/guide.php
@@ -3,7 +3,7 @@
         <ul>
             <li>A header and footer template</li>
             <li>A PHP or HTML file for each page</li>
-            <li>An array of page arrays describing each page</li>
+            <li>An array of arrays describing each page</li>
             <li>An index.php script that receives requests</li>
 
         </ul>
@@ -14,21 +14,146 @@
 <h3>Header and footer</h3>
 
 <p>
-    How easy? <a href="https://github.com/wlrs/hoist/blob/master/demo/index.php">Look at the actual code that powers this site</a>:
+    Your header and footer are the bread in your HTML sandwich. They should contain everything that goes above and below the content.    
+</p>
+
+<p>
+    You can use the $page array to get the title and other information about the current page, and the $hoist object to get other info about your site.
+</p>
+
+<p>
+    By default Hoist will use header.php and footer.php, but you can set it to something else:
 </p>
 
 <pre class="prettyprint">
-<? 
+$hoist = new hoist($pages);
+$hoist->header = 'my_weird_header.php';
+$hoist->footer = 'footers/footer2.php';
+$hoist->display();
+</pre>
+
+<p>
+    Examples from this site: <a href="https://github.com/wlrs/hoist/blob/master/demo/header.php">header.php</a>, <a href="https://github.com/wlrs/hoist/blob/master/demo/footer.php">footer.php</a>
+</p>
+
+
+<h3>Content pages</h3>
+
+<p>
+    Each page should have a corresponding PHP or HTML file that contains (or generates) your content. You can use the $page and $hoist objects here too.
+</p>
+
+<p>
+    Example from this site: <a href="https://github.com/wlrs/hoist/blob/master/demo/pages/home.php">home.php</a>
+</p>
+
+
+<h3>Page array</h3>
+
+<p>
+    This is an array of arrays that tells Hoist about every page on your site. It will look something like this:
+</p>
+
+<pre class="prettyprint">
+<?
     $code = file_get_contents('index.php');
-    $code = preg_replace("/^<\?\s+/" , '', $code);
-    echo htmlentities($code);
+    if(preg_match("/pages =([^;]+)/m", $code, $matches)){
+        echo "\$pages = ";
+        echo htmlentities($matches[1]);
+        echo ";";
+    }
 ?>
 </pre>
 
 <p>
-    Hoist minimizes the pain of setting up templates and nice URLs and allows you to worry about the important stuff like content and layout.
+    Let's look at the fields that make up each page array.
+</p>
+
+<h4>'url' <span class="required_field">required</span></h4>
+
+<p>
+    The url where this page will live. This should include everything after 'http://mysite.com', so your home page should be '/'.
+</p>
+
+<h4>'content' <span class="required_field">required</span></h4>
+
+<p>
+    The PHP or HTML content file for this page. Path is relative to your index.php.
+</p>
+
+
+<h4>'title'</h4>
+
+<p>
+    The title of this page, generally used in the header's &lt;title&gt; tag. If this doesn't exist Hoist will generate a title based on the url.
+</p>
+
+
+<h4>'headline'</h4>
+
+<p>
+    Another title for this page. This is generally used as an &lt;h2&gt; tag in the header. If this doesn't exist Hoist will use the 'title' field.
+</p>
+
+
+<h4>'groups'</h4>
+
+<p>
+    A string (if this page is only in 1 group) or array of strings indicating groups this page belongs to. This is useful for creating menus or displaying lists of links.
+</p>
+
+<p>
+    For instance, on this site the three main pages belong to the 'nav' group. This pages are stored in the $hoist object in an array at $hoist->groups['nav'].The header contains this code which generates the main header navigation:
+</p>
+
+<pre class="prettyprint">
+&lt;ul id=&quot;nav&quot;&gt;
+    &lt;? foreach($hoist-&gt;groups[&#x27;nav&#x27;] as $link){ ?&gt;
+        &lt;li&lt;? if ($link[&#x27;active&#x27;]) echo &#x27; class=&quot;active&quot;&#x27;; ?&gt;&gt;&lt;a href=&quot;&lt;?= $link[&#x27;url&#x27;] ?&gt;&quot;&gt;&lt;?= $link[&#x27;title&#x27;] ?&gt;&lt;/a&gt;&lt;/li&gt;
+    &lt;? } ?&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>
+    Each page can also have a title for each specific group. To set the page's title for the 'nav' group, just use the field 'nav_title'. This will be used as the 'title' field for the page stored in $hoist->groups['nav'].
 </p>
 
+
+<h4>'override'</h4>
+
 <p>
-    <a href="https://github.com/wlrs/hoist">Get the code on Github</a> and <a href="/guide">consult the guide</a>. You can have a site running with Hoist in minutes.
-</p>
+    If true, the header and footer will not be displayed for this page. Useful for content that is loaded via AJAX or for pages that depart completely from the standard layout.
+</p>
+
+
+<h3>index.php</h3>
+
+<p>
+    Your index.php receives all the requests for pages, sets up the Hoist object and then displays the appropriate page. Once you've defined your page array, it's as simple as this:
+</p>
+
+<pre class="prettyprint">
+$hoist = new hoist($pages);
+$hoist->display();
+</pre>
+
+<p>
+    In order for your index.php to receive requests for all the fancy URLs you're setting up, we need your web server to route requests for missing files to it. Here's an Apache .htaccess file that should get the job done:
+</p>
+
+<pre class="prettyprint">
+<?
+    $code = file_get_contents('.htaccess');
+    echo htmlentities($code);
+?>
+</pre>
+
+<p>
+    And if you're using nginx it's even easier:
+</p>
+
+<pre class="prettyprint">
+if (!-e $request_filename) {
+    rewrite . /index.php last;
+}
+</pre>              
diff --git a/demo/pages/home.php b/demo/pages/home.php
@@ -1,3 +1,5 @@
+<h2><?=$page['headline']?></h2>
+
 <p>
     Hoist is a lightweight system that makes it ridiculously easy to build small websites with PHP.
 </p>

diff --git a/demo/prettify.css b/demo/prettify.css
@@ -7,7 +7,10 @@
 .typ, .atn, .dec, .var { color: #CB4B16; }
 .pln { color: #feffc8; }
 .prettyprint {
+  /*
   background-color: #0071d2;
+  */
+  background-color: #34373f;
   padding: 12px;
   /*border: 1px solid rgba(0,0,0,.2);
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);

diff --git a/demo/style.css b/demo/style.css
@@ -156,7 +156,7 @@ body {
   /*background-color: rgb(3,124,231); */
 
   background-color: #333;
-  color: #fff;
+  color: #f3f3f1;
   /*
     font-family: news-gothic-std, Helvetica, Arial, sans-serif;
     */
@@ -228,7 +228,7 @@ p {
 }
 #content ul {
   list-style-position: inside;
-  margin: 0 2.25em;
+  margin: 0.75em 2.25em 0;
 }
 #content ul li {
   line-height: 1.4375em;

diff --git a/demo/style.less b/demo/style.less
@@ -181,7 +181,7 @@ body {
 body{
     /*background-color: rgb(3,124,231); */
     background-color: #333;
-    color: #fff;
+    color: #f3f3f1;
     /*
     font-family: news-gothic-std, Helvetica, Arial, sans-serif;
     */
@@ -266,7 +266,7 @@ p{
 
 #content ul{
     list-style-position:inside;
-    margin: 0 36/@em;
+    margin: 12/@em 36/@em 0;
 }
 #content ul li{
     line-height: 23/@em;