github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-24 02:30:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace image resizing sample with chartist sample

Browse Source
This commit is contained in:
Steve Sanderson
2017-02-22 13:27:18 +00:00
parent 3162946139
commit 627ea78e72
11 changed files with 42 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
samples/misc/NodeServicesExamples/Views/Home/Chart.cshtml Normal file
View File

@@ -0,0 +1,12 @@
<h1>Server-rendered chart</h1>
<p>
This sample demonstrates how arbitrary NPM modules can be invoked from .NET code.
</p>
<p>
In this case, we use <code>node-chartist</code> to render the following chart on the server. The output is
identical to what you'd get if you used <a href='https://gionkunz.github.io/chartist-js/'>chartist.js</a>
on the client, except that in this example, we're not executing any client-side code at all.
</p>
@Html.Raw(ViewData["ChartMarkup"])

34
samples/misc/NodeServicesExamples/Views/Home/ImageResizing.cshtml
View File

@@ -1,34 +0,0 @@
<h1>Image Resizing</h1>
<p>
This sample shows how the NPM module <a href="https://www.npmjs.com/package/sharp"><code>sharp</code></a>
can be used for dynamic image resizing from within an ASP.NET Core application. There is one copy of the
following image on disk, but we can set up an MVC action method that returns it resized to fit within an
arbitrary width and height.
</p>
<p>
<strong>Dependencies:</strong> On Windows and Linux, there are no native dependencies. Just running
<code>npm install</code> is enough. On OS X, however, you need to have <code>libvips</code> installed,
which you can get through <a href="http://brew.sh/">Homebrew</a> by running
<code>brew install homebrew/science/vips</code>.
</p>
<h3>100px wide [<a href="/resize/images/parrot.jpg?maxWidth=100">open</a>]</h3>
<img src="/resize/images/parrot.jpg?maxWidth=100" />
<h3>200px wide [<a href="/resize/images/parrot.jpg?maxWidth=200">open</a>]</h3>
<img src="/resize/images/parrot.jpg?maxWidth=200" />
<h3>400px wide [<a href="/resize/images/parrot.jpg?maxWidth=400">open</a>]</h3>
<img src="/resize/images/parrot.jpg?maxWidth=400" />
<h3>800px wide [<a href="/resize/images/parrot.jpg?maxWidth=800">open</a>]</h3>
<img src="/resize/images/parrot.jpg?maxWidth=800" />
<p>
<strong>Credit:</strong>
<em><a href="https://www.flickr.com/photos/dcoetzee/3572948635">Parrot</a>
by <a href="https://www.flickr.com/photos/dcoetzee/">D Coetzee</a>
is dedicated to the <a href="http://creativecommons.org/publicdomain/zero/1.0/">public domain (CC0)</a></em>
</p>

7
samples/misc/NodeServicesExamples/Views/Home/Index.cshtml
View File

@@ -7,7 +7,6 @@
</p>
<ul>
<li><a asp-action="ES2015Transpilation">ES2015 transpilation</a>
<li><a asp-action="ImageResizing">Image resizing</a>
</li>
<li><a asp-action="ES2015Transpilation">ES2015 transpilation</a></li>
<li><a asp-action="Chart">Server-side chart rendering</a></li>
</ul>

3
samples/misc/NodeServicesExamples/Views/Shared/_Layout.cshtml
View File

@@ -1,8 +1,9 @@
<!doctype html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>NodeServices Examples</title>
<link rel="stylesheet" href="~/css/chartist.min.css" />
</head>
<body>
@RenderBody()