[feat] sidebar linklist widget

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() %>

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) %>

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() %>

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;

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

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

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)