Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcobiedermann
marcobiedermann committed Jun 7, 2016
0 parents commit 4c4ab9d
Show file tree
Hide file tree
Showing 20 changed files with 502 additions and 0 deletions.
51 changes: 51 additions & 0 deletions readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# HTML Head Sublime Text Snippets

A Sublime Text snippet library for HTML head elements, from the project [HEAD](https://github.com/joshbuchea/HEAD).

## Installation

### With [Package Control](https://packagecontrol.io/):

1. Run “Package Control: Install Package” command, find and install HTML Head Snippets plugin.
1. Restart Sublime Text Editor (if required)

### Git

1. Clone the repository into your Sublime Text 2 / 3 package directory.
```
git clone https://github.com/marcobiedermann/sublime-head-snippets.git
```

### Download

1. Download the [.zip](https://github.com/marcobiedermann/sublime-head-snippets/archive/master.zip) file and unzip it
1. Move the content into your Sublime Text 2 / 3 package directory. You can find your package directory by going to `Preferences > Browser Packages`.


## Usage

Start typing `head-` in HTML or PHP files and the autocomplete windows opens.

| Head Tags | Snippet code |
|-----------------------------|---------------|
| 360 Browser | head-360 |
| App Links | head-applinks |
| Apple Safari | head-safari |
| Apple iOS | head-ios |
| Elements | head-elements |
| Facebook / Instant Articles | head-fbia |
| Facebook / Open Graph | head-fbog |
| Favicons | head-favicons |
| Google Chrome | head-chrome |
| Google+ / Schema.org | head-gplus |
| Link | head-link |
| Meta | head-meta |
| Microsoft Internet Explorer | head-ie |
| QQ Mobile Browser | head-qq |
| Recommended Minimum | head-minimum |
| Twitter | head-twitter |
| UC Mobile Browser | head-uc |

## License

HTML Head Sublime Text Snippets Plugin is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
11 changes: 11 additions & 0 deletions snippets/head-360-browser.snippet
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<snippet>
<content><![CDATA[
<!-- select rendering engine in order -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>head-360</tabTrigger>
<description>HEAD 360 Browser</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html, source.php</scope>
</snippet>
20 changes: 20 additions & 0 deletions snippets/head-app-links.snippet
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<snippet>
<content><![CDATA[
<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web Fallback -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- More info: http://applinks.org/documentation/ -->
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>head-applinks</tabTrigger>
<description>HEAD App Links</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html, source.php</scope>
</snippet>
30 changes: 30 additions & 0 deletions snippets/head-apple-ios.snippet
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<snippet>
<content><![CDATA[
<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

<!-- Disable automatic detection and formatting of possible phone numbers -->
<meta name="format-detection" content="telephone=no">

<!-- Add to Home Screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="App Title">

<!-- Touch Icons -->
<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="path/to/apple-touch-icon-precomposed.png">
<!-- In most cases, one 180×180px touch icon in the head is enough -->
<!-- If you use art-direction and/or want to have different content for each device, you can add more touch icons -->

<!-- Startup Image -->
<link rel="apple-touch-startup-image" href="path/to/startup.png">

<!-- More info: https://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/articles/metatags.html -->
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>head-ios</tabTrigger>
<description>HEAD Apple iOS</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html, source.php</scope>
</snippet>
11 changes: 11 additions & 0 deletions snippets/head-apple-safari.snippet
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<snippet>
<content><![CDATA[
<!-- Pinned Site -->
<link rel="mask-icon" href="path/to/icon.svg" color="red">
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>head-safari</tabTrigger>
<description>HEAD Apple Safari</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html, source.php</scope>
</snippet>
25 changes: 25 additions & 0 deletions snippets/head-elements.snippet
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<snippet>
<content><![CDATA[
<!-- Document Title -->
<title>Page Title</title>

<!-- Base URL to use for all relative URLs contained within the document -->
<base href="https://example.com/page.html">

<!-- External CSS -->
<link rel="stylesheet" href="styles.css">

<!-- In-document CSS -->
<style>
/* ... */
</style>

<!-- JavaScript -->
<script src="script.js"></script>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>head-elements</tabTrigger>
<description>HEAD Elements</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html, source.php</scope>
</snippet>
17 changes: 17 additions & 0 deletions snippets/head-facebook-instant-articles.snippet
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<snippet>
<content><![CDATA[
<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- The URL of the web version of your article -->
<link rel="canonical" href="http://example.com/article.html">

<!-- The style to be used for this article -->
<meta property="fb:article_style" content="myarticlestyle">
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>head-fbia</tabTrigger>
<description>HEAD Facebook / Instant Articles</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html, source.php</scope>
</snippet>
20 changes: 20 additions & 0 deletions snippets/head-facebook-open-graph.snippet
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<snippet>
<content><![CDATA[
<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
<!-- Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup -->
<!-- Open Graph: http://ogp.me/ -->
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>head-fbog</tabTrigger>
<description>HEAD Facebook / Open Graph</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html, source.php</scope>
</snippet>
19 changes: 19 additions & 0 deletions snippets/head-favicons.snippet
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<snippet>
<content><![CDATA[
<!-- For IE 10 and below -->
<!-- No link, just place a file called favicon.ico in the root directory -->

<!-- For IE 11, Chrome, Firefox, Safari, Opera -->
<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png">
<link rel="icon" href="path/to/favicon-192.png" sizes="192x192" type="image/png">
<!-- More info: https://bitsofco.de/all-about-favicons-and-touch-icons/ -->
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>head-favicon</tabTrigger>
<description>HEAD Favicon</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html, source.php</scope>
</snippet>
13 changes: 13 additions & 0 deletions snippets/head-google-android.snippet
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<snippet>
<content><![CDATA[
<meta name="theme-color" content="#E64545">
<!-- Add to homescreen -->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>head-android</tabTrigger>
<description>HEAD Google Android</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html, source.php</scope>
</snippet>
13 changes: 13 additions & 0 deletions snippets/head-google-chrome.snippet
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<snippet>
<content><![CDATA[
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">

<!-- Disable translation prompt -->
<meta name="google" value="notranslate">
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>head-chrome</tabTrigger>
<description>HEAD Google Chrome</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html, source.php</scope>
</snippet>
13 changes: 13 additions & 0 deletions snippets/head-google-plus-schema.snippet
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<snippet>
<content><![CDATA[
<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>head-gplus</tabTrigger>
<description>HEAD Google+ / Schema.org</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html, source.php</scope>
</snippet>
37 changes: 37 additions & 0 deletions snippets/head-internet-explorer.snippet
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<snippet>
<content><![CDATA[
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<!-- Disable link highlighting on IE 10 on Windows Phone (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) -->
<meta name="msapplication-tap-highlight" content="no">

<!-- Pinned sites (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) -->
<meta name="application-name" content="Contoso Pinned Site Caption">
<meta name="msapplication-tooltip" content="Example Tooltip Text">
<meta name="msapplication-starturl" content="/">

<meta name="msapplication-config" content="http://example.com/browserconfig.xml">

<meta name="msapplication-allowDomainApiCalls" content="true">
<meta name="msapplication-allowDomainMetaTags" content="true">
<meta name="msapplication-badge" content="frequency=30; polling-uri=http://example.com/id45453245/polling.xml">
<meta name="msapplication-navbutton-color" content="#FF3300">
<meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile">
<meta name="msapplication-square150x150logo" content="path/to/logo.png">
<meta name="msapplication-square310x310logo" content="path/to/largelogo.png">
<meta name="msapplication-square70x70logo" content="path/to/tinylogo.png">
<meta name="msapplication-wide310x150logo" content="path/to/widelogo.png">
<meta name="msapplication-task" content="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico">
<meta name="msapplication-task-seperator" content="1">
<meta name="msapplication-TileColor" content="#FF3300">
<meta name="msapplication-TileImage" content="path/to/tileimage.jpg">
<meta name="msapplication-window" content="width=1024;height=768">
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>head-ie</tabTrigger>
<description>HEAD Internet Explorer</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html, source.php</scope>
</snippet>
49 changes: 49 additions & 0 deletions snippets/head-link.snippet
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<snippet>
<content><![CDATA[
<link rel="canonical" href="https://example.com/page.html">
<link rel="shortlink" href="https://example.com/?p=42">
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">
<link rel="stylesheet" href="https://example.com/styles.css">
<link rel="manifest" href="manifest.json">
<link rel="author" href="humans.txt">
<link rel="copyright" href="copyright.html">
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:[email protected]">
<link rel="me" href="sms:+15035550125">
<link rel="archives" href="https://example.com/2003/05/" title="May 2003">
<link rel="index" href="https://example.com/" title="DeWitt Clinton">
<link rel="start" href="https://example.com/photos/pattern_recognition_1_about/" title="Pattern Recognition 1">
<link rel="prev" href="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/" title="OpenSearch and OpenID? A sure way to get my attention.">
<link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">
<link rel="first" href="https://example.com/atomFeed.php">
<link rel="next" href="https://example.com/atomFeed.php?page=4">
<link rel="previous" href="https://example.com/atomFeed.php?page=2">
<link rel="last" href="https://example.com/atomFeed.php?page=147">
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<link rel="pingback" href="https://example.com/xmlrpc.php">
<link rel="webmention" href="https://example.com/webmention">
<link rel="import" href="component.html">

<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">

<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="subresource" href="styles.css">
<link rel="preload" href="image.png">
<!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>head-link</tabTrigger>
<description>HEAD Link</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html, source.php</scope>
</snippet>
Loading

0 comments on commit 4c4ab9d

Please sign in to comment.