kennethscoffee/starr-philproperties
1
0
Fork 0
mirror of https://github.com/rgrgogu/new_starr.git synced 2026-09-27 00:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

try to deploy

Browse Source 
Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
This commit is contained in:
kennethobsequio
2026-07-13 21:27:56 +08:00
parent bfc4b9fc67
commit b1805cfe4d
87 changed files with 798 additions and 718 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/generic/Blocks/Admin/AudioBlock.jsx
+2
View File
@@ -147,6 +147,7 @@ export function AudioBlock({ content, onUpdate, readOnly = false }) {
// artist — cleared on new pick so stale artist doesn't carry over
// thumbnail — cover art from asset.thumbnail_url
// tag — file extension badge e.g. "MP3"
// duration_seconds — probed media length, read by duration.util.js on save
//
const handleSelect = (asset) => {
onUpdate({
@@ -158,6 +159,7 @@ export function AudioBlock({ content, onUpdate, readOnly = false }) {
artist: "",
thumbnail: asset.thumbnail_url ?? null,
tag: asset.extension?.toUpperCase() ?? "",
duration_seconds: Number(asset.duration) || 0,
});
setPlaying(false);
setCurrentTime(0);
src/components/generic/Blocks/Admin/MarkdownBlock.jsx
+1 -120
View File
@@ -8,124 +8,6 @@ import {
Link2, List, ListOrdered, Quote, Minus, Eye, Pencil,
} from "lucide-react";
// ─── Shared markdown styles ───────────────────────────────────────────────────
// Exported so Client/MarkdownBlock can import and inject the same rules.
export const MARKDOWN_STYLES = `
.md-body { line-height: 1.7; font-size: 1rem; }
.md-body h1 { font-size: 1.75rem; font-weight: 700; margin: 1.25rem 0 0.5rem; line-height: 1.2; }
.md-body h2 { font-size: 1.375rem; font-weight: 600; margin: 1.1rem 0 0.45rem; line-height: 1.25; }
.md-body h3 { font-size: 1.125rem; font-weight: 600; margin: 1rem 0 0.4rem; line-height: 1.3; }
.md-body h4 { font-size: 1rem; font-weight: 600; margin: 0.9rem 0 0.35rem; }
.md-body p { margin: 0 0 0.85rem; line-height: 1.75; }
.md-body ul { list-style: disc; padding-left: 1.4rem; margin: 0.4rem 0 0.85rem; }
.md-body ol { list-style: decimal; padding-left: 1.4rem; margin: 0.4rem 0 0.85rem; }
.md-body li { margin-bottom: 0.3rem; line-height: 1.7; }
/* Task list checkboxes */
.md-body input[type="checkbox"] { margin-right: 0.4rem; accent-color: hsl(var(--primary)); }
.md-body a { color: hsl(var(--primary)); text-decoration: underline; }
.md-body strong { font-weight: 700; }
.md-body em { font-style: italic; }
.md-body del { text-decoration: line-through; opacity: 0.7; }
/* Inline code */
.md-body :not(pre) > code {
font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
font-size: 0.875em;
background: hsl(var(--muted));
color: hsl(var(--foreground));
padding: 0.1rem 0.35rem;
border-radius: 0.25rem;
border: 1px solid hsl(var(--border));
word-break: break-word;
}
/* Code block */
.md-body pre {
background: hsl(220 13% 12%);
color: hsl(220 14% 88%);
border-radius: 0.5rem;
padding: 0.875rem 1rem;
overflow-x: auto;
margin: 0.75rem 0;
border: 1px solid hsl(220 13% 22%);
-webkit-overflow-scrolling: touch;
}
.md-body pre code {
background: none;
border: none;
padding: 0;
font-size: 0.875rem;
color: inherit;
white-space: pre;
word-break: normal;
font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
}
/* Blockquote */
.md-body blockquote {
border-left: 3px solid hsl(var(--primary));
margin: 0.75rem 0;
padding: 0.4rem 0 0.4rem 1rem;
color: hsl(var(--muted-foreground));
font-style: italic;
}
.md-body blockquote p { margin-bottom: 0; }
/* Horizontal rule */
.md-body hr {
border: none;
border-top: 1px solid hsl(var(--border));
margin: 1.25rem 0;
}
/* Tables (GFM) — mirrors WYSIWYG table technique: display:block + box-shadow borders */
.md-body table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-collapse: separate;
border-spacing: 0;
margin: 0.75rem 0;
font-size: 0.875rem;
border: 1.5px solid #cbd5e1;
border-radius: 0.375rem;
}
.md-body th {
background: #f1f5f9;
color: #1e293b;
font-weight: 600;
text-align: left;
padding: 0.45rem 0.75rem;
white-space: nowrap;
box-shadow: inset -1.5px -1.5px 0 #cbd5e1, inset 1.5px 1.5px 0 #cbd5e1;
}
.md-body td {
padding: 0.4rem 0.75rem;
vertical-align: top;
word-break: break-word;
min-width: 4rem;
box-shadow: inset -1.5px -1.5px 0 #cbd5e1, inset 1.5px 1.5px 0 #cbd5e1;
}
.md-body tbody tr:nth-child(even) td { background: #f8fafc; }
@media (min-width: 1024px) {
.md-body { font-size: 1.05rem; }
.md-body h1 { font-size: 2rem; }
.md-body h2 { font-size: 1.5rem; }
.md-body h3 { font-size: 1.25rem; }
.md-body table { display: table; }
}
`;
// ─── Toolbar button ───────────────────────────────────────────────────────────
function ToolbarBtn({ title, onClick, children, active }) {
@@ -248,9 +130,8 @@ export function MarkdownBlock({ content, onUpdate }) {
{/* ── Edit / Preview ── */}
{preview ? (
<div className="min-h-[180px] px-3 py-3">
<style>{MARKDOWN_STYLES}</style>
{body.trim() ? (
<div className="md-body text-sm">
<div className="typeset text-sm">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{body}</ReactMarkdown>
</div>
) : (
src/components/generic/Blocks/Admin/TextBlock.jsx
+2 -246
View File
@@ -45,248 +45,6 @@ const FORMAT_OPTIONS = [
{ label: "Heading 3", val: "h3" },
];
// ─── Shared styles ────────────────────────────────────────────────────────────
export const WYSIWYG_STYLES = `
/* ── Base (mobile) ────────────────────────────────────────────────────── */
.wysiwyg-editor { line-height: 1.6; }
.wysiwyg-editor h1, .wysiwyg-preview h1 { font-size: 1.375rem; font-weight: 700; margin: 1rem 0 0.4rem; line-height: 1.2; }
.wysiwyg-editor h2, .wysiwyg-preview h2 { font-size: 1.125rem; font-weight: 600; margin: 1rem 0 0.4rem; line-height: 1.3; }
.wysiwyg-editor h3, .wysiwyg-preview h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.4rem; line-height: 1.4; }
.wysiwyg-editor p,
.wysiwyg-preview p {
margin: 0 0 0.75rem 0;
text-align: left;
line-height: 1.65;
font-size: 0.9375rem;
}
.wysiwyg-editor ul, .wysiwyg-preview ul { list-style: disc; padding-left: 1.1rem; margin: 0.4rem 0 0.75rem; }
.wysiwyg-editor ol, .wysiwyg-preview ol { list-style: decimal; padding-left: 1.1rem; margin: 0.4rem 0 0.75rem; }
.wysiwyg-editor li, .wysiwyg-preview li {
margin-bottom: 0.3rem;
line-height: 1.65;
font-size: 0.9375rem;
}
.wysiwyg-editor a, .wysiwyg-preview a { color: hsl(var(--primary)); text-decoration: underline; }
/* Inline code */
.wysiwyg-editor code, .wysiwyg-preview code {
font-family: 'Fira Code', 'Cascadia Code', 'Courier New', Courier, monospace;
font-size: 0.875em;
background: hsl(var(--muted));
color: hsl(var(--foreground));
padding: 0.1rem 0.35rem;
border-radius: 0.25rem;
border: 1px solid hsl(var(--border));
white-space: pre-wrap;
word-break: break-word;
}
/* Code block */
.wysiwyg-editor pre, .wysiwyg-preview pre {
background: hsl(220 13% 12%);
color: hsl(220 14% 88%);
border-radius: 0.5rem;
padding: 0.875rem 1rem;
overflow-x: auto;
margin: 0.75rem 0;
border: 1px solid hsl(220 13% 22%);
-webkit-overflow-scrolling: touch;
}
.wysiwyg-editor pre code, .wysiwyg-preview pre code {
background: none;
border: none;
padding: 0;
font-size: 0.875rem;
color: inherit;
white-space: pre;
word-break: normal;
}
.wysiwyg-editor a.doc-link,
.wysiwyg-preview a.doc-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.1rem 0.4rem;
border-radius: 0.375rem;
background: hsl(var(--muted));
color: hsl(var(--foreground));
font-size: 0.75rem;
text-decoration: none;
border: 1px solid hsl(var(--border));
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wysiwyg-editor a.doc-link::before,
.wysiwyg-preview a.doc-link::before {
content: "📄";
font-size: 0.7rem;
flex-shrink: 0;
}
/* Table — scrollable on mobile */
.wysiwyg-editor table,
.wysiwyg-preview table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-collapse: separate;
border-spacing: 0;
margin: 0.6rem 0;
font-size: 0.75rem;
table-layout: auto;
border: 1.5px solid #cbd5e1;
border-radius: 0.375rem;
}
.wysiwyg-editor th,
.wysiwyg-preview th {
background: #f1f5f9;
color: #1e293b;
font-weight: 600;
text-align: left;
padding: 0.35rem 0.5rem;
white-space: nowrap;
box-shadow: inset -1.5px -1.5px 0 #cbd5e1, inset 1.5px 1.5px 0 #cbd5e1;
}
.wysiwyg-editor td,
.wysiwyg-preview td {
padding: 0.35rem 0.5rem;
vertical-align: top;
word-break: break-word;
min-width: 4rem;
box-shadow: inset -1.5px -1.5px 0 #cbd5e1, inset 1.5px 1.5px 0 #cbd5e1;
}
.wysiwyg-preview tr:nth-child(even) td { background: #f8fafc; }
.wysiwyg-editor td:focus,
.wysiwyg-editor th:focus {
outline: 2px solid hsl(var(--ring));
outline-offset: -2px;
background: hsl(var(--accent) / 0.2);
}
/* ── Phone (≥ 320px) ─────────────────────────────────────────────────── */
@media (min-width: 320px) {
.wysiwyg-editor { line-height: 1.7; }
.wysiwyg-editor h1, .wysiwyg-preview h1 { font-size: 1.625rem; margin: 1.1rem 0 0.45rem; }
.wysiwyg-editor h2, .wysiwyg-preview h2 { font-size: 1.3rem; margin: 1.1rem 0 0.45rem; }
.wysiwyg-editor h3, .wysiwyg-preview h3 { font-size: 1.125rem; margin: 1.1rem 0 0.45rem; }
.wysiwyg-editor p,
.wysiwyg-preview p {
font-size: 1rem;
line-height: 1.7;
text-align: justify;
margin: 0 0 0.8rem 0;
}
.wysiwyg-editor ul, .wysiwyg-preview ul { padding-left: 1.35rem; margin: 0.45rem 0 0.8rem; }
.wysiwyg-editor ol, .wysiwyg-preview ol { padding-left: 1.35rem; margin: 0.45rem 0 0.8rem; }
.wysiwyg-editor li, .wysiwyg-preview li { font-size: 1rem; line-height: 1.7; margin-bottom: 0.35rem; }
.wysiwyg-editor a.doc-link,
.wysiwyg-preview a.doc-link { font-size: 0.8rem; padding: 0.1rem 0.45rem; gap: 0.28rem; }
.wysiwyg-editor table,
.wysiwyg-preview table { font-size: 0.8125rem; margin: 0.7rem 0; }
.wysiwyg-editor th,
.wysiwyg-preview th { padding: 0.45rem 0.65rem; }
.wysiwyg-editor td,
.wysiwyg-preview td { padding: 0.4rem 0.65rem; min-width: 5rem; }
}
/* ── Tablet (≥ 640px) ─────────────────────────────────────────────────── */
@media (min-width: 640px) {
.wysiwyg-editor { line-height: 1.7; }
.wysiwyg-editor h1, .wysiwyg-preview h1 { font-size: 1.625rem; margin: 1.1rem 0 0.45rem; }
.wysiwyg-editor h2, .wysiwyg-preview h2 { font-size: 1.3rem; margin: 1.1rem 0 0.45rem; }
.wysiwyg-editor h3, .wysiwyg-preview h3 { font-size: 1.125rem; margin: 1.1rem 0 0.45rem; }
.wysiwyg-editor p,
.wysiwyg-preview p {
font-size: 1rem;
line-height: 1.7;
text-align: justify;
margin: 0 0 0.8rem 0;
}
.wysiwyg-editor ul, .wysiwyg-preview ul { padding-left: 1.35rem; margin: 0.45rem 0 0.8rem; }
.wysiwyg-editor ol, .wysiwyg-preview ol { padding-left: 1.35rem; margin: 0.45rem 0 0.8rem; }
.wysiwyg-editor li, .wysiwyg-preview li { font-size: 1rem; line-height: 1.7; margin-bottom: 0.35rem; }
.wysiwyg-editor a.doc-link,
.wysiwyg-preview a.doc-link { font-size: 0.8rem; padding: 0.1rem 0.45rem; gap: 0.28rem; }
.wysiwyg-editor table,
.wysiwyg-preview table { font-size: 0.8125rem; margin: 0.7rem 0; }
.wysiwyg-editor th,
.wysiwyg-preview th { padding: 0.45rem 0.65rem; }
.wysiwyg-editor td,
.wysiwyg-preview td { padding: 0.4rem 0.65rem; min-width: 5rem; }
}
/* ── Desktop (≥ 1024px) ───────────────────────────────────────────────── */
@media (min-width: 1024px) {
.wysiwyg-editor h1, .wysiwyg-preview h1 { font-size: 1.875rem; margin: 1.25rem 0 0.5rem; }
.wysiwyg-editor h2, .wysiwyg-preview h2 { font-size: 1.5rem; margin: 1.25rem 0 0.5rem; }
.wysiwyg-editor h3, .wysiwyg-preview h3 { font-size: 1.25rem; margin: 1.25rem 0 0.5rem; }
.wysiwyg-editor p,
.wysiwyg-preview p { font-size: 1.08rem; line-height: 1.75; margin: 0 0 0.85rem 0; }
.wysiwyg-editor ul, .wysiwyg-preview ul { padding-left: 1.5rem; margin: 0.5rem 0 0.85rem; }
.wysiwyg-editor ol, .wysiwyg-preview ol { padding-left: 1.5rem; margin: 0.5rem 0 0.85rem; }
.wysiwyg-editor li, .wysiwyg-preview li { font-size: 1.08em; line-height: 1.75; margin-bottom: 0.4rem; }
.wysiwyg-editor a.doc-link,
.wysiwyg-preview a.doc-link { font-size: 0.8125rem; padding: 0.1rem 0.5rem; gap: 0.3rem; }
.wysiwyg-editor table,
.wysiwyg-preview table {
display: table;
font-size: 0.875rem;
margin: 0.75rem 0;
table-layout: fixed;
}
.wysiwyg-editor th,
.wysiwyg-preview th { padding: 0.5rem 0.75rem; }
.wysiwyg-editor td,
.wysiwyg-preview td { padding: 0.45rem 0.75rem; min-width: 2rem; }
}
`;
// ─── Table picker popover ─────────────────────────────────────────────────────
// A small grid that lets the user hover to choose rows × columns (up to 8×8),
// then click to confirm. Rendered inline in the toolbar.
@@ -618,10 +376,8 @@ export function RichTextEditor({ blockId, value, onChange, readOnly = false }) {
contentEditable
suppressContentEditableWarning
onInput={() => onChange(editorRef.current.innerHTML)}
className="wysiwyg-editor min-h-[120px] px-3 m-0 py-0 text-sm focus:outline-none"
className="typeset min-h-[120px] px-3 m-0 py-0 text-sm focus:outline-none"
/>
<style>{WYSIWYG_STYLES}</style>
</div>
{/* Table size picker */}
@@ -651,7 +407,7 @@ export function TextBlock({ content, onUpdate, blockId, readOnly = false }) {
if (readOnly) {
return (
<div
className="wysiwyg-preview text-sm"
className="typeset text-sm"
dangerouslySetInnerHTML={{ __html: content.body ?? "" }}
/>
);
src/components/generic/Blocks/Admin/TextVideoBlock.jsx
+1
View File
@@ -115,6 +115,7 @@ export function TextVideoBlock({ content, onUpdate, blockId, readOnly = false })
storage_provider: asset.storage_provider ?? null,
url: asset.file_url,
thumbnail_url: asset.thumbnail_url ?? null,
duration_seconds: Number(asset.duration) || 0,
})}
/>
)}
src/components/generic/Blocks/Admin/VideoBlock.jsx
+7 -5
View File
@@ -129,11 +129,12 @@ export function VideoBlock({ content, onUpdate, readOnly = false }) {
// Clean object — no ...content spread so stale data never carries over.
//
// Fields saved:
// asset_id — used by client for the secure token flow
// url — used by admin player (direct src); ignored by client for S3
// thumbnail_url — poster image for the video player
// title — display name (shown in any title-aware blocks)
// tag — file extension badge e.g. "MP4"
// asset_id — used by client for the secure token flow
// url — used by admin player (direct src); ignored by client for S3
// thumbnail_url — poster image for the video player
// title — display name (shown in any title-aware blocks)
// tag — file extension badge e.g. "MP4"
// duration_seconds — probed media length, read by duration.util.js on save
//
const handleSelect = (asset) => {
onUpdate({
@@ -143,6 +144,7 @@ export function VideoBlock({ content, onUpdate, readOnly = false }) {
thumbnail_url: asset.thumbnail_url ?? null,
title: asset.display_name,
tag: asset.extension?.toUpperCase() ?? "",
duration_seconds: Number(asset.duration) || 0,
});
setPlaying(false);
setProgress(0);
src/components/generic/Blocks/Client/MarkdownBlock.jsx
+3 -7
View File
@@ -1,6 +1,5 @@
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { MARKDOWN_STYLES } from "@/components/generic/Blocks/Admin/MarkdownBlock";
export function MarkdownBlock({ content }) {
const body = content.body ?? "";
@@ -14,11 +13,8 @@ export function MarkdownBlock({ content }) {
}
return (
<>
<style>{MARKDOWN_STYLES}</style>
<div className="md-body">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{body}</ReactMarkdown>
</div>
</>
<div className="typeset">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{body}</ReactMarkdown>
</div>
);
}
src/components/generic/Blocks/Client/TextBlock.jsx
+4 -9
View File
@@ -1,16 +1,11 @@
import { WYSIWYG_STYLES } from "@/components/generic/Blocks/Admin/TextBlock";
export function TextBlock({ content }) {
if (!content.body) {
return <div className="text-xs text-muted-foreground italic py-2">Empty text block</div>;
}
return (
<>
<style>{WYSIWYG_STYLES}</style>
<div
className="wysiwyg-preview text-sm"
dangerouslySetInnerHTML={{ __html: content.body }}
/>
</>
<div
className="typeset text-sm"
dangerouslySetInnerHTML={{ __html: content.body }}
/>
);
}
src/components/generic/Blocks/Client/TextImageBlock.jsx
+8 -12
View File
@@ -1,19 +1,15 @@
import { WYSIWYG_STYLES } from "@/components/generic/Blocks/Admin/TextBlock";
import { ImageBlock } from "./ImageBlock";
export function TextImageBlock({ content }) {
const imgLeft = content.image_position === "left";
return (
<>
<style>{WYSIWYG_STYLES}</style>
<div className="flex flex-col gap-6 items-start sm:grid sm:grid-cols-2 sm:gap-6">
{imgLeft && <ImageBlock content={content} />}
<div
className="wysiwyg-preview text-sm w-full"
dangerouslySetInnerHTML={{ __html: content.body || "<p class='text-muted-foreground italic'>Empty text</p>" }}
/>
{!imgLeft && <ImageBlock content={content} />}
</div>
</>
<div className="flex flex-col gap-6 items-start sm:grid sm:grid-cols-2 sm:gap-6">
{imgLeft && <ImageBlock content={content} />}
<div
className="typeset text-sm w-full"
dangerouslySetInnerHTML={{ __html: content.body || "<p class='text-muted-foreground italic'>Empty text</p>" }}
/>
{!imgLeft && <ImageBlock content={content} />}
</div>
);
}
src/components/generic/Blocks/Client/TextVideoBlock.jsx
+10 -14
View File
@@ -1,21 +1,17 @@
import { WYSIWYG_STYLES } from "@/components/generic/Blocks/Admin/TextBlock";
import { VideoBlock } from "./VideoBlock";
export function TextVideoBlock({ content }) {
const vidLeft = content.video_position === "left";
return (
<>
<style>{WYSIWYG_STYLES}</style>
<div className="flex flex-col gap-6 items-start sm:grid sm:grid-cols-2 sm:gap-6">
{vidLeft && <VideoBlock content={content} />}
<div
className="wysiwyg-preview text-sm w-full"
dangerouslySetInnerHTML={{
__html: content.body || "<p class='text-muted-foreground italic'>Empty text</p>",
}}
/>
{!vidLeft && <VideoBlock content={content} />}
</div>
</>
<div className="flex flex-col gap-6 items-start sm:grid sm:grid-cols-2 sm:gap-6">
{vidLeft && <VideoBlock content={content} />}
<div
className="typeset text-sm w-full"
dangerouslySetInnerHTML={{
__html: content.body || "<p class='text-muted-foreground italic'>Empty text</p>",
}}
/>
{!vidLeft && <VideoBlock content={content} />}
</div>
);
}