Giter Club home page Giter Club logo

crosswalk-website's Introduction

Introduction

This repository contains the source code for the Crosswalk website. The live website is generated from this code.

Any bugs for the website should be logged on the Crosswalk Jira, under the Website component.

Pull requests for the website should be submitted via github.

This document gives an overview of the source and how to build the project on your system.

Building the project

This static site for Crosswalk is built with:

  • Node.js
  • Harp, the static web server with build-in preprocessing
  • KSS, which creates the styleguide

First, install Node.js. Then, run the following commands:

# Install Harp. You may need to preface this command with `sudo`
npm install --global harp

# Clone this project from GitHub
git clone https://github.com/crosswalk-project/crosswalk-website.git

# Install the project’s dependencies
cd crosswalk-website/
npm install

# Serve the project
harp server

# The project is now available at http://localhost:9000

Create static web content for production

Harp can be used to create static web content. This is the content that the current website uses.

Build the Styleguide

The styleguide should be created first. The markup and CSS modules are documented in a Styleguide. It’s comparable to a miniature version of the documentation for Bootstrap, where each module has an example and the accompanying code.

To build the Styleguide, run the following commands:

# Install dependencies
npm install -g kss

# Build the Styleguide
npm run styleguide

Compile and generate static content

This site has been built to take advantage of Harp’s niceties, so the web server should:

  • Create clean URLs by rewriting, for example, about.html to about/
  • Allow absolute paths from/
harp compile

The results are placed in "www" directory and can be viewed on your local system with apache server by simply setting DocumentRoot <path to www directory> in the apache configuration file.

Adding Blog Posts

The Crosswalk blog accepts static posts written in Markdown. If your post was called “Meet Crosswalk”, create the file meet-crosswalk.md in public/blog/. Add your post’s metadata in public/blog/_data.json. It will probably look something like this:

"meet-crosswalk": {
  "title": "Meet Crosswalk",
  "date": "2014-10-16T12:00",
  "author": "Annie Person"
},

If you’d like, you can also include a path to a large “Hero” image for the blog post:

"meet-crosswalk": {
  "title": "Meet Crosswalk",
  "date": "2014-10-16T12:00",
  "author": "Annie Person",
  "hero": "/assets/illustrations/my-hero-image.png"
},

Adding Remote Blog Posts

If you are linking to a remote post rather than a local post—for example, a post on the Chromium blog about Crosswalk—you only need to edit the public/blog/_data.json file. The key, in this case chrome-apps-for-mobile, must be unique, but the url will be what’s used to link to the external post.

"chrome-apps-for-mobile": {
  "title": "Chrome Apps for Mobile: Now with a faster dev workflow and a modern WebView",
  "date": "2014-09-22T09:00",
  "author": "Michal Mocny",
  "url": "http://blog.chromium.org/2014/09/now-with-faster-dev-workflow-and-modern.html",
  "desc": "…now you have a way to leverage the latest Chromium WebView on any device running Android versions back to Ice Cream Sandwich by bundling your Chrome App with an embeddable Chromium WebView, provided by the Crosswalk open source project."
},

crosswalk-website's People

Contributors

townxelliot avatar bspencer avatar jketreno avatar rakuco avatar darktears avatar kennethormandy avatar fujunwei avatar ibelem avatar xiuqijix avatar indie avatar mshaver avatar junmin-zhu avatar tinazhao avatar yugang avatar astojilj avatar jinbang avatar hujiajie avatar gvancuts avatar pwnall avatar sqliu avatar poussa avatar rafucater avatar mibamur avatar seanlong avatar majorbreakfast avatar ivan avatar freedomofkeima avatar srinathh avatar donnawudongxia avatar deqing avatar

Watchers

James Cloos avatar  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.