feat: add login and logout event, clean up collection page styles (#798)
This commit is contained in:
Daniel Lautzenheiser
committed by
GitHub
GitHub
parent
a66068ca03
commit
80a5e11722
@ -1,3 +0,0 @@
|
||||
const { removeModuleScopePlugin } = require("customize-cra");
|
||||
|
||||
module.exports = removeModuleScopePlugin();
|
||||
@ -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
|
||||
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}
|
||||
|
||||
|
||||
|
||||
# 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>
|
||||
@ -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": {
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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"));
|
||||
@ -1,7 +0,0 @@
|
||||
const baseConfig = require('../../tailwind.base.config');
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['../core/src/**/*.tsx'],
|
||||
...baseConfig,
|
||||
};
|
||||
17
packages/demo/vite.config.ts
Normal file
17
packages/demo/vite.config.ts
Normal 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",
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user