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

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

@xlog

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

Copy


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

Copy
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```\

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

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

Search

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.