Trials/5_SVG.qmd

<script>
// get acceess to the right sidebar
const quartoMarginSidebar = document.getElementById("quarto-margin-sidebar");

// generate a place where the lotti animation shall be placed
const player = document.querySelector('dotlottie-player');

// take it from the previous position an move it to the new posistion --> removed prom previous DOM pos
quartoMarginSidebar.insertBefore(player, quartoMarginSidebar.firstChild);


/* --------------------------- get Feedback <p><a> -------------------------- */
// Create a new <p> element
const pElement = document.createElement('p');

// Create a new <a> element
const aElement = document.createElement('a');

// Set the href attribute of the <a> element
aElement.href = 'https://discord.gg/EEsXp39DaA';
aElement.id = 'feedback_A';
pElement.id = 'feedback_P';

// Set the text content of the <a> element
aElement.textContent = 'Feedback/Contact';

// Create a new SVG element
const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElement.setAttribute('viewBox', '0 0 512 512'); // set the viewBox attribute to define the SVG size
svgElement.setAttribute('class', 'ionicon'); // set the class attribute to apply any CSS styles
svgElement.setAttribute('width', '2rem'); // set the width attribute to scale the SVG
svgElement.setAttribute('height', '2rem'); // set the height attribute to scale the SVG

// Set the content of the SVG element to the contents of the SVG file
svgElement.innerHTML = `<!-- see https://ionic.io/ionicons/
see <ion-icon name="chatbox-ellipses-outline"></ion-icon> -->
<path d="M408 64H104a56.16 56.16 0 00-56 56v192a56.16 56.16 0 0056 56h40v80l93.72-78.14a8 8 0 015.13-1.86H408a56.16 56.16 0 0056-56V120a56.16 56.16 0 00-56-56z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" />
<circle cx="160" cy="216" r="32" />
<circle cx="256" cy="216" r="32" />
<circle cx="352" cy="216" r="32" />`;


// Append the SVG element to the <a> element
aElement.appendChild(svgElement);

// Append the <a> element to the <p> element
pElement.appendChild(aElement);
quartoMarginSidebar.insertBefore(pElement, player.nextSibling);




</script>