Git Product home page Git Product logo

ghostline's Introduction

Ghostline Framework

Ghostline Framework

DotMH Future Gadget Lab lerna

Ghostline is an opinionated framework for building static sites. It is built atop the Metalsmith static site generator. The framework consists of some practical code i.e. plugins as well as process and methodology.

NOTE These plugins are only designed to work within the Ghostline framework, though they may work fine outside with just standard Metalsmith they make some assumptions including that you are using handlebars for templates.

Plugins

The Framework uses many plugins some developed especially for Ghostline and some Third Party.

Ghostline Plugins

Base

  1. Handlebar Tools - Allows you to load Partials and Helpers so views have access
  2. Handlebar Content - Allows you to use partials in content pages
  3. Gallery - Allows the embedding of a gallery by scanning a folder
  4. Draft Excluder - Stops draft posts from been published
  5. Meta Loader - Loads in global metadata in a connivent easy to use way.
  6. Includes - Allows the including of a page and all its data in another page
  7. Inherit - Inherit meta data from another page
  8. Is Current - Find the current page
  9. List - Allows the listing of pages in another page
  10. Image Manger - Helps when embedding images

Optional

These optional plugins allow you to add extra functionality

  1. Image Colors - find the dominant colors in your images
  2. Storybook Renderer - Build a storybook out of your handlebar partials
  3. Meta Data Debugger - Debug issues with meta data
  4. Countdown - Add a counter to your site

Installing

You can install plugins individually click on a plugin to go to its readme to see how.

Bundles

There are also packages for 'Base' , 'Optional' and 'All'

Installs all the plugins under the base heading above.

Install with

npm i @ghostline/bundle-<BUNDLE>

i.e.

npm i @ghostline/bundle-base

You can then use them by including the individual plugins from the bundle, for example for ghostline/bundle-base

const {handlebarContents} = require('@ghostline/bundle-base');

ghostline's People

Contributors

dotmh avatar

Watchers

avatar

ghostline's Issues

Get image color package to notice files that have changed content but not name.

There is a bug where when you change the image contents but not the name of that file image colors will not notice after the first run and the cache is built. This is because the cache currently uses a very simple way to workout if a file has changed. Basically it looks to see if there are more files than the last time , then it checks each filename to makes sure it is in the cache. So new files are scanned but not files that changes contents but not there name.

Remember to pop Metalsmith context

ghostline/packages/image-manager/index.js

Line 51 in 978ac6d

const [img, alt, cssClass] = args;

For this to work as intended the last argument (which is always the context for some reason) needs to be popped off. if that is not done the arguments that are specified by the user , instead of been undefined as expected will be the metalsmith context.

It can be fixed by adding a line like

const ctx = args.pop()

This has to happen before the line referenced in line 51 (As seen above)

Improve Speed on image colors rebuild

I don't think much can be done about the initial image color build as it just has to look at every image and determine the colors. However we could make it so that a user can pass it some GLOBS to scan rather than every image file.

The bigger improvement would be to redesign the cache routines so that when an image is added or changes only that image is rescanned. Currently it just ignores the cache and starts the rescan again rebuilding the cache.

Add Tests

Add tests to cover all plugin functionality

Swap to using direct load for node-vibrant in image colors

Currently the way the plugin works is it reloads the file in node-vibrant this is because that is the only documented way to do it. However you can actual directly load a buffer into node-vibrant.

i..e

const palette = await colors.from(<BUFFER>).getPalette();

This would be an improvement as we would already have the file contents in a Buffer from Metalsmith. This would remove the need for disk IO completely when getting the colors (no double loading)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.