Drupal on Simon's Blog

Drupal Theme -- Import Default Configuration on Theme Install

Thu, 16 Apr 2026 00:00:00 +0000

Theme Import Configuration on Install

Firstly before we proceed to importing some default configuration on theme enabling, we must know what default configuration to import. In Drupal, this is usually defined as a YML file with certain schema, for instance, below an example of a node’s configuration, specified in its corresponding schema node.type.article.yml: FILE node.type.example_mytype.yml

type: example_mytype
name: Example
description: 'Use <em>example</em> content to get to Drupal 8 development better.'
help: ''
new_revision: false
display_submitted: true
preview_mode: 1
status: true
langcode: en
dependencies:
  module:
    - example
  enforced:
    module:
      - example

Though you can write it manually like the above example, it is both trivial to write and check to ensure its schema aligns with what Drupal consider as valid. I would much more recommend using the drush cex command to export the configuration and sanitise them to be available importable configuration yml files.

Drupal Custom Module -- Configuration and Settings Form

Thu, 19 Mar 2026 00:00:00 +0000

Introduction

Using a dedicated settings form to control the configurations for a Drupal custom module centralizes and simplifies configuration. Comparing to hard-written configuration/variable that can only changed by modifying code, this approach is more maintainable, it allows the administrator to make run-time teaks on the website through a consistent, user-friendly UI.

Below is an example of the “configuration + settings form page” provided by “drupal/coffee” module:

Configuration API

To begin with, custom module may have configuration but without having a corresponding settings form, to do that you’ll need to create a config folder to contain the following files (refer to this post for more details):

Drupal Custom Module -- Cron Job (Drupal Cron API)

Wed, 18 Mar 2026 00:00:00 +0000

Introduction

Customisable cron hooks in Drupal provides the flexibility for modules to schedule and run periodic tasks without manual triggering, when you implements the hook_cron() function in module’s module_name.module file, the engine will call the hook whenever a cron run happens, in an interval as per defined by administrator OR manually triggered via “Run CRON” button in the backend or drush cache:clear command.

This will enable varies use cases, most commonly periodic maintenance work, for instance:

Vue Component (Nuxt UI Component) on a Drupal Site

Wed, 04 Mar 2026 00:00:00 +0000

Vue in Drupal: Basic Component (Counter)

For reference purpose I have put the relevant files mentioned in this section in a .zip file: Archive-1.zip

Step-1: Installing and Configure Vue and Vite

To begin with, before we complicate things by bring the Nuxt UI component library into the equation, let’s first setup Vue framework and make sure it is operating properly by setting up a simple counter that uses ref() reactivity API.

Drupal Installation Profile (& Distribution)

Wed, 14 Jan 2026 00:00:00 +0000

Introduction

Basically an installation profile is a preset of modules/themes/configuration that allows you to skip the trivial and repetitive tasks during the installation phase of the website:

Installation profiles are pre-defined packages that can include core Drupal modules, third party modules, themes and other pre-configurations to get a site working quickly. Profiles can speed up development by reducing some initial processes like configuring text formats / editors, module views, basic templates, content types etc. This provides a big head start when it comes to customising a site based on project requirements. Installation profiles are perfect when you need to create multiple sites with similar functionality.

Drupal Watchdog and Drush Watchdog Command

Tue, 13 Jan 2026 00:00:00 +0000

Quick Peek into “Watchdog” Table

(inside the drupal database)

The watchdog table is Drupal’s system log table. It stores runtime messages generated by Drupal core, (contributed/custom) modules and themes—things like cron activity, errors, warnings, notices, and user actions.

What Each Column in Watchdog Table Means ?

wid: Unique ID for each log entry.
uid: The user ID responsible for the action. (0 = system / anonymous)
type: The source module or category of the message. (For instance: cron → Drupal cron job, webform → Webform module, user → User login/session activity, access denied → Permission issues, php → PHP-level log)
message: The log message itself (Often contains placeholders like: @module, %time, @form in their code, which gets replaced at runtime using variables stored in the variable column)
variable: To store variables/placeholder such as @module, %time, @form mentioned previously (Serialized data (BLOB))

Watchdog Logs in Drupal Backend

In the admin UI, this data appears as Reports → Recent log messages (/admin/reports/dblog)

Drush archive:dump & archive:restore

Tue, 13 Jan 2026 00:00:00 +0000

⚠️ WARNING ⚠️

Use of drush archive:dump and drush archive:restore command on production/sandbox VPS server is discouraged, because they are heavy, intrusive operation that bundle code, files and database together. Because is resource heavy, it may result in long processing time, or memory exhaustion that causes the website to freeze !

Backup Drush Commands - drush archive:dump

1
2
3

drush archive:dump --db   --destination=./20XX-XX-XXTYYYYYY-[database].tar.gz -vvv # Backup Database Only
drush archive:dump --code --destination=./20XX-XX-XXTYYYYYY-[codebase].tar.gz -vvv # Backup the codebase (excluding the file directory)
drush archive:dump --file --destination=./20XX-XX-XXTYYYYYY-[filebase].tar.gz -vvv # Backup Drupal File Directory

Note that:

Pass Variables from Twig Template to JavaScript

Wed, 07 Jan 2026 00:00:00 +0000

Intuition

Think of Twig templates and JavaScript as two different worlds that need to communicate. Twig lives on the server side, where it has access to all your application data, database results, and configuration settings. JavaScript, on the other hand, lives in the browser, where it handles user interactions and dynamic updates. And oftentimes to make some interactable components, we’ll need to pass information from one world to another in order to make that happen.

[Note] Drush Site:Aliases (with DDEV)

Mon, 29 Dec 2025 00:00:00 +0000

(*this post focuses on the usecase of using drush within a DDEV hosted docker container, i.e. running ddev drush ... command, if you are using globally installed drush a portion of this post may not apply to you.)

TLDR;

STEP-1: Add localhost’s SSH private key to the ddev-ssh-agent container via running:
1
2
3
4
5
>  ddev auth ssh
		Adding 1 SSH private key(s)... 
        Adding key id_rsa
        Identity added: id_rsa (XXXX@YYYYYY.local)
        Successfully added 1 SSH private key(s).
STEP-2: Create file ``$PROJECT/drush/sites/self.site.yml` with the following content

[HTMX in Drupal] Client-Side-Tempalte Component using Drupal JSON-API as Data

Thu, 11 Dec 2025 00:00:00 +0000

Introduction

Starting from Version 11.2, Drupal core will include HTMX as a part of its core dependencies, you can attach it to any twig template via the {{ attach_library('core/htmx') }} statement, for instance to achieve the following accordion component using HTMX, simply create the following SDC component:

FILE: olivero/component/htmx_accordion.twig

{{ attach_library('core/htmx') }}
{% set container_id = "content-wrapper-" ~ random() %}
<div class="htmx-accordion active" id="{{ container_id }}">
    <div>   
        {{accordion_title}}
        <button hx-on:click="htmx.toggleClass(htmx.find('#{{ container_id }}'), 'active')">BUTTON</button> <!-- Reference: https://htmx.org/api/#toggleClass -->
    </div>
    <div> 
        {{accordion_body}}
    </div>
</div>

FILE: olivero/component/htmx_accordion.component.yml: only required for SDC component discovery pupose, can leave empty

[Snippet] ddev drupal code snippet (creates experimental site)

Thu, 11 Dec 2025 00:00:00 +0000

This code snippet will help you get a (init/demo/experimental) drupal site you can use for experiment running on your local using ddev in a snap.

SDC using twig function html_cva()

Mon, 08 Dec 2025 00:00:00 +0000

CVA in React

Class Variance Authority (CVA) is a utility for managing CSS class names based on various conditions. It helps create consistent and maintainable styles in ~~React~~ components by defining variants and conditional classes in a structured manner.

Why Use CVA?

Consistency: Ensures consistent styling across your application.

Maintainability: Simplifies managing conditional class names.

Readability: Improves the readability of your components’ styling logic.

In React you can implement a CVA component via the class-variance-authority library:

[Note] Drupal Module for Developers: WebProfiler

Wed, 03 Dec 2025 00:00:00 +0000

WebProfiler adds a toolbar at the bottom of every page and shows you various stats, such as the number of database queries loaded on the page, which services are used, and more.

Ref: Drupal Module - WebProfiler

By default, WebProfiler comes with a toolbar with clickable buttons to reveal some extra information about the website that’s currently running, and its configuration panel you have a lot of other additional toolbar items you can enable, that will greatly improve your developer experience.

[Scribble] GovCMS Non-Production Only Configuration File (via config/dev)

Wed, 03 Dec 2025 00:00:00 +0000

What has been discovered ?

My colleague recently come across a GovCMS website that for some reason: doesn’t have a shield on the its production website, however, upon installing the website codebase on local and running ahoy refresh db && ahoy build , a shield magically appeared out of nowhere.

After some investigation, he find that upon putting configuration yml files in the config/dev folder, these files will ONLY be imported on local, as well as on sandbox/development environments on Lagoon (as long as LAGOON_ENVIRONMENT_TYPE!=production)

[Note] Drupal Webform Auto-complete via Google Place API

Mon, 01 Dec 2025 00:00:00 +0000

DEMO: using Google Maps AutoComplete to auto-fill street, suburb, state, postal cost upon search.

Method-1: via Webform JavaScript

As of March 1st, 2025, google.maps.places.Autocomplete is not available to new customers. Although this API is not scheduled to be discontinued, but google.maps.places.PlaceAutocompleteElement is recommended over google.maps.places.Autocomplete.

Method-1a: via google.maps.places.PlaceAutocompleteElement

Create any field that will later be replaced with the PlaceAutocompleteElement, here I’ll create a search field to showcase, see screenshot
For all the address related fields (e.g. street, suburb, city, country) add custom element CSS classes respectively to be later used by JavaScript to fill their values, see screenshot
Add the following JavaScript to the Webform’s settings: demo-autocompelte-using-PlaceAutocompleteElement.js (Replace API_KEY on the bottom of the file with your Google Maps API key)
Review the outcome of step1 to step3: outcome-gif (if your API key is invalid you’ll get the following warning as you start typing in the address: Google Maps JavaScript API warning: InvalidKey in your console)

Method-1b: via google.maps.places.Autocomplete (deprecated)

~~Create a plain text field in webform to use as the “search field” for address, see screenshot~~

Drupal Interactive Table (via TableField & DataTable)

Fri, 28 Nov 2025 00:00:00 +0000

Intuition

The client requires a table with the following features:

Search functionality via an input field
Column-based sorting
Pagination support

The table should accept a CSV file as input. The CSV data may include HTML tags such as <b>, <i>, or <sup>, which must be rendered correctly with their respective styles.

We were originally was using the DVF (Data Visualisation Framework) modules to achieve this feature, along with some other stuff like charts and graphs, but since it is a modules only used by few, the maintainers don’t seems to have intention of making it Drupal 11 compatible (despite the fact there’s already a merge request).

[Scribble] GovCMS D11 Compatibility - Migrate GovCMS8 Modifier to Theme

Tue, 11 Nov 2025 00:00:00 +0000

In order to make a project compatible with D11, the govcms8_modifier module needs to be removed; But in some cases the website might be using the modifier features provided by this module, so below are the steps to migrate these features to the custom theme (such that this deprecated module can be gracefully removed without causing styling issue).

https://github.com/govCMS/GovCMS8/tree/1.x/modules/custom/core/govcms8_foundations/modules/govcms8_modifiers

Step1: Bring Over the xxyyzz.modifier.yml File

Firstly, you need to bring over the govcms8_modifiers.modifiers.yml file to your custom theme:

[Scribble] Web Component - Opponent & Proponents

Mon, 10 Nov 2025 00:00:00 +0000

Notes and takeaway from DrupalSouth Canberra Nov-2025

[Drupal] Webform - Generate PDF and Attach in Email upon Submission

Wed, 29 Oct 2025 00:00:00 +0000

Intuition

A client of mine requested the feature in their existing webform (on a Drupal10 website) to be able to generate an PDF print-out of the user’s input upon their every submission, and attach the generated PDF to the with the e-mail trigger by the webform’s handler.

This will ensure they have a copy of the user’s input as the ground truth to be referenced in the future, and the signature in the webform can be shared via the email as a part of the PDF, because by default the webform only allows you to attach the link of signature’s PNG image, which means (if you want any user who receive the email to be able to download the signature without a Drupal authenticated account) you will have to expose via a public link.

[Note] Local Development: Install Community Contributed Module in GovCMS

Wed, 15 Oct 2025 00:00:00 +0000

When working on GovCMS site uprgade, I found very benefitial to take advantages of some reporting modules from the community. For instance, via installing the Upgrade Status (upgrade_status) module, I can quickly figure out what modules are no longer supported in the newer version of Drupal (and why, see screenshot):

Similarly, if I want to figure out if certain paragraph/modifier is used, I can install Paragraphs Stats (ps) modules and from a glance, figure out the instances a paragraph is getting used, and where exactly (which node) based on its usage report:

Drupal Post Update (add_lange_code) memory exhausted issue fix

Thu, 09 Oct 2025 00:00:00 +0000

Original Error

After updating to Drupal 10.3.0, there’s this system_post_update_add_langcode_to_all_translatable_config function added to the web/core/modules/system/system.post_update.php update file, which will get triggered when running post update via drush updb or visiting /update.php.

For some site, this seem to run without any hiccups, but for some others, when running drush updb, I got the following:

 -------- ----------------------------------------- ------------- ------------------------------------------------------ 
  Module   Update ID                                 Type          Description                                           
 -------- ----------------------------------------- ------------- ------------------------------------------------------ 
  system   add_langcode_to_all_translatable_config   post-update   Adds a langcode to all simple config which needs it.  
 -------- ----------------------------------------- ------------- ------------------------------------------------------ 


 Do you wish to run the specified pending updates? (yes/no) [yes]:
 > yes

>  [notice] Update started: system_post_update_add_langcode_to_all_translatable_config
> PHP Fatal error:  Allowed memory size of 2147483648 bytes exhausted (tried to allocate 262144 bytes) in /var/www/html/web/core/lib/Drupal/Core/Plugin/DefaultPluginManager.php on line 211
> PHP Fatal error:  Allowed memory size of 2147483648 bytes exhausted (tried to allocate 262144 bytes) in Unknown on line 0

In ProcessBase.php line 171:
                                                                                                                                                   
  Unable to decode output into JSON: Syntax error                                                                                                  
                                                                                                                                                   
  Fatal error: Allowed memory size of 2147483648 bytes exhausted (tried to allocate 262144 bytes) in /var/www/html/web/core/lib/Drupal/Core/Plugi  
  n/DefaultPluginManager.php on line 211                                                                                                           
                                                                                                                                                   
  Fatal error: Allowed memory size of 2147483648 bytes exhausted (tried to allocate 262144 bytes) in Unknown on line 0                             
                                                                                                                                                   

Failed to run drush updb: exit status 1

And updating via the GUI interface at update.php will just end up in infinite loading.

[Scribble Note] Source of CivicTheme Paragraph Variable?

Thu, 02 Oct 2025 00:00:00 +0000

The curiosity came from when I was trying to remove the auto-truncate behaviour from a Promotional Card component, that is setup via the Paragraph Type. After inspecting its corresponding paragraph--civictheme-promo-card.html.twig file, it seems the paragraph uses the SDC civictheme:promo-card directly, without any with statement to assign the variables/slots?

Adding {{dump()}} statement shows that the variables used by the promo-card component somehow magically, are already in-place:

So after some digging, I found the place where the variables gets declared:

[Note] Drupal Set Retrieve Cookie (version 8 ~ 11)

Tue, 23 Sep 2025 00:00:00 +0000

Depending on the version of Drupal you are using, you can achieve the below set/retrieval of cookie slightly differently using different library either in/outside the core

Drupal 11

Starting from Drupal 10.1.0 it is indicated that the core/js-cookie will be refactored out of Drupal 11, and hence instead we should install the contributed module “JS Cookie” and use js_cookie/js-cookie instead for the future support. (see: drupal-change-record-3322720)

`1`	`composer require 'drupal/js_cookie'`

my_library_using_cookie:
  js:
    src/js/my_library_using_cookie.js: {}
  dependencies:
    - core/drupal
    - js_cookie/js-cookie
    
(* theme_or_module.libraries.yml

((Drupal, Cookies) => {
    Drupal.behaviors.myModule = {
        attach: () => {
            // ------------------------------------------------
            // Set a cookie.
            Cookies.set('cutest', 'red panda');
            // ------------------------------------------------
            // Retrieve a cookie.
            const myCookieValue = Cookies.get('cutest');
            // ------------------------------------------------
            // Remove a cookie.
            Cookies.remove('cutest');
            // ------------------------------------------------
            // Store and retrieve as a JSON object. Use of the getJSON method should be avoided as that will be deprecated in js-cookie 3.0.0.
            Cookies.set('cutest', JSON.stringify({ animal: 'red panda' }));
            const cutest = JSON.parse(Cookies.get('cutest'));
            // ------------------------------------------------
        },
    };
})(Drupal, window.Cookies);

(* src/js/my_library_using_cookie.js

Drupal 9 & 10

Starting from Drupal 9.0.0, in order to set Cookie values we will need to use core/js-cookie instead of the core/jquery.cookie, which will be completed removed at Drupal 10.0.0 (see: drupal-change-record-3104677):

[Note] Why Drupal needs jQuery.noConflict() ?

Tue, 23 Sep 2025 00:00:00 +0000

⚠️ WARNING ⚠️

Below are just a assumption I made upon searching some online blog post and Drupal documentation, I really can’t say for sure it is accurate considering how surface level I am with PHP and Drupal

Intuition of the search

If you have read the “JavaScript API Overview” under Drupal API documentation you will have already come across this statement about Drupal uses jQuery.noConflict():

Since Drupal uses jQuery.noConflict() and only loads JavaScript files when required, to use jQuery and the $ shortcode for jQuery you must include jQuery and Drupal as dependencies in the library definition in your MODULE.libraries.yml and add a wrapper around your function. So the whole JavaScript file would look something like this:

[GovCMS Error] cli warning: pull access denied

Wed, 17 Sep 2025 00:00:00 +0000

Issue Encountered

When running ahoy up I got the following error (see screenshot example):

> ahoy up
  [+] Running 1/1
   ! cli Warning pull access denied for govcms-project-name, repository does not exist or may require 'docker login': denied: requested access to the resourc...              4.3s
  [+] Building 2.5s (18/18) FINISHED
   => [internal] load local bake definitions                                                                                                                     0.0s
   => => reading from stdin 2.44kB                                                                                                                               0.0s
   => [cli internal] load build definition from Dockerfile.cli                                                                                                   0.0s
   => => transferring dockerfile: 439B                                                                                                                           0.0s
   => [php internal] load build definition from Dockerfile.php                                                                                                   0.0s
   => => transferring dockerfile: 244B                                                                                                                           0.0s
   => WARN: FromAsCasing: 'as' and 'FROM' keywords' casing do not match (line 8)                                                                                 0.0s
   => WARN: InvalidDefaultArgInFrom: Default value for ARG ${CLI_IMAGE} results in empty or invalid base image name (line 8)                                     0.0s
   => [test internal] load build definition from Dockerfile.test                                                                                                 0.0s
   => => transferring dockerfile: 286B                                                                                                                           0.0s
   => WARN: FromAsCasing: 'as' and 'FROM' keywords' casing do not match (line 8)                                                                                 0.0s
   => WARN: InvalidDefaultArgInFrom: Default value for ARG ${CLI_IMAGE} results in empty or invalid base image name (line 8)                                     0.0s
   => [nginx internal] load build definition from Dockerfile.nginx-drupal                                                                                        0.0s
   => => transferring dockerfile: 347B                                                                                                                           0.0s
   => WARN: FromAsCasing: 'as' and 'FROM' keywords' casing do not match (line 8)                                                                                 0.0s
   => WARN: InvalidDefaultArgInFrom: Default value for ARG ${CLI_IMAGE} results in empty or invalid base image name (line 8)                                     0.0s
   => [cli internal] load metadata for docker.io/govcms/govcms:10.x-latest                                                                                       1.1s
   => [php internal] load metadata for docker.io/govcms/php:10.x-latest                                                                                          1.0s
   => ERROR [nginx internal] load metadata for docker.io/library/govcms-project-name:latest                                                                                   2.3s
   => [nginx internal] load metadata for docker.io/govcms/nginx-drupal:10.x-latest                                                                               1.1s
   => [test internal] load metadata for docker.io/govcms/test:10.x-latest                                                                                        1.1s
   => [cli internal] load .dockerignore                                                                                                                          0.0s
   => => transferring context: 231B                                                                                                                              0.0s
   => CACHED [cli 1/4] FROM docker.io/govcms/govcms:10.x-latest@sha256:5d87738ba91-LoremIpsumDolorSitAmetConsectet                          0.0s
   => [cli internal] load build context                                                                                                                          0.0s
   => => transferring context: 109.49kB                                                                                                                          0.0s
   => [cli 2/4] COPY themes/ /app/web/themes/custom                                                                                                              0.1s
   => [cli 3/4] COPY config /app/config                                                                                                                          0.0s
   => [cli 4/4] COPY favicon.ico /app/web                                                                                                                        0.0s
   => [cli] exporting to image                                                                                                                                   0.1s
   => => exporting layers                                                                                                                                        0.0s
   => => writing image sha256:5d87738ba91-LoremIpsumDolorSitAmetConsectet                                                                   0.0s
   => => naming to docker.io/library/govcms-project-name                                                                                                                      0.0s
   => [cli] resolving provenance for metadata file                                                                                                               0.0s
  ------
   > [nginx internal] load metadata for docker.io/library/govcms-project-name:latest:
  ------
  Dockerfile.php:8
  --------------------
     6 |     ARG GOVCMS_IMAGE_VERSION=10.x-latest
     7 |
     8 | >>> FROM ${CLI_IMAGE} as cli
     9 |     FROM govcms/php:${GOVCMS_IMAGE_VERSION}
    10 |
  --------------------
  target php: failed to solve: govcms-project-name: failed to resolve source metadata for docker.io/library/govcms-project-name:latest: pull access denied, repository does not exist or may require authorization: server message: insufficient_scope: authorization failed
  View build details: docker-desktop://dashboard/build/desktop-linux/desktop-linux/4v338vq-LoremIpsumDolorSitAmetConsectet

Solution-0

This solution worked for me, but I am not so certain as to why it worked …. so use it with caution ! The solution is simple, just run docker compose build cli to build cli service separately first, then run ahoy up as usual.

[Note] Resolve Error 1050 (42S01) Table 'xxyyzz' already exists

Tue, 16 Sep 2025 00:00:00 +0000

This issue happens when I perform “quick export” to acquire a database backup of the Drupal website, and attempts to import it via the “mysql” command (or ahoy import or ddev import-db command):

Solution-1: use custom method to export database

Use custom method to export database, and check “Add DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT / TRIGGER statement” toggle before clicking “export” at the bottom.

[Patch] Drupal 10.3 not used/recognised

Wed, 13 Aug 2025 00:00:00 +0000

Issue / Problem

I faced this issue when working with a “radix” theme on a druapl 10.3.2 website. Upon inspecting the status message block, instead of desired outcome shown in the green rectangle in the screenshot; that is: with hook suggestion and override twig template name suggestion). I’m getting what’s shown in the red rectange.

The issue issue as “prashant.c” described in issue 3456176 - #10:

Mitigation/Solution 1 - Theme Hook

The first solution is proposed in #17 comment under the issue, via creating a theme hook to control the rendering of the system message block:

Drupal - Available Update Page: 'No available releases found'

Thu, 07 Aug 2025 00:00:00 +0000

Condition-1: Contributed module (with update) not being identified

Solution-1: SQL Query

While checking updates Drupal creates some rows inside the key_value table which should be deleted after checking is complete but looks like they doesn’t for some reason. So deleting the related rows manually solved my problem:
1
DELETE FROM key_value WHERE collection = 'update_fetch_task';
Tou can attempt to resolve it via running the below command in terminal:

Drupal Theme Import Paragraph Configuration upon installation

Wed, 06 Aug 2025 00:00:00 +0000

Intuition

When setting up a new Drupal site, one of the key tasks is configuring the theme to suit your design and content needs. Paragraphs, a popular module in Drupal, allows you to create flexible and reusable content components, and is used extensively in many of the projects.

Althought we could adhere the look of the pargraph through preserving the paragraph--xxyyzz.html.twig file, the configuration including ranging from the machine name, help text, fields, views, are not captured in the paragraph--xxyyzz.html.twig file, and require some effort to setup from the Drupal backend. Hence if we could include those as a part of the sub-theme’s configuration to be installed with the theme, this could save the devs heaps of time.

[Note] Drupal Animated Custom Cursor (via SDC)

Fri, 25 Jul 2025 00:00:00 +0000

Showcase Video

SDC Component

cursor-animated-custom.component.yml

$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: cursor-opc
status: experimental
description: 'A custom cursor component that follows mouse movement with smooth animation'
props: {}

cursor-animated-custom.twig

1
2
3

<div id="cursor-custom" class="cursor-custom">
  <div class="cursor-custom__dot"></div>
</div>

_cursor-animated-custom.js

/**
 * Custom cursor functionality
 */
(function () {
  'use strict';

  // Initialize once DOM is fully loaded
  document.addEventListener('DOMContentLoaded', () => {
    const cursor = document.querySelector('.cursor-custom__dot');

    if (!cursor) return;

    let mouseX = 0;
    let mouseY = 0;
    let cursorX = 0;
    let cursorY = 0;

    // Smooth animation function
    const animate = () => {
      const diffX = mouseX - cursorX;
      const diffY = mouseY - cursorY;

      cursorX += diffX * 0.1;
      cursorY += diffY * 0.1;

      // Use translate3d for better performance and combine with scale if active
      const scale = cursor.classList.contains('is-active-dot') ? 'scale(2)' : 'scale(1)';
      cursor.style.transform = `translate3d(${cursorX}px, ${cursorY}px, 0) ${scale}`;
      requestAnimationFrame(animate);
    };

    // Track mouse movement
    document.addEventListener('mousemove', (e) => {
      mouseX = e.clientX;
      mouseY = e.clientY;
    });

    // Handle cursor scale/color on clickable elements
    document.querySelectorAll('a, button, [role="button"], input[type="submit"]').forEach(el => {
      el.addEventListener('mouseenter', () => cursor.classList.add('is-active-dot'));
      el.addEventListener('mouseleave', () => cursor.classList.remove('is-active-dot'));
    });

    // Handle cursor on hover of the iframe
    document.querySelectorAll('iframe').forEach(el => {
      el.addEventListener('mouseenter', () => cursor.classList.add('is-dot-in-iframe'));
      el.addEventListener('mouseleave', () => cursor.classList.remove('is-dot-in-iframe'));
    });

    // Start animation
    animate();
  });
})();

cursor-animated-custom.scss

[Note] Single-Directory-Component in Drupal Core | Lullabot

Mon, 21 Jul 2025 00:00:00 +0000

SDC in Drupal Core | Lullabot

Drupal JavaScript API (Drupal Behavior)

Fri, 18 Jul 2025 00:00:00 +0000

⁉️ Intuition: Weird JavaScript Behaviour in SDC

When working on a project, I’ve setup this SDC named test-js in a Radix theme with the following files: (see: test-js-sdc-example-files.zip)

theme\component\test-js
                  |_______test-js.twig
                  |_______test-js.component.yml
                  |_______test-js.js

The content of the files are as follows:

{# [test-js.twig] #}
<div class="test-js opc:p-0 opc:bg-black opc:text-white opc:mb-[2px]!">
  <p class="opc:pb-0! opc:mb-0!">[Test-JS-SDC]: {{ "now"|date("h:i:s.v A") }}</p>
</div>

# [test-js.component.yml]
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: test-js
status: experimental
description: 'The test-js component auto-generated by drupal-radix-cli'

// [test-js.js] 
//          (OR [_test-js.js] when in Radix Theme)
((Drupal) => {
    // Print current time with milliseconds gainularity
    console.log(
        '[test-js.js] \t',
        new Date().toLocaleTimeString() + '.' + new Date().getMilliseconds().toString().padStart(3, '0')
    );
})(Drupal);

I then did some editing to the page-content.twig component, to replace the default {{content}} block with a multiple of this test-js SDC component like the following, so the SDC I declared earlier can be used (for quick testting purpose):

Laravel Mix Watch Files Changes and Execute ZSH/Bash Command When Change Detected

Thu, 17 Jul 2025 00:00:00 +0000

Laravel Mix is a powerful tool that is included as a part of the Radix Drupal theme, it simplifies the process of compiling and optimizing assets in your Laravel applications. While it is primarily used for compiling CSS and JavaScript, you can extend its functionality to watch file changes and execute custom shell commands using ZSH or Bash.

Install additional watcher library via npm install

`1`	`npm install chokidar-cli --save-dev`

Modify webpack.mix.js configuration file (for this instance I will run ddev drush cr when any of the theme or SDC’s php/yml file is changed)

const mix      = require('laravel-mix');
const { exec } = require('node:child_process');

// Declare the files that need to be watched
const watching_SdcAllFiles        = 'components/**/*';
const watching_SdcComponentFiles  = 'components/**/*.component.yml';
const watching_ThemeConfigFile    = 'theme_name.info.yml';
const watching_ThemeLibraryFile   = 'theme_name.libraries.yml';
const watching_ThemePhpFile       = 'theme_name.theme';

// Declare the watcher for the files that need to be watched
const watcher = require('chokidar').watch([
    watching_SdcComponentFiles,
    watching_ThemeConfigFile,
    watching_ThemeLibraryFile,
    watching_ThemePhpFile
]);

// Watch the files and run 'ddev drush cr' when detected
watcher.on(
    'change',
    (path) => {
        console.log(`File ${path} has been changed, running 'ddev drush cr'...`);
        exec('ddev drush cr', (error, stdout, stderr) => {
            if (error) { console.error(`Error executing 'ddev drush cr': ${error}`); return; }
            console.log(`OUTCOME:\t'ddev drush cr' executed successfully: ${stdout}, "\n OUTPUT:\t${stderr}`);
        });
    }
);

Reference

Chokidar: Minimal and efficient cross-platform file watching library

Druapl Radix Theme Share BrowserSync with Ngrok

Wed, 16 Jul 2025 00:00:00 +0000

Intuition

When you have the browser-sync running on http://localhost:3000 in radix sync after running npm run watch, attempt of shareing the http://localhost:3000 via ngrok http https://localhost:3000 seems to succeed, but does not will not have browser-sync enabled:

Resolution

To resolve this, we will need to add a environmental variable in the .evn.local file and add a variable pointing to the domain of your ngrok. (First run ngrok as you would usually do to get the URL)

Druapl Radix Theme with Tailwind CSS

Wed, 16 Jul 2025 00:00:00 +0000

In this post, we explore the integration of the Drupal Radix theme with Tailwind CSS, a utility-first CSS framework that enhances the design and responsiveness of web applications. The article delves into the benefits of using Tailwind CSS within the Radix theme, including improved styling capabilities and a streamlined development process.

Introduction

What is Radix Theme ?

According to the project page of the Druapl radxi theme: link

Radix is the original component-based theme for Drupal. It comes with Bootstrap 5, Sass, ES6, BrowserSync, BiomeJS built-in.

SDC: Tailwind Logo Cloud

Thu, 10 Jul 2025 00:00:00 +0000

File: logo-cloud-opc.component.yml

$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: logo-cloud-opc
status: experimental
description: 'The logo-cloud-opc component auto-generated by drupal-radix-cli'
props:
  type: object
  required:
    - title
    - logos
  properties:
    title:
      type: string
      description: 'The title of the logo cloud'
    logos:
      type: array
      description: 'The logos to display in the logo cloud'
      items:
        type: object
        properties:
          image:
            type: string
            description: 'The image of the logo'
          url:
            type: string
            description: 'The url of the logo'
          alt:
            type: string
            description: 'The alt text of the logo'
          width:
            type: integer
            description: 'The width of the logo'
          height:
            type: integer
            description: 'The height of the logo'

File: logo-cloud-opc.twig

Ways of Importing CSS and JS Assets in Drupal

Fri, 06 Jun 2025 00:00:00 +0000

This post is mostly based on the live-stream session from WebWash: https://www.youtube.com/live/IYuQh1zRwz0. So, if you have the time to watch this genius’s video, definitely check it out instead - you will learn much more compared to reading this post.

1. Asset Injector Module (Not Recommended)

If all you need is some customization using CSS and JS without modifying the actual Drupal theme, you may use the Asset Injector (asset_injector) module (see: https://www.drupal.org/project/asset_injector). Notice that at the very bottom of each injector, you get to select the condition where the injection would occur, for instance, when on a page of content type “Standard page”.

[Note] Deplying Drupal Website Living in [.\web] folder

Thu, 05 Jun 2025 00:00:00 +0000

What happened ?

(how did my drupal have this web folder)

I sometimes install drupal via the composer command as suggested in the official install method, as shown below:

And as a result I get a file hierachy alike the following:

/public_html $ ls -al
drwxr-xr-x  6 u236049598 o1006024984      4096 Jun  5 04:17  .
drwxr-xr-x  4 u236049598 o1006024984      4096 Jun  5 03:50  ..
-rw-r--r--  1 u236049598 o1006024984      3938 Jun  5 04:06  composer.json
-rw-r--r--  1 u236049598 o1006024984    269988 Jun  5 04:06  composer.lock
-rw-r--r--  1 u236049598 o1006024984       135 Jun  5 04:06  .cursorignore
-rw-r--r--  1 u236049598 o1006024984       357 Jun  5 04:06  .editorconfig
-rw-r--r--  1 u236049598 o1006024984      4222 Jun  5 04:06  .gitattributes
-rw-r--r--  1 u236049598 o1006024984       230 Jun  5 04:11  .htaccess
drwxr-xr-x 28 u236049598 o1006024984      4096 Jun  5 04:06  vendor
drwxr-xr-x  7 u236049598 o1006024984      4096 Jun  5 04:06  web

(*Whilst if you would download it via the zip or tar option, you have something like this: screenshot)

[GovCMS Error] Pipeline Failure due to Secret Detection (in theme library)

Mon, 19 May 2025 00:00:00 +0000

Intuition

One of my master branch deployment pipeline failed due to the following:

1
2
3

$ if [ -f "$SECRET_DETECTION_REPORT_FILE" ]; then # collapsed multi-line command
Vulnerabilities detected. Please analyze the artifact gl-secret-detection-report.json produced by the 'secret-detection' job.
Exiting with status 80 due to detected vulnerabilities.

You can find information about this pipline validation failure on this post of GovCMS knowledge base: https://www.govcms.support/support/solutions/articles/51000438343-secret-detection-and-troubleshooting. In general, GovCMS checks your filebase to verify if it contains a “secret”, a secret can be one of the following:

Debug using Devel Module with Symfony and Kint Dumper (dpm/dpr/kint/ksm)

Tue, 08 Apr 2025 00:00:00 +0000

Intuition

Debug without Devel Module and DPM()

For a long time, before knowing the existing of devel module, I have been debugging on Drupal website via the use of dump and var_dump; For instance, if I would need to checkout a variable on a hook_preprocess_html theme hook, I would have write the following in php code and twig template respectively:

function hook_preprocess_HOOK(&$variables) : void {
    ...
    dump($variables);        # OR var_dump($variables)
    die();                   # OR exit();
    ...
}

...
<pre>
  dump($content["values"]["field_xxyyzz"]);
  {# OR var_dump($content["values"]["field_xxyyzz"]) #}
</pre>
...

Whilst var_dump can work in the majority of the scenario, its output are raw and can sometimes yeild to memory overflow issue if the variable gets to big, and by default their ouput only allows certain levels of nesting; So if you need to drill down the variable values, you will have to change the dumping variable on trials: var_dump($variable) → var_dump($variabel["html"]) → var_dump($variable["html"]["context"]) → ..., which is not very efficient.

Drupal Module: Entity Class Formatter

Fri, 04 Apr 2025 00:00:00 +0000

Intuition

For the longest time I have been re-creating the this same feature that’s provided by this “Entity Class Formatter” module via a lengthy coupled, challenging way of:

creating field of “List (String)”, of values such as btn-primary-light, box-bg-yellow, card-vertical-layout-blue

overriding the twig template, that will “read” the field values, and manually put the class name (either directly or through twig variable)

# =========================
# === Peseudo Code only ===
# =========================

field_option_variant = content['data']['field_option_variant'][...]

...

    {% if field_option_variant == "option_1" %}
       <div class="option_1 ...">
         ...
       </div>
    {% else if field_option_variant == "option_2" %}
       <div class="option_2 ...">
         ...
       </div>
    {% else if field_option_variant == "option_3" %}
       <div class="option_3 ...">
         ...
       </div>
    {% endif %}

...

write in style.css to have give slghtly different styling for different options (classname)

Drupal Module: Modifier, Modifer Pack

Fri, 04 Apr 2025 00:00:00 +0000

Overview

The Modifiers module defines a system for defining how modifications can be consistently applied to elements on a page. In short the modules provides a way to alter the look and feel of entities on the page. Modifiers work by leveraging the power of the Drupal theming system - altering the render array of entities before they are rendered to the page.

– Modifier: Overview

Below is an example of a image parallex modifier provided by the “Modifiers Pack” module:

[Note] Drupal Batch Update Entity Field

Wed, 26 Mar 2025 00:00:00 +0000

Intuition

I recently received a request from a client to add two additional boolean fields to the user entity type in Drupal. This change can be easily implemented via the path “/admin/config/people/accounts/fields/add-field”. However, I encountered an issue: for all existing users, the values for the newly added fields will be empty (none/na/undefined). Although I attempted to set a default value when adding the new boolean fields, Drupal seems to ignore this default value for existing users. The default value is only applied for new users or if you manually enter the user’s profile and re-save it. The same issue will apply for content types: if you add new fields of an existing content type, the values for these new fields for the old content will be empty.

[Note] Setup Drupal Symfony Mailer with SendMail Transport

Tue, 25 Mar 2025 00:00:00 +0000

What is SendMail Application

Sendmail is a server application that gives businesses a way to send email using the Simple Mail Transfer Protocol (SMTP). It’s typically installed on an email server on a dedicated machine that accepts outgoing email messages and then sends these messages to the defined recipient. It queues messages if a recipient is not immediately available and offers authentication as a method to prevent spam. –ProofPoint: What Is Sendmail?

Cache Busting Drupal Theme Libraries (via setting 'version:-1' in 'xxyyzz.libraries.yml')

Tue, 25 Mar 2025 00:00:00 +0000

Cache Busting via setting `VERSION: -1` in `xxyyzz.libraries.yml`

The version key in libraries.yml is primarily used for cache-busting static assets like CSS and JavaScript files. By setting version: -1, Drupal will automatically generate a query string for the asset filenames, ensuring that the latest version of the assets is always served to users. This approach avoids relying on manual version increments and simplifies cache managemen

In the meanwhile, using -1 bypasses the default behavior where the version key might depend on Drupal core’s version (e.g., when set to VERSION). This ensures independence from core updates and avoids unintended conflicts or reliance on core versioning.

Media Library Thumbnail Not Showing (GD2: Error generating image, missing source file.)

Tue, 25 Mar 2025 00:00:00 +0000

Issue Encountered

I came across this issue when I was adding a media item on a client site, for some reason all the “document” media item have lost its thumbnail; After inspecting via the “Network” panel in the developer tools, it is found that the media-icons genereated by the GD2 Toolkit at url /sites/default/files/styles/thumbnail/public/media-icons/generic/generic.png?itok=xxyyzz have gotten a 404 not found error with respond body being Error generating image, missing source file .

(GovCMS) Drupal JSON:API (using Basic Auth or Simple OAuth)

Thu, 20 Mar 2025 00:00:00 +0000

Intuition

Drupal is a content-management-system, it gives the website admins (and content authors) the convinience to access and editing the content via the backend console, whilst provide the ability to render these contentt into visually appealing pages for visitors. However, what if one would to try to access the website content from a third-party software, and to manage the content via those softwares (let’s say for instance, a NextJS web application, or IOS/Android app).

XDebug with DDEV + VSCode

Sat, 15 Mar 2025 00:00:00 +0000

TLDR

Download this vscode folder, rename it to .vscode, then put it in your project root folder.

Quick Setup Guide

Install the VSCode Extension “PHP Debug”
Create a directory .vscode for upcoming configuration file to be placed in
Create custom task configuration file .vscode/tasks.json file and paste the following

(Alternatively you may also turn xdebug on and off via running ddev xdebug on / ddev xdebug off / ddev xdebug toggle, the reason we have it automatically on/off instead of leaving it always on is because of ites performance impact)

Integrating Solr with Search API in a DDEV Drupal Setup

Fri, 14 Mar 2025 00:00:00 +0000

🚨 Disclaimer: This post will guide you through the steps to set up Solr Search as the backbone of a Drupal Search API. This setup is specifically for scenarios where Drupal is running locally on your machine using Docker through DDEV. I might mention some concept during this post, but since I am relatively new to this topic, they are likely just rip-off from Google or Perplexity, and might nto be correct

GovCMS Stage File Proxy

Tue, 11 Mar 2025 00:00:00 +0000

TLDR;

STEP-1: Ensure Private & Tmp Directory Exists in File Hierarchy

<my-project> 
	files 
		private  ←----- create if doesn't exist
			tmp  ←----- create if doesn't exist

STEP-2: Install Stage File Proxy

1
2
3

# only required if in non-GovCMS environment
composer require drupal/stage_file_proxy             
drush en stage_file_proxy

STEP-3: Set Stage File Proxy URL

1
2

# or visit "/admin/config/system/stage_file_proxy"
drush config-set stage_file_proxy.settings origin "https://nginx-master-myproject.govcms5.amazee.io"

1
2

# also alter the environmental variable in "<my-project>/.env"
+ STAGE_FILE_PROXY_URL=https://nginx-master-myproject.govcms5.amazee.io

(you can get the remote url via accessing the GovCMS project panel: sample screenshot)

[Note] Drupal Prepend .htaccess using Composer

Tue, 04 Mar 2025 00:00:00 +0000

Step-1

Create .htaccess_prepend file (or really any file name, that will later be used in composer.json file)

# =======================================================================
# HTACCESS PREPENE START

<IfModule LiteSpeed>
    CacheDisable public /
    CacheDisable private /
</IfModule>

# HTACCESS PREPEND END
# =======================================================================

Step-2

Add the following in composer.json

{
    "name": "XXX",
    "description": "XXX",
    "type": "project",
    "license": "GPL-2.0-or-later",
    "homepage": "https://www.example.com"
    ...
    ...
    "extra": {
        "drupal-scaffold": {
+           "locations": {
+               "web-root": "./"
+           },
+           "file-mapping": {
+               "[web-root]/.htaccess": {"prepend":"./.htaccess_prepend"}
+           }
        },
        "installer-paths": {
            "core": ["type:drupal-core"],
            "libraries/{$name}":["type:drupal-library"],
            ...
     ...
     ...
}

Step-3

Then when you run any composer related command, such as composer update, composer install, the composer will automatically append the .htaccess_prepend in to the “head” of the .htaccess:

Drupal Disable Cache from Custom Theme Hooks

Tue, 04 Feb 2025 00:00:00 +0000

Intuition

I was working with a GovCMS SaaS environment where I have no control over the core code or modules, in another word, the only thing I can play around with is the custome theme. And the client requested for an cache invalidation mechnism, that they want remove the cachability feature from a portion of the website, as the follows:

Content Type: for instance content type of machine name article_noCache, will not retain cache
Node ID / Url: certain node of ID (e.g. node=1), or certain url (e.g. http://<root-url>/example-standarg-page , will not retain cache
Field Value: disable cache for node if they have certain field equaling to a pre-defined value (e.g. boolean field field_toggle_cacheDisable == 1, so they can turn on/off cache for pages on the admin backend)

Disclaimer (& Confession)

During the time writting this post, I do not actually fully understand how the caching in drupal works, all I understand is there’s a drupal-side caching for render-array, and caching on the browser-side; And setting http-header to disable cache (i.e. Cache-Control: max-age=0, no-cache, must-revalidate) only disbale the browser-side caching; The drupal-side render-array-cache expiry is controlled by: cache tags, cache context. If a browser keep any of the two caching mentioned, it may potentially hold a historical/outdated version of the page.

XDebug with MAMP + VSCode

Thu, 09 Jan 2025 00:00:00 +0000

*p.s. please utilise PHP version 8.2.13 or earlier, as XDebug compatibility issues have been identified (on my end) with PHP ≥8.3.0 versions at the time of writing.

1 - Configurae MAMP

To begin with you will need to configure your php.ini file, here different resource I found online claims that you should edit at different localtion, for your reference, the version that worked for me is to edit it directly in MAMP’s PHP Configuration Panel clicking on the Open Template… button will take me to the edit panel of php.ini file for the current running instance of the php.

[PENDING] Drupal Hook (Theme Hook & Module Hook)

Mon, 06 Jan 2025 00:00:00 +0000

Drupal Hook & Theme Hook

Drupal official “File“ module overview, how to add file field to a content type, managing its location and access, how to access private files, and how to delete files.

https://www.drupal.org/docs/8/core/modules/file/overview

The difference between public and private folder in drupal file system, and overriding the behavior of the private files via hook_file_download() to allow guest user to download the private files based on conditions.

https://www.lucius.digital/en/blog/always-secure-files-your-website-properly-why-and-how-do-it-drupal

Drupal 10 theme system overview, the twig engine, the theme hooks, the preprocessing for template files (THEME_preprocess_HOOKsuch as olivero_preprocess_page)

Hosting Drupal 7,8,9,10 Locally using DDEV

Mon, 06 Jan 2025 00:00:00 +0000

TLDR Code Snippet

> cd $your_project_path
> ddev config --project-type="drupal" --php-version="8.2"

> ddev start
> ddev composer install
> ddev composer require drush/drush
> ddev drush cr
> ddev launch

> ddev drush user-login
> ddev launch $(ddev drush uli)
> ddev import-db --file="$your_db_file_path"

DDEV with Drupal 8,9,10

(complete step-by-step breakdown screenshot can be found at: here)

Drupal Search Page (using Search API Module)

Wed, 18 Dec 2024 00:00:00 +0000

*Note: This is just a quick note for myself in order to get my head around the topic, maybe I’ll formulate this into a more structured post one day … but for now if you are looking for something formal Search API’s documentation is your goto.

Step-1: Preliminary Setup

Install and enable the following modules in your website :

Search API: Provides a generic framework for modules offering search capabilities.
Database Search: Offers an implementation of the Search API that uses database tables for indexing content.

Prepare at least content type (or media/file/taxnonomy/etc) that have your desired search field in it.

Quick Look at the Drupal Module: Field Group

Tue, 10 Dec 2024 00:00:00 +0000

Intuition

The “Field Group” module can come in handy when you have huge amount of fields, for instance let’s say you have a website that collects the statistics for the average salary for every single region for every single state within Australia, and every content item is a average salary data for a date data-point. Potentially your content type could have insamely amount of fields like the following, and we can use some help of the module to group the regions by state.

Keyboard Tab Focus for Accessibility (tabindex)

Mon, 09 Dec 2024 00:00:00 +0000

Introduction to Concept

According to MDN-tabindex, tabindex is a global DOM element attribute used to indicate if the element is keyboard focusable (via tab) or not:

By setting tabindex="-1", element is not reachable via sequential keyboard navigation.
By setting tabindex="0" , the element should be focusable in sequential keyboard navigation.

(*p.s. You may also set other positive values such as tabindex="2/3/4/5/...", to indicate the order/sequance for the focus, but generally this should be AVOIDED, due to its potential of causing difficulty for people solely relying on keyboard for navigation and those who are using other assistive technology to navigate around the page)

Code on Multiple Device and Browser via Browser-Sync (sharing across network, and watch changes to reload)

Wed, 04 Dec 2024 00:00:00 +0000

Intuition

For the longest time, I’ve been waiting to have the local envrionemnt running version of the website to be accessed from my varying devices and browsers, not only because I can put the mobile, tablet, and desktop devices side-by-side and test their responsiveness, but also to test some of the browser/device specific feature and make sure they are enabled properly via browser preflexed properties such as -webkit-xxyyzz.

The ways I’ve been trying till this point all seems to fail, either because they are too trivial to setup (MAMP + NAMO), or too complicated for me the understand (Docker + DDEV + Tailscale), or network evironment dependent and potentially dangerous (Disabling the firewall via pf/ipfw, directly exposing the port).

Drupal Settings.php Snippets for Debug

Wed, 20 Nov 2024 00:00:00 +0000

Usage (TLDR;)

You can simply copy <CTRL-C> + <CTRL-V> the following into your public_html/site/default/settings.php, and toggle on/off those that are relevant to you based on your need:

$config['system.logging']['error_level'] = 'verbose';                        // [A] (For Drupal 8+) Turn on verbose debug message reporting
//$conf['error_level'] = 2;                                                  // [A] (For Drupal 7)  Turn on verbose debug message reporting (Equivalant to navigate to Administration→ Configuration→ Development → logging and errors and select "All messages".)
																			 // [A] -------------------------------------------
error_reporting(E_ALL);													     // [A] Enable PHP errors (For local Drupal development, you can also enable error reporting, display errors and display startup error to help you further debugging and fixing major runtime errors
ini_set('display_errors', TRUE);                                             // [A] Enable PHP errors (For local Drupal development, you can also enable error reporting, display errors and display startup error to help you further debugging and fixing major runtime errors
ini_set('display_startup_errors', TRUE);                                     // [A] Enable PHP errors (For local Drupal development, you can also enable error reporting, display errors and display startup error to help you further debugging and fixing major runtime errors

$settings['twig_debug'] = TRUE;                                              // [B] Twig Debug       - Turn on  twig debug mode
$settings['twig_auto_reload'] = TRUE;                                        // [B] Twig Debug       - Turn on  twig template auto reload
$settings['twig_cache'] = FALSE;                                             // [B] Twig Debug       - Turn off twig cache
																			 // [B] ------------------------------------------
$settings[‘cache’][‘bins’][‘render’] = ‘cache.backend.null’;                 // [B] Disable Caching  - Disable render caching.
$settings[‘cache’][‘bins’][‘page’] = ‘cache.backend.null’;                   // [B] Disable Caching  - Disable page cache.
$settings[‘cache’][‘bins’][‘dynamic_page_cache’] = ‘cache.backend.null’;     // [B] Disable Caching  - Disable dynamic page cache.
$settings[‘cache’][‘default’] = ‘cache.backend.null’;                        // [B] Disable Caching  - Disable backend cache.

$config['system.performance']['css']['preprocess'] = FALSE;                  // [C] Turn off agrregated css      (see: https://www.drupal.org/docs/develop/development-tools/disabling-and-debugging-caching)
$config['system.performance']['js']['preprocess'] = FALSE;                   // [C] Turn off agrregated js       (see: https://www.drupal.org/docs/develop/development-tools/disabling-and

$settings['update_free_access'] = FALSE;                                     // [D] Enable access to /update.php
$settings['rebuild_access'] = TRUE;                                          // [D] Enable access to /rebuild.php                    (This setting can be enabled to allow Drupal's php and database cached storage to be cleared via the rebuild.php page. Access to this page can also be gained by generating a query string from rebuild_token_calculator.sh and using these parameters in a request to rebuild.php.

$settings['skip_permissions_hardening'] = TRUE;                              // [E] Skip file system permissions hardening.          (The system module will periodically check the permissions of your site's site directory to ensure that it is not writable by the website user. For sites that are managed with a version control system, this can cause problems when files in that directory such as settings.php are updated, because the user pulling in the changes won't have permissions to modify files in the directory.
$settings['extension_discovery_scan_tests'] = TRUE;                          // [E] Allow test modules and themes to be installed.   (Drupal ignores test modules and themes by default for performance reasons. During development it can be useful to install test extensions for debugging purpose.
$settings['trusted_host_patterns'] = array();                                // [E] Turn off trusted host

(for instance verbose debug required then turn comment all lines except for $config['system.logging']['error_level'] = 'verbose';)

Single Directory Component with Drupal

Thu, 14 Nov 2024 00:00:00 +0000

Step Progress Breakdown

Level-1: Component using Paragraph Twig Tempalte

To begin with, let’s start by building a simple component using drupal paragraph module:

We create the paragraph type paragraph_cardtile with one field field_title only (see screenshot)
Turn on twig debug, create a demo content item, f12 inspection over it to get the overriding twig file name
Create that twig template, in this case paragraph--paragraph-cardtile.html.twig and write related html code to make it look like a “card tile” component, and you can have its associated js/css included in the global css/js library(won’t go into detail in this post)

When you complete all the steps above, the code you have in your theme folder should be something like the following:

React/Vue Framework Component in Drupal

Wed, 13 Nov 2024 00:00:00 +0000

Intuition

The notion has repeatedly occurred to me since I first entered the Drupal industry, where I have observed numerous online tutorials and blog posts asserting the necessity of frameworks such as Vue and React. These resources often emphasize that beginners, like I was at the time, should familiarize themselves with these technologies. Amidst the enthusiasm for these new frameworks, there exists a tendency to disparage traditional content management systems (CMS) such as WordPress, which are frequently characterized in bleak terms as an “old, dying whale.” This idea raises significant concerns about my future in the field.

Drupal Webform "File Upload Element" Not Apeparning

Thu, 31 Oct 2024 00:00:00 +0000

Issue Repeated

I am in the process of creating a form in Drupal 10 utilizing the Webform module. I can successfully add elements such as “Textfield” and “TextArea.” However, when I attempt to add the “File upload” field, it does not appear in the list of available options. Please refer to the attached screenshot for clarification. I would appreciate your assistance in resolving this issue and enabling the file upload field in the form.

GovCMS Docker Issue Fallback Solution

Thu, 17 Oct 2024 00:00:00 +0000

Issue Repeated

The other day I was encountering a GovCMS PaaS client with very odd code-base, deplpying on my local computer first require my GitHub ghp_xxxxxxxx authentication key (solved via adding docker-compose.override.yml file), then it raised an issue of "/usr/local/bin/drush": not found (solved via uncommenting lines in Dockerfile.cli file), then I found its scaffold to be outdated (solved via updating .version.yml scaffold version number) …

Even after all these patches, once I run ahoy up, the website still cannot run properly. All the associated docker container starts as I run pygmy up && ahoy build as expected, but soon as the build process finishes, the nginx-1 container magically kills/pauses itself with the following error:

GovCMS PaaS (Platform as a Service) Update

Wed, 16 Oct 2024 00:00:00 +0000

As mentioned in a earlier post “GovCMS SaaS vs PaaS”, in SaaS website, the client is responsible for all the patching including security updates (unlike SaaS environments which does it all automatically). This post will guide you through on how to perform these update yourself.

Introduction

To begin with, we’ll need to differntiate the compositional part of the GovCMS PaaS website that will need update:

govCMS/govCMS : the main repository for the Drupal-based GovCMS distribution, which provides a content management system tailored for Australian government websites. It includes core functionality and modules necessary for compliance and accessibility standards. (GitHub, Packagist)
govCMS/scaffold-tooling: comprises a collection of standard configurations, scripts, and packages designed to support the GovCMS scaffold. It includes tools for continuous integration and testing, enhancing development and deployment processes. (Github, Packagist)
custom/patch : some PaaS website also have custom module (contributed module) installed, or patches serve as temporary fixes or modifications to the website’s existing codebase. They are utilized to rectify bugs that may emerge during regular operation, ensuring the site maintains optimal performance and user experience.
govcms/scaffold: serves as a template for creating GovCMS projects. It helps streamline the setup process by providing a predefined structure and configuration for new projects, ensuring consistency and best practices. (Github)

Composer

Likewise explaied in this knowledge base post by GovCMS: link. You will need to update all the dependencies via altering the version number in the composer.json and patch.json files, and run composer update (resolve dependency issue that arises).

Reoslution for ["/usr/local/bin/drush": not found"]

Wed, 16 Oct 2024 00:00:00 +0000

Error Repeated

For some of the GovCMS client, I ran into this problem while trying to install the client website on my local computer: after running pygmy up to crank up the amazie container, composer install to install the package, I got the following error while running ahoy build (same for ahoy up):

> ahoy build
[+] Building 1.0s (29/37)                                                                                                     docker:desktop-linux
 => [php internal] load build definition from Dockerfile.php                                                                                  0.0s
 => => transferring dockerfile: 244B
 ...
 ...
 ...
 => CACHED [test stage-1  8/12] RUN composer --working-dir=audit-site update --ignore-platform-reqs --no-interaction --no-suggest             0.0s
 => CACHED [test stage-1  9/12] WORKDIR /app                                                                                                  0.0s
 => ERROR [test stage-1 10/12] COPY --from=cli /usr/local/bin/drush /usr/local/bin/                                                           0.0s
 => CANCELED [nginx stage-1 1/2] FROM docker.io/govcms/nginx-drupal:10.x-latest@sha256:aae5325c977a943969a02ea0b1a6340e3cac6f58fcbd032911e76  0.2s
 => => resolve docker.io/govcms/nginx-drupal:10.x-latest@sha256:aae5325c977a943969a02ea0b1a6340e3cac6f58fcbd032911e76f3bd80d3677              0.0s
 => => sha256:ee1752d59231d421688bce9acc6f031f70dababa0e22f963a9ab9f8de0acdbfb 8.42kB / 8.42kB                                                0.0s
 => => sha256:4e8b32b7ceed2273f0a46cfa7750ab6d83eb8c59186ec29a4103a9747a43e50d 32.19kB / 32.19kB                                              0.0s
 => => sha256:aae5325c977a943969a02ea0b1a6340e3cac6f58fcbd032911e76f3bd80d3677 1.61kB / 1.61kB                                                0.0s
 => CANCELED [php stage-1 1/2] FROM docker.io/govcms/php:10.x-latest@sha256:1a6fe5b2d8eea699f0726a5fee5e6d02ad4775ab752a1dc340f8fda62967eea6  0.1s
 => => resolve docker.io/govcms/php:10.x-latest@sha256:1a6fe5b2d8eea699f0726a5fee5e6d02ad4775ab752a1dc340f8fda62967eea6                       0.0s
 => => sha256:86d49b3929177bc771c7c46842bbe2dead6fc633aba216231353326b5c525884 24.94kB / 24.94kB                                              0.0s
 => => sha256:59fd0b12489ee3c2a16122c0a1b0ee06882ca6d355aefbd20bd904b49b377e06 6.55kB / 6.55kB                                                0.0s
 => => sha256:1a6fe5b2d8eea699f0726a5fee5e6d02ad4775ab752a1dc340f8fda62967eea6 1.61kB / 1.61kB                                                0.0s
------
 > [test stage-1 10/12] COPY --from=cli /usr/local/bin/drush /usr/local/bin/:
------
failed to solve: failed to compute cache key: failed to calculate checksum of ref 0402bcea-675b-4e70-bf0f-dfa57911b0c1::ph76omges2o2rc5qsj75n5txc: "/usr/local/bin/drush": not found

See screenshot of this at: this link.

Drupal Tailwind CSS / Tailwind UI

Mon, 14 Oct 2024 00:00:00 +0000

Introduction

This post will provide a quick guidance on:

how-to for installing the “Tailwind CSS” on to your custom drupal theme/sub-theme,
how to create a reusable component styled based on “Tailwind UI” using paragraph module

Resources referenced in this post includes:

Tailwind CSS - Official Installation Guide: https://tailwindcss.com/docs/installation
Tailwind UI - Official Installation Guide: https://tailwindui.com/documentation
Theme Drupal - Adding assets: https://www.drupal.org/…/asset
Web Developer Jones - Install Tailwind CSS in Drupal 10: https://www.youtube.com/watch?v=kzmjUmTBVnI

Step-1: Initialization of Sub-Theme

To begin with, you can refer to this post on how to create a sub-theme based on any contributed theme, for my instance I am creating my sub-theme of machine name tailwind-civic based on the CivicTheme, which has its special provided script to generate sub-theme (see screenshot):

GovCMS Update Scaffold (PaaS only)

Wed, 25 Sep 2024 00:00:00 +0000

How to update the GovCMS scaffold?

To keep your scaffold up to date, changes to the GovCMS scaffold must be merged with your site’s master branch via a merge request. This requires development effort to ensure your site remains up to date.

When a new version of the Scaffold is released, developers should merge a copy of the new scaffold with their site, noting any differences, testing, confirming, fixing conflicts and then merging as required.

Drupal Debug Twig

Thu, 12 Sep 2024 00:00:00 +0000

Intuition

I come across twig template development a lot due to the need of developing styled component around “Paragraph” module. During the process, in order to get the required values from the twig variables, I always found myself endlessly trying difference combination of key/filter by using dump() or var_dump().

For instance, to get the url of a media entity field, I’ll need to write the following twig expression: {{content['field_footer_image'].0["#media"]|file_uri|file_ur}} . And in order to get to this long long expression, I will need to use dump() on every single key/filter.

Ahoy Build - ERROR [cli internal] load metadata for docker.io/govcms

Tue, 10 Sep 2024 00:00:00 +0000

Original Error

I was encountering this issue as I run ahoy build:

> ahoy build
[+] Building 12.5s (2/2) FINISHED                                                                      docker:desktop-linux
 => [cli internal] load build definition from Dockerfile.cli                                                           0.0s
 => => transferring dockerfile: 1.43kB                                                                                 0.0s
 => ERROR [cli internal] load metadata for docker.io/govcms/govcms:10.x-latest                                        12.4s
------
 > [cli internal] load metadata for docker.io/govcms/govcms:10.x-latest:
------
failed to solve: govcms/govcms:10.x-latest: failed to resolve source metadata for docker.io/govcms/govcms:10.x-latest: failed to do request: Head "https://registry-1.docker.io/v2/govcms/govcms/manifests/10.x-latest": net/http: TLS handshake timeout

[Note] Drupal Apply Patch via Composer

Wed, 28 Aug 2024 00:00:00 +0000

TLDR;

Install cweagans/composer-patches module via composer:

`1`	`composer require cweagans/composer-patches`

Modify <root>/composer.json to include the core/module/theme patch:

...
"require": {...},
"require-dev": {...},
"extra": {
+    "patches": {
+        "drupal/pathauto": {
+            "Issue #3275041": "https://www.drupal.org/files/issues/2022-04-13/add_bypass_uniquifier_settings-3275041-2.patch"
+        }
    },
    "drupal-scaffold": {...},
    "installer-paths": {...}
}
...

Run corresponding composer update command (e.g. for the above we applied patch for pathauto module):

`1`	`composer update drupal/pathauto`

Clear cache via druah command

`1`	`drush cr`

Reference

PENDING TO READ THESE PAGES FOR MORE DETAILS

Drupal Debug PHP File

Wed, 28 Aug 2024 00:00:00 +0000

Method-1: PHP (print_r / var_dump / var_export)

You may use a combination of the print_r(), var_dump(), var_export(), and always end with die() to break the logic flow, such that the function hault on your debug code and print out:

  print_r    ("HELLO WIRLD from PRINT_R");
  dump       ("HELLO WORLD from DUMP");
  var_export ("HELLO WORLD from VAR_EXPORT");
  var_dump   ("HELLO WORLD from VAR_DUMP");
  die();

For instance you can have the following code to debug print in custom_theme_name.theme file:

DDEV - failed to connect to /var/run/com.docker.vmnetd.sock: is vmnetd running?

Fri, 26 Jul 2024 00:00:00 +0000

Intuition

Getting the following error when running ddev start:

> ddev start
Starting my-site...
Mutagen sync session 'my-site' exists but unable to get sync label 'com.ddev.volume-signature': '' This is normal on upgrade from v1.21.6; error=Mutagen sync session for app 'my-site' does not exist or is not enabled; status=not enabled; err=<nil>
Building project images...
.Project images built in 1s.
 Network ddev-my-site_default  Created
 Container ddev-my-site-db  Created
 Container ddev-my-site-web  Created
 Container ddev-my-site-web  Started
 Container ddev-my-site-db  Started
Starting Mutagen sync process...
Mutagen sync flush completed in 1s.
For details on sync status 'ddev mutagen st my-site -l'
Waiting for containers to become ready: [web db]
Starting ddev-router if necessary...
 Container ddev-router  Created
Error response from daemon: Ports are not available: exposing port TCP 127.0.0.1:443 -> 0.0.0.0:0: failed to connect to /var/run/com.docker.vmnetd.sock: is vmnetd running?: dial unix /var/run/com.docker.vmnetd.sock: connect: no such file or directory
Failed to start my-site: failed to start ddev-router: composeCmd failed to run 'COMPOSE_PROJECT_NAME=ddev-my-site docker-compose -f /Users/suowei_hu/.ddev/.router-compose-full.yaml -p ddev-router up --build -d', action='[-p ddev-router up --build -d]', err='exit status 1', stdout='', stderr=' Container ddev-router  Creating
 Container ddev-router  Created
 Container ddev-router  Starting
Error response from daemon: Ports are not available: exposing port TCP 127.0.0.1:443 -> 0.0.0.0:0: failed to connect to /var/run/com.docker.vmnetd.sock: is vmnetd running?: dial unix /var/run/com.docker.vmnetd.sock: connect: no such file or directory'

Solution

Start by vmnetd running:

[Bug Fix] Composer Unpin Drupal Core From Certain Version

Wed, 24 Jul 2024 00:00:00 +0000

#Unpinning from a specific version of core

If you are running a pinned version of Drupal core, and want to update your site to another version, you have two choices.

You can run the composer require command above to specify a new, pinned version of core. You can unpin your core version, and update to the latest version of Drupal. To unpin your version of Drupal, run this command:

`1`	`composer require drupal/core-recommended drupal/core-composer-scaffold drupal/core-project-message --update-with-all-dependencies`

Reference

GovCMS - theme changes are not updating on live site

Fri, 19 Jul 2024 00:00:00 +0000

(Production Website does not change Upon Successful Deployment)

Incident Happened ?

I come acorss this incident whilst updating a banner image for a GovCMS website client, the client would like to replace the image from image-a to image-b. After some quick investigation, I found the image to be applied via css styling: background-image: url(/site/../../image-a), so I simply changed the line to ``background-image: url(/site/../../image-b)`, made some adjustment to the position/cover etc, and have everything merged & deployed onto the production.

Drupal - TFA Moduel Setup

Mon, 08 Jul 2024 00:00:00 +0000

This post records steps that I’ve went through to setup the TFA feature on drupal website, so I can quickly reproduce the step quickly without wondering around like a fly.

Step-1: Module Installation & Environental Setup

To begin with, it is always recommended to take a backup of your server (filebase/database/htaccess file) before doing everything, this ensures you have a second chance when something went wrong in the upcoming process

GovCMS Docker - No space left on device

Thu, 20 Jun 2024 00:00:00 +0000

Error Reproduced

I come across this error when trying to do ahoy up on one of the GovCMS client project, whilst the command successes without throwing any error:

> ahoy up

WARN[0000] /Users/suowei_hu/Documents/é GitHub/example/docker-compose.yml: `version` is obsolete
[+] Running 8/0
 ✔ Container example-av-1       Running                                                                                                                   0.0s
 ✔ Container example-mariadb-1  Running                                                                                                                   0.0s
 ✔ Container example-cli-1      Running                                                                                                                   0.0s
 ✔ Container example-solr-1     Running                                                                                                                   0.0s
 ✔ Container example-test-1     Running                                                                                                                   0.0s
 ✔ Container example-php-1      Running                                                                                                                   0.0s
 ✔ Container example-nginx-1    Running                                                                                                                   0.0s
 ✔ Container example-chrome-1   Running                                                                                                                   0.0s
2024/06/19 22:36:30 Waiting for: tcp://mariadb:3306
2024/06/19 22:36:30 Connected to tcp://mariadb:3306
Project                  :  example
Site local URL           :  http://example.docker.amazee.io
WARN[0000] /Users/suowei_hu/Documents/é GitHub/example/docker-compose.yml: `version` is obsolete
DB port on host          :  50658

when I visit the given url I see the following

[GovCMS PaaS] ahoy error: you must use a personal access token instead of a password

Fri, 14 Jun 2024 00:00:00 +0000

Issue Reproduced

...
WARN[0000] /Users/admin/sites/XXXXX/docker-compose.yml: `version` is obsolete
[+] Running 2/2
✘ mariadb Error Head "https://gitlab-registry-productio...                0.4s
! cli Warning   context canceled                                          0.4s
Error response from daemon: Head "https://gitlab-registry-production.govcms.amazee.io/v2/xxxxxx/xxxxxx/mariadb-drupal-data/manifests/latest":
unauthorized: HTTP Basic: Access denied. The provided password or token is incorrect or your account has 2FA enabled and you must use a personal access token instead of a password.
See https://projects.govcms.gov.au/help/user/profile/account/two_factor_authentication#troubleshooting
...

Resolution of Error

First get a personal acecss token with the proper privilledge, if you are unsure, select all privilledge: (your personal access token should look somthing like glpat-XXXXXXXXXXXXXXXXX)

[GovCMS SaaS] Configure Pathauto Pattern: [node:menu-link:parents:join-path]/[node:title]

Fri, 14 Jun 2024 00:00:00 +0000

Issue Reproduced

I was going to make a node’s url match with its menu configuration, this causes me having to go to the configuration page: “Admin > Config > Url-Alias > Pattern” (/admin/config/search/path/patterns), and add a pattern “[node:menu-link:parents:join-path]/[node:title]”.

As I try to add the new pattern as described above, I’ve got the error: “Path pattern is using the following invalid tokens: [node:menu-link:parent:join-path].”

After some investigation, I findout this issue only happens on GovCMS SaaS Platform; The Venilla Drupal 10 works fine (adding the pattern “[node:menu-link:parents:join-path]/[node:title]”) without this issue and same does the PaaS version of the platform. (Hopefully this can get patched soon…. ?)

Reflection on Toby's Talk on DrupalACT Meet-up (2024-June-05)

Thu, 06 Jun 2024 00:00:00 +0000

Overview

Yesterday, I attended an offline meetup where three presentations were given. The first was on handling misaligned user data through a data pipeline and storing it in a solar database by Brynn Briedis (gumnut). The second focused on replacing paragraph type and twig template with vue components as the render template by Alex Monaghan. The final, and most enjoyable, presentation by Toby Wild discussed improving user experience for those working 8 hours in the Drupal admin backend, specifically for content authors. (p.s. he have a blog too !)

Disable Shield via Drush

Tue, 04 Jun 2024 00:00:00 +0000

In Drupal, the “Shield” module is used to protect your site with a simple HTTP authentication prompt, which is typically needed during development to prevent unauthorized access to the site.

Disable Shield via Drush

To disable the Shield module using Drush (Drupal’s command-line shell), you can use the following command:

For Drupal 8 and later:

From Drupal 8 onwards, modules are no longer disabled—they are uninstalled if you need to remove them. If you simply want to disable the Shield authentication (and not uninstall the module), you might need to change its configuration instead. However, if uninstalling is your aim:

Drupal Database Logging [PENDING]

Wed, 29 May 2024 00:00:00 +0000

To view the log, navigate to the Recent log messages page (http://example.com/admin/reports/dblog) You can see things like when a content is deleted, created, by who…..

https://drupal.stackexchange.com/questions/48645/how-to-show-admin-reports-dblog-in-terminal-cli https://www.drupal.org/docs/8/core/modules/dblog/overview

GovCMS Forklift

Tue, 21 May 2024 00:00:00 +0000

!!!!

This Post is simply a copy-paste from the GocCMS knowledge archive https://www.govcms.support/support/solutions/articles/51000095221-forklift-basics

(If there is any infringement, please contact me, and I’ll delete the post.)

!!!!

What is a forklift & what is not?

What is a forklift ?

A forklift is the process of copying a database and/or files (CMS media assets) from a source environment/site into an existing target environment/site. This includes:

Moving a site built locally from a developer onto the GovCMS platform
Moving a site from one project to another
Moving a database/files in the same project from a lower environment to Master

What is not a forklift ?

In some instances forklifts are not needed or not warranted. This includes:

DVF (Data Visualization Framework) Quick Guidance

Thu, 16 May 2024 00:00:00 +0000

Introduction

Data Visualisation Framework (DVF) is a Drupal 8/9 module designed to turn data sets into visualisations. In summary, it reads data from a source, such as CSV, JSON or even a remote CKAN instance. It then provides the tools for content authors to turn that data into a visualisation that is easily digestible for the website users.

In this documentation, we will demonstrate how we can utilise the DVF to create different types of interactive charts, how we can use different types of charts, and how to configure the DVF field to enable customised colours, styles, and labels.

Fields pending deletion stopping module unistall

Tue, 07 May 2024 00:00:00 +0000

Error/Issue Encountered

When I am attempting to uninstall one of the modules, it says The following reason prevents XXXX from being uninstalled: Fields pending deletion, like the following screenshot shows:

Resolution Approach - 1

Method proopsed by naomi:

It turns out that deleted fields in Drupal 8 are stored in the key_value table.

To find them you can do that via the command
1
select * from key_value where name = "field.field.deleted" or name = "field.storage.deleted"
The values are stored as a blob, but can be viewed (e.g. in phpmyadmin you can click on it to download, and view in vim or similar). The value does not make much sense to a human, but having gone through the code printing and error-logging various things it was clear to me that these entries were what was holding up the uninstall. I backed up the table and deleted the entries, and then was able to uninstall the module.

Drush list module/theme (via pm:list command)

Mon, 06 May 2024 00:00:00 +0000

Basic Usage

List installed theme, list intstalled modules

1
2

drush pm-list --type=Theme
drush pm-list --type=Module --status=enabled

Exporting to File

List the installed modules using debug verbose mode, and export into csv format into file enabled_modules.csv:

`1`	`drush pm-list --type=Module --status=Enabled -vvv --format=csv >> enabled_modules.csv`

(noting that the --type and --status option have to be in front of the --format option, otherwise it will not work)

[GovCMS SaaS] ahoy error: github-outh.github.com is not defined

Thu, 02 May 2024 00:00:00 +0000

Issue Reproduced

I run into this issue while performing ahoy build command for a client site, which will initiate the GovCMS environment, including running the composer install command inside the docker container to the install the required modules from the drupal modules repositories. And that have triggered the error: In ConfigCommand.php Line 322: github-oauth.github.com is not defined and process "/bin/sh -c composer config -global github-oauth.github.com $GOVCMS_GITHUB_TOKEN" did not complete successfully: exit code: 1.

Drupal "Entity Reference" field vs "Entity Reference Revision" field vs "Dynamic Entity Reference"

Mon, 22 Apr 2024 00:00:00 +0000

Comparison

Overview

According to the project page for Entity Reference Revision module:

Entity Reference Revisions adds an Entity Reference field type with revision support, allowing specific entity revisions to be references. This is useful for modules like Paragraphs and Inline Entity Form
According to the project page for Dynamic Entity Reference module:

Dynamic Entity Reference provides a field type/widget/formatter combination for Drupal 8 that allows an entity-reference field to reference more than one entity type.

Drupal Error: attempt to create field when field storage does not exist

Tue, 23 Apr 2024 00:00:00 +0000

Resolution for error"Attempted to create an instance of field with name field_name_xxyyzz on entity type node when the field storage does not exist."

Drupal Error: Module ... has an entry in the system.schema key/value storage

Mon, 08 Apr 2024 00:00:00 +0000

Error Found

After performing composer update, and during the execution of /update.php to update database, the following was observed:

Error Resolution

To repair these sorts of errors, you must remove the orphaned entries from the system.schema key/value storage system. There is no UI for doing this. At this point, the simplest solution is to use drush to evaluate some PHP code to invoke a system service to manipulate the system.schema table. For example, to clean up these two errors:

Drupal Custom Module: Logging Message using PHP (PHP Debug Message)

Fri, 15 Mar 2024 00:00:00 +0000

Step-1: Get instance of messenger service

Method 1

Standard way to get messenger service, in case you want to pass it using dependency injection.

$messenger = \Drupal::service("messenger");

Method 2

Fast way to use helper function.

$messenger = \Drupal::messenger();

Also in the form object or controller we don’t have include it using dependency injection. We can us directly

$messenger = $this->messenger();

Step-2: Adding info/warn/error message

Add message. Allows to send a message of any type, the second parameter accepts the type: $meesenger->addMessage(t('Your message.'), MessengerInterface::TYPE_WARNING);; But in most of the cases it is better to use directly specific method:

GovCMS Drupal CLI Command (Drush Command) - Backup

Thu, 14 Mar 2024 00:00:00 +0000

Logging in without username / password

1
2
3

ahoy drush uinf --uid=1        # Getting the first user created in the db
ahoy drush uublk [user-name*]  # Unblock that user’s name (overwrite name)
ahoy login                     # The generic drush login thing

Enabling / Disable two-factor-authenticator module

1
2

drush config-set tfa.settings enabled 0
drush config-set tfa.settings enabled 1

Importing database to WHM / VPS server

1
2

mysql –username=[USERNAME] –password [DBNAME] < [FILE_REALPATH]
# (Then enter password for user USERNAME)

Composer Package Manager

Drush Login (on Local/CPanel)

Mon, 11 Mar 2024 00:00:00 +0000

First you will open your terminal and navigate to the root directory of the website, then execute the drush user-login command (or its abbreviated version: drush uli). For instance here I will be using CPanel:

Some similar commands are:

1
2

drush uli --name=admin
drush uli --uid=1

Once you’ve got the login url from the terminal, for instance:

`1`	`http://default/user/reset/1/0123456789/0D_CraSDdasdaa432s2DSAJDKLJASKLD_0A/login`

You will need to copy the bit after the default/ starting with /user , and paste them after the base url of your drupal website (or in another word, replace default with the base-url of your website), for instance:

Resolve error: 'anti-virus scanner could not check the file'

Wed, 28 Feb 2024 00:00:00 +0000

Issue Found

Drupal Core: 8.7.8
Lightning: 4.0.5
PHP: 7.2

Steps to reproduce.
- Enable ClamAV and leave "host" field blank.
- Go to Content > Add Media > Image.
- Upload an image.
- An error should be returned reading: "The anti-virus scanner could not check the file, so the file cannot be uploaded. Contact the site administrator if this problem persists." This is the expected result since we did not configure the clamav host.
- Create a content type with an image field. In form display set the widget as Entity Browser with Image browser in settings.
- Go to Content > Add Content > Content type - with the image field that has entity browser widget configured.
- Click Select Images
- Click Upload tab
- Upload image.

Resolution Approah

First find the “ClamAV Anti-Virus” panel via searching over the module admin page:

Drupal Module Installed but Missing

Sun, 11 Feb 2024 00:00:00 +0000

Error Encountered

1
2

The following module is marked as installed in the core.extension configuration, but it is missing:
* xxyyzz_module_name

Solutions

Solution 1: Remove from core.extension

If you have access to the command-line-interface and drush command, you can do it via:

`1`	`$ drush cdel core.extension module.MYMODULE`

(OR) If you have acccess to the configuration synchronization, you can also do that via exporting the configuration, manually changing the core.extension, then importing the modified configruation again.

GovCMS PaaS vs SaaS

Tue, 23 Jan 2024 00:00:00 +0000

What is PaaS and SaaS ?

PaaS stands for Platform as a Service.
- It is a cloud computing model where: a service provider offers a platform for developing, running, and managing applications. PaaS provides a pre-configured environment with resources such as operating systems, development tools, and databases.
- Usually more configurable, but more time-consuming to setup.
SaaS stands for Software as a Service.
- It is a cloud computing model where: a service provider hosts software applications and makes them available to users over the internet. Users can access and use these applications through web browsers without the need for installation or maintenance on their local devices.
- Usually less configurable, but much easier to setup.

GovCMS PaaS vs SaaS

GovCMS Software as a Service (SaaS) customers get high quality security protection and compliance. Our services include website protection and ongoing website security assessments including IRAP. We also provide security patching, support and 24/7 monitoring. You are responsible for staff user accounts and content.

Drupal get URL from media entity in twig

Fri, 12 Jan 2024 00:00:00 +0000

PENDING

https://www.drupal.org/project/media_entity_image/issues/2856093

{# The field name in the content is "field_image2" #}
{% for key, image in content.field_image2  %}
    {% set media = image.entity %}
    {# The field name in the referenced entity is "field_image_file #}
    {% set file = media.field_image_file.entity | merge({'#image_style': 'thumbnail'}) %}
    {% set uri = file_url(file.uri.value)  %}
    <img src="{{ uri }}" alt="{{ media.name.value }}" />
{% endfor %}

Drupal Error: Update No available releases found

Sun, 07 Jan 2024 00:00:00 +0000

Error Update Not Found

(Drupal 10)

When inspecting one of my client’s website, of “update manager” fails to check the pending update module/core. In my case at the time, Drupal core is 10.2.1 is already available, however, the website with Drupal core 10.2.0 does not show there’s this available update in the “update manager” panel.

(Drupal 11)

For some Drupal 11 clients I also got similar issue that can be fixed with the same method below, but the symptom is slightly different:

jQuery dollar sign ($)

Fri, 08 Dec 2023 00:00:00 +0000

jQuery dollar sign

Why isn’t the dollar sign working ?

In the normal scenario we can use one of the following:

1
2

$("#element-name").xxx();      /* Normal jQuery */
jQuery("#element-name").xxx(); /* Safe   jQuery */

But in some area case the the “normal jquery” will not function anymore (for instance the below); After some quick research online, we found this has to do with the “jQuery compatiibilty mode”, which serves the purpose to avoid conflict with other javascript library. (other library may have also use the dollar sign, or extended the function of dollar sign, importing jquery with out the compatibility mode may override these functions).

Drupal X-Debug Twig Template 1: Turning on X-Debug

Thu, 23 Nov 2023 00:00:00 +0000

Note: This post focuses on developing a Drupal website on a MacOS machine using MAMP & MAMP Pro hosting software, Apache HTTP Server, and MySQL Backend. The goal is to debug the PHP file to access the variables available in a Twig template.

Turning on X-Debug for PHP (Pro MAMP)

If you are developing using a Pro MAMP: simply turn the the “Xdebug (Debugger)” setting under the “Language > PHP” tab (on the sidebar):

Drupal X-Debug Twig Template 2: Setup of PhpStorm

Thu, 23 Nov 2023 00:00:00 +0000

Note: This post focuses on developing a Drupal website on a MacOS machine using MAMP & MAMP Pro hosting software, Apache HTTP Server, and MySQL Backend. The goal is to debug the PHP file to access the variables available in a Twig template.

In the previous post we have successfully turn on the xdebug in php, and now we will setup the PhpStorm, and using it to add a breakpoint on the php file index.php, and use it to inspect the variables in the scope of the breakpoint.

Drupal X-Debug Twig Template 3: Using Debugger for Twig Template

Thu, 23 Nov 2023 00:00:00 +0000

Note: This post focuses on developing a Drupal website on a MacOS machine using MAMP & MAMP Pro hosting software, Apache HTTP Server, and MySQL Backend. The goal is to debug the PHP file to access the variables available in a Twig template.

In the previous post we have successfully turn on the xdebug in php, and setup the PhpStorm to import the project, and using the debugger to add a breakpoint on the index.php; now in this post we will guide you through how to use the debugger on the process of developing twig template.

Twig - Debug/Development Environment - Get Variable - [PENDING]

Wed, 22 Nov 2023 00:00:00 +0000

DUMP()

PENDING…

{{dump( )}}                    // Will list all twig variables in the current twig template
{{dump( content )}}            // Will list all twig variables in the current content
{{dump( variable_name )}}      // Will list all twig variables in the your variables
{{dump( variable_name.0.entity["#items"].0.field.value|raw)}}    // Another example

https://www.drupal.org/docs/develop/theming-drupal/twig-in-drupal/debugging-twig-templates

PHP X-debug

PENDING…

https://www.drupal.org/docs/develop/theming-drupal/twig-in-drupal/debugging-twig-templates https://xdebug.org/docs/step_debug https://chromewebstore.google.com/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc?pli=1 https://www.youtube.com/watch?v=HrQWtbxY1Hs https://xdebug.org/wizard http://localhost:8888/MAMP/phpinfo.php

Twig - Debug/Development Environment - Setting Configuration

Wed, 22 Nov 2023 00:00:00 +0000

Enable Twig Debug (Show source file)

In order to have the output such as:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'paragraph' -->
<!-- FILE NAME SUGGESTIONS:
   * paragraph--accordion-single--default.html.twig
   x paragraph--accordion-single.html.twig
   * paragraph--default.html.twig
   * paragraph.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/XXXX/templates/paragraph/paragraph--accordion-single.html.twig' -->

printing in the terminal (this is good to help identifying the source of twig template file current node is rendering from).

Twig - Generate Unique ID for Component

Wed, 22 Nov 2023 00:00:00 +0000

Intuition

Some time you would like to have id in the twig template component to enable say: precise query/selector targeting with css, or setting attributes to enable certain behavior for javascript frameworks such as bootstrap:

For example: the example from Bootstrap Accordion

<!-- Notice the #collapseOne below  -->
<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Accordion Item #1
        </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div class="accordion-body">
            <strong>This is the first item's accordion body.</strong>
        </div>
        </div>
    </div>
  </div>

Method-1: random

Simply set the unique id using {% set unique-id = random() %}, then use it as the attribute for id or data selector, such as below:

Twig - Twig Filters/Modifier (Universal & Drupal Specific)

Wed, 22 Nov 2023 00:00:00 +0000

Twig filter: universal filters

* striptags:    removing html syntax tag from from the string
                {{ content.variable.0.value | striptags }}             //REMOVE ALL TAGS
                {{ content.variable.0.value | striptags('<br><p>') }}  //REMOVE <br> and <p> TAGS
other filter:   abs batch capitalize column convert_encoding country_name currency_name currency_symbol data_uri date date_modify default escape filter first format format_currency format_date format_datetime format_number format_time html_to_markdown inline_css inky_to_html join json_encode keys language_name last length locale_name lower map markdown_to_html merge nl2br number_format raw reduce replace reverse round slice slug sort spaceless split striptags timezone_name title trim u upper url_encode

Link to Post/Documentation

Twig filters: drupal specific filters

* raw           : This filter should be avoided whenever possible, particularly if you're outputting data that could be user-entered.
* clean_class   : This filter prepares a string for use as a valid HTML class name. (for instance "txt/raw" to "txt-raw")
* render        : This filter is a wrapper for the render() function. It takes a render array and outputs rendered HTML markup. This can be useful if you want to apply an additional filter (such as stripping tags), or if you want to make a conditional based on the rendered output (for example, if you have a non-empty render array that returns an empty string). It also can be used on strings and certain objects, mainly those implementing the toString() method.
trans           : This filter (alternatively, t) will run the variable through the Drupal t() function, which will return a translated string. This filter should be used for any interface strings manually placed in the template that will appear for users.
placeholder     : This filter escapes content to HTML and formats it using drupal_placeholder(), which makes it display as emphasized text.
format_date     : This filter prepares a timestamp for use as a formatted date string
safe_join       : The safe_join filter joins several strings together with a supplied separator
without         : The without filter creates a copy of the renderable array and removes child elements by key specified through arguments passed to the filter. The copy can be printed without these elements. The original renderable array is still available and can be used to print child elements in their entirety in the twig template.
add_suggestion  : The add_suggestion filter allows adding a theme suggestion to a render array rendered with #theme.
clean_unique_id : A new clean_unique_id Twig filter has been added to Drupal 10.1 and later. This can be used for getting a unique ID.

Link to Post/Documentation

Twig filters: add(), set(), recursive_merge()

1
2
3

set() filter             : `{{ form|set( 'element.#attributes.placeholder', 'Label' ) }}`
add() filter             : `{{ form|add( 'element.#attributes.class', 'new-class' ) }}`
recursive_merge() filter : `{{ form|recursive_merge( {'element': {'#attributes': {'placeholder': 'Label'}}} ) }}`

Link to Post/Documentation

Drupal Debug Trick: debug_backtrace / debug_print_backtrace - [PENDING]

Thu, 16 Nov 2023 00:00:00 +0000

PENDING …

ORIGINAL POST ↓

I find this useful as a less memory intensive Drupal-friendly way to backtrace PHP as a one-off code snippet to temporarily drop into a troublesome location without installing modules or server-side tools:

 $trace = debug_backtrace();
  $backtrace_lite = array();
  foreach( $trace as $call ) {
    $backtrace_lite[] = $call['function']."    ".$call['file']."    line ".$call['line'];
  }
  debug( $backtrace_lite, "TRACE", true );

It gets the backtrace into Drupal’s debugging system, but strips it down to the essentials to avoid failures when massive objects are involved. For handy reference, the other keys within each row of the debug_backtrace() object are: class, object, type, args.

Drupal CLI - reading database configuration (at CPanel)

Wed, 15 Nov 2023 00:00:00 +0000

Version-1

settings=$( echo "sites/default/settings.php" );
database=$( cat "${settings}" | grep "'database' =>" | grep -v "*" | grep -v "#" | sed -n "s/'database' => '\([^']*\)'.*/\1/p" | sed -e 's/^[[:space:]]*//') ;
username=$( cat "${settings}" | grep "'username' =>" | grep -v "*" | grep -v "#" | sed -n "s/'username' => '\([^']*\)'.*/\1/p" | sed -e 's/^[[:space:]]*//') ;
password=$( cat "${settings}" | grep "'password' =>" | grep -v "*" | grep -v "#" | sed -n "s/'password' => '\([^']*\)'.*/\1/p" | sed -e 's/^[[:space:]]*//') ;
echo -en "\n" && \
echo -en "\n" && \
echo -en "\n \e[1;31m Settings: [\e[1;33m${settings}\e[1;31m] \e[0m" && \
echo -en "\n \e[1;31m Database: [\e[1;33m${database}\e[1;31m] \e[0m" && \
echo -en "\n \e[1;31m Username: [\e[1;33m${username}\e[1;31m] \e[0m" && \
echo -en "\n \e[1;31m Password: [\e[1;33m${password}\e[1;31m] \e[0m" && \
echo -en "\n" && \
echo -en "\n";

Example output:

The 'entity:user' context is required and not present

Wed, 15 Nov 2023 00:00:00 +0000

Error Message

Drupal\Component\Plugin\Exception\ContextException: The 'entity:user' context is required and not present. in Drupal\Core\Plugin\Context\Context->getContextValue() (line 73 of core/lib/Drupal/Core/Plugin/Context/Context.php).

Working Solution for Me

File: public_html/core/lib/Drupal/Core/ParamConverter/EntityConverter.php b/core/lib/Drupal/Core/ParamConverter/EntityConverter.php

-    if (isset($contexts[$context_id])) {
-      $account = $contexts[$context_id]->getContextValue();
-      unset($account->_skipProtectedUserFieldConstraint);
-      unset($contexts[$context_id]);
-    }
+    if (isset($contexts[$context_id]) && $contexts[$context_id]->hasContextValue()) {
+        $account = $contexts[$context_id]->getContextValue();
+        unset($account->_skipProtectedUserFieldConstraint, $contexts[$context_id]);
+    }

Reference

Community Solution 1

File: public_html/core/lib/Drupal/Core/ParamConverter/EntityConverter.php b/core/lib/Drupal/Core/ParamConverter/EntityConverter.php

Install drush on drupal 8 site (using downgraded composer ver.1)

Fri, 10 Nov 2023 00:00:00 +0000

Intuition

I was recently working on a client site, and I got to the issue where the site will show “Page unavailable” upon login. And upon the suspicion of a mis-placed module or uncleared cache, I wanted to install drush to perform some drush commands.

I ran composer require drush/drush which will install the most recent compatible drush on my current working directory, but then I got this error:

...
The "composer/installers"           plugin was skipped because it requires a Plugin API version ("^1.0")    that does not match your Composer installation ("2.6.0"). You may need to run composer update with the "--no-plugins" option.
The "drupal/core-composer-scaffold" plugin was skipped because it requires a Plugin API version ("^1.0.0")  that does not match your Composer installation ("2.6.0"). You may need to run composer update with the "--no-plugins" option.
The "drupal/core-project-message"   plugin was skipped because it requires a Plugin API version ("^1.1")    that does not match your Composer installation ("2.6.0"). You may need to run composer update with the "--no-plugins" option.
The "drupal/core-vendor-hardening"  plugin was skipped because it requires a Plugin API version ("^1.1")    that does not match your Composer installation ("2.6.0"). You may need to run composer update with the "--no-plugins" option.
...

After some research, I found this issue could be potentially related to a version mis-match of the composer and the drupal 8 (reference: link), the composer in the project could be of version 1.XX, and the local instance is using version 2.XX …

Fixing module not getting recognized (after D9-10 upgrade)

Wed, 01 Nov 2023 00:00:00 +0000

Quick fix to the issue of module not getting recognized after upgrading from drupal-9 to drupal-10

Deprecation of "path/filename" api (after D9-10 upgrade)

Tue, 31 Oct 2023 00:00:00 +0000

Fixing custom modules’ code that are dependent of function drupal_get_path() and drupal_get_filename() which is deprecating in newest drupal 10, hence making it compatible for the upgrade (only for temporal purpose).

Deprecation of "url" api (after D9-10 upgrade)

Tue, 31 Oct 2023 00:00:00 +0000

Fixing custom modules’ code that are dependent of function file_create_url() and file_url_transform_relative() which is deprecating in newest drupal 10, hence making it compatible for the upgrade (only for temporal purpose).

Fixing bootstrap theme not getting recognized (after D9-10 upgrade)

Tue, 31 Oct 2023 00:00:00 +0000

Quick fix to the issue of theme not getting recognized after upgrading from drupal-9 to drupal-10

Websites downloads the PHP-File instead of opening the website

Tue, 31 Oct 2023 00:00:00 +0000

This tutorial provides step-by-step instructions to address the strange problem where, upon accessing a website, the index.php file begins to download instead of opening as intended. Users may encounter a dialog box prompting them to download the file, unsure of how to proceed when faced with options to open, close, or cancel. This article aims to guide you in resolving this issue effectively.

Solution 1: Rebooting your web development environment

Sometimes it will be a easy fix like rebooting your development environment / software, for my instance I am using MAMP, and by stopping the server and opening it again, solved 99% of my issues

Deprecation of "jquery.once" api (after D9-10 upgrade)

Tue, 24 Oct 2023 11:30:03 +1100

Fixing custom modules’ code that are dependent of jquery.once which is changing its api in newest drupal 10, hence making it compatible for the upgrade.

Migrating from Swift-mailer to Symfony-mailer

Tue, 26 Sep 2023 00:00:00 +0000

Useful Links

Symfony Mailer Library Official: LINK
Drupal Symfony Mailer Module: LINK

Description

This module is a simple wrapper for Symfony Mailer, providing full support for HTML mails, templating, theming with inline CSS, file attachments and more. Loosely based on the popular swiftmailer module.

Version Check

Double checking the drupal version (Because the Symfony Mailer Module will only work under drupal version 10.1+ ) (This module is not compatible with Drupal 10.1 due to #3371042: Drupal 10.1.0 new aggregation breaks InlineCssEmailAdjuster. https://www.drupal.org/project/symfony_mailer)

GocCMS Training - Quick Note

Sat, 01 Apr 2023 00:00:00 +0000

CONTENT

UNIT 1: FUNCTIONAL ANALYSIS

come for the software, stay for the community slack for drupal community “??????? wordpress vs drupal WYSIWYG for wordpress

container of roles preset for the roles when you create a new user … people > user > option to assign roles (one or multiple)

in general if you are working on the GovCMS SaaS version you will not get the privilege of creating/modifying permission roles delegate

GocCMS Training Todo - Scribble Note

Sat, 01 Apr 2023 00:00:00 +0000

PENDING TODO

[Snippet] settings.php snippet for MAMP

Sun, 01 Jan 2023 00:00:00 +0000

Version 1


//████████████████████████████████████████████████████████████████
//█████ DEBUG STUFF BELOW █████ DELETE AFTER FINISH YOUR JOB █████
//████████████████████████████████████████████████████████████████
$databases['default']['default'] = array (
    'database' => 'public_html',
    'username' => 'root',
    'password' => 'root',
    'prefix' => '',
    'host' => '127.0.0.1',
    'port' => '8889',
    'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql',
    'driver' => 'mysql',
);
// ████████████████████████████████████████████████████████████████
$settings['trusted_host_patterns'] = array();
$settings['update_free_access'] = TRUE;
// ████████████████████████████████████████████████████████████████
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
$config['system.logging']['error_level'] = 'verbose';
$conf['error_level'] = 2;
//████████████████████████████████████████████████████████████████
//█████ DEBUG STUFF ABOVE █████ DELETE AFTER FINISH YOUR JOB █████
//████████████████████████████████████████████████████████████████

Drupal on Simon's Blog

Drupal Theme -- Import Default Configuration on Theme Install

Theme Import Configuration on Install

Drupal Custom Module -- Configuration and Settings Form

Introduction

Configuration API

Drupal Custom Module -- Cron Job (Drupal Cron API)

Introduction

Vue Component (Nuxt UI Component) on a Drupal Site

Vue in Drupal: Basic Component (Counter)

Step-1: Installing and Configure Vue and Vite

Drupal Installation Profile (& Distribution)

Introduction

Drupal Watchdog and Drush Watchdog Command

Quick Peek into “Watchdog” Table

What Each Column in Watchdog Table Means ?

Watchdog Logs in Drupal Backend

Drush archive:dump & archive:restore

Backup Drush Commands - drush archive:dump

Pass Variables from Twig Template to JavaScript

Intuition

[Note] Drush Site:Aliases (with DDEV)

TLDR;

[HTMX in Drupal] Client-Side-Tempalte Component using Drupal JSON-API as Data

Introduction

[Snippet] ddev drupal code snippet (creates experimental site)

SDC using twig function html_cva()

CVA in React

[Note] Drupal Module for Developers: WebProfiler

Active Toolbar Items

[Scribble] GovCMS Non-Production Only Configuration File (via config/dev)

What has been discovered ?

[Note] Drupal Webform Auto-complete via Google Place API

Method-1: via Webform JavaScript

Method-1a: via google.maps.places.PlaceAutocompleteElement

Method-1b: via google.maps.places.Autocomplete (deprecated)

Drupal Interactive Table (via TableField & DataTable)

Intuition

[Scribble] GovCMS D11 Compatibility - Migrate GovCMS8 Modifier to Theme

[Scribble] Web Component - Opponent & Proponents

[Drupal] Webform - Generate PDF and Attach in Email upon Submission

Intuition

[Note] Local Development: Install Community Contributed Module in GovCMS

Drupal Post Update (add_lange_code) memory exhausted issue fix

Original Error

[Scribble Note] Source of CivicTheme Paragraph Variable?

[Note] Drupal Set Retrieve Cookie (version 8 ~ 11)

Drupal 11

Drupal 9 & 10

[Note] Why Drupal needs jQuery.noConflict() ?

Intuition of the search

[GovCMS Error] cli warning: pull access denied

Issue Encountered

Solution-0

[Note] Resolve Error 1050 (42S01) Table 'xxyyzz' already exists

Solution-1: use custom method to export database

[Patch] Drupal 10.3 not used/recognised

Issue / Problem

Mitigation/Solution 1 - Theme Hook

Drupal - Available Update Page: 'No available releases found'

Condition-1: Contributed module (with update) not being identified

Solution-1: SQL Query

Drupal Theme Import Paragraph Configuration upon installation

Intuition

[Note] Drupal Animated Custom Cursor (via SDC)

Showcase Video

SDC Component

[Note] Single-Directory-Component in Drupal Core | Lullabot

Drupal JavaScript API (Drupal Behavior)

⁉️ Intuition: Weird JavaScript Behaviour in SDC

Laravel Mix Watch Files Changes and Execute ZSH/Bash Command When Change Detected

Reference

Druapl Radix Theme Share BrowserSync with Ngrok

Intuition

Resolution

Druapl Radix Theme with Tailwind CSS

Introduction

What is Radix Theme ?

SDC: Tailwind Logo Cloud

Ways of Importing CSS and JS Assets in Drupal

Cache Busting via setting `VERSION: -1` in `xxyyzz.libraries.yml`