├── .gitignore
├── LICENSE.txt
├── README - CKEditor.md
├── README.md
├── composer.json
├── config
    ├── install
    │   └── twbase.settings.yml
    └── schema
    │   └── twbase.schema.yml
├── css
    ├── styles.css
    └── twbase-gradient.css
├── img
    └── home-showcase.jpg
├── js
    ├── app.js
    ├── themeSwitcher.js
    └── twbase.js
├── logo-dark.png
├── logo.png
├── package-lock.json
├── package.json
├── postcss.config.js
├── screenshot.png
├── src
    ├── components
    │   ├── base-text.css
    │   ├── button.css
    │   ├── field.css
    │   ├── form.css
    │   ├── menu.css
    │   ├── messages.css
    │   ├── misc.css
    │   ├── navbar.css
    │   └── node.css
    ├── contextual
    │   └── contextual.css
    └── styles.css
├── tailwind.config.js
├── templates
    ├── block
    │   ├── block--local-tasks-block.html.twig
    │   ├── block--system-branding-block.html.twig
    │   ├── block--system-menu-block.html.twig
    │   └── block.html.twig
    ├── content
    │   ├── node.html.twig
    │   └── page-title.html.twig
    ├── form
    │   └── datetime-wrapper.html.twig
    ├── layout
    │   ├── html.html.twig
    │   ├── page.html.twig
    │   ├── partials
    │   │   ├── _breadcrumb.html.twig
    │   │   ├── _content.html.twig
    │   │   ├── _content_top.html.twig
    │   │   ├── _footer.html.twig
    │   │   ├── _header.html.twig
    │   │   ├── _navbar.html.twig
    │   │   ├── _pre_footer.html.twig
    │   │   ├── _showcase.html.twig
    │   │   ├── _showcase_front.html.twig
    │   │   ├── _wide_content.html.twig
    │   │   └── showcase_partials
    │   │   │   ├── _showcase_divider_swirl.html.twig
    │   │   │   └── _showcase_overlay.html.twig
    │   └── region.html.twig
    ├── misc
    │   └── status-messages.html.twig
    └── navigation
    │   ├── menu--account.html.twig
    │   ├── menu--main.html.twig
    │   └── menu-local-tasks.html.twig
├── theme-settings.php
├── twbase.info.yml
├── twbase.libraries.yml
└── twbase.theme


/.gitignore:
--------------------------------------------------------------------------------
 1 | # composer.lock
 2 | # vendor/
 3 | node_modules/
 4 | # bower_components/
 5 | # .DS_Store
 6 | 
 7 | elements.html
 8 | /**/*.bak
 9 | xxx-*.*
10 | /**/xxx-*.*


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2020 Enzo Di Resta (aka drupix)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README - CKEditor.md:
--------------------------------------------------------------------------------
 1 | CKEditor - Changes
 2 | ==================
 3 | 
 4 | To works with Tailwind CSS and Tailwind Typography some changes must be done to CKEditor config under "Limit allowed HTML tags and correct faulty HTML" like removing `h5 and h6` tags.
 5 | 
 6 | Here under you have the defaults values on a fresh install of Drupal for the CKEditor option of "Limit allowed HTML tags and correct faulty HTML".
 7 | 
 8 | Defaults CKEditor values for Full HTML
 9 | --------------------------------------
10 | 
11 | ```html
12 | // admin/config/content/formats/manage/full_html
13 | // "Limit allowed HTML tags and correct faulty HTML"
14 | <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol type start> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <s> <sup> <sub> <a href hreflang class="btn btn-primary btn-light btn-info btn-success btn-warning btn-danger btn-inverse"> <img src alt data-entity-type data-entity-uuid data-align data-caption> <table> <caption> <tbody> <thead> <tfoot> <th> <td> <tr> <p> <h1> <pre> <u> <div class="alert alert-error alert-success alert-info"> <span class="text-warning strong text-error text-primary text-secondary text-success text-danger dropcap">
15 | ```
16 | 
17 | Defaults CKEditor values for Basic HTML
18 | ---------------------------------------
19 | 
20 | ```html
21 | // admin/config/content/formats/manage/basic_html
22 | // "Limit allowed HTML tags and correct faulty HTML"
23 | <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol type start> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <p> <br> <span> <img src alt data-entity-type data-entity-uuid data-align data-caption width height>
24 | ```
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # TWBase Theme
  2 | 
  3 | A Starter theme for Drupal built with [Tailwind CSS](https://tailwindcss.com/).
  4 | 
  5 | [![tailwindcss](https://img.shields.io/badge/tailwindcss-%3E%3D%203.0.0-blue.svg?style=flat-square&logo=tailwindcss)](https://tailwindcss.com)
  6 | [![drupal](https://img.shields.io/badge/drupal-^9%20||%20^10%20||%20^11-blue.svg?style=flat-square&logo=drupal)](https://drupal.org/)
  7 | [![LICENSE](https://img.shields.io/github/license/drupix/twbase?style=flat-square)](https://raw.githubusercontent.com/drupix/twbase/master/LICENSE.txt)
  8 | 
  9 | **:warning: WARNING: TWBase is under development and not yet ready for production 🐞**
 10 | 
 11 | ## Recommended Modules
 12 | 
 13 | As TWBase Theme use [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography) I recommends you to install [TWBase Theme Utilities](https://github.com/drupix/twbase_utils) modules with this theme. It load the `styles.css` provided by **TWBase Theme** and add the `prose` (`tw-prose`) extra class to the editor `body` to reflects the frontend while editing node in admin section. Otherwise the content in your editor may look slightly poor and naked... 🙀. The module also provide an admin interface to control the frontpage showcase content and last but not least: it allows you to define showcase and related options per content type 🥳.
 14 | 
 15 | ## Demo
 16 | 
 17 | ~~A very basic demo is available~~ ~~with the [TWBase Theme Utilities](https://github.com/drupix/twbase_utils) modules installed~~.
 18 | 
 19 | ## ToDo
 20 | 
 21 | - [x] Allow to change frontpage showcase image in theme settings. Thanks to [Tdnshah](https://github.com/Tdnshah/)
 22 | - [x] Rename branch 9.1.x to 1.x 🏁​ 2025-02-15
 23 | - [ ] Provide blocks placement on install ?
 24 | - [ ] Test multilingual site with language switcher
 25 | - [ ] Create a Pre Release 1.0.0-rc1
 26 | 
 27 | ## Development dependencies
 28 | 
 29 | * [tailwindcss](https://tailwindcss.com/) ^3.0.0
 30 | * [postcss](https://github.com/postcss/postcss)
 31 |   * Transforming styles with JS plugins
 32 | * [postcss-cli](https://github.com/postcss/postcss-cli)
 33 |   * CLI for postcss
 34 | * [postcss-import](https://github.com/postcss/postcss-import)
 35 |   * PostCSS plugin to inline @import rules content
 36 | * [autoprefixer](https://github.com/postcss/autoprefixer)
 37 |   * Parse CSS and add vendor prefixes to rules by Can I Use
 38 | * [chokidar](https://github.com/paulmillr/chokidar) / [chokidar-cli](https://github.com/open-cli-tools/chokidar-cli)
 39 |   * Minimal and efficient cross-platform file watching library
 40 | * [cssnano](https://github.com/cssnano/cssnano)
 41 |   * A modular minifier, built on top of the PostCSS ecosystem.
 42 | 
 43 | To install all dependencies run **`npm install`** from theme root directory.
 44 | 
 45 | ## CSS compilation
 46 | 
 47 | ### Development compilation
 48 | 
 49 | To **watch** changes while *"playing"* with `css` and html `class`, run  **`npm run watch`** from theme root directory.
 50 | 
 51 | ### Building for production
 52 | 
 53 | By default, for development purpose the outputed css file is not minified. To minify it, uncomment `cssnano` in the plugins section of `postcss.config.js` :
 54 | 
 55 | ```javascript
 56 | // postcss.config.js
 57 | module.exports = {
 58 |   plugins: {
 59 |     'postcss-import': {},
 60 |     tailwindcss: {},
 61 |     autoprefixer: {},
 62 |     //Uncomment this to minify the outputed css file
 63 | //     cssnano: {
 64 | //       preset: "default",
 65 | //     },
 66 |   }
 67 | }
 68 | ```
 69 | 
 70 | When you're happy with all this, **build** the final css file by running the command **`npm run build`** from theme root directory.
 71 | 
 72 | ## Credits
 73 | 
 74 | ### Creator
 75 | 
 76 | It's me! **drupix**
 77 | 
 78 | * <https://drupal-solutions.ch>
 79 | * <https://github.com/drupix>
 80 | 
 81 | ### Icons + Demo Images
 82 | 
 83 | * [Font Awesome](https://fontawesome.com/)
 84 | * [Unsplash](https://unsplash.com/)
 85 | 
 86 | ### Other
 87 | 
 88 | * All contributors of [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss/graphs/contributors)
 89 | * All contributors of [PostCSS](https://github.com/postcss/postcss/graphs/contributors) and [PostCSS CLI](https://github.com/postcss/postcss-cli/graphs/contributors)
 90 | * All contributors of [postcss-import](https://github.com/postcss/postcss-import/graphs/contributors)
 91 | * All contributors of [autoprefixer](https://github.com/postcss/autoprefixer/graphs/contributors)
 92 | * [Paul Miller](https://github.com/paulmillr) and [all contributors](https://github.com/paulmillr/chokidar/graphs/contributors) of [chokidar](https://github.com/paulmillr/chokidar) and [Chokidar CLI](https://github.com/open-cli-tools/chokidar-cli/graphs/contributors)
 93 | * All contributors of [cssnano](https://github.com/cssnano/cssnano/graphs/contributors)
 94 | * All the other guys I forgot to mention here
 95 | 
 96 | Special thanks to [Bob den Otter 🌷🇳🇱🙏](https://github.com/bobdenotter) and [all contributors of Bolt](https://github.com/bolt/bolt) default theme who introduced me with Tailwind.
 97 | 
 98 | ---
 99 | 
100 | ## License
101 | 
102 | The MIT License (MIT)
103 | 
104 | Copyright (c) 2021 Enzo Di Resta (aka drupix)
105 | 
106 | Permission is hereby granted, free of charge, to any person obtaining a copy
107 | of this software and associated documentation files (the "Software"), to deal
108 | in the Software without restriction, including without limitation the rights
109 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
110 | copies of the Software, and to permit persons to whom the Software is
111 | furnished to do so, subject to the following conditions:
112 | 
113 | The above copyright notice and this permission notice shall be included in
114 | all copies or substantial portions of the Software.
115 | 
116 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
117 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
118 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
119 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
120 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
121 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
122 | THE SOFTWARE.
123 | 
124 | TWBase incorporates [Font Awesome](https://fontawesome.com/).
125 | Font Awesome is distributed under the terms of the [Font Awesome Free License](https://github.com/FortAwesome/Font-Awesome#license).
126 | 
127 | TWBase incorporates photographs from [Unsplash](https://unsplash.com).
128 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "drupix/twbase",
 3 |   "type": "drupal-custom-theme",
 4 |   "description": "Starter theme for Drupal 9 built with Tailwind CSS.",
 5 |   "homepage": "https://github.com/drupix/twbase",
 6 |   "license": "GPL-2.0+",
 7 |   "require": {
 8 |     "drupal/core": "^9.4 || ^10 || ^11"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/config/install/twbase.settings.yml:
--------------------------------------------------------------------------------
 1 | # Setting configuration file of the TWBase theme.
 2 | # Set the default values of settings on the theme-settings.php form.
 3 | 
 4 | content_size: lg
 5 | breadcrumb_display: 1
 6 | header_size: full
 7 | navbar_size: xl
 8 | header_fixed: 1
 9 | show_progress: 1
10 | default_showcase_enabled: 1
11 | default_showcase_display_title: 1
12 | default_showcase_display_submitted: 0
13 | default_showcase_display_image: 1
14 | showcase_parallax: 0
15 | showcase_add_overlay: 1
16 | showcase_overlay_type: overlay-dark-gradient
17 | showcase_textstyle: text-light
18 | default_showcase_deco: 1
19 | default_showcase_front_enabled: 1
20 | showcase_hero_size: fullscreen
21 | showcase_content_pos: default
22 | showcase_deco_front: 0
23 | pre_footer_size: xl
24 | sticky_footer: 1
25 | footer_size: xl
26 | email_maintenance: ''
27 | 


--------------------------------------------------------------------------------
/config/schema/twbase.schema.yml:
--------------------------------------------------------------------------------
1 | # Schema for the configuration files of the TWBase theme.
2 | 
3 | twbase.settings:
4 |   type: theme_settings
5 |   label: 'TWBase settings'
6 | 


--------------------------------------------------------------------------------
/css/twbase-gradient.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |   Define your gradient here
 3 |   Use online tools to find a gradient matching your branding
 4 |   I used this one: https://mycolor.space/gradient
 5 | */
 6 | .gradient {
 7 |   /* background: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12); */
 8 |   /* background: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72); */
 9 |   /* background: linear-gradient(to right top, #051937, #114169, #136e9d, #089fcf, #00d4ff); */
10 |   background: linear-gradient(to right top, #051937, #114169, #136e9d, #089fcf);
11 | }
12 | 


--------------------------------------------------------------------------------
/img/home-showcase.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drupix/twbase/b42dca819210fd4fedbb113cbc0ef608b964cdb6/img/home-showcase.jpg


--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
  1 | /*Toggle header colours*/
  2 | var scrollpos = window.scrollY;
  3 | var window_width = window.innerWidth;
  4 | var body = document.body;
  5 | var header = document.getElementById("header");
  6 | var slogan = document.getElementById("site-slogan");
  7 | var dark_logo = document.getElementById("dark-logo");
  8 | var light_logo = document.getElementById("light-logo");
  9 | var main = document.getElementById("main");
 10 | var main_nav = document.getElementById("main-nav");
 11 | // var locales_switcher = document.getElementById("locales-switcher");
 12 | var scrolled = false;
 13 | var resized = false;
 14 | var navbar_fixed = body.classList.contains('navbar-is-fixed');
 15 | var has_showcase = body.classList.contains('has-showcase');
 16 | 
 17 | function windowResize() {
 18 |   /*Apply classes for slide in bar*/
 19 |   scrollpos = window.scrollY;
 20 |   window_width = window.innerWidth;
 21 | 
 22 |   // console.log('app.js windowResize()');
 23 |   // console.log('windowResize()->scrollpos: ' + scrollpos);
 24 |   // console.log('windowResize()->window_width: ' + window_width);
 25 |   // console.log('windowResize() themeMode: ' + localStorage.themeMode)
 26 | 
 27 |   if(window_width <= 767) {
 28 |     if(scrollpos > 10){
 29 |       if(localStorage.themeMode === 'tw-dark') {
 30 |         main_nav.classList.remove("tw-bg-white");
 31 |         main_nav.classList.add("tw-text-white");
 32 |         main_nav.classList.remove("tw-text-black");
 33 |       }
 34 |       else {
 35 |         main_nav.classList.add("tw-bg-white");
 36 |         main_nav.classList.remove("tw-text-white");
 37 |         main_nav.classList.add("tw-text-black");
 38 |       }
 39 |     }
 40 |     else {
 41 |       if(localStorage.themeMode === 'tw-dark') {
 42 |         main_nav.classList.remove("tw-bg-white");
 43 |         main_nav.classList.remove("tw-text-black");
 44 |         main_nav.classList.add("tw-text-white");
 45 |       }
 46 |       else {
 47 |         main_nav.classList.add("tw-bg-white");
 48 |         main_nav.classList.add("tw-text-black");
 49 |         main_nav.classList.remove("tw-text-white");
 50 |       }
 51 |     }
 52 | 
 53 |     // locales_switcher.classList.add("tw-mt-4");
 54 |   }
 55 |   else {
 56 |     if(scrollpos > 10){
 57 |       main_nav.classList.remove("tw-bg-white");
 58 |       if(localStorage.themeMode == 'tw-dark') {
 59 |         main_nav.classList.add("tw-text-white");
 60 |         main_nav.classList.remove("tw-text-black");
 61 |       }
 62 |       else {
 63 |         main_nav.classList.remove("tw-text-white");
 64 |         main_nav.classList.add("tw-text-black");
 65 |       }
 66 |     }
 67 |     else {
 68 |       main_nav.classList.remove("tw-bg-white");
 69 |       main_nav.classList.remove("tw-text-black");
 70 |       main_nav.classList.add("tw-text-white");
 71 |     }
 72 | 
 73 |     // locales_switcher.classList.remove("tw-mt-4");
 74 |   }
 75 | 
 76 |   header_height = header.offsetHeight;
 77 |   if(navbar_fixed && !has_showcase) {
 78 |     body.style.marginTop = header_height + 'px'
 79 |   }
 80 |   else if(!navbar_fixed && has_showcase) {
 81 |     main.style.marginTop = -header_height + 'px'
 82 |   }
 83 | 
 84 |   if(localStorage.themeMode === 'tw-dark') {
 85 |     header.classList.add("tw-border-b");
 86 |   }
 87 |   else {
 88 |     header.classList.remove("tw-border-b");
 89 |   }
 90 | }
 91 | 
 92 | function documentScroll(forceScrolled = false) {
 93 |   /*Apply classes for slide in bar*/
 94 |   scrollpos = window.scrollY;
 95 |   window_width = window.innerWidth;
 96 | 
 97 |   // console.log('app.js documentScroll()');
 98 |   // console.log('documentScroll()->scrollpos: ' + scrollpos);
 99 |   // console.log('documentScroll()->window_width: ' + window_width);
100 |   // console.log('documentScroll() themeMode: ' + localStorage.themeMode)
101 |   // console.log(localStorage.themeMode);
102 | 
103 |   if(scrollpos > 10) {
104 |     if(scrolled && !forceScrolled) return false;
105 | 
106 |     scrolled = true;
107 | 
108 |     if(localStorage.themeMode === 'tw-dark') {
109 |       header.classList.remove("tw-bg-white");
110 |       header.classList.add("tw-text-white");
111 |       header.classList.remove("tw-text-black");
112 |       header.classList.remove("tw-shadow");
113 |       if(slogan != undefined) {
114 |         slogan.classList.add("tw-text-slate-500");
115 |         slogan.classList.remove("tw-text-slate-200");
116 |       }
117 |       light_logo.classList.remove("tw-hidden");
118 |       dark_logo.classList.add("tw-hidden");
119 |     }
120 |     else {
121 |       header.classList.add("tw-bg-white");
122 |       header.classList.remove("tw-text-white");
123 |       header.classList.add("tw-text-black");
124 |       header.classList.add("tw-shadow");
125 |       if(slogan != undefined) {
126 |         slogan.classList.remove("tw-text-slate-200");
127 |         slogan.classList.add("tw-text-slate-500");
128 |       }
129 |       light_logo.classList.add("tw-hidden");
130 |       dark_logo.classList.remove("tw-hidden");
131 |     }
132 | 
133 |     if(window_width <= 767) {
134 |       if(localStorage.themeMode === 'tw-dark') {
135 |         main_nav.classList.remove("tw-bg-white");
136 |         main_nav.classList.add("tw-text-white");
137 |         main_nav.classList.remove("tw-text-black");
138 |       }
139 |       else {
140 |         main_nav.classList.add("tw-bg-white");
141 |         main_nav.classList.remove("tw-text-white");
142 |         main_nav.classList.add("tw-text-black");
143 |       }
144 |     }
145 |     else {
146 |       main_nav.classList.remove("tw-bg-white");
147 |       if(localStorage.themeMode === 'tw-dark') {
148 |         main_nav.classList.add("tw-text-white");
149 |         main_nav.classList.remove("tw-text-black");
150 |       }
151 |       else {
152 |         main_nav.classList.remove("tw-text-white");
153 |         main_nav.classList.add("tw-text-black");
154 |       }
155 |     }
156 |   }
157 |   else {
158 |     scrolled = false;
159 |     header.classList.remove("tw-bg-white");
160 |     header.classList.remove("tw-text-black");
161 |     header.classList.add("tw-text-white");
162 | 
163 |     if(window_width <= 767) {
164 |       if(localStorage.themeMode === 'tw-dark') {
165 |         main_nav.classList.remove("tw-bg-white");
166 |         main_nav.classList.add("tw-text-white");
167 |         main_nav.classList.remove("tw-text-black");
168 |       }
169 |       else {
170 |         main_nav.classList.add("tw-bg-white");
171 |         main_nav.classList.remove("tw-text-white");
172 |         main_nav.classList.add("tw-text-black");
173 |       }
174 |     }
175 |     else {
176 |       main_nav.classList.remove("tw-bg-white");
177 |       main_nav.classList.remove("tw-text-black");
178 |       main_nav.classList.add("tw-text-white");
179 |     }
180 | 
181 |     header.classList.add("tw-text-white");
182 |     header.classList.remove("tw-shadow");
183 | 
184 |     if(slogan != undefined) {
185 |       if(localStorage.themeMode === 'tw-dark') {
186 |         slogan.classList.add("tw-text-slate-500");
187 |         slogan.classList.remove("tw-text-slate-200");
188 |       }
189 |       else {
190 |         slogan.classList.add("tw-text-slate-200");
191 |         slogan.classList.remove("tw-text-slate-500");
192 |       }
193 |     }
194 | 
195 |     light_logo.classList.remove("tw-hidden");
196 |     dark_logo.classList.add("tw-hidden");
197 | 
198 |   }
199 | 
200 |   if(localStorage.themeMode === 'tw-dark') {
201 |     header.classList.add("tw-border-b");
202 |   }
203 |   else {
204 |     header.classList.remove("tw-border-b");
205 |   }
206 | 
207 | }
208 | 
209 | window.addEventListener('resize', function() {
210 |   windowResize();
211 | });
212 | 
213 | document.addEventListener('scroll', function() {
214 |   documentScroll();
215 | });
216 | 
217 | 
218 | /* Progress bar */
219 | //Source: https://alligator.io/js/progress-bar-javascript-css-variables/
220 | var docEl = document.documentElement,
221 |   body = document.body,
222 |   st = 'scrollTop',
223 |   sh = 'scrollHeight',
224 |   progress = document.querySelector('#progress');
225 | var scrollpos = window.scrollY;
226 | var header = document.getElementById("header");
227 | 
228 | document.addEventListener('scroll', function () {
229 |   if(progress) {
230 |     /*Refresh scroll % width*/
231 |     scroll = (docEl[st] || body[st]) / ((docEl[sh] || body[sh]) - docEl.clientHeight) * 100;
232 |     progress.style.setProperty('--scroll', scroll + '%');
233 |   }
234 | });
235 | 
236 | 
237 | // Initial states simulation
238 | windowResize();
239 | documentScroll();
240 | 


--------------------------------------------------------------------------------
/js/themeSwitcher.js:
--------------------------------------------------------------------------------
  1 | // Ecobeez theme - themeSwitcher.js
  2 | //    See https://tailwindcss.com/docs/dark-mode
  3 | //    and source of https://symfony.com/
  4 | 
  5 | // console.log('themeSwitcher.js download start!');
  6 | 
  7 | //
  8 | // This come from source of https://symfony.com/
  9 | //
 10 | const availableThemes = ['tw-light', 'tw-dark']; //, 'dynamic-theme'];
 11 | const themeSwitcher = document.getElementById("theme-switcher");
 12 | const showcase_divider_1 = document.getElementById("showcase-divider-1");
 13 | const showcase_divider_2 = document.getElementById("showcase-divider-2");
 14 | // const index_divider_bottom_1 = document.getElementById("index-divider-bottom_1");
 15 | // const index_divider_bottom_2 = document.getElementById("index-divider-bottom_2");
 16 | // const record_divider_bottom = document.getElementById("record-divider-bottom");
 17 | const tailwindcss_typography_logo_text = document.getElementById("tailwindcss-typography-logo-text");
 18 | 
 19 | const color_white = '#FFFFFF';
 20 | const color_slate_200 = '#E2E8F0';
 21 | const color_slate_800 = '#1E293B';
 22 | 
 23 | //
 24 | // This come from https://tailwindcss.com/docs/dark-mode
 25 | //
 26 | if (localStorage.themeMode === 'tw-dark' || (!('themeMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
 27 |   document.documentElement.classList.add('tw-dark')
 28 |   themeSwitcher.checked = true;
 29 | } else {
 30 |   document.documentElement.classList.add('tw-light')
 31 |   themeSwitcher.checked = false;
 32 | }
 33 | _switchColors(themeSwitcher.checked);
 34 | 
 35 | //
 36 | // This come from source of https://symfony.com/
 37 | //
 38 | themeSwitcher.addEventListener('click', () => {
 39 |   const darkModeIsOn = themeSwitcher.checked;
 40 |   var darkMode = 'tw-light';
 41 | 
 42 |   if(darkModeIsOn) {
 43 |     darkMode = 'tw-dark';
 44 |     document.documentElement.classList.remove('tw-light');
 45 |     _switchColors(true);
 46 |   }
 47 |   else {
 48 |     darkMode = 'tw-light';
 49 |     document.documentElement.classList.remove('tw-dark');
 50 |     _switchColors(false);
 51 |   }
 52 |   document.documentElement.classList.add(darkMode);
 53 |   localStorage.setItem('themeMode', darkMode);
 54 | 
 55 |   // Reinitialize states simulation
 56 |   // See: theme/twbase/js/app.js
 57 |   documentScroll(true);
 58 | });
 59 | 
 60 | 
 61 | function _switchColors(darkModeIsOn = false) {
 62 |   if(darkModeIsOn) {
 63 |     if(tailwindcss_typography_logo_text) {
 64 |       tailwindcss_typography_logo_text.setAttribute('fill', color_slate_200);
 65 |     }
 66 | 
 67 |     if(showcase_divider_1) {
 68 |       showcase_divider_1.setAttribute('fill', color_white);
 69 |     }
 70 |     if(showcase_divider_2) {
 71 |       showcase_divider_2.setAttribute('fill', color_slate_800);
 72 |     }
 73 | 
 74 |     // if(index_divider_bottom_1) {
 75 |     //   index_divider_bottom_1.setAttribute('fill', color_slate_800);
 76 |     // }
 77 |     // if(index_divider_bottom_2) {
 78 |     //   index_divider_bottom_2.setAttribute('fill', color_slate_800);
 79 |     // }
 80 | 
 81 |     // if(record_divider_bottom) {
 82 |     //   record_divider_bottom.setAttribute('fill', color_slate_800);
 83 |     // }
 84 |   }
 85 |   else {
 86 |     if(tailwindcss_typography_logo_text) {
 87 |       tailwindcss_typography_logo_text.setAttribute('fill', '#1a202c');
 88 |     }
 89 | 
 90 |     if(showcase_divider_1) {
 91 |       showcase_divider_1.setAttribute('fill', color_white);
 92 |     }
 93 |     if(showcase_divider_2) {
 94 |       showcase_divider_2.setAttribute('fill', color_white);
 95 |     }
 96 | 
 97 |     // if(index_divider_bottom_1) {
 98 |     //   index_divider_bottom_1.setAttribute('fill', color_slate_200);
 99 |     // }
100 |     // if(index_divider_bottom_2) {
101 |     //   index_divider_bottom_2.setAttribute('fill', color_white);
102 |     // }
103 | 
104 |     // if(record_divider_bottom) {
105 |     //   record_divider_bottom.setAttribute('fill', color_white);
106 |     // }
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/js/twbase.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @file
 3 |  * twbase.js - JavaScript file for the TWBase theme.
 4 |  */
 5 | 
 6 | // console.log('twbase.js download start!');
 7 | 
 8 | (function ($, Drupal, once, window, document, undefined) {
 9 | 
10 |   //To understand behaviors, see https://drupal.org/node/756722#behaviors
11 |   Drupal.behaviors.TWBase = {
12 |     attach: function(context, settings) {
13 | 
14 |     	// Place your code here.
15 |       // console.log('twbase.js loaded!');
16 | 
17 |       // once('myDebugBehavior', 'input.myDebugBehavior', context).forEach(function () {
18 |       //   // Apply the myDebugBehavior effect to the elements only once.
19 |       //   console.log('twbase.js loaded!')
20 |       // });
21 |     }
22 |   };
23 | 
24 | })(jQuery, Drupal, once, this, this.document);
25 | 
26 | // console.log('twbase.js download finish!');
27 | 


--------------------------------------------------------------------------------
/logo-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drupix/twbase/b42dca819210fd4fedbb113cbc0ef608b964cdb6/logo-dark.png


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drupix/twbase/b42dca819210fd4fedbb113cbc0ef608b964cdb6/logo.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "current",
 3 |     "version": "1.0.0",
 4 |     "description": "TWBase - A starter theme for Drupal built with Tailwind CSS",
 5 |     "scripts": {
 6 |         "build": "postcss src/*.css -d css/ --verbose && ls -S -lh css/styles.css | awk '{print \"\\x1B[33mSize: \" $5}'",
 7 |         "watch": "chokidar '*.config.js' 'src/*.css' 'src/**/*.css' '**/*.twig' -i 'node_modules' -c 'npm run build' --initial"
 8 |     },
 9 |     "license": "ISC",
10 |     "devDependencies": {
11 |         "@tailwindcss/forms": "^0.4.0",
12 |         "@tailwindcss/typography": "^0.5.0",
13 |         "autoprefixer": "^10.4.0",
14 |         "chokidar-cli": "^1.2.0",
15 |         "cssnano": "^5.0.6",
16 |         "postcss": "^8.4.5",
17 |         "postcss-cli": "^8.3.1",
18 |         "tailwindcss": "^3.0.2"
19 |     },
20 |     "dependencies": {
21 |         "postcss-import": "^14.0.2"
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | // postcss.config.js
 2 | module.exports = {
 3 |   plugins: {
 4 |     'postcss-import': {},
 5 |     tailwindcss: {},
 6 |     autoprefixer: {},
 7 |     // Uncomment this to minify the outputed css file
 8 |     // cssnano: {
 9 |     //   preset: "default",
10 |     // },
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drupix/twbase/b42dca819210fd4fedbb113cbc0ef608b964cdb6/screenshot.png


--------------------------------------------------------------------------------
/src/components/base-text.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @file
 3 |  * Extra custom classes for unmanaged text.
 4 |  *
 5 |  * Withe TWBase Theme Utilities module installed these styles are
 6 |  * available in CKEditor toolbar in the Styles dropdown button
 7 |  */
 8 | 
 9 | .tw-prose .dropcap {
10 |   @apply tw-block tw-float-left tw-text-5xl sm:tw-text-6xl xl:tw-text-7xl tw-leading-none tw-p-0 tw-mr-1 tw-uppercase;
11 | }
12 | 
13 | /**
14 |  * Custom colors.
15 |  * Colors are defined in tailwind.config.js
16 | */
17 | .tw-prose .text-primary {
18 |   @apply tw-text-primary;
19 | }
20 | .tw-prose .text-secondary {
21 |   @apply tw-text-secondary;
22 | }
23 | .tw-prose .text-success {
24 |   @apply tw-text-success;
25 | }
26 | .tw-prose .text-danger {
27 |   @apply tw-text-danger;
28 | }
29 | .tw-prose .text-warning {
30 |   @apply tw-text-warning;
31 | }
32 | 


--------------------------------------------------------------------------------
/src/components/button.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @file
 3 |  * Visual styles for buttons.
 4 |  */
 5 | 
 6 | .button {
 7 |   /* Common for all buttons */
 8 |   @apply tw-px-4 tw-py-2 tw-rounded-lg tw-uppercase tw-text-center tw-font-medium tw-tracking-wide tw-transition tw-duration-200 tw-ease-in-out;
 9 |   /* Default button colors */
10 |   @apply tw-bg-slate-300 dark:tw-bg-slate-300 tw-text-slate-800 dark:tw-text-slate-800 hover:tw-bg-slate-400 dark:hover:tw-bg-slate-400 hover:tw-text-white dark:hover:tw-text-white;
11 |   @apply focus:tw-text-white dark:focus:tw-text-white focus:tw-bg-slate-500 dark:focus:tw-bg-slate-500 focus:tw-ring-4 focus:tw-ring-slate-200;
12 |   @apply disabled:tw-opacity-50 disabled:tw-bg-slate-200 disabled:hover:tw-text-slate-800 dark:disabled:tw-bg-slate-300 dark:disabled:hover:tw-text-slate-800;
13 | }
14 | .tw-prose a.button {
15 |   @apply tw-px-4 tw-py-3 tw-text-center tw-no-underline;
16 |   @apply tw-text-slate-800 dark:tw-text-slate-800 hover:tw-bg-slate-400 dark:hover:tw-bg-slate-400 hover:tw-text-white dark:hover:tw-text-white;
17 | }
18 | 
19 | .button.button--sm {
20 |   @apply tw-px-4 tw-py-2 tw-text-sm;
21 | }
22 | /*
23 | .tw-prose a.button.button--sm {
24 |   @apply tw-px-4 tw-py-3 tw-text-sm;
25 | } */
26 | .button.button--lg {
27 |   @apply tw-px-5 tw-py-4 tw-text-lg;
28 | }
29 | /* .tw-prose a.button .button--lg {
30 |   @apply tw-px-5 tw-py-4 tw-text-lg;
31 | } */
32 | 
33 | /* .button:first-child,
34 | .image-button:first-child {
35 |   @apply tw-mr-2;
36 | } */
37 | 
38 | /* Primary buttons colors */
39 | .button.button--primary,
40 | .tw-prose a.button.button--primary {
41 |   @apply tw-shadow-md hover:tw-shadow-lg;
42 |   @apply tw-text-slate-100 tw-bg-primary hover:tw-bg-primary-dark focus:tw-bg-primary-darkest focus:tw-ring-primary-lightest;
43 |   @apply disabled:hover:tw-text-slate-100 disabled:tw-bg-primary-light;
44 | }
45 | /* Secondary buttons colors */
46 | .button.button--secondary,
47 | .tw-prose a.button.button--secondary {
48 |   @apply tw-text-slate-100 tw-bg-secondary hover:tw-bg-secondary-dark focus:tw-bg-secondary-darkest focus:tw-ring-secondary-lightest;
49 |   @apply disabled:hover:tw-text-slate-100 disabled:tw-bg-secondary-light;
50 | }
51 | /* Success buttons colors */
52 | .button.button--success,
53 | .tw-prose a.button.button--success {
54 |   @apply tw-text-slate-100 tw-bg-success hover:tw-bg-success-dark focus:tw-bg-success-darkest focus:tw-ring-success-lightest;
55 |   @apply disabled:hover:tw-text-slate-100 disabled:tw-bg-success-light;
56 | }
57 | /* Danger buttons colors */
58 | .button.button--danger,
59 | .tw-prose a.button.button--danger {
60 |   @apply tw-text-slate-100 tw-bg-danger hover:tw-bg-danger-dark focus:tw-bg-danger-darkest focus:tw-ring-danger-lightest;
61 |   @apply disabled:hover:tw-text-slate-100 disabled:tw-bg-danger-light;
62 | }
63 | /* Warning buttons colors */
64 | .button.button--warning,
65 | .tw-prose a.button.button--warning {
66 |   @apply tw-text-slate-100 tw-bg-warning hover:tw-bg-warning-dark focus:tw-bg-warning-darkest focus:tw-ring-warning-lightest;
67 |   @apply disabled:hover:tw-text-slate-100 disabled:tw-bg-warning-light;
68 | }
69 | 


--------------------------------------------------------------------------------
/src/components/field.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @file
 3 |  * Visual styles for fields.
 4 |  */
 5 | 
 6 | .text-format-wrapper .filter-wrapper {
 7 |   @apply tw-font-normal tw-text-base;
 8 | }
 9 | .text-format-wrapper .filter-wrapper select {
10 |   @apply dark:tw-text-slate-400 dark:tw-bg-slate-600;
11 | }
12 | 
13 | .field__label {
14 |   @apply tw-font-normal tw-text-base;
15 | }
16 | 
17 | .field--label-inline .field__label {
18 |   @apply tw-pt-0 sm:tw-pt-1 lg:tw-pt-1 xl:tw-pt-2 2xl:tw-pt-3;
19 | }
20 | 
21 | /* .field--name-field-paragraphs .field__item:last-child .paragraph {
22 |   @apply tw-pb-12;
23 | } */
24 | 
25 | .field--name-field-tags .field__item {
26 |   @apply tw-inline-block tw-mb-2;
27 | }
28 | .field--name-field-tags a.tag-link {
29 |   @apply tw-no-underline tw-bg-slate-600 tw-text-white dark:tw-text-white hover:tw-text-white dark:hover:tw-text-white tw-rounded-full tw-h-6 tw-px-3 tw-py-1 tw-text-sm tw-font-normal tw-opacity-80 hover:tw-opacity-100;
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/form.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @file
  3 |  * Override classy styles for form components.
  4 |  */
  5 | 
  6 | form .form-item .description {
  7 |   @apply tw-text-sm tw-pt-1;
  8 | }
  9 | 
 10 | form input[type='submit'] {
 11 |   @apply tw-px-4 tw-py-2 tw-text-slate-800;
 12 | }
 13 | 
 14 | form input[type='text'],
 15 | form input[type='password'],
 16 | form input[type='email'],
 17 | form input[type='number'],
 18 | form input[type='url'],
 19 | form input[type='date'],
 20 | form input[type='datetime-local'],
 21 | form input[type='month'],
 22 | form input[type='week'],
 23 | form input[type='time'],
 24 | form input[type='search'],
 25 | form input[type='tel'],
 26 | select,
 27 | select[multiple],
 28 | textarea {
 29 |   @apply tw-border-slate-300 dark:tw-bg-slate-800 tw-text-slate-800 dark:tw-text-slate-200 tw-rounded-md tw-shadow-sm;
 30 |   @apply focus:tw-border-primary-light focus:tw-ring focus:tw-ring-primary-lightest focus:tw-ring-opacity-50;
 31 | }
 32 | form input[type='text'],
 33 | form input[type='password'],
 34 | form input[type='email'],
 35 | form input[type='url'],
 36 | form input[type='search'],
 37 | form input[type='tel'],
 38 | textarea {
 39 |   @apply tw-w-full tw-max-w-full;
 40 | }
 41 | 
 42 | form input[type='checkbox'] {
 43 |   @apply tw-rounded;
 44 | }
 45 | form input[type='checkbox'],
 46 | form input[type='radio'] {
 47 |   @apply tw-border-slate-300 tw-text-primary tw-shadow-sm;
 48 |   @apply focus:tw-border-primary-light focus:tw-ring focus:tw-ring-offset-0 focus:tw-ring-primary-lightest focus:tw-ring-opacity-50 dark:focus:tw-ring-opacity-80;
 49 | }
 50 | 
 51 | form .dropbutton-multiple,
 52 | form .dropbutton-multiple.open,
 53 | form .dropbutton-multiple.open .dropbutton-widget {
 54 |   @apply tw-w-full tw-max-w-lg;
 55 | }
 56 | .js form .dropbutton-widget {
 57 |   @apply tw-border-slate-300 hover:tw-border-slate-300 tw-rounded-md tw-overflow-hidden;
 58 | }
 59 | form .dropbutton-widget .dropbutton {
 60 |   @apply tw-border-r tw-border-slate-200;
 61 | }
 62 | form .dropbutton-widget .dropbutton li {
 63 |   @apply dark:tw-bg-slate-800 tw-text-slate-800 dark:tw-text-slate-200;
 64 | }
 65 | form .dropbutton-widget .dropbutton li a {
 66 |   @apply tw-no-underline tw-font-normal;
 67 | }
 68 | form .dropbutton-widget .dropbutton li.dropbutton-action {
 69 |   @apply tw-m-0 tw-p-0;
 70 | }
 71 | form .dropbutton-widget .dropbutton > li::before {
 72 |   @apply tw-w-0 tw-h-0 tw-top-0 tw-left-0 tw-border-slate-400;
 73 | }
 74 | form .dropbutton-widget .dropbutton .dropbutton-toggle {
 75 |   @apply tw-absolute tw-m-0;
 76 | }
 77 | form .dropbutton-widget .dropbutton .dropbutton-arrow {
 78 |   @apply tw-right-1/3;
 79 | }
 80 | 
 81 | form .dropbutton-widget .dropbutton .dropbutton-arrow {
 82 |   @apply tw-border-t-slate-400 dark:tw-border-t-slate-400;
 83 | }
 84 | form .dropbutton-multiple.open .dropbutton .dropbutton-arrow {
 85 |   @apply tw-border-opacity-0;
 86 | }
 87 | 
 88 | form fieldset.form-wrapper {
 89 |   @apply tw-p-4;
 90 | }
 91 | form fieldset.form-wrapper legend {
 92 |   @apply tw-px-2 tw-font-medium;
 93 | }
 94 | form fieldset.fieldgroup legend {
 95 |   @apply tw-p-0;
 96 | }
 97 | form fieldset.fieldgroup,
 98 | form fieldset.form-composite {
 99 |   @apply tw-p-0;
100 | }
101 | 
102 | .form-type-radio .description,
103 | .form-type-checkbox .description {
104 |   @apply tw-ml-5; /* LTR */
105 | }
106 | [dir="rtl"] .form-type-radio .description,
107 | [dir="rtl"] .form-type-checkbox .description {
108 |   @apply tw-mr-5;
109 | }


--------------------------------------------------------------------------------
/src/components/menu.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @file
 3 |  * Override classy styles for menu.
 4 |  */
 5 | 
 6 | ul.menu {
 7 |   @apply tw-ml-0;
 8 | }
 9 | ul.menu > li.menu-item {
10 |   @apply tw-pl-0;
11 | }
12 | ul.menu > .menu-item::before {
13 |   content: '';
14 |   @apply tw-w-0 tw-h-0;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/components/messages.css:
--------------------------------------------------------------------------------
1 | /**
2 |  * @file
3 |  * Override classy styles for system messages.
4 |  */
5 | 
6 | .messages {
7 |   @apply tw-ml-2;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/components/misc.css:
--------------------------------------------------------------------------------
1 | /**
2 |  * @file
3 |  * Override classy styles for unmanaged elements.
4 |  */
5 | 
6 | .feed-icons {
7 |   @apply tw-hidden;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/components/navbar.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Navbar styling.
 3 |  */
 4 | 
 5 | body {
 6 |   /* Fix horizontal scrolling on iOS devices. */
 7 |   /* https://www.drupal.org/node/1870076 */
 8 |   @apply tw-relative;
 9 | }
10 | 
11 | body.toolbar-vertical.navbar-is-fixed header {
12 |   top: 36px;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/node.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @file
 3 |  * Override classy styles for nodes.
 4 |  */
 5 | 
 6 | .node--unpublished {
 7 |   @apply tw-bg-purple-200 dark:tw-bg-purple-500 tw-p-4;
 8 | }
 9 | .node__links ul.links {
10 |   @apply tw-inline-block;
11 | }
12 | .node__links ul.links li {
13 |   @apply tw-pl-0;
14 | }
15 | .node__links ul.links li::before {
16 |   content: '';
17 |   @apply tw-w-0 tw-h-0;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/contextual/contextual.css:
--------------------------------------------------------------------------------
1 | /**
2 |  * @file
3 |  * Override classy styles for nodes.
4 |  */
5 | 
6 | /* Drupal Contextual links */
7 | .contextual-region .contextual.open ul.contextual-links > li::before {
8 |   @apply tw-content-none tw-w-0 tw-h-0;
9 | }


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @file
  3 |  * src/styles.css
  4 |  *
  5 |  * TWBase theme - Include Tailwind in our CSS.
  6 |  */
  7 | 
  8 | @import "tailwindcss/base";
  9 | @import "tailwindcss/components";
 10 | @import "tailwindcss/utilities";
 11 | 
 12 | /*
 13 | Drupal core Classy theme overrides
 14 | ==================================
 15 | */
 16 | 
 17 | /* @import "components/hero"; */
 18 | @import "contextual/contextual";
 19 | @import "components/base-text";
 20 | @import "components/button";
 21 | @import "components/field";
 22 | @import "components/form";
 23 | @import "components/menu";
 24 | @import "components/messages";
 25 | @import "components/misc";
 26 | @import "components/navbar";
 27 | @import "components/node";
 28 | /* @import "components/sidebar"; */
 29 | /* @import "components/toolbar"; */
 30 | /* @import "components/showcase"; */
 31 | /* @import "../custom/blogs"; */
 32 | 
 33 | @layer base {
 34 |   /*
 35 |     Avoid "blip" where you might see your uninitialized template after the page loads, but before Alpine loads
 36 |     https://github.com/alpinejs/alpine/issues/361
 37 |     https://alpinejs.dev/directives/cloak
 38 |   */
 39 |   [x-cloak] { display: none !important; }
 40 | 
 41 |   body.toolbar-fixed .navbar-fixed {
 42 |     top: 36px;
 43 |   }
 44 |   body.toolbar-fixed.has-showcase .navbar-fixed {
 45 |     top: 36px;
 46 |   }
 47 |   /* Horizontal */
 48 |   body.toolbar-tray-open.toolbar-horizontal.toolbar-fixed .navbar-fixed {
 49 |     top: 73px;
 50 |   }
 51 |   body.toolbar-tray-open.toolbar-horizontal.toolbar-fixed.has-showcase .navbar-fixed {
 52 |     top: 73px;
 53 |   }
 54 |   body.navbar-is-fixed .toolbar-oriented .toolbar-bar {
 55 |     @apply tw-fixed;
 56 |   }
 57 | 
 58 |   #toolbar-administration {
 59 |     @apply tw-text-xs;
 60 |   }
 61 | 
 62 |   .region-sidebar .block:first-child h2,
 63 |   .region-sidebar-first .block:first-child h2,
 64 |   .region-sidebar-second .block:first-child h2 {
 65 |     @apply tw-mt-0;
 66 |   }
 67 | 
 68 |   .region-wide-content,
 69 |   .region-wide-content a,
 70 |   .region-wide-content .block > h2,
 71 |   .region-wide-content .block .block-title {
 72 |     @apply tw-text-slate-800 dark:tw-text-slate-800;
 73 |   }
 74 |   .region-wide-content .block > h2,
 75 |   .region-wide-content .block .block-title {
 76 |     @apply tw-mt-0;
 77 |   }
 78 | 
 79 |   .region-pre-footer,
 80 |   /* .region-pre-footer a, */
 81 |   .region-pre-footer .block > h2,
 82 |   .region-pre-footer .block .block-title {
 83 |     @apply tw-text-slate-500 dark:tw-text-slate-500;
 84 |   }
 85 |   /* .region-pre-footer a:hover {
 86 |     @apply tw-text-slate-300 dark:tw-text-slate-300;
 87 |   } */
 88 | 
 89 |   .region-footer,
 90 |   .region-footer a,
 91 |   .region-footer .block > h2,
 92 |   .region-footer .block .block-title {
 93 |     @apply tw-text-slate-500 dark:tw-text-slate-500;
 94 |   }
 95 | 
 96 |   .tabs .primary {
 97 |     @apply tw-list-none tw-text-sm tw-flex tw-cursor-pointer tw-border-b-2 tw-border-slate-600;
 98 |   }
 99 |   .tabs .primary li {
100 |     @apply tw-p-0 tw-mr-1 tw-rounded-t-lg tw-bg-slate-200;
101 |   }
102 |   .tabs .primary li a {
103 |     @apply tw-block tw-py-1 tw-px-4 tw-bg-transparent tw-text-slate-600;
104 |   }
105 |   .tabs .primary li:hover {
106 |     @apply tw-bg-slate-400;
107 |   }
108 |   .tabs .primary li:hover a {
109 |     @apply tw-text-white tw-border-b-2 tw-border-slate-600 tw-no-underline tw--mb-0.5;
110 |   }
111 |   .tabs .primary li.is-active {
112 |     @apply tw-bg-slate-600;
113 |   }
114 |   .tabs .primary li.is-active a {
115 |     @apply tw-text-white tw-border-b-2 tw-border-slate-600 tw--mb-0.5;
116 |   }
117 | 
118 | }
119 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | // To see, check and test:
  2 | // // Theming Tailwind with CSS Variables
  3 | // https://www.youtube.com/watch?v=MAtaT8BZEAo
  4 | //
  5 | // 07: Customizing Your Design System – Tailwind CSS: From Zero to Production
  6 | // https://www.youtube.com/watch?v=0l0Gx8gWPHk
  7 | 
  8 | // const { margin } = require('tailwindcss/defaultTheme');
  9 | 
 10 | const baseColors = {
 11 |   turquoise: {
 12 |     darkest: '#0891B2',  // cyan-600
 13 |     dark: '#06B6D4',     // cyan-500
 14 |     DEFAULT: '#22D3EE',  // cyan-400
 15 |     light: '#67E8F9',    // cyan-300
 16 |     lightest: '#A5F3FC', // cyan-200
 17 |   },
 18 |   primary: {
 19 |     darkest: '#1D4ED8',  // blue-700
 20 |     dark: '#2563EB',     // blue-600
 21 |     DEFAULT: '#3B82F6',  // blue-500
 22 |     light: '#60A5FA',    // blue-400
 23 |     lightest: '#93C5FD', // blue-300
 24 |   },
 25 |   secondary: {
 26 |     darkest: '#4F46E5',  // indigo-600
 27 |     dark: '#6366F1',     // indigo-500
 28 |     DEFAULT: '#818CF8',  // indigo-400
 29 |     light: '#A5B4FC',    // indigo-300
 30 |     lightest: '#C7D2FE', // indigo-200
 31 |   },
 32 |   success: {
 33 |     darkest: '#059669',  // green-600
 34 |     dark: '#10B981',     // green-500
 35 |     DEFAULT: '#34D399',  // green-400
 36 |     light: '#6EE7B7',    // green-300
 37 |     lightest: '#A7F3D0', // green-200
 38 |   },
 39 |   danger: {
 40 |     darkest: '#B91C1C',  // red-700
 41 |     dark: '#DC2626',     // red-600
 42 |     DEFAULT: '#EF4444',  // red-500
 43 |     light: '#F87171',    // red-400
 44 |     lightest: '#FCA5A5', // red-300
 45 |   },
 46 |   warning: {
 47 |     darkest: '#D97706',  // yellow-600
 48 |     dark: '#F59E0B',     // yellow-500
 49 |     DEFAULT: '#FBBF24',  // yellow-400
 50 |     light: '#FCD34D',    // yellow-300
 51 |     lightest: '#FDE68A', // yellow-200
 52 |   },
 53 | }
 54 | 
 55 | module.exports = {
 56 |   content: [
 57 |     './**/*.twig',
 58 |     '../../../{modules,themes}/custom/**/*.twig'
 59 |   ],
 60 |   safelist: [
 61 |     // Needed by twbase_utils module, see twbase_utils_editor_js_settings_alter().
 62 |     'tw-p-4',
 63 |     'tw-prose',
 64 |     // Needed in menu while switching between dark/light mode
 65 |     'tw-text-white',
 66 |     'tw-text-black',
 67 |     'tw-text-slate-200',
 68 |     'tw-text-slate-500',
 69 |   ],
 70 |   darkMode: 'class', // false or 'media' or 'class'
 71 |   theme: {
 72 |     extend: {
 73 |       colors: {
 74 |         turquoise: {
 75 |           darkest: baseColors.turquoise.darkest,
 76 |           dark: baseColors.turquoise.dark,
 77 |           DEFAULT: baseColors.turquoise.DEFAULT,
 78 |           light: baseColors.turquoise.light,
 79 |           lightest: baseColors.turquoise.lightest,
 80 |         },
 81 |         primary: {
 82 |           darkest: baseColors.primary.darkest,
 83 |           dark: baseColors.primary.dark,
 84 |           DEFAULT: baseColors.primary.DEFAULT,
 85 |           light: baseColors.primary.light,
 86 |           lightest: baseColors.primary.lightest,
 87 |         },
 88 |         secondary: {
 89 |           darkest: baseColors.secondary.darkest,
 90 |           dark: baseColors.secondary.dark,
 91 |           DEFAULT: baseColors.secondary.DEFAULT,
 92 |           light: baseColors.secondary.light,
 93 |           lightest: baseColors.secondary.lightest,
 94 |         },
 95 |         success: {
 96 |           darkest: baseColors.success.darkest,
 97 |           dark: baseColors.success.dark,
 98 |           DEFAULT: baseColors.success.DEFAULT,
 99 |           light: baseColors.success.light,
100 |           lightest: baseColors.success.lightest,
101 |         },
102 |         danger: {
103 |           darkest: baseColors.danger.darkest,
104 |           dark: baseColors.danger.dark,
105 |           DEFAULT: baseColors.danger.DEFAULT,
106 |           light: baseColors.danger.light,
107 |           lightest: baseColors.danger.lightest,
108 |         },
109 |         warning: {
110 |           darkest: baseColors.warning.darkest,
111 |           dark: baseColors.warning.dark,
112 |           DEFAULT: baseColors.warning.DEFAULT,
113 |           light: baseColors.warning.light,
114 |           lightest: baseColors.warning.lightest,
115 |         },
116 |       },
117 |       // See https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
118 |       typography: (theme) => ({
119 |         DEFAULT: {
120 |           css: {
121 |             maxWidth: null,
122 |             a: {
123 |               color: 'inherit',
124 |             },
125 |             blockquote: {
126 |               /* position: 'relative', */
127 |               padding: '0.75rem 3rem 1rem 2.25rem',
128 |               /*
129 |               margin: '1rem',
130 |               border: 'none',
131 |               borderRadius: '1.5rem',
132 |               */
133 |               background: theme('colors.slate.100'),
134 |             },
135 |             'blockquote cite': {
136 |               display: 'inline-block',
137 |               fontSize: '.875em',
138 |               lineHeight: '1.25rem',
139 |               paddingBottom: '1.25rem',
140 |             },
141 |             /*
142 |             'blockquote p:first-of-type::before, blockquote p:last-of-type::after': {
143 |               fontFamily: 'Georgia, serif',
144 |               position: 'absolute',
145 |               fontWeight: '600',
146 |               color: theme('colors.slate.400'),
147 |             },
148 |             'blockquote p::before': {
149 |               content: '“',
150 |               fontSize: '4.5rem',
151 |               lineHeight: '1',
152 |               marginRight: '-2rem',
153 |               right: '100%',
154 |               top: '.5rem',
155 |             },
156 |             'blockquote p::after': {
157 |               content: '”',
158 |               bottom: '-1rem',
159 |               fontSize: '8rem',
160 |               lineHeight: '2.5rem',
161 |               right: '1.25rem',
162 |               top: 'auto',
163 |             },
164 |             */
165 |             // 'ol > li::before': {
166 |             //   color: theme('colors.slate.800'),
167 |             // },
168 |           },
169 |         },
170 |         md: {
171 |           css: {
172 |             blockquote: {
173 |               padding: '0.75rem 2rem 1rem 2.25rem',
174 |             },
175 |             'blockquote cite': {
176 |               paddingBottom: '1rem',
177 |             },
178 |           },
179 |         },
180 |         sm: {
181 |           css: {
182 |             blockquote: {
183 |               padding: '0.75rem 2.5rem 1rem 2.25rem',
184 |             },
185 |             'blockquote cite': {
186 |               paddingBottom: '1rem',
187 |             },
188 |           },
189 |         },
190 |         dark: {
191 |           css: {
192 |             color: theme('colors.slate.200'),
193 |             '[class~="lead"]': {
194 |               color: theme('colors.slate.200'),
195 |             },
196 |             h1: {
197 |               color: theme('colors.slate.200'),
198 |             },
199 |             h2: {
200 |               color: theme('colors.slate.200'),
201 |             },
202 |             h3: {
203 |               color: theme('colors.slate.200'),
204 |             },
205 |             h4: {
206 |               color: theme('colors.slate.200'),
207 |             },
208 |             h5: {
209 |               color: theme('colors.slate.200'),
210 |             },
211 |             h6: {
212 |               color: theme('colors.slate.200'),
213 |             },
214 |             strong: {
215 |               color: theme('colors.slate.200'),
216 |             },
217 |             code: {
218 |               color: theme('colors.slate.400'),
219 |             },
220 |             pre: {
221 |               backgroundColor: theme('colors.slate.900'),
222 |             },
223 |             blockquote: {
224 |               color: theme('colors.slate.200'),
225 |               background: theme('colors.slate.600'),
226 |             },
227 |             'ol > li::before': {
228 |               color: theme('colors.slate.200'),
229 |             },
230 |             'thead th': {
231 |               color: theme('colors.slate.200'),
232 |             },
233 |           }
234 |         }
235 |       })
236 |     },
237 |   },
238 |   plugins: [
239 |     require('@tailwindcss/typography'),
240 |     require('@tailwindcss/forms'),
241 |   ],
242 |   prefix: 'tw-'
243 | }
244 | 


--------------------------------------------------------------------------------
/templates/block/block--local-tasks-block.html.twig:
--------------------------------------------------------------------------------
 1 | {% extends "block.html.twig" %}
 2 | {#
 3 | /**
 4 |  * @file
 5 |  * Theme override for tabs.
 6 |  */
 7 | #}
 8 | {% block content %}
 9 |   {% if content %}
10 |     <nav class="tabs" role="navigation" aria-label="{{ 'Tabs'|t }}">
11 |       {{ content }}
12 |     </nav>
13 |   {% endif %}
14 | {% endblock %}
15 | 


--------------------------------------------------------------------------------
/templates/block/block--system-branding-block.html.twig:
--------------------------------------------------------------------------------
 1 | {% extends "block.html.twig" %}
 2 | {#
 3 | /**
 4 |  * @file
 5 |  * Theme override for a branding block.
 6 |  *
 7 |  * Each branding element variable (logo, name, slogan) is only available if
 8 |  * enabled in the block configuration.
 9 |  *
10 |  * Available variables:
11 |  * - site_logo: Logo for site as defined in Appearance or theme settings.
12 |  * - site_logo_dark: A variant of the logo to allow switching on scroll and between light/dark mode.
13 |  * - site_name: Name for site as defined in Site information settings.
14 |  * - site_slogan: Slogan for site as defined in Site information settings.
15 |  */
16 | #}
17 | {% block content %}
18 | <div class="tw-flex tw-flex-row tw-items-center currentColor">
19 |   {% if site_logo %}
20 |     <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo tw-pr-2 tw-tracking-widest currentColor focus:tw-outline-none focus:tw-shadow-outline">
21 |       <img id="light-logo" src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
22 |       <img id="dark-logo" src="{{ site_logo_dark }}" alt="{{ 'Home'|t }}" class="tw-hidden" />
23 |     </a>
24 |   {% endif %}
25 |   {% if site_name or site_slogan %}
26 |     <div class="currentColor">
27 |       {% if site_name %}
28 |         <a class="site-name tw-text-lg tw-font-semibold tw-uppercase" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
29 |       {% endif %}
30 |       {% if site_slogan %}
31 |         <span id="site-slogan" class="site-slogan tw-block tw-text-slate-200 tw-italic">{{ site_slogan }}</span>
32 |       {% endif %}
33 |     </div>
34 |   {% endif %}
35 | </div>
36 | {% endblock %}
37 | 


--------------------------------------------------------------------------------
/templates/block/block--system-menu-block.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override for a menu block.
 5 |  *
 6 |  * Available variables:
 7 |  * - plugin_id: The ID of the block implementation.
 8 |  * - label: The configured label of the block if visible.
 9 |  * - configuration: A list of the block's configuration values.
10 |  *   - label: The configured label for the block.
11 |  *   - label_display: The display settings for the label.
12 |  *   - provider: The module or other provider that provided this block plugin.
13 |  *   - Block plugin specific settings will also be stored here.
14 |  * - content: The content of this block.
15 |  * - attributes: HTML attributes for the containing element.
16 |  *   - id: A valid HTML ID and guaranteed unique.
17 |  * - title_attributes: HTML attributes for the title element.
18 |  * - content_attributes: HTML attributes for the content element.
19 |  * - title_prefix: Additional output populated by modules, intended to be
20 |  *   displayed in front of the main title tag that appears in the template.
21 |  * - title_suffix: Additional output populated by modules, intended to be
22 |  *   displayed after the main title tag that appears in the template.
23 |  *
24 |  * Headings should be used on navigation menus that consistently appear on
25 |  * multiple pages. When this menu block's label is configured to not be
26 |  * displayed, it is automatically made invisible using the 'visually-hidden' CSS
27 |  * class, which still keeps it visible for screen-readers and assistive
28 |  * technology. Headings allow screen-reader and keyboard only users to navigate
29 |  * to or skip the links.
30 |  * See http://juicystudio.com/article/screen-readers-display-none.php and
31 |  * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
32 |  */
33 | #}
34 | {%
35 |   set classes = [
36 |     'block',
37 |     'block-menu',
38 |     'navigation',
39 |     'menu--' ~ derivative_plugin_id|clean_class,
40 |     'tw-flex tw-flex-col md:tw-flex-row tw-mt-4 md:tw-mt-0',
41 |   ]
42 | %}
43 | {% set heading_id = attributes.id ~ '-menu'|clean_id %}
44 | <nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes.addClass(classes)|without('role', 'aria-labelledby') }}>
45 |   {# Label. If not displayed, we still provide it for screen readers. #}
46 |   {% if not configuration.label_display %}
47 |     {% set title_attributes = title_attributes.addClass('visually-hidden') %}
48 |   {% endif %}
49 |   {{ title_prefix }}
50 |   <h2{{ title_attributes.setAttribute('id', heading_id) }}>{{ configuration.label }}</h2>
51 |   {{ title_suffix }}
52 | 
53 |   {# Menu. #}
54 |   {% block content %}
55 |     {{ content }}
56 |   {% endblock %}
57 | </nav>
58 | 


--------------------------------------------------------------------------------
/templates/block/block.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display a block.
 5 |  *
 6 |  * Available variables:
 7 |  * - plugin_id: The ID of the block implementation.
 8 |  * - label: The configured label of the block if visible.
 9 |  * - configuration: A list of the block's configuration values.
10 |  *   - label: The configured label for the block.
11 |  *   - label_display: The display settings for the label.
12 |  *   - provider: The module or other provider that provided this block plugin.
13 |  *   - Block plugin specific settings will also be stored here.
14 |  * - in_preview: Whether the plugin is being rendered in preview mode.
15 |  * - content: The content of this block.
16 |  * - attributes: array of HTML attributes populated by modules, intended to
17 |  *   be added to the main container tag of this template.
18 |  *   - id: A valid HTML ID and guaranteed unique.
19 |  * - title_attributes: Same as attributes, except applied to the main title
20 |  *   tag that appears in the template.
21 |  * - title_prefix: Additional output populated by modules, intended to be
22 |  *   displayed in front of the main title tag that appears in the template.
23 |  * - title_suffix: Additional output populated by modules, intended to be
24 |  *   displayed after the main title tag that appears in the template.
25 |  *
26 |  * @see template_preprocess_block()
27 |  */
28 | #}
29 | {%
30 |   set classes = [
31 |     'block',
32 |     'block-' ~ configuration.provider|clean_class,
33 |     'block-' ~ plugin_id|clean_class,
34 |   ]
35 | %}
36 | <div{{ attributes.addClass(classes) }}>
37 |   {{ title_prefix }}
38 |   {% if label %}
39 |     <h2{{ title_attributes }}>{{ label }}</h2>
40 |   {% endif %}
41 |   {{ title_suffix }}
42 |   {% block content %}
43 |     {{ content }}
44 |   {% endblock %}
45 | </div>
46 | 


--------------------------------------------------------------------------------
/templates/content/node.html.twig:
--------------------------------------------------------------------------------
  1 | {#
  2 | /**
  3 |  * @file
  4 |  * Theme override to display a node.
  5 |  *
  6 |  * Available variables:
  7 |  * - node: The node entity with limited access to object properties and methods.
  8 |  *   Only method names starting with "get", "has", or "is" and a few common
  9 |  *   methods such as "id", "label", and "bundle" are available. For example:
 10 |  *   - node.getCreatedTime() will return the node creation timestamp.
 11 |  *   - node.hasField('field_example') returns TRUE if the node bundle includes
 12 |  *     field_example. (This does not indicate the presence of a value in this
 13 |  *     field.)
 14 |  *   - node.isPublished() will return whether the node is published or not.
 15 |  *   Calling other methods, such as node.delete(), will result in an exception.
 16 |  *   See \Drupal\node\Entity\Node for a full list of public properties and
 17 |  *   methods for the node object.
 18 |  * - label: (optional) The title of the node.
 19 |  * - content: All node items. Use {{ content }} to print them all,
 20 |  *   or print a subset such as {{ content.field_example }}. Use
 21 |  *   {{ content|without('field_example') }} to temporarily suppress the printing
 22 |  *   of a given child element.
 23 |  * - author_picture: The node author user entity, rendered using the "compact"
 24 |  *   view mode.
 25 |  * - metadata: Metadata for this node.
 26 |  * - date: (optional) Themed creation date field.
 27 |  * - author_name: (optional) Themed author name field.
 28 |  * - url: Direct URL of the current node.
 29 |  * - display_submitted: Whether submission information should be displayed.
 30 |  * - attributes: HTML attributes for the containing element.
 31 |  *   The attributes.class element may contain one or more of the following
 32 |  *   classes:
 33 |  *   - node: The current template type (also known as a "theming hook").
 34 |  *   - node--type-[type]: The current node type. For example, if the node is an
 35 |  *     "Article" it would result in "node--type-article". Note that the machine
 36 |  *     name will often be in a short form of the human readable label.
 37 |  *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
 38 |  *     teaser would result in: "node--view-mode-teaser", and
 39 |  *     full: "node--view-mode-full".
 40 |  *   The following are controlled through the node publishing options.
 41 |  *   - node--promoted: Appears on nodes promoted to the front page.
 42 |  *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
 43 |  *     teaser listings.
 44 |  *   - node--unpublished: Appears on unpublished nodes visible only to site
 45 |  *     admins.
 46 |  * - title_attributes: Same as attributes, except applied to the main title
 47 |  *   tag that appears in the template.
 48 |  * - content_attributes: Same as attributes, except applied to the main
 49 |  *   content tag that appears in the template.
 50 |  * - author_attributes: Same as attributes, except applied to the author of
 51 |  *   the node tag that appears in the template.
 52 |  * - title_prefix: Additional output populated by modules, intended to be
 53 |  *   displayed in front of the main title tag that appears in the template.
 54 |  * - title_suffix: Additional output populated by modules, intended to be
 55 |  *   displayed after the main title tag that appears in the template.
 56 |  * - view_mode: View mode; for example, "teaser" or "full".
 57 |  * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
 58 |  * - page: Flag for the full page state. Will be true if view_mode is 'full'.
 59 |  * - readmore: Flag for more state. Will be true if the teaser content of the
 60 |  *   node cannot hold the main body content.
 61 |  * - logged_in: Flag for authenticated user status. Will be true when the
 62 |  *   current user is a logged-in member.
 63 |  * - is_admin: Flag for admin user status. Will be true when the current user
 64 |  *   is an administrator.
 65 |  *
 66 |  * @see template_preprocess_node()
 67 |  *
 68 |  */
 69 | #}
 70 | {%
 71 |   set classes = [
 72 |     'node',
 73 |     'node--type-' ~ node.bundle|clean_class,
 74 |     node.isPromoted() ? 'node--promoted',
 75 |     node.isSticky() ? 'node--sticky',
 76 |     not node.isPublished() ? 'node--unpublished',
 77 |     view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
 78 |   ]
 79 | %}
 80 | <article{{ attributes.addClass(classes) }}>
 81 | 
 82 |   {{ title_prefix }}
 83 |   {% if label and not page %}
 84 |     <h2{{ title_attributes }}>
 85 |       <a href="{{ url }}" rel="bookmark">{{ label }}</a>
 86 |     </h2>
 87 |   {% endif %}
 88 |   {{ title_suffix }}
 89 | 
 90 |   {% if display_submitted %}
 91 |     <footer class="node__meta">
 92 |       {{ author_picture }}
 93 |       <div{{ author_attributes.addClass('node__submitted') }}>
 94 |         {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
 95 |         {{ metadata }}
 96 |       </div>
 97 |     </footer>
 98 |   {% endif %}
 99 | 
100 |   <div{{ content_attributes.addClass('node__content') }}>
101 |     {{ content }}
102 |   </div>
103 | 
104 | </article>
105 | 


--------------------------------------------------------------------------------
/templates/content/page-title.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override for page titles.
 5 |  *
 6 |  * Available variables:
 7 |  * - title_attributes: HTML attributes for the page title element.
 8 |  * - title_prefix: Additional output populated by modules, intended to be
 9 |  *   displayed in front of the main title tag that appears in the template.
10 |  * - title: The page title, for use in the actual content.
11 |  * - title_suffix: Additional output populated by modules, intended to be
12 |  *   displayed after the main title tag that appears in the template.
13 |  *
14 |  * Theme layout specific utility variables:
15 |  * - content_size: utilities for setting the maximum width of the content.
16 |  * - hide_title: A boolean indicating whether to hide the title.
17 |  *
18 |  * @see twbase_preprocess_page_title()
19 |  */
20 | #}
21 | 
22 | {% if content_size == 'full' %}
23 |   {% set container_size = 'tw-w-full' %}
24 | {% else %}
25 |   {% set container_size = 'tw-container tw-mx-auto ' %}
26 |   {% if content_size == 'sm' %}
27 |     {% set container_size = container_size ~ 'tw-max-w-screen-sm' %}
28 |   {% elseif content_size == 'md' %}
29 |     {% set container_size = container_size ~ 'tw-max-w-screen-md' %}
30 |   {% elseif content_size == 'lg' %}
31 |     {% set container_size = container_size ~ 'tw-max-w-screen-lg' %}
32 |   {% elseif content_size == 'xl' %}
33 |     {% set container_size = container_size ~ 'tw-max-w-screen-xl' %}
34 |   {% endif %}
35 | {% endif %}
36 | 
37 | {%
38 |   set classes = [
39 |     'tw-text-3xl lg:tw-text-5xl tw-font-semibold tw-transition-all tw-duration-700'
40 |   ]
41 | %}
42 | 
43 | {% if title and not hide_title %}
44 |   <div class="tw-w-full tw-py-5">
45 |     <div class="{{ container_size }}">
46 |       {{ title_prefix }}
47 |       <h1{{ title_attributes.addClass('page-title', classes) }}>{{ title }}</h1>
48 |       {{ title_suffix }}
49 |     </div>
50 |   </div>
51 | {% endif %}
52 | 


--------------------------------------------------------------------------------
/templates/form/datetime-wrapper.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Default theme implementation of a datetime form wrapper.
 5 |  *
 6 |  * Available variables:
 7 |  * - content: The form element to be output, usually a datelist, or datetime.
 8 |  * - title: The title of the form element.
 9 |  * - title_attributes: HTML attributes for the title wrapper.
10 |  * - description: Description text for the form element.
11 |  * - required: An indicator for whether the associated form element is required.
12 |  *
13 |  * @see template_preprocess_datetime_wrapper()
14 |  *
15 |  * @ingroup themeable
16 |  */
17 | #}
18 | {%
19 |   set title_classes = [
20 |     required ? 'js-form-required',
21 |     required ? 'form-required',
22 |   ]
23 | %}
24 | {% if title %}
25 |   <h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
26 | {% endif %}
27 | {{ content }}
28 | {% if errors %}
29 |   <div>
30 |     {{ errors }}
31 |   </div>
32 | {% endif %}
33 | {% if description %}
34 |   <div{{ description_attributes.addClass('description') }}>
35 |     {{ description }}
36 |   </div>
37 | {% endif %}
38 | 


--------------------------------------------------------------------------------
/templates/layout/html.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override for the basic structure of a single Drupal page.
 5 |  *
 6 |  * Variables:
 7 |  * - logged_in: A flag indicating if user is logged in.
 8 |  * - root_path: The root path of the current page (e.g., node, admin, user).
 9 |  * - node_type: The content type for the current node, if the page is a node.
10 |  * - head_title: List of text elements that make up the head_title variable.
11 |  *   May contain one or more of the following:
12 |  *   - title: The title of the page.
13 |  *   - name: The name of the site.
14 |  *   - slogan: The slogan of the site.
15 |  * - page_top: Initial rendered markup. This should be printed before 'page'.
16 |  * - page: The rendered page markup.
17 |  * - page_bottom: Closing rendered markup. This variable should be printed after
18 |  *   'page'.
19 |  * - db_offline: A flag indicating if the database is offline.
20 |  * - placeholder_token: The token for generating head, css, js and js-bottom
21 |  *   placeholders.
22 |  *
23 |  * @see template_preprocess_html()
24 |  *
25 |  * Theme layout and showcase specific utility variables:
26 |  * - header_fixed: utilities for setting the header pos (fixed at top or not).
27 |  * - has_showcase: utilities for setting the showcase (enabled or not).
28 |  *
29 |  * @see twbase_preprocess_html()
30 |  */
31 | #}
32 | {%
33 |   set body_classes = [
34 |     logged_in ? 'user-logged-in',
35 |     not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
36 |     node_type ? 'page-node-type-' ~ node_type|clean_class,
37 |     db_offline ? 'db-offline',
38 |     has_showcase ? 'has-showcase',
39 |     header_fixed ? 'navbar-is-fixed',
40 |     header_fixed and not has_showcase ? 'gradient'
41 |   ]
42 | %}
43 | <!DOCTYPE html>
44 | <html{{ html_attributes }}>
45 |   <head>
46 |     <head-placeholder token="{{ placeholder_token|raw }}">
47 |     <title>{{ head_title|safe_join(' | ') }}</title>
48 |     <css-placeholder token="{{ placeholder_token|raw }}">
49 |     <js-placeholder token="{{ placeholder_token|raw }}">
50 |   </head>
51 |   <body{{ attributes.addClass(body_classes) }}>
52 |     {#
53 |       Keyboard navigation/accessibility link to main content section in
54 |       page.html.twig.
55 |     #}
56 |     <a href="#main-content" class="visually-hidden focusable">
57 |       {{ 'Skip to main content'|t }}
58 |     </a>
59 |     {{ page_top }}
60 |     {{ page }}
61 |     {{ page_bottom }}
62 |     <js-bottom-placeholder token="{{ placeholder_token|raw }}">
63 |   </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/templates/layout/page.html.twig:
--------------------------------------------------------------------------------
  1 | {#
  2 | /**
  3 |  * @file
  4 |  * Theme override to display a single page.
  5 |  *
  6 |  * The doctype, html, head and body tags are not in this template. Instead they
  7 |  * can be found in the html.html.twig template in this directory.
  8 |  *
  9 |  * Available variables:
 10 |  *
 11 |  * General utility variables:
 12 |  * - base_path: The base URL path of the Drupal installation. Will usually be
 13 |  *   "/" unless you have installed Drupal in a sub-directory.
 14 |  * - is_front: A flag indicating if the current page is the front page.
 15 |  * - logged_in: A flag indicating if the user is registered and signed in.
 16 |  * - is_admin: A flag indicating if the user has permission to access
 17 |  *   administration pages.
 18 |  *
 19 |  * Theme layout specific utility variables:
 20 |  * - header_fixed: utilities for setting the header pos (fixed at top or not).
 21 |  * - show_progress: utilities for setting the progress while scrolling (enabled or not).
 22 |  * - header_size: utilities for setting the maximum width of the header.
 23 |  * - navbar_size: utilities for setting the maximum width of the navbar.
 24 |  * - content_size: utilities for setting the maximum width of the content.
 25 |  * - wide_content_size: utilities for setting the maximum width of the wide_content.
 26 |  * - pre_footer_size: utilities for setting the maximum width of the pre_footer.
 27 |  * - footer_size: utilities for setting the maximum width of the footer.
 28 |  * - breadcrumb_display: utilities for setting the breadcrumb (displayed or not).
 29 |  * - has_content_top: utilities to know if the content_top has content or not ().
 30 |  * @see twbase_preprocess_page()
 31 |  *
 32 |  * Theme showcase specific utility variables:
 33 |  * - has_showcase:            utilities for setting the showcase (enabled or not).
 34 |  * - showcase_size:           utilities for setting the frontpage showcase size (default, fullscreen).
 35 |  * - showcase_content_pos:    utilities for setting the frontpage showcase content position (default, bottom left).
 36 |  * - showcase_add_overlay:    utilities for setting the showcase overlay.
 37 |  * - showcase_overlay_type:   utilities for setting the showcase overlay type.
 38 |  * - showcase_add_front_deco: utilities for setting the showcase decoration (swirl) for frontpage.
 39 |  * - showcase_add_deco:       utilities for setting the showcase decoration (swirl) for pages.
 40 |  * @see twbase_preprocess_page()
 41 |  *
 42 |  * Site identity:
 43 |  * - front_page: The URL of the front page. Use this instead of base_path when
 44 |  *   linking to the front page. This includes the language domain or prefix.
 45 |  *
 46 |  * Page content (in order of occurrence in the default page.html.twig):
 47 |  * - messages: Status and error messages. Should be displayed prominently.
 48 |  * - node: Fully loaded node, if there is an automatically-loaded node
 49 |  *   associated with the page and the node ID is the second argument in the
 50 |  *   page's path (e.g. node/12345 and node/12345/revisions, but not
 51 |  *   comment/reply/12345).
 52 |  *
 53 |  * Regions:
 54 |  * - page.header: Items for the header region.
 55 |  * - page.nav_branding: Items for the Navigation branding region
 56 |  * - page.nav_main: Items for the Main navigation region
 57 |  * - page.nav_additional: Items for the Additional navigation region (eg search form, social icons, etc)
 58 |  * - page.breadcrumb: Items for the breadcrumb region.
 59 |  * - page.content_top: Items for the content top region.
 60 |  * - page.content: The main content of the current page.
 61 |  * - page.sidebar: Items for the sidebar.
 62 |  * - page.wide_content: Items for the wide content region.
 63 |  * - page.pre_footer: Items for the pre footer region.
 64 |  * - page.footer: Items for the footer region.
 65 |  *
 66 |  * @see template_preprocess_page()
 67 |  * @see html.html.twig
 68 |  */
 69 | #}
 70 | {# <div class="layout-container"> #}
 71 | {# <div class="tw-container tw-mx-auto tw-p-4"> #}
 72 | <div id="page-wrapper" class="tw-flex tw-flex-col tw-min-h-screen font-roboto gradient dark:tw-bg-slate-900">
 73 | 
 74 |   <header id="header" role="banner"
 75 |     class="tw-text-white dark:tw-bg-slate-900 dark:tw-border-slate-700 tw-w-full {% if header_fixed %}navbar-fixed tw-fixed tw-top-0 tw-left-0 tw-right-0{% endif %} tw-z-40">
 76 |     {# {{ page.header }} #}
 77 |     {% if page.header %}
 78 |       {% include '@twbase/layout/partials/_header.html.twig' %}
 79 |     {% endif %}
 80 | 
 81 |     {% if page.nav_branding or page.nav_main or page.nav_additional %}
 82 |       {% include '@twbase/layout/partials/_navbar.html.twig' %}
 83 |     {% endif %}
 84 |   </header>
 85 | 
 86 |   <main id="main" role="main"
 87 |     {% if main_style %}style="{{ main_style }}"{% endif %}
 88 |     class="tw-flex tw-flex-col tw-flex-1 tw-text-slate-800 dark:tw-text-slate-200 tw-z-30">
 89 | 
 90 |     {# link is in html.html.twig #}
 91 |     <a href="#main-content" class="visually-hidden focusable skip-link" id="main-content" tabindex="-1">
 92 |       {{ 'Skip to main content'|t }}
 93 |     </a>
 94 | 
 95 |     {% if has_showcase %}
 96 |       {% if is_front %}
 97 |         {% include '@twbase/layout/partials/_showcase_front.html.twig' %}
 98 |       {% elseif showcase %}
 99 |         {% include '@twbase/layout/partials/_showcase.html.twig' %}
100 |       {% endif %}
101 |     {% endif %}
102 | 
103 |     {# Set the container_size here, it is needed in breadcrumb and content_top #}
104 |     {% if content_size == 'full' %}
105 |       {% set container_size = 'tw-w-full' %}
106 |     {% else %}
107 |       {% set container_size = 'tw-container tw-mx-auto ' %}
108 |       {% if content_size == 'sm' %}
109 |         {% set container_size = container_size ~ 'tw-max-w-screen-sm' %}
110 |       {% elseif content_size == 'md' %}
111 |         {% set container_size = container_size ~ 'tw-max-w-screen-md' %}
112 |       {% elseif content_size == 'lg' %}
113 |         {% set container_size = container_size ~ 'tw-max-w-screen-lg' %}
114 |       {% elseif content_size == 'xl' %}
115 |         {% set container_size = container_size ~ 'tw-max-w-screen-xl' %}
116 |       {% endif %}
117 |     {% endif %}
118 | 
119 |     {% if breadcrumb_display and page.breadcrumb %}
120 |       {% include '@twbase/layout/partials/_breadcrumb.html.twig' %}
121 |     {% endif %}
122 | 
123 |     {# See twbase_preprocess_page() #}
124 |     {% if has_content_top and page.content_top %}
125 |       {% include '@twbase/layout/partials/_content_top.html.twig' %}
126 |     {% endif %}
127 | 
128 |     {#
129 |     {% if page.content %}
130 |       {% include '@twbase/layout/partials/_content.html.twig' %}
131 |     {% endif %}
132 |     #}
133 | 
134 |     <section class="tw-grow tw-w-full tw-bg-white dark:tw-bg-slate-800 tw-px-4 tw-py-5 tw-prose tw-prose-sm sm:tw-prose-base lg:tw-prose-lg xl:tw-prose-xl 2xl:tw-prose-2xl dark:tw-prose-dark">
135 |       <div class="{{ container_size }} tw-px-4 tw-flex tw-flex-col lg:tw-flex-row">
136 |         <div class="lg:tw-flex-1 lg:tw-w-2/3 {% if page.sidebar %}lg:tw-pr-4{% endif %}">
137 |           {{ page.content }}
138 |           {# {% include '@twbase/layout/partials/_content.html.twig' %} #}
139 |         </div>
140 | 
141 |         {% if page.sidebar %}
142 |           <aside class="lg:tw-w-1/3 lg:tw-pl-4" role="complementary">
143 |             {{ page.sidebar }}
144 |           </aside>
145 |         {% endif %}
146 | 
147 |       </div>
148 |     </section>
149 | 
150 |   </main>
151 | 
152 |   {% if page.wide_content %}
153 |     {% include '@twbase/layout/partials/_wide_content.html.twig' %}
154 |   {% endif %}
155 | 
156 |   {% if page.pre_footer %}
157 |     {% include '@twbase/layout/partials/_pre_footer.html.twig' %}
158 |   {% endif %}
159 | 
160 |   {% if page.footer %}
161 |     {% include '@twbase/layout/partials/_footer.html.twig' %}
162 |   {% endif %}
163 | 
164 | </div>{# /#page-wrapper #}
165 | 


--------------------------------------------------------------------------------
/templates/layout/partials/_breadcrumb.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display the breadcrumb of a single page.
 5 |  *
 6 |  * @see templates/layout/page.html.twig for a full list of available variables.
 7 |  */
 8 | #}
 9 | 
10 | <!--Breadcrumb-->
11 | <section class="tw-w-full tw-bg-white dark:tw-bg-slate-800 tw-px-4 tw-py-5">
12 |   <div class="{{ container_size }} tw-px-4 tw-py-5">
13 |     <!--Breadcrumb-->
14 |     {# <div class="md:tw-flex-1 tw-py-4"> #}
15 |       {{ page.breadcrumb }}
16 |     {# </div> #}
17 |   </div>
18 | </section>
19 | 


--------------------------------------------------------------------------------
/templates/layout/partials/_content.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display the content of a single page.
 5 |  *
 6 |  * @see templates/layout/page.html.twig for a full list of available variables.
 7 |  */
 8 | #}
 9 | 
10 | <!--Content-->
11 | <section class="tw-grow tw-w-full tw-bg-white dark:tw-bg-slate-800 tw-prose tw-prose-sm sm:tw-prose-base lg:tw-prose-lg xl:tw-prose-xl 2xl:tw-prose-2xl dark:tw-prose-dark">
12 |   {{ page.content }}
13 | </section>
14 | 


--------------------------------------------------------------------------------
/templates/layout/partials/_content_top.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display the content_top of a single page.
 5 |  *
 6 |  * @see templates/layout/page.html.twig for a full list of available variables.
 7 |  */
 8 | #}
 9 | 
10 | <!--Content top-->
11 | <section class="tw-w-full tw-bg-white dark:tw-bg-slate-800 tw-px-4 tw-py-5">
12 |   <div class="{{ container_size }} tw-px-4">
13 |   {# <div class="md:tw-flex"> #}
14 |     <!--Page content top-->
15 |     <div class="md:tw-flex-1 tw-py-4">
16 |       {{ page.content_top }}
17 |     </div>
18 |   {# </div> #}
19 |   </div>
20 | </section>
21 | 


--------------------------------------------------------------------------------
/templates/layout/partials/_footer.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display the footer of a single page.
 5 |  *
 6 |  * @see templates/layout/page.html.twig for a full list of available variables.
 7 |  */
 8 | #}
 9 | 
10 | <!--Footer-->
11 | {% if footer_size == 'full' %}
12 |   {% set container_size = 'tw-w-full' %}
13 | {% else %}
14 |   {% set container_size = 'tw-container tw-mx-auto ' %}
15 |   {% if footer_size == 'sm' %}
16 |     {% set container_size = container_size ~ 'tw-max-w-screen-sm' %}
17 |   {% elseif footer_size == 'md' %}
18 |     {% set container_size = container_size ~ 'tw-max-w-screen-md' %}
19 |   {% elseif footer_size == 'lg' %}
20 |     {% set container_size = container_size ~ 'tw-max-w-screen-lg' %}
21 |   {% elseif footer_size == 'xl' %}
22 |     {% set container_size = container_size ~ 'tw-max-w-screen-xl' %}
23 |   {% endif %}
24 | {% endif %}
25 | 
26 | <footer role="contentinfo" class="tw-bg-black dark:tw-bg-black tw-w-full tw-px-4 tw-py-5 tw-prose tw-prose-sm sm:tw-prose-base lg:tw-prose-lg xl:tw-prose-xl 2xl:tw-prose-2xl">
27 |   <div class="{{ container_size }} tw-px-4 tw-flex tw-flex-col tw-items-center tw-space-y-6 lg:tw-space-y-0 lg:tw-flex-row lg:tw-justify-between">
28 |     {# <div class="tw-max-w-screen-xl tw-w-full tw-flex tw-flex-wrap"> #}
29 |       {{ page.footer }}
30 |     {# </div> #}
31 |   </div>
32 | </footer>
33 | 


--------------------------------------------------------------------------------
/templates/layout/partials/_header.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display the header of a single page.
 5 |  *
 6 |  * @see templates/layout/page.html.twig for a full list of available variables.
 7 |  */
 8 | #}
 9 | 
10 | <!--Header-->
11 | {% if header_size == 'full' %}
12 |   {% set container_size = 'tw-w-full' %}
13 | {% else %}
14 |   {% set container_size = 'tw-container tw-mx-auto ' %}
15 |   {% if header_size == 'sm' %}
16 |     {% set container_size = container_size ~ 'tw-max-w-screen-sm' %}
17 |   {% elseif header_size == 'md' %}
18 |     {% set container_size = container_size ~ 'tw-max-w-screen-md' %}
19 |   {% elseif header_size == 'lg' %}
20 |     {% set container_size = container_size ~ 'tw-max-w-screen-lg' %}
21 |   {% elseif header_size == 'xl' %}
22 |     {% set container_size = container_size ~ 'tw-max-w-screen-xl' %}
23 |   {% endif %}
24 | {% endif %}
25 | <section class="tw-w-full tw-text-white tw-bg-purple-800 dark:tw-bg-purple-800 tw-px-4 tw-py-2">
26 |   <div class="{{ container_size }} tw-font-medium tw-text-base tw-mx-auto tw-text-center tw-px-4">
27 |     <!--Page Header-->
28 |     {{ page.header }}
29 |   </div>
30 | </section>
31 | 


--------------------------------------------------------------------------------
/templates/layout/partials/_navbar.html.twig:
--------------------------------------------------------------------------------
  1 | {#
  2 | /**
  3 |  * @file
  4 |  * Theme override to display the navbar of a single page.
  5 |  *
  6 |  * @see templates/layout/page.html.twig for a full list of available variables.
  7 |  */
  8 | #}
  9 | 
 10 | <!--Navbar-->
 11 | {% if navbar_size == 'full' %}
 12 |   {% set container_size = 'tw-w-full' %}
 13 | {% else %}
 14 |   {% set container_size = 'tw-container tw-mx-auto ' %}
 15 |   {% if navbar_size == 'sm' %}
 16 |     {% set container_size = container_size ~ 'tw-max-w-screen-sm' %}
 17 |   {% elseif navbar_size == 'md' %}
 18 |     {% set container_size = container_size ~ 'tw-max-w-screen-md' %}
 19 |   {% elseif navbar_size == 'lg' %}
 20 |     {% set container_size = container_size ~ 'tw-max-w-screen-lg' %}
 21 |   {% elseif navbar_size == 'xl' %}
 22 |     {% set container_size = container_size ~ 'tw-max-w-screen-xl' %}
 23 |   {% endif %}
 24 | {% endif %}
 25 | 
 26 | <div x-data="{ open: false }"
 27 |   @click.away="open = false"
 28 |   class="tw-flex tw-flex-col {{ container_size }} md:tw-items-center md:tw-justify-between md:tw-flex-row">
 29 |   {# class="tw-flex tw-flex-col tw-max-w-screen-xl tw-mx-auto md: md:tw-items-center md:tw-justify-between md:tw-flex-row"> #}
 30 | 
 31 |   <div class="tw-px-4 tw-py-6 md:tw-py-4 tw-flex tw-flex-row tw-justify-between">
 32 | 
 33 |     <div class="tw-justify-start">
 34 |       {{ page.nav_branding }}
 35 |     </div>
 36 | 
 37 |     <button class="md:tw-hidden tw-rounded-lg focus:tw-outline-none focus:tw-shadow-outline" @click="open = !open">
 38 |       <svg fill="currentColor" viewBox="0 0 20 20" class="tw-w-6 tw-h-6">
 39 |         <path x-show="!open" fill-rule="evenodd"
 40 |           d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
 41 |           clip-rule="evenodd"></path>
 42 |         <path x-show="open" fill-rule="evenodd"
 43 |           d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
 44 |           clip-rule="evenodd"></path>
 45 |       </svg>
 46 |     </button>
 47 |   </div>
 48 | 
 49 |   <nav id="main-nav" :class="{'tw-flex': open, 'tw-hidden': !open}"
 50 |       class="tw-z-30 tw-bg-white tw-text-white tw-top-0 currentColor tw-flex-col tw-grow tw-px-4 tw-py-4 tw-hidden md:tw-flex md:tw-flex-row md:tw-bg-transparent">
 51 | 
 52 |     <div class="tw-px-4 md:tw-px-0">
 53 |       {{ page.nav_main }}
 54 |     </div>
 55 |     <div class="tw-px-4 tw-flex tw-grow md:tw-justify-end">
 56 |       {{ page.nav_additional }}
 57 |     </div>
 58 | 
 59 |     {# @todo: #}
 60 |     {# Add locales switcher #}
 61 |     <div id="locales-switcher" class="md:flex md:grow md:justify-end">
 62 |       {# {% if locales()|length %}
 63 |         {% for locale in locales() %}
 64 |           <a href="{{ locale.link|replace({'?_locale=': ''}) }}" class="{% if loop.first %}md:ml-4{% else %}md:ml-0{% endif %} px-2 py-2 mt-2 text-sm font-semibold bg-transparent md:mt-0 hover:text-blue-600 focus:outline-none focus:shadow-outline">
 65 |             {{ locale.emoji }} {{ locale.code|upper }}
 66 |           </a>
 67 |         {% endfor %}
 68 |       {% endif %} #}
 69 | 
 70 |       {# {% include 'partials/theme-switcher/_theme-switcher.twig' %} #}
 71 | 
 72 | 
 73 |       {# Component from https://tailwindcomponents.com/component/switch-dark-mode #}
 74 |       <!--Theme Switcher style-->
 75 |       <style>
 76 |         .toggle-checkbox:checked {
 77 |           right: 0;
 78 |           border: none;
 79 |           /* default */
 80 |           background-color: rgb(129, 124, 214);
 81 |           /* blue-600 */
 82 |           /* background-color: rgb(37, 99, 235); */
 83 |           background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' className='h-10 w-10' fill='%23FFF' viewBox='0 0 24 24' stroke='rgb(129 124 214)' > <path strokeLinecap='round' strokeLinejoin='round' d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z' /> </svg>");
 84 |         }
 85 |         .toggle-checkbox:checked:focus,
 86 |         .toggle-checkbox:checked:hover {
 87 |           background-color: rgb(129, 124, 214);
 88 |         }
 89 |         .toggle-checkbox:checked + .toggle-label {
 90 |           /* default */
 91 |           background-color: rgb(76, 73, 188);
 92 |           /* blue-800 */
 93 |           /* background-color: rgb(30, 64, 175); */
 94 |           /* blue-900 */
 95 |           /* background-color: rgb(30, 58, 138); */
 96 |         }
 97 |       </style>
 98 | 
 99 |       <!--Theme Switcher-->
100 |       {# See https://plaiceholder.co/docs for an other example #}
101 |       {# <div class="fixed bottom-5 left-5 w-12 select-none transition duration-200 ease-in z-30"> #}
102 |       <div class="tw-relative tw-block tw-flex-none tw-ml-4 md:tw-ml-1 tw-mt-8 md:tw-mt-2 tw-w-12 tw-select-none tw-transition tw-duration-200 tw-ease-in tw-z-30">
103 |         <input type="checkbox" name="theme-switcher" id="theme-switcher"
104 |           class="toggle-checkbox tw-bg-yellow-300 tw-border-yellow-500 tw-mr-1 tw-mt-1 focus:tw-ring-transparent focus:tw-ring-offset-transparent tw-absolute tw-block tw-w-6 tw-h-6 tw-rounded-full tw-border-2 tw-appearance-none tw-cursor-pointer"
105 |         />
106 |         <label for="theme-switcher"
107 |           class="toggle-label tw-block tw-h-8 tw--ml-1 tw--mt-1 tw-rounded-full tw-bg-turquoise tw-cursor-pointer">
108 |           <span class="visually-hidden">Switch theme</span>
109 |         </label>
110 |       </div>
111 |     </div>
112 | 
113 |   </nav>
114 | 
115 | </div>
116 | 
117 | 
118 | {% if header_fixed and show_progress %}
119 |   {# The progess bar is only shown on Pages, Blogs and News #}
120 |   <div id="progress" class="tw-h-1 tw-z-40"
121 |     style="background:linear-gradient(to right, #60A5FA var(--scroll), transparent 0);">
122 |   </div>
123 | {% endif %}
124 | 


--------------------------------------------------------------------------------
/templates/layout/partials/_pre_footer.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display the pre_footer of a single page.
 5 |  *
 6 |  * @see templates/layout/page.html.twig for a full list of available variables.
 7 |  */
 8 | #}
 9 | 
10 | <!--Pre Footer-->
11 | {% if pre_footer_size == 'full' %}
12 |   {% set container_size = 'tw-w-full' %}
13 | {% else %}
14 |   {% set container_size = 'tw-container tw-mx-auto ' %}
15 |   {% if pre_footer_size == 'sm' %}
16 |     {% set container_size = container_size ~ 'tw-max-w-screen-sm' %}
17 |   {% elseif pre_footer_size == 'md' %}
18 |     {% set container_size = container_size ~ 'tw-max-w-screen-md' %}
19 |   {% elseif pre_footer_size == 'lg' %}
20 |     {% set container_size = container_size ~ 'tw-max-w-screen-lg' %}
21 |   {% elseif pre_footer_size == 'xl' %}
22 |     {% set container_size = container_size ~ 'tw-max-w-screen-xl' %}
23 |   {% endif %}
24 | {% endif %}
25 | <section class="tw-bg-slate-900 tw-text-slate-300 dark:tw-text-slate-300 tw-w-full tw-px-4 tw-py-5 tw-prose tw-prose-sm sm:tw-prose-base lg:tw-prose-lg xl:tw-prose-xl 2xl:tw-prose-2xl">
26 |   <div class="{{ container_size }} tw-px-4 tw-py-24 tw-flex tw-flex-col tw-items-center tw-space-y-6 lg:tw-space-y-0 lg:tw-flex-row lg:tw-justify-between">
27 |     {# <div class="tw-max-w-screen-xl tw-w-full tw-flex tw-flex-wrap"> #}
28 |       {# <p>Pre footer content here</p> #}
29 |       {{ page.pre_footer }}
30 |     {# </div> #}
31 |   </div>
32 | </section>
33 | 


--------------------------------------------------------------------------------
/templates/layout/partials/_showcase.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display the showcase of a single page.
 5 |  *
 6 |  * @see templates/layout/page.html.twig for a full list of available variables.
 7 |  * @see twbase_preprocess_page()
 8 |  */
 9 | #}
10 | 
11 | <!--Showcase-->
12 | <div class="showcase tw-relative tw-overflow-hidden tw-pt-12 tw-px-4" style="min-height: 32rem;">
13 | 
14 |   {% if showcase.title or showcase.submitted or showcase.introduction %}
15 |     <!--Showcase content-->
16 |     <div class="tw-container tw-max-w-screen-xl tw-relative tw-mx-auto tw-pt-40 tw-pb-32 tw-px-4 tw-z-30">
17 |       <div class="tw-w-full tw-max-w-screen-xl tw-mx-auto tw-py-4">
18 |         {# {{ page.showcase }} #}
19 | 
20 |         {% if showcase.title %}
21 |           <h1 class="page-title tw-max-w-5xl tw-text-3xl lg:tw-text-5xl tw-font-semibold tw-text-white tw-transition-all tw-duration-700">{{ showcase.title }}</h1>
22 |         {% endif %}
23 | 
24 |         {% if showcase.submitted %}
25 |           <div class="tw-flex tw-mt-4 tw-max-w-3xl tw-text-lg md:tw-text-2xl tw-text-white tw-transition-all tw-duration-700 tw-pt-4">
26 |             {% set submitted_author = showcase.submitted.author %}
27 | 
28 |             {% if submitted_author.picture %}
29 |               <img src="{{ submitted_author.picture }}" loading="lazy" typeof="foaf:Image" class="tw-h-16 tw-w-16 tw-rounded-full tw-mr-2 tw-object-cover">
30 |             {% endif %}
31 |             <div class="tw-flex tw-flex-col tw-flex-1 tw-justify-around">
32 |               {% if submitted_author.name %}
33 |                 <p class="tw-font-semibold tw-text-slate-200">
34 |                   {% trans %}By {{ submitted_author.name }}{% endtrans %}
35 |                 </p>
36 |               {% endif %}
37 | 
38 |               {% if showcase.submitted.created %}
39 |                 <p class="tw-font-semibold tw-text-base tw-text-slate-400">
40 |                   {{ showcase.submitted.created }}
41 |                 </p>
42 |               {% endif %}
43 |             </div>
44 |           </div>
45 |         {% endif %}
46 | 
47 |         {% if showcase.introduction %}
48 |           <div class="tw-flex tw-mt-3 tw-max-w-3xl tw-text-lg md:tw-text-2xl tw-text-white tw-transition-all tw-duration-700 tw-pt-4 tw-prose">
49 |             {{ showcase.introduction }}
50 |           </div>
51 |         {% endif %}
52 | 
53 |       </div>
54 |     </div>
55 |   {% endif %}
56 | 
57 |   {# The showcase image #}
58 |   {% if showcase.image_path %}
59 |     <img src="{{ showcase.image_path }}" loading="lazy" typeof="foaf:Image" class="tw-absolute tw-top-0 tw-left-0 tw-z-10 tw-w-full tw-h-full tw-object-cover">
60 |   {% endif %}
61 | 
62 |   {# The overlay gradient #}
63 |   {% if showcase_add_overlay %}
64 |     {% include '@twbase/layout/partials/showcase_partials/_showcase_overlay.html.twig' %}
65 |   {% endif %}
66 | 
67 |   {% if showcase_add_deco %}
68 |     {% include '@twbase/layout/partials/showcase_partials/_showcase_divider_swirl.html.twig' %}
69 |   {% endif %}
70 | 
71 | </div>
72 | 


--------------------------------------------------------------------------------
/templates/layout/partials/_showcase_front.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display the showcase of the frontpage.
 5 |  *
 6 |  * @see templates/layout/page.html.twig for a full list of available variables.
 7 |  * @see twbase_preprocess_page()
 8 |  */
 9 | #}
10 | 
11 | <!--Front Showcase-->
12 | {# Showcase size #}
13 | {% set showcase_size = showcase_size is defined ? showcase_size : 'fullscreen' %}
14 | {% set showcase_fullscreen = (showcase_size == 'fullscreen') %}
15 | 
16 | {# Showcase content position #}
17 | {% set showcase_content_pos = showcase_content_pos is defined ? showcase_content_pos : 'default' %}
18 | {% set showcase_pos_bottom = showcase_content_pos == 'bottom' %}
19 | 
20 | {% if showcase_fullscreen or showcase_pos_bottom %}
21 |   {% set showcase_classes = 'tw-flex tw-items-center tw-justify-between' %}
22 | {% else %}
23 |   {% set showcase_classes = 'tw-pt-10' %}
24 | {% endif %}
25 | 
26 | {% if showcase_fullscreen %}
27 |   {% set showcase_classes = showcase_classes ~ ' tw-h-screen' %}
28 | {% endif %}
29 | 
30 | <!--Showcase-->
31 | <div class="showcase tw-relative tw-overflow-hidden {{ showcase_classes }} tw-px-4">
32 | 
33 |   <!--Showcase content-->
34 |   <div class="tw-container tw-max-w-screen-xl tw-relative
35 |     {% if showcase_pos_bottom %}
36 |       md:tw-w-9/12 tw-w-full md:tw-bottom-16 sm:tw-col-span-1 tw-space-y-5 md:tw-space-y-8 {% if showcase_fullscreen %}tw-pt-60{% else %}tw-pt-72{% endif %}
37 |     {% else %}
38 |       tw-mx-auto tw-pt-40 tw-pb-32
39 |     {% endif %}
40 |     tw-px-4 tw-z-30">
41 | 
42 |     {% if showcase.title %}
43 |       <h1 class="tw-max-w-5xl tw-text-4xl sm:tw-text-5xl xl:tw-text-7xl tw-font-semibold tw-text-white tw-prose tw-transition-all tw-duration-700">{{ showcase.title }}</h1>
44 |     {% endif %}
45 | 
46 |     {% if showcase.introduction %}
47 |       <div class="tw-max-w-3xl tw-text-lg md:tw-text-2xl tw-text-white tw-transition-all tw-duration-700 tw-pt-4 tw-prose">
48 |         {{ showcase.introduction }}
49 |       </div>
50 |     {% endif %}
51 | 
52 |     {% if showcase.button_text and showcase.button_link %}
53 |       <div class="tw-flex tw-justify-start tw-space-x-4">
54 |         <a href="{{ showcase.button_link }}"
55 |           {% if showcase.button_new_windows %}target="_blank"{% endif %}
56 |           class="button button--primary button--lg tw-my-6 tw-py-4 tw-px-8">
57 |           {{ showcase.button_text }}
58 |         </a>
59 |       </div>
60 |     {% endif %}
61 | 
62 |   </div>
63 | 
64 |   {# The showcase image #}
65 |   {% if showcase.image_path %}
66 |     <img alt="Asian street at night" src="{{ showcase.image_path }}" loading="lazy" typeof="foaf:Image" class="tw-absolute tw-top-0 tw-left-0 tw-z-10 tw-w-full tw-h-full tw-object-cover">
67 |   {% endif %}
68 | 
69 |   {# The overlay gradient #}
70 |   {% if showcase_add_overlay %}
71 |     {% include '@twbase/layout/partials/showcase_partials/_showcase_overlay.html.twig' %}
72 |   {% endif %}
73 | 
74 |   {% if showcase_add_front_deco %}
75 |     {% include '@twbase/layout/partials/showcase_partials/_showcase_divider_swirl.html.twig' %}
76 |   {% endif %}
77 | 
78 | </div>
79 | 


--------------------------------------------------------------------------------
/templates/layout/partials/_wide_content.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display the wide_content of a single page.
 5 |  *
 6 |  * @see templates/layout/page.html.twig for a full list of available variables.
 7 |  */
 8 | #}
 9 | 
10 | <!--Team/Wide content ???-->
11 | {% if wide_content_size == 'full' %}
12 |   {% set container_size = 'tw-w-full' %}
13 | {% else %}
14 |   {% set container_size = 'tw-container tw-mx-auto ' %}
15 |   {% if wide_content_size == 'sm' %}
16 |     {% set container_size = container_size ~ 'tw-max-w-screen-sm' %}
17 |   {% elseif wide_content_size == 'md' %}
18 |     {% set container_size = container_size ~ 'tw-max-w-screen-md' %}
19 |   {% elseif wide_content_size == 'lg' %}
20 |     {% set container_size = container_size ~ 'tw-max-w-screen-lg' %}
21 |   {% elseif wide_content_size == 'xl' %}
22 |     {% set container_size = container_size ~ 'tw-max-w-screen-xl' %}
23 |   {% endif %}
24 | {% endif %}
25 | <section class="tw-bg-slate-200 dark:tw-bg-slate-600 tw-text-slate-200 dark:tw-text-slate-200 tw-w-full tw-px-4 tw-py-5 tw-prose tw-prose-sm sm:tw-prose-base lg:tw-prose-lg xl:tw-prose-xl 2xl:tw-prose-2xl">
26 |   <div class="{{ container_size }} tw-px-4 tw-py-24 tw-flex tw-flex-col tw-items-center tw-space-y-6 lg:tw-space-y-0 lg:tw-flex-row lg:tw-justify-between">
27 |     {# <div class="tw-max-w-screen-xl tw-w-full tw-flex tw-flex-wrap"> #}
28 |       {# <p>Wide content here</p> #}
29 |       {{ page.wide_content }}
30 |     {# </div> #}
31 |   </div>
32 | </section>
33 | 


--------------------------------------------------------------------------------
/templates/layout/partials/showcase_partials/_showcase_divider_swirl.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display the showcase divider swirl.
 5 |  *
 6 |  * @see templates/layout/page.html.twig for a full list of available variables.
 7 |  * @see templates/layout/partials/_showcase.html.twig.
 8 |  * @see templates/layout/partials/_showcase_front.html.twig.
 9 |  */
10 | #}
11 | 
12 | {% set background = background|default('#f8fafc') %}
13 | <!-- Divider swirl -->
14 | <div class="tw-absolute tw-bottom-0 tw-left-0 tw-w-full tw-z-20 tw--mt-12 lg:tw--mt-24">
15 |   <svg viewBox="0 0 1428 174" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
16 |     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
17 |       <g id="showcase-divider-1" transform="translate(-2.000000, 44.000000)" fill="{{ background }}" fill-rule="nonzero">
18 |         <path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
19 |         <path d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z" opacity="0.100000001"></path>
20 |         <path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" opacity="0.200000003"></path>
21 |       </g>
22 |       <g id="showcase-divider-2" transform="translate(-4.000000, 76.000000)" fill="{{ background }}" fill-rule="nonzero">
23 |         <path d="M0.457,34.035 C57.086,53.198 98.208,65.809 123.822,71.865 C181.454,85.495 234.295,90.29 272.033,93.459 C311.355,96.759 396.635,95.801 461.025,91.663 C486.76,90.01 518.727,86.372 556.926,80.752 C595.747,74.596 622.372,70.008 636.799,66.991 C663.913,61.324 712.501,49.503 727.605,46.128 C780.47,34.317 818.839,22.532 856.324,15.904 C922.689,4.169 955.676,2.522 1011.185,0.432 C1060.705,1.477 1097.39,3.129 1121.236,5.387 C1161.703,9.219 1208.621,17.821 1235.4,22.304 C1285.855,30.748 1354.351,47.432 1440.886,72.354 L1441.191,104.352 L1.121,104.031 L0.457,34.035 Z"></path>
24 |       </g>
25 |     </g>
26 |   </svg>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/templates/layout/partials/showcase_partials/_showcase_overlay.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display the showcase overlay.
 5 |  *
 6 |  * @see templates/layout/page.html.twig for a full list of available variables.
 7 |  * @see templates/layout/partials/_showcase.html.twig
 8 |  * @see templates/layout/partials/_showcase_front.html.twig
 9 |  */
10 | #}
11 | <div class="tw-image-overlay tw-absolute tw-top-0 tw-bottom-0 tw-left-0 tw-right-0 tw-z-20"
12 |   {% if showcase_overlay_type == 'overlay-dark' %}
13 |     style="background: rgba(0, 0, 0, 0.4);"
14 |   {% elseif showcase_overlay_type == 'overlay-dark-gradient' %}
15 |     style="background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));"
16 |   {% elseif showcase_overlay_type == 'overlay-light' %}
17 |     style="background: rgba(255, 255, 255, 0.4);"
18 |   {% elseif showcase_overlay_type == 'overlay-light-gradient' %}
19 |     style="background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));"
20 |   {% endif %}
21 | >
22 | </div>


--------------------------------------------------------------------------------
/templates/layout/region.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display a region.
 5 |  *
 6 |  * Available variables:
 7 |  * - content: The content for this region, typically blocks.
 8 |  * - attributes: HTML attributes for the region <div>.
 9 |  * - region: The name of the region variable as defined in the theme's
10 |  *   .info.yml file.
11 |  *
12 |  * @see template_preprocess_region()
13 |  */
14 | #}
15 | {%
16 |   set classes = [
17 |     'region',
18 |     'region-' ~ region|clean_class,
19 |   ]
20 | %}
21 | {% if content %}
22 |   <div{{ attributes.addClass(classes) }}>
23 |     {{ content }}
24 |   </div>
25 | {% endif %}
26 | 


--------------------------------------------------------------------------------
/templates/misc/status-messages.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override for status messages.
 5 |  *
 6 |  * Displays status, error, and warning messages, grouped by type.
 7 |  *
 8 |  * An invisible heading identifies the messages for assistive technology.
 9 |  * Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
10 |  * for info.
11 |  *
12 |  * Add an ARIA label to the contentinfo area so that assistive technology
13 |  * user agents will better describe this landmark.
14 |  *
15 |  * Available variables:
16 |  * - message_list: List of messages to be displayed, grouped by type.
17 |  * - status_headings: List of all status types.
18 |  * - attributes: HTML attributes for the element, including:
19 |  *   - class: HTML classes.
20 |  */
21 | #}
22 | <div data-drupal-messages>
23 | {% block messages %}
24 | {% for type, messages in message_list %}
25 |   {%
26 |     set classes = [
27 |       'messages',
28 |       'messages--' ~ type,
29 |     ]
30 |   %}
31 |   <div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
32 |     {% if type == 'error' %}
33 |       <div role="alert">
34 |     {% endif %}
35 |       {% if status_headings[type] %}
36 |         <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
37 |       {% endif %}
38 |       {% if messages|length > 1 %}
39 |         <ul class="messages__list">
40 |           {% for message in messages %}
41 |             <li class="messages__item">{{ message }}</li>
42 |           {% endfor %}
43 |         </ul>
44 |       {% else %}
45 |         {{ messages|first }}
46 |       {% endif %}
47 |     {% if type == 'error' %}
48 |       </div>
49 |     {% endif %}
50 |   </div>
51 |   {# Remove type specific classes. #}
52 |   {% set attributes = attributes.removeClass(classes) %}
53 | {% endfor %}
54 | {% endblock messages %}
55 | </div>
56 | 


--------------------------------------------------------------------------------
/templates/navigation/menu--account.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display a menu.
 5 |  *
 6 |  * Available variables:
 7 |  * - menu_name: The machine name of the menu.
 8 |  * - items: A nested list of menu items. Each menu item contains:
 9 |  *   - attributes: HTML attributes for the menu item.
10 |  *   - below: The menu item child items.
11 |  *   - title: The menu link title.
12 |  *   - url: The menu link url, instance of \Drupal\Core\Url
13 |  *   - localized_options: Menu link localized options.
14 |  *   - is_expanded: TRUE if the link has visible children within the current
15 |  *     menu tree.
16 |  *   - is_collapsed: TRUE if the link has children within the current menu tree
17 |  *     that are not currently visible.
18 |  *   - in_active_trail: TRUE if the link is in the active trail.
19 |  */
20 | #}
21 | {%
22 |   set classes_link = [
23 |     'tw-flex tw-items-center tw-px-3 tw-py-3 tw-bg-transparent hover:tw-bg-slate-200 dark:hover:tw-bg-slate-600',
24 |     'focus:tw-outline-none focus:tw-shadow-outline'
25 | ]
26 | %}
27 | 
28 | <div class="tw-relative tw-mt-1" x-data="{ isOpen: false}">
29 |   <button
30 |     @click="isOpen = !isOpen"
31 |     @keydown.escape="isOpen = false"
32 |     class="tw-flex tw-items-center"
33 |     aria-label="{{ 'User menu'|t }}"
34 |   >
35 |     <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-circle"
36 |         class="tw-inline tw-w-8 tw-h-8 fa-user-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
37 |       <path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"></path>
38 |     </svg>
39 |   </button>
40 |   <ul x-cloak x-show="isOpen"
41 |     @click.away="isOpen = false"
42 |     x-transition:enter="tw-transition tw-ease-out tw-duration-300"
43 |     x-transition:enter-start="tw-opacity-0 tw-scale-90"
44 |     x-transition:enter-end="tw-opacity-100 tw-scale-100"
45 |     x-transition:leave="tw-transition tw-ease-in tw-duration-300"
46 |     x-transition:leave-start="tw-opacity-100 tw-scale-100"
47 |     x-transition:leave-end="tw-opacity-0 tw-scale-90"
48 |     class="tw-absolute tw-font-normal tw-bg-white dark:tw-bg-slate-800 tw-text-slate-700 dark:tw-text-white tw-rounded tw-shadow tw-overflow-hidden tw-w-48 tw-border tw-mt-2 tw-py-1 md:tw-right-0 tw-z-40"
49 |   >
50 |     {% for item in items %}
51 |       <li>
52 |         {% if item.url.routeName == 'user.page' %}
53 |           {% set title %}
54 |             <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="user"
55 |                 class="tw-inline tw-h-6 tw-w-6 fa-user fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
56 |               <path fill="currentColor" d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"></path>
57 |             </svg>
58 |             <span class="tw-ml-2">{{ item.title }}</span>
59 |           {% endset %}
60 |         {% elseif item.url.routeName == 'user.login' %}
61 |           {% set title %}
62 |             {# <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="text-slate-600"><path d="M0 0h24v24H0z" fill="none"></path><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg> #}
63 |             <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sign-in-alt"
64 |                 class="tw-inline tw-h-6 tw-w-6 fa-sign-in-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
65 |               <path fill="currentColor" d="M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z"></path></svg>
66 |             </svg>
67 |             <span class="tw-ml-2">{{ item.title }}</span>
68 |           {% endset %}
69 |         {% elseif item.url.routeName == 'user.logout' %}
70 |           {% set title %}
71 |             {# <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="text-slate-600"><path d="M0 0h24v24H0z" fill="none"></path><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg> #}
72 |             <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sign-out-alt"
73 |                 class="tw-inline tw-h-6 tw-w-6 fa-sign-out-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
74 |               <path fill="currentColor" d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z"></path>
75 |             </svg>
76 |             <span class="tw-ml-2">{{ item.title }}</span>
77 |           {% endset %}
78 |         {% else %}
79 |           {% set title %}
80 |             {# <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="text-slate-600"><path d="M0 0h24v24H0z" fill="none"></path><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg> #}
81 |             <span class="tw-ml-2">{{ item.title }}</span>
82 |           {% endset %}
83 |         {% endif %}
84 |         {{ link(title, item.url, { 'class': classes_link }) }}
85 |       </li>
86 |     {% endfor %}
87 |   </ul>
88 | </div>


--------------------------------------------------------------------------------
/templates/navigation/menu--main.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display a menu.
 5 |  *
 6 |  * Available variables:
 7 |  * - menu_name: The machine name of the menu.
 8 |  * - items: A nested list of menu items. Each menu item contains:
 9 |  *   - attributes: HTML attributes for the menu item.
10 |  *   - below: The menu item child items.
11 |  *   - title: The menu link title.
12 |  *   - url: The menu link url, instance of \Drupal\Core\Url
13 |  *   - localized_options: Menu link localized options.
14 |  *   - is_expanded: TRUE if the link has visible children within the current
15 |  *     menu tree.
16 |  *   - is_collapsed: TRUE if the link has children within the current menu tree
17 |  *     that are not currently visible.
18 |  *   - in_active_trail: TRUE if the link is in the active trail.
19 |  */
20 | #}
21 | {% import _self as menus %}
22 | 
23 | {% for item in items %}
24 |   {% if not item.below %}
25 |     {{ menus.display_main(item) }}
26 |   {% else %}
27 |     {{ menus.display_submenu(item) }}
28 |   {% endif %}
29 | {% endfor %}
30 | 
31 | {% macro display_main(item) %}
32 |   {%
33 |     set classes_link = [
34 |     'md:tw-px-2 tw-py-2 tw-mt-2 tw-text-sm tw-font-semibold md:tw-mt-0 md:tw-ml-2',
35 |     'focus:tw-outline-none focus:tw-shadow-outline',
36 |   ]
37 |   %}
38 |   {{ link(item.title, item.url, { 'class': classes_link }) }}
39 | {% endmacro %}
40 | 
41 | {% macro display_submenu(item) %}
42 |   <div class="tw-relative" x-data="{ isOpen: false }">
43 |     <button
44 |       @click="isOpen = !isOpen"
45 |       @keydown.escape="isOpen = false"
46 |       class="tw-flex tw-flex-row tw-items-center tw-w-full md:tw-px-2 tw-py-2 tw-mt-2 tw-text-sm tw-font-semibold tw-text-left tw-bg-transparent md:tw-w-auto md:tw-inline md:tw-mt-0 md:tw-ml-4 focus:tw-outline-none focus:tw-shadow-outline"
47 |     >
48 |       <span>{{item.title }}</span>
49 |       <svg fill="currentColor" viewBox="0 0 20 20" :class="{'tw-rotate-180': isOpen, 'tw-rotate-0': !isOpen}" class="tw-inline tw-w-4 tw-h-4 tw-mt-1 tw-ml-1 tw-transition-transform tw-duration-300 md:tw--mt-1">
50 |         <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
51 |       </svg>
52 |     </button>
53 |     <ul x-cloak x-show="isOpen"
54 |         @click.away="isOpen = false"
55 |         x-transition:enter="tw-transition tw-ease-out tw-duration-300"
56 |         x-transition:enter-start="tw-opacity-0 tw-scale-90"
57 |         x-transition:enter-end="tw-opacity-100 tw-scale-100"
58 |         x-transition:leave="tw-transition tw-ease-in tw-duration-300"
59 |         x-transition:leave-start="tw-opacity-100 tw-scale-100"
60 |         x-transition:leave-end="tw-opacity-0 tw-scale-90"
61 |         class="tw-absolute tw-font-normal tw-bg-white dark:tw-bg-slate-800 tw-text-slate-700 dark:tw-text-white tw-rounded tw-shadow tw-overflow-hidden tw-w-48 tw-border tw-mt-2 tw-py-1 md:tw-right-0 tw-z-40">
62 |       <!--Sub menu items-->
63 |       {%
64 |         set classes_link = [
65 |           'tw-flex tw-items-center tw-px-3 tw-py-3 tw-bg-transparent hover:tw-bg-slate-200 dark:hover:tw-bg-slate-600',
66 |           'focus:tw-outline-none focus:tw-shadow-outline'
67 |       ]
68 |       %}
69 |       {% for item in item.below %}
70 |         <li>
71 |         {{ link(item.title, item.url, { 'class': classes_link }) }}
72 |         </li>
73 |       {% endfor %}
74 |     </il>
75 |   </div>
76 | {% endmacro %}
77 | 


--------------------------------------------------------------------------------
/templates/navigation/menu-local-tasks.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override to display primary and secondary local tasks.
 5 |  *
 6 |  * Available variables:
 7 |  * - primary: HTML list items representing primary tasks.
 8 |  * - secondary: HTML list items representing secondary tasks.
 9 |  *
10 |  * Each item in these variables (primary and secondary) can be individually
11 |  * themed in menu-local-task.html.twig.
12 |  */
13 | #}
14 | {% if primary %}
15 |   <h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
16 |   <ul class="tabs primary">{{ primary }}</ul>
17 | {% endif %}
18 | {% if secondary %}
19 |   <h2 class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
20 |   <ul class="tabs secondary">{{ secondary }}</ul>
21 | {% endif %}
22 | 


--------------------------------------------------------------------------------
/theme-settings.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | //use \Drupal\Core\Form\FormStateInterface;
  4 | use Drupal\Core\Url;
  5 | 
  6 | /**
  7 |  * Implements hook_form_system_theme_settings_alter().
  8 |  *
  9 |  * @param $form
 10 |  *   Nested array of form elements that comprise the form.
 11 |  * @param $form_state
 12 |  *   A keyed array containing the current state of the form.
 13 |  */
 14 | function twbase_form_system_theme_settings_alter(&$form, \Drupal\Core\Form\FormStateInterface &$form_state, $form_id = NULL) {
 15 | 	//Work-around for a core bug affecting admin themes. See issue #943212.
 16 | 	if (isset($form_id)) {
 17 | 		return;
 18 | 	}
 19 | 
 20 | 	// We are editing the $form in place, so we don't need to return anything.
 21 | 
 22 | 	// Create vertical tabs for options.
 23 | 	$form['twbase_settings'] = [
 24 | 		'#type' => 'vertical_tabs',
 25 | 		'#title' => t('TWBase Settings'),
 26 | 		'#weight' => 2,
 27 | 	];
 28 | 
 29 | 	/************************/
 30 | 	/*** General settings ***/
 31 | 	/************************/
 32 | 	$form['general'] = [
 33 | 		'#type' => 'details',
 34 | 		'#title' => t('General settings'),
 35 | 		'#group' => 'twbase_settings',
 36 | 	];
 37 | 
 38 | 	// Container size
 39 | 	$form['general']['content_size'] = [
 40 | 		'#type' => 'select',
 41 | 		'#title' => t('Container size'),
 42 | 		'#options' => [
 43 | 			'sm' => 'Small',
 44 | 			'md' => 'Medium',
 45 | 			'lg' => 'Large',
 46 | 			'xl' => 'Extra Large',
 47 | 			'full' => 'Full screen',
 48 | 		],
 49 | 		'#default_value' => theme_get_setting('content_size'),
 50 | 		'#description' => t('The maximum width of the content container.'),
 51 | 	];
 52 | 
 53 | 	// Breadcrump
 54 | 	$form['general']['breadcrumb_display'] = [
 55 | 		'#type' => 'checkbox',
 56 | 		'#title'         => t('Display breadcrumb'),
 57 | 		'#default_value' => theme_get_setting('breadcrumb_display'),
 58 | 		'#description' => t('If unchecked, the Breadcrumb region will not be displayed.'),
 59 | 	];
 60 | 
 61 | 
 62 | 	/************************/
 63 | 	/*** Header settings  ***/
 64 | 	/************************/
 65 | 	$form['header_options'] = [
 66 | 		'#type' => 'details',
 67 | 		'#title' => t('Header settings'),
 68 | 		'#group' => 'twbase_settings',
 69 | 	];
 70 | 
 71 | 	// Container size
 72 | 	$form['header_options']['header_size'] = [
 73 | 		'#type' => 'select',
 74 | 		'#title' => t('Header size'),
 75 | 		'#options' => [
 76 | 			'sm' => 'Small',
 77 | 			'md' => 'Medium',
 78 | 			'lg' => 'Large',
 79 | 			'xl' => 'Extra Large',
 80 | 			'full' => 'Full width',
 81 | 		],
 82 | 		'#default_value' => theme_get_setting('header_size'),
 83 | 		'#description' => t('The maximum width of the header container.'),
 84 | 	];
 85 | 
 86 | 	// Container size
 87 | 	$form['header_options']['navbar_size'] = [
 88 | 		'#type' => 'select',
 89 | 		'#title' => t('Navbar size'),
 90 | 		'#options' => [
 91 | 			'sm' => 'Small',
 92 | 			'md' => 'Medium',
 93 | 			'lg' => 'Large',
 94 | 			'xl' => 'Extra Large',
 95 | 			'full' => 'Full width',
 96 | 		],
 97 | 		'#default_value' => theme_get_setting('navbar_size'),
 98 | 		'#description' => t('The maximum width of the navbar container.'),
 99 | 	];
100 | 
101 | 	// Header fixed
102 | 	$form['header_options']['header_fixed'] = [
103 | 		'#title' => t('Fixed header'),
104 | 		'#type' => 'checkbox',
105 | 		'#default_value' => theme_get_setting('header_fixed'),
106 | 		'#description' => t('When checked, the header will be fixed at the top of the browser.'),
107 | 	];
108 | 
109 | 	$form['header_options']['show_progress'] = [
110 | 		'#title' => t('Show progress'),
111 | 		'#type' => 'checkbox',
112 | 		'#default_value' => theme_get_setting('show_progress'),
113 | 		'#description' => t('When checked, a progress bar will be displayed while scrolling into the page.'),
114 | 		'#states' => [
115 |       'invisible' => [
116 |         'input[name="header_fixed"]' => ['checked' => FALSE],
117 |       ],
118 |     ],
119 | 	];
120 | 
121 | 	/************************/
122 | 	/** Showcase settings  **/
123 | 	/************************/
124 | 	$form['showcase_options'] = [
125 | 		'#type' => 'details',
126 | 		'#title' => t('Showcase settings'),
127 | 		'#group' => 'twbase_settings',
128 | 	];
129 | 
130 | 
131 | 	$form['showcase_options']['default'] = [
132 | 		'#type' => 'details',
133 | 		'#title' => t('Default showcase'),
134 | 		'#open' => TRUE,
135 | 	];
136 | 
137 | 	$msg_infos = t('These options are common to all content types.') . '</br>';
138 | 	$moduleHandler = \Drupal::service('module_handler');
139 | 	if($moduleHandler->moduleExists('twbase_utils')) {
140 | 		$msg_infos .= t('You can override them for each content type via the <a href="@link">admin content type</a> list.',
141 | 			['@link' => Url::fromRoute('entity.node_type.collection')->toString()]
142 | 		);
143 | 	}
144 | 	else {
145 | 		$msg_infos .= t('Install <a target="_blank" href="@link">TWBase Theme Utilities module</a> to override them by content type.',
146 | 			['@link' => Url::fromUri('https://github.com/drupix/twbase_utils')->toString()]
147 | 		);
148 | 	}
149 | 
150 |   $form['showcase_options']['default']['default_infos'] = [
151 |     '#markup' => $msg_infos,
152 | 		'#prefix' => '<p>',
153 | 		'#suffix' => '</p>',
154 |   ];
155 | 
156 |   $form['showcase_options']['default']['default_showcase_enabled'] = [
157 |     '#type' => 'checkbox',
158 |     '#title' => t('Provide the default showcase'),
159 |     '#default_value' => theme_get_setting('default_showcase_enabled'),
160 |     '#description' => t('A default showcase with gradient background will be displayed on top of pages.'),
161 |   ];
162 | 
163 |   $form['showcase_options']['default']['options'] = [
164 | 		'#type' => 'container',
165 |     '#states' => [
166 |       'invisible' => [
167 |         'input[name="default_showcase_enabled"]' => ['checked' => FALSE],
168 |       ],
169 |     ],
170 |   ];
171 | 
172 |   // Title
173 |   $form['showcase_options']['default']['options']['default_showcase_display_title'] = [
174 |     '#type' => 'checkbox',
175 |     '#title' => t('Display title'),
176 |     '#default_value' => theme_get_setting('default_showcase_display_title'),
177 |     '#description' => t('Display the node title in the showcase.'),
178 |   ];
179 | 
180 | 	// Submitted: author name and published date
181 |   $form['showcase_options']['default']['options']['default_showcase_display_submitted'] = [
182 |     '#type' => 'checkbox',
183 |     '#title' => t('Author and date information'),
184 |     '#default_value' => theme_get_setting('default_showcase_display_submitted'),
185 |     '#description' => t('Display the node author and the publication date in the showcase.') . ' ' . t('This will automatically hide it from the node default display.') . '<br>' .
186 | 											'<strong>' . t('The content type display settings defined at <a href="@link">admin content type</a> will takes precedence over this option.' . '</strong>',
187 | 												['@link' => Url::fromRoute('entity.node_type.collection')->toString()]
188 | 											),
189 |   ];
190 | 
191 | 	// Image - field_image
192 |   $form['showcase_options']['default']['options']['default_showcase_display_image'] = [
193 |     '#type' => 'checkbox',
194 |     '#title' => t('Use image field'),
195 |     '#default_value' => theme_get_setting('default_showcase_display_image'),
196 |     '#description' => t('If an image field (field_image) exists in the content type it will be used as showcase image.'),
197 |   ];
198 | 
199 | 	// Image - Parallax
200 | /*
201 | 	$form['showcase_options']['showcase_parallax'] = [
202 | 		'#type' => 'checkbox',
203 | 		'#title' => t('Parralax effect'),
204 | 		'#default_value' => theme_get_setting('showcase_parallax'),
205 | 		'#description' => t('When checked, a CSS-powered parallax effect will be used for Showcase section.'),
206 | 	];
207 | */
208 | 
209 | 	// Swirl decoration
210 | 	$form['showcase_options']['default']['options']['default_showcase_deco'] = [
211 | 		'#type' => 'checkbox',
212 | 		'#title'         => t('Swirl decoration'),
213 | 		'#default_value' => theme_get_setting('default_showcase_deco'),
214 | 		'#description' => t('If checked a nice swirl is added under the showcase region on <strong>all pages (except the frontpage)</strong>.'),
215 | 	];
216 | 
217 | 	//
218 | 	// Frontpage options
219 | 	//
220 | 	$form['showcase_options']['default']['frontpage_options'] = [
221 | 		'#type' => 'fieldset',
222 | 		'#title' => t('Frontpage options'),
223 | 		'#collapsible' => TRUE,
224 | 		'#collapsed' => FALSE,
225 | 	];
226 | 
227 |   $form['showcase_options']['default']['frontpage_options']['default_showcase_front_enabled'] = [
228 |     '#type' => 'checkbox',
229 |     '#title' => t('Provide the default showcase'),
230 |     '#default_value' => theme_get_setting('default_showcase_front_enabled'),
231 |     '#description' => t('A default showcase with gradient background will be displayed on top of pages.'),
232 |   ];
233 | 
234 |   $form['showcase_options']['default']['frontpage_options']['options'] = [
235 | 		'#type' => 'container',
236 |     '#states' => [
237 |       'invisible' => [
238 |         'input[name="default_showcase_front_enabled"]' => ['checked' => FALSE],
239 |       ],
240 |     ],
241 |   ];
242 | 
243 | 	// Hero size
244 | 	$form['showcase_options']['default']['frontpage_options']['options']['showcase_hero_size'] = [
245 | 		'#type' => 'select',
246 | 		'#title' => t('Size of the showcase'),
247 | 		'#options' => [
248 | 			'default' => t('Default'),
249 | 			'fullscreen' => t('Fullscreen'),
250 | 		],
251 | 		'#default_value' => theme_get_setting('showcase_hero_size'),
252 | 	];
253 | 
254 | 	// Hero content position
255 | 	$form['showcase_options']['default']['frontpage_options']['options']['showcase_content_pos'] = [
256 | 		'#type' => 'select',
257 | 		'#title' => t('Position of the hero content'),
258 | 		'#options' => [
259 | 			'default' => t('Default'),
260 | 			'bottom' => t('Bottom left'),
261 | 		],
262 | 		'#default_value' => theme_get_setting('showcase_content_pos'),
263 | 	];
264 | 
265 | 	// Decorations - Front
266 | 	$form['showcase_options']['default']['frontpage_options']['options']['showcase_deco_front'] = [
267 | 		'#type' => 'checkbox',
268 | 		'#title'         => t('Swirl decoration'),
269 | 		'#default_value' => theme_get_setting('showcase_deco_front'),
270 | 		'#description' => t('If checked a nice swirl is added under the showcase region.'),
271 | 	];
272 | 
273 | 	//
274 | 	// Common options
275 | 	//
276 | 	$form['showcase_options']['default']['common_options'] = [
277 | 		'#type' => 'fieldset',
278 | 		'#title' => t('Common options'),
279 | 		'#collapsible' => TRUE,
280 | 		'#collapsed' => FALSE,
281 | 	];
282 | 
283 | 	// Image - Overlay
284 | 	$form['showcase_options']['default']['common_options']['showcase_add_overlay'] = [
285 | 		'#type' => 'checkbox',
286 | 		'#title' => t('Add an overlay over the underlying image.'),
287 | 		'#default_value' => theme_get_setting('showcase_add_overlay'),
288 | 		'#description' => t('When checked, add an overlay over the underlying image.'),
289 | 	];
290 | 
291 | 	// Image - Overlay type
292 | 	$form['showcase_options']['default']['common_options']['showcase_overlay_type'] = [
293 | 		'#type' => 'select',
294 | 		'#title' => t('Overlay type'),
295 | 		'#options' => [
296 | 			'overlay-dark-gradient' => t('Dark gradient'),
297 | 			'overlay-dark' => t('Dark solid'),
298 | 			'overlay-light-gradient' => t('Light gradient'),
299 | 			'overlay-light' => t('Light solid'),
300 | 		],
301 | 		'#default_value' => theme_get_setting('showcase_overlay_type'),
302 | 		'#description' => t('Displays a solid transparent overlay or transparent gradient which further darkens/lightens the underlying image.'),
303 | 		'#states' => [
304 | 			'enabled' => [
305 | 				':input[name="showcase_add_overlay"]' => ['checked' => TRUE],
306 | 			],
307 | 		],
308 | 	];
309 | 
310 | 	// @todo: Text style is not used for now
311 | 	// Text style
312 | 	// $form['showcase_options']['default']['common_options']['showcase_textstyle'] = [
313 | 	// 	'#type' => 'select',
314 | 	// 	'#title' => t('Text style'),
315 | 	// 	'#options' => ['text-light' => t('Text light'), 'text-dark' => t('Text dark')],
316 | 	// 	'#default_value' => theme_get_setting('showcase_textstyle'),
317 | 	// 	'#description' => t('Set if the text should be light or dark depending on the content.'),
318 | 	// ];
319 | 
320 | 	/************************/
321 | 	/* Pre Footer settings  */
322 | 	/************************/
323 | 	$form['pre_footer_options'] = [
324 | 		'#type' => 'details',
325 | 		'#title' => t('Pre Footer settings'),
326 | 		'#group' => 'twbase_settings',
327 | 	];
328 | 
329 | 	/* Container size */
330 | 	$form['pre_footer_options']['pre_footer_size'] = [
331 | 		'#type' => 'select',
332 | 		'#title' => t('Container size'),
333 | 		'#options' => [
334 | 			'sm' => 'Small',
335 | 			'md' => 'Medium',
336 | 			'lg' => 'Large',
337 | 			'xl' => 'Extra Large',
338 | 			'full' => 'Full screen',
339 | 		],
340 | 		'#default_value' => theme_get_setting('pre_footer_size'),
341 | 		'#description' => t('The maximum width of the pre footer container.'),
342 | 	];
343 | 
344 | 	/************************/
345 | 	/*** Footer settings  ***/
346 | 	/************************/
347 | 	$form['footer_options'] = [
348 | 		'#type' => 'details',
349 | 		'#title' => t('Footer settings'),
350 | 		'#group' => 'twbase_settings',
351 | 	];
352 | 
353 | 	/* Container size */
354 | 	$form['footer_options']['footer_size'] = [
355 | 		'#type' => 'select',
356 | 		'#title' => t('Container size'),
357 | 		'#options' => [
358 | 			'sm' => 'Small',
359 | 			'md' => 'Medium',
360 | 			'lg' => 'Large',
361 | 			'xl' => 'Extra Large',
362 | 			'full' => 'Full screen',
363 | 		],
364 | 		'#default_value' => theme_get_setting('footer_size'),
365 | 		'#description' => t('The maximum width of the footer container.'),
366 | 	];
367 | 
368 | 	// Sticky footer
369 | /*
370 | 	$form['footer_options']['sticky_footer'] = [
371 | 		'#type' => 'checkbox',
372 | 		'#title' => t('Sticky footer'),
373 | 		'#default_value' => theme_get_setting('sticky_footer'),
374 | 		'#description' => t('When checked, the footer will be sticky at the bottom of the browser.'),
375 | 	];
376 | */
377 | 
378 | 	/************************/
379 | 	/*** Maintenance page ***/
380 | 	/************************/
381 | 	$form['maintenance'] = [
382 | 		'#type' => 'details',
383 | 		'#title' => t('Maintenance page'),
384 | 		'#group' => 'twbase_settings',
385 | 	];
386 | 
387 | 	$form['maintenance']['email'] = [
388 | 		'#type' => 'fieldset',
389 | 		'#title' => t('Email settings'),
390 | 		'#collapsible' => TRUE,
391 | 		'#collapsed' => FALSE,
392 | 	];
393 | 
394 | 	$form['maintenance']['email']['email_maintenance'] = [
395 | 		'#type' => 'textfield',
396 | 		'#title' => t('Email for maintenance'),
397 | 		'#default_value' => theme_get_setting('email_maintenance'),
398 | 		'#size' => 50,
399 | 		'#maxlength' => 50,
400 | 	];
401 | 
402 | }
403 | 


--------------------------------------------------------------------------------
/twbase.info.yml:
--------------------------------------------------------------------------------
 1 | name: TWBase
 2 | type: theme
 3 | description: 'Starter theme built with Tailwind CSS.'
 4 | # core_version_requirement: ^8 || ^9
 5 | core_version_requirement: ^9.4 || ^10 || ^11
 6 | # base theme: classy
 7 | base theme: false
 8 | package: Tailwind CSS
 9 | screenshots: 'screenshots.jpg'
10 | logo: logo.png
11 | 
12 | libraries:
13 |   - twbase/global-styling
14 |   - twbase/custom-styling
15 |   - twbase/global-scripts
16 |   - twbase/darkmode-switcher
17 |   - twbase/alpinejs
18 | 
19 | ckeditor_stylesheets:
20 |   - css/styles.css
21 | ckeditor5-stylesheets:
22 |   - css/styles.css
23 | 
24 | regions:
25 |   header: Header
26 |   nav_branding: 'Navigation branding region'
27 |   nav_main: 'Main navigation region'
28 |   nav_additional: 'Additional navigation region (eg search form, social icons, etc)'
29 |   breadcrumb: Breadcrumbs
30 |   content_top: 'Content top'
31 |   content: 'Main content'
32 |   sidebar: 'Sidebar'
33 |   wide_content: 'Wide content'
34 |   pre_footer: 'Pre footer'
35 |   footer: Footer
36 | 


--------------------------------------------------------------------------------
/twbase.libraries.yml:
--------------------------------------------------------------------------------
 1 | global-styling:
 2 |   version: 1.x
 3 |   header: true
 4 |   css:
 5 |     theme:
 6 |       css/styles.css: {}
 7 | 
 8 | custom-styling:
 9 |   version: 1.x
10 |   header: true
11 |   css:
12 |     theme:
13 |       css/twbase-gradient.css: {}
14 | 
15 | global-scripts:
16 |   version: 1.x
17 |   js:
18 |     js/twbase.js: { defer: true }
19 |     js/app.js: {
20 |       attributes: { defer: true }
21 |     }
22 |   dependencies:
23 |     - core/jquery
24 |     - core/drupal
25 |     - core/once
26 | 
27 | ## Dark Mode toggle
28 | ## On page load or when changing themes, best to add in `head` to avoid FOUC
29 | ## FOUC: Flash Of Unstyled Content
30 | darkmode-switcher:
31 |   header: true
32 |   version: 1.x
33 |   js:
34 |     js/themeSwitcher.js: {
35 |       attributes: { async: true }
36 |     }
37 | 
38 | alpinejs:
39 |   header: true
40 |   remote: https://github.com/alpinejs/alpine
41 |   version: 3.12.0
42 |   license:
43 |     name: MIT
44 |     url: https://github.com/alpinejs/alpine/blob/main/LICENSE.md
45 |     gpl-compatible: true
46 |   js:
47 |     https://cdn.jsdelivr.net/npm/alpinejs@3.12.0/dist/cdn.min.js: {
48 |       type: external,
49 |       minified: true,
50 |       attributes: { defer: true }
51 |     }
52 | 


--------------------------------------------------------------------------------
/twbase.theme:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | /**
  4 |  * @file
  5 |  * TWBase theme file.
  6 |  */
  7 | 
  8 | use Drupal\Core\Form\FormStateInterface;
  9 | use Drupal\node\Entity\NodeType;
 10 | use Drupal\image\Entity\ImageStyle;
 11 | 
 12 | 
 13 | /**
 14 |  * Utility function.
 15 |  *
 16 |  * @return boolean
 17 |  *   TRUE if the twbase_utils module is installed,
 18 |  *   FALSE otherwise.
 19 |  */
 20 | function _twbase_twbase_utils_installed() {
 21 |   $moduleHandler = \Drupal::service('module_handler');
 22 |   // Check if TWBase Theme Utilities module is installed
 23 |   return $moduleHandler->moduleExists('twbase_utils');
 24 | }
 25 | 
 26 | /**
 27 |  * Implements hook_form_alter().
 28 |  *
 29 |  * Add submit button styles on Log In and Reset password forms
 30 |  */
 31 | function twbase_form_alter(&$form, FormStateInterface $form_state, $form_id) {
 32 |   if ($form['#id'] == 'user-login-form' || $form['#id'] == 'user-pass') {
 33 |     if (isset($form['actions']['submit'])) {
 34 |       $form['actions']['submit']['#attributes']['class'][] = 'button--primary';
 35 |     }
 36 |   }
 37 | }
 38 | 
 39 | /**
 40 |  * Implements hook_preprocess_HOOK().
 41 |  */
 42 | function twbase_preprocess_block__system_branding_block(&$variables) {
 43 |   if (\Drupal::service('theme.manager')->getActiveTheme()->getName() == 'twbase') {
 44 |     if ($variables['content']['site_logo']['#access'] && $variables['content']['site_logo']['#uri']) {
 45 |       $variables['site_logo_dark'] = str_replace('logo.png', 'logo-dark.png', $variables['content']['site_logo']['#uri']);
 46 |     }
 47 |   }
 48 | }
 49 | 
 50 | /**
 51 |  * Override or insert variables into the page templates.
 52 |  */
 53 | function twbase_preprocess_html(&$variables) {
 54 |   // Get the header position status
 55 |   $variables['header_fixed'] = theme_get_setting('header_fixed');
 56 |   // By default there is no showcase
 57 |   $variables['has_showcase'] = FALSE;
 58 | 
 59 |   if(\Drupal::service('path.matcher')->isFrontPage()) {
 60 |     // Get the default frontpage showcase enabled status
 61 |     $default_showcase_front_enabled = theme_get_setting('default_showcase_front_enabled');
 62 |     // Set the html variable indicating the frontpage showcase enabled status
 63 |     $variables['has_showcase'] = $default_showcase_front_enabled;
 64 |   }
 65 |   elseif(isset($variables['node_type'])) {
 66 |     // Are we viewing a node ?
 67 |     if($node = \Drupal::request()->attributes->get('node')) {
 68 |       // Get the default showcase enabled status
 69 |       $showcase_enabled = theme_get_setting('default_showcase_enabled');
 70 | 
 71 |       if(_twbase_twbase_utils_installed()) {
 72 |         // Load node type definition
 73 |         $type = NodeType::load($variables['node_type']);
 74 |         // Get the showcase enabled status per content type from twbase_utils module
 75 |         $showcase_enabled = $type->getThirdPartySetting('twbase_utils', 'showcase_enabled', $showcase_enabled);
 76 |       }
 77 |       // Set the html variable indicating the showcase enabled status
 78 |       $variables['has_showcase'] = $showcase_enabled;
 79 |     }
 80 |   }
 81 | }
 82 | 
 83 | /**
 84 |  * Implements hook_preprocess_HOOK().
 85 |  */
 86 | function twbase_preprocess_page_title(&$variables) {
 87 |   // Get the default showcase content size
 88 |   $variables['content_size'] = theme_get_setting('content_size');
 89 |   // By default the title is not hidden
 90 |   $variables['hide_title'] = FALSE;
 91 | 
 92 |   // Get the default showcase enabled status
 93 |   $showcase_enabled = theme_get_setting('default_showcase_enabled');
 94 |   // Get the default showcase display title status
 95 |   $display_title = theme_get_setting('default_showcase_display_title');
 96 | 
 97 |   if(\Drupal::service('path.matcher')->isFrontPage()) {
 98 |     // Hide the title if it is empty
 99 |     if(isset($variables['title']['#markup']) && empty($variables['title']['#markup'])) {
100 |       $variables['hide_title'] = TRUE;
101 |     }
102 |   }
103 |   elseif($node = \Drupal::request()->attributes->get('node')) {
104 |     if(_twbase_twbase_utils_installed()) {
105 |       // Load node type definition
106 |       $type = NodeType::load($node->bundle());
107 |       // Get the showcase enabled status per content type from twbase_utils module
108 |       $showcase_enabled = $type->getThirdPartySetting('twbase_utils', 'showcase_enabled', $showcase_enabled);
109 |       // Get the showcase display title status per content type from twbase_utils module
110 |       $display_title = $type->getThirdPartySetting('twbase_utils', 'showcase_display_title', $display_title);
111 |     }
112 | 
113 |     if($showcase_enabled and $display_title) {
114 |       // Say that Title is hidden
115 |       $variables['hide_title'] = TRUE;
116 |     }
117 |   }
118 | }
119 | 
120 | /**
121 |  * Override or insert variables into the page templates.
122 |  */
123 | function twbase_preprocess_page(&$variables) {
124 |   //
125 |   // Layout specific variables
126 |   //
127 | 
128 |   // Configuring header and navbar
129 |   $variables['header_fixed'] = theme_get_setting('header_fixed');
130 |   $variables['show_progress'] = theme_get_setting('show_progress');
131 |   $variables['header_size'] = theme_get_setting('header_size');
132 |   $variables['navbar_size'] = theme_get_setting('navbar_size');
133 |   // Configuring regions sizes
134 |   $variables['content_size'] = theme_get_setting('content_size');
135 |   $variables['wide_content_size'] = theme_get_setting('pre_footer_size');
136 |   $variables['pre_footer_size'] = theme_get_setting('pre_footer_size');
137 |   $variables['footer_size'] = theme_get_setting('footer_size');
138 | 
139 |   // Configuring the breadcrump
140 |   $variables['breadcrumb_display'] = theme_get_setting('breadcrumb_display');
141 | 
142 |   // Themes improperly check renderable arrays when determining visibility see
143 |   // issues https://www.drupal.org/project/drupal/issues/953034#comment-14214288
144 |   // Check if content_top is empty or not
145 |   $has_content_top = !empty(trim(strip_tags(\Drupal::service('renderer')->renderRoot($variables['page']['content_top']))));
146 |   $variables['has_content_top'] = $has_content_top;
147 | 
148 |   //
149 |   // Showcase specific variables
150 |   //
151 | 
152 |   // By default there is no showcase
153 |   $variables['has_showcase'] = FALSE;
154 | 
155 |   // Get the default showcase enabled status
156 |   $showcase_enabled = theme_get_setting('default_showcase_enabled');
157 | 
158 |   // Get the default showcase deco (swirl) enabled status
159 |   $showcase_deco = theme_get_setting('default_showcase_deco');
160 |   // Get the default showcase frontpage enabled status
161 |   $default_showcase_front_enabled = theme_get_setting('default_showcase_front_enabled');
162 | 
163 |   // $showcase_enabled = FALSE;
164 |   if(isset($variables['node']) && _twbase_twbase_utils_installed()) {
165 |     // Load node type definition
166 |     $type = NodeType::load($variables['node']->bundle());
167 |     // Get the showcase enabled status per content type from twbase_utils module
168 |     $showcase_enabled = $type->getThirdPartySetting('twbase_utils', 'showcase_enabled', $showcase_enabled);
169 |     // Get the showcase deco (swirl) enabled status per content type from twbase_utils module
170 |     $showcase_deco = $type->getThirdPartySetting('twbase_utils', 'showcase_deco', $showcase_deco);
171 |   }
172 | 
173 |   // Common classes for the Showcase
174 |   if($showcase_enabled || $default_showcase_front_enabled) {
175 |     // For simplicity we set all showcase theme settings even if
176 |     // the showcase is not enabled and they will not be used
177 |     $variables['showcase_add_deco'] = $showcase_deco;
178 |     $variables['showcase_size'] = theme_get_setting('showcase_hero_size');
179 |     $variables['showcase_content_pos'] = theme_get_setting('showcase_content_pos');
180 |     $variables['showcase_add_overlay'] = theme_get_setting('showcase_add_overlay');
181 |     $variables['showcase_overlay_type'] = theme_get_setting('showcase_overlay_type');
182 |     $variables['showcase_add_front_deco'] = theme_get_setting('showcase_deco_front');
183 |   }
184 | 
185 |   // First check if this is the frontpage...
186 |   if($variables['is_front']) {
187 |     // ... and only after check if the showcase for front is enabled
188 |     if($default_showcase_front_enabled) {
189 |       // Frontpage and default showcase enabled for front
190 |       $variables['has_showcase'] = $default_showcase_front_enabled;
191 |       // Default showcase front content
192 |       _twbase_get_default_front_showcase($variables);
193 |     }
194 |   }
195 |   // ... and only after check if the showcase is enabled for other pages
196 |   elseif($showcase_enabled) {
197 |     // Showcase enabled for pages
198 |     $variables['has_showcase'] = $showcase_enabled;
199 |     // Default showcase content
200 |     _twbase_get_default_showcase($variables);
201 |   }
202 | 
203 | }
204 | 
205 | 
206 | /**
207 |  * Implements hook_preprocess_HOOK().
208 |  */
209 | function twbase_preprocess_node(&$variables) {
210 |   // Leave from here if node is not set
211 |   // but this should not happens !
212 |   if (!isset($variables['node'])) return;
213 | 
214 |   // Leave from here this is not the full node
215 |   if($variables['view_mode'] != 'full') return;
216 | 
217 |   /** @var Drupal\node\Entity\Node $node */
218 |   $node = $variables['node'];
219 |   // Get node type definition
220 |   $type = NodeType::load($node->bundle());
221 | 
222 |   // Get the default showcase enabled status
223 |   $showcase_enabled = theme_get_setting('default_showcase_enabled');
224 |   if(_twbase_twbase_utils_installed()) {
225 |     // Get the showcase enabled status per content type from twbase_utils module
226 |     $showcase_enabled = $type->getThirdPartySetting('twbase_utils', 'showcase_enabled', $showcase_enabled);
227 |   }
228 | 
229 |   // Leave from here if the showcase is not enabled
230 |   if (!$showcase_enabled) return;
231 | 
232 |   // Get the default showcase display submitted
233 |   $display_submitted = theme_get_setting('default_showcase_display_submitted');
234 |   if(_twbase_twbase_utils_installed()) {
235 |     // Get the showcase display submitted status per content type from twbase_utils module
236 |     $display_submitted = $type->getThirdPartySetting('twbase_utils', 'showcase_display_submitted', $display_submitted);
237 |   }
238 | 
239 |   // Hide node Submitted informations (username, user picture, created date)
240 |   // as they are displayed in the showcase
241 |   if($display_submitted && $type->displaySubmitted()) {
242 |     $variables['display_submitted'] = FALSE;
243 |   }
244 | }
245 | 
246 | /**
247 |  * Implements hook_preprocess_field__field_name().
248 |  */
249 | function twbase_preprocess_field__field_tags(&$variables) {
250 |   $items = $variables['items'];
251 |   foreach ($items as $key => $item) {
252 |     $variables['items'][$key]['content']['#options']['attributes']['class'] = ['tag-link'];
253 |   }
254 | }
255 | 
256 | /**
257 |  * Provide an array with the default showcase content for the frontpage.
258 |  * NOTE: If you don't want a showcase, disabled it in the admin UI
259 |  *       of the TWBase Theme at /admin/appearance/settings/twbase
260 |  *
261 |  * @param $variables
262 |  *   An array of variables to pass to the theme template.
263 |  */
264 | function _twbase_get_default_front_showcase(&$variables) {
265 |   $variables['showcase'] = FALSE;
266 | 
267 |   // Leave from here if this is not the frontpage
268 |   if (!\Drupal::service('path.matcher')->isFrontPage()) return;
269 | 
270 |   // Get the default showcase enabled status
271 |   $default_showcase_front_enabled = theme_get_setting('default_showcase_front_enabled');
272 |   // Leave from here if the default frontpage showcase is not enabled
273 |   if (!$default_showcase_front_enabled) return;
274 | 
275 |   // Build an array of datas to return for the showcase
276 |   $variables['showcase'] = [
277 |     'title' => [],
278 |     'introduction' => [],
279 |     'button_text' => FALSE,
280 |     'button_href' => FALSE,
281 |     'button_new_windows' => FALSE,
282 |     'submitted' => [],
283 |     'image_path' => FALSE,
284 |   ];
285 | 
286 |   // Check if TWBase Theme Utilities module is installed
287 |   if(_twbase_twbase_utils_installed()) {
288 |     // Get the TWBase Theme Utilities module settings
289 |     $twbase_utils_config = \Drupal::config('twbase_utils.settings_showcase');
290 | 
291 |     // Get default showcase image.
292 |     $showcase_image_uri = '/themes/custom/twbase/img/home-showcase.jpg';
293 | 
294 |     // Load & get uri of the showcase image from config.
295 |     $showcase_image_fid = $twbase_utils_config->get('showcase_image.fid');
296 | 
297 |     if (!empty($showcase_image_fid[0])) {
298 |       $file = \Drupal\file\Entity\File::load($showcase_image_fid[0]);
299 |       $showcase_image_uri = $file->getFileUri();
300 |     }
301 |     $showcase_image_uri = \Drupal::service('file_url_generator')
302 |       ->generateAbsoluteString($showcase_image_uri);
303 | 
304 |     // Set showcase data
305 |     $variables['showcase']['title']['#markup'] = $twbase_utils_config->get('title');
306 |     $variables['showcase']['introduction']['#markup'] = $twbase_utils_config->get('body.value');
307 |     $variables['showcase']['image_path'] = \Drupal::service('file_url_generator')
308 |       ->transformRelative($showcase_image_uri);
309 |     $variables['showcase']['button_text'] = $twbase_utils_config->get('button.text');
310 |     $variables['showcase']['button_link'] = $twbase_utils_config->get('button.link');
311 |     $variables['showcase']['button_new_windows'] = $twbase_utils_config->get('button.target');
312 |   }
313 |   else {
314 |     // Set default showcase if TWBase Theme Utilities module is not installed
315 |     $variables['showcase']['title']['#markup'] = "Hi! I'm the default <strong class=\"text-warning\">hardcoded</strong> showcase!";
316 |     $variables['showcase']['introduction']['#markup'] =
317 |       '<p>Take a look around, this is the TWBase Theme default showcase.
318 |         To edit this content in a super <strong class="text-warning">uggly way</strong>,
319 |         open <code class="text-warning">twbase.theme</code> file in your favorites text editor and change it in the
320 |         appropriate function... mmhhhh not really funny 🤡...
321 |       </p>
322 |       <p class="tw-py-4">
323 |         Otherwise you can also install the <a class="text-success" href="https://github.com/drupix/twbase_utils" target="_blank">TWBase Theme Utilities</a>
324 |         module and simply edit this content in the admin UI!
325 |         <!-- Documentation, examples and support are available on the official -->
326 |         <!-- <a class="text-success" href="https://github.com/drupix/twbase_utils" target="_blank">TWBase Theme Utilities website</a>.-->
327 |         Happy building 👩🏾‍💻🦊🧑‍🎨
328 |       </p>';
329 |     $variables['showcase']['image_path'] = '/themes/custom/twbase/img/home-showcase.jpg';
330 |     $variables['showcase']['button_text'] = 'Get TWBase Theme Utilities module';
331 |     $variables['showcase']['button_link'] = 'https://github.com/drupix/twbase_utils';
332 |     $variables['showcase']['button_new_windows'] = TRUE;
333 |   }
334 | }
335 | 
336 | /**
337 |  * Provide an array with the default showcase content.
338 |  * NOTE: If you don't want a showcase, disabled it in the admin UI
339 |  *       of the TWBase Theme at /admin/appearance/settings/twbase
340 |  *
341 |  * @param $variables
342 |  *   An array of variables to pass to the theme template.
343 |  */
344 | function _twbase_get_default_showcase(&$variables) {
345 |   $variables['showcase'] = FALSE;
346 | 
347 |   // Leave from here if node is not set
348 |   if (!isset($variables['node'])) return;
349 | 
350 |   /** @var Drupal\node\Entity\Node $node */
351 |   $node = $variables['node'];
352 |   // Get node type definition
353 |   $type = NodeType::load($node->bundle());
354 | 
355 |   // Get the default showcase enabled status
356 |   $showcase_enabled = theme_get_setting('default_showcase_enabled');
357 | 
358 |   if(_twbase_twbase_utils_installed()) {
359 |     $showcase_enabled = $type->getThirdPartySetting('twbase_utils', 'showcase_enabled', $showcase_enabled);
360 |   }
361 | 
362 |   // Leave from here if the showcase is not enabled
363 |   if (!$showcase_enabled) return;
364 | 
365 |   // Build an array of datas to return for the showcase
366 |   $variables['showcase'] = [
367 |     'title' => FALSE,
368 |     'introduction' => FALSE,
369 |     'submitted' => [],
370 |     'image_path' => FALSE,
371 |   ];
372 | 
373 |   // Get the default showcase display title status
374 |   $display_title = theme_get_setting('default_showcase_display_title');
375 |   // Get the default showcase display submitted
376 |   $display_submitted = theme_get_setting('default_showcase_display_submitted');
377 |   // Get the default showcase display image status
378 |   $display_image = theme_get_setting('default_showcase_display_image');
379 | 
380 |   if(_twbase_twbase_utils_installed()) {
381 |     // Get the showcase display title status per content type from twbase_utils module
382 |     $display_title = $type->getThirdPartySetting('twbase_utils', 'showcase_display_title', $display_title);
383 |     // Get the showcase display submitted status per content type from twbase_utils module
384 |     $display_submitted = $type->getThirdPartySetting('twbase_utils', 'showcase_display_submitted', $display_submitted);
385 |     // Get the showcase display image status per content type from twbase_utils module
386 |     $display_image = $type->getThirdPartySetting('twbase_utils', 'showcase_display_image', $display_image);
387 |   }
388 | 
389 |   if($display_title) {
390 |     // Get the node title
391 |     $title = $node->label();
392 |     // Set the showcase title
393 |     $variables['showcase']['title'] = $title;
394 |   }
395 | 
396 |   // Add Submitted informations (username, user picture, created date)
397 |   if($display_submitted && $type->displaySubmitted()) {
398 |     // Get the username
399 |     $author = $node->getOwner();
400 |     // Set the showcase username
401 |     $variables['showcase']['submitted']['author']['name'] = $author->getDisplayName();
402 | 
403 |     // Get the user picture if available
404 |     $user_picture = $node->getOwner()->user_picture;
405 |     if($user_picture && isset($user_picture[0])) {
406 |       // Get origin image URI
407 |       $picture_uri = $user_picture->entity->getFileUri();
408 |       // Load image style "thumbnail" and build URL
409 |       $picture_url = ImageStyle::load('thumbnail')->buildUrl($picture_uri);
410 |       // Set the showcase user picture url
411 |       $variables['showcase']['submitted']['author']['picture'] = $picture_url;
412 |     }
413 | 
414 |     // Get the node created date
415 |     $node_created = $node->getCreatedTime();
416 |     // Format it with the default date format (medium)
417 |     $submitted = \Drupal::service('date.formatter')->format($node_created);
418 |     // Set the showcase node created date
419 |     $variables['showcase']['submitted']['created'] = $submitted;
420 |   }
421 | 
422 |   // // Add Introduction or Summary
423 |   // if(!isset($introduction[0])) {
424 |   //   // This is defined in showcase_front template, so remove it
425 |   //   if($node->bundle() == 'homepage') {
426 |   //     $introduction['#markup'] = "Block teaser: Regardez autour de vous, this is Bolt's default 2021 theme. To edit your site's content, go login with your username and password. Documentation, examples and support are available on the official Bolt website.";
427 |   //     $variables['showcase']['introduction'] = $introduction;
428 |   //   }
429 |   //   else {
430 |   //     // $entity_label = $node->type->entity->label();
431 |   //     // $empty_introduction = [
432 |   //     //   '#markup' => '<p>' . $entity_label . ': ' . 'CHANGE TO BODY SUMMARY</p',
433 |   //     // ];
434 |   //     // $introduction = $empty_introduction;
435 |   //     // $introduction = FALSE;
436 | 
437 |   //   }
438 |   // }
439 | 
440 |   // Add Image, Cover, Photos or Video
441 |   $image_path = FALSE;
442 |   if($display_image) {
443 |     if($node->hasField('field_image') && isset($node->get('field_image')[0])) {
444 |       // Get URI of the image file.
445 |       // $image_path = file_create_url($node->field_image->entity->getFileUri());
446 |       $uri = $node->field_image->entity->getFileUri();
447 |       $image_path = \Drupal::service('file_url_generator')->generateAbsoluteString($uri);
448 |       // With the URI, generate a url for non-image style background image.
449 |       // $image_path = file_url_transform_relative($image_path);
450 |       $image_path = \Drupal::service('file_url_generator')->transformRelative($image_path);
451 |     }
452 |   }
453 | 
454 |   $variables['showcase']['image_path'] = $image_path;
455 | 
456 | }
457 | 


--------------------------------------------------------------------------------