DEV Community: Alex Ma

Created a Markdown Desktop App with Tauri

Alex Ma — Sat, 26 Aug 2023 08:36:33 +0000

Introduction

Hello everyone.

Last year, I developed a WeChat formatting editor called MDX Editor. It allows customization of components, styles, generates QR codes, provides code diff highlighting, and supports exporting to Markdown and PDF, among other functionalities. However, as a WeChat formatting editor, its audience is relatively limited and not suitable for everyone. Therefore, based on this editor, I developed the MDX Editor desktop version, which supports Mac, Windows, and Linux. It is lightweight, with the entire application being only 7MB in size. Now, the MDX Editor desktop version has become my primary tool for writing. If you're interested in it, you can find it at the end of the document.

Demo screenshot


Subtle Green Card	Early Summer Style

Resume Template	Exquisite Code Diff Highlights

Generate Captivating QR Codes	Travel Itinerary

Technology Stack

For developing the MDX Editor desktop app, I utilized the following core technology stack:

React (Next.js)
Tauri — A framework for building cross-platform desktop applications
Tailwind CSS — An atomic class-based styling framework that supports dark mode
Ant Design v5 — Utilized the "Tree" component for managing the document tree

Features and Implementation

1. MDX Custom Components

MDX combines the advantages of Markdown and JSX, allowing you to directly use React components in Markdown documents to build complex interactive content. If you're familiar with React, you can customize your components in the "Config" tab. If you're not a programmer, you can also create content based on existing templates. For example, the "Gallery" component in the template is essentially a "flex" layout.

Code

function Gallery({ children }) {
    return <div className="flex gallery">{children}</div>;
}

2. Dark Mode

Dark mode has become an essential part of note-taking software. MDX Editor implements dark mode using Tailwind CSS.

3. Multiple Themes

The editor comes with 10+ document and code themes. You can switch between them by clicking the settings button in the upper right corner.

4. Local File Management

The desktop app also supports local file management. You can choose a directory or drag your document workspace into the editor to manage documents in real time.

Before implementing this feature, I was concerned about not being familiar with Rust and not being able to complete it. However, after becoming acquainted with the Tauri documentation, I found it to be quite simple. Tauri provides file operation APIs, eliminating the need to write Rust code. Instead, we can achieve file management by calling Tauri APIs.

import { readTextFile, BaseDirectory } from '@tauri-apps/api/fs';
// Read the text file at the path `$APPCONFIG/app.conf`
const contents = await readTextFile('app.conf', { dir: BaseDirectory.AppConfig });

The document tree uses Ant Design's Tree component, with custom styling to maintain consistency with the overall theme, greatly reducing the coding workload.

5. Document Formatting

During the document writing process, formatting can often interrupt your creative flow. Although Markdown has done away with formatting operations, sometimes you still need to pay attention to details like spaces between Chinese and English, and blank lines between paragraphs. MDX Editor uses prettier to format documents. Just press command+s to automatically format the document.

Conclusion

If you're interested in this editor, you can download the desktop version from Github to try it out. If you're curious about the implementation process, you can also directly view the source code. If you have any suggestions, feel free to raise issues on the repository.

Text to speech, It's so easy !

Alex Ma — Mon, 07 Mar 2022 05:58:52 +0000

original article

Hello, everyone, I am Maik. In the past two days, I have been studying the function of text-to-speech. Sometimes I am worried that my speech is not standard. For example, if I want to record a video, improvisation may get stuck. At this time, we can prepare the text first and then use artificial intelligence to generate audio. Let's share my research results below!

Text To Speech

I use the recently popular WebRTC_API to record

Use

chrome install tampermonkey

install scripts

Step 3: Enter the text you want, click play first, and then click start to record, click stop recording, and then you can download the audio file.

Summary

1、Currently, due navigator.mediaDevices.getDisplayMedia() Can't directly record the sound of the computer，The computer must put the sound outside and then record, so the recording needs to find a quiet environment.

2、Sometimes the network speed is not good and may get stuck. You need to find a better network，

The above is the whole content of this article. I hope this article will be helpful to everyone. You can also refer to my previous articles or exchange your ideas and experiences in the comment area. Welcome to explore the front end together.

[1]Alibaba Cloud speech synthesis: https://ai.aliyun.com/nls/tts

[2]Speech synthesis of Tencent Cloud: https://cloud.tencent.com/product/tts

[3]Microsoft's TTS: https://azure.microsoft.com/zh-cn/services/cognitive-services/text-to-speech/#overview

[4]Microsoft's TTS documentation: https://docs.microsoft.com/zh-cn/azure/cognitive-services/speech-service/speech-synthesis-markup?tabs=csharp#specify-paragraphs-and-sentences

[5]My script address: https://greasyfork.org/zh-CN/scripts/440926-微软tts-录音插件

Using the PostCSS plugin Let your WebApp support dark mode

Alex Ma — Sat, 18 Sep 2021 05:50:58 +0000

Recently my company needed to add multiple skin functions to multiple WebApps (about 20 +) . The default was white skin, so we started with dark mode to gradually achieve multiple skin functions. This article is a record of the implementation ideas.

Solution for skin-changing

css variables

css variables is the Web standard that implements support for dark patterns,

the following code queries through the CSS Media, the simplest implementation.

:root {
    color-scheme: light dark;
    background: white;
    color: black;
}

@media (prefers-color-scheme: dark) {
    :root {
        background: black;
        color: white;
    }
}

Use CSS variables if you have a lot of colors

:root {
    color-scheme: light dark;
    --nav-bg-color: #F7F7F7;
    --content-bg-color: #FFFFFF;
    --font-color: rgba(0,0,0,.9);
}

@media (prefers-color-scheme: dark) {
    :root {
        --nav-bg-color: #2F2F2F;
        --content-bg-color: #2C2C2C;
        --font-color: rgba(255, 255, 255, .8);
    }
}

:root {
    color: var(--font-color)
}

.header {
    background-color: var(--nav-bg-color);
}

.content {
    background-color: var(--content-bg-color);
}

Advantages: the least amount of code, easy to implement;

The downside: There’s a Cross-browser, which is supported by Edge16 + ; older projects are implemented, and CSS needs to be refactored, so it’s not going to work for us, and if it’s a new WebApp, I wouldn’t hesitate to use it.

Online compilation use `less.js`

The most typical example of this scenario is the https://antdtheme.com/ , via the less modifyVars method

Enables run-time changes to fewer variables. When called with a new value, fewer files are recompiled without reloading.

<script src="less.js"></script>
<script>
less.modifyVars({ '@text-color': '#fff', '@bg-color': '#000' });
</script>

If there are too many color variables to change, or too many style files, it will cause Cottonwood to switch.

Build multiple CSS

Of course, you can also manually build 2 CSS styles

var less = require("less");
var fs = require("fs");

fs.readFile("./index.less", "utf-8", (err, str) => {
  less.render(
    str,
    {
      paths: [".", "./components"], //  the search path for the@import directive
      compress: true, 
      modifyVars: {
        "@text-color": "#fff",
        "@bg-color": "#000",
      },
    },
    function (e, output) {
      console.log(output.css);
    }
  );
});

So you can skin it by dynamically inserting CSS

function changeTheme(theme) {
    const styleCss = document.querySelector("#styleCss");
    if (styleCss) {
        styleCss.href = `/assets/css/${theme}.css`;
    } else {
        const head = document.getElementsByTagName("head")[0];
        const link = document.createElement("link");
        link.id = "styleCss";
        link.type = "text/css";
        link.rel = "stylesheet";
        link.dataset.type = "theme";
        link.href = `/assets/css/${theme}.css`;
        head.appendChild(link);   
    }
    localStorage.setItem("theme", theme);
}

One problem with this approach is that it causes the entire page to reorder when you click to switch, so we need to separate out the color-only style files. From this point of view, we are exposed to PostCSS.

PostCSS

The PostCSS core contains a parser that generates a CSS AST (Abstract Syntax Tree), which is a representation of a node tree that parses strings of CSS. When we change something inside the CSS Abstract Syntax Tree, PostCSS will still represent it as a root node but stringify the syntax tree back into a CSS string.

The core process is ** Parse->Transform--> Generate ** Is it like Babel ?

Everyone knows that https://astexplorer.net/ is a site that can be used to write Babel plugins, but have you used any other parsers? Select CSS and PostCSS here so you can parse your CSS into your CSS AST (abstract syntax tree) .

Purpose

Currently I have one less style and two color variables, I need to generate the following style:

So I can add and remove the ‘dark’ class in the HTML root node to do this.

Some of you may be asking, Suddenly, why is it Less? Can PostCSS parse Less? The answer is no.

At the moment, I'am sure your webapp is based on Webpack.

module: {
    rules:[
        //...
        {
           test: /\.less$/i,
           use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
        },
        //...
    ]
}

Webpacks loader's order of execution is from right to left, Less pass by less-loader，It becomes CSS

Start writing a PostCSS plugin

We can use postcss-plugin-boilerplate , This scaffolding to create a postcss-plugin ，It also has jest unit tests configured。You can create one postcss-plugin project with a few simple commands。

Of course we can just create a JS file in the project root directory

// test-plugin.js
var postcss = require("postcss");

module.exports = postcss.plugin("pluginname", function (opts) {
  opts = opts || {}; // plugin 参数
  return function (root, result) {
    // Transform the CSS AST
  };
});

And then, after that, Just bring it in postcss.config.js

module.exports = {
  plugins: [
    require('./test-plugin'),
    require('autoprefixer')
  ]
};

PostCSS plugin Hello world

Write a plugin that inverts CSS property values

var postcss = require("postcss");

module.exports = postcss.plugin("postcss-backwards", function (opts) {
  opts = opts || {};
  return function (root, result) {
    // Iterate over all style nodes
    root.walkDecls((declaration) => {
      declaration.value = declaration.value.split("").reverse().join("");
    });
  };
});

Of course this plugin, doesn’t make any sense, we just use it to learn how to write PostCSS plugin

postcss-multiple-themes

Usage

JS entry file import 2 style files

import "./default-theme.less";
import "./dark-theme.less";

component.less

.box{
  width: 100px;
  height: 100px;
  border: 1px solid @border;
  background-color: @bg;
  color: @color;
}

default-theme.less

@import "./component";

@border: #333;
@color: #000;
@bg: #fff;

dark-theme.less

@import "./component";

@border: #999;
@color: #fff;
@bg: #000;

Output css

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background-color: #fff;
  color: #000;
}
.dark .box {
  border: 1px solid #999;
  background-color: #000;
  color: #fff;
}

Source Code

function isEmpty(arr) {
  return Array.isArray(arr) && arr.length === 0;
}

const hasColorProp = (colorProps, declProp) =>
  colorProps.some((prop) => declProp.includes(prop));

module.exports = (opts = {}) => {
  if (!opts.colorProps) {
    opts.colorProps = ["color", "background", "border", "box-shadow", "stroke"];
  }
  return (root) => {
    let theme;
    const file = root.source.input.file || "";

    const matched = file.match(
      /(?<theme>[a-zA-Z0-9]+)-theme.(less|css|scss|sass)/
    );
    if (matched && matched.groups.theme !== "default") {
      theme = matched.groups.theme;
    } else {
      if (process.env.NODE_ENV == "test") {
        theme = "test";
      }
    }
    if (theme) {
      root.walkRules((rule) => {
        rule.walkDecls((decl) => {
          if (!hasColorProp(opts.colorProps, decl.prop)) {
            decl.remove();
          }
        });

        if (isEmpty(rule.nodes)) {
          rule.remove();
        } else {
          rule.selector = rule.selector
            .replace(/\n/g, "")
            .split(",")
            .map((s) => `.${theme} ${s}`)
            .join(",\n");
        }
      });
    }
  };
};

Implementation steps

1、Use the file name to determine if a skin style needs to be generated

const file = root.source.input.file || "";

const matched = file.match(
  /(?<theme>[a-zA-Z0-9]+)-theme.(less|css|scss|sass)/
);

2、Remove styles that do not contain colors, and leave border-color background-color and the CSS properties that contains colors

["color", "background","border","box-shadow","stroke",]

3、If there are no CSS properties in the CSS selector, delete the selector

4、In front of the CSS selector .theme class name

Upgrade of old project

The original project may not have color-sensitive variables in a separate style file, and the absolute value of color may be written in the style.

Is it possible to write a tool to help us upgrade？

At this time, I have a library that helps me，postcss-less will help us parse the less to AST ，Then we can configure the rules to replace the ** color with the variable **

configure the rules

module.exports = [
  {
    prop: ["background-color", "background"],
    from: ["#fff", "#ffffff", "@white"],
    to: "@component-background",
  },
  {
    prop: ["border", "border-color"],
    from: ["#D3D9E4", "#D3D9E2"],
    to: "@border-color",
  },
  {
    prop: ["color"],
    from: ["#666E79", "#5C6268"],
    to: "@text-color",
  }
];

Transform

const syntax = require("postcss-less");
var fs = require("fs");
const path = require("path");
const rules = require("./rule.js");

var glob = require("glob");

function log(file, node, to) {
  console.log(
    "\x1b[32m",
    `convert ${file} ${node.source.start.line}:${node.source.start.column}  ${node.parent.selector} ${node.prop} from ${node.value} to ${to}`
  );
}

let codes = {};

// options is optional
glob("./src/**/*.less", function (er, files) {  
  files.forEach((file) => {
    var ast = syntax.parse(file);

    // traverse AST and modify it
    ast.walkDecls(function (node) {
        rules.forEach((item) => {
          if (item.prop.includes(node.prop) && item.from.includes(node.value)) {
              node.value = item.to;
              log(file, node, item.to);
          }
        });
    });
    fs.writeFileSync(path.resolve(file), syntax.nodeToString(ast));
  });
});

Main steps

1、Read all the less files with glob

2、Use postcss-less Convert less to AST

3、Iterating over all CSS properties, the decision is replaced with the less variable in the rule

4、Convert to less write file

The above code is the simplest, and there are many styles that are not covered

For example： border You can write border-color and so on.

Use VSCODE regular query missing color

When the above rules cannot cover all the project code, the developer can enter the rules in VSCODE.

(#[a-fA-F0-9]{3})|(#[a-fA-F0-9]{6})|^rgb

Find out the colors in the code and extract them into less variables one by one.

Summary

This article summarizes some common ways of front-end multiple skins. Through the most comparison, I find that it is the most convenient to generate skin style through PostCSS in our project, and it is also the easiest to make your website support dark mode. I opensource postcss-multiple-themes to Github and released the npm package.
Thinking about how to replace the css color in the old project with variables through PostCSS, when there are more projects, the labor cost is saved to a certain extent.

Last

If you are also doing change skin work for WebApp and are plagued by the problem of multi-skin in the front-end, I hope this article will be helpful to you. You can also exchange your ideas and experiences in the comments area. Welcome to explore the front-end.

DEV Community: Alex Ma

Created a Markdown Desktop App with Tauri

Introduction

Demo screenshot

Technology Stack

Features and Implementation

1. MDX Custom Components

2. Dark Mode

3. Multiple Themes

4. Local File Management

5. Document Formatting

Conclusion

Text to speech, It's so easy !

Text To Speech

Use

Summary

Using the PostCSS plugin Let your WebApp support dark mode

Solution for skin-changing

css variables

Online compilation use less.js

Build multiple CSS

PostCSS

Purpose

Start writing a PostCSS plugin

PostCSS plugin Hello world

postcss-multiple-themes

Usage

Source Code

Implementation steps

Upgrade of old project

configure the rules

Transform

Main steps

Use VSCODE regular query missing color

Summary

Online compilation use `less.js`