Skip to content

Instantly share code, notes, and snippets.

Last active October 5, 2016 14:27
Show Gist options
  • Save SteveBenner/12b49ec9d9b6f6cda50a to your computer and use it in GitHub Desktop.
Save SteveBenner/12b49ec9d9b6f6cda50a to your computer and use it in GitHub Desktop.
Slim template for Flatdoc
/ This is a Slim recreation of the Flatdoc example template provided here:
/ Flatdoc is a simple way to generate a documentation page from Markdown
/ More info is available on their website:
/ The main alterations noticeable in this version of the template are:
/ - Emphasis is placed on using variables and interpolation often, key advantages of Slim
/ - The GitHub button links have been replaced with a Web Component version, which I
find to be superior to using an iFrame. Just uncomment the original code to revert.
project_title = 'Your Project'
project_desc = 'Your Project description'
user = 'your-github-username'
repo = 'your-repo-name'
doctype html
meta charset='utf-8'
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
meta name="viewport" content="width=device-width"
title = project_title
/ Flatdoc
script src=""
script src="#{FLATDOC_SOURCE}/legacy.js"
script src="#{FLATDOC_SOURCE}/flatdoc.js"
/ Flatdoc theme
link rel="stylesheet" href="#{FLATDOC_SOURCE}/theme-white/style.css"
script src="#{FLATDOC_SOURCE}/theme-white/script.js"
/ github-button web component:
script src="bower_components/platform/platform.js"
link rel="import" href="bower_components/github-button/dist/github-button.html"
meta content=project_title property="og:title"
meta content=project_desc name="description"
/ Note: I prefer to use CoffeeScript over JS, but in Slim you can't interpolation
/ with embedded CoffeeScript so it doesn't make for good single-file examples. In
/ a real development environment, JS variables would ideally be defined within a
/ single file loaded in the HEAD section of the document. But this works fine too!
javascript:{fetcher: Flatdoc.github('#{user}/#{repo}')});
body role="flatdoc"
h1 = title
li: github-button user=user repo=repo type="fork"
/ li: a href="{user}/#{repo}" View on GitHub
/ li: a href="{user}/#{repo}/issues" Issues
github-button user=user repo=repo
/iframe [src="{user}&repo=#{repo}&type=watch&count=true"
/ allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"]
.menu.section role="flatdoc-menu"
.content role="flatdoc-content"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment