preface

Hello everyone, the author is here again. It has been nearly a month since the last appearance. I miss you very much.

Since the last article, my open source project was written into the speech by The master Yu Xi. What kind of experience is it to contribute to the speech? The author has had the honor to meet many students who are interested in making contributions to Varlet.

The author is also very ashamed, ceng a bit of especially big heat on the nuggets monthly list, received nuggets community to send gifts. Although feel guilty but still feel grateful, thanks community encouragement.

At the same time, I can’t help but sigh that the charisma of my grandfather is extraordinary. With the help of so many enthusiastic students in the community, the author decided to implement the adaptation of all components in The Dark mode. The first party provided the theme of the dark mode, so as to obtain a better user experience. Now all of them have been finished, and the internal test was opened for a week, and the release is good. This article is also a summary.

Component library correlation

Open source is free and free, and Varlet is supported in three general ways

  1. toVarlethairpr, code contribution, what do you think is bad to change, help the component library continue to evolve
  2. toVarletpointstarLog in to yourgithubDot your account with a star to prove that you think the author’s effort is worth it
  3. Compliment the author’s cat. The cat is pictured here, the cat in the Swipe component case

Github repository address of Varlet component library

What is Dark Mode

When browsing some web pages, the white color palette can be overwhelming, especially at night when the dark mode comes in handy. It greatly increases readability and reduces eye strain. And dark theme will always feel a very high-end feeling, such as the author’s development tool theme selection will always prefer dark color, go further, see the effect.

It is day

It’s getting dark

Those of you who have followed Varlet in the past may have noticed that our logo has also been tweaked in color to make it more natural in dark mode.

Access Dark mode

In Varlet, you only need to call a function to switch all components into dark mode. Then inject the body with the color variable recommended by the component library and add a transition effect, and your application will be perfectly harmonious.

import dark from '@varlet/ui/es/themes/dark' 
import { StyleProvider } from '@varlet/ui'

StyleProvider(dark)
Copy the code
body { 
  color: var(--color-text); 
  background-color: var(--color-body);
  transition: background-color .25s; 
}
Copy the code

Varlet Cli component library development tool chain upgrade

For those unfamiliar with the Varlet Cli, read this article

This time our Cli is also in Dark mode. Now the component library project generated through Varlet Cli comes with dark mode. What front-end developer doesn’t want to have their own component library, right? Preferably with new skin

Summary of Dark Mode

Does all of this look okay? This dark mode adaptation work is also the largest number of participants, and it is UI level work, there is a contribution code review problem.

The author reviews changes individually for each component, but does not know how the code provided by the contributor is performing before merging the code, which is addressed by the Surge service, which is described below.

Pr Preview the solution online

The firm service

Surge was built specifically for Web application publishing.

Simply put, installing Surge’s command line allows you to publish any file to Surge’s CDN and assign a separate domain name to your application.

It’s a little slow, but free, free, free, important things three times. This is good enough for code review and preview of open source projects.

Automatically deploy pr code in conjunction with Github Actions

Github Actions is a free assembly line service provided by Github for us. Here we will not repeat the wheel, and directly call ruan Yifeng’s article

We can listen for pr events in actions, build the submitted code on the pipeline, and deploy it on the Surge command line so that authors can see the submitter’s code execution without merging the code. Results the following

Git /workflows: git/workflows: git/workflows

The first step is the build process, which may vary more or less from project to project. The key here is that after building the document site, access the pr number of the current submitter, temporarily store it in a file, in this case pr.txt, and upload the document site and PR number file to save for use by the next Workflow

The second step is the deployment process. The script sends a reply to the contributor, downloads the document site and PR number, invokes the Surge service to deploy, and sends the contributor a picture of the success of the deployment, along with the deployment address. Failure is also a reminder to the user, although the author hopes never to fail

New Space component

Also by chance, one of the kinder students in the group volunteered to give us this component. The author was very dismissive at first, thinking that this component was unnecessary because we already had Row & Col, and the author was a person who really didn’t like to “scrape” the number of components. But then it really smells good because of its functionality.

Its main functions are fairly simple, such as spacing the children it wraps around and being a workable Flex box, but there are too many of these scenarios in real development.

After a few days of use, the author feels that this component is really suitable for mobile terminal, basically relying on various

can achieve most of the layout requirements, really exciting ~

conclusion

Hopefully this new feature will help, as we are constantly evolving and adapting internally.

For example, the students who contributed space components to us have started to plan the development of Varlet-Pro, and they may be close to some specific businesses to make some templates and business components. Interested students can help him.

For example, we have increased our core maintenance staff, which is a very good thing for us. It means we have more energy to explore other possibilities.

Or we’re actively embracing the NuxT3, even though it doesn’t look perfect yet.

What’s the story, we will talk about next time, thank you for your support and encouragement, students, see you next time ~ ~ ~