shadcn/drupal-template-helper

Stars
117
Rank 301,828 (Top 6 %)
Language
JavaScript
License
MIT License
Created over 8 years ago
Updated almost 2 years ago

shadcn/drupal-template-helper

shadcn

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Debug Drupal 8 templates in Chrome Devtools. drupal-template-helper is a chrome extension for Drupal that lists all available templates and the preprocess hooks to use to customize your templates.

Drupal Template Helper

A Chrome DevTools extension for Drupal 8, Drupal 7 and Backdrop CMS templates: https://chrome.google.com/webstore/detail/ppiceaegogijpjodfpiimifhbnaifbnn

Installation

The Chrome Web Store made some changes to their policies. I haven't had time to re-upload this extension.

For now, you can download it from GitHub and load it as an unpacked extension on Chrome.

1. Download https://github.com/arshad/drupal-template-helper/archive/master.zip 2. Go to chrome://extensions in Chrome. 3. Click on "Load unpacked".

Step 1: Install and configure.

Download and install the Drupal Template Helper extension for Chrome.
Click on the extension icon.
Click on Options under Drupal Template Helper.
Add the urls for sites to enable the extension. Example: http://drupal.dev, http://www.drupal.dev.
Save.

Step 2: Enable Chrome Experimental APIs.

Go to chrome://flags/#enable-devtools-experiments, find Experimental Extension APIs and Developer Tools experiments, click the "Enable" links, and restart Chrome.
Open DevTools and click on Settings.
Find the Experiments tab and enable Allow custom UI themes. See screenshot below. Don't forget to restart Chrome again.

Note: If you want to hide the Twig comments, uncheck Show HTML comments under Preferences.

Step 3: Enable theme debug

For Drupal 8, see Phil's article here: https://www.chapterthree.com/blog/drupal-8-theming-setting-theme-debugging
For Drupal 7, see https://www.drupal.org/node/223440.

Usage

Inspect an element using DevTools and click on Templates in the DevTools sidebar.

taxonomy

An open source application built using the new router, server components and everything new in Next.js 13.

next-contentlayer

A template with Next.js 13 app dir, Contentlayer, Tailwind CSS and dark mode.

next-template

A Next.js 13 template for building apps with Radix UI and Tailwind CSS.

next-mdx

next-mdx provides a set of helper functions for fetching and rendering local MDX files. It handles relational data, supports custom components, is TypeScript ready and really fast.

crepido

Create (kanban) boards to track users and projects from flat markdown files. Supports multiple projects, timers, progress bars, collapsible sections and custom colors.

Sketch-Navigator

"Sketch Navigator lets you quickly jump to any specific artboard without having to scan the all too easily cluttered Layers List in the app’s left-hand pane." - Khoi Vinh

license-generator

Generates a license for your open source project.

example-ui-themes

Sketch-Sass-Colors

Displays colors as Sass variables for Sketch

next-template-jsx

A Next.js 13 template for building apps with Radix UI and Tailiwnd CSS.

kaizoku

A CLI for the Pirate Bay that can search for torrent and automatically add it to your torrent client or stream it using VLC.

tree-to-image

A tree to image generator using @vercel/og

subdb-cli

Download subtitles from the command line

next-cms-wordpress

An example Next.js 13 app built from WordPress data.

vite-template

Created with CodeSandbox

Google-Form-Octopress

A Liquid tag to embed Google Forms in Octopress

gatsby-theme-twentytwentyone

This is the WordPress Twenty Twenty-One theme built for Gatsby.

example-battlefield-chart

next-template-debug

next-template-debug

CrossBrowse

Simple proof of concept for tracking element position across clients.

status.arshad.io

next-app-tailwind-template

A (personal) starter template with app dir and Tailwind CSS.

next-prisma-app

next-prisma-app

next-drupal-examples

Examples for Next.js for Drupal

next-ghost

radix-bootswatch

Bootswatch for Radix

compass_radix

A Compass extension for Drupal's Radix theme.

datamaps-custom-marker

A datamaps plugin for custom map markers

gatsby-plugin-theme-helpers

An experimental plugin to help with component shadowing discovery.

gatsby-starter-flex

A Gatsby starter for the Flex theme.

value

Simplified Twig template variables for Drupal

nextjs-gatsby

This is nextjs.org home page built with Gatsby and Reflex.

reflexjs-example

https://reflexjs-example.vercel.app

airtv

A CLI for TV shows air dates

gatsby-starter-phoenix

A Gatsby starter for Phoenix

create-shadcn

next-debug-head

Debugging Head.tsx in Next.js 13

react_module_boilerplate

Boilerplate for Drupal 8 module with React, ES6, Babel and Webpack.

next-mdx-simple-blog

A simple blog with categories built using next-mdx.

reflex-redwood

simplytest-chrome

A Google Chrome extension for simplytest.me

mdx-toc

gatsby-example-flex

Demo site for the Gatsby Flex theme.

expressjs_starter

Template for Express app with Requirejs, Backbone, and Jade templating.

next-drupal-debug

scrapdo

Scrapdo is a scrapper for Drupal.org built with node.

slick

Slick carousel for Drupal

radix_stanley

Radix Stanley is a theme coded by BlackTie and ported to Drupal. It is based on Radix.

do-api

An API for drupal.org built with scrapdo and Express.

mdnext-reflexjs-demo

Demo for Nextjs, MDX and Reflexjs.

reflexjs-product-docs

Demo for gatsby-theme-doc

nextjs-middleware-validation

Validation middlewares for Next.js API routes with Yup.

h5bpbu

HTML 5 Boilerplate with Backbone.js and Underscore.js

jsonapi_config

Configuration for the JSON API module.

block_subtitle

This module allows subtitle to be added to blocks.

radix_bootswatch_themes

A collection of Radix Bootswatch themes.

vagrant-drupal

Vagrant for Drupal development

drupal_tests

Skeleton Drupal feature for Acceptance testing with Behat

lerna-test

next-drupal-basic-starter

A simple starter for building your site with Next.js and Drupal.

teamworkpm

A node wrapper for the TeamworkPM API

twig_not_empty

Adds a Twig notEmpty test for Drupal 8

imgs

reflex-mdx-js

Example Reflex site using MDX and JSX components. See https://github.com/reflexjs/reflex to build your Reflex site.

next-debug-edge-runtime

next-debug-edge-runtime

wp-gatsby-extended

Extends the WPGatsby WordPress plugin with custom GraphQL Types.

adminify

Simplify the Drupal admin

gatsby-theme-phoenix-disqus

Gatsby theme with Disqus

radix_layouts

Responsive Panels layouts for Radix.

Tray

This module provides a tray to your Drupal site. This tray can be used as an application bar.

next-drupal-auth

cms-drupal

A statically generated blog example using Next.js and Drupal

next-mdx-post-snippet