pixney/avviare-extension

About

Tailwind and Bootstrap theme setup generator for Pyrocms., _(*1)

I have written this extension simply to help myself get started more quickly and in a way i prefer to have things setup myself., _(*2)

If you like it you are free to use it., _(*3)

How to use it

Install pyro cms

composer create-project pyrocms/pyrocms [projectname]
php artisan install

For more information, see PyroCMS documentation, _(*4)

Install Avviare

Add the pixney repository to your composer., _(*5)

{
  "repositories": [{
    "type": "composer",
    "url": "https://packages.pixney.com"
  }]
}

Require it:, _(*6)

composer require "pixney/avviare-extension"
composer dump
php artisan addon:install avviare

Create a theme

Run the following command to generate the theme., _(*7)

php artisan avviare:create mycompany.theme.themename

Example: pixney.theme.mytheme, _(*8)

SVG Spitemaps (svg-spritemap-webpack-plugin)

If you use svgs, it's a recommended to create a svg sprite. After you have run npm install you simply place your svgs in resources/svgs and when you run npm run watch/production this plugin will create the svg sprite map for you., _(*9)

Using an svg within twig files

Include the spritemap in your view:, _(*10)

<div style="display:none">
    {% include "theme::partials/svgs" %}
</div>

To display the svg :, _(*11)

<svg><use xlink:href="#example" /></svg>

Use Browsersync

Within the webpack.mix.js file, set the proxy and files to watch for:, _(*12)

.browserSync({
    proxy: 'devsite.test',
    files: [
        'public/js/**/*.js',
        'public/css/**/*.css'
    ]
})

If you don't want to use svg sprite plugin or browsersync, simply comment out or remove the reference within webpack.mix.js, _(*13)

Styling

Simple styling, just remove it and make your own.., _(*14)

, _(*15)

After install

Run npm install from the root directory (basepath) to install all the dependencies specified in your package.json file., _(*16)

At the end run npm run watch to transpile/compile everything., _(*17)

Make sure you are using the theme.

Either to to display->settings within the admin to activate your theme or in your .env file specify: STANDARD_THEME=mycompany.theme.themename, _(*18)

Change the Open Graph and Favicon images

Within your theme directory, you want to change the images placed within resources/images. You can change it's location as well, but if you do make sure you update metadata.twig., _(*19)