Skip to content

A collection of useful snippets and code examples for Artisan, Blade, CLI, CSS, GIT, HTML, JavaScript, Laravel, Liquid, Markdown, NodeJS, VueJS, PHP, WordPress, WP-CLI and more.

proochster/shortcode

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.

<SHORTCODE>

https://shortcode.dev

Adding a new short code

  1. Create a new html file in the collection folder, i.e:

    _collections
       _laravel
           new-short-code.html
    
  2. Use this as a template for the front matter:

    ---
    title: new short code
    description: Short code description.  
    tags: html second-tag third-tag
    date: YYYY-MM-DD
    ---
    // Add the short code body here. 
    
  3. When ready, submit a pull request to the dev branch (https://github.com/proochster/shortcode/tree/dev).

Creating a new collection

  1. Add the new collection in /_config.yml file following this structure. HTML collection was used in the example below. For the collection icon checkout Font Awesome.

    collections:
        html:
            output: true
            link: html-cheatsheet
            icon: fab fa-html5
        css:
            ...
    
  2. Under the defaults section in the _config.yml add the scope record following the example below.

    defaults:
    - scope:
        type: html
        values:
        layout: shortcode
        type: html
    
  3. Create new folder in the /_collections/ directory:

    _collections
       _html
    
  4. Create a landing page for the new collection in the root directory i.e. code_somecollection.html and follow this front matter structure:

    ---
    layout: codes
    title: Some collection cheatsheet
    permalink: somecollection-cheatsheet
    group: wordpress
    ---
    
  5. Add another markdown highlight case in the /_includes/code-highlight.html like so:

    {% when 'html' %}{% highlight html %}{{ code-content }}{% endhighlight %} 
  6. When ready submit a pull request to the dev branch (https://github.com/proochster/shortcode/tree/dev).

Jekyll

Requirements: Ruby, Gems

Add shortcode entry to your hosts list.

Install bundler gem install bundler jekyll

Install project bundle install

Use bundle exec jekyll serve when running for the first time or after _config.yml has been changed.

Otherwise use jekyll serve or the short version jekyll s

Only compile the latest changes:

bundle exec jekyll serve --incremental

Workbox CLI

Command line interface tool for Progressive Web Apps https://developers.google.com/web/tools/workbox/modules/workbox-cli

Initial workbox wizard setup command. This will generate the workbox-config.js file.

workbox wizard

To build service worker run

workbox generateSW workbox-config.js

About

A collection of useful snippets and code examples for Artisan, Blade, CLI, CSS, GIT, HTML, JavaScript, Laravel, Liquid, Markdown, NodeJS, VueJS, PHP, WordPress, WP-CLI and more.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •