Merge pull request #1 from soderlind/update/preview

Update/preview

Author: soderlind

CHANGELOG.md

@@ -0,0 +1,30 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on Keep a Changelog (https://keepachangelog.com/en/1.0.0/) and this project adheres to Semantic Versioning (https://semver.org/spec/v2.0.0.html).
+
+## [0.1.1] - 2025-10-03
+### Added
+- wordpress.org tabbed preview theme (Description, Installation, FAQ, Screenshots, Changelog, Reviews placeholder)
+- Accessible embedded screenshot gallery with thumbnails & keyboard navigation
+- Forced background mode setting (`auto` | `light` | `dark`)
+- Tag display refinement to uppercase bracketed form `[TAG]`
+
+### Changed
+- README updated with new features and configuration table
+- Improved icon and banner layout positioning in wordpress.org theme
+
+### Fixed
+- Ensured all discovered screenshots load (removed earlier limitation)
+- Gallery navigation contrast and focus handling improvements
+
+## [0.1.0] - 2025-10-02
+### Added
+- Initial release with live WordPress.org-style preview
+- Validation engine with precise line/column diagnostics & quality score
+- Scroll synchronization (optional)
+- Context menu integration across explorer, editor tab, and editor content
+- Custom parser for WordPress readme formatting (FAQ, changelog headers, etc.)
+
+[0.1.1]: https://github.com/soderlind/wordpress-readme-preview/compare/v0.1.0...v0.1.1

LICENSE

@@ -0,0 +1,98 @@
+GNU GENERAL PUBLIC LICENSE
+Version 2, June 1991
+
+Copyright (C) 2024 Per Soderlind
+
+This program is free software; you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation; either version 2 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License along
+with this program; if not, write to the Free Software Foundation, Inc.,
+51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+---
+
+GNU GENERAL PUBLIC LICENSE
+Version 2, June 1991
+
+Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
+51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+Everyone is permitted to copy and distribute verbatim copies
+of this license document, but changing it is not allowed.
+
+Preamble
+
+The licenses for most software are designed to take away your
+freedom to share and change it. By contrast, the GNU General Public
+License is intended to guarantee your freedom to share and change free
+software--to make sure the software is free for all its users. This
+General Public License applies to most of the Free Software
+Foundation's software and to any other program whose authors commit to
+using it. (You can also apply it to your programs too.)
+
+When we speak of free software, we are referring to freedom, not
+price. Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+this service if you wish), that you receive source code or can get it
+if you want it, that you can change the software or use pieces of it
+in new free programs; and that you know you can do these things.
+
+To protect your rights, we need to make restrictions that forbid
+anyone to deny you these rights or to ask you to surrender the rights.
+These restrictions translate to certain responsibilities for you if you
+distribute copies of the software, or if you modify it.
+
+For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must give the recipients all the rights that
+you have. You must make sure that they, too, receive or can get the
+source code. And you must show them these terms so they know their
+rights.
+
+We protect your rights with two steps: (1) copyright the software, and
+(2) offer you this license which gives you legal permission to copy,
+distribute and/or modify the software.
+
+Also, for each author's protection and ours, we want to make certain
+that everyone understands that there is no warranty for this free
+software. If the software is modified by someone else and passed on, we
+want its recipients to know that what they have is not the original, so
+that any problems introduced by others will not reflect on the original
+authors' reputations.
+
+Finally, any free program is threatened constantly by software
+patents. We wish to avoid the danger that redistributors of a free
+program will individually obtain patent licenses, in effect making the
+program proprietary. To prevent this, we have made it clear that any
+patent must be licensed for everyone's free use or not licensed at all.
+
+The precise terms and conditions for copying, distribution and
+modification follow.
+
+GNU GENERAL PUBLIC LICENSE
+TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+0. This License applies to any program or other work which contains
+a notice placed by the copyright holder saying it may be distributed
+under the terms of this General Public License. The "Program", below,
+refers to any such program or work, and a "work based on the Program"
+means either the Program or any derivative work under copyright law:
+that is to say, a work containing the Program or a portion of it,
+either verbatim or with modifications and/or translated into another
+language. (Hereinafter, translation is included without limitation in
+the term "modification".) Each licensee is addressed as "you".
+
+Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope. The act of
+running the Program is not restricted, and the output from the Program
+is covered only if its contents constitute a work based on the
+Program (independent of having been made by running the Program).
+Whether that is true depends on what the Program does.
+
+[Full GPL v2 license text continues...]

PUBLISH-CHECKLIST.md

@@ -0,0 +1,52 @@
+# Pre-Publication Checklist for WordPress Readme Preview
+
+## ❌ **Critical Issues to Fix:**
+
+### 1. **Publisher Name**
+- Current: `"publisher": "wordpress-readme-preview"`  
+- **Issue**: This needs to be your actual VS Code Marketplace publisher ID
+- **Fix**: Change to your Microsoft/GitHub account publisher name
+
+### 2. **Icon Format** 
+- Current: SVG icon (not supported)
+- **Issue**: VS Code Marketplace requires PNG format
+- **Fix**: Convert icon.svg to icon.png (128x128 pixels)
+
+### 3. **Repository Links**
+- **Missing**: Repository URL in package.json
+- **Fix**: Add repository, bugs, and homepage URLs
+
+## ✅ **Recommended Improvements:**
+
+### 4. **Extension Categories**
+- Current: ["Other", "Formatters", "Linters"]
+- **Better**: ["Formatters", "Linters", "Other"] (most relevant first)
+
+### 5. **Keywords Enhancement**
+- Add more discoverable keywords: "validation", "wordpress.org", "wp-plugin"
+
+### 6. **Version Strategy**
+- Current: 0.1.0 (good for initial release)
+- Consider: 1.0.0 for first stable release
+
+## 🔧 **Publishing Commands:**
+
+```bash
+# Install vsce if not installed
+npm install -g vsce
+
+# Package the extension
+vsce package
+
+# Publish to marketplace  
+vsce publish
+```
+
+## 📋 **Final Testing:**
+
+- [ ] Test all commands work
+- [ ] Test in both light and dark themes
+- [ ] Test scroll synchronization
+- [ ] Test context menus
+- [ ] Test link rendering
+- [ ] Verify no console errors

README.md

@@ -11,8 +11,13 @@ A Visual Studio Code extension that provides live preview and validation for Wor
 ✅ **Context Menus** - Right-click support in explorer and editor tabs  
 ✅ **Scroll Synchronization** - Keep editor and preview in sync when scrolling  
 ✅ **Theme Support** - Automatic dark/light theme matching with VS Code  
+✅ **Forced Background Modes** - Override preview to always light or dark  
 ✅ **Quality Scoring** - Get 0-100 quality score with improvement suggestions  
 ✅ **False Positive Prevention** - Accurate detection without hallucinated errors  
+✅ **Tabbed wordpress.org Layout** - Authentic multi-tab presentation (Description, Installation, FAQ, Screenshots, Changelog)  
+✅ **Accessible Screenshot Gallery** - Keyboard & screen reader friendly with thumbnails  
+
+![Alt text](media/example.png)
 
 ## Quick Start
 
@@ -103,41 +108,39 @@ A Visual Studio Code extension that provides live preview and validation for Wor
 
 ## Configuration
 
-Customize the extension behavior via VS Code settings:
-
-```json
+All settings live under the `wordpress-readme.*` namespace.
+
+| Setting | Type | Default | Description |
+|---------|------|---------|-------------|
+| `wordpress-readme.preview.autoOpen` | boolean | false | Auto-open preview when a `readme.txt` is opened |
+| `wordpress-readme.preview.theme` | enum(classic|wordpress-org) | classic | Select layout style |
+| `wordpress-readme.preview.backgroundMode` | enum(auto|light|dark) | auto | Force preview light/dark or follow editor theme |
+| `wordpress-readme.preview.syncScrolling` | boolean | false | Synchronize scroll position between editor & preview |
+| `wordpress-readme.validation.enabled` | boolean | true | Enable live validation |
+| `wordpress-readme.validation.showWarnings` | boolean | true | Include warnings (not just errors) |
+| `wordpress-readme.contextMenu.showInExplorer` | boolean | true | Show commands in Explorer context menu |
+| `wordpress-readme.contextMenu.showInEditorTab` | boolean | true | Show commands in editor tab context menu |
+| `wordpress-readme.contextMenu.showInEditor` | boolean | true | Show commands in editor content (text area) context menu |
+| `wordpress-readme.contextMenu.showPreview` | boolean | true | Enable "Open Preview" entries |
+| `wordpress-readme.contextMenu.showPreviewToSide` | boolean | true | Enable "Open Preview to the Side" entries |
+| `wordpress-readme.contextMenu.showValidation` | boolean | true | Enable validation command entries |
+
+Example customization snippet:
+
+```jsonc
 {
-  // Auto-open preview when opening readme.txt files
-  "wordpress-readme.preview.autoOpen": false,
-  
-  // Enable scroll synchronization between editor and preview
+  "wordpress-readme.preview.theme": "wordpress-org",
+  "wordpress-readme.preview.backgroundMode": "dark",
   "wordpress-readme.preview.syncScrolling": true,
-  
-  // Enable automatic validation as you type
-  "wordpress-readme.validation.enabled": true,
-  
-  // Show validation warnings (not just errors)
-  "wordpress-readme.validation.showWarnings": true,
-  
-  // Context menu configuration - enable/disable individual menu items
-  "wordpress-readme.contextMenu.openPreview": true,
-  "wordpress-readme.contextMenu.openPreviewToSide": true,
-  "wordpress-readme.contextMenu.validate": true,
-  "wordpress-readme.contextMenu.openFile": true,
-  "wordpress-readme.contextMenu.separator1": true,
-  "wordpress-readme.contextMenu.separator2": true
+  "wordpress-readme.validation.showWarnings": false
 }
 ```
 
-### Context Menu Customization
-
-You can customize which context menu items appear by adjusting the `wordpress-readme.contextMenu.*` settings:
+### Forced Background Mode
+Use `backgroundMode` to view your readme in a fixed light or dark palette regardless of the editor theme. Great for checking color/contrast of inline badges or screenshots.
 
-- `openPreview` - Show "Open Preview" option
-- `openPreviewToSide` - Show "Open Preview to the Side" option  
-- `validate` - Show "Validate Readme" option
-- `openFile` - Show "Open File" option
-- `separator1` / `separator2` - Show menu separators for organization
+### Tag Appearance
+Tags are rendered as simple uppercase bracketed items (e.g. `[SEO] [CACHE]`) for clarity and compactness—mirroring a neutral, style-light presentation for quick scanning.
 
 ## Available Commands
 
@@ -188,6 +191,51 @@ All context menus provide instant access to preview and validation commands.
 - **Border & Shadow Adaptation** - Adjusts visual elements for each theme
 - **Code Block Styling** - Theme-aware syntax highlighting backgrounds
 
+### Alternate Layout: wordpress-org Theme
+
+You can switch to an alternative WordPress.org–style tabbed layout that more closely mirrors the official plugin directory presentation.
+
+Setting:
+```jsonc
+"wordpress-readme.preview.theme": "wordpress-org" // default is "classic"
+```
+
+Features of the `wordpress-org` theme:
+- Tabbed interface (Description, Installation, FAQ, Screenshots, Changelog, Reviews placeholder)
+- Banner + Icon rendering (auto-detected)
+- Responsive, accessible screenshot gallery (thumbnails + keyboard navigation + focus outlines)
+- Keyboard navigation: Arrow keys / Home / End across tabs and thumbnails
+- Deep linking using URL hash (e.g. `#faq` selects the FAQ tab)
+- Graceful placeholders when a tab has no content
+
+If a tab has no corresponding content it displays a subtle placeholder. Reviews are not locally generated (placeholder only).
+
+### Plugin Asset Auto-Discovery
+
+When using the `wordpress-org` theme the extension automatically searches for standard plugin assets next to your `readme.txt`:
+
+Search order (first existing directory wins precedence if duplicates):
+1. `.wordpress-org/`
+2. `assets/`
+
+Supported file patterns (case-insensitive):
+- Banners: `banner-1544x500.(png|jpg)` (large), `banner-772x250.(png|jpg)` (small)
+- Icons: `icon-256x256.*`, `icon-128x128.*`, `icon-64x64.*`, `icon-32x32.*` (`.png`, `.jpg`, `.jpeg`, `.svg`)
+- Screenshots: `screenshot-1.(png|jpg|jpeg|gif)`, `screenshot-2.*`, etc.
+
+The best available icon size is chosen in order: 256 → 128 → 64 → 32. Screenshots are displayed in ascending numerical order.
+
+If no assets are found the layout gracefully omits the banner/icon/screenshot areas.
+
+This mirrors the conventions used by WordPress.org so you can visually QA your assets before publishing. Gallery supports:
+
+- Click thumbnail to swap main image
+- Arrow key navigation through thumbnails
+- Esc returns focus to the gallery container (when implemented in webview focus scope)
+- Maintains aspect ratio and centers images on varied panel widths
+
+> Tip: Keep your banner image optimized. WordPress.org expects specific dimensions and reasonable file sizes for performance.
+
 ## File Association
 
 The extension automatically activates for:
@@ -255,12 +303,16 @@ Tested up to: 6.3
 💡 **Feature Requests:** Suggest improvements for WordPress.org compliance  
 🔧 **Pull Requests:** Contributions welcome for parser and validation improvements  
 
-# Copyright and License
+## License
+
+GPL-2.0-or-later © 2025 Per Soderlind
+
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or (at your option) any later version.
 
-WordPress Readme Preview is copyright 2025 Per Soderlind
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
-WordPress Readme Preview is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or (at your option) any later version.
+You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/.
 
-WordPress Readme Preview is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+---
 
-You should have received a copy of the GNU Lesser General Public License along with the Extension. If not, see http://www.gnu.org/licenses/.
+Enjoying the extension? Star the repository or open an issue with feedback. Happy publishing!