Share Ideas

[sujaykundu777]

Have any feature request, you can request that here

[Yohn]

Hey whats up! Been loving the blog y'all got set up! One suggestion I have, if its possible is to use -- https://github.com/giscus/giscus for he comments instead of the paid services offered. It connects the comments to our discussions within the repo.

Heres the example- https://giscus.app/

[sujaykundu777]

Pretty Cool. Will check it out :) @Yohn

[automationxpert]

Hey Sujay, just tried to setup a demo site using devlopr-jekyll. Its really nice to see the end result. Regarding ideas, i would like to say below:

1. The code snippets used in the markdown files are getting detected but would love to show what code it is such as bash, javascript, python, ,php, powershell etc just as mentioned in markdown.

2. Also copy to clipboard option in the top right corner for each code snippets (where the button is changed upon click showing as copied with a color change for 4 seconds).

Note: i tried to implement the 2nd point but the copy button always ends at the left side bottom inspite of using the css. Please find the code i tried below:

var codeBlocks = document.querySelectorAll('pre.highlight');


codeBlocks.forEach(function (codeBlock) {
  var  Button = document.createElement('button');
   Button.className = ' ';
   Button.type = 'button';
   Button.ariaLabel = 'Copy code to clipboard';
   Button.innerText = 'Copy';


  codeBlock.append( Button);


   Button.addEventListener('click', function () {
    var code = codeBlock.querySelector('code').innerText.trim();
    window.navigator.clipboard.writeText(code);


     Button.innerText = 'Copied';
    var fourSeconds = 4000;


    setTimeout(function () {
       Button.innerText = 'Copy';
    }, fourSeconds);
  });
});

Placed the below in the _includes/head.html

<script src="/assets/js/codeblock.js"></script>

pre.highlight {
    padding: 8px 12px;
    position: relative;
  
    // override skeleton styles
    > code {
      border: 0;
      overflow-x: auto;
      padding-right: 0;
      padding-left: 0;
    }
  
    &.highlight {
      border-left: 15px solid #35383c;
      color: #c1c2c3;
      overflow: auto;
      white-space: pre;
      word-wrap: normal;
  
      &,
      code {
        background-color: #222;
        font-size: 14px;
      }
    }
  
    //   code to clipboard
    .  {
      color: #4AF626;
      position: absolute;
      right: 1.2rem;
      top: 1.2rem;
      opacity: 0;
  
      &:active,
      &:focus,
      &:hover {
        background: rgba(0, 0, 0, 0.7);
        opacity: 1;
      }
    }
  
    &:active . ,
    &:focus . ,
    &:hover .  {
      background: rgba(0, 0, 0, 0.7);
      opacity: 1;
    }
  } 

[sujaykundu777]

Will check and let you know 👍