• 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 directory

    silk spin --directory ~/path/to/silk-example
    

    To spin automatically on file changes use the --auto option

    silk spin --auto --directory ~/path/to/silk-example
    
  • 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>
  • 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>
  • 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" />
    
  • 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 and data-sw-when-not can be used to handle optional values. The following will display a link when link-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>
    
  • 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 and sw/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>
  • 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>
  • 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. The data-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>