feat: add login and logout event, clean up collection page styles (#798)

This commit is contained in:
Daniel Lautzenheiser
2023-05-11 18:52:06 -04:00
committed by GitHub
parent a66068ca03
commit 80a5e11722
33 changed files with 952 additions and 2887 deletions

View File

@ -1,3 +0,0 @@
const { removeModuleScopePlugin } = require("customize-cra");
module.exports = removeModuleScopePlugin();

View File

@ -183,15 +183,15 @@
var slug = dateString + "-post-number-" + i + ".md";
window.repoFiles._posts[slug] = {
content:
'---\ntitle: "This is post # ' +
i +
`\"\ndraft: ${i % 2 === 0}` +
"\ndate: " +
dateString +
"T00:00:00.000Z\n---\n# The post is number " +
i +
`\n\n![Static CMS](https://raw.githubusercontent.com/StaticJsCMS/static-cms/main/static-cms-logo.png)
content: `---
title: "This is post # ${i}"
draft: ${i % 2 === 0}
image: /assets/uploads/lobby.jpg
date: ${dateString}T00:00:00.000Z
---
# The post is number ${i}
![Static CMS](https://raw.githubusercontent.com/StaticJsCMS/static-cms/main/static-cms-logo.png)
# Awesome Editor!
@ -312,5 +312,6 @@ widget: 'markdown',
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>

View File

@ -3,8 +3,9 @@
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "react-app-rewired start",
"build": "react-app-rewired build"
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"@babel/eslint-parser": "7.21.3",
@ -18,9 +19,8 @@
"@babel/core": "7.21.4",
"@babel/plugin-syntax-flow": "7.21.4",
"@babel/plugin-transform-react-jsx": "7.21.0",
"@vitejs/plugin-react": "^4.0.0",
"autoprefixer": "10.4.14",
"copy-webpack-plugin": "11.0.0",
"customize-cra": "1.0.0",
"eslint": "8.39.0",
"eslint-import-resolver-typescript": "3.5.5",
"eslint-plugin-cypress": "2.13.2",
@ -32,9 +32,8 @@
"postcss": "8.4.23",
"postcss-scss": "4.0.6",
"prettier": "2.8.8",
"react-app-rewired": "2.2.1",
"react-scripts": "5.0.1",
"typescript": "5.0.4",
"vite": "4.3.5",
"vite-plugin-svgr": "3.2.0",
"webpack": "5.80.0"
},
"browserslist": {

View File

@ -1,5 +1,7 @@
import cms, { useMediaAsset } from "@staticcms/core";
import "@staticcms/core/dist/main.css";
// Register all the things
cms.init();
@ -18,81 +20,111 @@ const PostPreview = ({ entry, widgetFor }) => {
);
};
const PostPreviewCard = ({ entry, theme }) => {
const PostPreviewCard = ({ entry, theme, hasLocalBackup }) => {
const date = new Date(entry.data.date);
const month = date.getMonth() + 1;
const day = date.getDate();
return h(
'div',
{ style: { width: '100%' } },
h(
'div',
{ style: { padding: '16px', width: '100%' } },
h(
'div',
{
style: {
display: 'flex',
width: '100%',
justifyContent: 'space-between',
alignItems: 'start',
gap: '4px',
color: theme === 'dark' ? 'white' : 'inherit',
},
},
h(
'div',
{
style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'baseline',
gap: '4px',
},
},
h(
'div',
{
style: {
fontSize: '14px',
const image = entry.data.image;
return (
<div style={{ width: "100%" }}>
<div
style={{
width: "100%",
borderTopLeftRadius: "8px",
borderTopRightRadius: "8px",
overflow: "hidden",
height: "140px",
backgroundSize: "cover",
backgroundRepat: "no-repeat",
backgroundPosition: "center",
objectFit: "cover",
backgroundImage: `url('${image}')`,
}}
/>
<div style={{ padding: "16px", width: "100%" }}>
<div
style={{
display: "flex",
width: "100%",
justifyContent: "space-between",
alignItems: "start",
gap: "4px",
color: theme === "dark" ? "white" : "inherit",
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "baseline",
gap: "4px",
}}
>
<div
style={{
fontSize: "14px",
fontWeight: 700,
color: 'rgb(107, 114, 128)',
fontSize: '14px',
lineHeight: '18px',
},
},
entry.data.title,
),
h(
'span',
{ style: { fontSize: '14px' } },
`${date.getFullYear()}-${month < 10 ? `0${month}` : month}-${
color: "rgb(107, 114, 128)",
lineHeight: "18px",
}}
>
{entry.data.title}
</div>
<span style={{ fontSize: "14px" }}>{`${date.getFullYear()}-${month < 10 ? `0${month}` : month}-${
day < 10 ? `0${day}` : day
}`,
),
),
h(
'div',
{
style: {
backgroundColor: entry.data.draft === true ? 'blue' : 'green',
color: 'white',
border: 'none',
padding: '2px 6px',
textAlign: 'center',
textDecoration: 'none',
display: 'inline-block',
cursor: 'pointer',
borderRadius: '4px',
fontSize: '14px',
},
},
entry.data.draft === true ? 'Draft' : 'Published',
),
),
),
}`}</span>
</div>
<div
style={{
display: "flex",
alignItems: "center",
whiteSpace: "no-wrap",
gap: "8px",
}}
>
{hasLocalBackup ? (
<div
style={{
border: "2px solid rgb(147, 197, 253)",
borderRadius: "50%",
color: "rgb(147, 197, 253)",
height: "18px",
width: "18px",
fontWeight: "bold",
fontSize: "11px",
display: "flex",
alignItems: "center",
justifyContent: "center",
textAlign: "center",
}}
title="Has local backup"
>
i
</div>
) : null}
<div
style={{
backgroundColor: entry.data.draft === true ? "rgb(37, 99, 235)" : "rgb(22, 163, 74)",
color: "white",
border: "none",
padding: "2px 6px",
textAlign: "center",
textDecoration: "none",
display: "inline-block",
cursor: "pointer",
borderRadius: "4px",
fontSize: "14px",
}}
>
{entry.data.draft === true ? "Draft" : "Published"}
</div>
</div>
</div>
</div>
</div>
);
};
@ -102,31 +134,29 @@ const PostDateFieldPreview = ({ value }) => {
const month = date.getMonth() + 1;
const day = date.getDate();
return h(
'div',
{},
`${date.getFullYear()}-${month < 10 ? `0${month}` : month}-${day < 10 ? `0${day}` : day}`,
);
return <div>{`${date.getFullYear()}-${month < 10 ? `0${month}` : month}-${day < 10 ? `0${day}` : day}`}</div>;
};
const PostDraftFieldPreview = ({ value }) => {
return h(
'div',
{
style: {
backgroundColor: value === true ? 'rgb(37 99 235)' : 'rgb(22 163 74)',
color: 'white',
border: 'none',
padding: '2px 6px',
textAlign: 'center',
textDecoration: 'none',
display: 'inline-block',
cursor: 'pointer',
borderRadius: '4px',
fontSize: '14px',
},
},
value === true ? 'Draft' : 'Published',
return (
<div
style={{
backgroundColor: value === true ? "rgb(37 99 235)" : "rgb(22 163 74)",
color: "white",
border: "none",
padding: "2px 6px",
textAlign: "center",
textDecoration: "none",
display: "inline-block",
cursor: "pointer",
borderRadius: "4px",
fontSize: "14px",
lineHeight: "16px",
height: "20px",
}}
>
{value === true ? "Draft" : "Published"}
</div>
);
};
@ -199,9 +229,9 @@ const CustomPage = () => {
};
cms.registerPreviewTemplate("posts", PostPreview);
CMS.registerPreviewCard("posts", PostPreviewCard);
CMS.registerFieldPreview('posts', 'date', PostDateFieldPreview);
CMS.registerFieldPreview('posts', 'draft', PostDraftFieldPreview);
CMS.registerPreviewCard("posts", PostPreviewCard, () => 240);
CMS.registerFieldPreview("posts", "date", PostDateFieldPreview);
CMS.registerFieldPreview("posts", "draft", PostDraftFieldPreview);
cms.registerPreviewTemplate("general", GeneralPreview);
cms.registerPreviewTemplate("authors", AuthorsPreview);
// Pass the name of a registered control to reuse with a new widget preview.

View File

@ -1,7 +1,6 @@
import React from "react";
import ReactDOM from "react-dom/client";
import "../../core/src/styles/main.css";
import "./cms";
const root = ReactDOM.createRoot(document.getElementById("root"));

View File

@ -1,7 +0,0 @@
const baseConfig = require('../../tailwind.base.config');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['../core/src/**/*.tsx'],
...baseConfig,
};

View File

@ -0,0 +1,17 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgrPlugin from "vite-plugin-svgr";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), svgrPlugin()],
assetsInclude: ["public/**/*"],
optimizeDeps: {
force: true,
include: ["@staticcms/core"],
},
build: {
commonjsOptions: { include: [/core/, /node_modules/] },
outDir: "build",
},
});