Dynamic header and footer across all pages

[P90Costa]

I want to create a header and footer that are shared across all pages. I would also like their content to be dynamically updated through fields (for example, puck fields).

Is this possible? If so, what would be the recommended approach? If not, what alternative solutions would you suggest?

Thanks in advance

[FedericoBonel]

Hey @P90Costa! I think you also posted this in the Discord and got the solution working, so I'm pasting those messages here for anyone who might run into this in the future:

[User 1]
Add the header and footer to the root as a wrapper for other components.

[User 2]
I’ve already done that, but I wanted to use Puck's fields. The issue is that Puck only saves per page, not per project. Is there any solution for this?

[User 3]

const save = async (data: any) => {
  if (!Array.isArray(data?.content)) return;

  const header = data.content.filter((i: any) => i.type === "header");
  const footer = data.content.filter((i: any) => i.type === "footer");

  const pageContent = data.content.filter(
    (i: any) => i.type !== "header" && i.type !== "footer"
  );

  try {
    setSaving(true);
    await api.put(`/admin/design/${page}`, {
      data: {
        ...data,
        content: pageContent,
      },
      layout: {
        header,
        footer,
      },
    });
    await revalidateTag(`${tenant?.Domain}`);
    toast.success("บันทึกข้อมูลเรียบร้อยแล้ว");
  } catch (error: any) {
    toast.error(
      error.response?.data?.message || "เกิดข้อผิดพลาดในการบันทึกข้อมูล"
    );
  } finally {
    setSaving(false);
  }
};

I use a method of storing the data separately and then combining it when retrieving it from the database.

[User 3]

puck, err := u.repo.FindLayoutByWebId(webId, page)
if err != nil {
    return nil, err
}
if puck == nil {
    return nil, nil
}

if puck.Content != nil {
    if err := json.Unmarshal(puck.Content, &val); err != nil {
        return nil, err
    }
}

if puck.Header != nil {
    var header []tenantentities.Component
    if err := json.Unmarshal(puck.Header, &header); err == nil {
        val.Content = append(header, val.Content...)
    }
}

if puck.Footer != nil {
    var footer []tenantentities.Component
    if err := json.Unmarshal(puck.Footer, &footer); err == nil {
        val.Content = append(val.Content, footer...)
    }
}

[User 1]
Save the Puck root differently.

[User 4]
Yes, as others have pointed out, you basically want to include them in the data as ComponentData.

How you store it is up to you. The example above is one approach. You could also handle it on the server or use separate endpoints for saving layouts and pages. The data is just a JSON object, so how you work with it is totally up to you.

Another approach I've seen is using a separate Puck instance (editor) to create and save layouts. Then, in your page editor, you could have a Layout component that lets you select one of the saved layouts and passes it down to the Render component to display it. In that case, you'd only be able to edit the layout in the layout editor. But again, you're free to model this however you need.