Convert notes to admonitions

Signed-off-by: lucperkins <lucperkins@gmail.com>

assets/sass/style.sass

@@ -229,4 +229,23 @@ $colors: mergeColorMaps(("secondary": ($secondary, $white), "twitter-blue": ($tw
     margin-bottom: 2rem
 
     li + li
-      margin-top: .5rem
+      margin-top: .5rem
+
+=admon($color)
+  .icon
+    color: $color
+
+.admonition
+  margin-bottom: 2rem
+  padding: 1.5rem 2rem
+  border-radius: .5rem
+  border: 1.5px solid $grey-light
+
+  &.is-warning
+    +admon($warning)
+  &.is-success
+    +admon($success)
+  &.is-note
+    +admon($info)
+  &.is-requirement
+    +admon($grey)

content/docs/example.md

@@ -0,0 +1,14 @@
+---
+title: Example
+draft: true
+---
+
+Example doc!
+
+{{< success >}}
+Ea sunt quis cillum elit ipsum et sint nostrud sit sit ad ullamco minim aliqua. Exercitation excepteur ut tempor elit id. Officia eiusmod fugiat tempor ipsum anim incididunt. Irure incididunt esse do ad in magna eiusmod aliqua excepteur sunt.
+
+Cupidatat duis est consequat qui tempor elit. Amet aliquip voluptate Lorem ipsum fugiat non amet elit sunt pariatur reprehenderit tempor excepteur nostrud. Consequat tempor ea occaecat quis fugiat officia culpa tempor cillum do. Irure adipisicing enim ipsum consectetur elit.
+
+Ex Lorem ut consequat est enim aliqua aute incididunt labore aliqua. Consectetur occaecat esse Lorem amet fugiat consectetur commodo ea et aliquip dolore consequat cupidatat ut. Magna nisi labore nostrud proident nulla tempor sit occaecat labore commodo anim voluptate tempor anim.
+{{< /success >}}

content/docs/guides/auth.md

@@ -34,10 +34,9 @@ on the channel - Google will not allow connections without SSL/TLS, and
 most gRPC language implementations will not let you send credentials on an
 unencrypted channel.
 
-<p class="note"> <strong>WARNING</strong>: Google credentials should only
-be used to connect to Google services. Sending a Google issued OAuth2 token
-to a non-Google service could result in this token being stolen and used to
-impersonate the client to Google services.</p>
+{{< warning >}}
+Google credentials should only be used to connect to Google services. Sending a Google issued OAuth2 token to a non-Google service could result in this token being stolen and used to impersonate the client to Google services.
+{{< /warning >}}
 
 ### Authentication API
 

content/docs/quickstart/android.md

@@ -15,9 +15,9 @@ description: This guide gets you started with gRPC in Android Java with a simple
 [Android Virtual Device]: https://developer.android.com/studio/run/managing-avds.html
 [USB debugging]: https://developer.android.com/studio/command-line/adb.html#Enabling
 
-> **Note**: gRPC Java does not support running a server on an Android device.
-> For this quick start, the Android client app will connect to a server running
-> on your local (non-Android) computer.
+{{< note >}}
+gRPC Java does not support running a server on an Android device. For this quick start, the Android client app will connect to a server running on your local (non-Android) computer.
+{{< /note >}}
 
 ### Download the example
 

content/docs/quickstart/csharp-dotnet.md

@@ -5,9 +5,9 @@ short: C# with grpc-dotnet
 description: This guide gets you started with gRPC for .NET with a simple working example.
 ---
 
-> **Note**: This is a quick start guide for the "grpc-dotnet" implementation of
-> gRPC C#s. See [gRPC C# Quick Start](/docs/quickstart/csharp) for how to start
-> with the gRPC C# implementation based on native Core library.
+{{< note >}}
+This is a quick start guide for the "grpc-dotnet" implementation of gRPC C#s. See [gRPC C# Quick Start](../csharp) for how to start with the gRPC C# implementation based on native Core library.
+{{< /note >}}
 
 ### General project info
 

content/docs/quickstart/csharp.md

@@ -5,10 +5,9 @@ short: C#
 description: This guide gets you started with gRPC in C# with a simple working example.
 ---
 
-> **Note**: This is a quick start guide for the gRPC C# implementation based on
-> Core native library. See [gRPC for .NET Quick
-> Start](/docs/quickstart/csharp-dotnet/) for how to start with the
-> "grpc-dotnet" implementation.
+{{< note >}}
+This is a quick start guide for the gRPC C# implementation based on Core native library. See [gRPC for .NET Quick Start](..//csharp-dotnet/) for how to start with the "grpc-dotnet" implementation.
+{{< /note >}}
 
 ### Prerequisites
 
@@ -52,8 +51,10 @@ From the `examples/csharp/Helloworld` directory:
 > dotnet build Greeter.sln
 ```
 
-*NOTE: If you want to use gRPC C# from a project that uses the "classic" .csproj files (supported by Visual Studio 2013, 2015 and older versions of Mono), please refer to the
-[Greeter using "classic" .csproj](https://github.com/grpc/grpc/blob/{{< param grpc_release_tag >}}/examples/csharp/HelloworldLegacyCsproj/README.md) example.*
+{{< note >}}
+If you want to use gRPC C# from a project that uses the "classic" .csproj files (supported by Visual Studio 2013, 2015 and older versions of Mono), please refer to the
+[Greeter using "classic" .csproj](https://github.com/grpc/grpc/blob/{{< param grpc_release_tag >}}/examples/csharp/HelloworldLegacyCsproj/README.md) example.
+{{< /note >}}
 
 ### Run a gRPC application
 
@@ -61,17 +62,17 @@ From the `examples/csharp/Helloworld` directory:
 
 * Run the server:
 
-```sh
-> cd GreeterServer
-> dotnet run -f netcoreapp2.1
-```
+    ```sh
+    > cd GreeterServer
+    > dotnet run -f netcoreapp2.1
+    ```
 
 * From another terminal, run the client:
 
-```sh
-> cd GreeterClient
-> dotnet run -f netcoreapp2.1
-```
+    ```sh
+    > cd GreeterClient
+    > dotnet run -f netcoreapp2.1
+    ```
 
 Congratulations! You've just run a client-server application with gRPC.
 
@@ -86,7 +87,7 @@ server and the client "stub" have a `SayHello` RPC method that takes a
 server, and that this method is defined like this:
 
 
-```C#
+```proto
 // The greeting service definition.
 service Greeter {
   // Sends a greeting
@@ -108,7 +109,7 @@ Let's update this so that the `Greeter` service has two methods. Edit
 `examples/protos/helloworld.proto` and update it with a new `SayHelloAgain`
 method, with the same request and response types:
 
-```C#
+```proto
 // The greeting service definition.
 service Greeter {
   // Sends a greeting

content/docs/quickstart/dart.md

@@ -11,7 +11,9 @@ description: This guide gets you started with gRPC in Dart with a simple working
 
 For installation instructions, see [Install Dart](https://dart.dev/install).
 
-> Note: Dart gRPC supports the Flutter and Server platforms.
+{{< note >}}
+Dart gRPC supports the Flutter and Server platforms.
+{{< /note >}} 
 
 #### Protocol Buffers v3
 

content/docs/quickstart/php.md

@@ -80,8 +80,9 @@ or specific version
 sudo pecl install grpc-1.7.0
 ```
 
-Note: for users on CentOS/RHEL 6, unfortunately this step won’t work.
-Please follow the instructions below to compile the PECL extension from source.
+{{< warning >}}
+This step unfortunately won’t work on CentOS/RHEL 6. Please follow the instructions below to compile the PECL extension from source.
+{{< /warning >}}
 
 ##### Install on Windows
 

content/docs/tutorials/auth/oauth2-objective-c.md

@@ -49,13 +49,15 @@ expects Google account credentials, but neither gRPC nor the Objective-C client
 library is tied to any specific OAuth2 provider). The second view makes a gRPC
 request to the test server, using the access token obtained by the first view.
 
-Note: OAuth2 libraries need the application to register and obtain an ID from
+{{< note >}}
+OAuth2 libraries need the application to register and obtain an ID from
 the identity provider (in the case of this example app, Google). The app's XCode
 project is configured using that ID, so you shouldn't copy this project "as is"
 for your own app: it would result in your app being identified in the consent
 screen as "gRPC-AuthSample", and not having access to real Google services.
 Instead, configure your own XCode project following the [instructions
 here](https://developers.google.com/identity/sign-in/ios/).
+{{< /note >}}
 
 As with the other Objective-C examples, you also should have
 [Cocoapods](https://cocoapods.org/#install) installed, as well as the relevant

content/docs/tutorials/basic/cpp.md

@@ -374,7 +374,10 @@ address and port we want to connect to - in our case we'll use no SSL:
 ```cpp
 grpc::CreateChannel("localhost:50051", grpc::InsecureChannelCredentials());
 ```
-Note: In order to set additional options for the *channel*, use the `grpc::CreateCustomChannel()` api with any special channel arguments - `grpc::ChannelArguments`
+
+{{< note >}}
+In order to set additional options for the *channel*, use the `grpc::CreateCustomChannel()` api with any special channel arguments - `grpc::ChannelArguments`.
+{{< /note >}}
 
 Now we can use the channel to create our stub using the `NewStub` method provided in the `RouteGuide` class we generated from our .proto.
 

content/docs/tutorials/basic/objective-c.md

@@ -236,9 +236,12 @@ version, and other metadata.
 In this section, we'll look at creating an Objective-C client for our
 `RouteGuide` service. You can see our complete example client code in
 [examples/objective-c/route_guide/ViewControllers.m](https://github.com/grpc/grpc/blob/{{< param grpc_release_tag >}}/examples/objective-c/route_guide/ViewControllers.m).
-(Note: In your apps, for maintainability and readability reasons, you shouldn't
+
+{{< note >}}
+In your apps, for maintainability and readability reasons, you shouldn't
 put all of your view controllers in a single file; it's done here only to
 simplify the learning process).
+{{< /note >}}
 
 #### Constructing a service object
 

content/docs/tutorials/basic/python.md

@@ -173,7 +173,9 @@ than creates a new one. The generated code files are called
    - `add_RouteGuideServicer_to_server`, which adds a RouteGuideServicer to
      a `grpc.Server`
 
-Note: The `2` in pb2 indicates that the generated code is following Protocol Buffers Python API version 2. Version 1 is obsolete. It has no relation to the Protocol Buffers Language version, which is the one indicated by `syntax = "proto3"` or `syntax = "proto2"` in a .proto file.
+{{< note >}}
+The `2` in pb2 indicates that the generated code is following Protocol Buffers Python API version 2. Version 1 is obsolete. It has no relation to the Protocol Buffers Language version, which is the one indicated by `syntax = "proto3"` or `syntax = "proto2"` in a .proto file.
+{{< /note >}}
 
 ### Creating the server {#server}
 

content/docs/tutorials/basic/ruby.md

@@ -387,7 +387,9 @@ Run the server:
 $ bundle exec route_guide/route_guide_server.rb ../python/route_guide/route_guide_db.json
 ```
 
-> Note: The `route_guide_db.json` file is actually language-agnostic, it happens to be located in the `python` folder.
+{{< note >}}
+The `route_guide_db.json` file is actually language-agnostic, it happens to be located in the `python` folder.
+{{< /note >}}
 
 From a different terminal, run the client:
 

layouts/partials/admonition.html

@@ -0,0 +1,23 @@
+{{ $content := .content | markdownify }}
+{{ $name    := .type | humanize }}
+<div class="admonition is-{{ .type }}">
+  <div class="container">
+    <div class="columns is-vcentered is-variable is-8">
+      <div class="column is-1">
+        <span class="icon">
+          <i class="fas fa-lg fa-{{ .icon }}"></i>
+        </span>
+      </div>
+      
+      <div class="column">
+        <p class="title is-size-5 is-size-6-mobile">
+          {{ $name }}
+        </p>
+
+        <div class="content">          
+          {{ $content }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

layouts/shortcodes/danger.html

@@ -0,0 +1 @@
+{{ partial "admonition.html" (dict "type" "warning" "icon" "exclamation-triangle" "content" .Inner) }}

layouts/shortcodes/figure.html

@@ -0,0 +1,13 @@
+{{ $src     := .Get "src" | relURL }}
+{{ $caption := .Get "caption" }}
+<figure class="figure">
+  <a href="{{ $src }}" target="_blank">
+    <img src="{{ $src }}">
+  </a> 
+
+  {{ with $caption }}
+  <figcaption>
+    {{ . | markdownify }}
+  </figcaption>
+  {{ end }}
+</figure>

layouts/shortcodes/note.html

@@ -0,0 +1 @@
+{{ partial "admonition.html" (dict "type" "note" "icon" "info-circle" "content" .Inner "title" (.Get "title")) }}

layouts/shortcodes/requirement.html

@@ -0,0 +1 @@
+{{ partial "admonition.html" (dict "type" "requirement" "icon" "wrench" "content" .Inner "title" (.Get "title")) }}

layouts/shortcodes/success.html

@@ -0,0 +1 @@
+{{ partial "admonition.html" (dict "type" "success" "icon" "check-circle" "content" .Inner "title" (.Get "title")) }}

layouts/shortcodes/warning.html

@@ -0,0 +1 @@
+{{ partial "admonition.html" (dict "type" "warning" "icon" "exclamation-triangle" "content" .Inner) }}