From ef58c7081bf1bdf073b25aaf6370c994b200e3bc Mon Sep 17 00:00:00 2001
From: xaoxuu <git@xaoxuu.com>
Date: Fri, 19 Jan 2024 23:19:25 +0800
Subject: [PATCH] [feat] sidebar linklist widget

---
 layout/_partial/widgets/components/link.ejs   | 15 ++++++
 .../_partial/widgets/components/linklist.ejs  | 27 ++++++++++
 layout/_partial/widgets/linklist.ejs          | 17 +++++++
 layout/_partial/widgets/markdown.ejs          |  3 ++
 source/css/_layout/widgets/components.styl    | 49 +++++++++++++++++++
 source/css/_layout/widgets/ghrepo.styl        |  1 -
 source/css/_layout/widgets/markdown.styl      |  2 +-
 7 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 layout/_partial/widgets/components/link.ejs
 create mode 100644 layout/_partial/widgets/components/linklist.ejs
 create mode 100644 layout/_partial/widgets/linklist.ejs
 create mode 100644 source/css/_layout/widgets/components.styl

diff --git a/layout/_partial/widgets/components/link.ejs b/layout/_partial/widgets/components/link.ejs
new file mode 100644
index 0000000..5992236
--- /dev/null
+++ b/layout/_partial/widgets/components/link.ejs
@@ -0,0 +1,15 @@
+<%
+function layoutDiv() {
+  var el = ''
+  el += `<a class="link" title="${item.title}" href="${item.url}">`
+  if (item.icon) {
+    el += icon(item.icon)
+  }
+  if (showText) {
+    el += `<span>${item.title}</span>`
+  }
+  el += `</a>`
+  return el
+}
+%>
+<%- layoutDiv() %>
\ No newline at end of file
diff --git a/layout/_partial/widgets/components/linklist.ejs b/layout/_partial/widgets/components/linklist.ejs
new file mode 100644
index 0000000..b4e7ecc
--- /dev/null
+++ b/layout/_partial/widgets/components/linklist.ejs
@@ -0,0 +1,27 @@
+<%
+function layoutDiv(linklist) {
+  var links = linklist.items || []
+  if (links.length == 0) {
+    return ''
+  }
+  var el = ''
+  var style = ''
+  var columns = linklist.columns || links.length
+  if (links.length == 1) {
+    style += `style="grid-template-columns:repeat(1,1fr);"`
+  } else {
+    style += `style="grid-template-columns:repeat(${columns},1fr);"`
+  }
+  var align = 'center'
+  if (columns == 1 && links.length > 1) {
+    align = 'left'
+  }
+  el += `<div class="linklist ${align}" ${style}>`
+  for (let link of links) {
+    el += partial('link', {item: link, showText: columns > 2 ? false : true})
+  }
+  el += `</div>`
+  return el
+}
+%>
+<%- layoutDiv(item) %>
\ No newline at end of file
diff --git a/layout/_partial/widgets/linklist.ejs b/layout/_partial/widgets/linklist.ejs
new file mode 100644
index 0000000..ddc5d16
--- /dev/null
+++ b/layout/_partial/widgets/linklist.ejs
@@ -0,0 +1,17 @@
+<%
+function layoutDiv() {
+  var el = '';
+  el += `<widget class="widget-wrapper${scrollreveal(' ')} linklist">`
+  if (item.title?.length > 0) {
+    el += '<div class="widget-header dis-select">';
+    el += '<span class="name">' + item.title + '</span>';
+    el += '</div>';
+  }
+  el += '<div class="widget-body fs14">';
+  el += partial('components/linklist', {item: item})
+  el += '</div>';
+  el += '</widget>';
+  return el;
+}
+%>
+<%- layoutDiv() %>
diff --git a/layout/_partial/widgets/markdown.ejs b/layout/_partial/widgets/markdown.ejs
index 16e88a9..1473456 100644
--- a/layout/_partial/widgets/markdown.ejs
+++ b/layout/_partial/widgets/markdown.ejs
@@ -15,6 +15,9 @@ function layoutDiv() {
   if (item.src) {
     el += `<div class="stellar-marked-api md-marked" src="${item.src}"></div>`
   }
+  if (item.linklist) {
+    el += partial('components/linklist', {item: item.linklist})
+  }
   el += '</div>';
   el += '</widget>';
   return el;
diff --git a/source/css/_layout/widgets/components.styl b/source/css/_layout/widgets/components.styl
new file mode 100644
index 0000000..76fe630
--- /dev/null
+++ b/source/css/_layout/widgets/components.styl
@@ -0,0 +1,49 @@
+.widgets .linklist
+  display: grid
+  grid-gap: 8px
+  margin: 1em 0
+
+.linklist .link
+  border-radius: $border-bar
+  background: var(--alpha50)
+  color: var(--text-p2)
+  border: none
+  border-bottom: none
+  min-height: 32px
+  padding: 2px 4px
+  trans1 background
+  display: flex
+  justify-content: center
+  align-items: center
+  txt-ellipsis()
+
+.linklist .link span
+  padding: 0 4px
+  txt-ellipsis()
+.linklist .link svg, .linklist .link img
+  $size = 16px
+  padding: 0 2px
+  color: $color-theme
+  max-height: 18px
+  width: auto
+  filter: grayscale(100%) brightness(0.8) opacity(0.8)
+  trans1 filter
+  flex-shrink: 0
+
+.markdown .linklist.center .link
+  border-radius: $border-button
+
+.linklist.left
+  grid-gap: 4px
+.linklist.left .link
+  justify-content: flex-start
+  padding: 2px 16px
+  img,svg 
+    width: 16px
+  span 
+    padding: 0 8px
+
+.linklist .link:hover
+  background: var(--alpha100)
+  svg  
+    filter: unset
\ No newline at end of file
diff --git a/source/css/_layout/widgets/ghrepo.styl b/source/css/_layout/widgets/ghrepo.styl
index dc43327..4434560 100644
--- a/source/css/_layout/widgets/ghrepo.styl
+++ b/source/css/_layout/widgets/ghrepo.styl
@@ -6,7 +6,6 @@
     background: var(--card)
     border-radius: $border-block
     box-shadow: $boxshadow-card
-    hover-float()
     >div+div
       margin-top: 0.5rem
     span
diff --git a/source/css/_layout/widgets/markdown.styl b/source/css/_layout/widgets/markdown.styl
index 08170fa..87cf66f 100644
--- a/source/css/_layout/widgets/markdown.styl
+++ b/source/css/_layout/widgets/markdown.styl
@@ -4,7 +4,7 @@
     padding: 4px 16px
     background: var(--alpha50)
 
-    a
+    a:not([class])
       trans1 all
       border-bottom: 1px solid var(--text-p0)
       color: var(--text-p0)