aleksip / shila-drupal-theme Goto Github PK

Atomic design and Pattern Lab friendly, component-based, fairly unopinionated starting point for new Drupal themes

License: GNU General Public License v2.0

HTML 35.18% JavaScript 1.13% PHP 0.25% CSS 63.44%

drupal drupal-theme drupal-8 pattern-lab atomic-design

shila-drupal-theme's Introduction

Shila theme for Drupal 8 🐕

An atomic design and Pattern Lab friendly, component-based, fairly unopinionated starting point for new Drupal 8 themes. Shila theme can be used stand-alone with Pattern Lab, and currently supports both Pattern Lab Node and Pattern Lab PHP.

For more information and documentation, see the project Wiki.

Setup

Prerequisites: npm and Composer installed.

In the Shila theme root directory run

npm run setup

Additional setup for Pattern Lab PHP

The default setup is for Pattern Lab Node. Follow these additional instructions if you want to use Pattern Lab PHP.

In the Shila theme root directory run

npm run setup-pattern-lab-php

Then open gulp-config.yml and uncomment the dir line in the Pattern Lab section.

Gulp tasks

The theme includes a gulpfile.js with some useful tasks. However, using Gulp and these tasks is completely optional.

The default task compiles any Sass files, generates Pattern Lab, launches a Browsersync server at http://localhost:3000 and then keeps watching for any changes made to Sass, Twig and other files.

For the default task, in the Shila theme root directory run

gulp

To list all available tasks with short descriptions, in the Shila theme root directory run

gulp --tasks

Known issues with Pattern Lab Node

There might be one or more errors similar to request to http://127.0.0.1:32853/?type=renderFile failed, reason: connect ECONNRESET 127.0.0.1:32853. Try generating the site again until there are no such errors.

Integrating with Drupal

Prerequisites: Component Libraries module installed and enabled.

shila-drupal-theme's People

Contributors

Stargazers

Watchers

shila-drupal-theme's Issues

Install script fails at 'php core/console --generate'

When I run php core/console --generate it echoes configuring pattern lab... but then I get the following error:

your styleguide won't render because i can't find your styleguide files. are you sure they're at .\C:\Users\Matthew.Boman\projects\php-server\themes\shila-drupal-theme-dev\patternlab\vendor/pattern-lab/styleguidekit-twig-default? you can fix this in ./config/config.yml by editing styleguideKitPath...

What do you mean by styleguide files? There is a folder at the path exactly like this. Should there be more than just the Twig templates?

Thanks!

PHP Notice: Array to string conversion in /vendor/twig/twig/lib/Twig/Environment.php(403) : eval()'d code

I'm getting an:
PHP Notice: Array to string conversion in /vendor/twig/twig/lib/Twig/Environment.php(403) : eval()'d on line 20 also for other lines as (80,74,31...)
This's happen over watch command.
So:

php core/console --watch
php core/console --server --with-watch

php core/console --generate is fine.

Seems it's related

I don't find where you are printing a array on yours patterns to causing this.

403 Forbidden on Pattern Info

Hi,

I'm using Apache, and when I access the theme pattern lab, I see 403 forbidden errors on the Pattern info code areas:

<title>403 Forbidden</title>
Forbidden

You don't have permission to access /themes/shila-drupal-theme/pattern-lab/public/patterns/01-molecules-forms-comment-form-comment-form/01-molecules-forms-comment-form-comment-form.twig on this server.

Apache/2.4.18 (Ubuntu) Server at www.shila.dev Port 80

It seems that is caused by the twig value on in D8 .htaccess file:

Any idea on how to workaround that?

Thanks!

JSON data is not reflecting on page load

Json data is not reflecting on our page If we are trying to call organism in our custom file (.html.twig).

Example: Menu list.

Note: Data from JSON file is reflecting on generated HTML in ".markup-only.html".

Request you to please help us on this.

Not a valid pattern

you may have a typo in 03-templates/shila-basic-page/shila-basic-page.html.twig. "base.twig" is not a valid pattern...

This error appears during the install and when running gulp

php core/console --generate _data directory error

Was just at DrupalCon New Orleans and attended the The Big Easy: Streamlined Front-end Development with Pattern Lab and Twig. Very excited to get what you've worked on going!

I followed the instructions and got to the last step: php core/console --generate

but got the following error:

configuring pattern lab...
_data/ doesn't exist so you won't have dynamic data...

Warning: mkdir(): No such file or directory in /Users/bmarshall/Documents/Development/Sandbox/drupal8/themes/starterkit/pattern-lab/vendor/pattern-lab/core/src/PatternLab/Data.php on line 109

Fatal error: Uncaught exception 'InvalidArgumentException' with message 'The "/Users/bmarshall/Documents/Development/Sandbox/drupal8/themes/starterkit/pattern-lab/../starterkit/dist/_data/" directory does not exist.' in /Users/bmarshall/Documents/Development/Sandbox/drupal8/themes/starterkit/pattern-lab/vendor/symfony/finder/Symfony/Component/Finder/Finder.php:677
Stack trace:
#0 /Users/bmarshall/Documents/Development/Sandbox/drupal8/themes/starterkit/pattern-lab/vendor/pattern-lab/core/src/PatternLab/Data.php(114): Symfony\Component\Finder\Finder->in('/Users/bmarshal...')
#1 /Users/bmarshall/Documents/Development/Sandbox/drupal8/themes/starterkit/pattern-lab/vendor/pattern-lab/core/src/PatternLab/Generator.php(63): PatternLab\Data::gather()
#2 /Users/bmarshall/Documents/Development/Sandbox/drupal8/themes/starterkit/pattern-lab/vendor/pattern-lab/core/src/PatternLab/Console/Commands/GenerateCommand.php(41): PatternLab\Generator->generate(Array)
#3 /Users/bmarshall/Documents/Development/Sandbox/drupal8/themes/starterkit/pa in /Users/bmarshall/Documents/Development/Sandbox/drupal8/themes/starterkit/pattern-lab/vendor/symfony/finder/Symfony/Component/Finder/Finder.php on line 677

Did I miss something?

View Pattern Info button is not working for all atoms, molecules and organisms

Composer install fails when trying to install starter kit

I'm trying to follow your process for setting up the starter kit but when I get to the Composer install section. I'm sorry I'm not especially experienced with this but it appears to say that there's a dependency within your plugin-data-transform that calls for twig version "0.*" but since twig is over v1 and is itself installed as a v1+ already in the dependencies there's a problem.

Below is the error I get when I try to run composer install:

loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Installation request for aleksip/plugin-data-transform dev-master -> satisfiable by aleksip/plugin-data-transform[dev-master].
    - aleksip/plugin-data-transform dev-master requires pattern-lab/patternengine-twig 0.* -> satisfiable by pattern-lab/patternengine-twig[v0.5.0, v0.5.4, v0.5.5, v0.6.0, v0.6.1, v0.6.2, v0.6.3, v0.6.4, v0.6.5, v0.6.6, v0.6.7, v0.7.0, v0.7.1, v0.7.2, v0.7.3, v0.7.4] but these conflict with your requirements or minimum-stability.

Use of data transfer to /templates and Data Transform plugin

Hi there! Great implementation here.
Having quite some fun playing with various examples of Patter Lab integration w/ Drupal 8. Was at DrupalCon and also saw a couple variants from the way you have done things with Shila. This ticket does not present any issue per say, but more trying to clarify a couple things:

1: why compiling and transfering .html.twig templates to the /templates directory since Drupal is going to read the ones in /pattern-lab/ (or whatever directory) first, making all copied files in /templates/patterns useless. Maybe I am missing something here? My twig debug info shows it's grabbing it from the pattern-lab dir.

2: following the concept of the implementation, patterns will be shared between Drupal and Pattern Lab but we can end up with 3 files per template (twig, html.twig, .json)? Additionally, isn't pattern lab going to have both the twig and the html.twig included in its menu? Or do we want to get rid of the actual .twig file?

Sorry, many questions! Seems like a lot of it is in its infancy so I am sorry if the questions don't make sense, but while I understand the concept I struggle to understand its application here.

Tons of "DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal in Sass 4.0"

$ gulp sass
[20:14:02] Using gulpfile /app/web/themes/custom/webolutionary/gulpfile.js
[20:14:02] Starting 'sass'...
DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
in Sass 4.0. Use call(get-function("output-isolation")) instead.

[20:14:04] Finished 'sass' after 2.14 s
www-data@e6da9a25f90a:/app/web/themes/custom/webolutionary$

I can't find that in code except in the generated css.map files, and I don't know enough about this front-end stuff to know where or how those are created (and thus find the underlying issue).

PHP Notice: Array to string conversion, includes not working

I'm on a new install of drupal 8.4.0 w/ latest patternlab, when installing I chose the shila starterkit, but when generating I get 30+ php notices about array to string conversion.
When I go to view the patterns I'm seeing the pattern name instead of the included template, such as "molecules-block--system-menu-block.html"