svn commit: r1538865 - /forrest/trunk/site-author/content/xdocs/docs_0_100/project-js-css.xml

[cr...@apache.org]

Author: crossley
Date: Tue Nov  5 04:39:18 2013
New Revision: 1538865

URL: http://svn.apache.org/r1538865
Log:
Add some examples to show other ways to deal with additional project images, javascript, and css, etc.

Modified:
    forrest/trunk/site-author/content/xdocs/docs_0_100/project-js-css.xml

Modified: forrest/trunk/site-author/content/xdocs/docs_0_100/project-js-css.xml
URL: http://svn.apache.org/viewvc/forrest/trunk/site-author/content/xdocs/docs_0_100/project-js-css.xml?rev=1538865&r1=1538864&r2=1538865&view=diff
==============================================================================
--- forrest/trunk/site-author/content/xdocs/docs_0_100/project-js-css.xml (original)
+++ forrest/trunk/site-author/content/xdocs/docs_0_100/project-js-css.xml Tue Nov  5 04:39:18 2013
@@ -75,5 +75,66 @@
         ####
       </p>
     </section>
+    <section id="examples">
+      <title>Examples</title>
+      <section id="example-d3">
+        <title>D3.js Data Driven Documentation</title>
+        <p>
+          Hooking up
+          <a href="http://d3js.org/">D3.js</a> is very easy, as shown there.
+          After declaring the "script" element in the header of your source,
+          then add one of the example snippets to your project JS.
+          The "randomly color paragraphs" example is a quick test that you are
+          up and running.
+        </p>
+        <p>
+          Obviously it is a very powerful combination to use D3 together with
+          Forrest's ability to gather, co-ordinate, and transform data.
+        </p>
+      </section>
+      <section id="example-leaflet">
+        <title>Leaflet</title>
+        <p>
+          Follow the excellent 
+          <a href="http://bost.ocks.org/mike/leaflet/">example</a>
+          "using D3 to render GeoJSON shapes in conjunction with Leaflet".
+        </p>
+        <p>
+          Forrest will automatically find the CSS and JS when you place them
+          in the corresponding "project resources" directories as explained above.
+        </p>
+        <p>
+          In this case we need to help Forrest find the images that are used by
+          the Leaflet CSS. For example, it is looking for the resource
+          <code>css/images/zoom-in.png</code> (i.e. relative to its CSS file).
+        </p>
+        <p>
+          However, the default machinery in Forrest for locating images does not
+          look in that location, even if you try to place them there.
+        </p>
+        <p>
+          Add to your "project locationmap". This is consulted first in the
+          sequence of locationmaps, so you can cause Forrest to look for all
+          project image files in certain specific locations. If it does not
+          find them there, then it continues through the default locationmaps.
+        </p>
+        <p>
+          So if you added your source images to a
+          <code>resources/images/leaflet/</code> sub-directory, then add the following to your "project locationmap":
+        </p>
+        <source>
+<![CDATA[<match pattern="project.images.**.*">
+  <location src="{properties:resources.images}leaflet/{1}.{2}" />
+</match>
+]]></source>
+        <p>
+          Note that each locationmap match can try multiple locations in sequence.
+        </p>
+        <p>
+          This "project locationmap" technique is useful for utilising multiple
+          image/javascript/css libraries and keeping their resources separate.
+        </p>
+      </section>
+    </section>
   </body>
 </document>