Pushing Assets to the Browser - Your Own Theme Module

Question

For some beginners including myself , still figuring out on how to make our own theme module. But this is how I found a solution myself. Please Note : I don't know if this effects the performance issue on ApostropheCMS , but I'll leave this as a solution for all of us. Let's Begin ! (See Answer Below) :

Answer 1

UPDATED ANSWER FOR ALL APOSTROPHE DEVELOPERS BEGINNERS

We followed tutorial from Pushing Assets to the Browser , but there is a missing plot somehow on why the assets is still cannot be found. Let's say we have created our own theme module based on that tutorial here. I put mine for example :

my-theme
  - public/
     - css/
         - bootstrap/
             - bootstrap.min.css
         - font-awesome/
             - font-awesome.min.css
     - js/
         - bootstrap/
             - bootstrap.min.js
   - index.js

Then , you must put this in app.js to load the module :

  modules: {
      // in app.js
      // other config above
      // include my own-theme-module
      'my-theme' : {},

Then , in our my-theme/index.js , these are my pushAsset method :

module.exports = {
    construct : function(self,options){
        // Every asset you have in public folder
        self.pushAsset('script', 'bootstrap/bootstrap.min');
        self.pushAsset('stylesheet', 'bootstrap/bootstrap.min');
        self.pushAsset('stylesheet', 'custom');
    }
}

IMPORTANT NOTE : You don't have to include a link or script tag in your nunjucks template because it will make your performance issue on ApostropheCMS where minification process may not take if you put a link/script tags in nunjucks template. Let the Apostrophe made it for you , your job is only pushAsset ;)

Now, what if you have TOO MANY ASSETS , and you're too lazy to write the code everytime you upload a new asset , I have a shortcut using lodash , simple ! . In my-theme/index.js :

var _ = require('lodash');
module.exports = {
    stylesheets : [
        {   // Make sure your directory after css folder is correct for specific search
            name : 'bootstrap/bootstrap.min'
        },
        {
            name : 'custom'
        },
        {
            name : 'font-awesome/css/font-awesome.min'
        }
    ],
    scripts : [
        {
            name : 'bootstrap/bootstrap.min'
        }
    ],
    construct : function(self,options){
        // Every asset you have in public folder
        _.each(options.stylesheets || [] , function(item){
            self.pushAsset('stylesheet', item.name);
        });
        _.each(options.scripts || [] , function(item){
            self.pushAsset('script' , item.name)
        });
    }
}

---

What if I want to do <img> tag with my custom asset PNG for example ? Do I need to pushAsset too ?

Answer : NO , you don't have to push asset because its only works on Stylesheets and Scripts . Once you load the module in app.js , the apostrophe automatically upload the asset to the url to /modules/module-name/path-to-asset/ . For Example : <img src="/modules/my-theme/img/icon.png"> Simple !

---

YOU'RE DONE !

ANOTHER NOTE : If you need to call your asset ONLY via CSS for background-image that using url() or font-face, you need to call by using your own module name : /modules/your-module-name/path-to-your-asset/ . EASY ! !

AND REMEMBER , DON'T PUT LINK and SCRIPT tag to link an asset that you pushed. Apostrophe HAS MADE IT FOR YOU FOR POWERFUL PERFORMANCE ! Again , your job is to push the Asset ONLY.