mirror of https://github.com/onweru/compose.git

weru
11.48.2024 0ea6ac76134e957a998a27bbb357f392d68a70fd
use hugo markdown renderer for deep links
4 files modified
1 files added
48 ■■■■■ changed files
assets/js/index.js 27 ●●●●● patch | view | raw | blame | history
assets/sass/_utils.sass 5 ●●●●● patch | view | raw | blame | history
exampleSite/netlify.toml 2 ●●● patch | view | raw | blame | history
layouts/_default/_markup/render-heading.html 8 ●●●●● patch | view | raw | blame | history
layouts/partials/sprites.html 6 ●●●●● patch | view | raw | blame | history
assets/js/index.js
@@ -170,37 +170,13 @@
  return url
}
function createDeepLinks() {
  let heading_nodes = [];
  [...Array(6).keys()].forEach(function(i){
    if(i) {
      Array.prototype.push.apply(heading_nodes, document.getElementsByTagName(`h${i+1}`));
    }
  });
  heading_nodes.forEach(node => {
    let link = createEl('a');
    let icon = createEl('img');
    icon.src = '{{ absURL "icons/link.svg" }}';
    link.className = 'link icon';
    link.appendChild(icon);
    let id = node.getAttribute('id');
    if(id) {
      link.href = `${sanitizeURL(document.URL)}#${id}`;
      node.appendChild(link);
      pushClass(node, 'link_owner');
    }
  });
}
function copyFeedback(parent) {
  const copy_txt = document.createElement('div');
  const yanked = 'link_yanked';
  copy_txt.classList.add(yanked);
  copy_txt.innerText = copied_text;
  if(!elem(`.${yanked}`, parent)) {
    const icon = parent.getElementsByTagName('img')[0];
    const icon = parent.getElementsByTagName('svg')[0];
    const original_src = icon.src;
    icon.src = '{{ absURL "icons/check.svg" }}';
    parent.appendChild(copy_txt);
@@ -269,7 +245,6 @@
  updateDate();
  customizeSidebar();
  markExternalLinks();
  createDeepLinks();
  copyHeadingLink();
  makeTablesResponsive();
  backToTop();
assets/sass/_utils.sass
@@ -85,16 +85,17 @@
  display: inline-flex
  align-items: center
  width: 2.5rem
  margin: 0 0.25rem
  margin: 0 0.25rem 0 0
  padding: 0 0.25rem
  opacity: 0
  transform: translate(-0.33rem, 0.33rem)
  transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
  svg, img
    width: 1.5rem
    height: 1.5rem
    fill: var(--theme)
  &_owner:hover &
    opacity: 0.9
    opacity: 1
.copy
  cursor: pointer
exampleSite/netlify.toml
@@ -1,7 +1,7 @@
[build]
publish = "public"
#command = "hugo --gc --minify"
command = "tinacms build && hugo --gc --minify --baseURL https://composedocs.netlify.app/"
command = "hugo --gc --minify --baseURL https://composedocs.netlify.app/"
[context.production.environment]
HUGO_VERSION = "0.128.2"
layouts/_default/_markup/render-heading.html
New file
@@ -0,0 +1,8 @@
<h{{ .Level }} id="{{ .Anchor }}" class=link_owner>
  {{ .Text | safeHTML }}
  <a href="#{{ .Anchor }}" class="link icon">
    <svg>
      <use xlink:href="#anchor-link"></use>
    </svg>
  </a>
</h{{ .Level }}>
layouts/partials/sprites.html
@@ -36,6 +36,12 @@
    <path d="M11.429 24h4.57C15.999 15.179 8.821 8.001 0 8v4.572c6.302.001 11.429 5.126 11.429 11.428z"></path>
    <path d="M24 24C24 10.766 13.234 0 0 0v4.571c10.714 0 19.43 8.714 19.43 19.429z"></path>
  </symbol>
  <symbol enable-background="new 0 0 64 64" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" id="anchor-link">
    <g fill="var(--theme)">
      <path d="m19 40c1.104 0 2-.896 2-2s-.896-2-2-2c-3.86 0-7-3.14-7-7 0-1.873.728-3.628 2.059-4.95 1.313-1.322 3.068-2.05 4.941-2.05h10c3.86 0 7 3.14 7 7 0 .258-.015.509-.048.78-.174 1.574-.885 3.052-2.017 4.176-.532.54-1.137.974-1.797 1.289-.997.476-1.419 1.669-.944 2.666.476.996 1.669 1.419 2.667.943 1.08-.516 2.063-1.219 2.908-2.075 1.763-1.75 2.885-4.08 3.156-6.539.051-.413.075-.819.075-1.24 0-6.065-4.935-11-11-11h-10c-2.947 0-5.709 1.147-7.77 3.221-2.083 2.07-3.23 4.832-3.23 7.779 0 6.065 4.935 11 11 11z"></path>
      <path d="m45 28c-1.104 0-2 .896-2 2s.896 2 2 2c3.86 0 7 3.141 7 7 0 1.873-.728 3.628-2.059 4.95-1.313 1.322-3.068 2.05-4.941 2.05h-10c-3.86 0-7-3.141-7-7 0-.258.015-.509.048-.78.174-1.574.885-3.052 2.017-4.176.532-.54 1.136-.974 1.796-1.289.997-.476 1.419-1.67.944-2.667s-1.669-1.418-2.667-.944c-1.081.516-2.064 1.22-2.908 2.076-1.763 1.75-2.885 4.08-3.156 6.538-.05.415-.074.821-.074 1.242 0 6.065 4.935 11 11 11h10c2.946 0 5.709-1.147 7.77-3.221 2.083-2.07 3.23-4.833 3.23-7.779 0-6.065-4.935-11-11-11z"></path>
    </g>
  </symbol>
  <symbol viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" id="linkedin">
    <path d="M437 0H75C33.648 0 0 33.648 0 75v362c0 41.352 33.648 75 75 75h362c41.352 0 75-33.648 75-75V75c0-41.352-33.648-75-75-75zM181 406h-60V196h60zm0-240h-60v-60h60zm210 240h-60V286c0-16.54-13.46-30-30-30s-30 13.46-30 30v120h-60V196h60v11.309C286.719 202.422 296.93 196 316 196c40.691.043 75 36.547 75 79.688zm0 0"></path>
  </symbol>