Sage 10 on Pantheon as of Jan 30, 2021. These are the steps I used to get things running on Pantheon. There are brighter minds here, if you can look this over and see if I am missing anything, if anything could use clarification, or for random, “YOU USE PANTHEON DAS GARBAGE!” trolling I would appreciate it.
Add node_modules/ to the Pantheon .gitignore
Clone Sage 10 in themes folder git clone https://github.com/roots/sage.git
cd sage/
gco log1x/next (If you want Tailwind 2 from Brandon’s fantastic work)
rm -rf /.git
yarn && composer install && yarn build
Update config/view.php to, 'compiled' => wp_upload_dir()['basedir'].'/storage/framework/views',),
git add -f vendor/
git add -f public/
mv storage/ ../../uploads/storage
ln -sfn ../../uploads/storage
composer install --no-dev
Updated local url in webpack.mix.js (for Lando or Localdev)
Git commit all these changes
SFTP Mode: Upload storage/ folder to /code/wp-content/uploads
Git push!
Now I use Lando, and pointed the above local url to the Lando URL for Browsersync. YMMV. This worked locally, on Lando, always – without any changes.
I wonder now, because I haven’t had time to go further yet, when I make changes from here on out, do I need to upload the storage/ folder again due to changes? Or can I leave that the way it is now that it’s working. This is the black magic of the process I am not 100% familiar with. Composer and it’s relation to making changes/deploying. I’ll find out soon enough I suppose… and update this thread.
I tried these steps from scratch on a new theme, using the master branch since this has been merged in, in the same WordPress install as above, using storage2/ folder where I mentioned storage/ folder above regarding symlink and mv and simply could not get it working. I got the same error message I saw before.
I am not sure it’s because I cannot use storage2/ as a folder name even though the view.php was pointing correct as was the symlink, or what.
On the left is my local with Lando and yarn start. The SVG loads just fine with the directive @svg('svg.bars', 'w-5'). On the right is Pantheon. Frustrating. I really love working in Sage but this is rough.
What got me to a broken SVG state:
composer require log1x/sage-svg
Create resources/svg folder
Add .copyDirectory('resources/svg', 'public/svg'); to webpack.mix.js
Test functionality adding @svg('svg.bars', 'w-5') to a blade template
EDIT: I can get this working by replacing the above directive with the helper <?php $bars = get_svg('svg.bars', 'w-5'); echo $bars ?>. I would prefer the directive, and I am using other directives with log1x/sage-directives just fine locally and on Pantheon. I also updated the log1x/sage-svg/svg.php to look in the public/ folder instead of the dist/ folder. It was working before, and after locally but neither on Pantheon.
Create themes/sage/config/svg.php and set your base path there.
<?php
use function Roots\base_path;
return [
/*
|--------------------------------------------------------------------------
| Path
|--------------------------------------------------------------------------
|
| This value is the default path used by SageSVG for finding SVG files.
| This path is then resolved internally if an absolute path is not being
| used.
|
*/
'path' => base_path('public'),
/*
|--------------------------------------------------------------------------
| Class
|--------------------------------------------------------------------------
|
| Here you can specify a default class to be added on all inlined SVGs.
| Much like how you would define multiple classes in an HTML attribute,
| you may separate each class using a space.
|
*/
'class' => '',
];
I’ll push a 2.0.0 to SVG Sage to make it work out of the box.
Thanks for the reply @Log1x. I reset the vendor/logi1x/sage-svg/config/svg.php back to dist/, and created the themes/sage/config/svg.php with the base_path as you mentioned. However, I am getting the same results as before. The directive’s aren’t parsing, instead they are outputting the actual text, @svg('svg.bars', 'w-5') as shown in the screenshot above.
In the screenshot below, the yellow arrows will output as if they were text, the purple arrows will properly output the icon.
What is weird about that is I am using your other package, sage-directives (thank you), to output other directives of ACF fields successfully on the same site. This code below works fine.
I’ve run into the same issue deploying to WPE through Github actions. The latest version of @Log1x’s sage-svg works a-ok locally but the directives aren’t parsed in production. I haven’t had too much time to fiddle yet, but for a quick fix {{ get_svg() }} seems to work and is almost as elegant as the @svg directive. Just an FYI!
you are too kind! I am happy to help troubleshoot / test, not sure exactly where to start.