FEG-14: boilerplate theme

.circleci/config.yml

@@ -136,6 +136,22 @@ workflows:
             branches:
               only: production
 
+      # Storybook deployment.
+      - silta/simple-build-deploy:
+          name: storybook-build-deploy
+          executor: silta
+          silta_config: silta/silta-simple.yml
+          context: silta_dev
+          release-suffix: storybook
+          build_folder: web/themes/custom/wunder-theme/storybook-static
+          codebase-build:
+            - silta/npm-install-build:
+                build-command: npm run build && node --version && npm run build-storybook
+                path: web/themes/custom/wunder-theme
+          filters:
+            branches:
+              only: feature/FEG-14-boilerplate-theme
+
       # This enables validation on dependabot PRs
       # Build job for dependabot environments.
       # Extends the job defined for feature environments.

.lando.yml

@@ -7,6 +7,7 @@ config:
   webroot: web
   xdebug: off
   config:
+    vhosts: .lando/nginx.conf
     php: .lando/php.ini
     database: .lando/my.cnf
 

.lando/nginx.conf

@@ -0,0 +1,117 @@
+# LANDODRUPALNGINXCONF
+
+server {
+  listen 80 default_server;
+  listen 443 ssl;
+  server_name localhost;
+  ssl_certificate           /certs/cert.crt;
+  ssl_certificate_key       /certs/cert.key;
+  ssl_verify_client         off;
+  ssl_session_cache    shared:SSL:1m;
+  ssl_session_timeout  5m;
+  ssl_ciphers  HIGH:!aNULL:!MD5;
+  ssl_prefer_server_ciphers  on;
+  port_in_redirect off;
+  client_max_body_size 100M;
+  root "{{LANDO_WEBROOT}}";
+  location = /favicon.ico {
+      log_not_found off;
+      access_log off;
+  }
+
+  location = /robots.txt {
+      allow all;
+      log_not_found off;
+      access_log off;
+  }
+
+  # Very rarely should these ever be accessed outside of your lan
+  location ~* \.(txt|log)$ {
+      allow 192.168.0.0/16;
+      deny all;
+  }
+
+  location ~ \..*/.*\.php$ {
+      return 403;
+  }
+
+  location ~ ^/sites/.*/private/ {
+      return 403;
+  }
+
+  # Allow "Well-Known URIs" as per RFC 5785
+  location ~* ^/.well-known/ {
+      allow all;
+  }
+
+  # Block access to "hidden" files and directories whose names begin with a
+  # period. This includes directories used by version control systems such
+  # as Subversion or Git to store control files.
+  location ~ (^|/)\. {
+      return 403;
+  }
+
+  location / {
+      # try_files $uri @rewrite; # For Drupal <= 6
+      try_files $uri /index.php?$query_string; # For Drupal >= 7
+  }
+
+  location @rewrite {
+      #rewrite ^/(.*)$ /index.php?q=$1; # For Drupal <= 6
+      rewrite ^ /index.php; # For Drupal >= 7
+  }
+
+  # Don't allow direct access to PHP files in the vendor directory.
+  location ~ /vendor/.*\.php$ {
+      deny all;
+      return 404;
+  }
+
+  # In Drupal 10, we must also match new paths where the '.php' appears in
+  # the middle, such as update.php/selection. The rule we use is strict,
+  # and only allows this pattern with the update.php front controller.
+  # This allows legacy path aliases in the form of
+  # blog/index.php/legacy-path to continue to route to Drupal nodes. If
+  # you do not have any paths like that, then you might prefer to use a
+  # laxer rule, such as:
+  #   location ~ \.php(/|$) {
+  # The laxer rule will continue to work if Drupal uses this new URL
+  # pattern with front controllers other than update.php in a future
+  # release.
+  location ~ '\.php$|^/update.php' {
+      fastcgi_split_path_info ^(.+?\.php)(|/.*)$;
+      # Security note: If you're running a version of PHP older than the
+      # latest 5.3, you should have "cgi.fix_pathinfo = 0;" in php.ini.
+      # See http://serverfault.com/q/627903/94922 for details.
+      include fastcgi_params;
+      # Block httpoxy attacks. See https://httpoxy.org/.
+      fastcgi_param HTTP_PROXY "";
+      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+      fastcgi_param PATH_INFO $fastcgi_path_info;
+      fastcgi_param QUERY_STRING $query_string;
+      fastcgi_intercept_errors on;
+      # PHP 5 socket location.
+      #fastcgi_pass unix:/var/run/php5-fpm.sock;
+      # PHP 7 socket location.
+      #fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
+      #lando
+      fastcgi_pass fpm:9000;
+  }
+  # Fighting with Styles? This little gem is amazing.
+  # location ~ ^/sites/.*/files/imagecache/ { # For Drupal <= 6
+  location ~ ^(/[a-z\-]+)?/sites/.*/files/(css|js|styles)/ { # For Drupal >= 7
+      try_files $uri @rewrite;
+  }
+  # Handle private files through Drupal. Private file's path can come
+  # with a language prefix.
+  location ~ ^(/[a-z\-]+)?/system/files/ { # For Drupal >= 7
+      try_files $uri /index.php?$query_string;
+  }
+
+  location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
+      add_header Cache-Control "no-cache, no-store, must-revalidate";
+      expires 0;
+      log_not_found off;
+  }
+
+}

composer.json

@@ -12,6 +12,30 @@
         {
             "type": "composer",
             "url": "https://packages.drupal.org/8"
+        },
+        {
+            "type": "vcs",
+            "url": "https://github.com/woredeyonas/Drupal-Recipe-Unpack.git"
+        },
+        {
+            "type": "package",
+            "package": {
+                "name": "wunderio/wunder-theme-base",
+                "version": "v1.0.0",
+                "type": "drupal-theme",
+                "source": {
+                    "url": "https://github.com/wunderio/wunder-theme-base",
+                    "type": "git",
+                    "reference": "v1.0.0"
+                }
+            }
+        },
+        {
+            "type": "path",
+            "url": "recipes/wunderful",
+            "options": {
+                "symlink": true
+            }
         }
     ],
     "require": {
@@ -25,9 +49,11 @@
         "drupal/monolog": "^3.0",
         "drupal/purge": "^3.6",
         "drupal/simplei": "^3.0",
+        "drupal/storybook": "^1.0",
         "drupal/stage_file_proxy": "^3.1",
         "drupal/varnish_purge": "^2.3",
         "drush/drush": "^13.3",
+        "ewcomposer/unpack": "dev-master",
         "vlucas/phpdotenv": "^5.6",
         "wunderio/drupal-ping": "^2.5",
         "wunderio/updates_log": "^2.5"
@@ -51,7 +77,8 @@
             "php-http/discovery": true,
             "phpro/grumphp": true,
             "phpstan/extension-installer": true,
-            "tbachert/spi": true
+            "tbachert/spi": true,
+            "ewcomposer/unpack": true
         },
         "discard-changes": true,
         "process-timeout": 0,

recipes/wunderful/composer.json

@@ -0,0 +1,15 @@
+{
+    "name": "drupal_recipe/wunderful",
+    "description": "A recipe to install Wunderful theme & theming tools",
+    "type": "drupal-recipe",
+    "version": "1.0",
+    "require": {
+        "drupal/twig_tweak": "^3.4",
+        "drupal/twig_field_value": "^2.0"
+    },
+    "extra": {
+        "installer-paths": {
+            "web/themes/contrib/{$name}": ["type:drupal-theme"]
+        }
+    }
+}

recipes/wunderful/recipe.yml

@@ -0,0 +1,9 @@
+name: 'Wunderful theme & Theming Tools'
+description: 'Installs and configures the most communly used modules for front-end development'
+type: 'Site'
+install:
+  - twig_tweak
+  - twig_field_value
+# config:
+  # strict: false
+  # actions:

web/sites/development.services.yml

@@ -4,6 +4,17 @@ parameters:
   twig.config:
     debug: true
     auto_reload: true
+  # CORS configuration - allow Storybook. TODO: subdomain the storybook && set is as allowed origin.
+  # Remember to disable development mode in production!
+  storybook.development: true
+  cors.config:
+    enabled: true
+    allowedHeaders: ['*']
+    allowedMethods: ['*']
+    allowedOrigins: ['*']
+    exposedHeaders: false
+    maxAge: false
+    supportsCredentials: true
 services:
   cache.backend.null:
-    class: Drupal\Core\Cache\NullBackendFactory
+    class: Drupal\Core\Cache\NullBackendFactory

web/themes/custom/wunder-theme/.gitignore

@@ -0,0 +1,50 @@
+# Ignore directories generated by Composer
+/.editorconfig
+/.gitattributes
+/vendor/
+/web/_ping.php
+/web/.gitignore
+/web/core/
+/web/modules/.gitignore
+/web/modules/contrib/
+/web/themes/.gitignore
+/web/themes/contrib/
+/web/themes/custom/wunderful/dist/
+/web/profiles/.gitignore
+/web/profiles/contrib/
+/web/libraries/
+/web/sites/.gitignore
+/web/sites/default/.gitignore
+
+# Ignore local configuration
+/web/sites/*/settings.local.php
+
+# Ignore Drupal's public file directory
+/web/sites/*/files/
+# Ignore Drupal's private file directory
+/private/
+
+# Ignore testing directories.
+/web/sites/simpletest
+/web/tmp
+
+# Ignore database dumps
+*.sql
+*.sql.gz
+
+# Ignore files generated by PhpStorm
+/.idea/
+
+# Ignore files generated by OS
+.DS_Store
+
+# Ignore .env files as they are personal
+/.env
+
+# Ignore node modules
+node_modules
+
+# Ignore the Storybook log file
+*storybook.log
+# Ignore storybook build directory
+storybook-static

web/themes/custom/wunder-theme/.storybook/main.js

@@ -0,0 +1,17 @@
+/** @type { import('@storybook/server-webpack5').StorybookConfig } */
+const config = {
+  stories: [
+    '../components/**/*.mdx', // Storybook home page.
+    '../components/**/*.stories.@(json)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+  ],
+  framework: {
+    name: '@storybook/server-webpack5',
+    options: {},
+  },
+};
+export default config;

web/themes/custom/wunder-theme/.storybook/preview-head.html

@@ -0,0 +1,9 @@
+<!-- .storybook/preview-head.html -->
+
+<!-- Pull in static files served from your Static director or the internet -->
+<link rel="preload" href="../assets/fonts/PublicSans/PublicSans-Regular.ttf" />
+<link rel="preload" href="../assets/fonts/PublicSans/PublicSans-Italic.ttf" />
+<link rel="preload" href="../assets/fonts/PublicSans/PublicSans-SemiBold.ttf" />
+<link rel="preload" href="../assets/fonts/PublicSans/PublicSans-SemiBoldItalic.ttf" />
+<link rel="preload" href="../assets/fonts/PublicSans/PublicSans-Bold.ttf" />
+<link rel="preload" href="../assets/fonts/PublicSans/PublicSans-BoldItalic.ttf" />

web/themes/custom/wunder-theme/.storybook/preview.ts

@@ -0,0 +1,34 @@
+/** @type { import('@storybook/server').Preview } */
+
+// FONTS
+import '../libraries/fonts/fonts.css';
+import './storybook.css';
+
+/**
+ * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators
+ * in order to augment stories:
+ * - with extra rendering
+ * - gather details about how a story is rendered
+ *
+ * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
+ *
+ * https://storybook.js.org/docs/react/writing-stories/decorators#gatsby-focus-wrapper
+ */
+import { withDrupalTheme } from './withGlobal';
+// import fetchStoryHtml from './fetchStoryHtml';
+
+export const decorators = [withDrupalTheme];
+// export const parameters = { server: { fetchStoryHtml } };
+
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

web/themes/custom/wunder-theme/.storybook/storybook.css

@@ -0,0 +1,18 @@
+.sb-story-wrapper {
+  margin-bottom: 4rem;
+}
+
+.sb-story-title {
+  color: gray;
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 400;
+  letter-spacing: 1.76px;
+  margin: 0 0 2rem;
+  text-transform: uppercase;
+}
+
+.sb-background-dark {
+  background: #04131F;
+  padding: 1.5rem;
+}