@goodfellow-cms/admin 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodfellow-cms/admin",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Goodfellow's admin panel: a visual editor for a site's pages, layout and settings.",
   "keywords": [
     "goodfellow",
@@ -10,12 +10,12 @@
     "admin-panel",
     "visual-editor"
   ],
-  "homepage": "https://chartung17.github.io/goodfellow-cms/docs/edit-pages",
-  "bugs": "https://github.com/chartung17/goodfellow-cms/issues",
+  "homepage": "https://goodfellow-cms.github.io/goodfellow-cms/docs/edit-pages",
+  "bugs": "https://github.com/goodfellow-cms/goodfellow-cms/issues",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/chartung17/goodfellow-cms.git",
+    "url": "git+https://github.com/goodfellow-cms/goodfellow-cms.git",
     "directory": "packages/admin"
   },
   "type": "module",
@@ -49,10 +49,10 @@
     "codemirror": "6.0.2",
     "turndown": "7.2.4",
     "turndown-plugin-gfm": "1.0.2",
-    "@goodfellow-cms/ai": "0.1.0",
-    "@goodfellow-cms/registry": "0.1.0",
-    "@goodfellow-cms/core": "0.1.0",
-    "@goodfellow-cms/react": "0.1.0"
+    "@goodfellow-cms/core": "0.2.0",
+    "@goodfellow-cms/registry": "0.2.0",
+    "@goodfellow-cms/ai": "0.2.0",
+    "@goodfellow-cms/react": "0.2.0"
   },
   "peerDependencies": {
     "@puckeditor/core": "0.23.0",

package/styles.css

@@ -20,6 +20,8 @@
   --gfa-success-bg: light-dark(#ecfdf5, #052e1c);
   --gfa-success-text: light-dark(#065f46, #6ee7b7);
   --gfa-success-border: light-dark(#a7f3d0, #065f46);
+  --gfa-published-bg: light-dark(#047857, #34d399);
+  --gfa-published-text: light-dark(#ffffff, #022c22);
   --gfa-error-bg: light-dark(#fef2f2, #3b0d0d);
   --gfa-error-text: light-dark(#991b1b, #fca5a5);
   --gfa-demo-bg: light-dark(#fef9c3, #422006);
@@ -164,11 +166,46 @@ body,
 }
 
 .gfa-header-actions {
+  position: relative;
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   gap: 8px;
 }
 
+/* "Published.", just under the Publish button, for a few seconds. */
+.gfa-published {
+  position: fixed;
+  z-index: 1000;
+  width: max-content;
+  max-width: 320px;
+  margin: 0;
+  padding: 8px 14px;
+  border-radius: var(--gfa-radius);
+  background: var(--gfa-published-bg);
+  color: var(--gfa-published-text);
+  font-weight: 600;
+  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
+  animation: gfa-published-in 150ms ease-out;
+}
+
+.gfa-published::before {
+  content: "✓ ";
+}
+
+@keyframes gfa-published-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gfa-published {
+    animation: none;
+  }
+}
+
 .gfa-screen-header h1,
 .gfa-screen > h1 {
   margin: 0;
@@ -1226,3 +1263,212 @@ body,
   font: inherit;
   font-size: 14px;
 }
+
+/* The Domain screen's records: values such as verification codes are long and unbroken. */
+.gfa-records code {
+  overflow-wrap: anywhere;
+}
+
+/* Version history */
+.gfa-versions-screen {
+  max-width: 1400px;
+}
+
+.gfa-versions-layout {
+  display: grid;
+  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
+  gap: 24px;
+  align-items: start;
+}
+
+.gfa-versions {
+  list-style: none;
+  margin: 12px 0;
+  padding: 0;
+  display: grid;
+  gap: 6px;
+}
+
+.gfa-version {
+  display: grid;
+  gap: 2px;
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--gfa-border);
+  border-radius: var(--gfa-radius);
+  background: var(--gfa-bg);
+  color: var(--gfa-text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.gfa-version[aria-pressed="true"] {
+  border-color: var(--gfa-accent);
+  background: var(--gfa-current-bg);
+}
+
+.gfa-version-message {
+  font-weight: 600;
+}
+
+.gfa-version-detail {
+  display: grid;
+  gap: 12px;
+}
+
+.gfa-version-preview {
+  position: relative;
+  height: 70vh;
+  border: 1px solid var(--gfa-border);
+  border-radius: var(--gfa-radius);
+  overflow: hidden;
+}
+
+@media (max-width: 900px) {
+  .gfa-versions-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Editors */
+.gfa-editor-person {
+  display: grid;
+  gap: 2px;
+}
+
+.gfa-owner-token {
+  padding: 16px;
+  border: 1px solid var(--gfa-border);
+  border-radius: var(--gfa-radius);
+}
+
+.gfa-owner-token ol {
+  margin: 0;
+  padding-left: 20px;
+}
+
+/* Failed rebuilds */
+.gfa-deploy .gfa-deploy-why {
+  padding: 0 4px;
+  font-size: inherit;
+  text-decoration: underline;
+}
+
+.gfa-build-problem {
+  display: grid;
+  gap: 8px;
+  max-width: 560px;
+}
+
+.gfa-build-problem p {
+  margin: 0;
+}
+
+/* Releases updates skip, each with a way to allow it again. */
+.gfa-update-skipped {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.25rem;
+}
+
+.gfa-update-skip {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+/* Choosing what a new collection starts with. */
+.gfa-choice-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+/* An event's dates, times and repeats, in an item's fields. */
+.gfa-event-field {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.gfa-event-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.gfa-event-part {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 13px;
+  color: var(--gfa-muted);
+}
+
+.gfa-event-row > .gfa-event-part {
+  flex: 1 1 140px;
+}
+
+.gfa-event-repeat {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-left: 12px;
+  border-left: 2px solid var(--gfa-border);
+}
+
+.gfa-event-interval input {
+  max-width: 6rem;
+}
+
+.gfa-tags-field {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.gfa-event-days {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 13px;
+}
+
+.gfa-event-days legend {
+  margin-bottom: 4px;
+  color: var(--gfa-muted);
+}
+
+.gfa-event-skips {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--gfa-text);
+}
+
+.gfa-event-skip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}