Merge pull request #364 from Microsoft/design-polish

Add design polish to public pages
This commit is contained in:
Kenneth Auchenberg 2018-01-17 13:23:18 -08:00 committed by GitHub
commit 9cd912fd64
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 266 additions and 115 deletions

BIN
.jekyll-metadata Normal file

Binary file not shown.

View file

@ -19,4 +19,4 @@ index: 3
| Haskell | [Alan Zimmerman](https://github.com/alanz) | [Haskell-LSP](https://github.com/alanz/haskell-lsp)|
| C# | [OmniSharp](http://www.omnisharp.net/) | [C#-LSP](https://github.com/OmniSharp/csharp-language-server-protocol)|
| C# | [Inomata Kentaro](https://github.com/matarillo/) | [LanguageServerProtocol](https://github.com/matarillo/LanguageServerProtocol)|
{: .table .table-bordered}
{: .table .table-bordered .table-responsive}

View file

@ -63,4 +63,4 @@ The language servers are listed in chronological order of appearance.
| Gauge| [Gauge](https://github.com/getgauge) | [Gauge Language Server](https://github.com/getgauge/gauge/) |
| Ballerina | [BallerinaLang.org](https://ballerinalang.org/) | [Ballerina Language Server](https://github.com/ballerinalang/language-server) |
| Dart | [Nate Bosch (@natebosch)](https://github.com/natebosch) | [Dart Language Server](https://github.com/natebosch/dart_language_server) |
{: .table .table-bordered}
{: .table .table-bordered .table-responsive}

View file

@ -23,4 +23,4 @@ index: 2
|vim8 and neovim| [Prabir Shrestha](https://github.com/prabirshrestha) | [vim-lsp](https://github.com/prabirshrestha/vim-lsp) |
|Visual Studio| [Adam Friedman](https://github.com/tintoy) | [LSP client in Visual Studio](https://github.com/tintoy/dotnet-language-client/tree/sample/visual-studio/samples/VisualStudioExtension) |
|Visual Studio| Microsoft | [LSP Preview](https://marketplace.visualstudio.com/items?itemName=vsext.LanguageServerClientPreview) |
{: .table .table-bordered}
{: .table .table-bordered .table-responsive}

View file

@ -1,8 +1,26 @@
<footer class="footer">
<div class="container">
<hr>
<p class="text-center">
{{ site.title }} {{ site.time | date: '%Y' }} | Site Powered by <a href="https://jekyllrb.com/">Jekyll</a> and <a href="https://getbootstrap.com/">Bootstrap</a>
</p>
<div class="row">
<div class="col-sm-7">
<ul class="links">
<li>
<span class="message">Hello from Seattle and Zürich.</span>
</li>
<li>
<a class="github-button" href="https://github.com/Microsoft/language-server-protocol" data-icon="octicon-star" data-show-count="true" aria-label="Star Microsoft/language-server-protocol on GitHub">Star</a>
</li>
<li>
<a class="github-button" href="https://github.com/Microsoft/language-server-protocol/subscription" aria-label="Watch Microsoft/language-server-protocol on GitHub">Watch</a>
</li>
</ul>
</div>
<div class="col-sm-5">
<div class="copyright">
<a id="footer-microsoft-link" class="logo" href="https://www.microsoft.com">
<img src="{{site.baseurl}}/img/microsoft.svg" alt="Microsoft">
</a>
</div>
</div>
</div>
</div>
</footer>

View file

@ -6,13 +6,13 @@
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<!-- link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" -->
<link rel="stylesheet" href="{{ "/css/bootswatch/cosmo/bootstrap.min.css" | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ "/css/fontawesome-all.min.css" | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
<link rel="shortcut icon" href="{{ "/favicon.ico?1" | prepend: site.baseurl }}">
<link rel="shortcut icon" href="{{ "/img/favicon.png" | prepend: site.baseurl }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
</head>

View file

@ -4,3 +4,5 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="{{ site.baseurl }}/js/page.js"></script>

View file

@ -1,35 +1,29 @@
<header class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<header class="navbar navbar-expand-lg navbar-dark bg-primary lsp-navbar">
<div class="container navbar-container">
<a class="navbar-brand" href="{{ site.baseurl }}/">
<!--span><img src="{{site.baseurl}}/img/logonav.png"></span -->{{ site.title }}
{% if page.sectionid != nil %}
<h1>LSP</h1>
{% endif %}
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarColor01">
<div class="navbar-collapse collapse" id="navbarSupportedContent">
{% assign sorted = site.implementors | sort: 'index' %}
<ul class="navbar-nav mr-auto">
<ul class="navbar-nav ml-auto">
<li {% if page.sectionid=='howItWorks' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
<a class="nav-link" href='{{ "/howItWorks" | prepend: site.baseurl }}'>How it Works</a>
</li>
<li {% if page.sectionid=='specification' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
<a class="nav-link" href='{{ "/specification" | prepend: site.baseurl }}'>Specification</a>
<a class="nav-link" href='{{ "/overview" | prepend: site.baseurl }}'>Overview</a>
</li>
<li {% if page.sectionid=='implementors' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
<a class="nav-link" href="{{ sorted.first.url | prepend: site.baseurl }}">Implementations</a>
</li>
</ul>
</div>
<div class="navbar-right">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{ site.git_address }}">
<i class="fab fa-github" aria-hidden="true"></i>
</a>
<li {% if page.sectionid=='specification' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
<a class="nav-link" href='{{ "/specification" | prepend: site.baseurl }}'>Specification</a>
</li>
</ul>
</div>
</div>
</header>
<div id="filler" style="padding: 3px"></div>
</header>

View file

@ -2,15 +2,10 @@
layout: default
---
<div style="height: 1rem">
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-xl-2 d-none d-lg-block">
<div class="card sticky-top" style="top: 4.5rem">
<div class="card-header">
Implementations
</div>
<div class="row single-page">
<div class="col-lg-3 col-xl-2 d-none d-lg-block lsp-sidebar">
<div class="card">
<ul class="nav flex-column list-unstyled">
{% assign sorted = site.implementors | sort: 'index' %}
{% for post in sorted %}
@ -25,7 +20,19 @@ layout: default
</div>
<div class="col-md-8">
<h1>{{ page.title }}</h1>
<nav id="small-nav" class="docs-nav d-lg-none">
<h4>Topics</h4>
<select id="small-nav-dropdown">
{% assign sorted = site.implementors | sort: 'index' %}
{% for post in sorted %}
<option value="{{ post.url | prepend: site.baseurl }}" {% if page.title==post.title %}selected{% endif %} >{{ post.shortTitle }}</option>
{% endfor %}
</select>
</nav>
<h1>Implementations</h1>
<h2>{{ page.title }}</h2>
<div id="markdown-content-container">{{ content }}</div>
</div>
<div class="col-lg-2 d-none d-xl-block">

View file

@ -2,10 +2,8 @@
layout: default
---
<div style="height: 1rem">
</div>
<div class="container">
<div class="row">
<div class="row single-page">
<div class="col-lg-2 d-none d-xl-block">
</div>
<div class="col-lg-8">

View file

@ -2,45 +2,40 @@
layout: default
---
<div style="height: 1rem">
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 d-none d-xl-block">
<div class="row single-page">
<div class="col-lg-3 col-xl-2 d-none d-lg-block">
</div>
<div class="col-lg-8">
<div id="markdown-content-container">{{ content }}</div>
</div>
<div class="col-lg-3 col-xl-2 d-none d-lg-block">
<div class="sticky-top" style="top: 4.5rem">
{% for toc-l1 in site.data.specification-toc %}
<div class="card">
<div class="card-header toc-title">
{{ toc-l1.title }}
</div>
<div id="outlineAccordion" data-children=".item">
{% for toc-l2 in toc-l1.children %}
<div class="item">
<a class="nav-link toc-link" data-toggle="collapse" data-parent="#outlineAccordion" href="#{{ toc-l2.anchor }}" aria-expanded="true" aria-controls="exampleAccordion1">
{{ toc-l2.title }}
</a>
<div id="{{ toc-l2.anchor }}" class="collapse {% if toc-l2.anchor=='general' %}show{% endif%}" role="tabpanel">
<ul class="nav toc flex-column" style="padding-left: 0.5rem">
{% for toc-l3 in toc-l2.children %}
<li class="nav-item">
<a class="nav-link toc-link" href="#{{ toc-l3.anchor }}">
{{ toc-l3.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="col-lg-3 col-xl-2 d-none d-lg-block lsp-sidebar">
{% for toc-l1 in site.data.specification-toc %}
<div class="card">
<div id="outlineAccordion" data-children=".item">
{% for toc-l2 in toc-l1.children %}
<div class="item">
<a class="nav-link" data-toggle="collapse" data-parent="#outlineAccordion" href="#{{ toc-l2.anchor }}" aria-expanded="true" aria-controls="exampleAccordion1">
{{ toc-l2.title }}
</a>
<div id="{{ toc-l2.anchor }}" class="collapse {% if toc-l2.anchor=='general' %}show{% endif%}" role="tabpanel">
<ul class="nav toc flex-column" style="padding-left: 0.5rem">
{% for toc-l3 in toc-l2.children %}
<li class="nav-item">
<a class="nav-link toc-link" href="#{{ toc-l3.anchor }}">
{{ toc-l3.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>

View file

@ -1,4 +1,4 @@
---
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";
@ -9,16 +9,39 @@ html {
}
body {
/* we have a top fixed nav bar */
margin-top: 50px;
margin-bottom: 46px;
letter-spacing: .25px;
text-rendering: optimizeLegibility;
}
.single-page {
padding: 40px 0;
}
.header-container {
// background: url('../protocol.jpg');
background-size: cover;
background-position: center 36%;
margin-top: -37px;
color: #fff;
@media (min-width: 576px) {
margin-bottom: 80px;
}
h1 {
margin-top: 15px;
font-weight: bold;
}
.intro {
text-align: center;
}
.intro-text {
margin: 0 auto;
max-width: 450px;
text-align: center;
}
}
h2 {
margin-bottom: 20px;
}
.toc {
@ -36,7 +59,7 @@ body {
}
.toc-link {
padding: 0.125rem 0.5rem;
padding: 0.125rem 0.5rem;
color: #707070
}
@ -314,4 +337,101 @@ pre[class=highlight] {
.highlight .il {
color: #F5871F
}
}
.more-info {
padding: 100px 0;
p {
padding: 0;
}
}
.footer {
padding: 15px 0;
color: #000;
background: #e9ecef;
@media (min-width: 576px) {
padding: 50px 0;
}
img {
width: 100px;
@media (min-width: 576px) {
float: right;
}
}
ul {
margin: 0;
padding: 0;
}
.message {
display: inline-block;
padding-right: 10px;
}
.links {
padding-bottom: 10px;
@media (min-width: 576px) {
padding: 0;
}
li {
list-style: none;
padding-bottom: 10px;
@media (min-width: 576px) {
display: inline-block;
padding: 0;
}
}
}
iframe {
position: relative;
top: 5px;
}
}
@media (min-width: 768px) {
.lsp-navbar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1071;
}
.lsp-sidebar {
position: -webkit-sticky;
position: sticky;
top: 100px;
z-index: 1000;
height: calc(100vh - 100px);
}
}
.navbar-brand h1 {
font-size: 18px;
font-weight: bold;
margin: 0;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: rgba(255,255,255,0.5);
}
.navbar-dark .navbar-nav .nav-link {
color: white;
}
.docs-nav {
h4 {
display: inline-block;
font-size: 14px;
}
}

BIN
img/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

1
img/microsoft.svg Normal file
View file

@ -0,0 +1 @@
<svg width="604" height="129" viewBox="0 0 604 129" xmlns="http://www.w3.org/2000/svg"><path d="M213.2 74.3l-3.6 10.2h-.3c-.6-2.3-1.7-5.8-3.5-10L186.5 26h-18.9v77.3h12.5V55.6c0-3 0-6.4-.1-10.6-.1-2.1-.3-3.7-.4-4.9h.3c.6 3 1.3 5.2 1.8 6.6l23.2 56.4h8.8l23-56.9c.5-1.3 1-3.9 1.5-6.1h.3c-.3 5.7-.5 10.8-.6 13.9v49h13.3V25.8H233l-19.8 48.5zm50.6-26.7h13V103h-13V47.6zm6.6-23.4c-2.2 0-4 .8-5.5 2.2-1.5 1.4-2.3 3.2-2.3 5.4 0 2.1.8 3.9 2.3 5.3 1.5 1.4 3.3 2.1 5.5 2.1s4.1-.8 5.5-2.1c1.5-1.4 2.3-3.2 2.3-5.3 0-2.1-.8-3.9-2.3-5.4-1.3-1.4-3.2-2.2-5.5-2.2zm52.5 22.9c-2.4-.5-4.9-.8-7.3-.8-5.9 0-11.3 1.3-15.8 3.9-4.5 2.6-8.1 6.2-10.4 10.7-2.4 4.6-3.6 9.9-3.6 16 0 5.3 1.2 10 3.5 14.3 2.3 4.2 5.5 7.6 9.8 9.9 4.1 2.3 8.9 3.5 14.3 3.5 6.2 0 11.5-1.3 15.7-3.7l.1-.1v-12l-.5.4c-1.9 1.4-4.1 2.6-6.3 3.3-2.3.8-4.4 1.2-6.2 1.2-5.2 0-9.3-1.5-12.2-4.8-3-3.2-4.5-7.6-4.5-13.1 0-5.7 1.5-10.2 4.6-13.5 3.1-3.3 7.2-5 12.2-5 4.2 0 8.5 1.4 12.4 4.2l.5.4V49.2l-.1-.1c-1.7-.7-3.6-1.5-6.2-2zm42.9-.4c-3.2 0-6.2 1-8.8 3.1-2.2 1.8-3.7 4.4-5 7.5h-.1v-9.7h-13V103h13V74.7c0-4.8 1-8.8 3.2-11.7 2.2-3 5-4.5 8.4-4.5 1.2 0 2.4.3 3.9.5 1.4.4 2.4.8 3.1 1.3l.5.4v-13l-.3-.1c-.9-.6-2.7-.9-4.9-.9zm35.4-.3c-9.1 0-16.4 2.7-21.5 8-5.2 5.3-7.7 12.6-7.7 21.8 0 8.6 2.6 15.6 7.6 20.7 5 5 11.8 7.6 20.3 7.6 8.9 0 16-2.7 21.1-8.1 5.2-5.4 7.7-12.6 7.7-21.5 0-8.8-2.4-15.8-7.3-20.9-4.7-5.1-11.6-7.6-20.2-7.6zM411.6 89c-2.4 3.1-6.2 4.6-10.9 4.6s-8.5-1.5-11.2-4.8c-2.7-3.1-4-7.6-4-13.3 0-5.9 1.4-10.4 4-13.6 2.7-3.2 6.4-4.8 11.1-4.8 4.6 0 8.2 1.5 10.8 4.6 2.6 3.1 4 7.6 4 13.5-.2 6-1.3 10.7-3.8 13.8zm46.1-18.4c-4.1-1.7-6.7-3-7.9-4.1-1-1-1.5-2.4-1.5-4.2 0-1.5.6-3 2.1-4s3.2-1.5 5.7-1.5c2.2 0 4.5.4 6.7 1s4.2 1.5 5.8 2.7l.5.4V48.7l-.3-.1c-1.5-.6-3.5-1.2-5.9-1.7-2.4-.4-4.6-.6-6.4-.6-6.2 0-11.3 1.5-15.3 4.8-4 3.1-5.9 7.3-5.9 12.2 0 2.6.4 4.9 1.3 6.8.9 1.9 2.2 3.7 4 5.2 1.8 1.4 4.4 3 8 4.5 3 1.3 5.3 2.3 6.7 3.1 1.4.8 2.3 1.7 3 2.4.5.8.8 1.8.8 3.1 0 3.7-2.8 5.5-8.5 5.5-2.2 0-4.5-.4-7.2-1.3s-5.2-2.2-7.3-3.7l-.5-.4v12.7l.3.1c1.9.9 4.2 1.5 7 2.2 2.8.5 5.3.9 7.5.9 6.7 0 12.2-1.5 16.1-4.8 4-3.2 6.1-7.3 6.1-12.6 0-3.7-1-7-3.2-9.5-2.9-2.4-6.5-4.9-11.7-6.9zm49.2-24.2c-9.1 0-16.4 2.7-21.5 8-5.1 5.3-7.7 12.6-7.7 21.8 0 8.6 2.6 15.6 7.6 20.7 5 5 11.8 7.6 20.3 7.6 8.9 0 16-2.7 21.1-8.1 5.2-5.4 7.7-12.6 7.7-21.5 0-8.8-2.4-15.8-7.3-20.9-4.7-5.1-11.6-7.6-20.2-7.6zM517.2 89c-2.4 3.1-6.2 4.6-10.9 4.6-4.8 0-8.5-1.5-11.2-4.8-2.7-3.1-4-7.6-4-13.3 0-5.9 1.4-10.4 4-13.6 2.7-3.2 6.4-4.8 11.1-4.8 4.5 0 8.2 1.5 10.8 4.6 2.6 3.1 4 7.6 4 13.5 0 6-1.3 10.7-3.8 13.8zm86.7-30.7V47.6h-13.1V31.2l-.4.1L578 35l-.3.1v12.5h-19.6v-7c0-3.2.8-5.7 2.2-7.3 1.4-1.6 3.5-2.4 6.1-2.4 1.8 0 3.7.4 5.8 1.3l.5.3V21.2l-.3-.1c-1.8-.6-4.2-1-7.3-1-3.9 0-7.3.9-10.4 2.4-3.1 1.7-5.4 4-7.1 7.1-1.7 3-2.6 6.4-2.6 10.3v7.7h-9.1v10.6h9.1V103h13.1V58.3h19.6v28.5c0 11.7 5.5 17.6 16.5 17.6 1.8 0 3.7-.3 5.5-.6 1.9-.4 3.3-.9 4.1-1.3l.1-.1V91.7l-.5.4c-.8.5-1.5.9-2.7 1.2-1 .3-1.9.4-2.6.4-2.6 0-4.4-.6-5.7-2.1-1.2-1.4-1.8-3.7-1.8-7.1V58.3h13.3zM0 0h61.3v61.3H0M67.7 0H129v61.3H67.7M0 67.7h61.3V129H0m67.7-61.3H129V129H67.7" fill="#000"/></svg>

After

Width:  |  Height:  |  Size: 3 KiB

View file

@ -2,73 +2,75 @@
layout: default
---
<div class="header-container jumbotron">
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<div class="header-container bg-primary jumbotron">
<div class="container">
<h1>Language Server Protocol</h1>
<p>
<div class="intro">
<h1>Language Server Protocol</h1>
</div>
<p class="intro-text">
The Language Server Protocol (LSP) defines the protocol used between an editor or IDE to talk to a language server that provides language features like auto complete, goto definition, find all references.
</p>
<br />
<div class="intro-text">
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/Microsoft/language-server-protocol/subscription" data-size="large" aria-label="Watch Microsoft/language-server-protocol on GitHub">Watch</a>
</div>
</div>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="col-lg-7">
<h2 class="header-light regular-pad">What is the Language Server Protocol?</h2>
<blockquote>
<p>Implementing language support like auto complete, goto definition, or type hovering for a programming language for different development tools is a significant effort. Each development tool provides different APIs for language extenders. Moreover, an extension has to be implemented in the implementation language of the tool itself. This requires to implement the smartness for a language multiple times. The idea behind a <i>Language Server</i> is to provide the language smarts inside a server and using inter process communication and a protocol to talk to this server. If each language server speaks a different protocol then the integration of each server into each tool is custom. The idea behind the <i>Language Server Protocol</i> is to standardize this protocol and therefore to simplify the integration of different language servers in a development tool. This is a win for both the language provider and the development tool provider!
</p>
</blockquote>
<p>Implementing support for features like autocomplete, goto definition, or documentation on hover for a programming language is a significant effort. Traditionally this work must be repeated for each development tool, as each provides different APIs for implementing the same features.</p>
<p>The idea behind a <i>Language Server</i> is to provide the language-specific smarts inside a server that can communicate with development tooling over a protocol that enables inter-process communication.</p>
<p>The idea behind the <i>Language Server Protocol (LSP)</i> is to standardize the protocol for how tools and servers communicate, so a single <i>Language Server</i> can be re-used in multiple development tools, and tools can support languages with minimal effort.</p>
<p>LSP is a win for both langauge providers and tooling vendors!</p>
</div>
<div class="col-lg-6">
<div class="col-lg-5">
<div id="carouselOne" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row align-items-center">
<div class="col-lg-8">
<div class="col-lg-12">
<img src="img/vscode-css-code-complete.png" class="img-fluid rounded"/>
</div>
<div class="col-lg-4">
<p class="text-left"><i>CSS code complete in VS Code powered by the CSS LSP Server</i></p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row align-items-center">
<div class="col-lg-4">
<div class="col-lg-12">
<img src="img/atom-css-code-complete.png" class="img-fluid rounded"/>
<p class="text-left"><i>CSS code complete in Atom powered by the CSS LSP Server</i></p>
</div>
<div class="col-lg-8">
<img src="img/atom-css-code-complete.png" class="img-fluid rounded"/>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row align-items-center">
<div class="col-lg-8">
<div class="col-lg-12">
<img src="img/eclipse-css-code-complete.png" class="img-fluid rounded"/>
</div>
<div class="col-lg-4">
<p class="text-left"><i>CSS code complete in Eclipse IDE powered by the CSS LSP Server</i></p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row align-items-center">
<div class="col-lg-4">
<div class="col-lg-12">
<img src="img/vscode-ps-hover.png" class="img-fluid rounded"/>
<p class="text-left"><i>PowerShell Hover in VS Code powered by the PowerShell LSP Server</i></p>
</div>
<div class="col-lg-8">
<img src="img/vscode-ps-hover.png" class="img-fluid rounded"/>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row align-items-center">
<div class="col-lg-8">
<img src="img/vs-rust-code-complete.png" class="img-fluid rounded"/>
</div>
<div class="col-lg-4">
<p class="text-left"><i>Rust code complete in Visual Studio powered by the Rust LSP Server</i></p>
</div>
</div>
@ -80,10 +82,10 @@ layout: default
<hr>
<div class="row">
<div class="row more-info">
<div class="col-lg-4">
<h1 class="text-center"><i class="fa fa-cogs" aria-hidden="true"></i></h1>
<a href='{{ "/howItWorks" | prepend: site.baseurl }}'><h3 class="text-center">How the Protocol Works</h3></a>
<a href='{{ "/overview" | prepend: site.baseurl }}'><h3 class="text-center">Overview</h3></a>
<p>
The protocol defines the format of the messages sent using JSON-RPC between the development tool and the language server.
</p>
@ -92,7 +94,7 @@ layout: default
<h1 class="text-center"><i class="fas fa-book" aria-hidden="true"></i></h1>
<a href='{{ "/specification" | prepend: site.baseurl }}'><h3 class="text-center">Specification</h3></a>
<p>
The latest version of the protocol specification is version 3.0.
The latest version of the protocol specification is version 3.0.
</p>
</div>
<div class="col-lg-4">

3
js/page.js Normal file
View file

@ -0,0 +1,3 @@
$("#small-nav-dropdown").change(function() {
window.location = $(this).find("option:selected").val();
});

View file

@ -1,9 +1,20 @@
---
title: How it Works
title: Overview
layout: singlePage
sectionid: howItWorks
sectionid: overview
---
## What is the Language Server Protocol?
Implementing support for features like autocomplete, goto definition, or documentation on hover for a programming language is a significant effort. Traditionally this work must be repeated for each development tool, as each provides different APIs for implementing the same features.
The idea behind a <i>Language Server</i> is to provide the language-specific smarts inside a server that can communicate with development tooling over a protocol that enables inter-process communication.
The idea behind the <i>Language Server Protocol (LSP)</i> is to standardize the protocol for how tools and servers communicate, so a single <i>Language Server</i> can be re-used in multiple development tools, and tools can support languages with minimal effort.
LSP is a win for both langauge providers and tooling vendors!
## How it works
A language server runs as a separate process and development tools communicate with the server using the language protocol over JSON-RPC. Below is an example for how a tool and a language server communicate during a routine editing session:
<img src="./img/language-server-sequence.png" class="img-fluid" alt="language server protocol">

View file

@ -4,7 +4,7 @@ layout: specification
sectionid: specification
toc: true
---
# Language Server Protocol
# Language Server Protocol Specification
This document describes version 3.x of the language server protocol. An implementation for node of the 3.0 version of the protocol can be found [here](https://github.com/Microsoft/vscode-languageserver-node).
@ -33,7 +33,7 @@ Currently the following header fields are supported:
|:------------------|:------------|:------------|
| Content-Length | number | The length of the content part in bytes. This header is required. |
| Content-Type | string | The mime type of the content part. Defaults to application/vscode-jsonrpc; charset=utf-8 |
{: .table .table-bordered}
{: .table .table-bordered .table-responsive}
The header part is encoded using the 'ascii' encoding. This includes the '\r\n' separating the header and content part.
@ -520,7 +520,7 @@ Visual Basic | `vb`
XML | `xml`
XSL | `xsl`
YAML | `yaml`
{: .table .table-bordered}
{: .table .table-bordered .table-responsive}
#### VersionedTextDocumentIdentifier