volto/packages/publicui/routes/index.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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
/**
 * layout of @plone/publicui
 */
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLocation,
  useMatches,
  useNavigate,
  useRouteLoaderData,
  type UIMatch,
  type LinksFunction,
  type MetaFunction,
} from 'react-router';
import { useLayoutEffect } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Link,
  RouterProvider as RACRouterProvider,
} from 'react-aria-components';
import type { RootLoader } from 'seven/app/root';
import Pencil from '@plone/components/icons/pencil.svg?react';
import SlotRenderer from '@plone/layout/slots/SlotRenderer';
import Toolbar from '@plone/layout/components/Toolbar/Toolbar';
import { shouldShowToolbar } from '@plone/layout/helpers';
import { Plug, PluggablesProvider } from '@plone/layout/components/Pluggable';
import clsx from 'clsx';
import config from '@plone/registry';

import styles from '@plone/layout/slots/App/App.module.css';
import stylesheet from 'seven/.plone/publicui.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 location = useLocation();
  const rootData = useRouteLoaderData<RootLoader>('root');
  const { i18n } = useTranslation();
  const navigate = useNavigate();
  const matches = useMatches() as UIMatch<unknown, { bodyClass: string }>[];
  const routesBodyClasses = matches
    .filter((match) => match.handle?.bodyClass)
    .map((match) => match.handle?.bodyClass);

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

  if (!rootData) {
    return null;
  }
  const { content, locale } = rootData;

  return (
    <html lang={content.language?.token || 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={clsx(routesBodyClasses, {
          'with-toolbar': shouldShowToolbar(content),
        })}
      >
        {/* 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-top" id="button-edit">
              <Link
                className="primary"
                aria-label="Edit"
                href={`/@@edit${location.pathname.replace(/^\/$/, '')}`}
              >
                <Pencil />
              </Link>
            </Plug>
            <Toolbar />
            <div id="main">
              <div className={clsx(styles.app, 'app-slot')}>
                <header id="header" className="header-slot">
                  <SlotRenderer
                    name="header"
                    content={content}
                    location={location}
                  />
                </header>
                <div className="content-area">
                  <Outlet />
                </div>
                <footer id="footer">
                  <SlotRenderer
                    name="footer"
                    content={content}
                    location={location}
                  />
                </footer>
              </div>
            </div>
          </PluggablesProvider>
        </RACRouterProvider>
        <div role="complementary" aria-label="Sidebar" id="sidebar" />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}