-
Setup Lets get you up and running with the Silk Web Toolkit
Navigate to the latest release on GitHub
- for Linux download the relevant platform file (
.deb
or.rpm
) - for Mac download the
.tgz
and unpack it in a directory on you classpath E.G.~/bin
- for Windows download the JAR file and use a progam like launch4j to convert it into an executable
Download a Silk example project and unzip it. Projects are structured like so.
├── components │ ├── footer.html │ ├── header.html │ └── site-name.html ├── data │ └── news │ ├── item1.edn │ └── item2.edn ├── meta ├── resource │ └── css │ └──style.css ├── site ├── template │ └── default.html └── view ├── index.html └── readme.txt
In a terminal type
silk
for a full list of command line options.Use the following command to spin your project and assemble its contents into the
site
directorysilk spin --directory ~/path/to/silk-example
To spin automatically on file changes use the
--auto
optionsilk spin --auto --directory ~/path/to/silk-example
- for Linux download the relevant platform file (
-
Templates Get the same look and feel across all your pages
Add a
data-sw-view
attribute to a<div>
tag, to specify where your views are inserted into your templates.<html> <head> <title>My Sample Site</title> </head> <body> <header> <h1>My Sample Site</h1> </header> <div data-sw-view=""> Placedholder for view </div> <footer> <hr> </footer> </body> </html>
-
Views The epicentre of your site, organise your content
Out of the box a view will look for a template called "default". You can override this by providing an optional
<meta>
tag, see below.The template title can be overriden by providing an optional title element in the same place.
<html> <head> <title>My Title</title> <meta name="template" content="example-template" /> </head> <body> <div> <p>This is the content for the view<p> </div> </body> </html>
-
Components Contain reusable mark-up
Simple components enable re-use of structural or semantic mark-up.
Component mark up must be placed into the components directory. Everything inside the
<body>
tag is injected into the caller. The component's name is its file-name minus extension.An example of a simple component is given below.
<html> <body> <span> My Sample Site </span> </body> </html>
Call the component from a template, view or another component with the following mark-up.
<span data-sw-component="site-name" />
-
Sources Add blog, news or photo updates without touching mark-up
A source is a collection of articles, for example news stories or blog posts. Source related attributes include;
data-sw-source
(required: location)data-sw-sort
(optional: key on items to sort on)data-sw-sort-dir
(optional: specify ascending or descending)data-sw-limit
(optional: limit the number of items)
The following will gather articles from
data/news
(a directory called news under the data directory on disk) and inject each into an HTML list (<ul> <ol> <tbody>
)<ul data-sw-source="news"> <li> <h2 data-sw-text="title"></h2> <div data-sw-text="description"></div> <ol> <li> <img data-sw-src="images/path" data-sw-alt="images/tooltip" /> </li> </ol> </li> </ul>
A source can also be injected into a component like so.
<div data-sw-component="my-news" data-sw-source="news" />
Below is a single news item, in EDN Format, containing all the mentioned keys. Appending the keys with
-html
or-md
would allow rich injection of HTML or Markdown respectively.data/news/item1.edn
{:title "Lorem ipsum" :description "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ..." :images [{:path "resources/img/1.jpg" :tooltip "Picture 1"} {:path "resources/img/2.jpg" :tooltip "Picture 2"}]}
Attributes
data-sw-when
anddata-sw-when-not
can be used to handle optional values. The following will display a link whenlink-path
is present and a span if it isn't .<div data-sw-when="link-path"> <a data-sw-href="link-path" data-sw-text="link-title" /> </div> <div data-sw-when-not="link-path"> <span data-sw-text="link-title" /> </div>
-
Tree Source add hierarchical data such as family trees
A source could also be a directory tree like so.
data/ └── my-source/ ├── sub-1/ │ └── item1.edn └── sub-2/ ├── item1.edn └── item2.edn
Use special attribute value
sw/contents
to access each directory andsw/name
for the file/folder name.<ul data-sw-source="my-source"> <li> <span data-sw-text="sw/name"></span> <ul> <li> <span data-sw-text="sw/contents.sw/name"></span> <ul> <li> <a data-sw-href="sw/contents.sw/contents.sw/path" data-sw-text="sw/contents.sw/contents.title"> </a> </li> </ul> </li> </ul> </li> </ul>
-
Details Page A dedicated page per source item
A details page is a dedicated template for rendering whole articles belonging to a specific source. For source
data/news
, if the file below is created, each news article will have it's own dedicated details page.template/detail/news.html
<html> <body> <h2 data-sw-text="title"></h2> <div data-sw-text="further-details"></div> </body> </html>
Link to a details page using the special attribute value
sw/path
as demonstrated below.<ul data-sw-source="news"/> <li> <a data-sw-href="sw/path" href="#">Click here for further details</a> </li> </ul>
-
Tipue Search Support Control your searchable content dynamically
We recommend you look at Tipue Search, an open source JQuery search engine, along with our Blog example. This search engine has two modes "Live" and "JSON".
"Live" automatically indexes your site but due to the Same Origin Policy it requires your site to be on the web (live) for it to work.
"JSON" mode requires a JavaScript file with search terms to be maintained.
By adding attribute
data-sw-search-content
to your markup the Silk Web Toolkit will allow you to include a JavaScript file (resource/js/tipuesearch_content.js
) which contains the "JSON" search terms. Thedata-sw-search-content
attribute can be added to Templates, Views, Components and Details Pages. Navigation attributes are used to gather titles and links for your searchable contents.Below is an example of how to include multiple searchable sections to a page with bookmark navigation.
<html> <body data-sw-nav="Documentation" data-sw-priority="2" > <section data-sw-nav="Section 1" id="sec1" data-sw-search-content> <p>Some searchable content.</p> <p>Some more.</p> </section> <section data-sw-nav="Section 2" id="sec2" data-sw-search-content> <p>Some searchable content.</p> <p>Some more.</p> </section> </body> </html>