Giter Site home page Giter Site logo

choo-dat-hypha's Introduction

choo-dat-hypha (experimental)

A Choo plugin for reading a content directory with Hypha

npm i choo-dat-hypha

Usage

Create a new Choo app and use the choo-dat-hypha plugin.

var choo = require('choo')
var app = choo()

app.use(require('choo-dat-hypha')())

if (!module.parent) app.mount('body')
else module.exports = app

Format some plain text files using smarkt fields.

title: Technopastoral
----
date: January 19, 2038
----
tags:
  - garden
  - engineering
----
text: To deprogram oneself necessitates keeping to very specific schedules, which are what Foucault, once again, described as techniques of the self, echoing Seneca. 

Organize them within a directory structure alongside media assets.

/content
  /about
    index.txt
  /blog
    /38-01-19-technopastoral
      index.txt
      header.jpg
  index.txt

Now your content gets loaded into your Choo app’s state, and a route is created for each of your pages!

Pattern

To easily access the data for each of your pages simply compare the state.href against your state.content object in a composable function.

// wrapper.js
var xtend = require('xtend')

module.exports = wrapper

function wrapper (view) {
  return function (state, emit) {
    var page = state.content[state.href || '/'] || { }
    return view(xtend(state, { page: page }), emit)
  }
}

Now simply wrap your views!

// view.js
var html = require('choo/html')
var wrapper = require('./wrapper')

module.exports = wrapper(view)

function view (state, emit) {
  return html`
    <body>
      The current page is ${state.page.title}
    </body>
  `
}

API

state

State is extended with these objects:

state.content = { }

state.site = {
  blueprints: { },
  config: { },
  info: { },
  loaded: false,
  p2p: false
}

state.events.CONTENT_LOAD

Emitting this event will reload state.content.

state.events.CONTENT_LOADED

Listen to this event for when content is loaded.

Todo

  • Read blueprints

choo-dat-hypha's People

Contributors

jondashkyle avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

choo-dat-hypha's Issues

TypeError: Cannot set property 'error' of undefined at createArchive

Hi,

this might be a dumb error, as I am poking with node.js and choo.js only for a few times now, and have not yet an idea of how to set things up.

What I do is:

  1. npx create-choo-app <project-directory>
  2. cd <project-directory> && npm i choo-dat-hypha
  3. I follow your instructions on how to add the new hypha module to choo.js and make a content folder with an index.txt, plus one sub-folder with an index.txt as well (and some text fields inside each text file).
  4. I add app.use(require('choo-dat-hypha')('/content')) to index.js; I make a new wrapper.js file in /views, do npm install xtend and use the wrapper.js module in views/main.js

I run npm start and get the following error log (running node v8.7.0)

A critical error occured, forcing Bankai to abort:
npm ERR! code ELIFECYCLE
npm ERR! errno 1t set property 'error' of undefined
npm ERR! [email protected] start: `bankai start index.js`n/node_modules/choo-dat-hypha/npm ERR! Exit status 1
npm ERR! ore (/Users/xx/xx/tekken/node_modules/choo-dat-hypha/index.jsnpm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.nonymous> (/Users/xx/xx/tekken/index.js:8:5)
    at Module._compile (module.js:624:30)
npm ERR! A complete log of this run can be found in:10)
npm ERR!     /Users/xx/.npm/_logs/2018-01-09T22_38_25_092Z-debug.log
~/xx/tekken (master) $ :508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)

Before I get this error, another error appears

TypeError: Cannot set property 'error' of undefined
    at createArchive (/Users/xx/xx/tekken/node_modules/choo-dat-hypha/index.js:56:27)
    at store (/Users/xx/xx/tekken/node_modules/choo-dat-hypha/index.jsscripts:browserify.bundle unsupported type for static module: Property
at expression:

  fs: fs
 while parsing file: /Users/xx/xx/tekken/node_modules/hypha/index.js
Error: unsupported type for static module: Property
at expression:

  fs: fs
 while parsing file: /Users/xx/xx/tekken/node_modules/hypha/index.js
    at traverse (/Users/xx/xx/tekken/node_modules/static-module/index.js:318:34)
    at walk (/Users/xx/xx/tekken/node_modules/static-module/index.js:224:18)
    at walk (/Users/xx/xx/tekken/node_modules/falafel/index.js:49:9)
    at /Users/xx/xx/tekken/node_modules/falafel/index.js:46:17
    at forEach (/Users/xx/xx/tekken/node_modules/foreach/index.js:12:16)
    at walk (/Users/xx/xx/tekken/node_modules/falafel/index.js:34:9)
    at /Users/xx/xx/tekken/node_modules/falafel/index.js:41:25
    at forEach (/Users/xx/xx/tekken/node_modules/foreach/index.js:12:16)
    at /Users/xx/xx/tekken/node_modules/falafel/index.js:39:17
    at forEach (/Users/xx/xx/tekken/node_modules/foreach/index.js:12:16)

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.