razor-ssg/MyApp/Pages/WhatsNew.cshtml at main · NetCoreTemplates/razor-ssg · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
@page "/whatsnew"
@attribute [RenderStatic]
@inject MarkdownWhatsNew WhatsNew
@{
    ViewData["Title"] = "What's New";

    var releases = WhatsNew.Features.Keys.OrderByDescending(x => x).ToList();
}
<link rel="stylesheet" href="css/typography.css">
<style>
.prose a {
    --tw-text-opacity: 1;color: rgba(59, 130, 246, var(--tw-text-opacity)); /*text-blue-500*/
    -webkit-transition: all ease 0.25s;
            transition: all ease 0.25s;
    text-decoration: none;
}
.prose a:hover {
    --tw-text-opacity: 1;color: rgba(37, 99, 235, var(--tw-text-opacity)); /*text-blue-600*/
    text-decoration: none;
}
.prose p {
    color: rgb(55 65 81); /*text-gray-700*/
}
.dark .prose p {
    color: rgb(229 231 235); /*text-gray-200*/
}
</style>

<div class="container mx-auto px-5">
    <section class="flex-col md:flex-row flex justify-center mt-16 mb-16 md:mb-12">
        <h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
            Latest features & highlights
        </h1>
    </section>
</div>

<div class="relative px-6 pt-16 pb-20 lg:px-8 lg:pt-24 lg:pb-28">

    <div class="relative mx-auto max-w-7xl">
    @foreach (var release in releases)
    {
        var features = WhatsNew.GetFeatures(release);
        var releaseVersion = release.RightPart('_');
        if (features.Count == 0) continue;
        var releaseDate = features[0].Date!.Value;

        <h2 class="text-center mb-4 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">@releaseVersion</h2>
        <div class="text-center text-lg font-normal text-gray-500 mb-8">@($"{releaseDate:MMMM d, yyyy}")</div>

        @foreach (var feature in features)
        {
            <div class="flex flex-wrap my-24">
                <div class="w-full sm:w-1/2 animated px-4">
                    <a href="@feature.Url"><img src="@feature.Image" alt="" loading="lazy"></a>
                </div>
                <div class="w-full sm:w-1/2 text-left wow fadeInLeft animated px-4">
                    <h3 class="m-0 mb-4">
                        <a class="text-2xl font-normal text-blue-500 hover:text-blue-600" href="@feature.Url">@feature.Title</a>
                    </h3>
                    <div class="prose max-w-none">
                        @Html.Raw(feature.Preview)
                    </div>
                    <div class="text-center sm:text-left my-10">
                        <a href="@feature.Url" class="text-white text-sm font-semibold py-2.5 px-3.5 rounded outline-none focus:outline-none mr-1 mb-1 bg-slate-700 active:bg-slate-600 shadow hover:shadow-lg ease-linear transition-all duration-150">
                            Learn more
                        </a>
                    </div>
                </div>
            </div>
        }
    }
    </div>
</div>