Make solution interopable with other stacks

Hi Glyn,

Thank you for reaching out! I have come across Lupus Decoupled before, and have had it on my list of things to look at. I've now set it up locally to check it out, and I really do like what I'm seeing.

From what I have seen from Lupus Decoupled at a glance (I'm planning to play with it some more), the projects do indeed have the same goal. We just approach it from different angles. On the Nuxtify side, it's providing a batteries-included opinionated starting point, whereas Lupus Decoupled appears to be a bit more ambitious, providing deep integrations on both the Drupal and Nuxt side.

It would definitely be benificial to see what the two projects can learn from one another, since the approaches seem to complement one another quite well.

@glynster thanks for pointing this out.

(I'm a relatively new maintainer to Lupus Decoupled, which means I don't know everything yet - but might have a fresh look on where our public docs are unclear. So. from that perspective: )

Yes, we share the same basic goal of integrating Nuxt while keeping all the editing power in Drupal's hands.

Things that come to mind:

1. Low level: Drupal's API.

Lupus Decoupled wants a single API response to get all content on a page - which is then structured according to the layout that is done on the Drupal backend. Like: a page can contain a node's content plus other blocks, e.g. a listing of related content. (Excluding the menus which are common on each page.) The page with blocks is composed in Drupal's layout builder.

I am assuming your goal is roughly the same and for that purpuse you're using GraphQL (not JSON:API).

Lupus Decoupled builds on the combination of two lower-level modules:

1. Custom Elements → - which is low-level plumbing, splicing some logic/capabilities into Drupal's render-array code in order to create 'custom elements' output roughly like (this is made up, but realistic):

<main-node>
  ... STUFF LIKE TITLE AND AUTHOR
  <paragraphs>
    <pg-gallery>
      <image properties="add in here">
      <image properties="add in here">
    </pg-gallery>
    <pg-quote author="AUTHOR" text="QUOTE TEXT">
    ... more paragraphs
  </paragraphs>
</main-node>
<related-content>
  <teaser-square title="..." image="http://..." image-alt="Alt Placeholder">
  <teaser-square title="..." image="http://..." image-alt="Alt Placeholder">
</related-content>

2. Lupus Custom Elements Renderer → - which makes the same code output JSON instead of 'custom elements xml', on an API endpoint -- which then look something like:

  "title": "THE TITLE",
  "messages": [],
  "breadcrumbs": [
    {
      "frontpage": true,
      "url": "/",
      "label": "Home"
    },
    {
      "frontpage": false,
      "url": "/info",
      "label": "Channel: Info"
    }
  ],
  "metatags": {
    "meta": [
      {
        "name": "title",
        "content": "META-TAAG"
      },
      ...
    ],
    "link": [
      {
        "rel": "canonical",
        "href": "http://..."
      },
      {
        "rel": "image_src",
        "href": "http://....jpg"
      }
    ],
    "jsonld": {
      "@context": "https://schema.org",
      "@graph": [
        {
          "@type": "Article",
          "headline": "ETCETERA",
	  ...
        },
        {
          "breadcrumb": {
            "@type": "BreadcrumbList",
            "itemListElement": [
              {
                "@type": "ListItem",
                "position": 1,
                "name": "Home",
                "item": "http://example.ldp-project.localdev.space/"
              },
              {
                "@type": "ListItem",
                "position": 2,
                "name": "Channel: Info",
                "item": "http://example.ldp-project.localdev.space/info"
              }
            ]
          }
        }
      ]
    }
  },
  "content_format": "json",
  "content": {
    "element": "node",
    "type": "article",
    "sections": [
      {
        "element": "layout-section",
        "layout": "layout_onecol",
        "settings": {
          "label": "",
          "width": "regular"
        },
        "content": [
          {
            "element": "node-article-content",
            "title": "THE TITLE",
            "publishedAt": "11.01.2027",
            "category": "News",
            "topics": [],
            "socialShareHashtags": "Info,News",
            "socialShareNetworks": "facebook,twitter,linkedin",
            "paragraphs": [
              {
                "element": "pg-gallery",
                "type": "gallery",
                "sources": [
                  {
                    "url": "http://admin--example.ldp-project.localdev.space/sites/example/files/styles/1200_675/public/2024-06/jeremy.jpg?itok=5IUiLb1G",
                    "mediumUrl": "http://admin--example.ldp-project.localdev.space/sites/example/files/styles/853_480/public/2024-06/jeremy.jpg?itok=D8d5q_4w",
                    "thumbnailUrl": "http://admin--example.ldp-project.localdev.space/sites/example/files/styles/160_120/public/2024-06/jeremy.jpg?itok=PDbpVSXY",
                    "alt": "Alt Placeholder",
                    "title": "© C...",
                    "copyright": "© ...",
                    "caption": "",
                    "aspectRatio": 177.78
                  },
                  ... more images
                ]
              },
              {
                "element": "pg-quote",
                "type": "quote",
                "author": "AUTHOR",
                "content": "QUOTE TEXT"
              },
              {
                "element": "pg-text",
                "type": "text",
                "title": "PARAGRAPH TITLE",
                "content": "PARAGRAPH TEXT"
              },
              ...
            ]
          },
          {
            "element": "teaser-list",
            "contains": "teaser-square",
            "loadEndpoint": "/lupus/block/ldp_block_related_articles/items?view_mode=teaser_square&sort=-1&nid=15&rendered=25%2C24%2C16",
            "loadNumItems": "3",
            "initialNumItems": 3,
            "moreType": "none",
            "buttonText": "Read more",
            "isEmpty": false,
            "noSearchIndex": true,
            "teasers": [
              {
                "element": "teaser-square",
                "type": "article",
                "href": "/paragraph-showcase",
                "title": "Paragraphs showcase",
                "category": "News",
                "image": {
                  "aspectRatio": 100,
                  "src": "http://admin--example.ldp-project.localdev.space/sites/example/files/styles/360_360/public/2024-06/new_logo.jpg?itok=O0AiPKrU",
                  "srcset": null,
                  "alt": "Alt Placeholder",
                  "title": "© drupal.org\nSource: https://www.drupal.org/files/Wordmark2_blue_RGB%281%29.png"
                },
                "publishedAt": "31. March 2021"
              },
              ... more teasers in this block
            ]
          },
          ... more content blocks, e.g. another listing of related news

        ]
      }
    ]
  },
  "page_layout": "full",
  "settings": {
    "display_title": "0"
  },
  "local_tasks": {
    "primary": [
      {
        "url": "/info/drunomics-gewinnt-zwei-splash-awards-2019-fuer-die-besten-oesterreichischen-websites-15",
        "label": "View",
        "active": true
      },
      ...
    ],
    "secondary": []
  }
}

I included this large example here, because I think that isn't quite clear from our docs yet (and should be).

(A NOTE: We likely need to document or publish some glue code and/or setup recipes to make outputting Layout Builder's blocks straightforward - and/or other things like Layout Paragraphs, that I heard @glynster is using. That may be a missing link at the moment, but it's not very hard.)

The Lupus Decoupled module builds on this base, to provide handling and/or opinionated config for e.g.

• redirect between frontend / backend URLs
• menus
• decoupled/responsive content preview

2. Nuxtify's visual page editor

That looks nice -- without trying things out, I haven't been able to fully grasp what it's about, yet.

From a quick view at the code, this seems to mainly be implemented in the theme.

Is this visual page editor meant to be able to configure some things on the Drupal side, which then influence the layout on the frontend?

Lupus Decoupled doesn't have anything like that. What we're currently working on is management screens per entity/bundle/view mode, to influence the content of the JSON that's output. (Think the "Manage Display" screen, including field formatters, but then for the JSON output.) So that's for 'structure managers' not 'content editors'.

(And the main reason that I'm haven't installed/played with Nuxtify after seeing this message, to try to find the answer myself, is that I'm on a tight schedule to ship a usable version of that 'Custom Elements UI' before Dev Days.)

3. Shipped configuration

Nuxtify ships things like paragraph/media types, layouts, fields. I believe this (plus the editor?) is most of the "opinionated" part.

Lupus Decoupled doesn't do that, and I don't think it's planning to. Anyone is welcome to do it on top of Lupus Decoupled, of course.

That's what I could see so far.

So...

So far, I'm also seeing "different approach" not "duplicated efforts".

The API stuff... I don't think that's something you're going to be duplicating. Though if you're going to do heavy work to extend GraphQL to do things like "better support for layout builder"... I'd urge you to explore what Lupus CE Renderer does, and consider whether switching over would be less work.

The stuff on top of that (which would be in the Lupus Decoupled module in our case): if you're going to do coding work on things like decoupled preview / authentication / views support / ... that can be worth sharing efforts / code. If you see anything in this direction, feel free to reach out and I'll look at whether/how we could. I'll try to check out Nuxtify once in a while.

What is missing in this message: the frontend integration -- because I know close to nothing about it so far. I just have it on good authority that compared to another project, Druxt, we have a lot less logic/components on the frontend.

We're on #drunomics-contribute @ Drupal Slack.

Thank you for the detailed response. I think we have come to the same conclusion that the two projects have different approaches. I will close this issue for now, but I certainly am open for collaboration in the future if anything specific might be needed!

I'm re-opening this because I think we should explore ways to work together while keeping things separate.

> On the Nuxtify side, it's providing a batteries-included opinionated starting point, whereas Lupus Decoupled appears to be a bit more ambitious, providing deep integrations on both the Drupal and Nuxt side.

I don't see way pursue a deep integration, it's actually quite relaxed and open to other frontends. They way it's integrated is quite different though, yes. Lupus Decoupled tries to re-use existing features like routing and authentication from Drupal as much as possible, and focus on using Nuxt/Vue on rendering by default - so you can started very simply.

That said, that's the default and starter, you still have Nuxt and Drupal APIs and that can be used on a per-route / component basis as desirable by the frontend dev. So I was wondering, would it be possible to use Lupus Decoupled Drupal + parts of your solution together? e.g. the visual editor? I think that might be quite interesting for some of our users.

Thus I'm re-opening this to explore/discuss to see whether we could build things in a modular way, so bits/parts of it be interoperable and work together.

Is using your visual editor in Lupus Decoupled setup something we could achieve? e.g. by providing a drupal module exposing the APIs + a nuxt module for doing the necessary frontend integration?