Roots Discourse

Sage 10 on Pantheon, a guide and method

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.

  1. Add node_modules/ to the Pantheon .gitignore
  2. Clone Sage 10 in themes folder git clone https://github.com/roots/sage.git
  3. cd sage/
  4. gco log1x/next (If you want Tailwind 2 from Brandon’s fantastic work)
  5. rm -rf /.git
  6. yarn && composer install && yarn build
  7. Update config/view.php to, 'compiled' => wp_upload_dir()['basedir'].'/storage/framework/views',),
  8. git add -f vendor/
  9. git add -f public/
  10. mv storage/ ../../uploads/storage
  11. ln -sfn ../../uploads/storage
  12. composer install --no-dev
  13. Updated local url in webpack.mix.js (for Lando or Localdev)
  14. Git commit all these changes
  15. SFTP Mode: Upload storage/ folder to /code/wp-content/uploads
  16. 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.

3 Likes

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

1 Like

You get it working @Atari?

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

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.

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:

  1. composer require log1x/sage-svg
  2. Create resources/svg folder
  3. Add .copyDirectory('resources/svg', 'public/svg'); to webpack.mix.js
  4. Test functionality adding @svg('svg.bars', 'w-5') to a blade template
  5. yarn build:production && composer install --no-dev
  6. 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.

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

  1. Add node_modules/ to the Pantheon project repo’s .gitignore
  2. Clone Sage 10 in themes folder git clone https://github.com/roots/sage.git
  3. cd sage/
  4. rm -rf /.git
  5. rm -rf /.github
  6. yarn && composer install && yarn build
  7. Update config/view.php to, 'compiled' => wp_upload_dir()['basedir'].'/storage/framework/views',
  8. mkdir ../../uploads/ (if it doesn’t exist)
  9. mv storage/ ../../uploads/storage
  10. ln -sfn ../../uploads/storage
  11. composer install --no-dev
  12. Edit .gitignore in theme and remove vendor/ and public/ folders from it
  13. git add -f vendor/
  14. git add -f public/
  15. Updated local url in webpack.mix.js (for Lando or Localdev)
  16. Git commit all these changes
  17. SFTP Mode: Upload storage/ folder to /code/wp-content/uploads
  18. Git push!

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.

1 Like

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.