The First On-Chain and Open-Source Blogging platform.
discord server

Dark mode, Search, Useful post components & More - xLog Weekly Summary #14

Fresh out the oven 🔥#

This has been the busiest week ever for our community developers, who have been crazily submitting pull requests to xLog.

Dark mode#



Dark mode is an incredible project, a "dark miracle" brought to life by the collaborative efforts of our talented community developers.

Dark mode is automatically switched on based on your system preferences, but there's also a manual switch button at the bottom of the page.

We'd like to remind you to turn on the lights while using electronic devices at night to protect your eyes.

Credit @innei-4525 @suemor @daidr @365cent

Code changes: #312 #331 #332 #333 #335 #340 #341 #353

Mention Syntax#


To help bloggers easily mention each other and foster a greater sense of community within xLog, we've introduced a simple mention syntax. Just use the '@' symbol followed by the handle (which is also the subdomain) of the user you want to mention. We'll soon add mention notifications to the notification system.

Code changes: 9e2db05

APlayer component#

Goose house

<audio src="ipfs://bafybeihjiyr5r6zawpartvqbaqkfbeyyehvz5sk6cvpd7g6ir7cz73yz5q" name="光るなら" artist="Goose house" cover="ipfs://bafkreia4ytkhiqbdxt7kh2x5brhihuuql3vcr6nbrqco2hacgkrahfj4vq" lrc="[00:15.440]雨上がりの虹も (雨过天晴的彩虹)" loop><audio>

APlayer is a highly acclaimed web audio player, and we're thrilled that our community developers have integrated it into xLog. Now, simply drag and drop audio files directly into the editor, which will read and automatically fill in the file's cover, song name, artist, and other information before uploading it to IPFS.

Supported properties:

  • src
  • name
  • artist
  • cover
  • lrc
  • muted
  • autoplay
  • loop

Credit @steveyu @doma-6565

Code changes: #349 0886273

Mermaid component#

    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
Mermaid Loading...

Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. Our community developers have integrated this fantastic tool into xLog.

Diagram Syntax: https://mermaid.js.org/

Credit @innei-4525

Code changes: #309



We've added search functionality across the entire platform and within individual sites, making it easy for readers to quickly find content that interests them. Access the search feature in the top-right corner of the activity page and on each site.

Code changes: ccf4bdc 46fac4d

Mobile app#


We are currently developing a mobile app using React Native, which is, of course, entirely open-source. You can find its GitHub repository here: https://github.com/Crossbell-Box/xLog-mobile

The app is still in its early stages of development, so there isn't much to share at the moment. However, rest assured that it'll be available for download soon. Stay tuned to my GitHub for updates!

Additional Updates#

  • Image zoom, credit @innei-4525 #355 a6519df
  • Share to Twitter menu item, credit @innei-4525 #342
  • Three more editor shortcuts, credit @daidr #338
  • Multiple performance optimizations, credit @daidr #358
  • Optimize print mode, credit @innei-4525 #354
  • Add site link to connect button dropdown d0493b5
  • Fix Firefox editor cursor issue, credit @daidr #348

👏 Give a warm round of applause to our community developers, xLog is the result of everyone's joint efforts.

Stay Connected with xLog#

If you have any suggestions or expectations, or just want to have a casual conversation, feel free to join our community or leave a comment below. Cheers! 🍻

Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.