Browse Source

Add content and styling to docs page.

Add:
        templates/docs.html
                -Reorganize page structure into a nested-unordered-list tree,
                for the inherent indentation.
                -Add content to each section.

        static/sass/docs.sass
                -Add virtually all of the necessary styling for the docs page.
tags/v1.0^2
Severyn Kozak 10 years ago
parent
commit
912c8e9591
2 changed files with 145 additions and 29 deletions
  1. +39
    -0
      static/sass/docs.sass
  2. +106
    -29
      templates/docs.html

+ 39
- 0
static/sass/docs.sass View File

@@ -0,0 +1,39 @@
@import variables

h1
color: $baseColor1

span
color: $baseColor2

h2, h3
color: $baseColor2 * 0.8

p
line-height: 1.8em

ul
list-style: none
margin-bottom: 2%

li
margin-bottom: 2%

span
&#code
background-color: $baseColor3 * 1.2
font-family: monospace
padding: 5px

&#string
color: $baseColor1
font-family: monospace
font-size: 1.1em

&#title
color: $baseColor1
font-weight: bold

li#sec3 span#gasp
color: $baseColor2 * 0.8
font-style: italic

+ 106
- 29
templates/docs.html View File

@@ -4,38 +4,115 @@
docs
= endblock

= block head
{{ assets.tag("docs.css") }}
= endblock

= block body
<h1>Usage</h1>
<p>
bitshift is a search-engine optimized for source code: beyond supporting searches with the full range of ASCII
symbols, the engine <em>understands</em> code, allowing users to query for metadata, like time of creation/last
modification, programming language, and even symbols like function names and variables. Basic use boils down to
general and advanced searches.

<h2>general search</h2>
<p>
To perform a "general search," simply place your cursor in the search bar on our home page and begin typing; when
you stop typing for a short period of time, we'll automtically execute a query for you. As you scroll down the
results page, the front-end will query our server and seamlessly load more and more results.
</p>

<h2>advanced search</h2>
<p>
General searches, though, are limited. To allow users to make the best of our engine, we created an advanced
search form that allows the creation of complex queries.

<h3>search fields</h3>
<ul>
<li>
<h1><span>&raquo;</span> Usage</h1>
<p>
</p>
<span id="title">bitshift</span> is a search-engine optimized for source code: beyond supporting searches with the full range of ASCII
symbols, the engine <em>understands</em> code, allowing users to query for metadata, like time of creation/last
modification, programming language, and even symbols like function names and variables. Basic use boils down to
general and advanced searches.

<ul>
<li>
<h2>general search</h2>
<p>
To perform a "general search," simply place your cursor in the search bar on our home page and begin
entering text; when you stop typing for a short period of time, we'll automatically execute the query for you.
As you scroll down the results page, new codelets will be seamlessly downloaded from our server and
appended to the end.
</p>
</li>

<li>
<h2>advanced search</h2>
<p>
General searches, though, are limited. To allow users to make the best of our engine, we created an advanced
search form that allows the creation of complex queries with the following specifiers:

<ul>
<li>
<h3>search fields</h3>
<ul id="search-fields">
<li>
<span id="code">languages</span> : The programming languages to search for.
</li>
<li>
<span id="code">authors</span> : Search for code written/modified by a specific person.
</li>
<li>
<span id="code">date last modified</span> : Search for code last modified on a specific date (<span
id="code">mm/dd/yy</span> format).
</li>
<li>
<span id="code">date created</span> : Search for code created on a specific date (<span
id="code">mm/dd/yy</span> format).
</li>
<li>
<span id="code">symbols</span> : Search for specific symbols.
</li>
<li>
<span id="code">functions</span> : Search for functions with specific names.
</li>
<li>
<span id="code">classes</span> : Search for classes with specific names.
</li>
<li>
<span id="code">variables</span> : Search for variables with specific names.
</li>
</ul>

<p>
Each of the search fields allows for numerous values; just separate them with spaces. If you'd like
to search for a multi-word, space-delimited string, on the other hand, enclose it in double quotes.

<h3>search groups</h3>
<p></p>
</p>
</p>
A query for <span id="code">foo bar</span> will search for occurrences of both <span
id="string">"foo"</span> and <span id="string">"bar"</span>, while <span id="code">"foo bar"</span>
will search for occurrences of <span id="string">"foo bar"</span>.
</p>
</li>

<h1>Handwritten Queries</h1>
<p></p>
<li>
<h3>search groups</h3>
<p>
Search groups facilitate even more robust queries: they're like a bunch of individual searches
grouped into one. A user searching for occurrenes of symbol <span id="string">"curses"</span> in the
language <span id="string">"Python"</span>, and <span id="string">"ncurses"</span> in <span
id="string">"C"</span>, won't get away with: <span id="code">symbols: "curses ncurses"</span> and
<span id="code">languages: "Python C"</span>. The engine might return results <span
id="string">"curses"</span> in <span id="string">"C"</span> and <span id="string">"ncurses"</span> in
<span id="string">"Python"</span>!

<h1>Get involved</h1>
<p></p>
To work around that, you can use two search groups: one for <span id="string">"curses"</span> in
<span id="string">"Python"</span>, and another for <span id="string">"curses"</span> in <span
id="string">"C"</span>. <span id="title">bitshift</span> will return the union of both sets of search results.
</p>
</li>
</ul>
</p>
</li>
</ul>
</p>
</li>

<li>
<h1><span>&raquo;</span> Handwritten Queries</h1>
<p>
No content, yet.
</p>
</li>

<li id="sec3">
<h1><span>&raquo;</span> Get involved</h1>
<p>
<span id="title">bitshift</span> is <span id="gasp">(gasp)</span> open-source! The project is hosted on
<a href="https://github.com/earwig/bitshift">GitHub</a>; feel free to file an issue or submit a pull request!
</p>
</li>
</ul>
= endblock

Loading…
Cancel
Save