diff --git a/v3/src/assets/images/blog/web-client.jpg b/v3/src/assets/images/blog/web-client.jpg new file mode 100644 index 0000000..6b82bf1 Binary files /dev/null and b/v3/src/assets/images/blog/web-client.jpg differ diff --git a/v3/src/components/blog/SinglePost.astro b/v3/src/components/blog/SinglePost.astro index eed34de..0bb70c8 100644 --- a/v3/src/components/blog/SinglePost.astro +++ b/v3/src/components/blog/SinglePost.astro @@ -60,17 +60,12 @@ const { post, url } = Astro.props; > {post.title} -

- {post.excerpt} -

{ post.image ? ( {post?.excerpt - This file is essentially an extension of _TailWind's_ base.css. High-level component styles are defined here. Note - also styling on elements selected by 'attribute' selectors at the bottom of the files, particularly those selected by - 'data' attributes. - - - Defines custom colors and fonts. For these to take effect in the 'base.css' file, they need to be loaded in the html - header section. See next. - - - This layout is used for all of the pages rendered by _RustDesk_. The contents of _tailwind.css_ and - _CustomStyles.astro_ component, described above, is injected into the html header. - - -### Dark Mode - -_Dark Mode_ is triggered by the little 'sunlight' icon:in the page header. It is defined in the _components/common/ToggleTheme.astro_, but the event is attached and the action defined in _components/common/BasicScripts.astro_ in the following snippet: - -```javascript -attachEvent('[data-aw-toggle-color-scheme]', 'click', function () { - if (defaultTheme.endsWith(':only')) { - return; - } - document.documentElement.classList.toggle('dark'); - localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; -}); -``` - -Note that this is a client event. _BasicScripts.astro_ defines several other client-side functionality as well as this one. - -## Advanced Slot Usage - -_slots_ are part of the component implementation, which is a common concept among many frameworks, including _Astrojs_. The typical slot definition in a component looks like this: - -```astro ---- -// (file: MyComponent.astro) -const { title } = Astro.props; -export interface Props { - title: string; -} ---- - -
-

{title}

- - -
-
-``` - -And in usage elsewhere: - -```astro -import MyComponent from "~/components/MyComponent"; ... - -

This content will be displayed in the slot

- -``` - -### Alternate usage - -There's another way we can use slots, useful particularly when a component can have markdown content is as follows (study carefully...): - -```astro ---- -// (file: MyComponent.astro) - -const { title } = Astro.props; -export interface Props { - title: string; -} -const content: string = await Astro.props.render('default'); ---- - -// renders the html to the 'content' variable -
-

{title}

-
- -
-
-``` - -Whoa!! What's going on here? - -Notice there is no slot definition in the html portion of the component. Instead, what we do is have _Astro_ render the slot content (here, the 'default' content, but you can also render named slots) into a variable, and then use that content in a _div_ (for instance). - -So, if the usage is in a markdown file, like so: - -```mdx -import MyComponent from '../../components/MyComponent'; - -# Using the above component in a .mdx file (that can take components) - -{' '} - -### Here is some markdown content - With a bullet item. -``` - -_MyComponent_ renders the markdown to html and then injects it into the div. - -This actually has a big advantage -- consider that with the normal usage you don't have access to the slot contents: _Astro_ just plops the content into the _<slot/>_ tag. Using this method, however, allows you to access the content and further manipulate it before it gets inserted into the html. - -This allows a great deal of flexibility in component design. - -### Yet Another Step - -Now, we get to the techniques used in _RustDesk_, we'll use the _pages/index.astro_ file to illustrate. - -You'll note that the index file imports a lot of components, each one roughly analagous to a panel in the index page. Each of these components, in turn, is instantiated sequentially throughout the page. But, you'll notice that some of them use this kind of construct (we'll use the last section, _CallToAction_, as it is most illustrative of the technique): - -```astro - - - Astro +
Tailwind CSS - - - - Be very surprised by these huge fake numbers you are seeing on this page. Don't waste - more time! :P - - -``` - -Some things to note, here: - - - This argument is actually being passed a javascript object -- not a string. (However, in the TS definition, it could - be a string...) - - - Furthermore, these <Fragment/> elements each have a _slot="(value)"_ specifier. - - -The latter seems odd, because <Fragment/> is a built-in component over which you have no control, and doesn't have a provision for rendering slots, per se. - -The answer lies in a paragraph in the _Astro_ docs, slots section, which states: - -> Use a `slot="my-slot"` attribute on the child element that you want to pass through to a matching slot `name="my-slot" />` placeholder in your component. - -That's pretty concise and a bit of a head-scratcher to read, but basically what it says is that: - -1. Given a component that defines a slot: -1. you can reference a slot from a child element of that component and, -1. provide content to the parent component's slot from the child by naming the slot in the child with a `slot=""` property assignment, where the _slot-name_ is the parent's slot. - -So, in the example above, the _CallToAction_ component defines the _subtitle_ slot, and the following _<Fragment slot="subtitle">_ populates the slot with the following content: - -```astro - - Be very surprised by these huge fake numbers you are seeing on this page. Don't waste - more time! :P - -``` - -And, the _CallToAction_ component defines and renders it thusly: - -```astro ---- -//... -const { subtitle = await Astro.slots.render('subtitle') } = Astro.props; ---- - -//... -{subtitle &&

} -//... -``` - -There's a lot to wrap your head around, here. - -Notice first that _subtitle_ is defined as a prop/argument, but it's being processed as a slot. Interestingly, prop args and slots seem to be somewhat interchangeable: if the subtitle was just a string, it would simply take that assignment. The main difference is that if you render them independently, you have to call the render with an _await_ modifier. diff --git a/v3/src/content/post/web-client-v2-preview.mdx b/v3/src/content/post/web-client-v2-preview.mdx new file mode 100644 index 0000000..28e864d --- /dev/null +++ b/v3/src/content/post/web-client-v2-preview.mdx @@ -0,0 +1,43 @@ +--- +publishDate: 2024-10-12T00:00:00Z +title: RustDesk web client V2 Preview +excerpt: V2 offers better codecs, international keyboard support, clipboard support, file transfer etc. +image: ~/assets/images/blog/web-client.jpg +category: Release +tags: + - web client + - release +metadata: + canonical: https://rustdesk.com/rustdesk-web-client-v2-preview +--- + +Rustdesk web client V1 hasn't been updated for over two years and lacks many features, our team has spent three months developing V2. Today, we are proud to introduce the V2 Preview, which offers numerous enhancements over V1. These improvements include stronger decoding capabilities, better international keyboard support, clipboard support (not just text but also image clipboards), and file transfer functionality etc. We have strived to ensure that the web version offers a synchronized feature set and user experience with the desktop version, despite the limitations imposed by browser capabilities. + +You can access the RustDesk web client V2 Preview by visiting https://rustdesk.com/web. If you wish to access your own server through V2, please configure WebSocket Secure (WSS) support according to the [documentation](https://rustdesk.com/docs/en/self-host/rustdesk-server-pro/faq/#8-add-websocket-secure-wss-support-for-the-id-server-and-relay-server-to-enable-secure-communication-for-the-web-client), setting it up on ports 21118/21119. +``` + location /ws/id { + proxy_pass http://localhost:21118; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection "Upgrade"; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + } + + location /ws/relay { + proxy_pass http://localhost:21119; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection "Upgrade"; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + } +``` +Once the V2 version is stable, we will also integrate the web client into the Pro version, allowing you to access it via `https://rustdesk.yourcompany.com/web`. + +We are excited to bring these enhancements to our users and look forward to your feedback as we continue to refine and improve the RustDesk Web Client V2. +