stellar-deprecated/stories

Stellar Stories

Stellar Stories is a collection of graphic explainers used to help people learn more about Stellar and what it can do.

Check out the latest graphic novel: https://www.stellar.org/stories/adventures-in-galactic-consensus-chapter-1/

Getting started

#0. Install node.js and npm
#1. Clone this repo
git clone https://www.github.com/stellar/stories/

#2. Install gulp globally to use the `gulp` command
npm install --global gulp

#3. Run npm install on both stories and storyteller.js
npm install
cd storyteller
npm install
cd ..

#4. Use the gulp develop task to build, watch, and run a development server on [localhost:8000](http://localhost:8000)
gulp develop

License

Story-app and storyteller.js is released under the Apache License 2.0. For more information, see the LICENSE.txt file.

Images and text inside content folder are copyright © 2015 Stellar Development Foundation All Rights Reserved.

stories's Issues

Figure out fade transition performance

Opacity fade slows down Mac Desktop Safari and forcing gpu acceleration with translateZ greatly improves performance. However, this very fix crashes iOs.

stuff due for launch

• correctly sized viewport color
• non-scaled slides (so images can be 1:1 pixel ratio rendered)
• nav button color (on dark backgrounds) background: rgba(255,255,255, 0.8)
• last slide html
• bottom spacing
• update to new slide images
• preload images so there's no weird flash
• firefox nav bar broken
• share page flexbox prefixing (broken)
• share pane add padding
• fix facebook og:image (#23)
• remove prefixing analytics
• Hash handler on load #18
• Analytics start on focus
• make sure url is correct on share page
• fix viewport sizing (for constrained by width)
• link to summary (add to homepage)

---

Tabled items:

• moved to #15

Added by @bartekn:

• Update OG tags #23 (sorry duplicate)
• Button and link in the last slide does not work
• Can't close share box in mobile chrome

Dependent on others

• upload final graphic novel
• update landing page copy w jessica

css prefixer

Through gulp (maybe using rework?), turn

transform-origin: 0 0;

into

-webkit-transform-origin: 0 0;
        transform-origin: 0 0;

build/deploy pipeline for architecture 0.2

This will build out the gulp pipeline for compiling the files into something usable

• gulp task for compiling stories
• gulp task for copying assets into dist
• gulp task for inlining config.json
• gulp task for compiling css into assets
• gulp connect
• reorganize scss & gulp tasks for it
• reorganize js modules & gulp tasks for it
• gulp task for compiling js lib and js modules into assets
• gulp task for extracting config into title and meta

storyteller control-dock navigation styling

• progress bar
  • option color
• grid button
• full screen button

implement new UI for hayashi graphic novel

These UI elements will all be unstyled

• slide-cards rudimentary
• control bar dock
  • progress bar
  • grid view button
  • full screen button
• clickable progress bar
• fluid viewport
• rudimentary fitting slide-cards
  • do math/brainstorm
  • action: apply the transforms
  • framework for fitting cards
  • case: check for bounding
  • case: calculate n number of cards
  • calculate: position for array of cards
• mobile swiping
  • research/design how mobile interaction will work
  • hammer.js/alts research
  • live dragging
    • positioning based on parent container
    • ability to move the whole container
  • snap to closest set of slides
  • css transition ease for snap
  • rectify bounds when on a non-modulus==0 page
• hash handler (url hash to save position)
  • no browser history/web api set history
  • unlisten hash when setting
  • hash listening and publishing storyline:change

hash handler should check hash on load

Right now, loading http://localhost:3000/hayashi-introduction/#13 does not start at said tab

firefox: Clicking on nav bar doesn't work

"percent must be a number. got: NaN" core.js:38:8
"target slide is same as current slide" core.js:56:6

Share button

Pops up modal with link and simple embed code

Open graph from config.json

Gulp process

Things will eventually get more complicated than compass watch and it will be nice to streamline everything into a gulp process (with other features such as a gulp development server and live reloading).

Alternatives to cdnjs for serving vendor js

For performance improvements, we can use npm to get all the client side libraries and then pack it into one js file.

Meta description tag from config.json

So that people Googling the story can see a description.

Remove old 0.0 interfaces from storyteller; remove "this"

Many modules obtain this from tools since logic is still trapped inside storyteller.js.

Improves the cleanliness of old modules.

SEO optimization

Right now, things are dynamic and not very good for SEO with hardcoded author meta tags.

hayashi-introduction ux improvements (nice to have)

Current improvement priority list:

• fix progressBar click location
• dragging progressBar
• full screen functionality (with iframe breaking)

---

Tabled from launch

• title bar (tabled)
• don't load 7MB of data if embedded but user not interacting (tabled)
• resync left/right buttons with swiping (rectifying problem)

---

• mobile
  • performance optimization (hide slides)
  • mobile (iOs) chrome hiding
  • detection of header bar showing
  • better calculations for flick/momentum and implementation using requestAnimationFrame
  • prevent vertical scrolling (touch-action)
  • swipe tooltip
  • tap hideable UI for touch enabled devices
• share button: click to highlight
• share button: esc to exit
• mouse held down for bottom progressbar
• indication of progressbar landing target (bar-max)
• extras
  • full screen from hayashi page (cross iframe)
  • cards grid view

Slide url hash/hash jump

A hash handler to update the page hash when navigating to another page. Also to attempt to change slides when hash changes.

Update Open Graph tags

We need to update Open Graph tags and thumbnail.

Print css stylesheet

Would someone ever want to print out the slideshow? Maybe. We can do a basic css print stylesheet for it.

Embeddable mode

Right now, the code assumes that the whole page (including html and body tags) belongs to it and this will only be embeddable into other pages through iframes.

With embeddable mode, it can be natively integrated into another page (although not sure why we would need this).

Implement architecture for 0.2

This is to further build out the storyteller 0.2 to support the new module design while still using the same module loader format.

This issue is mainly for storyteller.js

• SystemJS modules (no SystemJS today. just using the old 0.1 modules system)
• include relevant files in story-app.html f539e63
• get old modules to work again
• new entry model (tools)
• port things over to entry model (tools)
• storyline module
• clean out old cruft in storyteller.js; improve modularization (navigation)
• move over to using events more
• UI layering assigning (overlay-ui, underlay-ui)
• rename code stories -> storyteller
• correctly scope the css to be module specific
• create docs for events and interface conventions