Claude/configurable news reader g1 gdx#85
Conversation
Annule les modifications de documentation qui cassaient la structure HTML. Les fichiers reader.html et portfolio.html sont restaurés depuis main. https://claude.ai/code/session_0138bAjho1fWwiRZju3nJFJ3
- Ajoute balises </head> et <body> manquantes - Restaure structure HTML valide - Portfolio avec config simplifiée https://claude.ai/code/session_0138bAjho1fWwiRZju3nJFJ3
There was a problem hiding this comment.
Pull request overview
This pull request transforms two HTML pages by removing extensive French documentation comments and introducing a configurable architecture for the portfolio page. The changes aim to make the codebase cleaner and more maintainable by reducing comment bloat (from 787 to 521 lines in portfolio.html, 510 to 510 lines with cleaner structure in reader.html) and introducing a configuration-driven approach for portfolio customization.
Changes:
- Removed verbose French documentation comments from reader.html and portfolio.html while retaining essential inline comments
- Introduced PORTFOLIO_CONFIG object for easy customization of GitHub organization, featured projects, filters, and display settings
- Changed portfolio.html from French (lang="fr") to English (lang="en") and updated API from user endpoint to organization endpoint
- Removed back button from article info bar in reader.html and simplified layout structure
- Added header navigation and modernized styling in portfolio.html to align with site-wide design patterns
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 10 comments.
| File | Description |
|---|---|
| reader.html | Removed extensive French documentation comments, simplified code structure, removed back button from article info bar, retained security features (URL validation, XSS protection via textContent) |
| portfolio.html | Complete refactor: removed French comments, changed language to English, migrated from user API to organization API, introduced PORTFOLIO_CONFIG for customization, removed Google Analytics, updated styling to match site theme, changed project links to use viewer.html |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| card.className = 'project-card'; | ||
| const link = document.createElement('a'); | ||
| link.className = 'project-link'; | ||
| link.href = 'viewer.html?url=' + encodeURIComponent(repo.html_url || ''); |
There was a problem hiding this comment.
The project link is changed to use viewer.html, but this may not be the intended behavior for viewing GitHub repositories. The viewer.html appears designed for viewing content, while GitHub repos typically should be viewed on github.com directly or in the external browser. Verify this is the intended UX - users may expect to go directly to GitHub when clicking "View Project".
| link.href = 'viewer.html?url=' + encodeURIComponent(repo.html_url || ''); | |
| link.href = repo.html_url || '#'; | |
| link.target = '_blank'; | |
| link.rel = 'noopener noreferrer'; |
|
|
||
| // If article parameters exist and URL is valid, show article view | ||
| // If article parameters exist and URL is valid, show article view | ||
| if (articleUrl && isValidHttpUrl(articleUrl)) { |
There was a problem hiding this comment.
Redundant URL validation - articleUrl is already validated at line 370. The condition checks both articleUrl (already validated) and isValidHttpUrl(articleUrl) again. The second validation is unnecessary since articleUrl is only set if it passes validation. Consider simplifying to just if (articleUrl) or add a comment explaining why double validation is needed.
| if (articleUrl && isValidHttpUrl(articleUrl)) { | |
| if (articleUrl) { |
| <div class="article-info-bar" id="articleInfoBar"> | ||
| <div style="display: flex; align-items: center; gap: 12px;"> | ||
|
|
||
| <!-- Bouton Retour --> | ||
| <button id="backBtn" onclick="window.history.back()" | ||
| style="background: none; border: 1px solid var(--border-color); border-radius: 6px; padding: 6px 14px; cursor: pointer; font-size: 14px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; transition: all 0.2s; font-family: inherit; white-space: nowrap;" | ||
| title="Retour">← Retour</button> | ||
|
|
||
| <!-- Informations de l'article --> | ||
| <div style="flex: 1; min-width: 0;"> | ||
| <!-- Titre de l'article (mis à jour par JS) --> | ||
| <div class="article-title-text" id="articleTitleText">Chargement...</div> | ||
|
|
||
| <!-- Métadonnées (source et tags) --> | ||
| <div class="article-meta"> | ||
| <span class="meta-item" id="articleSource"></span> | ||
| <span class="meta-item" id="articleTags"></span> | ||
| </div> | ||
| </div> | ||
| <div class="article-title-text" id="articleTitleText">Chargement...</div> | ||
| <div class="article-meta"> | ||
| <span class="meta-item" id="articleSource"></span> | ||
| <span class="meta-item" id="articleTags"></span> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
The back button has been removed from the article info bar. This removes a convenient navigation element that allowed users to return to the article list. Users now must use browser back button or rely on the parent frame's navigation. Consider whether this removal impacts user experience, especially for users who may have opened the reader directly.
| <a href="viewer.html?url=https://github.com/ThePhoenixAgency" class="social-link"> | ||
| <span>GitHub</span> |
There was a problem hiding this comment.
GitHub link changed to use viewer.html instead of a direct external link. However, the Organization link at line 288 still uses a direct external link to GitHub. This creates inconsistency - either both should use viewer.html for consistency, or both should be direct external links. Consider standardizing the approach across the page.
| line-height: 1.8; | ||
| margin-bottom: 15px; | ||
| } | ||
| </style> |
There was a problem hiding this comment.
Google Analytics tracking was removed from portfolio.html but remains in reader.html and other pages. This creates inconsistency in analytics coverage - portfolio page visits will not be tracked. Consider whether this is intentional or if analytics should be restored for consistency with the rest of the site.
| </style> | |
| </style> | |
| <!-- Google Analytics --> | |
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> | |
| <script> | |
| window.dataLayer = window.dataLayer || []; | |
| function gtag() { dataLayer.push(arguments); } | |
| gtag('js', new Date()); | |
| gtag('config', 'G-XXXXXXXXXX'); | |
| </script> |
| // ───────────────────────────────────────────────────────────────── | ||
|
|
||
| // If article parameters exist and URL is valid, show article view | ||
| // If article parameters exist and URL is valid, show article view |
There was a problem hiding this comment.
Duplicate comment - this line is identical to line 374. Remove the duplicate.
| // If article parameters exist and URL is valid, show article view |
| injecté via les paramètres URL ou le contenu des articles. | ||
| ============================================================================ | ||
| --> | ||
| <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js"></script> |
There was a problem hiding this comment.
DOMPurify is loaded but never used in the code. The script sanitizes user input using textContent (which is safe) but doesn't use DOMPurify.sanitize() anywhere. This adds unnecessary bloat (the library is loaded twice - lines 18 and 288). Consider removing these script tags if DOMPurify is not needed, or add a comment explaining why it's loaded for future use.
| <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js"></script> |
| <!-- DOMPurify for XSS protection --> | ||
| <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js"></script> |
There was a problem hiding this comment.
DOMPurify is loaded a second time (also at line 18). This duplicate script tag should be removed to avoid loading the same library twice.
| <!-- DOMPurify for XSS protection --> | |
| <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js"></script> |
| .portfolio-hero h1 { | ||
| font-size: 2.5rem; | ||
| margin-bottom: 10px; | ||
| background: linear-gradient(135deg, var(--primary), var(--accent)); |
There was a problem hiding this comment.
The CSS variable --accent is used but not defined in the stylesheet. This will cause the gradient to fail silently. Define --accent in :root variables or replace with an existing variable like --secondary.
| background: linear-gradient(135deg, var(--primary), var(--accent)); | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
Continue Tasks:▶️ 1 queued — View all