About Scribbled

The noteblog for scribblers.

Table Of Contents

Features

  • Notes app, blog application, whatever you like to call it
  • Your content in text files under version control
  • Adapters for Markdown, Textile, plain text and HTML
  • Ideal for code blogging - embed code snippets from external files in your content
  • Responsive and fluid layout based on HTML5 Boilerplate
  • Third party integrations: Opengraph, Google Analytics etc

Getting Started

  • cd <webroot>
  • git clone git://github.com/sirprize/scribbled.git scribbled
  • cd scribbled
  • php composer.phar install

Point your browser to /scribbled

Scribblin' (Writing Posts)

Create a directory in your scribble folder and add a text file such as {scribble-dir}/my-new-post/scribble.md.

Here's a typical scribble file containing a post. Information such as title, tags and creation date is added into keywords. Beside title and creation date, keywords are optional.

<!-- scribble-title: Proportions, Not Pixels -->
<!-- scribble-lede: Embrace the flexibility inherent to the web in your design  -->
<!-- scribble-tags: design css responsive -->
<!-- scribble-created: 20110801 -->
<!-- scribble-publish: 1 -->

Let's start off by setting our base type size to the browser’s default, which in most cases is 16 pixels. We can then use ems to size text up or down from that relative baseline. The formula to do so is **target-size / context-size = em's**.

Assuming that our base font-size of 100% on the body element equates to 16px and we would like to have a target size reflecting 24px in proportion, we can plug our desired values directly into our formula: **24px / 16px = 1.5em**

<!-- scribble-snippet: snippets/styles.css -->
<!-- scribble-snippet: snippets/markup.html -->

[See it in action](demo/)

This will translate into:

<p>Let's start off by setting our base type size to the browser’s default, which in most cases is 16 pixels. We can then use ems to size text up or down from that relative baseline. The formula to do so is <strong>target-size / context-size = em's</strong>.</p>

<p>Assuming that our base font-size of 100% on the body element equates to 16px and we would like to have a target size reflecting 24px in proportion, we can plug our desired values directly into our formula: <strong>24px / 16px = 1.5em</strong></p>

<pre>
    <code>
        body { font-size: 100%; }
        h1 { font-size: 1.5em; /* 24px / 16px */ }
        p { font-size: 1em; /* 16px / 16px */ }
    </code>
</pre>

<pre>
    <code>
        <h1>This Title is now 1.5em's (24px In The Context Of 16px)</h1>
        <p>Some text at 1em (16px in the context of 16px)</p>
    </code>
</pre>

<a href="demo/">See it in action</a>

Note how code snippets got pulled into the document. Title, tags, lead parapgraph, creation date etc are now available in listings or any other usage.

Adding Pages

It is possible to create separate pages merely by adding a new text file. Create it in your page folder such as {page-dir}/my-new-page.md

<!-- scribble-title: My New Page -->
<!-- scribble-created: 20120516 -->
<!-- scribble-publish: 1 -->

And here's the content of my new page

Note how the name of this file will define the url of your new page. In this case the page will be available at /my-new-page/

Content Visibility

As shown in the examples above, visibility of notes and pages can be set by using the following keyword in your scribbles:

<!-- scribble-publish: 1 -->

In your application config file you can then configure which notes should appear on your website:

// scribbles
'scribble.repository' => array(
    'mode' => 'published' // all|published|unpublished
)

// pages
'page.repository' => array(
    'mode' => 'published' // all|published|unpublished
)

It probably makes sense to set mode = published on your production website and mode = all on your development machine. If the scribble-publish tag is omitted, visibility defaults to 0

Custom Themes

Chances are that you like to customize the look and feel of your website. The easiest way is to take the default theme as a starting point for your design. Copy vendor/sirprize/themed to a convenient location and tell Scribbled where to find it:

// config/config.php
'theme' => array(
    'templateDir' => dirname(__DIR__).'/my-custom-theme/templates',
    'mediaPath' => '/my-custom-theme/media'
)

Templates are written in plain PHP, based on Symfony Templating. Stylesheets use LESS and they come with a simple style tester page

The Application Stack

The application is split up into four discrete packages building on top of each other. Click here for more information

Storing Scribbled In Git

In most cases, Scribbled serves as starting point for your application. The package provides configuration, bootstrapping and dependencies. Dependencies are best managed with Composer or Git submodules.

By default, Scribbled uses Composer. Depending on your hosting situation, it might make sense to switch to Git submodules. Either way, start by getting Scribbled:

  • git clone git://github.com/sirprize/scribbled.git scribbled
  • cd scribbled

Composer

  1. Remove Git files

    • rm -dR .git
  2. Install dependencies

    • php composer.phar install
  3. Start custom theme

    • cp -R vendor/sirprize/themed/templates .
    • cp -R vendor/sirprize/themed/media .
  4. Configure custom theme in config/config.php

    // config/config.php
    'theme' => array(
        'templateDir' => dirname(__DIR__).'/templates',
        'mediaPath' => '/media'
    )
    
  5. Start repo

    • git init
    • git add .
    • git commit -m 'initial import'

Git Submodules

  1. Remove Git files

    • rm -dR .git
  2. Remove Composer files and vendors

    • rm composer.json
    • rm composer.phar
    • rm composer.lock
    • rm -dR vendor
    • rm -dR vendor-uncomposed
  3. Add submodules

    • git submodule add git://github.com/sirprize/scrubble.git vendor/sirprize/scrubble
    • git submodule add git://github.com/sirprize/scribble.git vendor/sirprize/scribble
    • git submodule add git://github.com/sirprize/paginate.git vendor/sirprize/paginate
    • git submodule add git://github.com/sirprize/themed.git vendor/sirprize/themed
    • git submodule add git://github.com/fabpot/Pimple.git vendor/pimple/pimple
    • git submodule add git://github.com/doctrine/common.git vendor/doctrine/common
    • git submodule add git://github.com/symfony/EventDispatcher.git vendor/symfony/event-dispatcher/Symfony/Component/EventDispatcher
    • git submodule add git://github.com/symfony/HttpFoundation.git vendor/symfony/http-foundation/Symfony/Component/HttpFoundation
    • git submodule add git://github.com/symfony/HttpKernel.git vendor/symfony/http-kernel/Symfony/Component/HttpKernel
    • git submodule add git://github.com/symfony/Routing.git vendor/symfony/routing/Symfony/Component/Routing
    • git submodule add git://github.com/symfony/Templating.git vendor/symfony/templating/Symfony/Component/Templating
    • git submodule add http://git.michelf.com/php-markdown vendor/michelf/php-markdown
    • git submodule add git://github.com/netcarver/textile.git vendor/netcarver/textile
  4. Configure autoloading in config/config.php

    'requires' => array(
        $vendorDir.'/doctrine/common/lib/Doctrine/Common/ClassLoader.php',
        $vendorDir.'/pimple/pimple/lib/Pimple.php',
        $vendorDir.'/michelf/php-markdown/markdown.php',
        $vendorDir.'/netcarver/textile/classTextile.php'
    ),
    'namespaces' => array(
        'Sirprize\\Scribble' => $vendorDir.'/sirprize/scribble/lib',
        'Sirprize\\Scrubble' => $vendorDir.'/sirprize/scrubble/lib',
        'Sirprize\\Paginate' => $vendorDir.'/sirprize/paginate/lib',
        'Doctrine\\Common' => $vendorDir.'/doctrine/common/lib',
        'Symfony\\Component\\EventDispatcher' => $vendorDir.'/symfony/event-dispatcher',
        'Symfony\\Component\\HttpFoundation' => $vendorDir.'/symfony/http-foundation',
        'Symfony\\Component\\HttpKernel' => $vendorDir.'/symfony/http-kernel',
        'Symfony\\Component\\Routing' => $vendorDir.'/symfony/routing',
        'Symfony\\Component\\Templating' => $vendorDir.'/symfony/templating'
    )
    
  5. Start custom theme

    • cp -R vendor/sirprize/themed/templates .
    • cp -R vendor/sirprize/themed/media .
  6. Configure custom theme in config/config.php

    // config/config.php
    'theme' => array(
        'templateDir' => dirname(__DIR__).'/templates',
        'mediaPath' => '/media'
    )
    
  7. Start repo

    • git init
    • git add .
    • git commit -m 'initial import'

Requirements

  • PHP 5.3+

Dependencies

These fine libraries ship with Scribbled: