Merge pull request '[Feat] Change tags in now' (#1) from feat/change-tags into main

Reviewed-on: https://git.anhgelus.world/anhgelus/now/pulls/1

13 files changed, 98 insertions, 59 deletions

diff --git a/README.md b/README.md
index a5d168f..ba1d137 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,10 @@ You can create a sample config with the flag `-generate-json-config` (which gene
 The config does not depend on the markup language: a field `foo` will being named `foo` for JSON and TOML.
 The TOML format is used in this section.
 
+Every path is relative to the `public` directory (except for html and config files which are relatives to the path of
+the binary).
+For example, `wallpaper.webp` is searched in `public/wallpaper.webp`
+
 The root is defining the background image, the description, the file's path to the legal pages, the path to the custom 
 font (you can remove this if you want to use `Raveo, Inter, Roboto` as default fonts), the path to the configs of custom
 pages and a list of all your ["rel-me"](https://microformats.org/wiki/rel-me) links. 
@@ -55,8 +59,7 @@ font = ""
 custom_pages = ["custom.toml"]
 rel_me_links = ["https://foo.example.org/@bar"]
 ```
-The path is relative to the execution of the binary, except for `image` and `font` which are relative to the `public` 
-folder.
+The `legal` and `custom_pages` are relatives to the path of the binary.
 If you are using Docker, please use a static path.
 
 The first section is defining who you are.
@@ -68,16 +71,21 @@ It must be placed inside the `public` directory.
   pronouns = "any"
   image = "pfp.webp"
 
-  [[person.tags]]
+  [[person.now]]
     name = "Hello"
     description = "World"
     link = ""
+    link_name = ""
 
-  [[person.tags]]
+  [[person.now]]
     name = "I am"
     description = "a tag"
-    link = ""
+    link = "https://example.org/foo/bar"
+    link_name = "And I have a link!"
 ```
+Only `person.now.description` is required.
+If you omit a field, the content linked with it will not appear.
+`person.now.link_name` is the link's name displayed.
 
 Then, you define the colors of the main page.
 `text` is the text's color.
@@ -144,6 +152,7 @@ image = "wallpaper.webp"
 description = "I am a beautiful description!"
 content = "foo-bar.html"
 ```
+The `content` is relative to the path of the binary.
 
 Then, you can define custom colors.
 Check _Main config_'s colors section for more information.
diff --git a/data.go b/data.go
index fccaec3..174b104 100644
--- a/data.go
+++ b/data.go
@@ -48,13 +48,14 @@ type Person struct {
 	Name     string `json:"name" toml:"name"`
 	Pronouns string `json:"pronouns" toml:"pronouns"`
 	Image    string `json:"image" toml:"image"`
-	Tags     []*Tag `json:"tags" toml:"tags"`
+	Now      []*Now `json:"now" toml:"now"`
 }
 
-type Tag struct {
+type Now struct {
 	Name        string `json:"name" toml:"name"`
 	Description string `json:"description" toml:"description"`
 	Link        string `json:"link" toml:"link"`
+	LinkName    string `json:"link_name" toml:"link_name"`
 }
 
 type Color struct {
diff --git a/index.ts b/index.ts
index e48401f..68b6f19 100644
--- a/index.ts
+++ b/index.ts
@@ -1,13 +1,4 @@
 function setupEvents() {
-    document.querySelectorAll<HTMLElement>(".tag")?.forEach(t => {
-        t.addEventListener("click", _ => {
-            const link = t.getAttribute("data-href")
-            if (link === null || link === "") return
-            if (!link.startsWith(window.location.origin) && link.startsWith("https://")) window.open(link)
-            else changePage(link)
-        })
-    })
-
     document.querySelectorAll<HTMLAnchorElement>("a")?.forEach(a => {
         a.addEventListener("click", e => {
             if (!a.href.startsWith(window.location.origin)) return
diff --git a/main.go b/main.go
index 7fd7093..3f8d3c2 100644
--- a/main.go
+++ b/main.go
@@ -117,14 +117,14 @@ func main() {
 		"/legal",
 		"Legal things",
 		"",
-		"Legal information about "+cfg.Person.Name+"'s Now page",
+		"Legal information about "+cfg.Person.Name+"'s bio",
 		&cfg,
 	).Handle()
-	g.NewTemplate("tags",
-		"/tags",
-		"Tags",
+	g.NewTemplate("now",
+		"/now",
+		"Now",
 		"",
-		"Tags of "+cfg.Person.Name+"'s Now page",
+		""+cfg.Person.Name+"'s now",
 		&cfg,
 	).Handle()
 
@@ -140,6 +140,14 @@ func main() {
 	}
 
 	g.NotFoundHandler = func(w http.ResponseWriter, r *http.Request) {
+		g.Render(w, "404", &golatt.TemplateData{
+			Title: "Not found :(",
+			SEO: &golatt.SeoData{
+				URL:         r.URL.Path,
+				Description: "Not found",
+			},
+			Data: &cfg,
+		})
 		http.Redirect(w, r, "/", http.StatusTemporaryRedirect)
 	}
 
@@ -185,9 +193,9 @@ func generateConfigFile(isToml bool) {
 			Name:     "John Doe",
 			Pronouns: "any",
 			Image:    "pfp.webp",
-			Tags: []*Tag{
-				{"Hello", "World", ""},
-				{"I am", "a tag", ""},
+			Now: []*Now{
+				{"Hello", "World", "", ""},
+				{"I am", "a tag", "", ""},
 			},
 		},
 		Color: &Color{
diff --git a/scss/main.scss b/scss/main.scss
index 8723941..2b3c2b7 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -72,7 +72,7 @@ main {
   margin-top: 10vh;
   margin-bottom: 10vh;
   max-width: 800px;
-  & h1, h2, h3 {
+  & h1 {
     margin: 0;
   }
   @media only screen and (max-width: vars.$bp-mid) {
@@ -92,6 +92,7 @@ main {
 h1, h2, h3 {
   margin-bottom: 1rem;
   margin-top: 2rem;
+  font-weight: bold;
 }
 
 p {
@@ -116,6 +117,8 @@ h3 {
 
 h4 {
   font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
 }
 
 ul, ol {
@@ -141,7 +144,6 @@ em {
 
 .header {
   display: flex;
-  align-items: center;
   justify-content: space-between;
   @media only screen and (max-width: vars.$bp-little) {
     flex-direction: column;
@@ -224,6 +226,7 @@ em {
   width: 100%;
   column-gap: 1rem;
   row-gap: 0.5rem;
+  justify-items: center;
   @media only screen and (max-width: vars.$bp-little) {
     grid-template-columns: 1fr;
     column-gap: 0.5rem;
diff --git a/scss/tag.scss b/scss/tag.scss
index 5134f27..516ecdb 100644
--- a/scss/tag.scss
+++ b/scss/tag.scss
@@ -17,12 +17,10 @@
   }
   & p {
     display: block;
-    margin-top: 0.5rem;
   }
 }
 
 .tag {
-  cursor: pointer;
   padding: 0.5rem;
   margin: -0.5rem;
   border-radius: 8px;
@@ -37,10 +35,4 @@
       display: block;
     }
   }
-  &:hover {
-    background: var(--tag-hover);
-    & h4 {
-      font-weight: bold;
-    }
-  }
 }
diff --git a/templates/base/base.gohtml b/templates/base/base.gohtml
index 34d5451..894685b 100644
--- a/templates/base/base.gohtml
+++ b/templates/base/base.gohtml
@@ -1,4 +1,5 @@
 {{define "base"}}
+    {{ $notRoot := ne .SEO.URL "/" }}
     <!doctype html>
     <html lang="fr" prefix="og: https://ogp.me/ns#">
     <head>
@@ -20,7 +21,7 @@
         </style>
         <link rel="stylesheet" href="{{getAssetPath "styles.css"}}" />
         {{template "opengraph-base" .SEO}}
-        {{ if .Data.IsCustomPage }}
+        {{ if $notRoot }}
             <style>
                 .links { {{ .Data.Color.Button.GetBackground }}{{ .Data.Color.Button.GetTextColor }} }
             </style>
@@ -36,7 +37,7 @@
     </div>
     {{ $rings := getRings }}
     {{ if ne $rings nil }}
-    <div class="rings {{ if ne .SEO.URL "/" }}fixed{{ end }}">
+    <div class="rings {{ if $notRoot }}fixed{{ end }}">
         {{ range $ring := $rings }}
             <a href="{{ $ring.Link }}" target="_blank" class="ring">
                 <img src="{{ getImage $ring.Image }}" alt="{{ $ring.Name }} logo">
diff --git a/templates/page/404.gohtml b/templates/page/404.gohtml
new file mode 100644
index 0000000..76f9128
--- /dev/null
+++ b/templates/page/404.gohtml
@@ -0,0 +1,24 @@
+{{define "body"}}
+    <main style="{{ .GetBackground }}">
+        <div class="header">
+            <h1 class="header__title">404 - Not found</h1>
+            <nav>
+                <a href="/">Home</a>
+            </nav>
+        </div>
+        <p>
+            Oh no, you are lost. Do you need help?
+        </p>
+        <nav class="links" style="{{ .Color.Button.GetBackground }}{{ .Color.Button.GetTextColor }}">
+            <div class="link">
+                <a href="/legal">Legal information</a>
+            </div>
+            <div class="link">
+                <a href="/">Home</a>
+            </div>
+            <div class="link">
+                <a href="/now">Now</a>
+            </div>
+        </nav>
+    </main>
+{{end}}
\ No newline at end of file
diff --git a/templates/page/custom_page.gohtml b/templates/page/custom_page.gohtml
index 5b4de00..7963a97 100644
--- a/templates/page/custom_page.gohtml
+++ b/templates/page/custom_page.gohtml
@@ -4,7 +4,7 @@
             <h1 class="header__title">{{ .Title }}</h1>
             <nav>
                 <a href="/">Home</a>
-                <a href="/tags">Tags</a>
+                <a href="/now">Now</a>
             </nav>
         </div>
         {{ .GetContent }}
diff --git a/templates/page/index.gohtml b/templates/page/index.gohtml
index 73301fb..8f376f3 100644
--- a/templates/page/index.gohtml
+++ b/templates/page/index.gohtml
@@ -19,7 +19,7 @@
                 </div>
             {{ end }}
             <div class="link">
-                <a href="/tags">Tags</a>
+                <a href="/now">Now</a>
             </div>
         </nav>
     </main>
diff --git a/templates/page/legal.gohtml b/templates/page/legal.gohtml
index b3a3a54..0ed112a 100644
--- a/templates/page/legal.gohtml
+++ b/templates/page/legal.gohtml
@@ -1,11 +1,16 @@
 {{define "body"}}
-    <div class="credits-legal" style="{{ .GetBackground }}">
-        <h1>Legal information</h1>
+    <main style="{{ .GetBackground }}">
+        <div class="header">
+            <h1 class="header__title">Legal information</h1>
+            <nav>
+                <a href="/">Home</a>
+            </nav>
+        </div>
         <p>
             The software behind this website was made by <a href="https://anhgelus.world/" target="_blank">Anhgelus Morhtuuzh</a>.
             It is available on <a href="https://git.anhgelus.world/anhgelus/now">my forge</a> for free and licensed under
             the <a href="https://git.anhgelus.world/anhgelus/now/raw/branch/main/LICENSE" target="_blank">AGPL</a> license.
         </p>
         {{ .GetLegal }}
-    </div>
+    </main>
 {{end}}
diff --git a/templates/page/now.gohtml b/templates/page/now.gohtml
new file mode 100644
index 0000000..96c8b77
--- /dev/null
+++ b/templates/page/now.gohtml
@@ -0,0 +1,23 @@
+{{define "body"}}
+    <main style="{{ .GetBackground }}">
+        <div class="header">
+            <h1 class="header__title">Now</h1>
+            <nav>
+                <a href="/">Home</a>
+            </nav>
+        </div>
+        <div class="tags" style="{{ .Color.GetTagColor }}">
+            {{ range $now := .Person.Now }}
+                <div class="tag">
+                    {{ if ne .Name "" }}
+                        <h4>{{ .Name }}</h4>
+                    {{ end }}
+                    <p>{{ .Description }}</p>
+                    {{ if and (ne .Link "") (ne .LinkName "") }}
+                        <p><a href="{{ .Link }}">{{ .LinkName }}</a></p>
+                    {{ end }}
+                </div>
+            {{ end }}
+        </div>
+    </main>
+{{end}}
\ No newline at end of file
diff --git a/templates/page/tags.gohtml b/templates/page/tags.gohtml
deleted file mode 100644
index 6106152..0000000
--- a/templates/page/tags.gohtml
+++ /dev/null
@@ -1,18 +0,0 @@
-{{define "body"}}
-    <main style="{{ .GetBackground }}">
-        <div class="header">
-            <h1 class="header__title">Tags</h1>
-            <nav>
-                <a href="/">Home</a>
-            </nav>
-        </div>
-        <div class="tags" style="{{ .Color.GetTagColor }}">
-            {{ range $tag := .Person.Tags }}
-                <div class="tag" data-href="{{ .Link }}" title="{{ .Link }}">
-                    <h3>{{ .Name }}</h3>
-                    <p>{{ .Description }}</p>
-                </div>
-            {{ end }}
-        </div>
-    </main>
-{{end}}
\ No newline at end of file