Giter VIP home page Giter VIP logo

kirby-blade's Introduction

Kirby Blade

Update: 27 June 2022

There is now an official fork of Laravel Blade:

https://github.com/lukasleitsch/kirby-blade


Source Download Open Issues Last Commit Release License

Kirby Blade use Laravel illuminate/view 9.x package and compatible with Kirby 3.

This package enable Laravel Blade for your own Kirby applications.

Kirby compatibility table

Kirby version Compatible plugin version
^3.6 ^1.9
^3.7 ^2.0

Important note before installation for Kirby

You should to override Kirby's e() helper function from root index.php of your application. Because Laravel Blade also has a helper function called e().

// override Kirby `e()` helper for Blade plugin
define('KIRBY_HELPER_E', false);

Installation

Installation with composer

composer require afbora/kirby-blade

Add as git submodule

git submodule add https://github.com/afbora/kirby-blade.git site/plugins/kirby-blade

Manual

  • Download the latest release
  • Unzip downloaded file
  • Copy/paste unzipped folder in your /site/plugins folder

What is Blade?

According to Laravel Blade documentation is:

Blade is the simple, yet powerful templating engine provided with Laravel. Unlike other popular PHP templating engines, Blade does not restrict you from using plain PHP code in your views. In fact, all Blade views are compiled into plain PHP code and cached until they are modified, meaning Blade adds essentially zero overhead to your application. Blade view files use the .blade.php file extension.

Usage

You can use the power of Blade like Layouts, Forms, Sub-Views, Components, Directives and your custom if statements.

All the documentation about Laravel Blade is in the official documentation.

Options

The default values of the package are:

Option Default Values Description
afbora.blade.templates site/templates (string) Location of the templates
afbora.blade.views site/cache/views (string) Location of the views cached
afbora.blade.directives [] (array) Array with the custom directives
afbora.blade.ifs [] (array) Array with the custom if statements
afbora.blade.minify.enabled false (boolean) Enable/disable minify HTML output
afbora.blade.minify.options [] (array) Minify supported options

All the values can be updated in the config.php file.

Templates

Default templates folder is site/templates directory or wherever you define your templates directory, but you can change this easily:

'afbora.blade.templates' => '/theme/default/templates',

Views

All the views generated are stored in site/cache/views directory or wherever you define your cache directory, but you can change this easily:

'afbora.blade.views' => '/site/storage/views',

Directives

By default Kirby Blade comes with following directives:

@asset($path)
@csrf()
@css($path)
@dump($variable)
@e($condition, $value, $alternative)
@get($key, $default)
@gist($url)
@go($url, $code)
@h($string, $keepTags)
@html($string, $keepTags)
@js($path)
@image($path, $attr) // @image('forrest.jpg', 'url')
@kirbytag($type, $value, $attr)
@kirbytags($text, $data)
@kirbytext($text, $data)
@kirbytextinline($text)
@kt($text)
@markdown($text)
@option($key, $default)
@page($key, $attr) // @page('blog', 'title')
@param($key, $fallback)
@site($attr) // @site(title')
@size($value)
@smartypants($text)
@snippet($name, $data)
@svg($file)
@t($key, $fallback)
@tc($key, $count)
@tt($key, $fallback, $replace, $locale)
@u($path, $options)
@url($path, $options)
@video($url, $options, $attr)
@vimeo($url, $options, $attr)
@widont($string)
@youtube($url, $options, $attr)

But you can create your own:

'afbora.blade.directives' => [
    'greeting' => function ($text)
    {
        return "<?php echo 'Hello: ' . $text ?>";
    },
],

Kirby Helpers Documentation:

https://getkirby.com/docs/reference/templates/helpers

If Statements

Like directives, you can create your own if statements:

'afbora.blade.ifs' => [
    'logged' => function ()
    {
        return !!kirby()->user();
    },
],

After declaration you can use it like:

@logged
    Welcome back {{ $kirby->user()->name() }}
@else
    Please Log In
@endlogged

Minify

Setup

'afbora.blade.minify.enabled' => true,
'afbora.blade.minify.options' => [
    'doOptimizeViaHtmlDomParser' => true, // set true/false or remove line to default
    'doRemoveSpacesBetweenTags'  => false // set true/false or remove line to default
],

Available Minify Options

Option Description
doOptimizeViaHtmlDomParser optimize html via "HtmlDomParser()"
doRemoveComments remove default HTML comments (depends on "doOptimizeViaHtmlDomParser(true)")
doSumUpWhitespace sum-up extra whitespace from the Dom (depends on "doOptimizeViaHtmlDomParser(true)")
doRemoveWhitespaceAroundTags remove whitespace around tags (depends on "doOptimizeViaHtmlDomParser(true)")
doOptimizeAttributes optimize html attributes (depends on "doOptimizeViaHtmlDomParser(true)")
doRemoveHttpPrefixFromAttributes remove optional "http:"-prefix from attributes (depends on "doOptimizeAttributes(true)")
doRemoveHttpsPrefixFromAttributes remove optional "https:"-prefix from attributes (depends on "doOptimizeAttributes(true)")
doKeepHttpAndHttpsPrefixOnExternalAttributes keep "http:"- and "https:"-prefix for all external links
doMakeSameDomainsLinksRelative make some links relative, by removing the domain from attributes
doRemoveDefaultAttributes remove defaults (depends on "doOptimizeAttributes(true)"
doRemoveDeprecatedAnchorName remove deprecated anchor-jump (depends on "doOptimizeAttributes(true)")
doRemoveDeprecatedScriptCharsetAttribute remove deprecated charset-attribute - the browser will use the charset from the HTTP-Header, anyway (depends on "doOptimizeAttributes(true)")
doRemoveDeprecatedTypeFromScriptTag remove deprecated script-mime-types (depends on "doOptimizeAttributes(true)")
doRemoveDeprecatedTypeFromStylesheetLink remove "type=text/css" for css links (depends on "doOptimizeAttributes(true)")
doRemoveDeprecatedTypeFromStyleAndLinkTag remove "type=text/css" from all links and styles
doRemoveDefaultMediaTypeFromStyleAndLinkTag remove "media="all" from all links and styles
doRemoveDefaultTypeFromButton remove type="submit" from button tags
doRemoveEmptyAttributes remove some empty attributes (depends on "doOptimizeAttributes(true)")
doRemoveValueFromEmptyInput remove 'value=""' from empty <input> (depends on "doOptimizeAttributes(true)")
doSortCssClassNames sort css-class-names, for better gzip results (depends on "doOptimizeAttributes(true)")
doSortHtmlAttributes sort html-attributes, for better gzip results (depends on "doOptimizeAttributes(true)")
doRemoveSpacesBetweenTags remove more (aggressive) spaces in the dom (disabled by default)
doRemoveOmittedQuotes remove quotes e.g. class="lall" => class=lall
doRemoveOmittedHtmlTags remove ommitted html tags e.g. <p>lall</p> => <p>lall
You can get detailed information from HtmlMin library: voku/HtmlMin

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.