Rev hashes helper

Kirby 2 Solved ✅
1

I have rev manifest generated for my css and js file and also for images which looks like this:

{
  "images/logo.svg": "images/logo-1fd5c391ed.svg",
  "javascripts/app.js": "javascripts/app-b6ac862fd4bcfbac1d03.js",
  "stylesheets/index.css": "stylesheets/index-2f73335419.css"
}

Now I need helper which check if this json exist and replace regular asseth path or use non-hashed version.
I want used it for css() and js() functions and also for new Asset() and url().

Something like rev('images/logo.svg') which returns images/logo-1fd5c391ed.svg if manifest exist or only images/logo.svg.

Thanks for any suggestion…

2

I’d write a function as a plugin that checks if the file exists and if so, retrieves the path, otherwise return the standard path.

3

Yes, but I’m not programmer :slight_smile:

  1. So I need create plugin: https://getkirby.com/docs/developer-guide/plugins
  2. I tried to create a function:
function getAssetRevUrl($path) {
  $string = @file_get_contents('http://equator.local/assets/dist/rev-manifest.json');

  if($string) {
    $json = json_decode($string, true);

    if(array_key_exists($path, $json)) {
      return $json[$path];
    } else {
      return $path;
    }
  } else {
    return $path;
  }
}

Q: Is it possible use file_get_contents with relative path to project root like this: file_get_contents('/assets/dist/rev-manifest.json');? I’m getting error…

Thanks

4

You can use kirby()->roots()->assets() to get the root of the assets folder.

5

So this is my final function

function assetUrl($path) {
  $manifest = @file_get_contents(kirby()->roots()->assets() . '/dist/rev-manifest.json');

  if($manifest) {
    $json = json_decode($manifest, true);

    if(array_key_exists($path, $json)) {
      return kirby()->urls()->assets() . '/dist/' . $json[$path];
    } else {
      return kirby()->urls()->assets() . '/dist/' . $path;
    }
  } else {
    return kirby()->urls()->assets() . '/dist/' . $path;
  }
}

And usecase

<?= css(assetUrl('stylesheets/index.css')) ?>

Any improvements? :slight_smile:

Thanks for your time!

6

I made this little plugin a while ago but haven’t told anyone about it until now. It works quite like the Cachebuster plugin but instead of returning link and script tags, it returns the URL string containing the last modification timestamp.

I needed only the URL to use it on the Meta Tags plugin. Also to have more control over script options like async or defer and to preload assets using HTML preload meta tag.

Instead of relying on a JSON manifest, the plugin checks for the asset last modification date. It requires some Apache or Nginx rule which can be found at: https://github.com/pedroborges/kirby-asset-cachebuster

1 Like
7

I kind of like the kirby-fingerprint plugin…

8

I’m using Blendid: https://github.com/vigetlabs/blendid for frontend tasks.
So I need working within manifest, which Blendid generate because hashed version also contains hashed adresses for images and fonts.

But thanks both for tips!

9

@pedroborges I think you can generate defer and async attrs within css helper…

<?php echo css('assets/css/print.css', ['async' => true]) ?>
10

Cool, didn’t know that.

For preloading the assets at the top of the HTML I still need the asset timestamped URL:

<link href="{{ asset('assets/css/main.css') }}" rel="preload" as="style">
<link href="{{ asset('assets/js/main.js') }}" rel="preload" as="script">

And for style, I insert them using the Meta Tags plugin as it is easy to have page specific styles. Just my personal preference.