fix: remove line-clamp as now part of default for tailwind

.github/workflows/high_content_volume.yml

@@ -0,0 +1,50 @@
+name: High Content Volume
+on:
+  workflow_dispatch:
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: TurboRepo local server
+        uses: felixmosh/turborepo-gh-artifacts@v2
+        with:
+          server-token: 'local'
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Prepare
+        run: pnpm turbo:prep
+        env:
+          TURBO_API: 'http://127.0.0.1:9080'
+          TURBO_TOKEN: 'local'
+          TURBO_TEAM: 'local'
+
+      - name: 'Drupal: Start'
+        run: pnpm --filter "@custom/cms" start &
+
+      - name: 'Gatsby: Clean'
+        run: pnpm --filter "@custom/website" clean
+
+      - name: 'Drupal: Create content'
+        run: pnpm --filter "@custom/cms" drush php:script scripts/create-lots-of-content/run.php
+
+      - name: 'Gatsby: Full build'
+        run: pnpm --filter "@custom/website" build:gatsby
+
+      - name: 'Gatsby: Incremental build without new content'
+        run: pnpm --filter "@custom/website" build:gatsby
+
+      - name: 'Drupal: Create more content'
+        run: pnpm --filter "@custom/cms" drush php:script scripts/create-lots-of-content/create-100-pages.php
+
+      - name: 'Gatsby: Incremental build with new content'
+        run: pnpm --filter "@custom/website" build:gatsby

.prettierignore

@@ -2,3 +2,4 @@ _local
 apps
 packages
 tests
+.turbo

INIT.md

@@ -97,7 +97,7 @@ Update the auth key for Gatsby user.
 ```ts
 const authKey = randomString(32);
 replace(
-  'apps/website/gatsby-config.js',
+  'apps/website/gatsby-config.mjs',
   "auth_key: 'cfdb0555111c0f8924cecab028b53474'",
   `auth_key: '${authKey}'`,
 );

apps/cms/scripts/create-lots-of-content/create-100-pages.php

@@ -0,0 +1,99 @@
+<?php
+
+use Drupal\Component\Utility\Random;
+use Drupal\media\Entity\Media;
+use Drupal\node\Entity\Node;
+
+
+/** @var \Drupal\file\FileRepositoryInterface $fileRepository */
+$fileRepository = \Drupal::service('file.repository');
+$random = new Random();
+
+$imageData = file_get_contents(__DIR__ . '/tiny.png');
+
+for ($pageIndex = 1; $pageIndex <= 100; $pageIndex++) {
+
+  // Prepare images.
+  /** @var \Drupal\file\FileInterface[] $images */
+  $images = [];
+  for ($i = 1; $i <= 4; $i++) {
+    $images[$i] = $fileRepository->writeData($imageData, "public://" . $random->machineName(32) . ".png");
+  }
+
+  // Prepare image media entities.
+  /** @var \Drupal\media\MediaInterface[] $media */
+  $media = [];
+  foreach ($images as $i => $image) {
+    $media[$i] = Media::create([
+      'name' => $random->name(),
+      'bundle' => 'image',
+      'uid' => 1,
+      'status' => TRUE,
+      'field_media_image' => [
+        'target_id' => $image->id(),
+        'alt' => 'Alt text',
+        'title' => 'Title text',
+      ],
+    ]);
+    $media[$i]->save();
+  }
+  $mediaIds = array_map(fn ($media) => $media->id(), $media);
+
+  // Create a page.
+  $title = $random->name();
+  $node = Node::create([
+    'type' => 'page',
+    'status' => TRUE,
+    'uid' => 1,
+    'title' => $title,
+    'moderation_state' => 'published',
+    'body' => [
+      'value' => pageBody($mediaIds, FALSE),
+      'format' => 'gutenberg',
+      'summary' => '',
+    ],
+  ]);
+  $node->addTranslation('de', [
+    'title' => $title . ' DE',
+    'uid' => 1,
+    'body' => [
+      'value' => pageBody($mediaIds, TRUE),
+      'format' => 'gutenberg',
+      'summary' => '',
+    ],
+  ]);
+  $node->save();
+}
+
+function pageBody(array $mediaIds, bool $isGerman): string {
+  $suffix = $isGerman ? ' DE' : '';
+  return <<<EOT
+<!-- wp:custom/hero {"mediaEntityIds":["$mediaIds[1]"],"headline":"Stub page$suffix","lead":"Lead text$suffix"} /-->
+
+<!-- wp:custom/content -->
+<!-- wp:paragraph -->
+<p>Some content$suffix</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:drupalmedia/drupal-media-entity {"mediaEntityIds":["$mediaIds[2]"],"caption":"Caption$suffix"} /-->
+
+<!-- wp:paragraph -->
+<p>Some content$suffix</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:drupalmedia/drupal-media-entity {"mediaEntityIds":["$mediaIds[3]"],"caption":"Caption$suffix"} /-->
+
+<!-- wp:paragraph -->
+<p><meta charset="utf-8">Some content$suffix</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:drupalmedia/drupal-media-entity {"mediaEntityIds":["$mediaIds[4]"],"caption":"Caption$suffix"} /-->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
+<!-- /wp:custom/content -->
+EOT;
+}
+
+

apps/cms/scripts/create-lots-of-content/run.php

@@ -0,0 +1,21 @@
+<?php
+
+$amount = 200;
+$total = $amount * 100;
+
+echo "Gonna create $total pages.\n";
+
+for ($i = 1; $i <= $amount; $i++) {
+
+  // The more pages we create in a single run, the slower Drupal works and the
+  // more memory is eaten by PHP. So we create pages in batches.
+  exec('../vendor/bin/drush php:script ' . __DIR__ . '/create-100-pages.php');
+
+  if ($i !== 1) {
+    echo "\r";
+  }
+  $percent = number_format(100 * $i / $amount, 2);
+  echo "Progress $percent%";
+}
+
+echo "\nDone!\n";

apps/decap/data/page/decap-example.yml

@@ -1,6 +1,6 @@
 de:
   path: /de/decap-example
-  title: Decap Beispiel
+  title: Decap Beispiel!
   teaserImage: /apps/decap/media/landscape.jpg
   hero:
     headline: Decap Beispiel
@@ -12,7 +12,7 @@ de:
 en:
   id: BTPzQnq79fWNOF1dFmESP
   path: /en/decap-example
-  title: Decap example
+  title: Decap example!
   teaserImage: /apps/decap/media/landscape.jpg
   hero:
     headline: Decap Example

apps/decap/src/collections/translatables.ts

@@ -58,15 +58,17 @@ export function getTranslatables(
         Object.keys(data).forEach((langcode) => {
           Object.keys(data[langcode]).forEach((key) => {
             Object.keys(data).forEach((locale) => {
-              translations.push([
-                `${key}:${locale}`,
-                {
-                  __typename: 'DecapTranslatableString',
-                  source: translationSources[key],
-                  language: locale as Locale,
-                  translation: data[locale][key],
-                },
-              ]);
+              if (translationSources[key]) {
+                translations.push([
+                  `${key}:${locale}`,
+                  {
+                    __typename: 'DecapTranslatableString',
+                    source: translationSources[key],
+                    language: locale as Locale,
+                    translation: data[locale][key],
+                  },
+                ]);
+              }
             });
           });
         });

apps/decap/turbo.json

@@ -5,12 +5,12 @@
     "prep:vite": {
       "dependsOn": ["^prep"],
       "inputs": ["src/**", "vite.config.js"],
-      "outputs": ["build/**"]
+      "outputs": ["dist/**"]
     },
     "prep:scripts": {
       "dependsOn": ["^prep"],
       "inputs": ["src/**", "tsup.config.js"],
-      "outputs": ["dist/**"]
+      "outputs": ["build/**"]
     },
     "prep": {
       "dependsOn": ["prep:vite", "prep:scripts"]

package.json

@@ -10,9 +10,10 @@
   "scripts": {
     "postinstall": "husky install || true",
     "commit": "git-cz",
-    "test:format": "pnpm test:format:root && pnpm test:format:workspaces",
-    "test:format:root": "pnpm prettier --check '**/*.{js,cjs,mjs,ts,jsx,tsx,gql,graphql,graphqls,md,mdx,json}' --ignore-path='./.prettierignore'",
-    "test:format:workspaces": "pnpm --workspace-concurrency=1 -r exec prettier --check '**/*.{js,cjs,mjs,ts,jsx,tsx,gql,graphql,graphqls,md,mdx,json}' --ignore-path='./.gitignore'",
+    "test:format": "pnpm test:format:root --check && pnpm test:format:workspaces --check",
+    "test:format:fix": "pnpm test:format:root --write && pnpm test:format:workspaces --write",
+    "test:format:root": "pnpm prettier '**/*.{js,cjs,mjs,ts,jsx,tsx,gql,graphql,graphqls,md,mdx,json}' --ignore-path='./.prettierignore'",
+    "test:format:workspaces": "pnpm --workspace-concurrency=1 -r exec prettier '**/*.{js,cjs,mjs,ts,jsx,tsx,gql,graphql,graphqls,md,mdx,json}' --ignore-path='./.gitignore'",
     "turbo:local": "if [ -z $CI ]; then echo $(date)$RANDOM > apps/cms/turbo-seed.txt; fi",
     "turbo:test": "pnpm turbo:local && turbo test:unit --no-daemon --go-fallback --output-logs=new-only && turbo test:integration --no-daemon --go-fallback --output-logs=new-only --concurrency=1",
     "turbo:test:quick": "pnpm turbo:local && turbo test:unit --no-daemon --go-fallback --output-logs=new-only",

packages/schema/src/operations/Frame.gql

@@ -1,4 +1,12 @@
 query Frame {
+  websiteSettings {
+    homePage {
+      translations {
+        locale
+        path
+      }
+    }
+  }
   mainNavigation: mainNavigations {
     ...Navigation
   }

packages/ui/package.json

@@ -76,7 +76,6 @@
     "@swc/core": "^1.3.102",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.10",
     "@testing-library/react": "^14.1.2",
     "@types/hast": "^2.3.9",

packages/ui/src/components/Client/DesktopMenu.tsx

@@ -1,7 +1,10 @@
 'use client';
-import { Popover, Transition } from '@headlessui/react';
+import { Disclosure, Popover, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
-import React, { Fragment, PropsWithChildren } from 'react';
+import clsx from 'clsx';
+import React, { PropsWithChildren } from 'react';
+
+import { avoidFocusOnClick } from '../../utils/avoidFocusOnClick';
 
 export function DesktopMenu({ children }: PropsWithChildren<{}>) {
   return (
@@ -17,27 +20,71 @@ export function DesktopMenuDropDown({
 }: PropsWithChildren<{ title: string }>) {
   return (
     <Popover className="relative">
-      <Popover.Button className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
-        {title}
-        <ChevronDownIcon
-          className="h-5 w-5 flex-none text-gray-400"
-          aria-hidden="true"
-        />
-      </Popover.Button>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-200"
-        enterFrom="opacity-0 translate-y-1"
-        enterTo="opacity-100 translate-y-0"
-        leave="transition ease-in duration-150"
-        leaveFrom="opacity-100 translate-y-0"
-        leaveTo="opacity-0 translate-y-1"
-      >
-        <Popover.Panel className="absolute -left-8 top-full z-10 mt-3 w-56 rounded-xl bg-white p-2 shadow-lg ring-1 ring-gray-900/5">
-          {children}
-        </Popover.Panel>
-      </Transition>
+      {({ open }) => (
+        <React.Fragment>
+          <Popover.Button
+            className={clsx(
+              'flex items-center text-base font-medium ml-8 hover:text-blue-600',
+              open ? 'text-blue-600' : 'text-gray-600',
+            )}
+            onClick={() => avoidFocusOnClick()}
+          >
+            {title}
+            <ChevronDownIcon
+              className={clsx(
+                'h-5 w-5 flex-none text-blue-600',
+                open && 'rotate-180',
+              )}
+              aria-hidden="true"
+            />
+          </Popover.Button>
+          <Transition
+            as={React.Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel
+              static
+              className="absolute left-8 top-full z-10 mt-3 w-56 rounded bg-white shadow-md ring-1 ring-gray-100"
+            >
+              {children}
+            </Popover.Panel>
+          </Transition>
+        </React.Fragment>
+      )}
     </Popover>
   );
 }
+
+export function DesktopMenuDropdownDisclosure({
+  title,
+  children,
+}: PropsWithChildren<{ title: string }>) {
+  return (
+    <Disclosure as="div" className="">
+      {({ open }) => (
+        <div className={clsx('m-1.5 rounded', open && 'bg-gray-100')}>
+          <Disclosure.Button
+            className={clsx(
+              'flex w-full items-center justify-between px-2 py-1 text-sm leading-[1.25rem] hover:text-blue-600',
+              open ? 'text-blue-600 font-medium' : 'text-gray-500',
+            )}
+          >
+            {title}
+            <ChevronDownIcon
+              className={clsx('h-5 w-5 flex-none text-blue-600', {
+                'rotate-180': open,
+              })}
+              aria-hidden="true"
+            />
+          </Disclosure.Button>
+          <Disclosure.Panel className="">{children}</Disclosure.Panel>
+        </div>
+      )}
+    </Disclosure>
+  );
+}