npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

simpla

v3.0.1

Published

<p align="center"> <a href="https://www.simpla.io"> <img src="https://cdn.simpla.io/img/logo/logo-wordmark.png" alt="Simpla" width="300"> </a> </p>

Downloads

134

Readme

Simpla is an open, modular, frontend content framework built on Web Components.

Create dynamic content with HTML and edit it inline. Ditch the server and use Github as your backend. Push everything to static a CDN. Integrate into any stack instantly. Assemble your own lightweight CMS.

<!-- Block of editable richtext -->
<simpla-text path="/text"></simpla-text>

<!-- An editable image -->
<img is="simpla-img" path="/img">

<!-- Dynamic collection -->
<simpla-collection path="/gallery" as="photo">
  <template>
    <img is="simpla-img" path="/gallery/[photo]/img">
    <simpla-text path="/gallery/[photo]/caption"></simpla-text>
  </template>
</simpla-collection>

Installation

Simpla is available on NPM and Unpkg as simpla.

npm i simpla

Import the core library and an OAuth adapter, and call Simpla.init

// Import Simpla and OAuth adapter
import Simpla from 'simpla';
import SimplaNetlify from 'simpla/adapters/netlify';

// Init Simpla
Simpla.init({
  /**
   * Github Repo
   * Repository where content will be stored (in a '_content' folder)
   */
  repo: 'username/repo',

  /**
   * Auth adapter
   * Used to authenticate users with Github from your site
   */
  auth: new SimplaNetlify({ site: 'mysite' }),

  /**
   * Public content source (optional)
   * Public URL of your content, defaults to fetching directly from GitHub
   * Push your content to a CDN like Netlify in production
   */
  source: window.location.origin
});

// Add Simpla to window global, for components to use
window.Simpla = Simpla;

Simpla and its adapters export UMD modules, so you can also link to them with <script> tags and use the globals directly.

Simpla uses web components to manage content, the library itself is just a tiny (~5kb) core to an expansive ecosystem. Install and add elements to your page with Bower and HTML imports (NPM/ES module support coming soon). You can find elements in the elements catalogue.

$ bower i simpla-text simpla-img simpla-admin --save
<link rel="import" href="/bower_components/simpla-text/simpla-text.html">
<link rel="import" href="/bower_components/simpla-img/simpla-img.html">
<link rel="import" href="/bower_components/simpla-admin/simpla-admin.html" async>

You should also include a web components polyfill for full cross-browser support (see the browsers Simpla supports).

<script src="https://unpkg.com/webcomponents.js@^0.7.24/webcomponents-lite.min.js" async></script>

See full documentation & API references

Questions

To find out more about Simpla visit the project website, and for questions join the community on Slack

Contributing

There are lots of ways you can help push the Simpla project forward:

  • Reporting bugs. If you find a bug please report it! Open an issue against this repository for problems with the core library. For problems with elements, open an issue against the element's repository.

  • Submitting Pull Requests. We happily accept PRs against both this repository and any of the elements. Your PR should address an existing issue or have been discussed previously to ensure it gets merged.

  • Submitting new components Simpla is an open ecosystem, and the best way you can contribute to the project is to build your own content components and publish them to the catalogue. The ecosystem is currently built around Web Components, but there's no reason you couldn't use Simpla in a component environment of your choice (React, etc).

Read the Contributing guidelines for more information.


MIT © 2017 Sean King & Bede Overend