bnussbau/laravel-trmnl-blade

TRMNL Blade - Blade Components for the TRMNL Design System

🎨 Blade Components on top of the TRMNL Design System (docs)

Support us

Blade Components

• see TRMNL Design System
• resources/views/components

Blade Compontens can help you generate markup code. Alternatively, you can just use the native CSS classes from the TRMNL Design System.

Usage

Basic Layout

<x-trmnl::screen>
    <x-trmnl::view>
        <x-trmnl::layout>
            <!-- Your content here -->
        </x-trmnl::layout>
        <x-trmnl::title-bar/>
    </x-trmnl::view>
</x-trmnl::screen>

Quote Example

<x-trmnl::screen>
    <x-trmnl::view>
        <x-trmnl::layout>
            <x-trmnl::richtext gapSize="large" align="center">
                <x-trmnl::title>Motivational Quote</x-trmnl::title>
                <x-trmnl::content>“I love inside jokes. I hope to be a part of one someday.”</x-trmnl::content>
                <x-trmnl::label variant="underline">Michael Scott</x-trmnl::label>
            </x-trmnl::richtext>
        </x-trmnl::layout>
        <x-trmnl::title-bar/>
    </x-trmnl::view>
</x-trmnl::screen>

Map Example

<x-trmnl::screen>
    <x-trmnl::view>
        <x-trmnl::layout direction="col">
            <x-trmnl::map id="map-streets" preset="streets" :center="[-84.3885, 33.7554]" :zoom="13" />
        </x-trmnl::layout>
        <x-trmnl::title-bar title="Map" instance="Streets"/>
    </x-trmnl::view>
</x-trmnl::screen>

Using <x-trmnl::map> injects MapLibre GL JS once above the map. Pass center ([lng, lat]) and zoom to auto-init a still place-map. Omit them to supply your own TRMNLMaps JS for routes. Overlay cards go in the slot; marker draws a dot at center.

Chart Example

<x-trmnl::screen>
    <x-trmnl::view>
        <x-trmnl::layout direction="col">
            <x-trmnl::chart id="traffic-chart" />
        </x-trmnl::layout>
        <x-trmnl::title-bar title="Analytics" instance="Traffic"/>
    </x-trmnl::view>
</x-trmnl::screen>

<script>
window.trmnlChartsWhenReady(function () {
  var el = "traffic-chart";
  TRMNLCharts.watch(el, function () {
    var px = function (value) { return TRMNLPaint.px(value, { el: el }); };
    var chart = Highcharts.chart(el, TRMNLCharts.merge(TRMNLCharts.options({ el: el }), {
      chart: { type: "spline", height: px(260) },
      series: [{
        data: @json($series),
        color: TRMNLCharts.series(0, 1, { el: el }),
        lineWidth: px(4)
      }]
    }));
    TRMNLCharts.applySwatches({ el: el });
    return chart;
  });
});
</script>

Using <x-trmnl::chart> injects Highcharts and pattern-fill once above the container. Write your own TRMNLCharts JS (watch, options, series). Do not wrap Highcharts options as Blade props. Gauges and Chartkick stay in your own <script> tags.

Installation

You can install the package via composer:

composer require bnussbau/trmnl-blade

You can publish the config file with:

php artisan vendor:publish --tag="trmnl-blade-config"

This is the contents of the published config file:

return [
    'framework_base_url' => env('TRMNL_BLADE_FRAMEWORK_BASE_URL', 'https://trmnl.com'),
    'framework_version' => env('TRMNL_BLADE_FRAMEWORK_VERSION', '3.4.0'),
    'framework_css_version' => env('TRMNL_BLADE_FRAMEWORK_CSS_VERSION', null),
    'framework_js_version' => env('TRMNL_BLADE_FRAMEWORK_JS_VERSION', null),
    'framework_css_url' => env('TRMNL_BLADE_FRAMEWORK_CSS_URL', null),
    'framework_js_url' => env('TRMNL_BLADE_FRAMEWORK_JS_URL', null),
    'maplibre_js_url' => env('TRMNL_BLADE_MAPLIBRE_JS_URL', 'https://trmnl.com/js/maplibre-gl/5.24.0/maplibre-gl.js'),
    'maplibre_css_url' => env('TRMNL_BLADE_MAPLIBRE_CSS_URL', 'https://trmnl.com/js/maplibre-gl/5.24.0/maplibre-gl.css'),
    'highcharts_js_url' => env('TRMNL_BLADE_HIGHCHARTS_JS_URL', 'https://trmnl.com/js/highcharts/12.3.0/highcharts.js'),
    'chartkick_js_url' => env('TRMNL_BLADE_CHARTKICK_JS_URL', 'https://trmnl.com/js/chartkick/5.0.1/chartkick.min.js'),
    'highcharts_pattern_fill_url' => env('TRMNL_BLADE_HIGHCHARTS_PATTERN_FILL_URL', 'https://trmnl.com/js/highcharts/12.3.0/pattern-fill.js'),
    'themes' => ['black-and-yellow', 'dark', 'white-and-red'],
    'theme_urls' => [], // override a theme's default url
];

Set TRMNL_BLADE_FRAMEWORK_BASE_URL to host versioned framework assets on your own server. The base URL may include a path prefix. Explicit CSS, JavaScript and theme URL overrides take precedence over the base URL.

Use the framework-version screen prop to select a version for an individual screen. This prop takes precedence over the global CSS and JavaScript version settings, while explicit URL overrides still take precedence over the prop.

<x-trmnl::screen framework-version="2.3.7">
    <div class="view view--full"></div>
</x-trmnl::screen>

Optionally, you can publish the views using

php artisan vendor:publish --tag="trmnl-views"

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Benjamin Nussbaum
• All Contributors

License

The MIT License (MIT). Please see License File for more information.