create-landing-app 0.2.7 → 0.3.0

package/templates/nextjs/optional/sections/blog/files/lib/sanitize.ts

@@ -0,0 +1,25 @@
+import DOMPurify from "isomorphic-dompurify";
+
+// Allowed HTML tags for blog content
+const ALLOWED_TAGS = [
+  "p", "br", "strong", "em", "u", "a",
+  "h1", "h2", "h3", "h4", "h5", "h6",
+  "ul", "ol", "li", "blockquote",
+  "img", "pre", "code",
+  "table", "thead", "tbody", "tr", "th", "td",
+];
+
+// Allowlist of permitted HTML attributes
+const ALLOWED_ATTR = ["href", "title", "target", "rel", "src", "alt", "width", "height", "loading"];
+
+/**
+ * Sanitize raw HTML from the API before rendering with dangerouslySetInnerHTML.
+ * Strips all tags/attributes not on the allowlist.
+ */
+export function sanitizeBlogContent(html: string): string {
+  return DOMPurify.sanitize(html, {
+    ALLOWED_TAGS,
+    ALLOWED_ATTR,
+    FORCE_BODY: true,
+  });
+}

package/templates/nextjs/optional/sections/blog/files/styles/prose.css

@@ -0,0 +1,40 @@
+/* Prose styles for rendered blog HTML content */
+
+.prose { color: #374151; line-height: 1.75; }
+
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6 { font-weight: 700; color: #111827; margin-top: 1.5rem; margin-bottom: 1rem; }
+
+.prose h1 { font-size: 1.875rem; }
+.prose h2 { font-size: 1.5rem; }
+.prose h3 { font-size: 1.25rem; }
+
+.prose p          { margin-bottom: 1rem; }
+.prose a          { color: #2563eb; text-decoration: underline; }
+.prose img        { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1rem 0; }
+
+.prose ul,
+.prose ol         { margin: 1rem 0; padding-left: 1.5rem; }
+.prose ul > li    { list-style-type: disc; margin-bottom: 0.5rem; }
+.prose ol > li    { list-style-type: decimal; margin-bottom: 0.5rem; }
+
+.prose blockquote {
+  border-left: 4px solid #d1d5db;
+  padding: 0.5rem 1rem;
+  margin: 1rem 0;
+  font-style: italic;
+  color: #4b5563;
+}
+
+.prose code        { background: #f3f4f6; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; font-family: monospace; }
+.prose pre         { background: #111827; color: #f9fafb; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 1rem; }
+.prose pre code    { background: none; padding: 0; }
+
+.prose table       { width: 100%; border-collapse: collapse; margin: 1rem 0; }
+.prose th,
+.prose td          { border: 1px solid #d1d5db; padding: 0.5rem 1rem; }
+.prose th          { background: #f3f4f6; font-weight: 700; }

package/templates/nextjs/optional/sections/blog/inject/constants__common.ts

@@ -1,2 +1,2 @@
 MARKER:__NAV_LINK_BLOG__
-{ label: "Blog", href: "#blog" },
+{ label: "Blog", href: "/blogs/all" },

package/templates/nextjs/optional/sections/blog/pkg.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "isomorphic-dompurify": "^2.22.0",
+    "jsdom": "^26.0.0"
+  },
+  "devDependencies": {
+    "@types/jsdom": "^21.1.7"
+  }
+}

package/templates/nextjs/optional/sections/contact/files/components/sections/contact-section.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { motion } from "motion/react";
 import { ContactForm } from "./contact-form";