ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-25 11:15:07 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

render packages data dynamically from data folder

Browse source
This commit is contained in:
neil 2022-10-12 14:04:13 +08:00
parent efdc9aeb38
commit 236d5b8df8
9 changed files with 116 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -22,3 +22,5 @@ hugo.linux
node_modules
.envrc
cdk.out
.ideas

34
src/data/mockPackages.json Normal file
View file

@ -0,0 +1,34 @@
[
{
"name": "sqlite",
"thumb_image_url": "/Images/package-thumb-nolabel.jpg",
"version": "V 2.4",
"installs": "12",
"maintainer": "axoel",
"slug": "sqlite"
},
{
"name": "unicode.org",
"thumb_image_url": "/Images/package-thumb-nolabel.jpg",
"version": "V 2.4",
"installs": "432",
"maintainer": "pascal",
"slug": "unicode"
},
{
"name": "tukaani.org/xz",
"thumb_image_url": "/Images/package-thumb-nolabel.jpg",
"version": "V 2.4",
"installs": "23",
"maintainer": "pascal",
"slug": "xz"
},
{
"name": "bytereef.org/mpdecimal",
"thumb_image_url": "/Images/package-thumb-nolabel.jpg",
"version": "V 2.4",
"installs": "125673",
"maintainer": "pascal",
"slug": "mpdecimal"
}
]

2
src/layouts/index.html
View file

@ -162,7 +162,7 @@
align-items: center;
}
.swiper-slide img {
.swiper-slide figure > img {
display: block;
width: 100%;
height: 100%;

5
src/layouts/partials/detail-btn.html
View file

@ -34,4 +34,7 @@
</style>
<button href="#" class="detail-btn"><i class="icon-enter-arrow"></i>details</button>
<a href="/packages/{{- .slug -}}">
<button class="detail-btn"><i class="icon-enter-arrow"></i>details</button>
</a>

48
src/layouts/partials/package-grid.html
View file

@ -13,30 +13,32 @@
<!-- Start Package Grid -->
<div class="row package-row black-bg g-0">
<div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
{{- partial "package-thumbnail.html" . -}}
{{- partial "package-thumbnail.html" . -}}
{{- partial "package-thumbnail.html" . -}}
{{- partial "package-thumbnail.html" . -}}
</div>
<div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
{{- partial "package-thumbnail.html" . -}}
{{- partial "package-thumbnail.html" . -}}
{{- partial "package-thumbnail.html" . -}}
{{- partial "package-thumbnail.html" . -}}
</div>
<div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
{{- partial "package-thumbnail.html" . -}}
{{- partial "package-thumbnail.html" . -}}
{{- partial "package-thumbnail.html" . -}}
{{- partial "package-thumbnail.html" . -}}
</div>
<div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
{{- partial "package-thumbnail.html" . -}}
{{- partial "package-thumbnail.html" . -}}
{{- partial "package-thumbnail.html" . -}}
{{- partial "package-thumbnail.html" . -}}
<div class="package-grid">
{{ range $.Site.Data.mockPackages }}
{{- partial "package-thumbnail.html" .}}
{{ end }}
</div>
</div>
</div>
</section>
<style>
.package-grid {
display: grid;
grid-template-columns: auto auto;
}
@media only screen and (min-width: 576px) {
.package-grid {
/* changes to 3 column thumbs */
grid-template-columns: auto auto auto;
}
}
@media only screen and (min-width: 992px) {
.package-grid {
/* changes to 4 column thumbs */
grid-template-columns: auto auto auto auto;
}
}
</style>

47
src/layouts/partials/package-thumbnail.html
View file

@ -1,17 +1,58 @@
<div class="card card-thumbnail" style="width: 100%">
<img src="/Images/package-thumb-1.jpg" class="card-img-top" alt="..." style="width:100%; height:100%;">
<figure class="card-img-top" >
<img src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
<article class="card-thumb-label">
<img src="/Images/tea-logo-no-bg.svg" width="26" alt="tea"/>
<h3>{{- .name -}}</h3>
<h4>&#x2022;&nbsp;{{- .maintainer -}}</h4>
</article>
</figure>
<div class="card-body thumbnail-body">
<div class="card-text-container">
<p class="card-text"><span class="package-version-no">V2.35</span><br><span class="package-install-no">>45 installs</span></p>
<p class="card-text">
<span class="package-version-no">{{- .version -}}</span>
<br>
<span class="package-install-no">>{{- .installs -}}&nbsp;installs</span>
</p>
</div>
{{- partial "detail-btn.html" . -}}
</div>
<div class="card-body thumbnail-body-mobile">
<button href="#" class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
<a href="/packages/{{- .slug -}}">
<button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
</a>
</div>
</div>
<style>
.card-img-top {
position: relative;
}
.card-thumb-label {
position: absolute;
background: rgba(255,255,255,0.9);
left: 0;
bottom: 10px;
padding: 10px;
text-align: left;
}
.card-thumb-label h3 {
color: black;
font-size: 1.1em;
line-height: 1.1em;
margin: 0px;
padding: 0px;
}
.card-thumb-label h4 {
color: black;
font-size: 0.9em;
line-height: 0.9em;
margin: 0px;
padding: 0px;
}
@media only screen and (min-width: 576px) {

14
src/layouts/partials/swiper.html
View file

@ -11,15 +11,11 @@
<div class="col">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
<div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
{{ range $.Site.Data.mockPackages }}
<div class="swiper-slide">
{{- partial "package-thumbnail.html" .}}
</div>
{{ end }}
</div>
<!--<div class="swiper-pagination"></div>-->
</div>

BIN
src/static/Images/package-thumb-nolabel.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 78 KiB

1
src/static/Images/tea-logo-no-bg.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 5 KiB