search

alangrainger / share-note

Instantly share an Obsidian note with the full theme exactly like you see in your vault. Data is shared encrypted by default, and only you and the person you send it to have the key.
MIT License
276 stars 14 forks source link

feat: add a specific class for the body content on exported page #59

Closed Mara-Li closed 8 months ago

Mara-Li commented 9 months ago

See #58

It adds manually the class share-note-plugin in the body of the exported note. It allows to create snippets only for share-note, with this class prepended. Note can be stylized only in the export.

Mara-Li commented 8 months ago

Up, it is possible to merge ?

alangrainger commented 8 months ago

Hi @Lisandra-dev , so sorry, I never saw the original PR notification. That is such a good idea!! On mobile right now but will get it merged and released later today.

alangrainger commented 8 months ago

This is now live in 0.8.6.

Mara-Li commented 8 months ago

Hi! In your version, I noticed that you don't remove the mobile specific class. Without it, if we share a file from phone but checking it on computer will be broken. At last it's better to use @media to stylize the shared page.

I didn't test it, but is a clone better for creating the element style? In my older test, the share note class was added, breaking my obsidian.

alangrainger commented 8 months ago

The mobile classes are added/removed responsively on the loaded page:

https://share.note.sx/file/notesx/assets/app.js :

  /*
   * Responsive mobile classes
   */
  function toggleMobileClasses () {
    const mobileClasses = ['is-mobile', 'is-phone'];
    if (window.innerWidth <= 768) {
      // Is mobile
      document.body.classList.add(...mobileClasses);
    } else {
      document.body.classList.remove(...mobileClasses);
    }
  }

  toggleMobileClasses();
  window.addEventListener('resize', toggleMobileClasses);

At last it's better to use @media to stylize the shared page.

Can you explain further what you mean here? I use the classes from Obsidian, so if they have @media queries it should reflect also in the shared notes.

Mara-Li commented 8 months ago

I mean. If you share a page from mobile obsidian but check the page in a desktop /big screen, the page will appear as it's mobile.

It's not a behavior user want, as the idea is to share a page that will be see on mobile and desktop in the same time.

alangrainger commented 8 months ago

Sharing a page from mobile and having it work correctly on desktop is already how this plugin works.

Here's a note I shared just now from mobile: https://share.note.sx/ajx71mdp#aenx18LvFsZV4hFESda7aR6jxOe3g50q1jmLWx3qEAg

If you view that on desktop you will not find a body.is-mobile class. If you resize the window you will see the classes change responsively.

Mara-Li commented 8 months ago

Okay, I finally understand! That's perfect then :D