Eureka 🌲

Eureka is a progressively enhanced flexible media browser. Connected to your media sources through a REST API, this accessible web component allows users to browse media sources, upload files, and choose media items.

🤗 Try the demo.

With eureka.js users will be saying "I found it!" in no time. — @mrktps

💬 Discuss

Join the conversation in our public Gitter chat room.

📚 Wiki

Don't forget to browse the Wiki for more information on the REST API, patterns, screenshots and more.

🍻 Support

The Eureka Media Browser and supporting resources are provided free as in beer.
Gratuities are accepted through Square Cash.

🏋️‍♀️ Weigh In

The Eureka Media Browser is pretty lightweight all things considered.

| Asset | Weight (GZIP minified) | ------------- |:-------------:| | CSS Stylesheet | 7.83kB | | SVG Icons | 7.88kB | | React Component | 75.83kB |

Have a gander at our Webpack Visualizer 👀 .

📄 HTML–first

As a progressively enhanced web component, Eureka is functional HTML–first. This means that technically anything other than the initial HTML layer is a non–critical enhancement. Critical features supported by the HTML layer, such as browse, upload, and choose, are universally supported and do not depend on modern browsers, CSS styles, or script.

😲 Take a gander at Eureka in the nued by waking our incredibly lightweight raw HTML example.

We also encourage you to temporarily disable JavaScript in your browser and party with Eureka like it's 1999.

Powered By 🚀

Progressively Enhanced from HTML components
All–new Virtual DOM powered by React/Redux
Node Server Side Rendering
Node testing server

Highlights 🖋

Configurable Rest API endpoints
Browse multiple media sources for images
Drag and Drop Upload Support
Flexible Layout
Responsive Design
Save Data with responsive thumbnails
Configurable Styles via CSS Variables
Accessible
- supports mobile and touch devices
- supports .no-js via server side rendering
- ARIA & Keyboard Support
- high contrast themes

🚥 Features

The level of isomorphism between the client and server side one can achieve with Node is unmatched. Eureka takes advantage of this unique strength of Node by, through an isomorphic server and standard synchronous forms, achieving full support for critical features.

No features rely solely on sight or the use of a mouse. Keyboard use is supported. Accommodations are taken for users that benefit from high contrast themes. Visually hidden text is used to convey aspects of the interface that are otherwise visually implied to screen readers and assistive technology.

The semantic HTML layer remains usable even absent of style as pure HTML.

<table> <caption style="text-align:center">Support of features against browser environments</caption> <thead> <tr> <th>Feature</th> <th><code>.no-js</code></th> <th><code>< IE 9</code></th> <th>Chrome</th> <th>Safari</th> <th>Firefox</th> <th>IE 11</th> <th>Edge</th> </tr> </thead> <tbody> <tr> <td>Upload multiple files</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> </tr> <tr> <td>Browse directories</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> </tr> <tr> <td>Choose a media item</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> </tr> <tr> <td>Keyboard Support</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> </tr> <tr> <td>ARIA Support</td> <td align="center">✅</td> <td align="center">✳️</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> </tr> <tr> <td>WCAG Level AA</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> </tr> <tr> <td>Internationalization</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> </tr> <tr> <td>Download Item</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> </tr> <tr> <td>Choose Multiple Items</td> <td align="center">❌</td> <td align="center">❌</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> </tr> <tr> <td>Delete Multiple Items</td> <td align="center">❌</td> <td align="center">❌</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> </tr> <tr> <td>Keyboard Shortcuts</td> <td align="center">❌</td> <td align="center">❌</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> <td align="center">✅</td> </tr> <tr> <td>Crop Images</td> <td align="center">❌<

Eureka

Install / Use

README