How is Twitter Bootstrap's doc website made? - html

I mean this website: http://getbootstrap.com/
I looked into the code at https://github.com/twbs/bootstrap/tree/master/docs
I think the .html is not typical HTML? For example
For CSS page, the source code is:
---
layout: default
title: CSS
slug: css
lead: "Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system."
---
{% include css/overview.html %}
{% include css/grid.html %}
{% include css/type.html %}
{% include css/code.html %}
{% include css/tables.html %}
{% include css/forms.html %}
{% include css/buttons.html %}
{% include css/images.html %}
{% include css/helpers.html %}
{% include css/responsive-utilities.html %}
{% include css/less.html %}
{% include css/sass.html %}
Specifically, what's the programming language, framework for building the site?

Skimming the build program shows that it uses Jekyll, which is written in Ruby.

Related

Jekyll and Disqus: cannot get disqus to appear on site

I am using Github Pages' Jekyll integration. I added the Disqus configuration today but Disqus does not appear on my posts. I have added the Disqus script to a file _includes/disqus.html and added {% include disqus.html %} to _layouts/default.html.
You may view this work at my https://github.com/shaneoston72/shaneoston72.github.io
Thank you for any help you can offer.
Ok, we'll need to do a few things here:
At the end of your file _layouts/default.html what I see is:
</div>
{% include disqus.html %}
{% include footer.html %}
</body>
Replace this part for:
</div>
{% include footer.html %}
{% if page.comments %}
{% include disqus.html %}
{% endif %}
</body>
Then, on your file _includes/disqus.html, delete the first and the last line:
{% if post.comments %}
.....
{% endif %}
This should do the job. Let me know how it goes, ok?
Hope to have helped!

Can I have templates for rst files with Sphinx?

I have several rST pages that follow the same skeleton, but with different values and paragraphs in some places.
Ideally, I would imagine something like this (simplified example):
page-model.rst
Feature {% block title %}Index{% endblock %}
============================================
{% block description %}
Not available.
{% endblock %}
And then:
page-1.rst
{% extends "page-model.rst" %}
{% block title %}Load{% endblock %}
{% block description %}
Load data from hard disk.
{% endblock %}
Is that possible out of the box?
Should I hack something myself to run Jinja before generating docs? Or define my own directives?
Is that a bad idea? :)
Thanks for your insights!

How to render a site locally with source code in hand?

I downloaded the whole package of Bootstrap(the middle one) and was looking into its hierarchy. I found out that this source code contains the site http://getbootstrap.com/.
For example, it has the html file of getting-started page looks like this:
---
layout: default
title: Getting started
slug: getting-started
lead: "An overview of Bootstrap, how to download and use, basic templates and examples, and more."
---
{% include getting-started/download.html %}
{% include getting-started/whats-included.html %}
{% include getting-started/grunt.html %}
{% include getting-started/template.html %}
{% include getting-started/examples.html %}
{% include getting-started/tools.html %}
{% include getting-started/community.html %}
{% include getting-started/disabling-responsiveness.html %}
<!-- Cross link to new migration page -->
<div class="bs-callout bs-callout-info" id="migration">
<h4>Migrating from v2.x to v3.x</h4>
<p>Looking to migrate from an older version of Bootstrap to v3.x? Check out our migration guide.</p>
</div>
{% include getting-started/browser-device-support.html %}
{% include getting-started/third-party-support.html %}
{% include getting-started/accessibility.html %}
{% include getting-started/license.html %}
{% include getting-started/translations.html %}
I know it can be rendered into static site by some kind of template render engine. But how to do it?

How can I use a Jekyll plugin from within a custom plugin?

I'm writing a bit of documentation for a jQuery plugin I authored and want to include functional code snippets in the docs. I can achieve what I'm looking for by doing this:
{% capture snippet %}
$('selector').use_plugin(args);
{% endcapture %}
<script>
$('#snippetTrigger').on('click', function() { {{snippet}} });
</script>
{% highlight javascript %}{{ snippet }}{% endhighlight %}
This seems like a much better job for a short custom plugin with the following syntax:
{% code_snippet snippetTrigger %}
$('selector').use_plugin(args);
{% endcode_snippet %}
which would have output identical to the previous plugin-free code.
The issue I'm having is with the {% highlight %} part. If I just include that in the output from my custom plugin, it just prints it as output. I want it to appropriately highlight the code via Pygments. How can I make my Jekyll plugin use the standard {% highlight %} plugin?

Symfony2 Include in html in Twig

I am developing an application using Symfony2 and twig for templates. I am using a 3 level structure for templates. Base.html.twig, layout.html.twig and childtemplate.html.twig.
The problem is I am trying to include one example.html (common html file) in the next child template by using include but it doesnt work properly. Where can the problem be?
{# src/Anotatzailea/AnotatzaileaBundle/Resources/views/Page/testuaanotatu.html.twig #}
{% extends 'AnotatzaileaAnotatzaileaBundle::layout.html.twig' %}
{% block title %}Testua anotatu{% endblock%}
{% block body %}
{% include "var/www/Symfony/web/example.html" %}
{% endblock %}
Depends on where it's located. Let's say it's in Anotatzailea/AnotatzaileaBundle/Resources/views/example.html.twig; then you would include it like this:
{% include 'AnotatzaileaAnotatzaileaBundle::example.html.twig' %}