Webstudio
Log in

Join the Webstudio community

Home
Members
paulrudy
p
paulrudy
Offline, last seen 4 weeks ago
Joined December 13, 2024
ppaulrudy
·

Wormholes/Anti-Slots: Unique Content within Slots?

In Webstudio, slot contents are identical between instances.

Any instance-unique contents within a slot need to come from a Resource or other variable.

This is very powerful, but for me there's at least one drawback. I'd love to have reusable page/component structures (Slots) that have portions of content (within the slot) that are:

  1. unique to the Slot instance
  2. and can be designed visually in Webstudio
  3. and may include native Webstudio components
Populating content within a slot via a Variable or Resource accomplishes #1.

Rich text, via Markdown and Content Embed, accomplishes #2. But editing is done via CMS or within the variable editor in Webstudio, not on-canvas as with ordinary components.

And unless I'm misunderstanding, #3 isn't possible within a slot.

So I'm wondering if there could be a component (an Anti-Slot? a Wormhole?) that serves as an exception to the repeatable contents of an ordinary Slot. Any contents inside this anti-slot could be composable within the Webstudio visual UI as any normal hierarcy of components, and would be unique to that particular Slot instance.

I made a little mockup of the idea in the screenshot. "Anti-slots" and content are green, within the purple slot content.

This would allow reusable structures defined by Slots, with optional unique elements inside them, but unlike doing so with Variables/CMS, everything could be visually designed with Webstudio.

I have no idea how crazy and/or difficult this idea would be to implement, but I imagine it might be really useful for:

  • people who need easily reusable layouts but don't necessarily need/want a full CMS
  • people who are using a CMS, but may not need/want every piece of content mapped to a content model in the CMS
12 comments
p
O
S
ppaulrudy
·

Make ‘Current Page’ available as a class and/or variable

Current Page is available for styling links within the UI. But for more complex stuff, I'd like to be able to determine the current page from CSS or JS.

Perhaps Current Page could be made available as a system Resource (to be used as a variable in an embed) and/or as a class added to <body>—or even to any link that matches the current page value?

Example use for styling non-link element associated with the current page in a nav:

Plain Text
document.addEventListener('DOMContentLoaded', function () {
    const navLinks = document.querySelectorAll('nav a');

    navLinks.forEach(link => {
      const href = link.getAttribute('href');
      if (href && href.includes(system.currentPageSlug)) { // system.currentPageSlug as a system Resource
        link.classList.add('current-page');
      }
    });
});


Plain Text
nav ul li a.current-page:before {
  /* styles */
}
7 comments
p
O
ppaulrudy
·

Styling Radix Nav Menu Items

The Radix nav menu component includes "Menu Items" which render as list item elements. But the Webstudio UI doesn't allow setting styles for hover, focus etc on these menu items. Is there any way around this, or do I have to use an HTML embed?
7 comments
p
J
ppaulrudy
·

Hey @John from Create Today just a

Hey just a heads up, the link for the youtube video in https://discord.com/channels/955905230107738152/1182292163317477436/1281391735406329889 is malformed. Thanks for sharing the animation library!
1 comment
J
ppaulrudy
·

Setting a webstudio variable with javascript

Sorry if this has been asked before, didn't find anything: Is it possible (or will it be possible) to set a Webstudio variable with javascript? In my case, I have JSON fetched from a resource that needs further processing before I can use it for a Collection.
10 comments
O
p
J
ppaulrudy
·

Advantages and Disadvantages of Composable Blocks in a CMS

I'm new to working with CMS in Webstudio, and I'd love some feedback:

I've been playing with self-hosted Directus. Their website cms template has a number of composable blocks, like in this screenshot for their demo home page UI.

Any thoughts on advantages/disadvantages of keeping this kind of setup vs a single rich text or markdown field?

I could set up an expression in WebStudio to map the HTML output of the blocks into a single Content Embed. Seems like one major disadvantage might be that each block type would be difficult (or impossible?) to apply tokens to in Webstudio.

Or I could skip using all these blocks and just have a single rich text field for the page/post in Directus.
38 comments
p
J
ppaulrudy
·

Json form

It looks like the webhook form submits with content-type text/plain;charset=UTF-8. Is there a way to have it submit with content-type application/json? I'm playing with using Directus to receive form submissions, and it requires a JSON payload
14 comments
p
O
ppaulrudy
·

API integrations and the future CMS integrations

Devs, could you clarify something about API integrations and the future CMS integrations? The impression I'm getting is:

  • API integration already works with basically any service that can receive HTTP requests.
  • CMS integration will require someone—WebStudio, or community builders—to actually build an integration for that service (and potentially reusable with services that have very similar API's).
Could you let me know if I have that basically correct?
3 comments
p
O
ppaulrudy
·

Mobile-first and setting breakpoints in webstudio

I'm curious on people's opinions about mobile-first and setting breakpoints in WebStudio. Coding from scratch, I've tended to code mobile styles first. But given that the CSS is generated by WebStudio, perhaps the pros and cons for mobile or desktop first change. Thoughts?
9 comments
p
O
ppaulrudy
·

Hosting a marketing site and blog with webstudio

Hey, I'm interested in using Webstudio to host a marketing site + blog. When CMS is ready, will there be a way to generate an RSS and/or ATOM blog feed? Or is there already a way to do so based on pages (until CMS is ready)?
3 comments
O
p
ppaulrudy
·

Change side where Sheet element opens?

By default, the Sheet element opens on the left side of the screen. How can I switch it to the right? I haven't been able to find an attribute or style that works.

I notice that Webstudio's home site has a sheet that opens from the right (mobile breakpoint).
2 comments
p
O
ppaulrudy
·

Right-aligned Radix Nav dropdown extends beyond page border

See screenshot. I've looked at the Radix documentation, but haven't been able to apply any attributes to change this behavior. Any ideas?

Demo: https://p-2d1734a2-7ec2-434c-a08b-894b395c5830.apps.webstudio.is/?authToken=4c286d5b-9e31-47c1-bb8e-764c79aacfc0&mode=preview
3 comments
p
J
ppaulrudy
·

Override Radix Sheet trapped focus?

I have a conflict between the Radix sheet component's focus and an instance of typesense docsearch I want to use. It looks like the Sheet traps browser focus while the sheet is open.

Demo (compare search button/interface focus without sheet in full-size breakpoint, vs with sheet in smaller breakpoint):

https://p-9a94b6fd-312d-46e2-aca9-8ea248c4f209.apps.webstudio.is/?authToken=2eb243a1-5272-4d8c-8771-01f74c76c21b&mode=preview

Within the nav menu, I have Typesense docsearch (based on Algolia docsearch) set up as part of the nav. The script generates a button on specified element, and when clicking the button (or using cmd-K), an absolutely positioned div with the search interface pops up as an absolutely positioned div, and sets focus in the input field.

All good in desktop view (without Radix Sheet).

The problem is that with the Radix Sheet component open, the search interface can't be focused. Radix seems to trap the focus.

Is there any way to override this (preferably that isn't super hacky)?
3 comments
p
J
ppaulrudy
·

Post content via CMS with mixed text and images/media?

This is a question for a blog where posts are pulled into WS from a CMS.

How might a Webstudio site be set up for a blog whose posts go beyond a predictable "featured image + text" format, and include multiple images and/or media interpersed in the text?

Ideally, any assets that Webstudio handles would be imported (and optimized). Could this be done eventually with the planned markdown CMS import?

(I just added a comment to the markdown import github issue on this subject https://github.com/webstudio-is/webstudio/issues/3485#issuecomment-2204852473)
12 comments
H
p
O
B
J
ppaulrudy
·

How do you add headers to a Webhook Form?

How can I add headers (like Authorization: Bearer {token}) to a webhook form in Webstudio?
3 comments
p
O
ppaulrudy
·

Style combinations of css pseudo classes?

In CSS, we can do something like this:
Plain Text
a {
  color: red;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
    color: blue;

    &.current-page {
      text-decoration: initial;
      color: initial;
    }
            
    &:visited {
      color: initial;
    }
  }
}


Will this be possible in the UI at some point (where .current-page would be equivalent to the Webstudio "Current Page" state)?
35 comments
p
O
J
ppaulrudy
·

Radix primitives upgrade with 0.176.0 release

I noticed that Radix primitives got an upgrade with the 0.176.0 release (issue #3808).

That got me wondering: With Radix and with future component systems in Webstudio, do you think there might be a path for users to learn in the UI whether there's an upgrade available for a component/primitive that they're currently using in a design?

Perhaps even a way to upgrade them with a click.
7 comments
O
S
p
ppaulrudy
·

Headless CMS Finder

Glad to see the Headless CMS Finder up! https://webstudio.is/tools/headless-cms-finder
3 comments
p
J
ppaulrudy
·

Separate Question for Media Pulled from a CMS

Separate question—for media pulled from a CMS, does that get stashed in Cloudflare CDN (on hosted Webstudio)?

What about linked media/images in CMS rich text?
9 comments
p
J
O
ppaulrudy
·

Clarify how caching of CMS resources works with Webstudio now (and in the future)

I've read some of the discussions about caching, and I'd like to check my understanding:

For a project hosted by Webstudio (therefore it's run in a Cloudflare worker), I understand that the CMS API can use Cache-Control headers to reduce API calls.

Without these headers, am I correct that every pageview with CMS content will make a request to the CMS?

Please correct me if I'm missing something in my understanding.

I also saw this comment https://discord.com/channels/955905230107738152/1133337749856989316/1228373118154702951

MAYBE we could have a manual override that is based on some simple logic like amount of hours to keep the cache instead of relying on headers.

I'm curious about whether this idea is being considered for the future, too!
5 comments
J
O
p
ppaulrudy
·

The Difference Between Justify and Place in CSS

Is this tooltip incorrect? I thought justify was along the primary axis and place is for both primary and cross axis. justify-items also has a similar tooltip, fyi
5 comments
O
p
ppaulrudy
·

In an HTML Embed script, how can I access a DOM element that hasn’t yet rendered?

Edit: Leaving the question and demo below even though I've come to a clearer way to phrase my question, which is:

Is there a way for an HTML Embed script to classes on a Radix element that hasn't yet been rendered (i.e., hidden at a certain breakpoint)? I'm guessing not...

The goal of this, for me, is simply to amend the class of an element based on a breakpoint (class is needed because a script I'm loading needs to find an element by class name). If there's a way to do this in the UI, that would be great!
-------------------
Original question:
-------------------

I'm completely new to React, but I think the problem I'm running into is related to React's virtual DOM:

I have a script in an HTML Embed that attempts to use document.querySelector() to update the class of an element.

The element (a mobile nav wrapper) is set to display: none on desktop, so it's still technically "in" the DOM, but it's not accessible with querySelector() until either:
  • switching to mobile view (nav wrapper is rendered)
  • manually navigating in devtools to the element
Online, I've only been able to find suggestions to use React hooks, but that doesn't seem possible within an HTML Embed.

Is there a workaround available in Webstudio?

Here's a demo with a clear explanation of the goal and problem embedded, and console log commands to demonstrate: https://apps.webstudio.is/builder/75acd98f-1d13-400a-9106-cb2b819292b6?authToken=e051c8b6-b777-4834-9013-f8f97e32baae&mode=preview
39 comments
O
p
ppaulrudy
·

Show HN: Open-sourced Webflow for your o...

I'd be interested to see if the Webstudio devs want to respond to this. I don't have enough knowledge to parse the differences, but I think Webstudio definitely deserves a mention in the discussion

https://news.ycombinator.com/item?id=40904862
4 comments
R
p
O
ppaulrudy
·

Dynamically Generated Top-level Pages in CMS with a Static Home Page

I'm interested in having top-level pages dynamically generated by CMS. The Home page doesn't have a dynamic path attribute, though. Is there a workaround for this?
43 comments
p
O
ppaulrudy
·

TinaCMS using hosted Webstudio?

Is TinaCMS compatible with Webstudio?

I saw that it was mentioned in this discussion prior to Webstudio's CMS launch: https://github.com/webstudio-is/webstudio-community/discussions/47#discussioncomment-7347782

But I'm unsure of how it could be set up to work with hosted Webstudio, since TinaCMS's docs seem to require that it be connected with a website git repo. Even when using a separate repo just for site content, it still apparently needs the full site repo as well https://tina.io/guides/tinacms/separate-content-repo/guide/
26 comments
O
C
p
J