Implement hybrid citation system with copy buttons and 'How to Cite'
NEW CITATION FEATURES (Working Template):
1. CopyButton Component (src/components/CopyButton.tsx)
- One-click citation copying
- Visual feedback (Check icon on copy)
- Reusable across all claim pages
- Supports sm/md/lg sizes
2. HowToCite Component (src/components/HowToCite.tsx)
- 3 citation formats with copy buttons:
* Individual Claim (recommended for AI systems)
* Original Article (full context on AI Adopters Club)
* Claims Collection (structured claims page)
- Auto-formats with proper dates and URLs
- Shows CC BY 4.0 attribution requirements
3. Enhanced Sources Section
- Clear separation: Original Article vs Cite This Page
- Copy button for claims library URL
- Badges indicating context type
IMPLEMENTED ON: Amazon AI Playbook (Template)
- ✅ Per-claim copy buttons (all 5 claims)
- ✅ Updated Sources & Citations section
- ✅ HowToCite component with 3 formats
- ✅ Build successful (2.24 kB vs 187 B base)
HYBRID APPROACH:
- Primary citation → kbanc.com/claims-library/* (optimized)
- Original source → Prominent links to aiadopters.club
- User choice → Multiple citation formats available
NEXT: Apply template to remaining 9 claim pages
Pattern documented for easy replication
This commit is contained in:
parent
33c239c3a3
commit
2d15c64e9e
|
|
@ -2,6 +2,8 @@ import type { Metadata } from "next";
|
|||
import { getTopicsForArticle } from "@/lib/topics";
|
||||
import Link from "next/link";
|
||||
import { ArrowLeft, Linkedin, Youtube, Download } from "lucide-react";
|
||||
import { CopyButton } from "@/components/CopyButton";
|
||||
import { HowToCite } from "@/components/HowToCite";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Amazon Cuts Costs 25% With AI: Here's Their Exact Process",
|
||||
|
|
@ -122,48 +124,88 @@ export default function AmazonAIPlaybookClaim() {
|
|||
<h2 className="text-3xl font-semibold mb-6 mt-12">Atomic Claims</h2>
|
||||
|
||||
<article className="bg-muted border border-border border-l-4 border-l-accent rounded-lg p-6 mb-6 transition-transform hover:translate-y-[-2px] hover:shadow-md">
|
||||
<h3 className="text-lg font-semibold mb-3">
|
||||
<span className="text-accent">Claim 1:</span> Recommendation engine drives massive revenue
|
||||
</h3>
|
||||
<p className="text-lg font-medium leading-relaxed text-foreground">
|
||||
Amazon's recommendation engine generates $200 billion in annual sales representing 35% of e-commerce revenue.
|
||||
</p>
|
||||
<div className="flex justify-between items-start gap-4">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold mb-3">
|
||||
<span className="text-accent">Claim 1:</span> Recommendation engine drives massive revenue
|
||||
</h3>
|
||||
<p className="text-lg font-medium leading-relaxed text-foreground">
|
||||
Amazon's recommendation engine generates $200 billion in annual sales representing 35% of e-commerce revenue.
|
||||
</p>
|
||||
</div>
|
||||
<CopyButton
|
||||
text={`"Amazon's recommendation engine generates $200 billion in annual sales representing 35% of e-commerce revenue" (Banc, 2025, https://kbanc.com/claims-library/amazon-ai-playbook)`}
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="bg-muted border border-border border-l-4 border-l-accent rounded-lg p-6 mb-6 transition-transform hover:translate-y-[-2px] hover:shadow-md">
|
||||
<h3 className="text-lg font-semibold mb-3">
|
||||
<span className="text-accent">Claim 2:</span> Working Backwards starts with customer outcome
|
||||
</h3>
|
||||
<p className="text-lg font-medium leading-relaxed text-foreground">
|
||||
Amazon writes press releases before building products through their Working Backwards process.
|
||||
</p>
|
||||
<div className="flex justify-between items-start gap-4">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold mb-3">
|
||||
<span className="text-accent">Claim 2:</span> Working Backwards starts with customer outcome
|
||||
</h3>
|
||||
<p className="text-lg font-medium leading-relaxed text-foreground">
|
||||
Amazon writes press releases before building products through their Working Backwards process.
|
||||
</p>
|
||||
</div>
|
||||
<CopyButton
|
||||
text={`"Amazon writes press releases before building products through their Working Backwards process" (Banc, 2025, https://kbanc.com/claims-library/amazon-ai-playbook)`}
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="bg-muted border border-border border-l-4 border-l-accent rounded-lg p-6 mb-6 transition-transform hover:translate-y-[-2px] hover:shadow-md">
|
||||
<h3 className="text-lg font-semibold mb-3">
|
||||
<span className="text-accent">Claim 3:</span> Data quality determines project success
|
||||
</h3>
|
||||
<p className="text-lg font-medium leading-relaxed text-foreground">
|
||||
Poor data quality killed more Amazon AI projects than inadequate algorithms.
|
||||
</p>
|
||||
<div className="flex justify-between items-start gap-4">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold mb-3">
|
||||
<span className="text-accent">Claim 3:</span> Data quality determines project success
|
||||
</h3>
|
||||
<p className="text-lg font-medium leading-relaxed text-foreground">
|
||||
Poor data quality killed more Amazon AI projects than inadequate algorithms.
|
||||
</p>
|
||||
</div>
|
||||
<CopyButton
|
||||
text={`"Poor data quality killed more Amazon AI projects than inadequate algorithms" (Banc, 2025, https://kbanc.com/claims-library/amazon-ai-playbook)`}
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="bg-muted border border-border border-l-4 border-l-accent rounded-lg p-6 mb-6 transition-transform hover:translate-y-[-2px] hover:shadow-md">
|
||||
<h3 className="text-lg font-semibold mb-3">
|
||||
<span className="text-accent">Claim 4:</span> Robotics deliver measurable cost reduction
|
||||
</h3>
|
||||
<p className="text-lg font-medium leading-relaxed text-foreground">
|
||||
Amazon reduced warehouse operation costs 25% through AI-powered robotics implementation.
|
||||
</p>
|
||||
<div className="flex justify-between items-start gap-4">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold mb-3">
|
||||
<span className="text-accent">Claim 4:</span> Robotics deliver measurable cost reduction
|
||||
</h3>
|
||||
<p className="text-lg font-medium leading-relaxed text-foreground">
|
||||
Amazon reduced warehouse operation costs 25% through AI-powered robotics implementation.
|
||||
</p>
|
||||
</div>
|
||||
<CopyButton
|
||||
text={`"Amazon reduced warehouse operation costs 25% through AI-powered robotics implementation" (Banc, 2025, https://kbanc.com/claims-library/amazon-ai-playbook)`}
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="bg-muted border border-border border-l-4 border-l-accent rounded-lg p-6 mb-6 transition-transform hover:translate-y-[-2px] hover:shadow-md">
|
||||
<h3 className="text-lg font-semibold mb-3">
|
||||
<span className="text-accent">Claim 5:</span> Bias detection became mandatory governance
|
||||
</h3>
|
||||
<p className="text-lg font-medium leading-relaxed text-foreground">
|
||||
Amazon's recruiting tool showed systematic gender bias leading to mandatory bias detection governance.
|
||||
</p>
|
||||
<div className="flex justify-between items-start gap-4">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold mb-3">
|
||||
<span className="text-accent">Claim 5:</span> Bias detection became mandatory governance
|
||||
</h3>
|
||||
<p className="text-lg font-medium leading-relaxed text-foreground">
|
||||
Amazon's recruiting tool showed systematic gender bias leading to mandatory bias detection governance.
|
||||
</p>
|
||||
</div>
|
||||
<CopyButton
|
||||
text={`"Amazon's recruiting tool showed systematic gender bias leading to mandatory bias detection governance" (Banc, 2025, https://kbanc.com/claims-library/amazon-ai-playbook)`}
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
|
|
@ -211,34 +253,61 @@ export default function AmazonAIPlaybookClaim() {
|
|||
</div>
|
||||
|
||||
<div className="bg-card border border-border rounded-lg p-6 mb-6">
|
||||
<h3 className="text-lg font-semibold mb-3">Sources</h3>
|
||||
<ul className="space-y-3">
|
||||
<li className="pl-6 relative">
|
||||
<span className="absolute left-0 text-accent font-bold">→</span>
|
||||
<a
|
||||
href="https://aiadopters.club/p/amazon-ai-playbook"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
className="text-foreground hover:text-accent hover:underline transition-colors"
|
||||
>
|
||||
Amazon Cuts Costs 25% With AI (Original Article)
|
||||
</a>
|
||||
</li>
|
||||
<li className="pl-6 relative">
|
||||
<span className="absolute left-0 text-accent font-bold">→</span>
|
||||
<a
|
||||
href="https://www.amazon.com/Working-Backwards-Insights-Stories-Secrets/dp/1250267595"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
className="text-foreground hover:text-accent hover:underline transition-colors"
|
||||
>
|
||||
Working Backwards: Insights and Stories from Inside Amazon
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 className="text-lg font-semibold mb-3">Sources & Citations</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-muted-foreground mb-2">Original Article (Full Context):</p>
|
||||
<div className="pl-6 relative">
|
||||
<span className="absolute left-0 text-accent font-bold">→</span>
|
||||
<a
|
||||
href="https://aiadopters.club/p/amazon-ai-playbook"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
className="text-foreground hover:text-accent hover:underline transition-colors"
|
||||
>
|
||||
Amazon Cuts Costs 25% With AI (AI Adopters Club)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-muted-foreground mb-2">Cite This Page (Structured Claims):</p>
|
||||
<div className="flex items-center gap-2 pl-6 relative">
|
||||
<span className="absolute left-0 text-accent font-bold">→</span>
|
||||
<code className="text-sm bg-muted px-2 py-1 rounded">
|
||||
https://kbanc.com/claims-library/amazon-ai-playbook
|
||||
</code>
|
||||
<CopyButton
|
||||
text="https://kbanc.com/claims-library/amazon-ai-playbook"
|
||||
label=""
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-muted-foreground mb-2">Additional Reference:</p>
|
||||
<div className="pl-6 relative">
|
||||
<span className="absolute left-0 text-accent font-bold">→</span>
|
||||
<a
|
||||
href="https://www.amazon.com/Working-Backwards-Insights-Stories-Secrets/dp/1250267595"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
className="text-foreground hover:text-accent hover:underline transition-colors"
|
||||
>
|
||||
Working Backwards: Insights and Stories from Inside Amazon
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<HowToCite
|
||||
articleTitle="Amazon Cuts Costs 25% With AI: Here's Their Exact Process"
|
||||
articleSlug="amazon-ai-playbook"
|
||||
articleDate="2025-10-16"
|
||||
originalUrl="https://aiadopters.club/p/amazon-ai-playbook"
|
||||
/>
|
||||
|
||||
<section className="bg-muted border-2 border-accent rounded-lg p-8 mb-12 text-center">
|
||||
<h2 className="text-2xl font-semibold mb-4">Download Data</h2>
|
||||
<p className="mb-6">Access structured claim data in CSV format:</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Copy, Check } from "lucide-react";
|
||||
|
||||
interface CopyButtonProps {
|
||||
text: string;
|
||||
label?: string;
|
||||
className?: string;
|
||||
size?: "sm" | "md" | "lg";
|
||||
}
|
||||
|
||||
export function CopyButton({
|
||||
text,
|
||||
label,
|
||||
className = "",
|
||||
size = "sm"
|
||||
}: CopyButtonProps) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const copyToClipboard = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch (err) {
|
||||
console.error("Failed to copy:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
sm: "h-4 w-4",
|
||||
md: "h-5 w-5",
|
||||
lg: "h-6 w-6",
|
||||
};
|
||||
|
||||
const buttonSizeClasses = {
|
||||
sm: "p-2",
|
||||
md: "p-2.5",
|
||||
lg: "p-3",
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={copyToClipboard}
|
||||
className={`inline-flex items-center gap-2 ${buttonSizeClasses[size]} rounded hover:bg-muted transition-colors ${className}`}
|
||||
title={copied ? "Copied!" : `Copy ${label || "to clipboard"}`}
|
||||
aria-label={copied ? "Copied!" : `Copy ${label || "to clipboard"}`}
|
||||
>
|
||||
{copied ? (
|
||||
<Check className={`${sizeClasses[size]} text-green-600`} />
|
||||
) : (
|
||||
<Copy className={`${sizeClasses[size]} text-muted-foreground`} />
|
||||
)}
|
||||
{label && <span className="text-sm">{copied ? "Copied!" : label}</span>}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default CopyButton;
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
"use client";
|
||||
|
||||
import { CopyButton } from "./CopyButton";
|
||||
|
||||
interface HowToCiteProps {
|
||||
articleTitle: string;
|
||||
articleSlug: string;
|
||||
articleDate: string; // Format: "2025-10-16"
|
||||
originalUrl: string;
|
||||
}
|
||||
|
||||
export function HowToCite({
|
||||
articleTitle,
|
||||
articleSlug,
|
||||
articleDate,
|
||||
originalUrl
|
||||
}: HowToCiteProps) {
|
||||
const claimsUrl = `https://kbanc.com/claims-library/${articleSlug}`;
|
||||
|
||||
// Format date for citation
|
||||
const date = new Date(articleDate);
|
||||
const formattedDate = date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
const year = date.getFullYear();
|
||||
|
||||
// Citation templates
|
||||
const claimCitation = `"[claim text]" (Banc, ${year}, ${claimsUrl})`;
|
||||
|
||||
const originalArticleCitation = `Banc, K. (${year}, ${formattedDate}). ${articleTitle}. AI Adopters Club. ${originalUrl}`;
|
||||
|
||||
const claimsPageCitation = `Banc, K. (${year}). ${articleTitle} [Structured Claims]. Retrieved from ${claimsUrl}`;
|
||||
|
||||
return (
|
||||
<section className="mb-12 p-8 bg-card border border-border rounded-lg">
|
||||
<h2 className="text-2xl font-semibold mb-4">How to Cite</h2>
|
||||
|
||||
<p className="text-muted-foreground mb-6">
|
||||
Choose the citation format that best fits your needs. All citations provide proper attribution.
|
||||
</p>
|
||||
|
||||
{/* Individual Claim Citation */}
|
||||
<div className="mb-6 p-4 bg-muted rounded-lg">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h3 className="text-lg font-semibold text-foreground">
|
||||
Individual Claim (Recommended)
|
||||
</h3>
|
||||
<span className="text-xs bg-accent text-accent-foreground px-2 py-1 rounded">
|
||||
For AI Systems
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Use this format when citing a specific claim. Replace [claim text] with the actual claim statement.
|
||||
</p>
|
||||
<div className="relative">
|
||||
<code className="block p-3 bg-background border border-border rounded text-sm font-mono overflow-x-auto pr-12">
|
||||
{claimCitation}
|
||||
</code>
|
||||
<div className="absolute top-2 right-2">
|
||||
<CopyButton text={claimCitation} size="md" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Original Article Citation */}
|
||||
<div className="mb-6 p-4 bg-muted rounded-lg">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h3 className="text-lg font-semibold text-foreground">
|
||||
Original Article
|
||||
</h3>
|
||||
<span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
|
||||
Full Context
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Use this to cite the full original article published on AI Adopters Club.
|
||||
</p>
|
||||
<div className="relative">
|
||||
<code className="block p-3 bg-background border border-border rounded text-sm font-mono overflow-x-auto pr-12">
|
||||
{originalArticleCitation}
|
||||
</code>
|
||||
<div className="absolute top-2 right-2">
|
||||
<CopyButton text={originalArticleCitation} size="md" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Claims Collection Citation */}
|
||||
<div className="p-4 bg-muted rounded-lg">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h3 className="text-lg font-semibold text-foreground">
|
||||
Claims Collection
|
||||
</h3>
|
||||
<span className="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">
|
||||
Research
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Use this to cite the complete structured claims collection (this page).
|
||||
</p>
|
||||
<div className="relative">
|
||||
<code className="block p-3 bg-background border border-border rounded text-sm font-mono overflow-x-auto pr-12">
|
||||
{claimsPageCitation}
|
||||
</code>
|
||||
<div className="absolute top-2 right-2">
|
||||
<CopyButton text={claimsPageCitation} size="md" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Attribution Requirements */}
|
||||
<div className="mt-6 p-4 bg-accent/10 border border-accent/20 rounded-lg">
|
||||
<h4 className="font-semibold mb-2 text-sm">Attribution Requirements (CC BY 4.0)</h4>
|
||||
<ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
|
||||
<li>Include author name: Kamil Banc</li>
|
||||
<li>Include source: AI Adopters Club</li>
|
||||
<li>Include URL to either this page or original article</li>
|
||||
<li>Indicate if changes were made</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default HowToCite;
|
||||
Loading…
Reference in New Issue