[Feature Request] Get random Quote

[emms007]

Thanks a lot for this plugin. I store many "quote" under the #quote tag. Would it be possible to display in the journal banner a random quote? I already use other plugins for that through the journal entries (https://github.com/QWxleA/logseq-interstitial-heading-plugin => /quote), but having it mashed-up automatically in the beautiful header would be even more beautiful.

[yoyurec]

are you using other quote formats? like > lorem ipsum or

#+BEGIN_QUOTE
Lorem ipsum
#+END_QUOTE

[emms007]

My quotes are for most of them stored in very simple format :

• this is a #Quote

[yoyurec]

have no idea how to fit it.... all area filled with widgets ) or you not using them?

[emms007]

I am not using the agenda - somehow it was not in the default set and I don't really need it neither. I can easily project a quote one a full screen view or half-full-screen, see below.

Do you have something over there in the far right?

[yoyurec]

somehow it was not in the default set

you need to install & configure (1 line) "Block calendar" - it's collab )) have you checked README?

Do you have something over there in the far right?

no. but then it's the responsibility of the user to not have 6 lines of quotes )

[emms007]

I have good result to limit the number of lines with an elipse, while keeping a font resizing that changes if the window is full or semi.

Semi sized window:

Full screen window (text is fit, and further text is displayed)

<div id="banner-widgets-quote">
<div id="banner-widgets-quote-child">
<p>This is the true joy in life:
being used for a purpose recognized by yourself as a mighty one;
being a force of nature instead of a feverish, selfish little clod of ailments and grievances complaining that the world will not devote itself to making you happy.
I am of the opinion that my life belongs to the whole community, and as long as I live it is my privilege to do for it whatever I can. I want to be thoroughly used up when I die, for the harder I work the more I live.
I rejoice in life for its own sake. Life is no "brief candle" for me. It is a sort of splendid torch which I have got hold of for the moment, and I want to make it burn as brightly as possible before handing it on to future generations.</p>
</div>
</div>

div#banner-widgets-quote {
    position: absolute;
    top: 40%;
    right: 20px;
    background-color: rgba(var(--widgetsBgColor), 0.3);
    backdrop-filter: blur(1px);
    filter: saturate(0.8) drop-shadow(0px 1px 0px black);
    width: 30vw;
    padding: 10px;
}

div#banner-widgets-quote-child {
     text-shadow: 0px 0px 3px white, 0px 0px 3px white, 0px 0px 3px white, 0px 0px 3px white;
    font-size: calc(0.45em + 1vmin);
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    font-weight: 500;
    margin: 0px;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

[yoyurec]

line clamping good idea, but as this is a plugin - I can use JS to set font size, according to quote length!

[yoyurec]

Try new release v3

[emms007]

Result is awesome on your screen shots 💯 Love it. !

I can't quite reproduce the same yet, it seems I get some bugs:

1. bgcolor is weirdly defined, I am not sure where this is set it seems it it managed by the code, not configuration?

2. Somehow the weather lost its form from the former release

3. When clicking on journal to get others quotes, sometimes it retrieve a block that is not tagged with #Quote - at all .. I am not sure see to get why. Can you reproduce this? The trigger keyword, it literally nowhere in the .md file where it is extracted from.

4. In the cleansing of the quote, it should probably remove properties. I assume one would not really put properties in quote, but if you make a reference to it, it gets an ID property:

[yoyurec]

1. • a. what theme are you using?
   • b. is it latest?
   • c. do you have custom CSS with rewriting primary text / primary bg colors?

[yoyurec]

2. weather now is horizontal

[yoyurec]

3. ... in addition plugin sesrch for > I'm Logseq standard quote too texts (begins with >)

[yoyurec]

4. will check. don't use references, so wasn't able to see bug

[emms007]

1. Background color

   • I use theme logseq-bonofix-theme. But I see "widgetsBgColor" only mentionned in the banner plugin. Do you expect this to be set by the theme?
   • Yes I use the latest
   • I tried to set a custom value to widgetsBgColor but as it it set at 255,NA,NA somewhere I can't override it (unless I add !important)

2. Weather

   • Ok I just figured out it is now horizontal. In my case it is not fully aligned on the left side (due to left: -162px). Maybe you can replicate with https://indify.co/widgets/live/weather/GmOMONZ9ld2zMLG8wP4a

3.Quote are #Tag + ">": could we have this as an option? ">" is a style I use, but I would say I don't use this for "high quality quote" I want to see on the banner :)

[yoyurec]

1. Background color it's generated (to have possibility add opacity) by JS from default Logseq vars. if they are not in HEX - you'll have a problem. ask your developer theme to add Banners support... or set them by yourself (--ls-primary-text-color & --ls-primary-background-color)
2. weather SHOULD NOT be aligned on left:0 - it became too long. nobody needs city name )) have you changed width/height? DO NOT DO this. it's pixel perfect adjusted "out of the box" with plugin CSS
3. em... makes sense to delete it from search results and leave only tag (BTW, it's hardcoded)

[yoyurec]

3. release updated

[emms007]

1. I have color set in my theme, but I see that the JS conversion won't work because "--ls-primary-background-color: #fff" is not properly parsed by hexToRGB. Not sure if you want to address it or we assume my initial value isn't per the strict standards.

2. I get your point about hiding the city. In my case the value won't work with left -167. I'll adapt manually with. Could we that our city names are differents ? I did not play with the sizes from out of the box settings.

   #banner-widgets-weather {
   left: -127px;
   -webkit-transform-origin-x: 0;
   }

[emms007]

Edit: in dark theme, my background color is rgb(47, 52, 55) from the theme. hexToRBG does not like it neither.

[emms007]

the below works fine from https://stackoverflow.com/a/13714351/3329985

var canvas = document.createElement("canvas");
var ctx = this.canvas.getContext('2d');

ctx.fillStyle = "rgb(pass,some,value)";
var temp =  ctx.fillStyle;
ctx.fillStyle = "rgb(47, 52, 55)"

=> ctx.fillStyle=#2f3437

var canvas = document.createElement("canvas");
var ctx = this.canvas.getContext('2d');

ctx.fillStyle = "rgb(pass,some,value)";
var temp =  ctx.fillStyle;
ctx.fillStyle = "#fff"

=> ctx.fillStyle=#ffffff

Then you can apply the Hex2RGB safe

[yoyurec]

There are TONS of color spaces variations (don't forget about Alpha chanel)... I can't fight ( = detect+convert) all of them - https://css-tricks.com/converting-color-spaces-in-javascript/ Default Logseq + few top themes works fine. Other themes devs (or users via PR) can change without pain just 2 colors, IMHO. it's not changing the value, just format.

As for me - i will add ugly, non transparent fallback of course, thx for issue report!

[emms007]

Yes there are plenty, but the lead given in https://github.com/yoyurec/logseq-banners-plugin/issues/41#issuecomment-1205130647 will cover whatever source to a valid Hex you can parse, isn't it? Then you do not need a fallback, you'd just need to have the conversion done by the "canvas" element to be safe.

[yoyurec]

will check tnx

meanwhile - update to latest:

• 3-digit hex parsing added (back 😊, it was sometime ago...) - Bonofix theme works
• weather width settings added - adjust it so your city is hidden (= 690px)

[emms007]

All is good ! So happy to see my quote-all-of-fame with me all the time! So inspiring.

The WIDTH aspect of the weather was good but I noticed that it won't help so easily as the object in the weather iframe position are changing as the weather condition are changing "sun=3 letters, thunderstrom=way more text, and blocks are at very different spaces"

I eventually went with the below override, and reducing the scale further to have more space. Width:0 keeps it as condensed as it can. You'll see over the next days on your side too, as your local weather may change :). I am not sure it is fully required but I am happy with the result.

#banner-widgets-weather {
    left: 0;
    width: 0px
    transform: scale(0.7) translate(-55%);
}

Thanks a lot for the quotes!

[yoyurec]

maybe need more negative feedbacks (have no idea of weather % usage) to move it back to vertical variation ))) but i so want to fit it compact with calendar 😒

[yoyurec]

as injecting CSS into iframe is forbidden due to CORS (in opposite as i did for Tabs plugin) - need to try proxy. Fetch widget and parse iframe, rework source and throw resulted HTML....

[yoyurec]

the below works fine from https://stackoverflow.com/a/13714351/3329985

nice solution, BTW. found variation with RGBA, so no need HEXtoRGB();

  const canvas = document.createElement('canvas');
  canvas.height = 1;
  canvas.width = 1;
  const context = canvas.getContext('2d');
  context!.fillStyle = color;
  context!.fillRect(0, 0, 1, 1);
  const rgbaArray = context!.getImageData(0, 0, 1, 1).data;