Skip to content

Commit

Permalink
update doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@madawei2699
madawei2699 committed Nov 14, 2024
1 parent 295e51f commit 8ee24db
Showing 1 changed file with 150 additions and 96 deletions.
246 changes: 150 additions & 96 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,138 +21,192 @@ We use GitHub to host code, to track issues and feature requests, as well as acc

## Adding Support for New Communities

To add support for a new community, you'll need to:
To add support for a new community (e.g., Twitter), you'll need to create two main components:

1. Create a new parser in `src/content/parsers/`:
1. Create a Parser (`src/content/parsers/twitter.js`):
```javascript
// Example: src/content/parsers/reddit.js
export class RedditParser extends BaseParser {
export class TwitterParser extends BaseParser {
isDiscussionPage() {
// Implementation
return window.location.pathname.includes('/status/');
}

getPageContent() {
// Implementation
getTitle() {
// Get thread title or first tweet content
return document.querySelector('[data-testid="tweetText"]')?.textContent || '';
}

parseCommentThread(commentElement) {
// Implementation
getTopLevelComments() {
// Get top-level replies only
const comments = document.querySelectorAll('[data-testid="tweet"]');
return Array.from(comments).filter(comment => {
// Filter for top-level comments only
return true; // Implement your logic
});
}

// ... other required methods
}
```
2. Update the community registry in `src/content/registry.js`:
2. Create a Summarizer (`src/content/platforms/TwitterSummarizer.js`):
```javascript
import { HNParser } from './parsers/hn';
import { RedditParser } from './parsers/reddit';
import { BaseSummarizer } from '../base/BaseSummarizer';
import { TwitterParser } from '../parsers/twitter';
import { renderMarkdown } from '../utils/markdown';

export const COMMUNITY_PARSERS = {
'news.ycombinator.com': HNParser,
'reddit.com': RedditParser,
// Add your new parser here
};
export class TwitterSummarizer extends BaseSummarizer {
constructor() {
super();
this.parser = new TwitterParser();
this.parser.setContentScript(this);
this.setupCommentObserver();
}

setupCommentObserver() {
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.addedNodes.length) {
// Check for new comments and add TLDR buttons
const comments = document.querySelectorAll('[data-testid="tweet"]');
if (comments.length > 0) {
this.addTLDRLinks();
}
}
}
});

observer.observe(document.body, {
childList: true,
subtree: true
});
}

addTLDRLinks() {
const topLevelComments = this.parser.getTopLevelComments();

topLevelComments.forEach(comment => {
if (!comment.querySelector('.tldr-summarize-btn')) {
const tldrContainer = document.createElement('span');
tldrContainer.className = 'tldr-btn-container';

const tldrLink = document.createElement('a');
tldrLink.textContent = 'TL;DR';
tldrLink.className = 'tldr-summarize-btn';
tldrLink.style.marginLeft = '10px';

tldrLink.addEventListener('mousedown', (event) => {
event.preventDefault();
event.stopPropagation();
this.summarizeThread({
id: comment.id,
text: comment.innerText
});
});

// Add TLDR button to the tweet actions area
const actionsBar = comment.querySelector('[role="group"]');
if (actionsBar) {
actionsBar.appendChild(tldrContainer);
}
}
});
}
}
```
3. Add necessary styles in `src/styles/`:
```css
/* styles/reddit.css */
.tldr-reddit-specific-class {
/* Your styles */
3. Update index.js to include the new platform:
```javascript
// src/content/index.js
import { RedditSummarizer } from './platforms/RedditSummarizer';
import { HNSummarizer } from './platforms/HNSummarizer';
import { TwitterSummarizer } from './platforms/TwitterSummarizer';

const PLATFORM_HANDLERS = {
'news.ycombinator.com': HNSummarizer,
'reddit.com': RedditSummarizer,
'www.reddit.com': RedditSummarizer,
'twitter.com': TwitterSummarizer
};

function initializeSummarizer() {
const hostname = window.location.hostname;
const SummarizerClass = Object.entries(PLATFORM_HANDLERS).find(([domain]) =>
hostname.includes(domain)
)?.[1];

if (!SummarizerClass) {
console.log('Site not supported');
return;
}

const summarizer = new SummarizerClass();
summarizer.init();
}

initializeSummarizer();
```
4. Update the manifest to include new permissions if needed:
4. Update manifest.json:
```json
{
"host_permissions": [
"https://news.ycombinator.com/*",
"https://www.reddit.com/*"
// Add your new domain
]
"*://*.reddit.com/*",
"https://twitter.com/*"
],
"content_scripts": [{
"matches": [
"https://news.ycombinator.com/*",
"*://*.reddit.com/*",
"https://twitter.com/*"
],
"js": ["content.js"],
"css": ["styles/content.css"]
}]
}
```
### Parser Requirements
### Key Components Requirements
When implementing a new platform, ensure your components handle:
Your parser must implement these methods:
1. Parser:
- Discussion page detection
- Comment extraction
- Thread structure parsing
- `isDiscussionPage()`: Detect if current page is a discussion
- `getPageContent()`: Extract main post content
- `parseCommentThread()`: Parse comment thread structure
- `getTopLevelComments()`: Get top-level comments
- `scrollToComment()`: Handle comment navigation
2. Summarizer:
- Dynamic content loading (using MutationObserver if needed)
- TLDR button insertion
- Summary UI updates
- Platform-specific event handling
3. Error Handling:
- Graceful degradation if elements aren't found
- Proper error messages
- Recovery from failed summarizations
## Code Style Guidelines
- Use meaningful variable names
- Write comments for complex logic
- Follow the existing code style
- Use TypeScript for new code if possible
- Document platform-specific quirks
- Keep functions small and focused
- Handle dynamic content loading properly
- Test across different states of the platform's UI
## Testing

- Add appropriate test cases
- Test across different browsers
- Test with various content types
- Verify error handling
## Testing New Platforms
## Community Parser Template

Here's a template for new community parsers:

```javascript
export class CommunityParser extends BaseParser {
constructor() {
super();
this.communitySpecific = {};
}

isDiscussionPage() {
// Return boolean indicating if current page is a discussion
return false;
}

getPageContent() {
// Return {
// title: string,
// text: string,
// url: string,
// author: string
// }
return null;
}

parseCommentThread(commentElement) {
// Return {
// id: string,
// root: Comment,
// replies: Comment[],
// level: number
// }
return null;
}

getTopLevelComments() {
// Return HTMLElement[]
return [];
}

scrollToComment(commentId) {
// Implement smooth scroll to comment
}
}
```
- Test with various thread lengths
- Test with dynamic content loading
- Verify proper event handling
- Check for memory leaks with long-running observers
- Test error cases and recovery
## Pull Request Process
1. Update the README.md with details of changes if needed
2. Update the documentation for new communities
3. Update the version numbers following [SemVer](http://semver.org/)
4. The PR will be merged once you have sign-off from maintainers
1. Update the README.md with details of the new platform
2. Include screenshots of the integration
3. Document any platform-specific limitations
4. Update version numbers following SemVer
## Any questions?
## Questions?
Feel free to ask in issues or discussions!
Feel free to open an issue for any questions about implementing new platforms!

0 comments on commit 8ee24db

Please sign in to comment.