[RFC]: Landtamic v2 Ideas

[lokmanm]

Greetings!

We're in the planning stage for Landtamic v2, and we have a bunch of ideas for improvements, but we'd love to incorporate some suggestions from our community and especially from our frequent (or future 😉 ) users.

We're sharing our current thoughts and reasoning below, but remember, nothing's set in stone here - your feedback is more than welcome.

Blade Components

While we have Antlers components, they can't match the flexibility of Blade. Typically, you'd have to perform several maneuvers to achieve a certain level of customization. We used Blade components in one of our Starter Kits, as well as in our own projects. It simplifies working with Tailwind CSS and its variants. Here's a Button component sample from our Formatic Starter Kit.

This allows us to use the Button as an html tag in Antlers templates, simplifying formatting and making usage with Alpine easier.

{{# A button with a link #}}
<x-button variant="brand" url="https://www.luckymedia.dev/">Hello There</x-button>

{{# A submit button #}}
<x-button variant="brand" type="submit">Hello There</x-button>

{{# A button with Alpine.js #}}
<x-button variant="brand" @click="alert('Hello World')">Hello There</x-button>

Coupling these components with Tailwind Merge makes for an easy and intuitive experience, building and re-using components. Components will be available as a UI Kit in Landtamic’s components directory, you will be able to extend blocks easily.

CSS Variables for Theming

By opting to use CSS Variables for theming, theme changing gets simpler — a single file is all you need. This also paves the way for introducing a Dark Theme, where we only add a .dark class:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
}

Inspired by our Formatic Starter Kit, this example showcases how easy it is to introduce new themes by altering these variables. Here is the themes folder for if you are curious about how it works.

In Conclusion

These are just initial thoughts. We’re eager to hear from you.
Are these modifications unnecessary?
Should we leave it as is? Or do you have fresh ideas?

If you have any new ideas for blocks, or refactors that we can do as an added value drop them in the comments.

Thanks!