Skip to content

A Statamic add-on to use GitHub's Gists to host code blocks.

License

Notifications You must be signed in to change notification settings

ohseesoftware/oh-see-gists

Repository files navigation

Oh See Gists

Current Release Build Status Badge Coverage Status Maintainability Score Downloads MIT License

Use GitHub Gists to embed your code snippets on your site. Example: https://ohseemedia.com/posts/hooks-can-only-be-called-inside-the-body-of-a-function-component-reactjs-error/

Installation

Install the add-on:

composer require ohseesoftware/oh-see-gists

Publish the add-on's assets:

php artisan vendor:publish --tag=oh-see-gists

This will publish:

  • a config file for the GitHub API
  • views in the resources/views directory
  • fieldsets in the resources/fieldsets directory

Usage

Add your GitHub token to your .env file

You'll need to create a new personal access token. You can do so here: https://github.com/settings/tokens/new.

The token only needs the gist scope.

Add the token as OH_SEE_GISTS_GITHUB_TOKEN in your .env file.

Add the fieldset to your blueprint(s)

The fieldset that will be published is named gist_block. You will need to update your blueprints to reference the fieldset wherever you want it to be used. As an example in bard:

type: bard
sets:
  gist_content:
    display: Gist
    fields:
      - import: gist_block

Naming

There are two very important naming conventions you have to follow:

  • The gist_content name for the fieldset is very important. The add-on references this key so you cannot change it.
  • Your bard block has to be named content for the add-on to save to your GitHub Gists. Otherwise, you will be just creating code blocks on your Statamic site.

Use the partial in your templates

The add-on publishes a partial for you to use in your templates to render the Gists. You can use it like so:

{{ bard_content }}
    {{ if type == "gist_content" }}
        {{ partial src="partials/gist_content" }}
    {{ /if }}
{{ /bard_content }}