Add comprehensive guide for applying citation system to remaining pages
This commit is contained in:
parent
2d15c64e9e
commit
8929602a47
|
|
@ -0,0 +1,251 @@
|
||||||
|
# Citation System Implementation Guide
|
||||||
|
|
||||||
|
**Status:** ✅ Template implemented on `amazon-ai-playbook`
|
||||||
|
**Remaining:** 9 pages to update
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What Was Implemented
|
||||||
|
|
||||||
|
### 1. CopyButton Component
|
||||||
|
**Location:** `src/components/CopyButton.tsx`
|
||||||
|
|
||||||
|
Reusable button that copies text to clipboard with visual feedback.
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- One-click copying
|
||||||
|
- Check icon confirmation (2 seconds)
|
||||||
|
- Configurable sizes (sm/md/lg)
|
||||||
|
- Optional label text
|
||||||
|
|
||||||
|
### 2. HowToCite Component
|
||||||
|
**Location:** `src/components/HowToCite.tsx`
|
||||||
|
|
||||||
|
Comprehensive citation section with 3 pre-formatted options.
|
||||||
|
|
||||||
|
**Formats Provided:**
|
||||||
|
1. **Individual Claim** (Recommended for AI) - `"[claim]" (Banc, 2025, URL)`
|
||||||
|
2. **Original Article** (Full Context) - Academic format with AI Adopters Club URL
|
||||||
|
3. **Claims Collection** (Research) - Structured claims page citation
|
||||||
|
|
||||||
|
**Props Required:**
|
||||||
|
- `articleTitle`: Full article title
|
||||||
|
- `articleSlug`: URL slug (e.g., "amazon-ai-playbook")
|
||||||
|
- `articleDate`: Publication date (YYYY-MM-DD format)
|
||||||
|
- `originalUrl`: AI Adopters Club article URL
|
||||||
|
|
||||||
|
### 3. Enhanced Sources Section
|
||||||
|
|
||||||
|
**Changes:**
|
||||||
|
- Header: "Sources" → "Sources & Citations"
|
||||||
|
- Three subsections:
|
||||||
|
- Original Article (Full Context)
|
||||||
|
- Cite This Page (Structured Claims) with copy button
|
||||||
|
- Additional Reference (if applicable)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## How to Apply to Other Pages
|
||||||
|
|
||||||
|
### Step 1: Add Imports
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { CopyButton } from "@/components/CopyButton";
|
||||||
|
import { HowToCite } from "@/components/HowToCite";
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 2: Update Each Claim with Copy Button
|
||||||
|
|
||||||
|
**Before:**
|
||||||
|
```tsx
|
||||||
|
<article className="bg-muted border...">
|
||||||
|
<h3>
|
||||||
|
<span className="text-accent">Claim 1:</span> Title
|
||||||
|
</h3>
|
||||||
|
<p>Claim text here.</p>
|
||||||
|
</article>
|
||||||
|
```
|
||||||
|
|
||||||
|
**After:**
|
||||||
|
```tsx
|
||||||
|
<article className="bg-muted border...">
|
||||||
|
<div className="flex justify-between items-start gap-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3>
|
||||||
|
<span className="text-accent">Claim 1:</span> Title
|
||||||
|
</h3>
|
||||||
|
<p>Claim text here.</p>
|
||||||
|
</div>
|
||||||
|
<CopyButton
|
||||||
|
text={`"Claim text here" (Banc, 2025, https://kbanc.com/claims-library/SLUG)`}
|
||||||
|
size="md"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Important:** Replace `SLUG` and quote the exact claim text.
|
||||||
|
|
||||||
|
### Step 3: Update Sources Section
|
||||||
|
|
||||||
|
**Before:**
|
||||||
|
```tsx
|
||||||
|
<div className="bg-card...">
|
||||||
|
<h3>Sources</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="...">Original Article</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**After:**
|
||||||
|
```tsx
|
||||||
|
<div className="bg-card...">
|
||||||
|
<h3>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="..." target="_blank" rel="noopener" className="...">
|
||||||
|
Article Title (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/SLUG
|
||||||
|
</code>
|
||||||
|
<CopyButton
|
||||||
|
text="https://kbanc.com/claims-library/SLUG"
|
||||||
|
label=""
|
||||||
|
size="sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 4: Add HowToCite Component
|
||||||
|
|
||||||
|
**Insert after Supporting Evidence section, before CSV Download:**
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
</section> {/* End Supporting Evidence */}
|
||||||
|
|
||||||
|
<HowToCite
|
||||||
|
articleTitle="Full Article Title Here"
|
||||||
|
articleSlug="article-slug"
|
||||||
|
articleDate="2025-MM-DD"
|
||||||
|
originalUrl="https://aiadopters.club/p/article-slug"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<section className="bg-muted border-2 border-accent...">
|
||||||
|
{/* CSV Download section */}
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Required Information Per Page
|
||||||
|
|
||||||
|
Before updating each page, gather:
|
||||||
|
|
||||||
|
1. **Article Slug:** From URL path (e.g., "chatgpt-features")
|
||||||
|
2. **Publication Date:** From `ARTICLE_PUBLICATION_DATES.md`
|
||||||
|
3. **Original URL:** AI Adopters Club article link
|
||||||
|
4. **All 5 Claim Texts:** Exact wording for citation strings
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Pages Remaining (9)
|
||||||
|
|
||||||
|
| Page | Slug | Date | Status |
|
||||||
|
|------|------|------|--------|
|
||||||
|
| ChatGPT Features | chatgpt-features | 2025-04-29 | ⏳ Pending |
|
||||||
|
| ChatGPT Setup | chatgpt-setup | 2025-05-16 | ⏳ Pending |
|
||||||
|
| Undetectable Writing | undetectable-writing | 2025-05-27 | ⏳ Pending |
|
||||||
|
| AI ROI Measurement | ai-roi-measurement | 2025-10-18 | ⏳ Pending |
|
||||||
|
| Alpha School | alpha-school | 2025-10-23 | ⏳ Pending |
|
||||||
|
| Market Entry Study | market-entry-study | 2025-10-27 | ⏳ Pending |
|
||||||
|
| Systems Thinking | systems-thinking | 2025-10-29 | ⏳ Pending |
|
||||||
|
| Vibe Hackathons | vibe-hackathons | 2025-11-01 | ⏳ Pending |
|
||||||
|
| Skill Gap Mapping | skill-gap-mapping | 2025-11-03 | ⏳ Pending |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Testing Checklist
|
||||||
|
|
||||||
|
After updating each page:
|
||||||
|
|
||||||
|
- [ ] Copy buttons appear on all 5 claims
|
||||||
|
- [ ] Clicking copy button shows check icon
|
||||||
|
- [ ] HowToCite section displays 3 citation formats
|
||||||
|
- [ ] All citation formats have copy buttons
|
||||||
|
- [ ] Sources section shows both original and structured URLs
|
||||||
|
- [ ] Page builds without errors (`npm run build`)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Expected Build Output
|
||||||
|
|
||||||
|
Pages with citation system will show increased size:
|
||||||
|
|
||||||
|
```
|
||||||
|
├ ○ /claims-library/amazon-ai-playbook 2.24 kB ✅ Updated
|
||||||
|
├ ○ /claims-library/chatgpt-features 187 B ⏳ Base size
|
||||||
|
```
|
||||||
|
|
||||||
|
This is expected due to client-side interactive components.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Example: Complete Implementation
|
||||||
|
|
||||||
|
See `src/app/claims-library/amazon-ai-playbook/page.tsx` for:
|
||||||
|
- Import statements (lines 1-6)
|
||||||
|
- Per-claim copy buttons (lines 126-209)
|
||||||
|
- Updated Sources section (lines 255-301)
|
||||||
|
- HowToCite component (lines 304-309)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Automation Option
|
||||||
|
|
||||||
|
For batch updating, consider creating a script or using find/replace with careful validation.
|
||||||
|
|
||||||
|
**Pros:**
|
||||||
|
- Faster for remaining 9 pages
|
||||||
|
- Consistent formatting
|
||||||
|
|
||||||
|
**Cons:**
|
||||||
|
- Risk of errors if claim text varies
|
||||||
|
- Requires careful testing
|
||||||
|
|
||||||
|
**Recommendation:** Update manually with this guide, or update 2-3 more manually then create automation script if pattern is solid.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Steps
|
||||||
|
|
||||||
|
1. Choose next article to update (suggest: chatgpt-features - recently created)
|
||||||
|
2. Follow steps 1-4 above
|
||||||
|
3. Test build
|
||||||
|
4. Commit with message: "Add citation system to [article-name]"
|
||||||
|
5. Repeat for remaining pages
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Last Updated:** 2025-11-04
|
||||||
|
**Template:** Amazon AI Playbook
|
||||||
|
**Status:** Ready for replication
|
||||||
Loading…
Reference in New Issue