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

apostrophe-blocks

v0.5.58

Published

Allows a column of content to be broken up into blocks with independent templates, allowing for sub-columns to alternate with a full width column for instance. Blocks can be added and removed freely.

Downloads

50

Readme

apostrophe-blocks

apostrophe-blocks allows users to alternate one-column and two-column blocks in a single page on an apostrophe-sandbox-powered website. Users may opt to have just a single one-column block, or a single two-column block, or a mix of the two.

But it actually does more than that. As the developer, you may define as many types of blocks as you wish, not just simple one- and two-column blocks. If you can do it in a regular page template, you can do it in a block template.

Installation

I assume you already have a nifty Apostrophe 2 project built with apostrophe-site. The easiest way is to start by cloning the apostrophe-sandbox project.

Add the module to your project:

npm install --save apostrophe-blocks

Configuration

In app.js, you'll need to configure the apostrophe-blocks module, just like the rest of your modules:

    'apostrophe-blocks': {
      types: [
        {
          name: 'one',
          label: 'One Column'
        },
        {
          name: 'two',
          label: 'Two Column'
        }
      ]
    }

Now add an aposBlocks call to one of your page templates:

{{ aposBlocks(page, 'main', [ 'one', 'two' ]) }}

Restart your site and... BOOM! That's it. When editing you can now add blocks as you see fit. Within each block you have the usual area-editing controls, for one area or two side-by-side areas, respectively. You can also re-order the blocks via the drag handle, or remove them.

Creating Your Own Block Templates

OK, you caught me. That's not really everything. You don't want to use my crappy example block templates. (Especially not with that nasty inline style element, am I right?)

So, let's make our own.

First create a views folder for your project's overrides of the blocks module:

mkdir -p lib/modules/apostrophe-blocks/views

Now, in that folder, create one.html and paste in:

{{ aposArea(page, prefix + 'left') }}

Much more exciting, let's create two.html:

<div class="left">
  {{ aposArea(page, prefix + 'left') }}
</div>
<div class="right">
  {{ aposArea(page, prefix + 'right') }}
</div>

See what I did there? Each block template can contain its own calls to aposArea. All you have to do is *always remember to append your own area name to prefix. If you forget to do this, all your blocks will show the same content, and you will be sad.

Also works with Singletons:

{{ aposSingleton(page, prefix + 'marquee', 'slideshow', {}) }}

"Hey, my two columns aren't showing up as columns!" Well no, of course not, I didn't write any CSS for those left and right classes on the wrapper div elements. It's your job to do that in your project's site.less file.

Limitations

Blocks cannot be edited inside the modal dialog boxes for editing blog posts, events, etc. However, you may introduce them in the show.html templates for such things.

Since blocks are inherently very much a WYSIWYG beast, we feel it would not be worth the considerable effort required to make them work in modals.

Changelog

0.5.58: when workflow: true is set globally in app.js and the apostrophe-workflow module is in use, this module now plays along, ensuring that workflow applies to adding, removing, and reordering blocks and that there are no sneaky ways to get your new text approved by changing the block type.