@apostrophecms-pro/basics v1.0.0

@apostrophecms-pro/basics

Basic widgets and their configurations.

Module Structure

• /modules: Apostrophe widget modules.
• /lib: Internal configuration helpers
• /views: Views to be extended by modules or your project

Initializing the bundle and adding widgets

@apostrophecms-pro/basics contains several bundled modules you can opt into.

In app.js

require('apostrophe')({
  shortName: 'my-project',
  bundles: [ '@apostrophecms-pro/basics' ],
  modules: {
    // required for bundled modules or extending views
    '@apostrophecms-pro/basics': {},
    // optional widgets
    '@apostrophecms-pro/basics-image-widget': {},
    '@apostrophecms-pro/basics-column-widget': {},
    '@apostrophecms-pro/basics-button-widget': {},
    '@apostrophecms-pro/basics-card-widget': {},
    '@apostrophecms-pro/basics-hero-widget': {},
    ...
  }
}

Available configurations

The @apostrophecms-pro/basics module provides configurations you can tap into for further customization. These are available via the server side apos object and, in some cases, directly importable.

The configurations are available as:

• Widgets leveraged by @apostrophecms-pro/basics
  • Use require('@apostrophecms-pro/basics/lib/widgets') anywhere you wish in your project and you'll get the same set of widgets that column widget areas get. Or, pass your own object as the widgets option to @apostrophecms-pro/basics and also use that object elsewhere in your project.
• Navigation schema
  • const { navigation } = require('@apostrophecms-pro/basics/lib/navigation');
  • apos.basics.options.navigation
• Link (and button)
  • const { link } = require('@apostrophecms-pro/basics/lib/link');
  • apos.basics.options.link
• Rich Text
  • const richText = require('@apostrophecms-pro/basics/lib/rich-text');
  • apos.basics.options.richText

Adding a custom navigation

This module comes with a configuration for making a custom or mixed navigation. This allows for linking to internal pages as well as external websites and pages, and for aligning the navigation links relative to a site logo that links to the home page.

Here is an example showing how to add the navigation fields to the global settings of a site:

const { navigation } = require('@apostrophecms-pro/basics/lib/navigation');
module.exports = {
  fields: {
    add: {
      ...navigation,
      // other global fields
    },
    group: {
      navigation: {
        label: 'Navigation',
        fields: [ 'navLogo', 'navLogoAlignment', 'navLinks' ]
      }
    }
  }
};

In /views/layout.html or other appropriate template

{% import "@apostrophecms-pro/basics:navigation/navigation.html" as navigation %}
{% block beforeMain %}
  <header>
    {{ navigation.render({
      data: data.global
    }) }}
  </header>
  <!-- other markup -->
{% endblock %}