All Projects → alefragnani → vscode-whats-new

alefragnani / vscode-whats-new

Licence: MIT license
VS Code submodule for a What's New page

Programming Languages

typescript
32286 projects
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to vscode-whats-new

Aura Theme
💅 A beautiful dark theme for your favorite apps.
Stars: ✭ 159 (+511.54%)
Mutual labels:  visual-studio-code
Vscode Dash
Dash, Zeal and Velocity documentation integration in Visual Studio Code 🔎📖
Stars: ✭ 176 (+576.92%)
Mutual labels:  visual-studio-code
Writing
📚📝 Notes on the journey
Stars: ✭ 234 (+800%)
Mutual labels:  visual-studio-code
Vscode Remote Release
Visual Studio Code Remote Development: Open any folder in WSL, in a Docker container, or on a remote machine using SSH and take advantage of VS Code's full feature set.
Stars: ✭ 2,256 (+8576.92%)
Mutual labels:  visual-studio-code
Html Css Class Completion
🍫 Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the CSS files in your workspace
Stars: ✭ 174 (+569.23%)
Mutual labels:  visual-studio-code
Visual Studio Code
🎨 Omni for Visual Studio Code
Stars: ✭ 205 (+688.46%)
Mutual labels:  visual-studio-code
Vscode Dev Containers
A repository of development container definitions for the VS Code Remote - Containers extension and GitHub Codespaces
Stars: ✭ 2,715 (+10342.31%)
Mutual labels:  visual-studio-code
Git Credential Manager For Windows
Secure Git credential storage for Windows with support for Visual Studio Team Services, GitHub, and Bitbucket multi-factor authentication.
Stars: ✭ 2,732 (+10407.69%)
Mutual labels:  visual-studio-code
Vscode Fundamentals
👨‍🏫 Mike's Visual Studio Code Course
Stars: ✭ 175 (+573.08%)
Mutual labels:  visual-studio-code
Vscode Theme Alabaster
A light theme for Visual Studio Code
Stars: ✭ 233 (+796.15%)
Mutual labels:  visual-studio-code
Vscode Theme Onedark
VSCode Theme based on Atom's One Dark theme
Stars: ✭ 165 (+534.62%)
Mutual labels:  visual-studio-code
Vscode Twitch Highlighter
This is a VS Code extension that will allow your Twitch chat to highlight a line of code via a command message. Example: `!line 8 server.js`. See master branch README.md for more details
Stars: ✭ 169 (+550%)
Mutual labels:  visual-studio-code
Vscode As3mxml
ActionScript & MXML language extension for Visual Studio Code. Develop apps for Adobe AIR, Adobe Flash Player, or Apache Royale.
Stars: ✭ 205 (+688.46%)
Mutual labels:  visual-studio-code
Vscode Auto Rename Tag
Automatically rename paired HTML/XML tag
Stars: ✭ 161 (+519.23%)
Mutual labels:  visual-studio-code
Vscode Restructuredtext
reStructuredText Language Support in Visual Studio Code
Stars: ✭ 243 (+834.62%)
Mutual labels:  visual-studio-code
Sfml Vscode Boilerplate
A cross-platform SFML 2.5.1 & C++17 build environment for Visual Studio Code
Stars: ✭ 156 (+500%)
Mutual labels:  visual-studio-code
Code D
Fully featured D language extension for Visual Studio Code using Serve-D
Stars: ✭ 202 (+676.92%)
Mutual labels:  visual-studio-code
Vscode
Visual Studio Code
Stars: ✭ 125,417 (+482273.08%)
Mutual labels:  visual-studio-code
Swdc Vscode Musictime
A VS Code extension to discover the most productive music to listen to as you code
Stars: ✭ 242 (+830.77%)
Mutual labels:  visual-studio-code
Fsautocomplete
F# language server using Language Server Protocol
Stars: ✭ 208 (+700%)
Mutual labels:  visual-studio-code

What's New submodule

This submodule is used to display a What's New page on VS Code extensions. It has a simple (but yet effective) UI, optimized to display all the information in a single page.

whats-new-bookmarks

Usage

Adding

You just need to add a submodule reference to your Git repo

    git submodule add https://github.com/alefragnani/vscode-whats-new.git

Coding

This submodule is based on a Provider pattern (similar to some pieces of VS Code), and you need to implement at least the ContentProvider in order to display the main content of the page, like the Header (logo and message) and Changelog.

There are other two providers available, for specific contents:

  • SocialMediaProvider": Add links to your social medias
  • SponsorProvider: Add references (logos and messages) to your sponsors.
// provide the data
import { ChangeLogItem, 
         ChangeLogKind, 
         ContentProvider, 
         SocialMediaProvider, 
         SponsorProvider, 
         Header, 
         Image
} from "../../vscode-whats-new/src/ContentProvider";

export class BookmarksContentProvider implements ContentProvider {

    provideHeader(logoUrl: string): Header {
        return <Header>{logo: <Image> {src: logoUrl, height: 50, width: 50}, 
            message: `<b>Bookmarks</b> helps you to navigate in your code, <b>moving</b> 
            between important positions easily and quickly. No more need 
            to <i>search for code</i>. It also supports a set of <b>selection</b>
            commands, which allows you to select bookmarked lines and regions between
            lines.`};
    }

    provideChangeLog(): ChangeLogItem[] {
        let changeLog: ChangeLogItem[] = [];
        changeLog.push({ kind: ChangeLogKind.VERSION, detail: { releaseNumber: "12.1.0", releaseDate: "December 2020" } });
        changeLog.push({
            kind: ChangeLogKind.NEW,
            detail: {
                message: "Support submenu for editor commands",
                id: 351,
                kind: IssueKind.Issue
            }
        });
        changeLog.push({
            kind: ChangeLogKind.CHANGED,
            detail: {
                message: "Setting <b>bookmarks.navigateThroughAllFiles</b> is now <b>true</b> by default",
                id: 102,
                kind: IssueKind.Issue
            }
        });
        changeLog.push({
            kind: ChangeLogKind.INTERNAL,
            detail: {
                message: "Remove unnecessary files from extension package",
                id: 355,
                kind: IssueKind.Issue
            }
        });
    }
}

export class BookmarksSocialMediaProvider implements SocialMediaProvider {
    public provideSocialMedias() {
        return [{
            title: "Follow me on Twitter",
            link: "https://www.twitter.com/alefragnani"
        }];
    }
}

export class BookmarksSponsorProvider implements SponsorProvider {
    public provideSponsors(): Sponsor[] {
        const sponsors: Sponsor[] = [];
        const sponsorCodeStream: Sponsor = <Sponsor>{
            title: "Learn more about Codestream",
            link: "https://sponsorlink.codestream.com/?utm_source=vscmarket&utm_campaign=bookmarks&utm_medium=banner",
            image: {
                light: "https://alt-images.codestream.com/codestream_logo_bookmarks.png",
                dark: "https://alt-images.codestream.com/codestream_logo_bookmarks.png"
            },
            width: 52,
            message: `<p>Eliminate context switching and costly distractions. 
                Create and merge PRs and perform code reviews from inside your 
                IDE while using jump-to-definition, your keybindings, and other IDE favorites.</p>`,
            extra:
                `<a title="Learn more about CodeStream" href="https://sponsorlink.codestream.com/?utm_source=vscmarket&utm_campaign=bookmarks&utm_medium=banner">
                Learn more</a>`
        };
        sponsors.push(sponsorCodeStream);
        return sponsors;
    }
}

// register the providers
const provider = new BookmarksContentProvider();
const viewer = new WhatsNewManager(context)
    .registerContentProvider("alefragnani", "bookmarks", provider)
    .registerSocialMediaProvider(new BookmarksSocialMediaProvider())
    .registerSponsorProvider(new BookmarksSponsorProvider());

// show the page (if necessary)
await viewer.showPageInActivation();

// register the additional command (not really necessary, unless you want a command registered in your extension)
context.subscriptions.push(vscode.commands.registerCommand("bookmarks.whatsNew", () => viewer.showPage()));

Features

Detects version updates

It follows SEMVER - Semantic Versioning to detect Major, Minor and Patch versions. The What's New page will only be displayed when a Major or Minor update occurs. Patches are updated silently.

Template Based

I don't have to deal with HTML or CSS on my extensions anymore. I just have to provide the relevant information and the HTML page is automatically generated/updated.

Inspiration

The idea came from the GitLens extension by @eamodio (big thanks to Eric Amodio :claps:). Based on pieces of its welcome page, I created this template based engine, to be able to use in any of my extensions, with minimum effort.

License

MIT © Alessandro Fragnani

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].