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