@iqual/nuxt-icms 1.0.2

package/app.config.ts

@@ -0,0 +1 @@
+export default defineAppConfig({})

package/app.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="bk-main-canvas relative">
+    <ClientOnly>
+      <div
+        v-if="drupalUser.accessToolbar && !isEditing"
+        class="hidden border-b border-b-gray-100 bg-white lg:block"
+      >
+        <VuepalAdminToolbar :key="language" />
+        <div class="flex">
+          <div class="mx-auto w-auto bg-white py-8 xl:min-w-[1174px]">
+            <VuepalLocalTasks />
+          </div>
+        </div>
+      </div>
+    </ClientOnly>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const drupalUser = useDrupalUser()
+const language = useCurrentLanguage()
+
+const isEditing = computed(
+  () =>
+    !!(route.query.blokkliEditing || route.query.blokkliPreview) &&
+    drupalUser.value.accessToolbar,
+)
+
+useHead({
+  htmlAttrs: {
+    lang: language.value,
+  },
+})
+</script>
+
+<style>
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.1s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(2px)
+}
+</style>

package/assets/css/backend.css

@@ -0,0 +1,82 @@
+.item-list.views-liip-links {
+  ul {
+    list-style-type: none !important;
+    margin: 0 !important;
+    display: flex;
+  }
+
+  li {
+    text-transform: uppercase;
+    list-style-type: none !important;
+    margin: 0 !important;
+    a,
+    div {
+      display: block;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 14px;
+      width: 2em;
+      height: 2em;
+      line-height: 2em;
+      border-radius: 100%;
+      text-align: center;
+      border: 1px solid transparent;
+
+      &.is-missing {
+        color: #aaa;
+        font-weight: 500;
+      }
+      &.is-source {
+        border-color: #a7b3ce;
+      }
+    }
+    a {
+      &:hover {
+        background: #dbe1ea;
+      }
+    }
+  }
+}
+
+.liip-views-status {
+  width: 0.75em;
+  height: 0.75em;
+  border-radius: 100%;
+  background: var(--gin-color-danger);
+  position: relative;
+  display: inline-block;
+  margin-right: 0.25em;
+  &.is-published {
+    background: var(--gin-color-green);
+  }
+}
+
+table.permissions thead tr {
+  position: sticky;
+  top: 8rem;
+}
+
+.media-library-item .media-library-item__preview .field img {
+  object-fit: contain;
+}
+
+/* Fix display issue in gin with media library see SV-128 */
+
+.media-library-wrapper .views-display-link::before {
+  display: none !important;
+}
+
+.media-library-wrapper .media-library-views-form {
+  flex-wrap: wrap;
+  flex-direction: unset;
+}
+
+#graphql-explorer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  bottom: 0;
+  z-index: 20000;
+}

package/assets/css/ckeditor.css

@@ -0,0 +1,15 @@
+@import './components/ck-content.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.ck-content {
+  @apply font-sans;
+  & > ul {
+    @apply m-0;
+    & > li {
+      @apply list-disc;
+    }
+  }
+}

package/assets/css/components/carousel.css

@@ -0,0 +1,91 @@
+@layer components {
+  .carousel {
+    .carousel__viewport {
+      @apply mb-12 overflow-y-auto md:mb-24;
+    }
+
+    .carousel__track {
+      @apply md:items-baseline;
+    }
+
+    .carousel__slide {
+      @apply items-start md:items-center;
+    }
+
+    /**
+     * Most classes in here come directly from vue3-carousel
+     */
+    .carousel__slide__inner {
+      @apply relative aspect-[800/350] w-full;
+      @apply mx-[10px]; /* Half of 20px, which would be mx-5. If we use a gap-5 instead, vue3-carousel starts to misalign stuff. Badly. */
+
+      .carousel__slide__image {
+        /* 58.33% and 41.66% are 7/12th and 5/12th respectively. Doing this with grid would've been even messier. */
+        @apply aspect-[800/600] md:w-[58.33%];
+        @apply z-20 md:absolute md:right-[41.66%] md:origin-bottom md:scale-100;
+      }
+
+      .carousel__slide__content {
+        @apply text-left md:relative md:ml-[58.33%] md:w-[41.6666667%] md:opacity-100;
+        @apply break-words pb-8 pl-3 pr-[50px] pt-3 md:py-8 md:pl-6 md:pr-6 lg:pl-[100px];
+      }
+    }
+
+    .carousel__slide--sliding {
+      .carousel__slide__image,
+      .carousel__slide__content {
+        @apply duration-[750ms] transition-all ease-in-out;
+      }
+    }
+
+    .carousel__slide--next {
+      .carousel__slide__image {
+        @apply md:right-[41.6666667%] md:origin-bottom-left md:scale-75;
+      }
+
+      .carousel__slide__content {
+        @apply opacity-0;
+      }
+    }
+
+    .carousel__slide--prev,
+    .carousel__slide:has(~ .carousel__slide--prev) {
+      .carousel__slide__image {
+        @apply md:right-0 md:origin-bottom-right md:scale-75;
+      }
+
+      .carousel__slide__content {
+        @apply opacity-0;
+      }
+    }
+
+    .carousel__slide--next,
+    .carousel__slide--prev {
+      @apply cursor-pointer transition-all duration-250 ease-in-out;
+    }
+
+    .carousel__slide--prev:hover,
+    .carousel__slide--next:hover {
+      filter: brightness(1.2);
+    }
+
+    .carousel__navigation-container--outer {
+      @apply duration-[750ms] pointer-events-none absolute top-[var(--carousel-nav-top-position)] hidden w-full transition-all ease-in-out md:block;
+    }
+
+    .carousel__navigation-container {
+      @apply /* That value is equal to the slide with on md and up */ w-[66.6667%] px-[10px];
+      @apply mx-auto flex;
+    }
+
+    .carousel__navigation-container--inner {
+      @apply w-[58.33%] py-8 pr-8;
+      @apply flex justify-end gap-5;
+    }
+
+    .carousel__prev,
+    .carousel__next {
+      @apply pointer-events-auto relative left-[inherit] right-[inherit] m-0 h-6 w-6 rounded text-primary-500 backdrop-blur-[20px];
+    }
+  }
+}

package/assets/css/components/ck-content.css

@@ -0,0 +1,65 @@
+@import './link.css';
+@tailwind components;
+
+@layer components {
+  .ck-content {
+    @apply break-words;
+
+    /* &:not(.is-small) {
+      @apply font-regular md:text-lg xl:text-xl;
+    }
+
+    h2 {
+      @apply text-3xl text-primary-500 lg:text-4xl;
+    }
+
+    h3 {
+      @apply text-2xl lg:text-3xl;
+    }
+
+    h4 {
+      @apply text-xl lg:text-2xl;
+    }
+
+    h5 {
+      @apply text-lg font-bold lg:text-xl;
+    }
+
+    p {
+      @apply not-last:mb-5 not-first:mt-5 xl:not-last:mb-6 xl:not-first:mt-6;
+    }
+
+    a {
+      @apply text-primary-300 underline;
+    }
+
+    strong {
+      @apply text-primary-300;
+    } */
+
+    ol,
+    ul {
+      @apply my-4;
+      li {
+        @apply ml-6;
+      }
+    }
+
+    ol {
+      @apply list-decimal;
+    }
+    ul {
+      @apply list-disc;
+    }
+  }
+
+  /* List margin fix for Box paragraph */
+  .box-paragraph .ck-content {
+    ol,
+    ul {
+      li {
+        @apply ml-0 pb-0 pl-0;
+      }
+    }
+  }
+}

package/assets/css/components/container.css

@@ -0,0 +1,17 @@
+@layer components {
+  .container {
+    @apply w-full px-4;
+
+    @screen md {
+      @apply px-8;
+    }
+
+    @screen lg {
+      @apply px-12;
+    }
+
+    @screen xl {
+      @apply mx-auto w-[1380px];
+    }
+  }
+}

package/assets/css/components/dialog.css

@@ -0,0 +1,9 @@
+@tailwind components;
+
+@layer components {
+  .dialog-content {
+    > button.absolute.right-4.top-4.rounded-sm {
+      @apply hidden;
+    }
+  }
+}

package/assets/css/components/grid-container.css

@@ -0,0 +1,296 @@
+@layer components {
+  :root {
+    --container-max-width: 1380px;
+    --container-max-width-bk: calc(1380px * 0.8); /* 80vw coming from blokkli */
+
+    --container-gutter-width-2xs: theme(spacing.4);
+    --container-gutter-width-xs: theme(spacing.4);
+    --container-gutter-width-sm: theme(spacing.4);
+    --container-gutter-width-md: theme(spacing.6);
+    --container-gutter-width-lg: theme(spacing.6);
+    --container-gutter-width-xl: theme(spacing.6);
+
+    --container-x-margin-2xs: theme(spacing.4);
+    --container-x-margin-xs: theme(spacing.4);
+    --container-x-margin-sm: theme(spacing.4);
+    --container-x-margin-md: theme(spacing.8);
+    --container-x-margin-lg: theme(spacing.12);
+    --container-x-margin-xl: auto;
+
+    --container-columns-2xs: 1fr 1fr 1fr 1fr; /* 4 */
+    --container-columns-xs: 1fr 1fr 1fr 1fr; /* 4 */
+    --container-columns-sm: 1fr 1fr 1fr 1fr 1fr 1fr; /* 6 */
+    --container-columns-md: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 8 */
+    --container-columns-lg: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 12 */
+
+    --container-columns-width-xl: calc(
+      calc(
+          var(--container-max-width) -
+            calc(11 * var(--container-gutter-width-xl))
+        ) / 12
+    );
+
+    --container-columns-width-xl-bk: calc(
+      calc(
+          var(--container-max-width-bk) -
+            calc(11 * var(--container-gutter-width-xl))
+        ) / 12
+    );
+
+    /* Repeat doesn't work with grid-template, hence we simply repeat by copy-pasting. */
+    --container-columns-xl: var(--container-columns-width-xl)
+      var(--container-columns-width-xl) var(--container-columns-width-xl)
+      var(--container-columns-width-xl) var(--container-columns-width-xl)
+      var(--container-columns-width-xl) var(--container-columns-width-xl)
+      var(--container-columns-width-xl) var(--container-columns-width-xl)
+      var(--container-columns-width-xl) var(--container-columns-width-xl)
+      var(--container-columns-width-xl); /* 12 */
+
+    /* Repeat doesn't work with grid-template, hence we simply repeat by copy-pasting. */
+    --container-columns-xl-bk: var(--container-columns-width-xl-bk)
+      var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
+      var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
+      var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
+      var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
+      var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
+      var(--container-columns-width-xl-bk); /* 12 */
+
+    --container-breakout-border-column-size-2xs: calc(
+      var(--container-x-margin-2xs) - var(--container-gutter-width-2xs)
+    );
+    --container-breakout-border-column-size-xs: calc(
+      var(--container-x-margin-xs) - var(--container-gutter-width-xs)
+    );
+    --container-breakout-border-column-size-sm: calc(
+      var(--container-x-margin-sm) - var(--container-gutter-width-sm)
+    );
+    --container-breakout-border-column-size-md: calc(
+      var(--container-x-margin-md) - var(--container-gutter-width-md)
+    );
+    --container-breakout-border-column-size-lg: calc(
+      var(--container-x-margin-lg) - var(--container-gutter-width-lg)
+    );
+  }
+
+  .grid-container {
+    @apply grid;
+    @apply grid-cols-[var(--container-columns-2xs)] gap-[var(--container-gutter-width-2xs)];
+    &:not(.is-small) {
+      @apply px-[var(--container-x-margin-2xs)];
+    }
+
+    @screen xs {
+      @apply grid-cols-[var(--container-columns-xs)] gap-[var(--container-gutter-width-xs)];
+      &:not(.is-small) {
+        @apply px-[var(--container-x-margin-xs)];
+      }
+    }
+
+    @screen sm {
+      @apply grid-cols-[var(--container-columns-sm)] gap-[var(--container-gutter-width-sm)];
+      &:not(.is-small) {
+        @apply px-[var(--container-x-margin-sm)];
+      }
+    }
+
+    @screen md {
+      @apply grid-cols-[var(--container-columns-md)] gap-[var(--container-gutter-width-md)];
+      &:not(.is-small) {
+        @apply px-[var(--container-x-margin-md)];
+      }
+    }
+
+    @screen lg {
+      &:not(.is-small) {
+        @apply grid-cols-[var(--container-columns-lg)] gap-[var(--container-gutter-width-lg)] px-[var(--container-x-margin-lg)];
+      }
+    }
+
+    @screen xl {
+      &:not(.is-small) {
+        @apply px-0;
+        @apply grid-cols-[var(--container-columns-xl)] gap-[var(--container-gutter-width-xl)];
+        @apply mx-auto w-[var(--container-max-width)];
+
+        .bk-main-canvas & {
+          @apply grid-cols-[var(--container-columns-xl-bk)];
+          @apply mx-auto w-[var(--container-max-width-bk)];
+        }
+      }
+    }
+
+    &.breakout-left,
+    &.breakout-right {
+      @apply px-0;
+      @apply mx-0 w-auto;
+    }
+
+    &.breakout-left {
+      & > :nth-child(1) {
+        grid-area: a;
+      }
+
+      & > :nth-child(2) {
+        grid-area: b;
+      }
+
+      @apply max-w-full;
+
+      grid-template:
+        'a a a a a a' auto
+        '. b b b b .' auto
+        / var(--container-breakout-border-column-size-2xs) var(
+          --container-columns-2xs
+        )
+        var(--container-breakout-border-column-size-2xs);
+
+      @screen xs {
+        grid-template:
+          'a a a a a a' auto
+          '. b b b b .' auto
+          / var(--container-breakout-border-column-size-xs) var(
+            --container-columns-xs
+          )
+          var(--container-breakout-border-column-size-xs);
+      }
+
+      @screen sm {
+        grid-template:
+          'a a a a b b b .' auto
+          / var(--container-breakout-border-column-size-sm) var(
+            --container-columns-sm
+          )
+          var(--container-breakout-border-column-size-sm);
+      }
+
+      @screen md {
+        grid-template:
+          'a a a a a b b b b .' auto
+          / var(--container-breakout-border-column-size-md) var(
+            --container-columns-md
+          )
+          var(--container-breakout-border-column-size-md);
+      }
+
+      @screen lg {
+        grid-template:
+          'a a a a a a a a b b b b b .' auto
+          / var(--container-breakout-border-column-size-lg) var(
+            --container-columns-lg
+          )
+          var(--container-breakout-border-column-size-lg);
+      }
+
+      @screen xl {
+        @apply w-full;
+        grid-template:
+          'a a a a a a a a b b b b b .' auto
+          / 1fr var(--container-columns-xl) 1fr;
+
+        .bk-main-canvas & {
+          @apply w-full;
+          grid-template:
+            'a a a a a a a a b b b b b .' auto
+            / 1fr var(--container-columns-xl-bk) 1fr;
+        }
+      }
+    }
+
+    &.breakout-right {
+      & > :nth-child(1) {
+        grid-area: b;
+      }
+
+      & > :nth-child(2) {
+        grid-area: a;
+      }
+
+      @apply max-w-full;
+
+      grid-template:
+        'a a a a a a' auto
+        '. b b b b .' auto
+        / var(--container-breakout-border-column-size-2xs) var(
+          --container-columns-2xs
+        )
+        var(--container-breakout-border-column-size-2xs);
+
+      @screen xs {
+        grid-template:
+          'a a a a a a' auto
+          '. b b b b .' auto
+          / var(--container-breakout-border-column-size-xs) var(
+            --container-columns-xs
+          )
+          var(--container-breakout-border-column-size-xs);
+      }
+
+      @screen sm {
+        grid-template:
+          '. b b b a a a a' auto
+          / var(--container-breakout-border-column-size-sm) var(
+            --container-columns-sm
+          )
+          var(--container-breakout-border-column-size-sm);
+      }
+
+      @screen md {
+        grid-template:
+          '. b b b b a a a a a' auto
+          / var(--container-breakout-border-column-size-md) var(
+            --container-columns-md
+          )
+          var(--container-breakout-border-column-size-md);
+      }
+
+      @screen lg {
+        grid-template:
+          '. b b b b b a a a a a a a a' auto
+          / var(--container-breakout-border-column-size-lg) var(
+            --container-columns-lg
+          )
+          var(--container-breakout-border-column-size-lg);
+      }
+
+      @screen xl {
+        @apply w-full;
+        grid-template:
+          '. b b b b b a a a a a a a a' auto
+          / 1fr var(--container-columns-xl) 1fr;
+
+        .bk-main-canvas & {
+          @apply w-full;
+          grid-template:
+            '. b b b b b a a a a a a a a' auto
+            / 1fr var(--container-columns-xl-bk) 1fr;
+        }
+      }
+    }
+
+    /* @todo: Delete this later, this is just for reference */
+
+    .grid-container-6 {
+      @apply col-span-4 md:col-span-5 md:col-start-2 lg:col-span-6 lg:col-start-3;
+    }
+
+    .grid-container-8 {
+      @apply col-span-4 sm:col-span-6 md:col-span-6 md:col-start-2 lg:col-span-8 lg:col-start-3;
+    }
+
+    .grid-container-6-small {
+      @apply col-span-4 md:col-span-5 lg:col-span-6;
+    }
+
+    .grid-container-8-small {
+      @apply col-span-4 sm:col-span-6 lg:col-span-8;
+    }
+
+    .grid-container-10 {
+      @apply col-span-4 sm:col-span-6 md:col-span-8 lg:col-span-10 lg:col-start-2;
+    }
+
+    .grid-container-12 {
+      @apply col-span-4 sm:col-span-6 md:col-span-8 lg:col-span-12;
+    }
+  }
+}

package/assets/css/components/link.css

@@ -0,0 +1,21 @@
+@layer components {
+  .link {
+    @apply text-primary-500;
+    @apply hover:text-primary-800 hover:visited:text-primary-800;
+    @apply visited:text-primary-900;
+    @apply active:text-primary-700;
+  }
+
+  .link-inverted {
+    @apply text-white;
+    @apply hover:text-white/80;
+    @apply active:text-white;
+  }
+
+  .inline-link {
+    @apply text-primary-500;
+    @apply hover:text-primary-800 hover:visited:text-primary-800;
+    @apply visited:text-primary-900;
+    @apply active:text-primary-700;
+  }
+}