terryupton

<section x-data="{showModal: false, showLoading: false, html: ''}">

<button
  @click="html='loading...'; showLoading = true; showModal = !showModal; 
    fetch('{{ entry.url }}', {
      method: 'GET',
      headers: {
      'X-Requested-With': 'XMLHttpRequest',
      },
    })

terryupton

<button
  @click="showModal = !showModal | fetch('{{ entry.url() }}', {
    headers: {
      'Content-Type': 'application/json',
      'X-Requested-With': 'XmlHttpRequest'
    },
  }).then(res => res.text()).then(text => { html = text })"
  class="flex justify-center animate-grow-on-hover--small"
>

terryupton

<perch:related id="faqs" collection="FAQ's" label="FAQ's" sort="custom" >
<details class="expandingBlock // application-notes__item">
  <summary class="expandingBlock__title // application-notes__title"><perch:content id="question" type="text" label="Question" required="true" title="true" /></summary>
    <div class="expandingBlock__content">
      <perch:template path="content/blocks/content-primary.html" />
    </div>
</details>
</perch:related>

terryupton

CraftHub

A collection of public github repos that are build with #craftcms. I find these useful to review best practices, architechure, template and module setup nd expose as well as general project stucture and approaches.

https://github.com/CityofOakland/oaklandca.gov
https://github.com/nystudio107/devmode

terryupton

So I am looking to inline certain JS functions and pieces of code for some third parties (sliders, light-boxes, galleries etc). The reason for this is so I can keep specific and relevant javascript together with the twig code for that specific module/component. Rather than splitting it over a twig file and a separate js file(s).

A good example and use-case of this is Swiper (https://swiperjs.com/).

Below is a basic setup on how this is structured and my ideal approach. Files have been numbered for clarity and order over explanation.

Concerns and Qustions:

terryupton

I have the following in my .htaccess file
```
<IfModule mod_rewrite.c>
	Options +FollowSymlinks
	# Options +SymLinksIfOwnerMatch
	RewriteEngine On
	RewriteBase /

# ------------------------------------------------------------------------------
# | Redirect to top level /index.php to the root (www)                         |

terryupton

  <!-- main mini menu -->
  <div id="mini-menu" class="hidden absolute pin-t pin-x min-h-full bg-petrol p-4 mr-24 z-50" data-target="mini-menu.nav">
    <!-- back/close buttons -->
    <div class="mb-4" data-target="mini-menu.buttons">
      <a href="#" class="hidden no-underline text-petrol-light" data-action="click->mini-menu#navigate" data-target="mini-menu.backButton">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current h-6 w-6"><polygon points="3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9"/></svg>
      </a>
    </div>

    <!-- menu wrapper -->

terryupton

{% cache globally using key "navMega" for 1 year %}
<div class="relative hidden lg:block w-full z-50" data-controller="mega-menu">
  <div class="sitecontainer">
    <nav class="pb-4">
    {% for entry in navigation.level(1) %}
      {% if loop.first %}
        <ul class="list-reset flex justify-between">
        <li class="pr-6 // border-r border-white-25">
          <a href="{{ siteUrl() }}" class="hover:text-lime {% if craft.request.firstSegment == '' %}text-lime{% else %}text-white{% endif %}" data-action="mouseover->mega-menu#close">
            <div class="w-5 // h-5 // fill-current // mr-2">

terryupton

Craft\Exception
The transform “twitterLarge” cannot be found!

/home/vagrant/sites/Plowman Craven V4/plowmancraven.co.uk/craft/app/services/AssetTransformsService.php(588)

576         {
577             return null;
578         }
579         else if (is_string($transform))
580         {

terryupton

The transform “twitterLarge” cannot be found!

/home/vagrant/sites/Plowman Craven V4/plowmancraven.co.uk/craft/app/services/AssetTransformsService.php(588)

576         {
577             return null;
578         }
579         else if (is_string($transform))
580         {
581             $transformModel =  $this->getTransformByHandle($transform);