Error when clicking on the homepage logo

Hi.
I will show you with images.
I was getting this error before the last update.
After installing the update I keep getting this error.

(Güncel - Current)

And I removed all the code from the site and tried again, I still get the error.

Translate

Mistake
Something went wrong.

Does this also happen in safe mode? Could you also check the browser console for errors when you click it, as well as looking in /logs to see if there’s any more detail.

1 Like

Safe Mode is active and there is no error visible on the logs page. Maybe I don’t understand.

Last logs.

I tried turning off safe mode. Still I’m getting the same error.

By the way, when I click on it for the second time, the error disappears and the home page appears.

I can see some errors when the theme components are loaded and the plugins are unloaded.

You might take a look at your recent customizations.

1 Like

Thank you for your interest.

Last plugin : GIF

All plugins

Do you have any JS customizations outside the remote components?

I would try to disable all the components and enable them one by one until the error happens.

<script>
function moveTagsToTitle() {
    const mainLinks = document.querySelectorAll('.main-link');
    mainLinks.forEach(mainLink => {
        const discourseTags = mainLink.querySelector('.discourse-tags');
        const titleElement = mainLink.querySelector('.title');

        if (discourseTags && titleElement) {
            const tags = discourseTags.querySelectorAll('.discourse-tag');

            tags.forEach(tag => {
                const tagSpan = document.createElement('span');
                tagSpan.className = 'discourse-tag box';
                tagSpan.textContent = tag.textContent;
                tagSpan.style.fontSize = 'var(--font-down-2)';
                tagSpan.style.borderRadius = '10px';
                tagSpan.style.border = '1px solid #444460';
                tagSpan.style.backgroundColor = '#1f1f33';
                tagSpan.style.margin = '2px';
                tagSpan.style.display = 'inline-block';
                tagSpan.style.overflow = 'hidden';
                tagSpan.style.whiteSpace = 'nowrap';
                tagSpan.style.textOverflow = 'ellipsis';
                tagSpan.style.verticalAlign = 'middle';
                tagSpan.style.marginRight = '5px';
                tagSpan.style.marginLeft = '-6px';
                titleElement.insertBefore(tagSpan, titleElement.firstChild);
            });

            if (discourseTags.parentNode) {
                discourseTags.parentNode.removeChild(discourseTags);
            }
        }
    });

    const topicHeaderExtras = document.querySelectorAll('.topic-header-extra');

    topicHeaderExtras.forEach(topicHeaderExtra => {
        const discourseTags = topicHeaderExtra.querySelector('.discourse-tags');
        const tags = discourseTags.querySelectorAll('.discourse-tag');

        tags.forEach(tag => {
            tag.className = 'discourse-tag box';

            tag.style.borderRadius = '10px';
            tag.style.border = '1px solid #444460';
            tag.style.backgroundColor = '#1f1f33';
            tag.style.margin = '1px';
            tag.style.padding = '2px 8px';
            tag.style.display = 'inline-block';
            tag.style.overflow = 'hidden';
            tag.style.whiteSpace = 'nowrap';
            tag.style.textOverflow = 'ellipsis';
            tag.style.verticalAlign = 'middle';
            tag.style.marginRight = '5px';
            tag.style.marginBottom = '5px';
        });
    });
}

window.addEventListener('load', moveTagsToTitle);
const observer = new MutationObserver(moveTagsToTitle);
const targetNode = document.body;
const observerOptions = {
    childList: true,
    subtree: true
};
observer.observe(targetNode, observerOptions);
</script>

These codes cause this error.
I don’t know how can I fix.
I need these codes :frowning:

You’re moving elements containing Emberjs components (here is the tags list), which I think likely disrupts the component’s lifecycle.

Your best bet here is to use the API.

In your case, either:

  • Using plugin outlets as I showed in your last topic. However since it doesn’t exist for the latest topics on the category page, you will need to request it.

  • Overwrite the template. This is not a good solution for compatibility reasons, but it can be an immediate alternative.

1 Like

I found these codes.

This isn’t what I wanted, but it will do for now.

 var pElement = document.getElementById('site-logo').parentNode;
                    //var pElement = document.createElement('a');
                    //pElement.innerHTML = aElement.innerHTML;
                    //aElement.replaceWith(pElement);
                    pElement.href = '#';
                    pElement.style.cursor = 'pointer'; 
                    pElement.onclick = function() {
                      window.location.href = '/';
                    };
                    //document.getElementById('site-logo').parentNode.href = '/';

If anyone can help, I’m waiting. Thank you :pray:

I would highly recommend you to not going that path. It’s like applying a band-aid to a side effect instead of fixing the root cause of the issue. You will create more problems with it (like your latest topic because of the above code)

You can make your JS a little more discourse friendly (the best way is still using plugin outlet when you can).
Here an example. It uses the API on page change, runs code on specific route, and copy the HTML before the link (so you can click on the tag):

JS
<script type="text/discourse-plugin" version="0.8">
  const { next } = require("@ember/runloop");
  
  function moveTags() {
    const mainLinks = document.querySelectorAll(".main-link:not(.tags-moved)");
    
    mainLinks.forEach((mainLink) => {
      const discourseTags = mainLink.querySelector(".discourse-tags");
      const titleElement = mainLink.querySelector("a[data-topic-id]");

      if (discourseTags && titleElement) {
        titleElement.insertAdjacentHTML("beforebegin", discourseTags.outerHTML);
        mainLink.classList.add('tags-moved');
      }
    });
  }

  api.registerModelTransformer("topic", async (topics) => {
    next(() => {
      moveTags();
    })
  });

  api.onPageChange((url) => {
    if (url.startsWith("/categories")) {
      moveTags();
    }
  });
</script>
CSS
.top-row, 
.link-top-line {
    .discourse-tag {
        font-size: var(--font-down-2) !important;
        padding: 2px 8px;
        margin: 2px 5px 2px -6px;
        border-radius: 10px;
        border: 1px solid #444460;
        background-color: #1f1f33;
    }
    
    .discourse-tag::after {
        content: '' !important;
        margin-left: 0 !important;
    }
}

.bottom-row, 
.link-bottom-line {
    .discourse-tags {
        display: none;
    }
}
2 Likes

Hi @Arkshine
Changing the logo link did not help, I deleted these codes.

But there is no other way. I need to position the tags like this.

If I pay someone, can they write decent codes that work?

And where do you find these codes? (JS) From GitHub - discourse/discourse: A platform for community discussion. Free, open, simple. ?

You can create a topic in marketplace if you need/want some paid assistance. :+1:

1 Like

I gave the code for that in #11.

Hi again @Arkshine
I added the codes you gave after deleting these codes, but they are not working. Am I making a mistake?

It is working for me:

image

Make sure you keep <script type="text/discourse-plugin" version="0.8">. , it won’t work otherwise.

Yes its working!
There is only one small mistake.
When I click on the logo, the number of tags increases.

I’ve updated my code above.

2 Likes

I don’t know how to thank you. Thank you very much ! :pray: :heart:

@Arkshine Sorry for resurrecting the topic again.
Thank you again. I found an error in the codes you gave.
Can you help me please ?
I tried to correct the codes but I couldn’t.

In the Latest section, only the tag appears in the most recently opened tagged topic.


And when you enter a category, the tags do not appear.

@ogulcan1787 I’ve updated the code above.

1 Like