How to add new folders to resources/assets in sage9

sage
1

Hi!

Sorry if this has been answered before, I’ve read the Sage Book 3rd edition and didn’t find an example nor in the forums.

I want to add a new folder with pdf files that should go to dist folder in production.

I thought that by adding “pdf” to the code in resources/assets/webpack.config.js (line 97) and creating the folder would be enough:


test: /\.(ttf|otf|eot|woff|woff2?|png|jpe?g|gif|svg|ico|pdf)$/,
include: config.paths.assets,
loader: 'url',
options: {
 limit: 4096,
 name: `[path]${assetsFilenames}.[ext]`,

But it’s not working. What can I do?

Thank you very much!!

1 Like
2

Hey Sergi,

The Webpack process loads files when they are used within an entry point. By default, these are the following entry points:

The assets within the resources/assets folder are expected to be used to build the styles and scripts associated with each entry point. Unless you reference the PDF within one of these files, then it will not be copied to the dist folder since that only includes the built files and their required assets. So it would be best to create your pdfs — or perhaps more filetype agnostically named documents — directory within resources and then link to them within that directory. Keep in mind that if you wanted to use asset_path() or @asset to load these documents, it will no longer work. You could make a new Blade directive easy enough though:

(Untested)

// app/setup.php after @asset definition

    /**
     * Create @doc() Blade directive
     */
    sage('blade')->compiler()->directive('doc', function ($document) {
        return "<?= get_theme_file_uri().'resources/documents/'.$document ?>";
    });

Usage:

<a href="@doc('filename.pdf')">Download</a>
3

Thank you so much for your detailed answer @knowler!

Alright! I will try today what you suggest:

  • Place docs folder in resources instead of assets
  • Create new blade directive and try to link the files.

On the other hand, I have a similar issue, as this is an old project that I migrated to Sage and has a custom generated font in woff format. But I see this particular format, even being linked, it’s not being transported into dist folder:

in _global.scss:

@font-face {
  font-family: 'customaestivum';
  src: url('../fonts/icomoon.eot');
  src:
    url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.woff') format('woff'),
    url('../fonts/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

image

4

I can confirm it works flawlessly! Thank you!

There was only a / before “resources” missing in the blade directive:

// app/setup.php after @asset definition

    /**
     * Create @doc() Blade directive
     */
    sage('blade')->compiler()->directive('doc', function ($document) {
        return "<?= get_theme_file_uri().'/resources/documents/'.$document ?>";
    });
1 Like
5

Heya @SergiArias , this will work withing a template, but how do you call this withing a controller, like asset_path() for example (which is @asset in a template)? I guess you need a separate function that invokes a directive somehow?

6

get_theme_file_uri().'/resources/documents/'.$document

1 Like
7

Yeah that’s obvious, but what about using @doc somehow? :smiley: cheers though!

8

This isn’t working for me with Sage 9, meaning after running yarn build, there isn’t any favicon directory collected within dist with my favicon.

// app/setup.php after @asset definition

  
    sage('blade')->compiler()->directive('favicon', function ($favicons) {
        return "<?= get_theme_file_uri().'resources/favicons/'.$favicons ?>";
    });

// head.blade.php 

<link rel="apple-touch-icon" sizes="180x180" href="@favicon('apple-touch-icon.png')">
9

With this method, your favicons wouldn’t be in dist since they aren’t being processed with webpack. The Blade directive is using the source path (resources/favicons). The final expected URI would be something like: /app/themes/sage/resources/favicons/apple-touch-icon.png.

10

I guess that would be my followup question – what do I need to add to the webpack config file or config.json in order to collect anything inside of resources/favicons and add it to dist/favicons?

11

Why does it need to be in dist/favicons and why do you need a custom directive for this? If I were you, I’d just put favicons in resources/assets/images and just use @asset instead. The @asset directive should be used for anything that webpack is generating.

Example usage:

<link rel="apple-touch-icon" sizes="180x180" href="@asset('images/apple-touch-icon.png')">
1 Like