Components Website Restructure and Functionality

Owned by Jonathan Hung
Last updated: Mar 08, 2011Version comment
3 min read

Structure

  • Infusion: description of infusion, components, and core modules. Link to all components and core modules.
    • Component Page - Inline Edit: Demo, description, code snippits and brief how-to, links to documentation, links to feature demos.
    • Component Page - Pager
    • Component Page - ..
    • Core Page - Framework
    • Core Page - FSS

Note: the structure of pages is similar to that seen in Builder v2.0.

/* Core pages like for Framework and FSS will be similar to a component page.

The following is an early draft and is saved here as reference.

Download the Freemind Mindmap

Infusion Parent Page

  • Description
    • Flexibility
    • Accessibility
    • Inclusive Design
    • Plays nice
  • Current release
    • Key highlights
    • Get it (link to Download page)
  • List and links to all Components
  • List and links to all Core and Framework components

External Links

  • Link: Infusion Documentation - docs.fluidinfusion.org/
  • Link: Infusion Developer Guide
  • Accessibility
    • Link: "How do I make ... accessible?" on docs website
    • includes: handbook, principles, a11y plugin, resource links, etc. (question)
    • (question) Is accessibility sibling to the Component pages. What does this sibling page look like?
  • Link: How do I use Infusion components.
  • Link: How do I create a component.

Individual Component Pages

Pages for:

  • Inline Edit
  • Pager
  • Reorderer
  • UI Options
  • FSS
  • Progress
  • Uploader
  • Framework*

* Framework includes Renderer, IoC, PE, a11y, events, DOM binder, model transformation, and more. See http://wiki.fluidproject.org/download/attachments/22250245/architecture-framework.png?version=2&modificationDate=1297806424013

Content for Component Page

  • Description
  • Key features
    • Link to complete list of features
  • Status
    • Progress Bar
    • Preview / Production status
    • Features to be implemented
  • "Marketing Demo"
    • Demo Features (what's being shown, and what isn't)
    • Instructions
    • Source code: CSS, HTML, JS
    • Implementation details / overview (code snippits, short how-tos)
  • Real-world examples:
    • who is using it?
    • Links to actual installations
    • screen captures of installations

External Links

  • Link: "How to use Infusion component" (general topic).
  • Link: "How do I use (component)" documentation landing page for specific component.
    • Overview and gateway to "How do I ..." information with the functional examples.
    • General description about the component on how it's integrated and instatiated.
    • More textbook style, similar to current API docs (description at top, with technical information)
    • Sublinks on landing page to more specific "How do I..." information and API docs.
    • Will have list of functions and supported events with links to detailed API page for that item
  • Developer Guide

Demo Functionality

  • Maximize / minimize demo.
    • Approach 1: one demo that fits in both embedded in the component information page and stand-alone.
    • Approach 2: two demos of the same thing - one optimized to fit the component information page, and one optimized for full-screen. jQuery uses this approach.
  • Show / hide code panels: JS, HTML, and CSS.
    • Reveal some, or all.
  • Reorderable code panels
  • Resizable code panels
  • Code line numbering
  • Code syntax highlighting
  • Code execution highlighting
  • Select all code in a panel for purposes of copying.

Component Page in Technical Docs

New Content

  • Archive of new features for each release (so you can compare between releases)
  • Proposed future functionality
  • Index of Feature Demos (link with Feature List)
  • Index of Marketing Demos
  • Multiple versions of demos:
    • Current release
    • Demos for older releases
    • Current snapshot

New Functionality

  • Archive of improvements between releases:
    • makes it easy to see a cumulative list of features between releases (i.e. see changes since Infusion 1.2 to 1.3.1)
  • Feature and Marketing Demo archive
    • ability to run older version of demos for testing purposes.
    • Can this be integrated with git somehow?

Universal functionality (site-wide functions)

  • Request a feature, report a bug
  • Share via twitter, email
  • Subscribe to twitter, RSS, or email.
  • Download:
    • Releases: Current, Past, nightly, current dev
    • Packaging: Minified or not.
    • Changelogs and Feature Highlights