Code Monkey home page Code Monkey logo

developers's Introduction

Stellar Developers

Stellar developer portal site generator.

This uses gulp and metalsmith (plus a heap of plugins) to generate the site.

Dependencies

To build this project, you must have the following dependencies installed:

  • node 10.16.3
  • npm
  • yarn

Installation

git clone https://github.com/stellar/developers # or [email protected]:stellar/developers.git
npm install --no-shrinkwrap
yarn install

(Note the no-shrinkwrap option is because of an issue in metalsmith-concat: aymericbeaumet/metalsmith-concat#22)

Docs repository cloning

The developers site tool generates content pulled in from other repos. These repositories are configured in repos.json and stored in repos/. To clone all the required repositories, run:

node_modules/.bin/gulp git:clone

Keeping these repositories up to date is the responsibility of the person using this tool. Here is a simple bash command you can use to do a git pull on all the repos.

for dir in ./repos/*;
do
  if [[ -d $dir ]]; then
    ( echo; cd "$dir"; pwd; git pull );
  fi;
done

Development

To generate the static site, run the following inside your repo containing this folder:

node_modules/.bin/gulp # or just `gulp` if you have it installed globally or have path set up

To run a web server and view the site in a browser:

node_modules/.bin/gulp watch serve

This will also automatically rebuild the site when edits are made. (To serve without rebuilding, drop the watch argument.)

By default, the site is served under the developers/ subfolder. This is to reduce the amount of bugs when this site is deployed to https://www.stellar.org/developers/. This can be changed by passing a custom baseUrl to the gulp build task like so: gulp --baseUrl="/" or gulp build --baseUrl="/".

When working on the site, you can also use the --debug option to generate output that is easier to debug in the browser (it includes things like sourcemaps).

Browser JavaScript

Browser JavaScript files live in src/js. vendor.js is generated from bower_components and not checked in to the repository.

To add a new browser JS file, add it to src/js and update the metalsmith concat step by adding your new file to the list. The list of JS files is order sensitive.

Development conventions

  • Use yaml especially for front matter since Github can nicely display markdown files with this
  • 2 spaces everywhere

Writing Examples

The developer portal for stellar includes a system for displaying code-samples alongside the documentation for horizon endpoints. To recognize and process these examples, you must write them in a particular way:

  1. Any markdown (.md) file in a project that has a path prefix of /docs/horizon-examples will be considered to be an example file.
  2. The example file must include a language attribute in it's front matter. Valid values for this attribute are curl, ruby, javascript, and go
  3. The file's basename must match the basename of the horizon endpoint to which it is associated. For example docs/horizon-examples/accounts-all.md will be associated with the "accounts-all" horizon endpoint.

By following the rules above, your example file should get recognized by the build pipeline and slotted into the appropriate output file.

Client Data

Sometimes, we may want to pass frontmatter data to js scripts on the page. Documents can specify "client data" in front matter. The term client refers to the browser. The clientData key in the front matter of a document will be converted to JSON and put in the web page as a js variable window.clientData. The clientData must be an object in order to successfully appear in the html.

Troubleshooting

No handlebars file

[00:49:37] Error: ENOENT: no such file or directory, open '/app/layouts/plans.handlebars'

This happens when you add a new directory in a docs folder in one of the repos that stellar/developers processes. If you don't want any of the docs in the directory to be included in the developers site, you can add your directory to the excluded_dirs in gulp/enhance.js:addSection.

Contributing

Please read the contributing guide to learn more about how to contribute to the developer portal. For contributions to docs, please put contributions in their respective repositories.

License

This project is licensed under Apache License Version 2.0. For more information, refer to the LICENSE.txt file.

developers's People

Contributors

abuiles avatar bartekn avatar bscharm avatar charlie-wasp avatar christian-rogobete avatar ire-and-curses avatar irisli avatar jacekn avatar jedmccaleb avatar jeesunikim avatar jraedisch avatar kylemccollom avatar mr0grog avatar nikhilsaraf avatar nullstyle avatar overcat avatar rice2000 avatar satyamz avatar synesso avatar theaeolianmachine avatar tomquisel avatar vcarl avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

developers's Issues

Add links to headers

Ideally, show a hyperlink icon when user "hovers" on a header, like on GitHub:

link

Enable tables and code examples to "pop" out of content container

Currently

image

Ideal

image

How

After playing with this for several hours I could not find a pure css way that consistently works on all edgecases (nesting, indentation).

I think the best way would be to use javascript to do this. Adjust the sizes on load and on resize.

Support for arbitrary examples as "first class citizens" in the endpoint reference sidebar

Proposal: Let arbitrary example types occupy a space in the example

This would let multiple examples for a single language to exist on the bar. This could also allow us to introduce more complex examples (like multiple examples) with accompanying explanation text.

Quick example mockup

screen shot 2016-02-19 at 4 27 27 pm

## Why

There is a disparity between streaming examples and "regular" language examples. A language can only have at most one code example.

In accounts-all, the streaming example is displayed as if it were content:

image

While the other examples get to occupy a tab:

image

Better way to reference other repos

We should have a way to lock other repos to particular commits or branches—so we don’t build docs for pre-production features, etc. Also to make it easier to keep everything up-to-date and in-sync.

  • Submodules?
  • NPM?
  • Manually by referencing a commit or branch in repos.json and having better gulp tasks?

Include example source from markdown files

I noticed that some of examples in developer portal are not working (again) because of API changes. To solve this problem I want to add examples tests to our JS SDK. Instead of copying updated examples to markdown files after each edit it would be great to be able to include other file (example file) from markdown files.

So for example:

## Building requests
js-stellar-sdk uses the [Builder pattern](https://en.wikipedia.org/wiki/Builder_pattern) to create the requests to send
to Horizon. Starting with a [server](../reference/server.md) object, you can chain methods together to generate a query.
(See the [Horizon reference](https://www.stellar.org/developers/reference/) documentation for what methods are possible.)
```js
var StellarSdk = require('stellar-sdk')
var server = new StellarSdk.Server('https://horizon-testnet.stellar.org');
// get a list of transactions that occurred in ledger 1400
server.transactions()
    .forLedger(1400)
    .call().then(function(r){ console.log(r); });

// get a list of transactions submitted by a particular account
server.transactions()
    .forAccount('GASOCNHNNLYFNMDJYQ3XFMI7BYHIOCFW3GJEOWRPEGK2TDPGTG2E5EDW')
    .call().then(function(r){ console.log(r); });
``'

Would become something like this:

## Building requests
js-stellar-sdk uses the [Builder pattern](https://en.wikipedia.org/wiki/Builder_pattern) to create the requests to send
to Horizon. Starting with a [server](../reference/server.md) object, you can chain methods together to generate a query.
(See the [Horizon reference](https://www.stellar.org/developers/reference/) documentation for what methods are possible.)
```js
@@include ../examples/transactions.js@@
``'

Fix gap in footer

image

The Terms of Service and Privacy Policy links should be aligned to the right.

This can be done by using flex-direction: row-reverse and margin left on link items (as opposed to right).

Stellar rocket favicon

Implement the same favicon as on the www.stellar.org/ site.

You can view the source at the Stellar homepage:

<!-- favicon support is a bit shoddy -->
<link rel="apple-touch-icon" sizes="144x144" href="//www.stellar.org/wp-content/themes/stellar/favicon/rocket-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="//www.stellar.org/wp-content/themes/stellar/favicon/rocket-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="//www.stellar.org/wp-content/themes/stellar/favicon/rocket-180x180.png">
<link rel="icon" type="image/png" href="//www.stellar.org/wp-content/themes/stellar/favicon/rocket-96x96.png" sizes="96x96">
<meta name="msapplication-TileImage" content="https://www.stellar.org/wp-content/themes/stellar/favicon/rocket-144x144.png">

The developers site should host the files (as opposed to hotlinking to stellar.org/wp-content).

Standalone build mode for offline viewing

Right now, the build process assumes that the build will be hosted online.

We can consider making a mode that compiles the developers site into an more offline-friendly archive. It can compressed well (zip, tar.gz, bzip2) to save bandwidth. Then, we can have weekly builds on the releases page. This way, people connected to free wifi can download the archive when bandwidth is cheap for them and view offline without using extra bandwidth.

Jenkins builds broken

It looks like changes to JS SDK broke builds:

ERROR: Unable to find the source file or directory /app/repos/js-stellar-sdk/libdocs

[12:50:29] 'generate-sdk-symbols' errored after 1.33 min
[12:50:29] Error: ERROR: Unable to find the source file or directory /app/repos/js-stellar-sdk/libdocs

    at formatError (/usr/local/lib/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^3.7.0/format-error.js:20:10)
    at Gulp.<anonymous> (/usr/local/lib/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^3.7.0/log/events.js:41:15)
    at emitOne (events.js:101:20)
    at Gulp.emit (events.js:188:7)
    at Gulp.Orchestrator._emitTaskDone (/app/node_modules/orchestrator/index.js:264:8)
    at /app/node_modules/orchestrator/index.js:275:23
    at finish (/app/node_modules/orchestrator/lib/runTask.js:21:8)
    at cb (/app/node_modules/orchestrator/lib/runTask.js:29:3)
    at /app/gulpfile.babel.js:97:14
    at ChildProcess.<anonymous> (/app/gulp/code-symbol-tags.js:41:7)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:219:12)
[12:50:29] 'src' errored after 1.4 min

@rice2000 @theaeolianmachine you may want to check it out.

Sort sidebar alphabetically

Globs don't ensure that the result is sorted alphabetically. Some things are sorted alphabetically but is grouped with other files of the same type.

Here is an example:
image

In this example, pdf files and html files are grouped separately.

Build broken

It's currently impossible to build a project, probably broken since: #88.

[12:01:41] 'build' errored after 650 ms
[12:01:41] Error: ENOENT: no such file or directory, stat '/Users/bartek/developers/src/horizon'
    at Error (native)

Looks like src/horizon symlink destination doesn't exist:

horizon -> ../repos/go/services/horizon/docs

I would fix this but I'm not sure what was a decision around horizon docs when moving it to monorepo (stellar/go#93).

Non-categorized pages end up on on the site without styling

A user may go to a stellar-core page with the url https://www.stellar.org/developers/stellar-core/learn/admin.html. Out of curiosity, the user deletes the learn/admin.html and gets to https://www.stellar.org/developers/stellar-core/. However, that root stellar-core page looks like this:

image

Why?

This happens because all pages on the developer site is supposed to be under one of the four categories: Learn, Reference, Tools, and Beyond Code. It was decided a while back that some files did not need to be put on the developers site and thus were not categorized (not in a folder with the above name).


There are two solutions

Option 1: Exclude non-categorized files in build process

In the gulp process, instead of symlinking to the project docs page, we can symlink to these specific four folders.

Option 2: Include these files by categorizing them

This would involve moving the files from the docs folder root to their specific folders.

Gulp process "watching"

When in development, it would be nice to have gulp somehow reload the browser when changes to the site are made.

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.