scaife-skeleton

Scaife Skeleton

front-end layout library for Scaife readers

This repository is part of the Scaife Viewer project, an open-source ecosystem for building rich online reading environments.

This is the foundation for any Scaife reader. It consists of two main skeleton types, FixedSkeleton and EditableSkeleton.

• In the FixedSkeleton case, you the site developer, pre-determine and decide what widgets will belong to the layout.
• With the EditableSkeleton, you, as the site developer, only provide the options of possible widgets and the user of the reader selects the layout at runtime.

Installation

yarn add scaife-skeleton

or

npm install scaife-skeleton

Requirements

Your project must be using Vuex even if your reader doesn't require a store directly since the skeleton uses it.

Usage

After installation, you'll first want to hook up the store:

In your store.js (or wherever you are setting up your store):

import Vue from 'vue';
import Vuex from 'vuex';

import createStore from 'scaife-skeleton';

Vue.use(Vuex);

const skeletonStore = createStore();

export default new Vuex.Store({
  modules: {
    [skeletonStore.namespace]: skeletonStore.store,
  },
});

Using the FixedSkeleton

The use of the skeleton components is intended to be within components that are full screen, perhaps in one that has a navbar at top. Often this means a top level App.vue component.

<template>
  <div id="app">
    <FixedSkeleton
      :main-widget="mainWidget"
      :left-widgets="leftWidgets"
      :right-widgets="rightWidgets"
    />
  </div>
</template>

<script>
  // import widgets that you want in your project
  import TextSelectionWidget from './morphgnt/widgets/TextSelectionWidget.vue';
  import AnalysisWidget from './morphgnt/widgets/AnalysisWidget.vue';
  import ReaderWidget from './morphgnt/widgets/ReaderWidget.vue';
  import TocWidget from './morphgnt/widgets/TocWidget.vue';
  import TextSizeWidget from './reader/widgets/TextSizeWidget.vue';
  import TextWidthWidget from './reader/widgets/TextWidthWidget.vue';

  export default {
  name: 'app',
  components: {
    FixedSkeleton,
  },
  computed: {
    mainWidget() {
      return ReaderWidget;
    },
    leftWidgets() {
      return [
        TextSelectionWidget,
        TocWidget,
      ];
    },
    rightWidgets() {
      return [
        TextSizeWidget,
        TextWidthWidget,
        AnalysisWidget,
      ];
    },
  }
</script>

Using the EditableSkeleton

For editable skeletons, the process is a bit different. Your top level component is really simple:

<template>
  <EditableSkeleton />
</template>

To tell scaife-skeleton about the available widgets, you pass in a list at Vue startup time in your main.js file:

import Vue from 'vue';
import SkeletonPlugin from 'scaife-skeleton';

import App from './App.vue';
import store from './store';
import router from './router';
import widgets from './widgets';

Vue.config.productionTip = false;

Vue.use(SkeletonPlugin, { widgets });

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app');

Where your widgets.js file looks like something like:

import ReaderWidget from './reader/ReaderWidget.vue';
import TextSizeWidget from './text-size/TextSizeWidget.vue';
import TextWidthWidget from './text-width/TextWidthWidget.vue';

import BookInfoWidget from './morphgnt/BookInfoWidget.vue';
import BookSelectWidget from './morphgnt/BookSelectWidget.vue';
import InterlinearWidget from './morphgnt/InterlinearWidget.vue';
import PassageWidget from './morphgnt/PassageWidget.vue';
import SelectablePassageWidget from './morphgnt/SelectablePassageWidget.vue';

const widgets = [
  ReaderWidget,
  TextSizeWidget,
  TextWidthWidget,

  BookInfoWidget,
  BookSelectWidget,
  InterlinearWidget,
  PassageWidget,
  SelectablePassageWidget,
];

export default widgets;

Adding Additional Icons

You can provide your own icons by passing in an iconMap option when adding the plugin:

import { faAddressBook } from '@fortawesome/free-solid-svg-icons/faAddressBook';

const iconMap = [ faAddressBook ].reduce((map, obj) => {
  map[obj.iconName] = obj;
  return map;
}, {});

Vue.use(SkeletonPlugin, { widgets, iconMap });

Then you can use the globally installed <Icon> component in your widget:

<Icon name="address-book" />

Development

This repo has a series of demos to facilitate the development of scaife-skeleton.

Running the project

yarn run serve

or

npm run serve

Linting and testing

yarn run lint
yarn run test

or

npm run lint
npm run test

Prettier

yarn run prettier:check
yarn run prettier:fix

or

npm run prettier:check
npm run prettier:fix

Packaging

yarn run package

or

npm run package