Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
02076cb
chore: Prepare extension for VS Code Marketplace publication
soderlind Oct 2, 2025
d2c80b3
feat: Add PNG icon for marketplace
soderlind Oct 2, 2025
86d71c5
chore: Remove completed icon instructions
soderlind Oct 2, 2025
dc3bc00
feat(theme): add wordpress-org tabbed theme with asset discovery and …
soderlind Oct 3, 2025
095284e
feat(theme): refine wordpress-org theme (hide reviews, cross-hash lin…
soderlind Oct 3, 2025
48d0ecb
feat(theme): adjust screenshots placement, image loading, and default…
soderlind Oct 3, 2025
1164ea3
fix(preview): image loading, scroll sync toggle, hide screenshots wit…
soderlind Oct 3, 2025
95f75b9
fix(assets): refresh assets every update to load all screenshots
soderlind Oct 3, 2025
592a090
feat(gallery): add wordpress.org style screenshot lightbox and naviga…
soderlind Oct 3, 2025
8fb42a3
feat(gallery): embedded inline screenshot gallery with thumbnails and…
soderlind Oct 3, 2025
0f1ff57
fix(gallery): improve embedded navigation arrow contrast and restore …
soderlind Oct 3, 2025
2c2e9bb
feat(gallery): unify embedded screenshot gallery styles across themes…
soderlind Oct 3, 2025
b60043f
feat(theme-wordpress-org): position plugin icon at top-left of banner
soderlind Oct 3, 2025
d6bdcce
feat(preview): add preview.backgroundMode setting (auto|light|dark) w…
soderlind Oct 3, 2025
5785b73
feat(theme-wordpress-org): add 'Screenshots' heading above gallery in…
soderlind Oct 3, 2025
f209e8c
feat(ui): improve tag contrast with dedicated variables and dark/forc…
soderlind Oct 3, 2025
2b29eb4
fix(ui): strengthen tag contrast in light and forced-light modes
soderlind Oct 3, 2025
e529963
chore(ui): increase tag foreground legibility in light and forced-lig…
soderlind Oct 3, 2025
2242ea1
refactor(ui): simplify tag styling to plain bold text (remove pill)
soderlind Oct 3, 2025
84ff530
chore(release): 0.1.1
soderlind Oct 3, 2025
582da7e
Implement code changes to enhance functionality and improve performance
soderlind Oct 3, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
98 changes: 98 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -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...]
52 changes: 52 additions & 0 deletions PUBLISH-CHECKLIST.md
Original file line number Diff line number Diff line change
@@ -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
120 changes: 86 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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!
Binary file added example/assets/banner-772x250.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/assets/icon-128x128.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/assets/screenshot-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/assets/screenshot-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/assets/screenshot-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading