Code Monkey home page Code Monkey logo

glyphfriend's Introduction

Glyphfriend

Glyphfriend is a Visual Studio extension to enhance the existing Intellisense to display preview glyphs for many of the common glyph-based font libraries like Font Awesome, Bootstrap, and much more.

Supported Glyphs and Libraries

Getting Started

Glyphfriend has a separate extension for both Visual Studio 2015, Visual Studio 2017, Visual Studio 2019, so to get started, you'll simply need to download the version(s) that apply to you from the Visual Studio Marketplace:

You can also just search for it within the Tools > Extensions and Updates or Extensions > Manage Extensions area of Visual Studio.

After installing the extension, that's it. Glyphfriend will automatically detect when a valid HTML flavored file is opened and it will add all of the supported icons to the autocompletion within class attributes as seen below:

Glyphfriend in Action

Setting Preferences

By default, Glyphfriend has support for Bootstrap Glyphicons enabled by default, however you can easily select the libraries that you prefer to use by simply right-clicking and selecting the preferred library from the Glyphfriend context menu in any HTML-supported file as seen below:

Glyphfriend Library Toggling

It's important to note that library preferences are persistent across Visual Studio sessions. Basically, you will only need to define which libraries that you want to use and they will be available the next time you open Visual Studio.

What's In Here?

Within this repository you'll find all of the necessary projects that make Glyphfriend work, which can be described below:

  • Glyphfriend.Core - This project is a Shared Library for Visual Studio 2019 that contains all of the necessary code for the extension to work. Namely the autocompletion providers and the necessary code to handle deserializing the glyphs at run-time.
  • Glyphfriend.Core.Legacy - This project is a Shared Library for Visual Studio 2015/2017 that contains all of the necessary code for the extension to work. Namely the autocompletion providers and the necessary code to handle deserializing the glyphs at run-time.
  • Glyphfriend.Packager - This project functions as a build-time dependency for the two extension projects and handles generating a binary file containing all of the glyph mappings (via Protobuf), which is consumed and deserialized within the Glyphfriend.Core package.
  • Glyphfriend.VS2015 - This project stores all of the necessary manifest information for the Visual Studio 2015 extension, and defines all of the metadata that populates the marketplace.
  • Glyphfriend.VS2017 - This project stores all of the necessary manifest information for the Visual Studio 2017 extension, and defines all of the metadata that populates the marketplace.
  • Glyphfriend.VS2019 - This project stores all of the necessary manifest information for the Visual Studio 2019 extension, and defines all of the metadata that populates the marketplace.

Find an Issue?

If you find an issue or encounter a problem with the extension, please don't hesitate to contact me or file an issue with the Issues are of this repository and I'll try to address it as soon as possible.

NOTE: If you use Resharper, then Glyphfriend may not work properly (or at all), so read this.

Issues with Resharper and Glyphfriend have been widely reported (enough to warrant a spot here) and are outside of my control. Many of the APIs that Glyphfriend relies on are overridden by Resharper and thus don't allow the extension to ever be accessed by Visual Studio directly.

The following two options have been successful with other Resharper users, so I would highly recommend trying either of them:

  • Try disabling any HTML features within Resharper - By disabling the HTML autocompletion and other features, this should hopefully allow for Glyphfriend to hook into the necessary APIs and work as expected.
  • Consider downloading the ResharperGlyphfriend Plug-in - A member of the community, Kelby Hunt (Huntk23) wrote a Resharper plug-in port of Glyphfriend, which attempts to implement much of the functionality of this extension. Consider downloading it if the previous approach didn't work as expected.

Missing Something?

Pull Requests are openly accepted and encouraged.

The libraries that were chosen were just some of the more common ones that I had come across, but I am sure that I left quite a few out. If you find that one of your favorites is missing, you can either report it within the Issues area or just clone this repository, make a fork and add your changes (and then just make a pull request when you are all done).

Thanks

I would like to give a special shout-out to several members of the community, including a few from the Visual Studio Tooling team, for their assistance in evolving, developing, and testing Glyphfriend:

Additionally, I want to thank everyone for their feedback on the extension, new feature ideas, and all of the folks that don't hesitate to shoot an e-mail my way regarding the project.

glyphfriend's People

Contributors

itsmesousuke avatar madskristensen avatar rionmonster avatar sharwell avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

glyphfriend's Issues

Dynamic Glyph Generation

Explore the possibility of referencing the various Glyph-related fonts and generating a Bitmap to use as the thumbnail. It may reduce the need for including all of the available Glyphs as resources within the extension and may help to "future-proof" it as well.

Glyphicons / Bootstrap Conflict

It appears that the existing Glyphicons Provider is being overridden by the built-in Bootstrap glyphs included in Visual Studio.

Refactor Image Dictionaries to Handle Redundancies

At present, Glyphfriend uses a static dictionary to manage various glyphs so that they can be easily accessed within the GetCompletionGlyph() event found in each of the GlyphCompletionProvider implementations :

if (_regex.IsMatch(filename))
{
                if (GlyphfriendPackage.Glyphs.ContainsKey(entryName))
                {
                    return GlyphfriendPackage.Glyphs[entryName];
                }
                return GlyphfriendPackage.Glyphs["icon-default"];
}

This works just fine, however if multiple libraries use the same prefix (such as the Entypo library and IcoMoon, which use icon-), then a call becomes ambiguous and may serve the incorrect glyph (or it will attempt to add the same key to the dictionary and blow up).

Support for GitHub Glyphs in Markdown

This would come handy for blog systems relying on Markdown for content generation.

I would like to work on it. But I have my exams right now, so maybe a month later.
PS: I actually wanted to get some idea about how the extension works so that I can get up to speed quicker.

Update Material Design Icons (to v1.4.57)

Since the Material Design library supports community contributions, it is constantly being updated with the additions of new glyphs. Since it's been a month or so since the previous release, I thought it would be worth checking for any recent changes.

Rollback Support for Visual Studio "15"

As it stands, Visual Studio "15" will not currently support Glyphfriend, primarily due to some API changes and the lack of Web Tooling support.

A version-specific release is planned when the appropriate tooling is available, but attempting to use the current version of Glyphfriend could cause crashes when being installed on "15".

Conflicting Glyph Providers

When using multiple Glyph Providers, it appears that only one will take precedence over the others (e.g. Font Awesome will properly display its glyphs, but all of the Ionic entries will appear using the default glyph).

NullReferenceException on document.getElementById('')

While typing document.getElementById() when you start to type parameter value inside getElementById method, Glyphfriend Extension causes Visual Studio to crash. The details are below:

Extension Version: v1.4.2 (Updated on 15.04.2016)

The stack of the exception:

Application: devenv.exe
Framework Version: v4.0.30319
Description: The process was terminated due to an unhandled exception.
Exception Info: System.NullReferenceException
at Glyphfriend.GlyphCompletionProviders.FontAwesomeGlyphCompletionProvider.GetCompletionGlyph(System.String, System.Uri, Microsoft.CSS.Editor.Completion.CssNameType)
at Microsoft.CSS.Editor.Document.Cache.TreeCachedNameCollector.CollectClassName(Microsoft.CSS.Core.Parser.ParseItem)
at Microsoft.CSS.Editor.Document.Cache.TreeCachedNameCollector.Visit(Microsoft.CSS.Core.Parser.ParseItem)
at Microsoft.CSS.Core.Parser.ComplexItem.Accept(Microsoft.CSS.Core.Parser.ICssSimpleTreeVisitor)
at Microsoft.CSS.Core.Parser.ComplexItem.Accept(Microsoft.CSS.Core.Parser.ICssSimpleTreeVisitor)
at Microsoft.CSS.Core.Parser.ComplexItem.Accept(Microsoft.CSS.Core.Parser.ICssSimpleTreeVisitor)
at Microsoft.CSS.Core.Parser.ComplexItem.Accept(Microsoft.CSS.Core.Parser.ICssSimpleTreeVisitor)
at Microsoft.CSS.Core.Parser.ComplexItem.Accept(Microsoft.CSS.Core.Parser.ICssSimpleTreeVisitor)
at Microsoft.VisualStudio.Html.Package.Project.CSS.CssProjectItemData.GetNames(Microsoft.CSS.Core.TreeItems.StyleSheet, System.Threading.CancellationToken)
at Microsoft.VisualStudio.Html.Package.Project.CSS.CssProjectItemData+<>c__DisplayClass43_2.b__1()
at System.Threading.Tasks.Task`1[[System.__Canon, mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089]].InnerInvoke()
at System.Threading.Tasks.Task.Execute()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(System.Threading.Tasks.Task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(System.Threading.Tasks.Task)
at Microsoft.VisualStudio.Html.Package.Project.CSS.CssProjectItemData+d__43.MoveNext()
at System.Runtime.CompilerServices.AsyncMethodBuilderCore+<>c.b__6_0(System.Object)
at System.Windows.Threading.ExceptionWrapper.InternalRealCall(System.Delegate, System.Object, Int32)
at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(System.Object, System.Delegate, System.Object, Int32, System.Delegate)
at System.Windows.Threading.DispatcherOperation.InvokeImpl()
at System.Windows.Threading.DispatcherOperation.InvokeInSecurityContext(System.Object)
at System.Threading.ExecutionContext.RunInternal(System.Threading.ExecutionContext, System.Threading.ContextCallback, System.Object, Boolean)
at System.Threading.ExecutionContext.Run(System.Threading.ExecutionContext, System.Threading.ContextCallback, System.Object, Boolean)
at System.Threading.ExecutionContext.Run(System.Threading.ExecutionContext, System.Threading.ContextCallback, System.Object)
at MS.Internal.CulturePreservingExecutionContext.Run(MS.Internal.CulturePreservingExecutionContext, System.Threading.ContextCallback, System.Object)
at System.Windows.Threading.DispatcherOperation.Invoke()
at System.Windows.Threading.Dispatcher.ProcessQueue()
at System.Windows.Threading.Dispatcher.WndProcHook(IntPtr, Int32, IntPtr, IntPtr, Boolean ByRef)
at MS.Win32.HwndWrapper.WndProc(IntPtr, Int32, IntPtr, IntPtr, Boolean ByRef)
at MS.Win32.HwndSubclass.DispatcherCallbackOperation(System.Object)
at System.Windows.Threading.ExceptionWrapper.InternalRealCall(System.Delegate, System.Object, Int32)
at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(System.Object, System.Delegate, System.Object, Int32, System.Delegate)
at System.Windows.Threading.Dispatcher.LegacyInvokeImpl(System.Windows.Threading.DispatcherPriority, System.TimeSpan, System.Delegate, System.Object, Int32)
at MS.Win32.HwndSubclass.SubclassWndProc(IntPtr, Int32, IntPtr, IntPtr)

Update Font Awesome Icons (to 4.6.3)

Update the existing Font Awesome library to the latest version (4.6.3) and include the following new and missing icons :

  • fa-fa
  • fa-first-order
  • fa-google-plus-circle
  • fa-google-plus-official
  • fa-pied-piper-pp
  • fa-resistance
  • fa-themeisle
  • fa-yoast

Extension doesn't link to the gallery page

When the extension is installed in Visual Studio, the entry in the "Extensions and updates" dialog should have a link to more information, like the VS Extension Gallery page. This is probably just a missing entry in the metadata file.

Question: Is the Intellisense supposed to work on plain html files

I am using latest update of VS 2015, have installed this plug-in however I am using plain old html files and I can't seem to get and Intellisense other that what is defined/used in the current document.

I am taking a guess that this is not how this plugin functions, but could you please clarify, and let me know if there is another was to make it possible.

Map css file name to font toolkit

I happen to combine FontAwesome and Bootstrap into one css file. It would be nice if there was a way to specify name of css file and font toolkit.

Missing Glyphs for IonIcon

The following glyphs are missing from the IonIcon Intellisense :

  • android-arrow-forward
  • android-drawer
  • android-stair-drawer
  • android-user-menu
  • aperture
  • asterisk
  • bonfire
  • cash
  • closed-captioning
  • cube
  • fireball
  • flame
  • funnel
  • happy
  • heart-broken
  • ios-ios7-americanfootball
  • ios-ios7-americanfootball-outline
  • ios-ios7-analytics
  • ios-ios7-analytics-outline
  • ios-ios7-barcode
  • ios-ios7-barcode-outline
  • ios-ios7-baseball
  • ios-ios7-baseball-outline
  • ios-ios7-basketball
  • ios-ios7-basketball-outline
  • ios-ios7-expand
  • ios-ios7-football
  • ios-ios7-football-outline
  • ios-ios7-home
  • ios-ios7-home-outline
  • ios-ios7-loop
  • ios-ios7-loop-strong
  • ios-ios7-paper
  • ios-ios7-paper-outline
  • ios-ios7-paw
  • ios-ios7-paw-outline
  • ios-ios7-pricetags
  • ios-ios7-pricetags-outline
  • ios-ios7-pulse
  • ios-ios7-pulse-outline
  • ios-ios7-reload
  • ios-ios7-reloading
  • ios-ios7-reverse-camera
  • ios-ios7-reverse-camera-outline
  • ios-ios7-settings
  • ios-ios7-settings-outline
  • ios-ios7-shrink
  • ios-ios7-star-half
  • ios-ios7-tennis-ball
  • ios-ios7-tennis-ball-outline
  • ios-ios7-toggle
  • ios-ios7-toggle-outline
  • loading-a
  • loading-b
  • loading-c
  • loading-d
  • looping
  • merge
  • mouse
  • network
  • outlet
  • planet
  • podium
  • pull-request
  • qr-scanner
  • quote
  • refreshing
  • ribbon-a
  • ribbon-b
  • sad
  • scissors
  • social-foursquare
  • social-foursquare-outline
  • social-google
  • social-google-outline
  • social-instagram
  • social-instagram-outline
  • social-usd
  • social-usd-outline
  • spin
  • toggle
  • toggle-filled
  • trophy
  • university
  • wand

Incompatible with ReSharper?

I installed this extension but it doesn't seem to be working. Do you happen to know if there is a compatibility issue having ReSharper installed?

Glyphfriend and Dark Theme

Is there an option somewhere that supports VStudio's dark theme mode? My icons end up looking like this and it's pretty hard to read. Using the R# version, BTW. Nice extension.

image

Improve Performance via Binary Serialization

Since performance is an extremely important feature for extensions to consider within Visual Studio 2017, investigate several approaches to improve load times and use-cases.

A current consideration would be to use a library like Protobuf to binary serialize all of the glyphs within the library at build-time, and import this binary package into the extension, where it would be deserialized as needed, which should be much faster than the current traverse-glyph-directories-and-build-dictionary approach.

IcoMoon Pathing

Since pathing for the IcoMoon styles are extremely "generic" (e.g. the CSS file is named style.css). The path itself and not the file name will need to be matched via a regular expression.

Add CDN Support, Non-Project Scenarios

Add support for Glyph libraries that are referenced via CDN as opposed to the current mechanism, which simply traverses the current project for matching file names (via a Regex); This may also help scenarios for single files such as a File > New HTML File experience.

Add Default Icon for Metro UI

Currently the MetroUI glyphs do not have a default icon to be served when no others are available. After support is added for the library (Issue #48) ensure that a default icon is chosen.

Handle Intellisense Support for Non-Project Solutions

Add support for Glyphfriend to search non-project solutions (i.e. web sites, etc.), which appears to not work as expected, even when a solution contains just an .html file along with a supported .css file (such as bootstrap.css). See Issue #66.

Add Missing Glyphs from Material Design

Currently, there are quite a few glyphs missing after initially testing the Material Design library (Issue #29):

  • account-star
  • account-star-variant
  • arrow-bottom-drop-circle
  • biohazard
  • briefcase-check
  • calendar-multiple-check
  • case-sensitive-alt
  • close-box
  • close-box-outline
  • comment-multiple-outline
  • email-outline
  • facebook-messenger
  • firefox
  • format-wrap-inline
  • format-wrap-square
  • format-wrap-tight
  • format-wrap-top-bottom
  • github-circle
  • google-circles-group
  • guitar
  • guitar-pick
  • guitar-pick-outline
  • headphones-settings
  • houzz
  • image-multiple
  • lock-open
  • lock-open-outline
  • math-compass
  • motorbike
  • nutrition
  • phone-settings
  • regex
  • rss
  • selection
  • settings
  • settings-box
  • target
  • ticket
  • toggle-switch
  • trophy
  • trophy-award
  • trophy-variant
  • vibrate
  • view-grid

Glyphs will need to be found and implemented for all of these prior to release to match the intended version (1.4.57)

Glyphfriend on .aspx page

I installed the Glyphfriend in Visual Studio 2015. The intellisense does not work on an .aspx page but it works fine on an .html page. Is there something else I need to get this to work on an .aspx page?

1.5.80 doesn't install

Glyphfriend 1.5.80 for VS2015 doesn't install, because license.txt is missing. The installer log says:

18.11.2016 09:10:49 - -------------------------------------------
18.11.2016 09:10:49 - Initializing Install...
18.11.2016 09:10:49 - Microsoft.VisualStudio.ExtensionManager.MissingPackagePartException: The package does not contain the software license agreement that is specified in the extension manifest (LICENSE.txt).
   at Microsoft.VisualStudio.ExtensionManager.ExtensionHeaderImpl.get_License()
   at VSIXInstaller.App.InitializeInstall(Boolean isRepairSupported)
   at VSIXInstaller.App.InitializeInstall()
   at System.Threading.Tasks.Task.InnerInvoke()
   at System.Threading.Tasks.Task.Execute()

I guess this issue was introduced in 68dad1a

Icons shown as blank since 1.5.1.1

Just create a new website on local driver and install bootstrap 3.x via nuget, but I get icons shown in intellisense window totally, just showing blank icon.

See image: Pic

I've tested many versions, found version 1.5.0 works, but since 1.5.1.1 this problem comes out, I think this may be due to new the async load method.

Simplify GlyphProvider Creation / Implementation

There is currently quite a bit of redundant code when working with multiple providers. Consider refactoring to use a BaseGlyphProvider that would implement the GetCompletionGlyph() method which is essentially the same for all of the library-specific providers.

Office imageMso support?

Dear Rion,

First, thank you so much for a great tool!

As an idea/suggestion - would you think it could make sense to add support for office ribbon icons (so called "imageMso" images) to help people who design office extensions using XML. This has been an issue for a while already, and these are really hard to find. Check out this tool for example:

https://imagemso.codeplex.com/
https://msdn.microsoft.com/en-us/library/dd953682.aspx
http://www.excelguru.ca/blog/2007/05/05/identifying-your-imagemso-excel-word-powerpoint/

It shows the images, but it would be great if autocomplete can be done. I could assist with incorporating these images. Please note, in case there are A LOT of them (more than 8.000) so keeping them as they are now (as file set in a folder) seem to be problematic in this case. I have tried to implement that in my fork, please check the screenshot of what i'm talking about:

image

Anyways, your thoughts are most welcome. Do you think such a feature worth adding, or it could be better to go for a separate project for such thing?

Kind regards,
Nikolay.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.