Minimal Jigsaw site

I like simple under-engineered solutions.

This site was built with Jigsaw a couple of years ago, but I didn’t like that I was using both PHP and Node.js (to compile assets with Laravel Mix). I switched to an all Node.js solution (Astro) for about a year, but I missed the simplicity of Jigsaw in comparison.

So I switched back to Jigsaw, but decided I’d take a minimal approach this time with the below goals in mind:

  • Zero NPM dependencies. I want the site to be solely compiled with PHP.
  • Single file components. I want to author the component’s CSS in the same file I author the HTML. An approach I really liked in Astro.

Component CSS

The goal is to be able to author CSS and HTML in the same component file

1<style>
2  /* my component CSS */
3</style>
4 
5<div>
6  <!-- my component -->
7</div>

Using Blade’s stacks, the <style> element can be pushed to the <head>:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  @stack('css')
5</head>
6.
7.
8</html>

Using the @pushOnce directive, the <style> element is only pushed to the <head> once per page. It is also only pushed if the component is used on the page.

1@pushOnce('css')
2  <style>
3    /* my component CSS */
4  </style>
5@endPushOnce
6 
7<div>
8  <!-- my component -->
9</div>

For a light site the CSS doesn’t need to be served via an external style sheet. So I am happy to keep the components’ CSS in embedded <style> elements.

Base CSS

The base CSS is authored in a CSS file. So I could add it to the page via an external style sheet, but seeing how small it is I chose to follow the same approach as the components’ CSS and embed it directly to the page using the inline() helper function:

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <style>
 5    {{ inline('/assets/build/css/main.css') }}
 6  </style>
 7 
 8  @stack('css')
 9</head>
10.
11.
12</html>

CSS Minification

Considering the way I chose to author the CSS, I decided to create a pair of custom Blade directives that minifies the CSS inside it using a PHP-based minifier (matthiasmullie/minify):

1@minifyCSS
2  <style>
3      {{ inline('/assets/build/css/main.css') }}
4  </style>
5 
6  @stack('css')
7@endMinifyCSS

./blade.php:

 1<?php
 2/** @var \Illuminate\View\Compilers\BladeCompiler $bladeCompiler */
 3 
 4$bladeCompiler->directive('minifyCSS', function ($expression) {
 5  return '<?php
 6    if($page->minifyCSS) {
 7      ob_start();
 8    }
 9  ?>';
10});
11 
12$bladeCompiler->directive('endMinifyCSS', function ($expression) {
13  return '<?php
14    if($page->minifyCSS) {
15      $minifier = new MatthiasMullie\Minify\CSS();
16      $minifier->add(str_replace(["<style>", "</style>"], "", ob_get_clean()));
17      echo "<style>" . $minifier->minify() . "</style>";
18    }
19  ?>';
20});

And in the configuration file of any environment where CSS needs to be minified, set minifyCSS to true:

1return [
2  'production' => true,
3  'minifyCSS' => true,
4];

JavaScript

Right now the site doesn’t use any JS, but if I was to add any, I would use Alpine.js. This would enable me to keep this NPM-free and continue with my single file component approach.

Plus I love Alpine!

Syntax highlighting

I blog about web dev so code syntax highlighting is a must. I offloaded the syntax highlighting to Torchlight which has first-party support for Jigsaw.

Putting it together

Example layout

 1<!DOCTYPE html>
 2<html lang="{{ $page->language ?? 'en' }}">
 3  <head>
 4    {{-- meta tags --}}
 5 
 6    @minifyCSS
 7      <style>
 8          {{ inline('/assets/build/css/main.css') }}
 9      </style>
10      @stack('css')
11    @endMinifyCSS
12  </head>
13  <body>
14    <x-header />
15 
16    <main
17      @yield('body')
18    </main>
19 
20    <x-footer />
21  </body>
22</html>

Example page

 1@extends('_layouts.main')
 2 
 3@pushOnce('css')
 4  <style>
 5    /* page-specific CSS */
 6  </style>
 7@endPushOnce
 8 
 9 
10@section('body')
11  {{-- page content example --}}
12 
13  <section>
14    <h2>Latest posts</h2>
15 
16    @foreach($content_posts->take(5) as $post)
17      <x-posts.card :post="$post" />
18    @endforeach
19 
20    <a href="/blog">View all posts →</a>
21  </section>
22@endsection

Example component

1@pushOnce('css')
2  <style>
3    /* component CSS */
4  </style>
5@endPushOnce
6 
7<div>
8  <!-- component -->
9</div>


This content originally appeared on Hussein Al Hammad and was authored by Hussein Al Hammad

I like simple under-engineered solutions.

This site was built with Jigsaw a couple of years ago, but I didn't like that I was using both PHP and Node.js (to compile assets with Laravel Mix). I switched to an all Node.js solution (Astro) for about a year, but I missed the simplicity of Jigsaw in comparison.

So I switched back to Jigsaw, but decided I'd take a minimal approach this time with the below goals in mind:

  • Zero NPM dependencies. I want the site to be solely compiled with PHP.
  • Single file components. I want to author the component's CSS in the same file I author the HTML. An approach I really liked in Astro.

Component CSS

The goal is to be able to author CSS and HTML in the same component file

1<style>
2  /* my component CSS */
3</style>
4 
5<div>
6  <!-- my component -->
7</div>

Using Blade's stacks, the <style> element can be pushed to the <head>:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  @stack('css')
5</head>
6.
7.
8</html>

Using the @pushOnce directive, the <style> element is only pushed to the <head> once per page. It is also only pushed if the component is used on the page.

1@pushOnce('css')
2  <style>
3    /* my component CSS */
4  </style>
5@endPushOnce
6 
7<div>
8  <!-- my component -->
9</div>

For a light site the CSS doesn't need to be served via an external style sheet. So I am happy to keep the components' CSS in embedded <style> elements.

Base CSS

The base CSS is authored in a CSS file. So I could add it to the page via an external style sheet, but seeing how small it is I chose to follow the same approach as the components' CSS and embed it directly to the page using the inline() helper function:

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <style>
 5    {{ inline('/assets/build/css/main.css') }}
 6  </style>
 7 
 8  @stack('css')
 9</head>
10.
11.
12</html>

CSS Minification

Considering the way I chose to author the CSS, I decided to create a pair of custom Blade directives that minifies the CSS inside it using a PHP-based minifier (matthiasmullie/minify):

1@minifyCSS
2  <style>
3      {{ inline('/assets/build/css/main.css') }}
4  </style>
5 
6  @stack('css')
7@endMinifyCSS

./blade.php:

 1<?php
 2/** @var \Illuminate\View\Compilers\BladeCompiler $bladeCompiler */
 3 
 4$bladeCompiler->directive('minifyCSS', function ($expression) {
 5  return '<?php
 6    if($page->minifyCSS) {
 7      ob_start();
 8    }
 9  ?>';
10});
11 
12$bladeCompiler->directive('endMinifyCSS', function ($expression) {
13  return '<?php
14    if($page->minifyCSS) {
15      $minifier = new MatthiasMullie\Minify\CSS();
16      $minifier->add(str_replace(["<style>", "</style>"], "", ob_get_clean()));
17      echo "<style>" . $minifier->minify() . "</style>";
18    }
19  ?>';
20});

And in the configuration file of any environment where CSS needs to be minified, set minifyCSS to true:

1return [
2  'production' => true,
3  'minifyCSS' => true,
4];

JavaScript

Right now the site doesn't use any JS, but if I was to add any, I would use Alpine.js. This would enable me to keep this NPM-free and continue with my single file component approach.

Plus I love Alpine!

Syntax highlighting

I blog about web dev so code syntax highlighting is a must. I offloaded the syntax highlighting to Torchlight which has first-party support for Jigsaw.

Putting it together

Example layout

 1<!DOCTYPE html>
 2<html lang="{{ $page->language ?? 'en' }}">
 3  <head>
 4    {{-- meta tags --}}
 5 
 6    @minifyCSS
 7      <style>
 8          {{ inline('/assets/build/css/main.css') }}
 9      </style>
10      @stack('css')
11    @endMinifyCSS
12  </head>
13  <body>
14    <x-header />
15 
16    <main
17      @yield('body')
18    </main>
19 
20    <x-footer />
21  </body>
22</html>

Example page

 1@extends('_layouts.main')
 2 
 3@pushOnce('css')
 4  <style>
 5    /* page-specific CSS */
 6  </style>
 7@endPushOnce
 8 
 9 
10@section('body')
11  {{-- page content example --}}
12 
13  <section>
14    <h2>Latest posts</h2>
15 
16    @foreach($content_posts->take(5) as $post)
17      <x-posts.card :post="$post" />
18    @endforeach
19 
20    <a href="/blog">View all posts →</a>
21  </section>
22@endsection

Example component

1@pushOnce('css')
2  <style>
3    /* component CSS */
4  </style>
5@endPushOnce
6 
7<div>
8  <!-- component -->
9</div>


This content originally appeared on Hussein Al Hammad and was authored by Hussein Al Hammad


Print Share Comment Cite Upload Translate Updates
APA

Hussein Al Hammad | Sciencx (2023-04-08T00:00:00+00:00) Minimal Jigsaw site. Retrieved from https://www.scien.cx/2023/04/08/minimal-jigsaw-site/

MLA
" » Minimal Jigsaw site." Hussein Al Hammad | Sciencx - Saturday April 8, 2023, https://www.scien.cx/2023/04/08/minimal-jigsaw-site/
HARVARD
Hussein Al Hammad | Sciencx Saturday April 8, 2023 » Minimal Jigsaw site., viewed ,<https://www.scien.cx/2023/04/08/minimal-jigsaw-site/>
VANCOUVER
Hussein Al Hammad | Sciencx - » Minimal Jigsaw site. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/08/minimal-jigsaw-site/
CHICAGO
" » Minimal Jigsaw site." Hussein Al Hammad | Sciencx - Accessed . https://www.scien.cx/2023/04/08/minimal-jigsaw-site/
IEEE
" » Minimal Jigsaw site." Hussein Al Hammad | Sciencx [Online]. Available: https://www.scien.cx/2023/04/08/minimal-jigsaw-site/. [Accessed: ]
rf:citation
» Minimal Jigsaw site | Hussein Al Hammad | Sciencx | https://www.scien.cx/2023/04/08/minimal-jigsaw-site/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts