Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
8 posts Page 1 of 1
People,

There is this link http://particletree.com/notebook/automa ... ipt-files/
And it is pretty cool in the way it suggests automated job for versioning. :D
However it is flawed and if you need something like that in CouchCMS, I have a solution. Let me know if anyone is interested in doing this the couch-way. :lol:

You can make it manually, but better with some tool. Sample:
Code: Select all
<link rel="stylesheet" type="text/css" href="assets/css/custom.css.24-11-2016-160607.css" >
<link rel="stylesheet" type="text/css" href="assets/css/print.css.1-12-2016-145119.css" >
<!-- /global stylesheets -->

<!-- Core JS files -->
<script type="text/javascript" src="assets/js/plugins/loaders/pace.min.js.31-8-2016-080522.js"></script>
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js.3-9-2016-142908.js"></script>


A working sample picture:
ScreenCut-02-09---00-15-17-.png
Sample of css and js versioned by last modification date
ScreenCut-02-09---00-15-17-.png (186.94 KiB) Viewed 647 times


This is how it was coded:
ScreenCut-02-09---00-18-15-.png
Here is the way it's coded
ScreenCut-02-09---00-18-15-.png (62.44 KiB) Viewed 647 times
So in a fast and straightforward way, this awesomly helps to code/debug JS/CSS files without instructing browser to disable cache. Clients will always receive the latest and greatest update in time :)

This started, when file.js?v=8 didn't work correctly - browser was serving the same cached file. Also I was constantly forgetting to increase the version after a small edit. It never bothers me again now :)

I now write the links and scripts from the old way
Code: Select all
<link href="assets/css/site.css" rel="stylesheet" type="text/css" >
<script src="assets/js/main.js" type="text/javascript" ></script>

To the beautiful and clean new way:
Code: Select all
<cms:rel src="assets/css/site.css" />
<cms:rel src="assets/js/main.js" />


<cms:rel /> tag guesses the type of the file from the extension and provides full correct markup. It also works for the resources without extensions, like google fonts (with optional parameter type):
Code: Select all
<cms:rel type='css' src="http://fonts.googleapis.com/css?family=Roboto:300" >


For often-changed files I enable the versioning:
Code: Select all
<cms:rel last_mod='1' src="assets/css/site.css"  />
<cms:rel last_mod='1' src="assets/js/main.js"  />

last_mod parameter adds complete date of last modification of the file, by adding it after the file-extension and for example the generated output is like this:
Code: Select all
<link rel="stylesheet" type="text/css" href="assets/css/print.css^1-12-2016-145119^.css" >
<script type="text/javascript" src="assets/js/main.js^22-12-2016-072213^.js"></script>

See the extras after the regular file name - ^{ date in format j-n-Y-His }^.{ extension }

Your browser is definitely requesting the latest possible file. This solution is so nice, that it doesn't mess with any possible file names, including digits, multiple extensions as in minified versions of js/css file.min.js, etc. Complete freedom of file names contrary to solutions that people offer in the internet. I designed this to serve my purpose to never care about the original filename and have a piece of mind.

Create a .htaccess file in root (if it's not there yet) and make sure following lines are there, which internally redirect the browser's request to the original file without date. Our original files are kept intact, we don't need to rename them on disk.
Code: Select all
RewriteEngine On
RewriteRule ^(.+)\^([\d-]+)\^\.(js|css)$ $1 [L]


Htaccess line uses the rewrite engine and a simple rule - anything that ends with filename.extension.^date^.extension will be redirected to just filename.extension.

The rest of the code goes to /couch/addons/kfunctions.php for CouchCMS to have this awesome functionality and us to enjoy it.

Function rel is called when CouchCMS parses the tag <cms:rel />.
Code: Select all
$FUNCS->register_tag( 'rel', array('CustomTags', 'rel') );


Full listing of the function. It expects 3 parameters: src, type, last_mod. The required one is src. The other two are not required, as discussed before. File from src is being analyzed to determine its type by extension (if type not set explicitly) - either JS or CSS. Then function adds the last modification date (if last_mod='1') and outputs correct markup, again depending on the type. Comments in function should guide through code. Informative error messages provide a nice context of usage + beautifully serve as documentation by providing info about expected parameters.

Complete listing follows.

Code: Select all
$FUNCS->register_tag( 'rel', array('CustomTags', 'rel') );

class CustomTags{

    function rel( $params, $node ){
        global $CTX, $FUNCS;

        if( count($node->children) ) {die("ERROR: Tag \"".$node->name."\" is a self closing tag");}
        extract( $FUNCS->get_named_vars(
                    array(
                          'src'=>'',
                          'type'=>'',
                          'last_mod'=>'0',
                          'media'=>'' // media="min-width: 590px"
                          ),
                    $params)
               );

        $media = trim( $media );
        if( $media ) $media = 'media="' . $media . '"';
        $file = trim( $src );
        $file = str_replace( K_SITE_URL, "", $file );
        $type = strtolower( trim( $type ));
        if( !$file ) return;
        if( strlen(trim( $src )) !== strlen($file) ){
            $site_link = K_SITE_URL;
        }

        $last_mod = ( $last_mod==1 ) ? 1 : 0;

        // <script> or <link>
        $types = array(
             'js' => 'text/javascript',
             'css' => 'text/css'
         );

        // provided type is expected one
        if( $type && !array_key_exists($type, $types) ) die("ERROR: Tag \"".$node->name."\": type can be one of the following - " . implode( ", ", array_keys($types) ) );

        // file details
        $fileDetails = pathinfo( $file );
        $ext = strtolower( $fileDetails["extension"] );
        $dir = strtolower( $fileDetails["dirname"] );
        $fle = strtolower( $fileDetails["filename"] );

        // alternative search for type if it is not provided
        if( !$type ){
            if( array_key_exists($ext, $types) ){
                $type = $ext;
            }else{
                die("ERROR: Tag \"".$node->name."\": expected parameter \"type\" not found. File extention is also not one of the following - " . implode( ", ", array_keys($types) ) );
            }
        }

        // modify filename
        if( $last_mod && strlen($ext) ) $file = $dir . "/" . $fle . "." . $ext . "^" . date( 'j-n-Y-His', filemtime( K_SITE_DIR . $file ) ) . "^." . $ext;

   if( version_compare(K_COUCH_VERSION, "1.4.7", ">") ){
      $eol = PHP_EOL;
   }

        switch ($type) {
            case 'css':
                return '<link rel="stylesheet" type="' . $types[$type] . '" href="' . $site_link . $file . '" ' . $media . '>' . $eol;
            case 'js':
                return '<script type="' . $types[$type] . '" src="' . $site_link . $file . '"></script>' . $eol;
            default :
                return;
        }

    }
}
GREAT !!!

Image
not works:
Code: Select all
<cms:rel src="<cms:show k_site_link />css/style.css" last_mod='1' />



<cms:show k_site_link /> is ignored
andrejprus wrote: <cms:show k_site_link /> is ignored


Fixed, thanks!

Initially I didn't code it. It is not necessary to add site link to assets if you have
Code: Select all
<head>
    <base href="<cms:show k_site_link />" >
</head>
Hey all, here is a standalone .htaccess which I found is very comfortable to have as a drop-in file for folder with assets.

File should work regardless of what your assets folder is named and regardless of presence of .htaccess file in the root of website. So, a drop in folder and it should be good to go. Requirements are the same as usual - have rewrite engine enabled and that's it.

File's content:
Code: Select all
<IfModule mod_rewrite.c>
RewriteEngine On

# Rule for Versioned Static Files
RewriteRule ^(.+)\^([\d-]+)\^\.(js|css)$ $1 [L]

</IfModule>

Attachments

Code updated with media for CSS. Thanks to this article https://dev.to/sanjsanj/optimising-the- ... thebrowser

Code: Select all
// This css will block rendering of the page until it is downloaded and processed.
<link rel="stylesheet" href="mobile-styles.css">

// This css will download in the background on mobile and allow the page to load.
<link rel="stylesheet" href="desktop-styles.css" media="min-width: 590px">
Code updated with support of adequate output of returned strings with a newline for couch2.0 and above.
It's because my editor is set up to remove any spaces after string is terminated. Couch2 removes newline in this case.. So this I had to fix for us :)
8 posts Page 1 of 1

Who is online

In total there is 1 user online :: 0 registered, 0 hidden and 1 guest
(based on users active over the past 5 minutes)

Users browsing this forum: No registered users and 1 guest