Giter VIP home page Giter VIP logo

beakerx-www's Introduction

BeakerX Web Page

Installation

This site is rendered by Jekyll, so you will need some dependencies to run it.

bundle install

Once all dependencies are properly installed, run Jekyll.

bundle exec jekyll serve

This will render the site at http://127.0.0.1:4000

Development

Adding data

Text, images, icons and links are defined in yaml files in the _data directory. Each yaml file represents a region of the site.

To insert an image or icon

  • SVG files are located in the _includes/_icons directory.
  • Rasterized images are located in the static/img directory.
  • After adding or removing an image or icon file, register where they belong on the page using the yaml files in the _data directory.
  • Rebuild the code by running Jekyll.

Styling the site

  • While running the Jekyll server, edit the scss files in the _sass directory.
  • ⚠️ Do not write changes directly on css files. They will be overwritten by the content in the scss files.

Changing the site's layout

  • The template files of each region are in the includes directory.
  • Jekyll uses Liquid as its templating language.

Adding data to subpages

  • Subpages live in the _projects directory, each project containing a subdirectory with the project's name.
  • The subdirectory must contain an index.md page as the landing page for the project.
  • The data is written in the kramdown flavor or markdown.
  • The files must include front matter to be rendered.

Required page front matter

---
project: project-name
title: page-title
layout: page
order: 1
---

project

The name's project will group all files belonging to the same project in the navigation bar. It will also populate the header with the project's data located in _data/projects.yaml

title

This is the name of the page, as it will display on the navigation bar.

layout

The "page" layout is the only one currently available for subpages. The page order will determine the sub-layout.

order

The page order in the navigation bar. "Order: 1" is reserved for the landing page and has an unique layout.

Project header data

title

Name of project. Must match with the name on the project's markdown page's front matter. It's case sensitive. This entry is not optional.

text

The project's description.

github

Parameters github.user and github.project must match a github repository to display its stars and forks.

icon

Name of project's icon svg file, found in _includes/_icons.

twitter

The twitter handle associated with the project.

header

Short information and instructions on the header's sidebar. It's divided in sections.

Structure of header data area
header:
  - section:
      title: section title
      icon: section-icon.svg
      content: > #
        section content text
title

Title of section.

icon

Name of icon file to be on the left of the title.

content

An area that allows some markdown to indicate hyperlinks, buttons or a line of code.

File Tree

.
├── _config.yml
├── _data
|   ├── contributions.yaml
|   ├── cta.yaml
|   └── ...
├── _includes
|   ├── _home
|   |   ├─ contributions.html
|   |   └─ ...
|   ├── _icons
|   |   ├─ icon-camera.svg
|   |   ├─ icon-cart.svg
|   |   └─ ...
|   ├── _pages
|   |   └─ ...
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── home.html
|   └── page.html
├── _plugins
|   └── ...
├── _projects
|   ├── project-name
|   |   ├─ documentation.md
|   |   ├─ faq.md
|   |   └─ index.md
|   └── ...
├── _sass
|   ├── base
|   |   ├─ __base.scss
|   |   └─ ...
|   ├── includes
|   |   ├─ __includes.scss
|   |   └─ ...
|   └── vendor
|       └─ ...
├── _site
├── static
|   ├── css
|   ├── img
|   |   ├─ favicon.ico
|   |   ├─ stats-1.png
|   |   └─ ...
|   └── js
├── _config.yml
├── Gemfile
├── Gemfile.lock
└── index.html

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.