tinacms 0.58.1 → 0.60.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -29,16 +29,17 @@ var __objRest = (source, exclude) => {
29
29
  }
30
30
  return target;
31
31
  };
32
+ import { EventBus, StyleReset, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, FullscreenFormBuilder } from "@tinacms/toolkit";
33
+ export * from "@tinacms/toolkit";
32
34
  import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType, getIntrospectionQuery, buildClientSchema, print } from "graphql";
33
35
  import set from "lodash.set";
34
36
  import gql$1 from "graphql-tag";
35
- import { EventBus, StyleReset, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, TinaCMS, BranchSwitcherPlugin, TinaProvider, useCMS, FormMetaPlugin, Form, GlobalFormPlugin, FullscreenFormBuilder } from "@tinacms/toolkit";
36
- export * from "@tinacms/toolkit";
37
37
  import React, { useState, useCallback, useEffect, Fragment } from "react";
38
38
  import styled from "styled-components";
39
39
  import * as yup from "yup";
40
+ import { setEditing, useEditState } from "@tinacms/sharedctx";
40
41
  import { getIn, setIn } from "final-form";
41
- import { useLocation, useParams, Link, useHistory, BrowserRouter, NavLink, Switch, Route } from "react-router-dom";
42
+ import { NavLink, useLocation, useParams, Link, useNavigate, BrowserRouter, Routes, Route } from "react-router-dom";
42
43
  import { Menu, Transition } from "@headlessui/react";
43
44
  function popupWindow(url, title, window2, w, h) {
44
45
  const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
@@ -376,6 +377,7 @@ function assertIsUnionType(type) {
376
377
  class Client {
377
378
  constructor(_a) {
378
379
  var _b = _a, { tokenStorage = "MEMORY" } = _b, options = __objRest(_b, ["tokenStorage"]);
380
+ this.events = new EventBus();
379
381
  this.addPendingContent = async (props) => {
380
382
  const mutation = `#graphql
381
383
  mutation addPendingDocumentMutation(
@@ -416,17 +418,16 @@ mutation addPendingDocumentMutation(
416
418
  };
417
419
  this.options = options;
418
420
  this.setBranch(options.branch);
419
- this.events = new EventBus();
420
- this.events.subscribe("branch-switcher:change-branch", ({ branchName }) => {
421
+ this.events.subscribe("branch:change", ({ branchName }) => {
421
422
  this.setBranch(branchName);
422
423
  });
423
424
  this.clientId = options.clientId;
424
425
  switch (tokenStorage) {
425
426
  case "LOCAL_STORAGE":
426
- this.getToken = function() {
427
+ this.getToken = async function() {
427
428
  const tokens = localStorage.getItem(AUTH_TOKEN_KEY) || null;
428
429
  if (tokens) {
429
- return JSON.parse(tokens);
430
+ return await this.getRefreshedToken(tokens);
430
431
  } else {
431
432
  return {
432
433
  access_token: null,
@@ -440,9 +441,9 @@ mutation addPendingDocumentMutation(
440
441
  };
441
442
  break;
442
443
  case "MEMORY":
443
- this.getToken = () => {
444
+ this.getToken = async () => {
444
445
  if (this.token) {
445
- return JSON.parse(this.token);
446
+ return await this.getRefreshedToken(this.token);
446
447
  } else {
447
448
  return {
448
449
  access_token: null,
@@ -468,8 +469,8 @@ mutation addPendingDocumentMutation(
468
469
  const encodedBranch = encodeURIComponent(branchName);
469
470
  this.frontendUrl = ((_a = this.options.tinaioConfig) == null ? void 0 : _a.frontendUrlOverride) || "https://app.tina.io";
470
471
  this.identityApiUrl = ((_b = this.options.tinaioConfig) == null ? void 0 : _b.identityApiUrlOverride) || "https://identity.tinajs.io";
471
- const contentApiBase = ((_c = this.options.tinaioConfig) == null ? void 0 : _c.contentApiUrlOverride) || `https://content.tinajs.io`;
472
- this.contentApiUrl = this.options.customContentApiUrl || `${contentApiBase}/content/${this.options.clientId}/github/${encodedBranch}`;
472
+ this.contentApiBase = ((_c = this.options.tinaioConfig) == null ? void 0 : _c.contentApiUrlOverride) || `https://content.tinajs.io`;
473
+ this.contentApiUrl = this.options.customContentApiUrl || `${this.contentApiBase}/content/${this.options.clientId}/github/${encodedBranch}`;
473
474
  }
474
475
  async requestWithForm(query, { variables }) {
475
476
  const schema = await this.getSchema();
@@ -481,13 +482,16 @@ mutation addPendingDocumentMutation(
481
482
  method: "POST",
482
483
  headers: {
483
484
  "Content-Type": "application/json",
484
- Authorization: "Bearer " + this.getToken().id_token
485
+ Authorization: "Bearer " + (await this.getToken()).id_token
485
486
  },
486
487
  body: JSON.stringify({
487
488
  query: typeof query === "function" ? print(query(gql$1)) : query,
488
489
  variables
489
490
  })
490
491
  });
492
+ if (res.status !== 200) {
493
+ throw new Error(`Unable to complete request, ${res.statusText}`);
494
+ }
491
495
  const json = await res.json();
492
496
  if (json.errors) {
493
497
  throw new Error(`Unable to fetch, errors:
@@ -495,6 +499,47 @@ mutation addPendingDocumentMutation(
495
499
  }
496
500
  return json.data;
497
501
  }
502
+ parseJwt(token) {
503
+ const base64Url = token.split(".")[1];
504
+ const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
505
+ const jsonPayload = decodeURIComponent(atob(base64).split("").map(function(c) {
506
+ return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
507
+ }).join(""));
508
+ return JSON.parse(jsonPayload);
509
+ }
510
+ async getRefreshedToken(tokens) {
511
+ const { access_token, id_token, refresh_token } = JSON.parse(tokens);
512
+ const { exp, iss, client_id } = this.parseJwt(access_token);
513
+ if (Date.now() / 1e3 >= exp) {
514
+ const refreshResponse = await fetch(iss, {
515
+ method: "POST",
516
+ headers: {
517
+ "Content-Type": "application/x-amz-json-1.1",
518
+ "x-amz-target": "AWSCognitoIdentityProviderService.InitiateAuth"
519
+ },
520
+ body: JSON.stringify({
521
+ ClientId: client_id,
522
+ AuthFlow: "REFRESH_TOKEN_AUTH",
523
+ AuthParameters: {
524
+ REFRESH_TOKEN: refresh_token,
525
+ DEVICE_KEY: null
526
+ }
527
+ })
528
+ });
529
+ if (refreshResponse.status !== 200) {
530
+ throw new Error("Unable to refresh auth tokens");
531
+ }
532
+ const responseJson = await refreshResponse.json();
533
+ const newToken = {
534
+ access_token: responseJson.AuthenticationResult.AccessToken,
535
+ id_token: responseJson.AuthenticationResult.IdToken,
536
+ refresh_token
537
+ };
538
+ this.setToken(newToken);
539
+ return Promise.resolve(newToken);
540
+ }
541
+ return Promise.resolve({ access_token, id_token, refresh_token });
542
+ }
498
543
  async isAuthorized() {
499
544
  return this.isAuthenticated();
500
545
  }
@@ -510,7 +555,7 @@ mutation addPendingDocumentMutation(
510
555
  const headers = (init == null ? void 0 : init.headers) || {};
511
556
  return await fetch(input, __spreadProps(__spreadValues({}, init), {
512
557
  headers: new Headers(__spreadValues({
513
- Authorization: "Bearer " + this.getToken().id_token
558
+ Authorization: "Bearer " + (await this.getToken()).id_token
514
559
  }, headers))
515
560
  }));
516
561
  }
@@ -534,28 +579,24 @@ mutation addPendingDocumentMutation(
534
579
  return null;
535
580
  }
536
581
  }
537
- async listBranches({ owner, repo }) {
538
- const url = `${this.contentApiUrl}/list_branches?owner=${owner}&repo=${repo}`;
539
- try {
540
- const res = await this.fetchWithToken(url, {
541
- method: "GET"
542
- });
543
- return JSON.stringify(res);
544
- } catch (e) {
545
- console.error("There was an issue fetching the branch list.", e);
546
- return null;
547
- }
582
+ async listBranches() {
583
+ const url = `${this.contentApiBase}/github/${this.clientId}/list_branches`;
584
+ const res = await this.fetchWithToken(url, {
585
+ method: "GET"
586
+ });
587
+ return res.json();
548
588
  }
549
- async createBranch({ owner, repo, baseBranch, branchName }) {
550
- const url = `${this.contentApiUrl}/create_branch`;
589
+ async createBranch({ baseBranch, branchName }) {
590
+ const url = `${this.contentApiBase}/github/${this.clientId}/create_branch`;
551
591
  try {
552
592
  const res = await this.fetchWithToken(url, {
553
593
  method: "POST",
554
594
  body: {
555
- owner,
556
- repo,
557
595
  baseBranch,
558
596
  branchName
597
+ },
598
+ headers: {
599
+ "Content-Type": "application/json"
559
600
  }
560
601
  });
561
602
  return JSON.stringify(res);
@@ -656,24 +697,6 @@ function safeAssertShape(value, yupSchema) {
656
697
  return false;
657
698
  }
658
699
  }
659
- const LOCALSTORAGEKEY = "tina.isEditing";
660
- const isSSR = typeof window === "undefined";
661
- const isEditing = () => {
662
- if (!isSSR) {
663
- const isEdit = window.localStorage.getItem(LOCALSTORAGEKEY);
664
- return isEdit && isEdit === "true";
665
- }
666
- return false;
667
- };
668
- const setEditing = (isEditing2) => {
669
- if (!isSSR) {
670
- window.localStorage.setItem(LOCALSTORAGEKEY, isEditing2 ? "true" : "false");
671
- }
672
- };
673
- React.createContext({
674
- edit: isEditing(),
675
- setEdit: void 0
676
- });
677
700
  function sleep(ms) {
678
701
  return new Promise((resolve) => setTimeout(resolve, ms));
679
702
  }
@@ -737,13 +760,15 @@ const AuthWallInner = ({
737
760
  }), showChildren ? children : loginScreen ? loginScreen : null);
738
761
  };
739
762
  const TinaCloudProvider = (props) => {
763
+ const baseBranch = props.branch || "main";
764
+ const [currentBranch, setCurrentBranch] = useLocalStorage("tinacms-current-branch", baseBranch);
740
765
  useTinaAuthRedirect();
741
766
  const cms = React.useMemo(() => props.cms || new TinaCMS({
742
767
  enabled: true,
743
768
  sidebar: true
744
769
  }), [props.cms]);
745
770
  if (!cms.api.tina) {
746
- cms.api.tina = createClient(props);
771
+ cms.registerApi("tina", createClient(props));
747
772
  }
748
773
  const setupMedia = async () => {
749
774
  var _a;
@@ -759,45 +784,54 @@ const TinaCloudProvider = (props) => {
759
784
  const handleListBranches = async () => {
760
785
  const { owner, repo } = props;
761
786
  const branches = await cms.api.tina.listBranches({ owner, repo });
762
- return branches.map((branch) => branch.name);
787
+ if (!Array.isArray(branches)) {
788
+ return [];
789
+ }
790
+ return branches;
763
791
  };
764
792
  const handleCreateBranch = async (data) => {
765
793
  const newBranch = await cms.api.tina.createBranch(data);
766
794
  return newBranch;
767
795
  };
768
796
  setupMedia();
769
- const branchingEnabled = cms.flags.get("branch-switcher");
797
+ const [branchingEnabled, setBranchingEnabled] = React.useState(() => cms.flags.get("branch-switcher"));
798
+ React.useEffect(() => {
799
+ cms.events.subscribe("flag:set", ({ key, value }) => {
800
+ if (key === "branch-switcher") {
801
+ setBranchingEnabled(value);
802
+ }
803
+ });
804
+ }, [cms.events]);
770
805
  React.useEffect(() => {
771
806
  let branchSwitcher;
772
807
  if (branchingEnabled) {
773
808
  branchSwitcher = new BranchSwitcherPlugin({
774
- cms,
775
- owner: props.owner,
776
- repo: props.repo,
777
- baseBranch: props.branch || "main",
778
- currentBranch: props.branch || "main",
779
809
  listBranches: handleListBranches,
780
- createBranch: handleCreateBranch,
781
- setCurrentBranch: () => console.log(props.branch)
810
+ createBranch: handleCreateBranch
782
811
  });
783
812
  cms.plugins.add(branchSwitcher);
784
813
  }
785
814
  return () => {
786
- if (!branchingEnabled) {
787
- if (branchSwitcher) {
788
- cms.plugins.remove(branchSwitcher);
789
- }
815
+ if (branchingEnabled && branchSwitcher) {
816
+ cms.plugins.remove(branchSwitcher);
790
817
  }
791
818
  };
792
819
  }, [branchingEnabled, props.branch]);
793
- if (props.cmsCallback) {
794
- props.cmsCallback(cms);
795
- }
796
- return /* @__PURE__ */ React.createElement(TinaProvider, {
820
+ React.useEffect(() => {
821
+ if (props.cmsCallback) {
822
+ props.cmsCallback(cms);
823
+ }
824
+ }, []);
825
+ return /* @__PURE__ */ React.createElement(BranchDataProvider, {
826
+ currentBranch,
827
+ setCurrentBranch: (b) => {
828
+ setCurrentBranch(b);
829
+ }
830
+ }, /* @__PURE__ */ React.createElement(TinaProvider, {
797
831
  cms
798
832
  }, /* @__PURE__ */ React.createElement(AuthWallInner, __spreadProps(__spreadValues({}, props), {
799
833
  cms
800
- })));
834
+ }))));
801
835
  };
802
836
  const TinaCloudAuthWall = TinaCloudProvider;
803
837
  var DefaultContext = {
@@ -885,6 +919,9 @@ function BiLinkExternal(props) {
885
919
  function BiLogIn(props) {
886
920
  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
887
921
  }
922
+ function BiLogOut(props) {
923
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M16 13v-2H7V8l-5 4 5 4v-3z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
924
+ }
888
925
  function useGraphqlForms({
889
926
  query,
890
927
  variables,
@@ -898,6 +935,7 @@ function useGraphqlForms({
898
935
  const [pendingReset, setPendingReset] = React.useState(null);
899
936
  const [isLoading, setIsLoading] = React.useState(true);
900
937
  const [newUpdate, setNewUpdate] = React.useState(null);
938
+ const { currentBranch } = useBranchData();
901
939
  const updateData = async () => {
902
940
  var _a;
903
941
  if (newUpdate) {
@@ -1001,25 +1039,30 @@ function useGraphqlForms({
1001
1039
  setPendingReset(queryName);
1002
1040
  },
1003
1041
  onSubmit: async (payload2) => {
1004
- const params = transformDocumentIntoMutationRequestPayload(payload2, result.form.mutationInfo);
1005
- const variables2 = { params };
1006
- const mutationString = result.form.mutationInfo.string;
1007
- if (onSubmit) {
1008
- onSubmit({
1009
- queryString: mutationString,
1010
- mutationString,
1011
- variables: variables2
1012
- });
1013
- } else {
1014
- try {
1015
- await cms.api.tina.request(mutationString, {
1042
+ try {
1043
+ const params = transformDocumentIntoMutationRequestPayload(payload2, result.form.mutationInfo);
1044
+ const variables2 = { params };
1045
+ const mutationString = result.form.mutationInfo.string;
1046
+ if (onSubmit) {
1047
+ onSubmit({
1048
+ queryString: mutationString,
1049
+ mutationString,
1016
1050
  variables: variables2
1017
1051
  });
1018
- cms.alerts.success("Document saved!");
1019
- } catch (e) {
1020
- cms.alerts.error("There was a problem saving your document");
1021
- console.error(e);
1052
+ } else {
1053
+ try {
1054
+ await cms.api.tina.request(mutationString, {
1055
+ variables: variables2
1056
+ });
1057
+ cms.alerts.success("Document saved!");
1058
+ } catch (e) {
1059
+ cms.alerts.error("There was a problem saving your document");
1060
+ console.error(e);
1061
+ }
1022
1062
  }
1063
+ } catch (e) {
1064
+ console.error(e);
1065
+ cms.alerts.error("There was a problem saving your document");
1023
1066
  }
1024
1067
  }
1025
1068
  };
@@ -1108,7 +1151,7 @@ function useGraphqlForms({
1108
1151
  }
1109
1152
  });
1110
1153
  };
1111
- }, [queryString, JSON.stringify(variables)]);
1154
+ }, [queryString, JSON.stringify(variables), currentBranch]);
1112
1155
  return [data, isLoading];
1113
1156
  }
1114
1157
  const transformDocumentIntoMutationRequestPayload = (document2, instructions) => {
@@ -1131,6 +1174,9 @@ const transformParams = (data) => {
1131
1174
  return { [_template]: nested };
1132
1175
  } catch (e) {
1133
1176
  if (e.message === "Failed to assertShape - _template is a required field") {
1177
+ if (!data) {
1178
+ return [];
1179
+ }
1134
1180
  const accum = {};
1135
1181
  Object.entries(data).map(([keyName, value]) => {
1136
1182
  accum[keyName] = transformParams(value);
@@ -1588,12 +1634,6 @@ function gql(strings, ...args) {
1588
1634
  });
1589
1635
  return str;
1590
1636
  }
1591
- function ImFilesEmpty(props) {
1592
- return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M14.341 5.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.689 0.561 1.25 1.25 1.25h9.5c0.689 0 1.25-0.561 1.25-1.25v-7.75c0-0.224-0.068-0.615-0.659-1.421zM12.271 4.729c0.48 0.48 0.856 0.912 1.134 1.271h-2.406v-2.405c0.359 0.278 0.792 0.654 1.271 1.134v0zM14 14.75c0 0.136-0.114 0.25-0.25 0.25h-9.5c-0.136 0-0.25-0.114-0.25-0.25v-11.5c0-0.135 0.114-0.25 0.25-0.25 0 0 5.749-0 5.75 0v3.5c0 0.276 0.224 0.5 0.5 0.5h3.5v7.75z" } }, { "tag": "path", "attr": { "d": "M9.421 0.659c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.604 0.43 1.109 1 1.225v-12.725c0-0.135 0.115-0.25 0.25-0.25h7.607c-0.151-0.124-0.297-0.238-0.437-0.341z" } }] })(props);
1593
- }
1594
- function VscOpenPreview(props) {
1595
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 16 16", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "clipRule": "evenodd", "d": "M3 1h11l1 1v5.3a3.21 3.21 0 0 0-1-.3V2H9v10.88L7.88 14H3l-1-1V2l1-1zm0 12h5V2H3v11zm10.379-4.998a2.53 2.53 0 0 0-1.19.348h-.03a2.51 2.51 0 0 0-.799 3.53L9 14.23l.71.71 2.35-2.36c.325.22.7.358 1.09.4a2.47 2.47 0 0 0 1.14-.13 2.51 2.51 0 0 0 1-.63 2.46 2.46 0 0 0 .58-1 2.63 2.63 0 0 0 .07-1.15 2.53 2.53 0 0 0-1.35-1.81 2.53 2.53 0 0 0-1.211-.258zm.24 3.992a1.5 1.5 0 0 1-.979-.244 1.55 1.55 0 0 1-.56-.68 1.49 1.49 0 0 1-.08-.86 1.49 1.49 0 0 1 1.18-1.18 1.49 1.49 0 0 1 .86.08c.276.117.512.311.68.56a1.5 1.5 0 0 1-1.1 2.324z" } }] })(props);
1596
- }
1597
1637
  const Layout = ({ children }) => {
1598
1638
  return /* @__PURE__ */ React.createElement("div", {
1599
1639
  style: {
@@ -1608,14 +1648,12 @@ const Layout = ({ children }) => {
1608
1648
  }
1609
1649
  }, children);
1610
1650
  };
1611
- const GetCMS = ({ children }) => {
1612
- try {
1613
- const cms = useCMS();
1614
- return /* @__PURE__ */ React.createElement(React.Fragment, null, children(cms));
1615
- } catch (e) {
1616
- return null;
1617
- }
1618
- };
1651
+ function ImFilesEmpty(props) {
1652
+ return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M14.341 5.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.689 0.561 1.25 1.25 1.25h9.5c0.689 0 1.25-0.561 1.25-1.25v-7.75c0-0.224-0.068-0.615-0.659-1.421zM12.271 4.729c0.48 0.48 0.856 0.912 1.134 1.271h-2.406v-2.405c0.359 0.278 0.792 0.654 1.271 1.134v0zM14 14.75c0 0.136-0.114 0.25-0.25 0.25h-9.5c-0.136 0-0.25-0.114-0.25-0.25v-11.5c0-0.135 0.114-0.25 0.25-0.25 0 0 5.749-0 5.75 0v3.5c0 0.276 0.224 0.5 0.5 0.5h3.5v7.75z" } }, { "tag": "path", "attr": { "d": "M9.421 0.659c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.604 0.43 1.109 1 1.225v-12.725c0-0.135 0.115-0.25 0.25-0.25h7.607c-0.151-0.124-0.297-0.238-0.437-0.341z" } }] })(props);
1653
+ }
1654
+ function VscOpenPreview(props) {
1655
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 16 16", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "clipRule": "evenodd", "d": "M3 1h11l1 1v5.3a3.21 3.21 0 0 0-1-.3V2H9v10.88L7.88 14H3l-1-1V2l1-1zm0 12h5V2H3v11zm10.379-4.998a2.53 2.53 0 0 0-1.19.348h-.03a2.51 2.51 0 0 0-.799 3.53L9 14.23l.71.71 2.35-2.36c.325.22.7.358 1.09.4a2.47 2.47 0 0 0 1.14-.13 2.51 2.51 0 0 0 1-.63 2.46 2.46 0 0 0 .58-1 2.63 2.63 0 0 0 .07-1.15 2.53 2.53 0 0 0-1.35-1.81 2.53 2.53 0 0 0-1.211-.258zm.24 3.992a1.5 1.5 0 0 1-.979-.244 1.55 1.55 0 0 1-.56-.68 1.49 1.49 0 0 1-.08-.86 1.49 1.49 0 0 1 1.18-1.18 1.49 1.49 0 0 1 .86.08c.276.117.512.311.68.56a1.5 1.5 0 0 1-1.1 2.324z" } }] })(props);
1656
+ }
1619
1657
  const useGetCollections = (cms) => {
1620
1658
  const [collections, setCollections] = useState([]);
1621
1659
  useEffect(() => {
@@ -1633,14 +1671,98 @@ const GetCollections = ({ cms, children }) => {
1633
1671
  return null;
1634
1672
  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collections));
1635
1673
  };
1674
+ const Sidebar = ({ cms }) => {
1675
+ const { setEdit } = useEditState();
1676
+ const logout2 = () => setEdit(false);
1677
+ return /* @__PURE__ */ React.createElement(GetCollections, {
1678
+ cms
1679
+ }, (collections) => /* @__PURE__ */ React.createElement("div", {
1680
+ className: "flex flex-col w-80 lg:w-96 flex-shrink-0 bg-gradient-to-b from-white to-gray-50 border-r border-gray-200"
1681
+ }, /* @__PURE__ */ React.createElement("div", {
1682
+ className: "border-b border-gray-200"
1683
+ }, /* @__PURE__ */ React.createElement(Menu, {
1684
+ as: "div",
1685
+ className: "relative block"
1686
+ }, ({ open }) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Menu.Button, {
1687
+ className: `group w-full px-6 py-4 flex justify-between items-center transition-colors duration-150 ease-out ${open ? `bg-gray-50` : `bg-transparent`}`
1688
+ }, /* @__PURE__ */ React.createElement("span", {
1689
+ className: "text-left inline-flex items-center text-2xl tracking-wide text-gray-800 flex-1 gap-1 opacity-80 group-hover:opacity-100 transition-opacity duration-150 ease-out"
1690
+ }, /* @__PURE__ */ React.createElement("svg", {
1691
+ viewBox: "0 0 32 32",
1692
+ fill: "#EC4815",
1693
+ xmlns: "http://www.w3.org/2000/svg",
1694
+ className: "w-10 h-auto -ml-1"
1695
+ }, /* @__PURE__ */ React.createElement("path", {
1696
+ d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
1697
+ }), /* @__PURE__ */ React.createElement("path", {
1698
+ d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
1699
+ })), /* @__PURE__ */ React.createElement("span", null, "Tina Admin")), /* @__PURE__ */ React.createElement("svg", {
1700
+ width: "20",
1701
+ height: "20",
1702
+ viewBox: "0 0 20 20",
1703
+ fill: "none",
1704
+ xmlns: "http://www.w3.org/2000/svg",
1705
+ className: `flex-0 inline-block opacity-50 group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open ? `rotate-90 opacity-100` : `rotate-0`}`
1706
+ }, /* @__PURE__ */ React.createElement("g", {
1707
+ opacity: "0.3"
1708
+ }, /* @__PURE__ */ React.createElement("path", {
1709
+ d: "M7.91675 13.8086L9.16675 15.0586L14.2253 10L9.16675 4.9414L7.91675 6.1914L11.7253 10L7.91675 13.8086Z",
1710
+ fill: "currentColor"
1711
+ })))), /* @__PURE__ */ React.createElement("div", {
1712
+ className: "transform translate-y-full absolute bottom-3 right-5 w-2/3 z-50"
1713
+ }, /* @__PURE__ */ React.createElement(Transition, {
1714
+ enter: "transition duration-150 ease-out",
1715
+ enterFrom: "transform opacity-0 -translate-y-2",
1716
+ enterTo: "transform opacity-100 translate-y-0",
1717
+ leave: "transition duration-75 ease-in",
1718
+ leaveFrom: "transform opacity-100 translate-y-0",
1719
+ leaveTo: "transform opacity-0 -translate-y-2"
1720
+ }, /* @__PURE__ */ React.createElement(Menu.Items, {
1721
+ className: "w-full py-1 bg-white border border-gray-150 rounded-lg shadow-lg"
1722
+ }, /* @__PURE__ */ React.createElement(Menu.Item, null, ({ active }) => /* @__PURE__ */ React.createElement("a", {
1723
+ className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
1724
+ href: "/"
1725
+ }, /* @__PURE__ */ React.createElement(VscOpenPreview, {
1726
+ className: "w-6 h-auto mr-1.5 text-blue-400"
1727
+ }), " ", "View Website")), /* @__PURE__ */ React.createElement(Menu.Item, null, ({ active }) => /* @__PURE__ */ React.createElement("button", {
1728
+ className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
1729
+ onClick: () => logout2()
1730
+ }, /* @__PURE__ */ React.createElement(BiExit, {
1731
+ className: "w-6 h-auto mr-1.5 text-blue-400"
1732
+ }), " ", "Log out")))))))), /* @__PURE__ */ React.createElement("div", {
1733
+ className: "px-6 py-7 flex-1"
1734
+ }, /* @__PURE__ */ React.createElement("h4", {
1735
+ className: "uppercase font-bold text-sm mb-3"
1736
+ }, "Collections"), /* @__PURE__ */ React.createElement("ul", {
1737
+ className: "flex flex-col gap-4"
1738
+ }, collections.map((collection) => {
1739
+ return /* @__PURE__ */ React.createElement("li", {
1740
+ key: `${collection.name}-link`
1741
+ }, /* @__PURE__ */ React.createElement(NavLink, {
1742
+ className: ({ isActive }) => {
1743
+ return `text-lg tracking-wide ${isActive ? "text-blue-600" : ""} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
1744
+ },
1745
+ to: `/admin/collections/${collection.name}`
1746
+ }, /* @__PURE__ */ React.createElement(ImFilesEmpty, {
1747
+ className: "mr-2 h-6 opacity-80 w-auto"
1748
+ }), " ", collection.label));
1749
+ })))));
1750
+ };
1751
+ const GetCMS = ({ children }) => {
1752
+ try {
1753
+ const cms = useCMS();
1754
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, children(cms));
1755
+ } catch (e) {
1756
+ return null;
1757
+ }
1758
+ };
1636
1759
  function MdOutlineArrowBack(props) {
1637
1760
  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" } }] })(props);
1638
1761
  }
1639
- const login = () => {
1640
- setEditing(true);
1641
- window.location.reload();
1642
- };
1643
- const LoginPage = () => {
1762
+ const AuthTemplate = ({
1763
+ message,
1764
+ children
1765
+ }) => {
1644
1766
  return /* @__PURE__ */ React.createElement("div", {
1645
1767
  className: "h-screen w-full bg-gradient-to-b from-blue-900 to-gray-900 flex items-center justify-center px-4 py-6"
1646
1768
  }, /* @__PURE__ */ React.createElement("div", {
@@ -1658,12 +1780,19 @@ const LoginPage = () => {
1658
1780
  d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
1659
1781
  }), /* @__PURE__ */ React.createElement("path", {
1660
1782
  d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
1661
- })), /* @__PURE__ */ React.createElement("span", null, "Tina Admin"))), /* @__PURE__ */ React.createElement("div", {
1783
+ })), /* @__PURE__ */ React.createElement("span", null, "Tina Admin"))), message && /* @__PURE__ */ React.createElement("div", {
1662
1784
  className: "px-5 py-4 "
1663
1785
  }, /* @__PURE__ */ React.createElement("p", {
1664
1786
  className: "text-base font-sans leading-normal"
1665
- }, "Please log in to Tina Cloud to access your admin dashboard.")), /* @__PURE__ */ React.createElement("div", {
1787
+ }, message)), /* @__PURE__ */ React.createElement("div", {
1666
1788
  className: "px-5 py-4 flex gap-4 w-full justify-between"
1789
+ }, children)));
1790
+ };
1791
+ const LoginPage = () => {
1792
+ const { setEdit } = useEditState();
1793
+ const login = () => setEdit(true);
1794
+ return /* @__PURE__ */ React.createElement(AuthTemplate, {
1795
+ message: "Please log in to Tina Cloud to access your content."
1667
1796
  }, /* @__PURE__ */ React.createElement("a", {
1668
1797
  href: "/",
1669
1798
  className: "flex-1 text-center inline-flex justify-center items-center px-8 py-3 shadow-sm text-sm leading-4 font-medium rounded-full text-gray-600 border border-gray-150 hover:opacity-80 hover:bg-gray-50 focus:outline-none focus:shadow-outline-blue transition duration-150 ease-out"
@@ -1676,7 +1805,26 @@ const LoginPage = () => {
1676
1805
  style: { background: "#0084FF" }
1677
1806
  }, /* @__PURE__ */ React.createElement(BiLogIn, {
1678
1807
  className: "w-6 h-auto mr-1.5 opacity-80"
1679
- }), " Log in"))));
1808
+ }), " Log in"));
1809
+ };
1810
+ const logout = () => {
1811
+ setEditing(false);
1812
+ window.location.href = "/";
1813
+ };
1814
+ const LogoutPage = () => {
1815
+ return /* @__PURE__ */ React.createElement(AuthTemplate, null, /* @__PURE__ */ React.createElement("a", {
1816
+ href: "/",
1817
+ className: "flex-1 text-center inline-flex justify-center items-center px-8 py-3 shadow-sm text-sm leading-4 font-medium rounded-full text-gray-600 border border-gray-150 hover:opacity-80 hover:bg-gray-50 focus:outline-none focus:shadow-outline-blue transition duration-150 ease-out"
1818
+ }, /* @__PURE__ */ React.createElement(MdOutlineArrowBack, {
1819
+ className: "w-6 h-auto mr-1.5 opacity-80"
1820
+ }), " Back to site"), /* @__PURE__ */ React.createElement("button", {
1821
+ type: "submit",
1822
+ onClick: () => logout(),
1823
+ className: "flex-1 justify-center text-center inline-flex items-center px-8 py-3 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue transition duration-150 ease-out",
1824
+ style: { background: "#0084FF" }
1825
+ }, /* @__PURE__ */ React.createElement(BiLogOut, {
1826
+ className: "w-6 h-auto mr-1.5 opacity-80"
1827
+ }), " Log out"));
1680
1828
  };
1681
1829
  const DashboardPage = () => {
1682
1830
  return /* @__PURE__ */ React.createElement("div", {
@@ -1906,13 +2054,15 @@ const createDocument = async (cms, collection, template, mutationInfo, values) =
1906
2054
  includeCollection,
1907
2055
  includeTemplate
1908
2056
  });
1909
- await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
1910
- createDocument(
2057
+ await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
2058
+ createDocument(
2059
+ collection: $collection,
1911
2060
  relativePath: $relativePath,
1912
2061
  params: $params
1913
2062
  ){__typename}
1914
2063
  }`, {
1915
2064
  variables: {
2065
+ collection: collection.name,
1916
2066
  relativePath,
1917
2067
  params
1918
2068
  }
@@ -1920,7 +2070,7 @@ const createDocument = async (cms, collection, template, mutationInfo, values) =
1920
2070
  };
1921
2071
  const CollectionCreatePage = () => {
1922
2072
  const { collectionName, templateName } = useParams();
1923
- const history = useHistory();
2073
+ const navigate = useNavigate();
1924
2074
  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetDocumentFields, {
1925
2075
  cms,
1926
2076
  collectionName,
@@ -1941,7 +2091,7 @@ const CollectionCreatePage = () => {
1941
2091
  ],
1942
2092
  onSubmit: async (values) => {
1943
2093
  await createDocument(cms, collection, template, mutationInfo, values);
1944
- history.push(`/admin/collections/${collection.name}`);
2094
+ navigate(`/admin/collections/${collection.name}`);
1945
2095
  }
1946
2096
  });
1947
2097
  const formLabel = template ? `${collection.label} - Create New ${template.label}` : `${collection.label} - Create New`;
@@ -1986,19 +2136,21 @@ const GetDocument = ({
1986
2136
  }
1987
2137
  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document2));
1988
2138
  };
1989
- const updateDocument = async (cms, relativePath, mutationInfo, values) => {
2139
+ const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
1990
2140
  const { includeCollection, includeTemplate } = mutationInfo;
1991
2141
  const params = transformDocumentIntoMutationRequestPayload(values, {
1992
2142
  includeCollection,
1993
2143
  includeTemplate
1994
2144
  });
1995
- await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
2145
+ await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
1996
2146
  updateDocument(
2147
+ collection: $collection,
1997
2148
  relativePath: $relativePath,
1998
2149
  params: $params
1999
2150
  ){__typename}
2000
2151
  }`, {
2001
2152
  variables: {
2153
+ collection: collection.name,
2002
2154
  relativePath,
2003
2155
  params
2004
2156
  }
@@ -2006,7 +2158,7 @@ const updateDocument = async (cms, relativePath, mutationInfo, values) => {
2006
2158
  };
2007
2159
  const CollectionUpdatePage = () => {
2008
2160
  const { collectionName, filename } = useParams();
2009
- const history = useHistory();
2161
+ const navigate = useNavigate();
2010
2162
  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetDocumentFields, {
2011
2163
  cms,
2012
2164
  collectionName
@@ -2023,8 +2175,8 @@ const CollectionUpdatePage = () => {
2023
2175
  fields: document2.form.fields,
2024
2176
  initialValues: document2.values,
2025
2177
  onSubmit: async (values) => {
2026
- await updateDocument(cms, relativePath, mutationInfo, values);
2027
- history.push(`/admin/collections/${collection.name}`);
2178
+ await updateDocument(cms, relativePath, collection, mutationInfo, values);
2179
+ navigate(`/collections/${collection.name}`);
2028
2180
  }
2029
2181
  });
2030
2182
  return /* @__PURE__ */ React.createElement("div", {
@@ -2040,8 +2192,8 @@ const CollectionUpdatePage = () => {
2040
2192
  };
2041
2193
  const useEmbedTailwind = () => {
2042
2194
  useEffect(() => {
2043
- const isSSR2 = typeof window === "undefined";
2044
- if (!isSSR2) {
2195
+ const isSSR = typeof window === "undefined";
2196
+ if (!isSSR) {
2045
2197
  const head = document.head;
2046
2198
  const link = document.createElement("link");
2047
2199
  link.id = "tina-admin-stylesheet";
@@ -2052,106 +2204,51 @@ const useEmbedTailwind = () => {
2052
2204
  }
2053
2205
  }, []);
2054
2206
  };
2055
- const logout = () => {
2056
- setEditing(false);
2057
- window.location.reload();
2058
- };
2059
2207
  const TinaAdmin = () => {
2060
2208
  useEmbedTailwind();
2061
- const isSSR2 = typeof window === "undefined";
2062
- if (isSSR2) {
2209
+ const isSSR = typeof window === "undefined";
2210
+ const { edit } = useEditState();
2211
+ if (isSSR) {
2063
2212
  return null;
2064
2213
  }
2065
- const isEdit = isEditing();
2066
- if (!isEdit) {
2214
+ if (!edit) {
2067
2215
  return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(LoginPage, null));
2068
2216
  }
2069
- return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetCollections, {
2070
- cms
2071
- }, (collections) => /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, null, /* @__PURE__ */ React.createElement("div", {
2072
- className: "flex items-stretch h-screen overflow-hidden"
2073
- }, /* @__PURE__ */ React.createElement("div", {
2074
- className: "flex flex-col w-80 lg:w-96 flex-shrink-0 bg-gradient-to-b from-white to-gray-50 border-r border-gray-200"
2075
- }, /* @__PURE__ */ React.createElement("div", {
2076
- className: "border-b border-gray-200"
2077
- }, /* @__PURE__ */ React.createElement(Menu, {
2078
- as: "div",
2079
- className: "relative block"
2080
- }, ({ open }) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Menu.Button, {
2081
- className: `group w-full px-6 py-4 flex justify-between items-center transition-colors duration-150 ease-out ${open ? `bg-gray-50` : `bg-transparent`}`
2082
- }, /* @__PURE__ */ React.createElement("span", {
2083
- className: "text-left inline-flex items-center text-2xl tracking-wide text-gray-800 flex-1 gap-1 opacity-80 group-hover:opacity-100 transition-opacity duration-150 ease-out"
2084
- }, /* @__PURE__ */ React.createElement("svg", {
2085
- viewBox: "0 0 32 32",
2086
- fill: "#EC4815",
2087
- xmlns: "http://www.w3.org/2000/svg",
2088
- className: "w-10 h-auto -ml-1"
2089
- }, /* @__PURE__ */ React.createElement("path", {
2090
- d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
2091
- }), /* @__PURE__ */ React.createElement("path", {
2092
- d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
2093
- })), /* @__PURE__ */ React.createElement("span", null, "Tina Admin")), /* @__PURE__ */ React.createElement("svg", {
2094
- width: "20",
2095
- height: "20",
2096
- viewBox: "0 0 20 20",
2097
- fill: "none",
2098
- xmlns: "http://www.w3.org/2000/svg",
2099
- className: `flex-0 inline-block opacity-50 group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open ? `rotate-90 opacity-100` : `rotate-0`}`
2100
- }, /* @__PURE__ */ React.createElement("g", {
2101
- opacity: "0.3"
2102
- }, /* @__PURE__ */ React.createElement("path", {
2103
- d: "M7.91675 13.8086L9.16675 15.0586L14.2253 10L9.16675 4.9414L7.91675 6.1914L11.7253 10L7.91675 13.8086Z",
2104
- fill: "currentColor"
2105
- })))), /* @__PURE__ */ React.createElement("div", {
2106
- className: "transform translate-y-full absolute bottom-3 right-5 w-2/3 z-50"
2107
- }, /* @__PURE__ */ React.createElement(Transition, {
2108
- enter: "transition duration-150 ease-out",
2109
- enterFrom: "transform opacity-0 -translate-y-2",
2110
- enterTo: "transform opacity-100 translate-y-0",
2111
- leave: "transition duration-75 ease-in",
2112
- leaveFrom: "transform opacity-100 translate-y-0",
2113
- leaveTo: "transform opacity-0 -translate-y-2"
2114
- }, /* @__PURE__ */ React.createElement(Menu.Items, {
2115
- className: "w-full py-1 bg-white border border-gray-150 rounded-lg shadow-lg"
2116
- }, /* @__PURE__ */ React.createElement(Menu.Item, null, ({ active }) => /* @__PURE__ */ React.createElement("a", {
2117
- className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
2118
- href: "/"
2119
- }, /* @__PURE__ */ React.createElement(VscOpenPreview, {
2120
- className: "w-6 h-auto mr-1.5 text-blue-400"
2121
- }), " ", "View Website")), /* @__PURE__ */ React.createElement(Menu.Item, null, ({ active }) => /* @__PURE__ */ React.createElement("button", {
2122
- className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
2123
- onClick: () => logout()
2124
- }, /* @__PURE__ */ React.createElement(BiExit, {
2125
- className: "w-6 h-auto mr-1.5 text-blue-400"
2126
- }), " ", "Log out")))))))), /* @__PURE__ */ React.createElement("div", {
2127
- className: "px-6 py-7 flex-1"
2128
- }, /* @__PURE__ */ React.createElement("h4", {
2129
- className: "uppercase font-bold text-sm mb-3"
2130
- }, "Collections"), /* @__PURE__ */ React.createElement("ul", {
2131
- className: "flex flex-col gap-4"
2132
- }, collections.map((collection) => {
2133
- return /* @__PURE__ */ React.createElement("li", {
2134
- key: `${collection.name}-link`
2135
- }, /* @__PURE__ */ React.createElement(NavLink, {
2136
- className: `text-lg tracking-wide hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`,
2137
- activeClassName: "text-blue-600",
2138
- to: `/admin/collections/${collection.name}`
2139
- }, /* @__PURE__ */ React.createElement(ImFilesEmpty, {
2140
- className: "mr-2 h-6 opacity-80 w-auto"
2141
- }), " ", collection.label));
2142
- })))), /* @__PURE__ */ React.createElement("div", {
2143
- className: "flex-1"
2144
- }, /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Route, {
2145
- path: `/admin/collections/:collectionName/new`
2146
- }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null)), /* @__PURE__ */ React.createElement(Route, {
2147
- path: `/admin/collections/:collectionName/:templateName/new`
2148
- }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null)), /* @__PURE__ */ React.createElement(Route, {
2149
- path: `/admin/collections/:collectionName/:filename`
2150
- }, /* @__PURE__ */ React.createElement(CollectionUpdatePage, null)), /* @__PURE__ */ React.createElement(Route, {
2151
- path: `/admin/collections/:collectionName`
2152
- }, /* @__PURE__ */ React.createElement(CollectionListPage, null)), /* @__PURE__ */ React.createElement(Route, {
2153
- path: `/admin`
2154
- }, /* @__PURE__ */ React.createElement(DashboardPage, null)))))))));
2217
+ return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
2218
+ const isTinaAdminEnabled = cms.flags.get("tina-admin");
2219
+ if (isTinaAdminEnabled) {
2220
+ return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, null, /* @__PURE__ */ React.createElement("div", {
2221
+ className: "flex items-stretch h-screen overflow-hidden"
2222
+ }, /* @__PURE__ */ React.createElement(Sidebar, {
2223
+ cms
2224
+ }), /* @__PURE__ */ React.createElement("div", {
2225
+ className: "flex-1"
2226
+ }, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
2227
+ path: "/admin/collections/:collectionName/new",
2228
+ element: /* @__PURE__ */ React.createElement(CollectionCreatePage, null)
2229
+ }), /* @__PURE__ */ React.createElement(Route, {
2230
+ path: "/admin/collections/:collectionName/:templateName/new",
2231
+ element: /* @__PURE__ */ React.createElement(CollectionCreatePage, null)
2232
+ }), /* @__PURE__ */ React.createElement(Route, {
2233
+ path: "/admin/collections/:collectionName/:filename",
2234
+ element: /* @__PURE__ */ React.createElement(CollectionUpdatePage, null)
2235
+ }), /* @__PURE__ */ React.createElement(Route, {
2236
+ path: "/admin/collections/:collectionName",
2237
+ element: /* @__PURE__ */ React.createElement(CollectionListPage, null)
2238
+ }), /* @__PURE__ */ React.createElement(Route, {
2239
+ path: "/admin",
2240
+ element: /* @__PURE__ */ React.createElement(DashboardPage, null)
2241
+ }))))));
2242
+ } else {
2243
+ return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, null, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
2244
+ path: "/admin/logout"
2245
+ }, /* @__PURE__ */ React.createElement(LogoutPage, null)), /* @__PURE__ */ React.createElement(Route, {
2246
+ path: "/admin"
2247
+ }, () => {
2248
+ window.location.href = "/";
2249
+ }))));
2250
+ }
2251
+ });
2155
2252
  };
2156
2253
  class RouteMappingPlugin {
2157
2254
  constructor(mapper) {