Skip to content

Commit

Permalink
docs: implement new code preview blocks
Browse files Browse the repository at this point in the history 
Implement new code preview blocks style on docs
  • Loading branch information
@iambacon
iambacon committed Jan 26, 2023
1 parent 1e28b43 commit 9724b5c
Show file tree
Hide file tree
Showing 19 changed files with 525 additions and 533 deletions.
10 changes: 6 additions & 4 deletions docs/base/code.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@

<section class="m-t--full">
<h2 class="m-b--full">Example</h2>
<pre><code>public class RaygunLoggerProvider : ILoggerProvider
<div class="sg-preview">
<div class="sg-preview-example">
<pre><code>public class RaygunLoggerProvider : ILoggerProvider
{
private readonly RaygunConfiguration _config;
private readonly ConcurrentDictionary&lt;string, RaygunLogger&gt; _loggers = new ConcurrentDictionary&lt;string, RaygunLogger&gt;();
Expand All @@ -26,8 +28,8 @@ <h2 class="m-b--full">Example</h2>
return _loggers.GetOrAdd(categoryName, x =&gt; new RaygunLogger(categoryName, _config));
}
}</code></pre>
<div class="sg-example">
{% highlight html %}
</div>
{% highlight html %}
<pre>
<code>
public class RaygunLoggerProvider : ILoggerProvider
Expand All @@ -52,6 +54,6 @@ <h2 class="m-b--full">Example</h2>
}
</code>
</pre>
{% endhighlight %}
{% endhighlight %}
</div>
</section>
208 changes: 72 additions & 136 deletions docs/components/article-content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,145 +8,81 @@
<h2 class="m-b--full">Example</h2>
<h3>Article content</h3>
<p class="m-b--full">The article content component contains styling for headings, tables and lists.</p>
<div class="c-articleContent">
<h2>H2 heading</h2>
<h3>H3 heading</h3>
<h4>H4 heading</h4>
<div class="sg-preview">
<div class="sg-preview-example">
<div class="c-articleContent">
<h2>H2 heading</h2>
<h3>H3 heading</h3>
<h4>H4 heading</h4>

<h2>Tables</h2>
<table>
<tbody>
<tr>
<td>
<a rel="nofollow" href="#">
<img src="https://images-na.ssl-images-amazon.com/images/I/41xpnkDufrL.jpg"></a>
</td>
<td>
<a rel="nofollow" href="#">Fractal Design Define R5 Black ATX Midtower
Silent PC Computer Case</a>
<p>
A well designed case inside and out. An understated Scandinavian design with
sound-absorbing material. It's highly configurable which makes it easy to work in and
means you can get creative with your build!
</p>
</td>
</tr>
<tr>
<td>
<a rel="nofollow" href="#">
<img src="https://images-na.ssl-images-amazon.com/images/I/61EfU%2BM-pPL._SL1000_.jpg"></a>
</td>
<td>
<a rel="nofollow" href="http://amzn.to/2ewMhvQ">Intel Core i7&nbsp;6800&nbsp;K&nbsp;3.40 GHz
LGA2011&nbsp;V3&nbsp;15MB Cache High End Desktop Processor CPU - Black</a>
<p>
Part of Intel's Broadwell-E CPU range. The i7-6800K features six CPU cores (12 threads)
and 28 PCIe lanes. Out of the chips in the range I consider this to be the sweet spot,
the prices increase dramatically and aren't worth it for the extra performance.
</p>
</td>
</tr>
<tr>
<td>
<a rel="nofollow" href="#">
<img src="https://images-na.ssl-images-amazon.com/images/I/515oYSMHlvL._SY450_.jpg"></a>
</td>
<td>
<a rel="nofollow" href="#">Asus X99-A/U3.1 ATX USB 3.0 Motherboard</a>
<p>
Reasonably priced and full of features, you get a lot for your money with this board. It
even has Asus's Aura RGB lighting system, so you can make it look all pretty. It doesn't
come with built in wifi or Bluetooth. If that is a requirement for you either get a card
or go for the PRO or DELUXE model.
</p>
</td>
</tr>
</tbody>
</table>
<h2>Lists</h2>
<h4>Unordered list</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h4>Ordered list</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</div>
<div class="sg-example">
<h2>Tables</h2>
<table>
<tbody>
<tr>
<td>
<a rel="nofollow" href="#">
<img src="https://images-na.ssl-images-amazon.com/images/I/41xpnkDufrL.jpg"></a>
</td>
<td>
<a rel="nofollow" href="#">Fractal Design Define R5 Black ATX Midtower
Silent PC Computer Case</a>
<p>
A well designed case inside and out. An understated Scandinavian design with
sound-absorbing material. It's highly configurable which makes it easy to work in and
means you can get creative with your build!
</p>
</td>
</tr>
<tr>
<td>
<a rel="nofollow" href="#">
<img src="https://images-na.ssl-images-amazon.com/images/I/61EfU%2BM-pPL._SL1000_.jpg"></a>
</td>
<td>
<a rel="nofollow" href="http://amzn.to/2ewMhvQ">Intel Core i7&nbsp;6800&nbsp;K&nbsp;3.40 GHz
LGA2011&nbsp;V3&nbsp;15MB Cache High End Desktop Processor CPU - Black</a>
<p>
Part of Intel's Broadwell-E CPU range. The i7-6800K features six CPU cores (12 threads)
and 28 PCIe lanes. Out of the chips in the range I consider this to be the sweet spot,
the prices increase dramatically and aren't worth it for the extra performance.
</p>
</td>
</tr>
<tr>
<td>
<a rel="nofollow" href="#">
<img src="https://images-na.ssl-images-amazon.com/images/I/515oYSMHlvL._SY450_.jpg"></a>
</td>
<td>
<a rel="nofollow" href="#">Asus X99-A/U3.1 ATX USB 3.0 Motherboard</a>
<p>
Reasonably priced and full of features, you get a lot for your money with this board. It
even has Asus's Aura RGB lighting system, so you can make it look all pretty. It doesn't
come with built in wifi or Bluetooth. If that is a requirement for you either get a card
or go for the PRO or DELUXE model.
</p>
</td>
</tr>
</tbody>
</table>
<h2>Lists</h2>
<h4>Unordered list</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h4>Ordered list</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</div>
</div>
{% highlight html %}
<div class="c-articleContent">
<h2>H2 heading</h2>
<h3>H3 heading</h3>
<h4>H4 heading</h4>

<h2>Tables</h2>
<table>
<tbody>
<tr>
<td>
<a rel="nofollow" href="#">
<img src="https://images-na.ssl-images-amazon.com/images/I/41xpnkDufrL.jpg"></a>
</td>
<td>
<a rel="nofollow" href="#">Fractal Design Define R5 Black ATX Midtower
Silent PC Computer Case</a>
<p>
A well designed case inside and out. An understated Scandinavian design with
sound-absorbing material. It's highly configurable which makes it easy to work in and
means you can get creative with your build!
</p>
</td>
</tr>
<tr>
<td>
<a rel="nofollow" href="#">
<img src="https://images-na.ssl-images-amazon.com/images/I/61EfU%2BM-pPL._SL1000_.jpg"></a>
</td>
<td>
<a rel="nofollow" href="http://amzn.to/2ewMhvQ">Intel Core i7&nbsp;6800&nbsp;K&nbsp;3.40 GHz
LGA2011&nbsp;V3&nbsp;15MB Cache High End Desktop Processor CPU - Black</a>
<p>
Part of Intel's Broadwell-E CPU range. The i7-6800K features six CPU cores (12 threads)
and 28 PCIe lanes. Out of the chips in the range I consider this to be the sweet spot,
the prices increase dramatically and aren't worth it for the extra performance.
</p>
</td>
</tr>
<tr>
<td>
<a rel="nofollow" href="#">
<img src="https://images-na.ssl-images-amazon.com/images/I/515oYSMHlvL._SY450_.jpg"></a>
</td>
<td>
<a rel="nofollow" href="#">Asus X99-A/U3.1 ATX USB 3.0 Motherboard</a>
<p>
Reasonably priced and full of features, you get a lot for your money with this board. It
even has Asus's Aura RGB lighting system, so you can make it look all pretty. It doesn't
come with built in wifi or Bluetooth. If that is a requirement for you either get a card
or go for the PRO or DELUXE model.
</p>
</td>
</tr>
</tbody>
</table>
<h2>Lists</h2>
<h4>Unordered list</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h4>Ordered list</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
...
</div>
{% endhighlight %}
</div>
Expand Down
Loading

0 comments on commit 9724b5c

Please sign in to comment.