Skip to content

Commit 14027b9

Browse files
skalahonzaskalahonza
committed
Add container
1 parent 922e2eb commit 14027b9

File tree

1 file changed

+140
-137
lines changed

1 file changed

+140
-137
lines changed

‎Components/Pages/Home.razor‎

Lines changed: 140 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -13,170 +13,172 @@
1313
@inject NavigationManager Navigation
1414

1515
<PageTitle>Github Star Search</PageTitle>
16+
<MudContainer>
17+
<MudGrid>
18+
<!-- GitHub Username Input Section -->
19+
<MudItem xs="12" md="6">
20+
<MudPaper Class="pa-4">
21+
<MudStack Spacing="2">
22+
<MudText Typo="Typo.h6" Class="mb-1">Enter your GitHub Username</MudText>
23+
<MudTextField @bind-Value="GithubUsername"
24+
Placeholder="Enter your GitHub username..."
25+
Variant="Variant.Outlined"
26+
Adornment="Adornment.Start"
27+
AdornmentIcon="@Icons.Material.Filled.Person"
28+
Class="mb-2"
29+
MaxLength="100"/>
30+
31+
<MudButton Disabled="@IsIndexing" OnClick="SubmitUsername" Variant="Variant.Filled"
32+
Color="Color.Primary" Class="mt-1">
33+
@if (IsIndexing)
34+
{
35+
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
36+
<MudText Class="ms-2">🚀 Probing...</MudText>
37+
}
38+
else
39+
{
40+
<MudText>Send Probe to Index Stars</MudText>
41+
}
42+
</MudButton>
43+
<MudText Typo="Typo.caption" Class="text-secondary">
44+
You only have to do this once.
45+
Username is saved as query parameter in the URL.
46+
So you can bookmark the page and come back later or share with others.
47+
</MudText>
48+
</MudStack>
49+
</MudPaper>
50+
</MudItem>
51+
52+
<!-- Search Bar Section -->
53+
<MudItem xs="12" md="6">
54+
<MudPaper Class="pa-4">
55+
<MudStack Spacing="2">
56+
<MudText Typo="Typo.h6" Class="mb-1">Search Starred Repositories</MudText>
57+
<MudTextField T="string"
58+
Disabled="string.IsNullOrEmpty(GithubUsername)"
59+
DebounceInterval="300"
60+
OnDebounceIntervalElapsed="Search"
61+
Placeholder="Search starred repositories..."
62+
Variant="Variant.Outlined"
63+
Adornment="Adornment.End"
64+
AdornmentIcon="@Icons.Material.Filled.Search"
65+
MaxLength="100"/>
66+
<MudText Typo="Typo.caption">
67+
Search by typing repository names or keywords.
68+
Results will appear instantly as you type.
69+
Use the minus (-) operator in front of a word or phrase to exclude it from search results.
70+
</MudText>
71+
</MudStack>
72+
</MudPaper>
73+
</MudItem>
74+
</MudGrid>
75+
76+
<!-- Search Results Section -->
77+
@if (_searchResults.Any())
78+
{
79+
@foreach (var repository in _searchResults)
80+
{
81+
<MudCard Class="pa-4 mt-4">
82+
<MudCardHeader>
83+
<CardHeaderContent>
84+
<MudText Typo="Typo.h5">@((MarkupString)$"{repository.Owner}/{repository.Slug}")</MudText>
85+
</CardHeaderContent>
86+
</MudCardHeader>
87+
88+
<MudCardContent>
89+
<MudText>@((MarkupString)repository.Description)</MudText>
90+
<MudDivider Class="my-2"/>
91+
<MudText>@((MarkupString)Markdown.ToHtml(repository.Readme))</MudText>
92+
<MudDivider Class="my-2"/>
93+
<MudText Typo="Typo.caption">Last
94+
Updated: @repository.UpdatedAt.ToLocalTime().ToString("g")</MudText>
95+
</MudCardContent>
96+
97+
<MudCardActions>
98+
<MudButton Color="Color.Primary" Href="@repository.Url" Target="_blank"
99+
Disabled="IsIndexing">
100+
View Repository
101+
</MudButton>
102+
</MudCardActions>
103+
</MudCard>
104+
}
105+
}
106+
else
107+
{
108+
@if (string.IsNullOrEmpty(GithubUsername) && _searchResults.Count == 0)
109+
{
110+
<MudPaper Class="pa-4 mt-4" Elevation="4">
111+
<MudText Typo="Typo.h5">Welcome to GitHub Star Search!</MudText>
112+
<MudDivider Class="my-2"/>
16113

17-
<MudGrid>
18-
<!-- GitHub Username Input Section -->
19-
<MudItem xs="12" md="6">
20-
<MudPaper Class="pa-4">
21-
<MudStack Spacing="2">
22-
<MudText Typo="Typo.h6" Class="mb-1">Enter your GitHub Username</MudText>
23-
<MudTextField @bind-Value="GithubUsername"
24-
Placeholder="Enter your GitHub username..."
25-
Variant="Variant.Outlined"
26-
Adornment="Adornment.Start"
27-
AdornmentIcon="@Icons.Material.Filled.Person"
28-
Class="mb-2"
29-
MaxLength="100"/>
30-
31-
<MudButton Disabled="@IsIndexing" OnClick="SubmitUsername" Variant="Variant.Filled"
32-
Color="Color.Primary" Class="mt-1">
33-
@if (IsIndexing)
34-
{
35-
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
36-
<MudText Class="ms-2">🚀 Probing...</MudText>
37-
}
38-
else
39-
{
40-
<MudText>Send Probe to Index Stars</MudText>
41-
}
42-
</MudButton>
43-
<MudText Typo="Typo.caption" Class="text-secondary">
44-
You only have to do this once.
45-
Username is saved as query parameter in the URL.
46-
So you can bookmark the page and come back later or share with others.
114+
<MudText Typo="Typo.body1" Class="mt-2">
115+
Did you star over 500 repositories and now can’t find that awesome library you bookmarked last week?
116+
Are you tired of scrolling endlessly through your GitHub stars, only to lose track of what you’re
117+
looking
118+
for?
47119
</MudText>
48-
</MudStack>
49-
</MudPaper>
50-
</MudItem>
51-
52-
<!-- Search Bar Section -->
53-
<MudItem xs="12" md="6">
54-
<MudPaper Class="pa-4">
55-
<MudStack Spacing="2">
56-
<MudText Typo="Typo.h6" Class="mb-1">Search Starred Repositories</MudText>
57-
<MudTextField T="string"
58-
Disabled="string.IsNullOrEmpty(GithubUsername)"
59-
DebounceInterval="300"
60-
OnDebounceIntervalElapsed="Search"
61-
Placeholder="Search starred repositories..."
62-
Variant="Variant.Outlined"
63-
Adornment="Adornment.End"
64-
AdornmentIcon="@Icons.Material.Filled.Search"
65-
MaxLength="100"/>
66-
<MudText Typo="Typo.caption">
67-
Search by typing repository names or keywords.
68-
Results will appear instantly as you type.
69-
Use the minus (-) operator in front of a word or phrase to exclude it from search results.
120+
121+
<MudText Typo="Typo.body1" Class="mt-2">
122+
Don’t worry! <strong>GitHub Star Search</strong> is here to save the day. With blazing-fast
123+
full-text
124+
search,
125+
you’ll find your favorite repositories in no time. No more stress, no more chaos—just your starred
126+
repositories,
127+
neatly organized and instantly searchable.
70128
</MudText>
71-
</MudStack>
72-
</MudPaper>
73-
</MudItem>
74-
</MudGrid>
75129

76-
<!-- Search Results Section -->
77-
@if (_searchResults.Any())
78-
{
79-
@foreach (var repository in _searchResults)
80-
{
81-
<MudCard Class="pa-4 mt-4">
82-
<MudCardHeader>
83-
<CardHeaderContent>
84-
<MudText Typo="Typo.h5">@((MarkupString)$"{repository.Owner}/{repository.Slug}")</MudText>
85-
</CardHeaderContent>
86-
</MudCardHeader>
87-
88-
<MudCardContent>
89-
<MudText>@((MarkupString)repository.Description)</MudText>
90-
<MudDivider Class="my-2"/>
91-
<MudText>@((MarkupString)Markdown.ToHtml(repository.Readme))</MudText>
92130
<MudDivider Class="my-2"/>
93-
<MudText Typo="Typo.caption">Last
94-
Updated: @repository.UpdatedAt.ToLocalTime().ToString("g")</MudText>
95-
</MudCardContent>
96-
97-
<MudCardActions>
98-
<MudButton Color="Color.Primary" Href="@repository.Url" Target="_blank"
99-
Disabled="IsIndexing">
100-
View Repository
101-
</MudButton>
102-
</MudCardActions>
103-
</MudCard>
104-
}
105-
}
106-
else
107-
{
108-
@if (string.IsNullOrEmpty(GithubUsername) && _searchResults.Count == 0)
109-
{
110-
<MudPaper Class="pa-4 mt-4" Elevation="4">
111-
<MudText Typo="Typo.h5">Welcome to GitHub Star Search!</MudText>
131+
<MudText Typo="Typo.caption" Class="text-secondary">
132+
Go ahead, give it a try and never lose sight of your stars again!
133+
</MudText>
134+
</MudPaper>
135+
}
136+
137+
<!-- No Search Results Placeholder -->
138+
<MudPaper Class="pa-4 mt-4">
139+
<MudText Typo="Typo.h5">How to Use GitHub Star Search</MudText>
112140
<MudDivider Class="my-2"/>
113141

142+
<MudText Typo="Typo.body1">
143+
1. Enter your GitHub username in the input field and click on <strong>Send Probe to Index Stars</strong>.
144+
You only need to perform this step once to set up the search functionality.
145+
</MudText>
146+
114147
<MudText Typo="Typo.body1" Class="mt-2">
115-
Did you star over 500 repositories and now can’t find that awesome library you bookmarked last week?
116-
Are you tired of scrolling endlessly through your GitHub stars, only to lose track of what you’re
117-
looking
118-
for?
148+
2. Start typing in the search bar to find repositories you've starred on GitHub.
119149
</MudText>
120150

121151
<MudText Typo="Typo.body1" Class="mt-2">
122-
Don’t worry! <strong>GitHub Star Search</strong> is here to save the day. With blazing-fast full-text
123-
search,
124-
you’ll find your favorite repositories in no time. No more stress, no more chaos—just your starred
125-
repositories,
126-
neatly organized and instantly searchable.
152+
3. The results will appear instantly as you type.
127153
</MudText>
128154

129155
<MudDivider Class="my-2"/>
130156
<MudText Typo="Typo.caption" Class="text-secondary">
131-
Go ahead, give it a try and never lose sight of your stars again!
157+
Note: Ensure your GitHub profile is accessible to the app for the indexing process.
158+
We do not browse private repositories.
159+
Some users do not have public star data available.
132160
</MudText>
133161
</MudPaper>
134162
}
135163

136-
<!-- No Search Results Placeholder -->
137-
<MudPaper Class="pa-4 mt-4">
138-
<MudText Typo="Typo.h5">How to Use GitHub Star Search</MudText>
139-
<MudDivider Class="my-2"/>
140-
141-
<MudText Typo="Typo.body1">
142-
1. Enter your GitHub username in the input field and click on <strong>Send Probe to Index Stars</strong>.
143-
You only need to perform this step once to set up the search functionality.
144-
</MudText>
145-
146-
<MudText Typo="Typo.body1" Class="mt-2">
147-
2. Start typing in the search bar to find repositories you've starred on GitHub.
148-
</MudText>
149-
150-
<MudText Typo="Typo.body1" Class="mt-2">
151-
3. The results will appear instantly as you type.
164+
<MudPaper Class="pa-4 mt-4" Elevation="4">
165+
<MudText Typo="Typo.caption" Align="Align.Center" Class="mb-2">
166+
Built with ❤️ by skalahonza. Find the source code on GitHub:
152167
</MudText>
153168

154-
<MudDivider Class="my-2"/>
155-
<MudText Typo="Typo.caption" Class="text-secondary">
156-
Note: Ensure your GitHub profile is accessible to the app for the indexing process.
157-
We do not browse private repositories.
158-
Some users do not have public star data available.
159-
</MudText>
169+
<MudLink Href="https://github.com/skalahonza/github-star-search" Target="_blank" Class="d-block text-center">
170+
<MudText Typo="Typo.body1" Color="Color.Primary" Class="underline">
171+
https://github.com/skalahonza/github-star-search
172+
</MudText>
173+
</MudLink>
160174
</MudPaper>
161-
}
162-
163-
<MudPaper Class="pa-4 mt-4" Elevation="4">
164-
<MudText Typo="Typo.caption" Align="Align.Center" Class="mb-2">
165-
Built with ❤️ by skalahonza. Find the source code on GitHub:
166-
</MudText>
167-
168-
<MudLink Href="https://github.com/skalahonza/github-star-search" Target="_blank" Class="d-block text-center">
169-
<MudText Typo="Typo.body1" Color="Color.Primary" Class="underline">
170-
https://github.com/skalahonza/github-star-search
171-
</MudText>
172-
</MudLink>
173-
</MudPaper>
174-
175+
</MudContainer>
175176

176177
@code {
177178

178179
[SupplyParameterFromQuery(Name = "username")]
179180
public string GithubUsername { get; set; } = "";
181+
180182
public bool IsIndexing { get; set; }
181183
private readonly List<Repository> _searchResults = new();
182184
private string _searchQuery = "";
@@ -301,4 +303,5 @@ else
301303
Logger.LogInformation("Github username loaded from local storage: {Username}", GithubUsername);
302304
}
303305
}
306+
304307
}

0 commit comments

Comments
 (0)