volto/packages/cmsui/routes/layout.tsx at d2cf468880230a5aa593b7719052ecbd07185a30 · plone/volto · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useNavigate,
  useRouteLoaderData,
  type LinksFunction,
  type MetaFunction,
} from 'react-router';
import { useTranslation } from 'react-i18next';
import { RouterProvider as RACRouterProvider } from 'react-aria-components';
import type { RootLoader } from 'seven/app/root';
import { PluggablesProvider, Plug } from '@plone/layout/components/Pluggable';
import Toolbar from '@plone/layout/components/Toolbar/Toolbar';
import { shouldShowToolbar } from '@plone/layout/helpers';
import Sidebar, { sidebarAtom } from '../components/Sidebar/Sidebar';
import Settings from '@plone/components/icons/settings.svg?react';
import { useAtom } from 'jotai';
import { useLayoutEffect } from 'react';
import { clsx } from 'clsx';
import config from '@plone/registry';

import stylesheet from 'seven/.plone/cmsui.css?url';

export const meta: MetaFunction<unknown, { root: RootLoader }> = ({
  matches,
}) => {
  const content = matches.find((match) => match.id === 'root')?.data?.content;
  if (!content) {
    return [];
  }

  return [
    { title: content.title },
    { name: 'description', content: content.description },
    { name: 'generator', content: 'Plone 7 - https://plone.org' },
  ];
};

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: stylesheet },
  {
    rel: 'icon',
    href: '/favicon.ico',
    type: 'image/x-icon',
    sizes: 'any',
  },
  {
    rel: 'icon',
    href: '/icon.svg',
    type: 'image/svg+xml',
  },
  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
  {
    rel: 'preconnect',
    href: 'https://fonts.gstatic.com',
    crossOrigin: 'anonymous',
  },
  {
    rel: 'stylesheet',
    href: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap',
  },
];

export async function loader() {
  return { cssLayers: config.settings.cssLayers };
}

export default function Index() {
  const rootData = useRouteLoaderData<RootLoader>('root');
  const { i18n } = useTranslation();
  const navigate = useNavigate();
  const [collapsed, setCollapsed] = useAtom(sidebarAtom);

  useLayoutEffect(() => {
    document
      .querySelectorAll('link[href*="publicui.css"]')
      .forEach((el) => el.remove());
  }, []);

  if (!rootData) {
    return null;
  }
  const { content, locale } = rootData;
  const contentLanguage = (content?.language as { token?: string } | undefined)
    ?.token;

  return (
    <html lang={contentLanguage || locale || 'en'} dir={i18n.dir()}>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="mobile-web-app-capable" content="yes" />
        <Meta />
        <Links />
      </head>
      <body className="cmsui">
        {/* We pre-define here the @layer before tailwind does, adding our own layers in a React 19 managed <link> tag */}
        <link rel="stylesheet" href="/layers.css" precedence="first" />
        <RACRouterProvider navigate={navigate}>
          <PluggablesProvider>
            <Plug pluggable="toolbar-bottom" id="button-settings">
              <button
                type="button"
                aria-label="Settings"
                onClick={() => setCollapsed((state) => !state)}
              >
                <Settings />
              </button>
            </Plug>
            <Toolbar />
            <div
              className={clsx(
                'grid transition-[grid-template-columns] duration-200 ease-linear',
                {
                  'ml-(--plone-toolbar-width)': shouldShowToolbar(content),
                  'grid-cols-[1fr_300px]': !collapsed,
                  'grid-cols-[1fr_0px]': collapsed,
                },
              )}
            >
              <div id="main">
                <Outlet />
              </div>
              <Sidebar />
            </div>
          </PluggablesProvider>
        </RACRouterProvider>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}