Giter VIP home page Giter VIP logo

loopdocs's Introduction

Loop Docs

This is the repo that contains the source files for the Loop Docs site.

Contributing

The easy way:

  • To suggest changes, please review Issues. Add your comment if an Issue is already open, otherwise, add a new Issue.
  • If it is a simple typo or wording change, follow the instructions in this video to submit a pull request the easy way.

If it is a more substantive change and you want to make a fork and provide pull requests, please keep reading.

Previewing Changes

To preview your work as you edit you must set up two python packages that are used to create this site using MkDocs. They are mkdocs, and mkdocs-bootswatch.

Review Properly Installing Python for help getting Python installed. MkDocs works with Python 2.7, 3.3-3.6, and pypy.

  • Install python modules
$ cd <loopdocs project location>
$ pip install -r requirements.txt
  • Run mkdocs server locally
$ cd <loopdocs project location>
$ mkdocs serve
  • Preview docs in browser. Most changes will update automatically as you edit. Configuration and navigation changes will require restarting the mkdocs server.
  • Optionally, you can share the preview with others by uploading them to your repository's gh-pages branch
$ mkdocs gh-deploy

Note that these two branch names: working-docs and master will automatically be published to your personal repository gh-pages by github actions when they are pushed to the github server.

Conventions

Links

Links should be written like this:

In the same directory: Click here for [Update FAQs](update-faqs.md)

In a directory below the current page: Click here for [Update FAQs](faqs/update-faqs.md)

In a directory "outside" the current directory: Click here for [Update FAQs](../faqs/update-faqs.md)

Like above, but linking directly to a heading/anchor in update-faqs.md:

Click here for [When Should You Update?](../faqs/update-faqs.md#when-should-you-update)

Notice about mkdocs: "Using absolute paths with links is not officially supported. Relative paths are adjusted by MkDocs to ensure they are always relative to the page. Absolute paths are not modified at all. This means that your links using absolute paths might work fine in your local environment but they might break once you deploy them to your production server."

Do NOT use a link starts that with a '/': Click here for [Update FAQs](/faqs/update-faqs.md)

Images

The conventions for linking to images is the same as linking to pages as described above.

New images should be placed in the "img" directory just below the md-file.

Example of correct link to image is [alt-text](relative path/image-name).

![iPhone](img/phones.png)

With images it is possible to add extra attributes like 'width' and 'center'.

![iPhone](img/phones.png){width="300"}

This will get rendered to this: <img alt="iPhone" src="img/phones.png" width="300">

You can also center a image, by adding '{align="center"}' on a new line
just below the paragraph you want to center:

![Eros](img/eros.png){width="750"}
{align="center"}

This will get rendered to this:
<p align="center">
    <img alt="Eros" src="../img/eros.png" width="750" />
</p>

A note about images in tables. Use html on the first line that indicates the table. For example, in displays.md there are many icons with descriptions to the right. This format provides appropriate views on both desktop and mobile.

For no header row, replace ||| with:

| <div style="width:72px"></div> ||
|---|---|
|![icon alt-text ](img/icon)|text with description|

To add header row, use:

| <div style="width:72px">Column 1</div> | Column 2 |

Admonitions and CSS

Now using the standard set of admonitions and CSS styles that come with the Material theme.

The admonitions in use are: First 3 boxes for Build Pages:

  • info
  • abstract
  • question

To get a warning triangle, use warning

To get a red zag icon, use danger

To get a pencil icon, use note

Admonition is a markdown extension that enables formatted blocks for visually calling out information.

The markdown syntax used by loopdocs is:

!!! keyword ""
    If a blank title is provided, no title is applied.
    Every indented line is included in the "box" created by this admonition

!!! keyword "Title String"
    If an explicit title string is provided, that is used as the title.
    The displayed title string matches the capitalization provided.

    Every indented line is included in the "box" created by this admonition

Copy Button

The copy button is built into the Material theme for every code block.

loopdocs's People

Contributors

marionbarker avatar kdisimone avatar liammo007 avatar ebouchut avatar ps2 avatar lytrix avatar dybs avatar nightfoxy avatar bewest avatar bfaloona avatar dspig avatar joerg-schoemer avatar spazholio avatar jonfawcett avatar cfaagaard avatar mikeplante1 avatar novalegra avatar cmdelano avatar mikebash avatar bjornoleh avatar sefish99 avatar sdneufer avatar parenthetic avatar nicogh avatar milfam6 avatar metahgva avatar babybluesky1 avatar traceybergfulton avatar pbackstrom avatar ryanpacker avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.