feat: secure and document book reviews system
Added rate limiting to APIs, cleaned up docs, implemented fallback logic for reviews without text, and added comprehensive n8n guide.
This commit is contained in:
denshooter
@@ -12,8 +12,8 @@ interface BookReview {
|
||||
book_title: string;
|
||||
book_author: string;
|
||||
book_image?: string;
|
||||
rating: number;
|
||||
review?: string;
|
||||
rating?: number | null;
|
||||
review?: string | null;
|
||||
finished_at?: string;
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ const StarRating = ({ rating }: { rating: number }) => {
|
||||
className={
|
||||
star <= rating
|
||||
? "text-amber-500 fill-amber-500"
|
||||
: "text-stone-300"
|
||||
: "text-stone-300 dark:text-stone-600"
|
||||
}
|
||||
/>
|
||||
))}
|
||||
@@ -86,8 +86,8 @@ const ReadBooks = () => {
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<BookCheck size={18} className="text-stone-600 flex-shrink-0" />
|
||||
<h3 className="text-lg font-bold text-stone-900">
|
||||
<BookCheck size={18} className="text-stone-600 dark:text-stone-300 flex-shrink-0" />
|
||||
<h3 className="text-lg font-bold text-stone-900 dark:text-stone-100">
|
||||
{t("title")} ({reviews.length})
|
||||
</h3>
|
||||
</div>
|
||||
@@ -108,11 +108,11 @@ const ReadBooks = () => {
|
||||
scale: 1.02,
|
||||
transition: { duration: 0.4, ease: "easeOut" },
|
||||
}}
|
||||
className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-teal/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm hover:border-liquid-mint/50 hover:from-liquid-mint/20 hover:via-liquid-sky/15 hover:to-liquid-teal/20 transition-all duration-500 ease-out"
|
||||
className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-teal/15 dark:from-stone-800 dark:via-stone-800 dark:to-stone-700 border-2 border-liquid-mint/30 dark:border-stone-700 rounded-xl p-5 backdrop-blur-sm hover:border-liquid-mint/50 dark:hover:border-stone-600 hover:from-liquid-mint/20 hover:via-liquid-sky/15 hover:to-liquid-teal/20 transition-all duration-500 ease-out"
|
||||
>
|
||||
{/* Background Blob */}
|
||||
<motion.div
|
||||
className="absolute -bottom-8 -left-8 w-28 h-28 bg-gradient-to-br from-liquid-mint/20 to-liquid-sky/20 rounded-full blur-2xl"
|
||||
className="absolute -bottom-8 -left-8 w-28 h-28 bg-gradient-to-br from-liquid-mint/20 to-liquid-sky/20 dark:from-stone-700 dark:to-stone-600 rounded-full blur-2xl"
|
||||
animate={{
|
||||
scale: [1, 1.15, 1],
|
||||
opacity: [0.3, 0.45, 0.3],
|
||||
@@ -134,7 +134,7 @@ const ReadBooks = () => {
|
||||
transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
<div className="relative w-20 h-[7.5rem] sm:w-24 sm:h-32 rounded-lg overflow-hidden shadow-lg border-2 border-white/50">
|
||||
<div className="relative w-20 h-[7.5rem] sm:w-24 sm:h-32 rounded-lg overflow-hidden shadow-lg border-2 border-white/50 dark:border-stone-600">
|
||||
<Image
|
||||
src={review.book_image}
|
||||
alt={review.book_title}
|
||||
@@ -149,31 +149,33 @@ const ReadBooks = () => {
|
||||
|
||||
{/* Book Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-base font-bold text-stone-900 mb-0.5 line-clamp-2">
|
||||
<h4 className="text-base font-bold text-stone-900 dark:text-stone-100 mb-0.5 line-clamp-2">
|
||||
{review.book_title}
|
||||
</h4>
|
||||
<p className="text-sm text-stone-600 mb-2 line-clamp-1">
|
||||
<p className="text-sm text-stone-600 dark:text-stone-400 mb-2 line-clamp-1">
|
||||
{review.book_author}
|
||||
</p>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<StarRating rating={review.rating} />
|
||||
<span className="text-xs text-stone-500 font-medium">
|
||||
{review.rating}/5
|
||||
</span>
|
||||
</div>
|
||||
{/* Rating (Optional) */}
|
||||
{review.rating && review.rating > 0 && (
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<StarRating rating={review.rating} />
|
||||
<span className="text-xs text-stone-500 dark:text-stone-400 font-medium">
|
||||
{review.rating}/5
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Review Text */}
|
||||
{/* Review Text (Optional) */}
|
||||
{review.review && (
|
||||
<p className="text-sm text-stone-700 leading-relaxed line-clamp-3 italic">
|
||||
<p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed line-clamp-3 italic">
|
||||
“{review.review}”
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Finished Date */}
|
||||
{review.finished_at && (
|
||||
<p className="text-xs text-stone-400 mt-2">
|
||||
<p className="text-xs text-stone-400 dark:text-stone-500 mt-2">
|
||||
{t("finishedAt")}{" "}
|
||||
{new Date(review.finished_at).toLocaleDateString(
|
||||
locale === "de" ? "de-DE" : "en-US",
|
||||
@@ -193,7 +195,7 @@ const ReadBooks = () => {
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="w-full flex items-center justify-center gap-1.5 py-2.5 text-sm font-medium text-stone-600 hover:text-stone-800 rounded-lg border-2 border-dashed border-stone-200 hover:border-stone-300 transition-colors duration-300"
|
||||
className="w-full flex items-center justify-center gap-1.5 py-2.5 text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200 rounded-lg border-2 border-dashed border-stone-200 dark:border-stone-700 hover:border-stone-300 dark:hover:border-stone-600 transition-colors duration-300"
|
||||
>
|
||||
{expanded ? (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user