Skip to content

Commit b88db5b

Browse files
linkdotnetlinkdotnet
committed
Added ShortDescription and some css improvements
1 parent 05934d6 commit b88db5b

13 files changed

+238
-35
lines changed

‎LinkDotNet.Blog.Web/AppConfiguration.cs

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
namespace LinkDotNet.Blog.Web
1+
using LinkDotNet.Domain;
2+
3+
namespace LinkDotNet.Blog.Web
24
{
35
public record AppConfiguration
46
{
@@ -7,5 +9,7 @@ public record AppConfiguration
79

810
public string GithubAccountUrl { get; init; }
911
public bool HasGithubAccount => !string.IsNullOrEmpty(LinkedinAccountUrl);
12+
13+
public Introduction Introduction { get; set; }
1014
}
1115
}

‎LinkDotNet.Blog.Web/AppConfigurationFactory.cs

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
using Microsoft.Extensions.Configuration;
1+
using LinkDotNet.Domain;
2+
using Microsoft.Extensions.Configuration;
23

34
namespace LinkDotNet.Blog.Web
45
{
@@ -9,7 +10,8 @@ public static AppConfiguration Create(IConfiguration config)
910
var configuration = new AppConfiguration
1011
{
1112
GithubAccountUrl = config["GithubAccountUrl"],
12-
LinkedinAccountUrl = config["LinkedInAccountUrl"]
13+
LinkedinAccountUrl = config["LinkedInAccountUrl"],
14+
Introduction = config.GetSection("Introduction").Get<Introduction>(),
1315
};
1416
return configuration;
1517
}

‎LinkDotNet.Blog.Web/Pages/Index.razor

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
@page "/"
22
@using LinkDotNet.Domain
3+
@inject AppConfiguration _appConfiguration
34

4-
<IntroductionCard Introduction="i"></IntroductionCard>
5+
<IntroductionCard Introduction="_appConfiguration.Introduction"></IntroductionCard>
56

67
<div class="content px-4">
78
<ShortBlogPost BlogPost="bp"></ShortBlogPost>
9+
<ShortBlogPost BlogPost="bp" SetAlt="true"></ShortBlogPost>
10+
<ShortBlogPost BlogPost="bp" ></ShortBlogPost>
11+
<ShortBlogPost BlogPost="bp" SetAlt="true"></ShortBlogPost>
12+
<ShortBlogPost BlogPost="bp"></ShortBlogPost>
813
</div>
914

1015
@code {
@@ -13,19 +18,13 @@
1318
{
1419
Title = "My first entry",
1520
ShortDescription = @"
16-
This is my very first entry. *Hurray*!
17-
",
18-
UpdatedDate = DateTime.Now
21+
**Welcome** to my first post. This whole blog was written with Blazor and some nice css. In this post I will explain how the Blazor application works, what my motivation was and how to setup on your own.
1922
20-
};
23+
> Steven Giesel
2124
22-
Introduction i = new Introduction
23-
{
24-
Description = @"Hey, my name is **Steven**. I am a **.NET Developer** based in Zurich, Switzerland. This is my small blog, which I wrote completely in Blazor. If you want to know more about me just check out my LinkedIn or Github.
25+
",
26+
UpdatedDate = DateTime.Now,
27+
Tags = new [] {"First Post", "C#", "Blazor"}
2528

26-
Also this blogsoftware is open source on [Github](https://github.com/linkdotnet)",
27-
BackgroundUrl = "https://i.imgur.com/t66tpls.png",
28-
ProfilePictureUrl = "https://media-exp1.licdn.com/dms/image/C4D03AQGCECg3FlEwGg/profile-displayphoto-shrink_400_400/0/1575236200054?e=1630540800&v=beta&t=qsuy--UoUtRdEis021i5hAFw-i8PUWBHMSrGGnQkaqk",
2929
};
30-
3130
}

‎LinkDotNet.Blog.Web/Pages/_Host.cshtml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
1616
<link href="css/site.css" rel="stylesheet"/>
1717
<link href="LinkDotNet.Blog.Web.styles.css" rel="stylesheet"/>
18-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
18+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
19+
1920
</head>
2021
<body>
2122
<component type="typeof(App)" render-mode="ServerPrerendered"/>
@@ -32,5 +33,6 @@
3233
</div>
3334

3435
<script src="_framework/blazor.server.js"></script>
36+
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" integrity="sha512-RXf+QSDCUQs5uwRKaDoXt55jygZZm2V++WUZduaU/Ui/9EGp3f/2KZVahFZBKGH0s774sd3HmrhUy+SgOFQLVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
3537
</body>
3638
</html>

‎LinkDotNet.Blog.Web/Shared/MainLayout.razor

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
@inherits LayoutComponentBase
22

3+
<NavMenu/>
34
<div>
4-
<NavMenu/>
5-
<div>
6-
@Body
7-
</div>
5+
@Body
86
</div>

‎LinkDotNet.Blog.Web/Shared/MarkdownComponentBase.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ public class MarkdownComponentBase : ComponentBase
77
{
88
protected MarkupString RenderMarkupString(string content)
99
{
10-
var p = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
10+
var p = new MarkdownPipelineBuilder().UseAdvancedExtensions().UseEmojiAndSmiley().Build();
1111

1212
return (MarkupString) Markdown.ToHtml(content, p);
1313
}

‎LinkDotNet.Blog.Web/Shared/NavMenu.razor.css

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
1+
12
.nav {
2-
background-color: rgba(0,0,0, 0.8);
3+
z-index: 10;
4+
background-color: rgba(0, 0, 0, 0.8);
35
position: sticky;
46
top: 0;
5-
backdrop-filter: blur(9px);
7+
backdrop-filter: blur(6px);
68
}
79

810
.logo {
911
float: left;
1012
}
1113

1214
.logo a {
15+
font-family: 'Libre Barcode 128 Text', cursive;
1316
text-decoration: none;
14-
font-size: 2.5rem;
17+
font-size: 3rem;
1518
color: white;
16-
font-weight: 700;
19+
font-weight: 300;
1720
}
1821

1922
.navlinks {
@@ -22,7 +25,7 @@
2225
list-style: none;
2326
justify-content: center;
2427
align-items: center;
25-
padding-top: 10px;
28+
padding-top: 23px;
2629
}
2730

2831
.navlinks li {
@@ -31,10 +34,10 @@
3134

3235
.navlinks li a {
3336
text-decoration: none;
34-
font-size: 1.75rem;
37+
font-size: 1.1rem;
3538
color: white;
3639
}
3740

3841
.navlinks li a:hover {
39-
color: #C287FF;
42+
color: #66C3CC;
4043
}

‎LinkDotNet.Blog.Web/Shared/ShortBlogPost.razor

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,36 @@
11
@using LinkDotNet.Domain
22
@inherits MarkdownComponentBase
3-
<div>
4-
<h3>@BlogPost.Title</h3>
5-
<div>
6-
@RenderMarkupString(BlogPost.ShortDescription)
3+
<div class="blog-card @AltCssClass">
4+
<div class="meta">
5+
<div class="photo" style="background-image: url(https://storage.googleapis.com/chydlx/codepen/blog-cards/image-2.jpg)"></div>
6+
<ul class="details">
7+
<li class="date">@BlogPost.UpdatedDate</li>
8+
<li class="tags">
9+
<ul>
10+
@foreach (var tag in BlogPost.Tags)
11+
{
12+
<li><a href="#">@tag</a></li>
13+
}
14+
</ul>
15+
</li>
16+
</ul>
717
</div>
8-
</div>
18+
<div class="description">
19+
<h1>@BlogPost.Title</h1>
20+
<h2></h2>
21+
<p>@RenderMarkupString(BlogPost.ShortDescription)</p>
22+
<p class="read-more">
23+
<a href="#">Read More</a>
24+
</p>
25+
</div>
26+
</div>
27+
928
@code {
1029
[Parameter]
1130
public BlogPost BlogPost { get; set; }
31+
32+
[Parameter]
33+
public bool SetAlt { get; set; }
34+
35+
public string AltCssClass => SetAlt ? "alt" : string.Empty;
1236
}

‎LinkDotNet.Blog.Web/Shared/ShortBlogPost.razor.css

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
.blog-card {
2+
display: flex;
3+
flex-direction: column;
4+
margin: 1rem auto;
5+
box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
6+
margin-bottom: 1.6%;
7+
background: #ccc;
8+
line-height: 1.4;
9+
border-radius: 5px;
10+
overflow: hidden;
11+
z-index: 0;
12+
}
13+
.blog-card a {
14+
color: inherit;
15+
}
16+
.blog-card a:hover {
17+
color: #5ad67d;
18+
}
19+
.blog-card:hover .photo {
20+
transform: scale(1.3) rotate(3deg);
21+
}
22+
.blog-card .meta {
23+
position: relative;
24+
z-index: 0;
25+
height: 200px;
26+
}
27+
.blog-card .photo {
28+
position: absolute;
29+
top: 0;
30+
right: 0;
31+
bottom: 0;
32+
left: 0;
33+
background-size: cover;
34+
background-position: center;
35+
transition: transform 0.2s;
36+
}
37+
.blog-card .details,
38+
.blog-card .details ul {
39+
margin: auto;
40+
padding: 0;
41+
list-style: none;
42+
}
43+
.blog-card .details {
44+
position: absolute;
45+
top: 0;
46+
bottom: 0;
47+
left: -100%;
48+
margin: auto;
49+
transition: left 0.2s;
50+
background: rgba(0, 0, 0, 0.6);
51+
color: #fff;
52+
padding: 10px;
53+
width: 100%;
54+
font-size: 0.9rem;
55+
}
56+
.blog-card .details a {
57+
-webkit-text-decoration: dotted underline;
58+
text-decoration: dotted underline;
59+
}
60+
.blog-card .details ul li {
61+
display: inline-block;
62+
}
63+
.blog-card .details .date:before {
64+
font-family: "Font Awesome 5 Free";
65+
margin-right: 10px;
66+
content: "\f133";
67+
}
68+
.blog-card .details .tags ul:before {
69+
font-family: "Font Awesome 5 Free";
70+
content: "\f02b";
71+
margin-right: 10px;
72+
}
73+
.blog-card .details .tags li {
74+
margin-right: 2px;
75+
}
76+
.blog-card .details .tags li:first-child {
77+
margin-left: -4px;
78+
}
79+
.blog-card .description {
80+
padding: 1rem;
81+
background: #fff;
82+
position: relative;
83+
z-index: 1;
84+
}
85+
.blog-card .description h1,
86+
.blog-card .description h1 {
87+
line-height: 1;
88+
margin: 0 0 5px 0;
89+
font-size: 1.7rem;
90+
}
91+
.blog-card .description .read-more {
92+
text-align: right;
93+
}
94+
.blog-card .description .read-more a {
95+
color: #5ad67d;
96+
display: inline-block;
97+
position: relative;
98+
}
99+
.blog-card .description .read-more a:after {
100+
content: "";
101+
font-family: FontAwesome;
102+
margin-left: -10px;
103+
opacity: 0;
104+
vertical-align: middle;
105+
transition: margin 0.3s, opacity 0.3s;
106+
}
107+
.blog-card .description .read-more a:hover:after {
108+
margin-left: 5px;
109+
opacity: 1;
110+
}
111+
.blog-card p {
112+
position: relative;
113+
margin: 1rem 0 0;
114+
}
115+
.blog-card p:first-of-type {
116+
margin-top: 1.25rem;
117+
}
118+
.blog-card p:first-of-type:before {
119+
content: "";
120+
position: absolute;
121+
height: 5px;
122+
background: #5ad67d;
123+
width: 35px;
124+
top: -0.75rem;
125+
border-radius: 3px;
126+
}
127+
.blog-card:hover .details {
128+
left: 0%;
129+
}
130+
@media (min-width: 640px) {
131+
.blog-card {
132+
flex-direction: row;
133+
max-width: 1200px;
134+
}
135+
.blog-card .meta {
136+
flex-basis: 30%;
137+
height: auto;
138+
}
139+
.blog-card .description {
140+
flex-basis: 70%;
141+
}
142+
.blog-card .description:before {
143+
transform: skewX(-3deg);
144+
content: "";
145+
background: #fff;
146+
width: 30px;
147+
position: absolute;
148+
left: -10px;
149+
top: 0;
150+
bottom: 0;
151+
z-index: -1;
152+
}
153+
.blog-card.alt {
154+
flex-direction: row-reverse;
155+
}
156+
.blog-card.alt .description:before {
157+
left: inherit;
158+
right: -10px;
159+
transform: skew(3deg);
160+
}
161+
.blog-card.alt .details {
162+
padding-left: 25px;
163+
}
164+
}

‎LinkDotNet.Blog.Web/appsettings.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,10 @@
1111
},
1212
"AllowedHosts": "*",
1313
"GithubAccountUrl": "",
14-
"LinkedInAccountUrl": ""
14+
"LinkedInAccountUrl": "",
15+
"Introduction": {
16+
"Description": "Hey, my name is **Steven**. I am a **.NET Developer** based in Zurich, Switzerland. This is my small blog, which I wrote completely in Blazor. If you want to know more about me just check out my LinkedIn or Github.\nAlso this blogsoftware is open source on [Github](https://github.com/linkdotnet)",
17+
"BackgroundUrl": "assets/profile-background.png",
18+
"ProfilePictureUrl": "assets/profile-picture.jfif"
19+
}
1520
}

‎LinkDotNet.Blog.Web/wwwroot/assets/profile-background.png

137 KB
Loading

‎LinkDotNet.Blog.Web/wwwroot/assets/profile-picture.jfif

49.4 KB
Binary file not shown.

‎LinkDotNet.Blog.Web/wwwroot/css/site.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
22
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
33
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
4+
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap');
45

56
html, body {
6-
font-family: "Roboto", "Quicksand", sans-serif;
7+
font-family: "Roboto";
8+
background: #262626;
79
}
810

911
a, .btn-link {

0 commit comments

Comments
 (0)