Dev Notes on Ghost for Contributors

Overview of Ghost Codebase

Looking to help contribute to Ghost I first needed to get a grounding of the codebase and an overview of the project. More specifically I wanted to know what features exist or do not exist and where they fall within the milestones. I hope that this analysis/overview is helpful for others.

Features and Functionality under review * Photo Uploads * Static Pages * Importers (tumblr) * Plugin Status * Ghost Admin Architecture

Photo Uploads

Overview of the state of image uploads for Ghost posts and theming.

Current State of Uploads as of 0.3.3

Post Photo Uploads

When creating content posts with Ghost, the html5 drag-in-drop target markers will auto-upload any image dropped in. The defined target is ‘content/images///

Once an image is uploaded it can not be deleted from the file-system via the UI - clicking the trash icon only removes the markdown url link.

Blog Logo/Cover Uploads

These uploads are also sent to the ‘content/images/// target. There must be a link-ref stored in the db.

Future of Photo Uploads - Milestone 0.4

There is an active branch image-refactor where a configuration option is set to upload images to the local file system or to s3 - issue. It appears a working version is available, I’ve yet to pull it and test.

Static Pages

There is a github-issue with two pull-requests from halfdan and egdelwonk

To try the static page feature out do the following from project root.

git checkout -b 969-static-pages

git remote add halfdan git@github.com:halfdan/Ghost.git
git remote add egdelwonk git@github.com:egdelwonk/Ghost.git

git pull egdelwonk feature/969_static_pages
git pull halfdan 969-static-pages

You may have a small merge conflict between their two naming schemes. I tried just pulling halfdan first but his pr alone wasn’t enough the static page toggle wouldn’t work correctly. So you will want to pull both. Unfortunately static pages will not allow you to set url paths like projects/code/Glaxal

Importers

Currently my website is powered by django which is pulling my posts from tumblr. Ghost currently has a separate milestone for importers. Based on issue #950 an import path works for wordpress and tumblr - using the tumblr-wordpress plugin. Need to test this functionality and figure out the ideal export methods from the tumblr-wordpress export tool.

Plugin Status

There is a considerable amount of progress made towards plugin architecture according to issue #769. The issue is marked as top priority and regarded as part of the 0.4 milestone release. The dialog contains a link to a working plugin and how it would ideally integrate and function within Ghost.

Ghost Admin - Backbone Review

The Ghost Admin interface is built using backbonejs and all the src files are located in the /core/client/ directory. These files are combined into a handful of javascript files and placed in the /core/built/scripts/ folder by grunt.

The best place to start reading the admin javascript code is in /core/client/init.js and /core/client/router.js. These two files show how a Ghost js namespace container is created and then Models, Collections, Layouts, Views, and Validate are then hung off the Ghost app. Handlebar templates (hbs) files are located in /core/client/tpl/.

Backbone Architecture

Models

The models/base.js file contains a single model called TemplateModel which has one method override for fetch which acts as a wrapper for NPProgress.

Models that extend TemplateModel

  • User
  • Posts
  • Themes
  • Widget
  • Settings
  • uploadModal

Collections that extend TemplateModel * Tags [not sure how this collection extends a model?]

Collections

The following model files contain a corresponding collection

  • Posts
  • Tags [contain no model?]
  • Widget

Views

All the primary Ghost views inherit from two levels. First there is the

Ghost.TemplateView

Which contains a the basic template/rendering methods that all views will inherit.

The next inheritance layer and primary view class used

Ghost.View

Which will contain several methods such as addSubView and removeSubView that allow you to compose your backbone views. A great example of this is the admin editor which contains several nested Subviews for the various components (publish bar, actions widget, and uploads).

Posted on Tumblr - Wed Nov. 06th 2013, 2:40 PM

blog comments powered by Disqus