Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve rendering of site #351

Merged
merged 5 commits into from
Sep 5, 2024
Merged

Improve rendering of site #351

merged 5 commits into from
Sep 5, 2024

Conversation

fraxachun
Copy link
Contributor

@fraxachun fraxachun commented Sep 3, 2024

  • Remove next-runtime-env as it prevents static rendering (use context in layout.tsx instead)
  • Get rid of config.ts
  • Simplify block preview and provide site config context in there as well
  • Use separate layout.tsx files for block preview and site

Supersedes #350 and #349

To discuss:

  • Move SiteConfigsProvider.tsx and SiteConfigProvider.tsx to @comet/cms-site?
  • Shall we document the following explanation and if yes - where?

Ways to access the current SiteConfig

  • Page
    Use await getSiteConfigForDomain(params.domain)
  • Component (Server Rendering)
    Not possible, instead pass the necessary data from the page
  • Component or Block-Preview (Client Rendering)
    Use the useSiteConfig()-hook

site/package.json Show resolved Hide resolved
site/src/app/[domain]/layout.tsx Outdated Show resolved Hide resolved
site/src/app/block-preview/[type]/page.tsx Outdated Show resolved Hide resolved
thomasdax98
thomasdax98 previously approved these changes Sep 5, 2024
site/src/middleware.ts Outdated Show resolved Hide resolved
@thomasdax98 thomasdax98 merged commit 61e5a0d into main Sep 5, 2024
3 checks passed
@thomasdax98 thomasdax98 deleted the site-static-rendering branch September 5, 2024 13:58
Comment on lines +12 to +46
const PagePreview: React.FunctionComponent = () => {
const iFrameBridge = useIFrameBridge();

const { fetch, graphQLFetch } = useBlockPreviewFetch(graphQLApiUrl);

const [blockData, setBlockData] = useState<PageContentBlockData>();
useEffect(() => {
async function load() {
if (!iFrameBridge.block) {
setBlockData(undefined);
return;
}
const newData = await recursivelyLoadBlockData({
blockType: "PageContent",
blockData: iFrameBridge.block,
graphQLFetch,
fetch,
});
setBlockData(newData);
}
load();
}, [iFrameBridge.block, fetch, graphQLFetch]);

return <div>{blockData && <PageContentBlock data={blockData} />}</div>;
};

const StagePreview = () => {
const { block: stage } = useIFrameBridge();
return stage ? <StageBlock data={stage} /> : null;
};

const previewComponents = {
page: PagePreview,
stage: StagePreview,
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move this preview components into separate files? Otherwise this file may get rather large when having many different previews

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here we go: #353

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants