feat(robherley#97): implement file-details are module, shared between…

… feed list and the file page
surdaft · Sep 17, 2023 · 3e05b0a · 3e05b0a
1 parent 8b5e780
commit 3e05b0a
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 51 deletions.
diff --git a/internal/http/assets.go b/internal/http/assets.go
@@ -117,13 +117,13 @@ func NewAssets(webFS fs.FS, docsFS fs.FS, readme []byte, extendHeadFile string)
 
 	fileTmpl := template.New("file")
 	fileTmpl.Funcs(templateFuncs)
-	if assets.tmpl[FileTemplate], err = fileTmpl.ParseFS(webFS, tmplPath+"layout.go.html", tmplPath+"file.go.html"); err != nil {
+	if assets.tmpl[FileTemplate], err = fileTmpl.ParseFS(webFS, tmplPath+"layout.go.html", tmplPath+"components/*.go.html", tmplPath+"file.go.html"); err != nil {
 		return nil, err
 	}
 
 	feedTmpl := template.New("feed")
 	feedTmpl.Funcs(templateFuncs)
-	if assets.tmpl[FeedTemplate], err = feedTmpl.ParseFS(webFS, tmplPath+"layout.go.html", tmplPath+"feed.go.html"); err != nil {
+	if assets.tmpl[FeedTemplate], err = feedTmpl.ParseFS(webFS, tmplPath+"layout.go.html", tmplPath+"components/*.go.html", tmplPath+"feed.go.html"); err != nil {
 		return nil, err
 	}
 

diff --git a/internal/http/handlers.go b/internal/http/handlers.go
@@ -99,10 +99,12 @@ func DocHandler(assets Assets) http.HandlerFunc {
 		}
 
 		vars := map[string]interface{}{
-			"FileID":        name,
-			"ContentLength": len(content),
-			"FileType":      "markdown",
-			"HTML":          md,
+			"Snip": &snips.File{
+				ID:   name,
+				Size: uint64(len(content)),
+				Type: "markdown",
+			},
+			"HTML": md,
 		}
 
 		err = assets.Template(FileTemplate).ExecuteTemplate(w, "layout.go.html", vars)
@@ -198,16 +200,9 @@ func FileHandler(cfg *config.Config, database db.DB, assets Assets) http.Handler
 		}
 
 		vars := map[string]interface{}{
-			"FileID":          file.ID,
-			"FileName":        file.Name,
-			"FileDescription": file.Description,
-			"FileSize":        file.Size,
-			"CreatedAt":       file.CreatedAt,
-			"UpdatedAt":       file.UpdatedAt,
-			"FileType":        strings.ToLower(file.Type),
-			"RawHREF":         rawHref,
-			"HTML":            html,
-			"Private":         file.Private,
+			"Snip":    file,
+			"RawHREF": rawHref,
+			"HTML":    html,
 		}
 
 		err = tmpl.ExecuteTemplate(w, "layout.go.html", vars)

diff --git a/web/static/css/index.css b/web/static/css/index.css
@@ -173,6 +173,7 @@ a:hover {
   position: sticky;
   top: 0;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   font-family: var(--font-mono);
@@ -183,23 +184,37 @@ a:hover {
   background-color: var(--color-black);
 }
 
-.file-header .file-details {
-  padding: 1rem;
-  color: var(--color-gray-9);
-  flex: 1;
-}
-
 .file-header .file-header-link {
   padding: 0.5rem 1rem;
   border-left: var(--border);
 }
 
-.file-header .file-details span {
+.file-header span.description {
   width: 100%;
   display: inline-block;
-  margin-top: 0.5rem;
-  padding-top: 0.5rem;
+  padding: 1rem;
   border-top: var(--border);
+  color: var(--color-gray-9);
+}
+
+.file-header span.description:after {
+  content: "";
+}
+
+.file-details {
+  padding: 1rem;
+  color: var(--color-gray-9);
+  flex: 1;
+}
+
+.file-details span:after {
+  display: inline-block;
+  margin: 0 .5rem;
+  content: "·";
+}
+
+.file-details span:last-child:after {
+  content: "";
 }
 
 .file-content {
@@ -245,16 +260,4 @@ a:hover {
   padding: 1rem;
   color: var(--color-gray-9);
   display: flex;
-}
-
-#feed > div span {
-  margin-left: 1rem;
-}
-
-#feed > div span:first-child {
-  margin-left: 0;
-}
-
-#feed > div span:last-child {
-  margin-left: auto;
 }
diff --git a/web/templates/components/file.go.html b/web/templates/components/file.go.html
@@ -0,0 +1,11 @@
+{{ define "file-details" }}
+<div class="file-details">
+  <span>
+    <a href="f/{{ .ID }}">{{ if .Name }}{{ .Name }}{{ else }}{{ .ID }}{{ end }}</a>
+    {{ if .Type }} ({{ .Type}}){{ end }}
+  </span>
+  {{ if .Size }}<span>{{ humanizeFileSize .Size }}</span>{{ end }}
+  {{ if .UpdatedAt }}<span>modified: {{ humanizeTimestamp .UpdatedAt }}</span>{{ end }}
+  {{ if .Private }}<span class="danger">private</span>{{ end }}
+</div>
+{{ end }}
diff --git a/web/templates/feed.go.html b/web/templates/feed.go.html
@@ -4,14 +4,7 @@
 {{ define "content" }}
 <div id="feed">
   {{ range .Snips }}
-  <div>
-    <span>
-      <a href="f/{{ .ID }}">{{ .ID }}</a>
-      {{ if .Type }} ({{ .Type}}){{ end }}
-    </span>
-    {{ if .Size }}<span>{{ humanizeFileSize .Size }}</span>{{ end }}
-    {{ if .UpdatedAt }}<span>modified: {{ humanizeTimestamp .UpdatedAt }}</span>{{ end }}
-  </div>
+  {{ template "file-details" . }}
   {{ else }}
   <div>
     <span>No Snips</span>

diff --git a/web/templates/file.go.html b/web/templates/file.go.html
@@ -3,16 +3,12 @@
 
 {{ define "content" }}
 <nav class="file-header">
-  <div class="file-details">
-    file: <a href="#">{{ .FileID }}</a>
-    {{ if .FileType }}({{ .FileType }}){{ end }}{{ if .FileSize }} &middot; {{ humanizeFileSize .FileSize }}{{ end }}
-    {{ if .UpdatedAt }} &middot; modified: {{ humanizeTimestamp .UpdatedAt }} {{ end }}
-    {{ if .Private }} &middot; <span class="danger">private</span> {{ end }}
-  </div>
+  {{ template "file-details" .Snip }}
   <a class="file-header-link" id="to-top" href="#" data-hide aria-label="go to top">&#8593; top</a>
   {{ if .RawHREF }}
   <a class="file-header-link" href="{{ .RawHREF }}" aria-label="view raw file">view raw</a>
   {{ end }}
+  {{ if .Snip.Description }}<span class="description">{{ .Snip.Description }}</span>{{ end }}
 </nav>
 <article class="file-content">
   {{ .HTML }}