anhgelus/now
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(image): custom background image

Browse source
This commit is contained in:
Anhgelus Morhtuuzh 2024-11-10 00:18:50 +01:00
parent bbacda44f8
commit 8129d4f13d
No known key found for this signature in database
GPG key ID: CAD341EFA92DDDE5
4 changed files with 27 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

11
data.go
View file

@ -1,6 +1,7 @@
package main package main
import ( import (
"github.com/anhgelus/golatt"
"html/template" "html/template"
"strconv" "strconv"
) )
@ -11,6 +12,7 @@ type Data struct {
Person *Person `json:"person"` Person *Person `json:"person"`
Color *Color `json:"colors"` Color *Color `json:"colors"`
Links []*Link `json:"links"` Links []*Link `json:"links"`
Legal *Legal `json:"legal"`
} }
type Person struct { type Person struct {
@ -40,6 +42,11 @@ type Link struct {
TextColor string `json:"text_color"` TextColor string `json:"text_color"`
} }
type Legal struct {
LegalInformationLink string `json:"legal_information_link"`
ImagesSource []string `json:"images_source"`
}
func (d *Data) GetBackground() template.CSS { func (d *Data) GetBackground() template.CSS {
bg := d.Color.Background bg := d.Color.Background
css := "background: " + bg.Type + "-gradient(" css := "background: " + bg.Type + "-gradient("
@ -52,6 +59,10 @@ func (d *Data) GetBackground() template.CSS {
return template.CSS(css[:len(css)-1] + ");") return template.CSS(css[:len(css)-1] + ");")
} }
func (d *Data) GetBackgroundImage() template.CSS {
return template.CSS("background-image: url(" + golatt.GetStaticPath(d.Image) + ");")
}
func (d *Data) GetTextColor() template.CSS { func (d *Data) GetTextColor() template.CSS {
return template.CSS("color: " + d.Color.Text + ";") return template.CSS("color: " + d.Color.Text + ";")
} }

11
example.json
View file

@ -1,5 +1,5 @@
{ {
"image": "", "image": "wallpaper.jpg",
"description": "Sem magna a dui labore et cursus nibh ipsum nulla. Sem magna a dui labore et cursus nibh ipsum nulla. Blandit adipiscing nulla diam dolore ultricies ornare sed risus faucibus. Lobortis mi sed dui risus nulla ultrices vulputate at enim.", "description": "Sem magna a dui labore et cursus nibh ipsum nulla. Sem magna a dui labore et cursus nibh ipsum nulla. Blandit adipiscing nulla diam dolore ultricies ornare sed risus faucibus. Lobortis mi sed dui risus nulla ultrices vulputate at enim.",
"person": { "person": {
"name": "Anhgelus Morhtuuzh", "name": "Anhgelus Morhtuuzh",
@ -46,5 +46,12 @@
"color": "#800080FF", "color": "#800080FF",
"text_color": "#fff" "text_color": "#fff"
} }
] ],
"legal": {
"legal_information_link": "https://www.anhgelus.world/legal/",
"images_source": [
"Profile picture: John Smith for example.org",
"Background: John Smith 2 for another.example.org"
]
}
} }

6
scss/main.scss
View file

@ -6,10 +6,14 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18px; font-size: 18px;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
} }
.credits { .credits {
position: fixed; position: absolute;
bottom: 1em; bottom: 1em;
display: flex; display: flex;
gap: 1em; gap: 1em;

4
templates/base/base.gohtml
View file

@ -9,11 +9,11 @@
<link rel="stylesheet" href="{{getAssetPath "styles.css"}}" /> <link rel="stylesheet" href="{{getAssetPath "styles.css"}}" />
{{template "opengraph-base" .SEO}} {{template "opengraph-base" .SEO}}
</head> </head>
<body> <body style="{{ .Data.GetBackgroundImage }}">
{{template "body" .Data}} {{template "body" .Data}}
<div class="credits"> <div class="credits">
<p>Crafted by <a href="https://www.anhgelus.world/" target="_blank">Anhgelus Morhtuuzh</a></p> <p>Crafted by <a href="https://www.anhgelus.world/" target="_blank">Anhgelus Morhtuuzh</a></p>
<p><a href="/legal">Legal information</a></p> <p><a href="{{ .Data.Legal.LegalInformationLink }}">Legal information</a></p>
</div> </div>
<script type="module" src="{{getAssetPath "index.js"}}" defer></script> <script type="module" src="{{getAssetPath "index.js"}}" defer></script>
</body> </body>