Skip to content

Commit ac6858a

Browse files
EdouardCourtyEdouardCourty
committed
chore(ui): redesign the homepage around search, stats and a lighter hero
1 parent 1115830 commit ac6858a

11 files changed

Lines changed: 249 additions & 80 deletions

File tree

‎css/app.scss‎

Lines changed: 150 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -605,6 +605,155 @@ strong {
605605
text-decoration: none;
606606
}
607607

608+
// Homepage hero search variant
609+
.wrapper-search-hero .container {
610+
padding: 48px 20px 40px;
611+
text-align: center;
612+
max-width: 720px;
613+
}
614+
615+
.hero-search-intro {
616+
margin-bottom: 24px;
617+
618+
.hero-search-claim {
619+
margin: 0 auto;
620+
max-width: 560px;
621+
font-size: 16px;
622+
}
623+
}
624+
625+
.hero-brand-row {
626+
display: flex;
627+
align-items: center;
628+
justify-content: center;
629+
gap: 24px;
630+
margin-bottom: 16px;
631+
}
632+
633+
.hero-brand-logo {
634+
height: 64px;
635+
width: auto;
636+
flex-shrink: 0;
637+
}
638+
639+
.hero-brand-text {
640+
text-align: center;
641+
}
642+
643+
.hero-brand-title {
644+
font-size: 52px;
645+
font-weight: 600;
646+
line-height: 1.1;
647+
color: #fff;
648+
}
649+
650+
.hero-brand-subtitle {
651+
font-size: 20px;
652+
font-style: italic;
653+
color: rgba(255, 255, 255, 0.85);
654+
}
655+
656+
@media (max-width: 575px) {
657+
.hero-brand-row {
658+
gap: 14px;
659+
}
660+
661+
.hero-brand-logo {
662+
height: 44px;
663+
}
664+
665+
.hero-brand-title {
666+
font-size: 32px;
667+
}
668+
669+
.hero-brand-subtitle {
670+
font-size: 15px;
671+
}
672+
}
673+
674+
.wrapper-search-hero .js-search-field-wrapper {
675+
float: none;
676+
width: 100%;
677+
margin: 0 auto;
678+
}
679+
680+
.wrapper-search-hero #search-form input[type="search"] {
681+
height: 52px;
682+
font-size: 18px;
683+
padding: 10px 18px 10px 22px;
684+
border: none;
685+
border-radius: 4px;
686+
}
687+
688+
.hero-search-footer {
689+
margin-top: 24px;
690+
}
691+
692+
.hero-search-stats {
693+
display: flex;
694+
justify-content: center;
695+
flex-wrap: wrap;
696+
gap: 28px;
697+
list-style: none;
698+
padding: 0;
699+
margin: 0 0 20px;
700+
font-size: 13px;
701+
702+
strong {
703+
display: block;
704+
font-size: 22px;
705+
line-height: 1.3;
706+
}
707+
}
708+
709+
.hero-search-actions {
710+
display: flex;
711+
justify-content: center;
712+
flex-wrap: wrap;
713+
gap: 12px;
714+
}
715+
716+
.hero-btn {
717+
display: inline-block;
718+
padding: 9px 20px;
719+
border-radius: 4px;
720+
font-size: 14px;
721+
font-weight: 600;
722+
text-decoration: none;
723+
724+
&:hover, &:focus {
725+
text-decoration: none;
726+
}
727+
}
728+
729+
.hero-search-actions .hero-btn-primary {
730+
background: #fff;
731+
color: var(--color-brand-orange);
732+
border: 1px solid #fff;
733+
734+
&:hover, &:focus {
735+
background: rgba(255, 255, 255, 0.9);
736+
color: #d97c10;
737+
}
738+
}
739+
740+
.hero-search-actions .hero-btn-secondary {
741+
background: transparent;
742+
color: #fff;
743+
border: 1px solid rgba(255, 255, 255, 0.6);
744+
745+
&:hover, &:focus {
746+
background: rgba(255, 255, 255, 0.15);
747+
color: #fff;
748+
}
749+
}
750+
751+
@media (max-width: 767px) {
752+
.hero-search-stats {
753+
gap: 20px;
754+
}
755+
}
756+
608757
#search-container {
609758
margin-top: -20px;
610759
}
@@ -1888,12 +2037,7 @@ svg {
18882037
height: auto !important;
18892038
}
18902039

1891-
@media (max-width: 1199px) {
1892-
.publishing-packages {
1893-
margin-top: 40px;
1894-
}
1895-
}
1896-
#how-to-submit-packages, #how-to-update-packages {
2040+
#getting-started, #how-to-submit-packages, #how-to-update-packages {
18972041
margin-top: 40px;
18982042
}
18992043

‎src/Controller/WebController.php‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,25 @@
3737
class WebController extends Controller
3838
{
3939
#[Route('/', name: 'home')]
40-
public function index(Request $req, BlogRssFetcher $blogRssFetcher): RedirectResponse|Response
40+
public function index(Request $req, BlogRssFetcher $blogRssFetcher, RedisClient $redis): RedirectResponse|Response
4141
{
4242
if ($resp = $this->checkForQueryMatch($req)) {
4343
return $resp;
4444
}
4545

46+
$downloads = 'N/A';
47+
if (Killswitch::isEnabled(Killswitch::DOWNLOADS_ENABLED)) {
48+
try {
49+
$downloads = (int) ($redis->get('downloads') ?: 0);
50+
} catch (ConnectionException) {
51+
}
52+
}
53+
4654
return $this->render('web/index.html.twig', [
4755
'newsItems' => $blogRssFetcher->getNewsItems(),
56+
'packages' => $this->getEM()->getRepository(Package::class)->getTotal(),
57+
'versions' => $this->getEM()->getRepository(Version::class)->getTotal(),
58+
'downloads' => $downloads,
4859
]);
4960
}
5061

‎src/Entity/PackageRepository.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -748,7 +748,7 @@ public function getTotal(): int
748748
$result = $stmt->fetchAllAssociative();
749749
$stmt->free();
750750

751-
return (int) $result[0]['count'];
751+
return (int) ($result[0]['count'] ?? 0);
752752
}
753753

754754
/**

‎src/Entity/VersionRepository.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ public function getTotal(): int
357357
$result = $stmt->fetchAllAssociative();
358358
$stmt->free();
359359

360-
return (int) $result[0]['count'];
360+
return (int) ($result[0]['count'] ?? 0);
361361
}
362362

363363
/**

‎templates/about/about.html.twig‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,41 @@
2222
</section>
2323
</section>
2424

25+
<h2 class="title" id="getting-started">Getting Started</h2>
26+
<section class="row">
27+
<section class="col-lg-6">
28+
<h3 id="define-your-dependencies">Define Your Dependencies</h3>
29+
<p>Put a file named <em>composer.json</em> at the root of your project, containing your project dependencies:</p>
30+
<pre><code>{
31+
"require": {
32+
"vendor/package": "1.3.2",
33+
"vendor/package2": "1.*",
34+
"vendor/package3": "^2.0.3"
35+
}
36+
}</code></pre>
37+
<p>For more information about packages versions usage, see the <a href="https://getcomposer.org/doc/01-basic-usage.md#package-versions">composer documentation</a>.</p>
38+
39+
<h3 id="install-composer">Install Composer In Your Project</h3>
40+
<p>Run this in your command line:</p>
41+
<pre><code>curl -sS https://getcomposer.org/installer | php</code></pre>
42+
<p>Or <a href="https://getcomposer.org/composer.phar">download composer.phar</a> into your project root.
43+
See the Composer documentation for complete <a href="https://getcomposer.org/doc/00-intro.md#installation-linux-unix-macos">installation instructions</a> on various platforms.</p>
44+
</section>
45+
46+
<section class="col-lg-6">
47+
<h3 id="install-dependencies">Install Dependencies</h3>
48+
<p>Execute this in your project root.</p>
49+
<pre><code>php composer.phar install</code></pre>
50+
51+
<h3 id="autoload-dependencies">Autoload Dependencies</h3>
52+
<p>If your packages specify <a href="https://getcomposer.org/doc/01-basic-usage.md#autoloading">autoloading information</a>, you can autoload all the dependencies by adding this to your code:</p>
53+
<pre><code>require 'vendor/autoload.php';</code></pre>
54+
<p><a href="{{ path('browse') }}">Browse</a> the packages we have to find more great libraries you can use in your project.</p>
55+
</section>
56+
</section>
57+
58+
<div class="clearfix"></div>
59+
2560
<h2 class="title" id="how-to-submit-packages">How to submit packages?</h2>
2661
<section class="row">
2762
<section class="col-lg-6">
@@ -76,6 +111,15 @@ acme/email</code></pre>
76111
</section>
77112

78113
<section class="col-lg-6">
114+
<h3 id="validate-and-publish">Validate and publish</h3>
115+
<p>Run <code>composer validate</code> to check that your composer.json file has no syntax errors, then commit it to your git or other VCS repository.</p>
116+
<p><a href="{{ path('login') }}">Log in</a> or <a href="{{ path('register') }}">register</a> on this site, then hit the <a href="{{ path('submit') }}">submit</a> button in the menu. Once you entered your public repository URL, your package will be automatically crawled periodically - just make sure you keep the composer.json file up to date.</p>
117+
<p>Use <a href="https://packagist.com">Private Packagist</a> if you want to share private code as a Composer package with colleagues or customers without publishing it for everyone on Packagist.org.</p>
118+
</section>
119+
120+
<div class="clearfix"></div>
121+
<section class="col-lg-6">
122+
79123
<h3 id="managing-package-versions">Managing package versions</h3>
80124
<p>New versions of your package are automatically fetched from tags you create in your VCS repository.</p>
81125
<p>The easiest way to manage versioning is to just omit the version field from the composer.json file. The version numbers will then be parsed from the tag and branch names.</p>

‎templates/layout.html.twig‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@
6666
<li>
6767
<a href="{{ path('browse') }}">{{ 'menu.browse'|trans }}</a>
6868
</li>
69+
<li>
70+
<a href="{{ path('about') }}">{{ 'menu.about_packagist'|trans }}</a>
71+
</li>
6972
<li>
7073
<a href="{{ path('submit') }}">{{ 'menu.submit'|trans }}</a>
7174
</li>

‎templates/web/index.html.twig‎

Lines changed: 4 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,16 @@
11
{% extends "layout.html.twig" %}
22

3-
{% block content %}
4-
<section class="row">
5-
<section class="col-xl-6 getting-started">
6-
<h2 class="title">Getting Started</h2>
7-
<div>
8-
<h3>Define Your Dependencies</h3>
9-
<p>Put a file named <em>composer.json</em> at the root of your project, containing your project dependencies:</p>
10-
<pre><code>{
11-
"require": {
12-
"vendor/package": "1.3.2",
13-
"vendor/package2": "1.*",
14-
"vendor/package3": "^2.0.3"
15-
}
16-
}</code></pre>
17-
18-
<p>For more information about packages versions usage, see the <a href="https://getcomposer.org/doc/01-basic-usage.md#package-versions">composer documentation</a>.</p>
19-
20-
<h3>Install Composer In Your Project</h3>
21-
<p>Run this in your command line:</p>
22-
<pre><code>curl -sS https://getcomposer.org/installer | php</code></pre>
23-
<p>Or <a href="https://getcomposer.org/composer.phar">download composer.phar</a> into your project root.</p>
24-
<p>See the Composer documentation for complete <a href="https://getcomposer.org/doc/00-intro.md#installation-linux-unix-macos">installation instructions</a> on various platforms.</p>
25-
26-
<h3>Install Dependencies</h3>
27-
<p>Execute this in your project root.</p>
28-
<pre><code>php composer.phar install</code></pre>
29-
30-
<h3>Autoload Dependencies</h3>
31-
<p>If your packages specify <a href="https://getcomposer.org/doc/01-basic-usage.md#autoloading">autoloading information</a>, you can autoload all the dependencies by adding this to your code:</p>
32-
<pre><code>require 'vendor/autoload.php';</code></pre>
33-
<p><a href="{{ path('browse') }}">Browse</a> the packages we have to find more great libraries you can use in your project.</p>
34-
</div>
35-
</section>
36-
37-
<section class="col-xl-6 publishing-packages">
38-
<h2 class="title">Publishing Packages</h2>
39-
<div>
40-
<h3>Define Your Package</h3>
41-
<p>Put a file named <em>composer.json</em> at the root of your package's repository, containing this information:</p>
42-
<pre><code>{
43-
"name": "your-vendor-name/package-name",
44-
"description": "A short description of what your package does",
45-
"require": {
46-
"php": ">=8.2",
47-
"another-vendor/package": "1.*"
48-
}
49-
}</code></pre>
50-
<p>This is the strictly minimal information you have to give.</p>
51-
<p>For more details about package naming and the fields you can use to document your package better, see the <a href="{{ path('about') }}">about</a> page.</p>
52-
53-
<h3>Validate The File</h3>
54-
<p>Run <code>composer validate</code> to check that your file has no syntax errors.</p>
55-
56-
<h3>Commit The File</h3>
57-
<p>Add the <code>composer.json</code> to your git or other VCS repository and commit it.</p>
58-
59-
<h3>Publish It</h3>
60-
<p><a href="{{ path('login') }}">Log in</a> or <a href="{{ path('register') }}">register</a> on this site, then hit the <a href="{{ path('submit') }}">submit</a> button in the menu.</p>
61-
<p>Once you entered your public repository URL in there, your package will be automatically crawled periodically. You just have to make sure you keep the composer.json file up to date.</p>
62-
63-
<h3>Sharing Private Code</h3>
64-
<p>Use <a href="https://packagist.com">Private Packagist</a> if you want to share private code as a Composer package with colleagues or customers without publishing it for everyone on Packagist.org. Private Packagist allows you to manage your own private Composer repository with per-user authentication, team management and integration in version control systems.</p>
65-
</div>
66-
</section>
67-
</section>
3+
{% set showSearchDesc = 'hero' %}
684

5+
{% block content %}
696
{% if newsItems is defined and newsItems|length > 0 %}
707
<section class="row">
71-
<section class="col-xl-6">
8+
<section class="col-12">
729
<h2 class="title">Latest News</h2>
7310
{% for item in newsItems %}
7411
<h3><a href="{{ item.link }}" rel="noopener noreferrer">{{ item.title }}</a> <small class="text-muted">- {{ item.datePublished|date('M d, Y') }}</small></h3>
7512
<p>
76-
{{ item.description|length > 200 ? item.description[:200] ~ '...' : item.description }}
13+
{{ item.description|length > 250 ? item.description[:250] ~ '...' : item.description }}
7714
{% if item.datePublished %}
7815
{% endif %}
7916
</p>

0 commit comments

Comments
 (0)