Your new and better website

[vukcevicnikola]

Hi Greg,

Your new website is awesome, congrats on converting Next.js template to WordPress.

I see that your website is using Next.js technology, without loading on page request. Is this Next.js template that use WordPress API as a CMS, GraphQL, or something else? Can you let me know more about how you did it?

Thank you in advance! :)

[gregsullivan]

Hello! I tried to cover this a bit in the release notes when I launched the new site and generator:

https://underscoretw.com/release-notes/july-2024/

The short version is that Next.js isn't used in any way. The site is built using _tw, adding Alpine.js and Turbo.js.

Alpine.js handle interactivity: Most notably the generator itself, but also the search modal.

Turbo.js makes the site feel like a single-page app and adds partial page loading.

I'm happy to expand on any of the above—please let me know if you have questions!

[vukcevicnikola]

Got it! I was wondering about that feeling like single-page app.

What is you experience using Tailwind UI components? I would like to use it in my project with your theme and need your opinion about that, have you faced any issues or similar?

Thank you in advance :)

[gregsullivan]

I've had good experiences using them! You just need to be aware that anything interactive you'll need to recreate yourself. For example, the FAQ on the _tw homepage is a Tailwind UI component, but the interactivity comes from Alpine.js. I've similarly used Alpine to recreate things like popover menus, etc., from Tailwind UI. (So I'm copying the plain HTML from Tailwind UI, not the Vue or React versions. It includes notes on the styles to use for transitions, etc.)

[luuktimmermans]

I’m wondering, what made you decide to use Alpine.js instead on plain JavaScript?

[gregsullivan]

Alpine.js is lightweight enough that I don't worry about the added asset size, and it greatly reduces development time (for me, anyway).

Something like the FAQ could be done without, but there are parts of the generator where I save very meaningful time. Even the FAQ benefits from the ui library providing accessibility attributes with no work from me.

[luuktimmermans]

Great! I’m working on a website using your theme as we speak, but doing all JS stuff wit plain JS, I’ll have a look at Alpine.js!

[gregsullivan]

Awesome! Please let me know how it works out for you. Installing Alpine is the example on this page, too, should that prove useful:

https://underscoretw.com/docs/esbuild/