Sage 10 on Pantheon, a guide and method

frankstallone · January 30, 2021, 7:31pm

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.

Atari · February 3, 2021, 5:18am

Acorn v2.0.0, Laravel 8.x, TailwindCSS

PR (with upgrade instructions)

log1x/next branch

Note: going to try this myself, will update. Thanks @Log1x

frankstallone · February 17, 2021, 1:08am

You get it working @Atari?

7 above needs updating: 'compiled' => wp_upload_dir()['basedir'].'/storage/framework/views',

frankstallone · February 17, 2021, 1:48am

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.

frankstallone · February 23, 2021, 1:50am

Everything seems to work fine when I have just storage/. I stated a fresh new project with the master branch now that @Log1x’s PR was pulled in.

I did run into an issue adding log1x/sage-svg:

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
yarn build:production && composer install --no-dev
Commit all changes & push

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.

frankstallone · February 23, 2021, 1:43am

Updated directions now that the original post’s PR is merged in.

Add node_modules/ to the Pantheon project repo’s .gitignore
Clone Sage 10 in themes folder git clone https://github.com/roots/sage.git
cd sage/
rm -rf /.git
rm -rf /.github
yarn && composer install && yarn build
Update config/view.php to, 'compiled' => wp_upload_dir()['basedir'].'/storage/framework/views',
mkdir ../../uploads/ (if it doesn’t exist)
mv storage/ ../../uploads/storage
ln -sfn ../../uploads/storage
composer install --no-dev
Edit .gitignore in theme and remove vendor/ and public/ folders from it
git add -f vendor/
git add -f public/
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!

Log1x · February 23, 2021, 2:55am

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.

frankstallone · February 23, 2021, 11:55am

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.