146 lines
4 KiB
Text
146 lines
4 KiB
Text
---
|
|
import { processMarkdown } from "@config/io/markdown";
|
|
|
|
const codeDesktop = await processMarkdown(
|
|
"N/A",
|
|
`\`\`\`qml
|
|
// a standard desktop window
|
|
FloatingWindow {
|
|
Timer {
|
|
// assign an id to the object, which can be
|
|
// used to reference it
|
|
id: timer
|
|
property bool invert: false // a custom property
|
|
|
|
// change the value of invert every half second
|
|
running: true; repeat: true
|
|
interval: 500 // ms
|
|
onTriggered: timer.invert = !timer.invert
|
|
}
|
|
|
|
// change the window's color when timer.invert changes
|
|
color: timer.invert ? "purple" : "green"
|
|
}
|
|
\`\`\``
|
|
);
|
|
|
|
const codeMobile = await processMarkdown(
|
|
"N/A",
|
|
`\`\`\`qml
|
|
// a standard desktop window
|
|
FloatingWindow {
|
|
Timer {
|
|
// assign an id to the
|
|
// object, which can be
|
|
// used to reference it
|
|
id: timer
|
|
// a custom property
|
|
property bool invert: false
|
|
|
|
// change the value of invert
|
|
// every half second
|
|
running: true; repeat: true
|
|
interval: 500 // ms
|
|
onTriggered: {
|
|
timer.invert = !timer.invert
|
|
}
|
|
}
|
|
|
|
// change the window's color
|
|
// when timer.invert changes
|
|
color: timer.invert
|
|
? "purple"
|
|
: "green"
|
|
}
|
|
\`\`\``
|
|
);
|
|
---
|
|
|
|
<ul class="featurelist">
|
|
<li class="featurelist-item hot-reloading left">
|
|
<section class="feature-text">
|
|
<h3 class="feature-title">See your changes in real time</h3>
|
|
<span class="feature-subtitle">
|
|
Quickshell loads changes as soon as they're saved, letting you iterate
|
|
as fast as you can type.
|
|
</span>
|
|
</section>
|
|
<section class="feature-showcase">
|
|
<video preload="metadata" controls={false} autoplay loop>
|
|
<source src="/assets/simple-shell-livereload.mp4" type="video/mp4">
|
|
</video>
|
|
</section>
|
|
</li>
|
|
<li class="featurelist-item qml right">
|
|
<section class="feature-text">
|
|
<h3 class="feature-title">Easy to use language</h3>
|
|
<span class="feature-subtitle">
|
|
Quickshell is configured in QML, a simple language designed for creating
|
|
flexible user interfaces. It also has LSP support.
|
|
</span>
|
|
</section>
|
|
<section class="feature-showcase" id="qml-showcase">
|
|
<div class="showcase-desktop"><Fragment set :html={codeDesktop} /></div>
|
|
<div class="showcase-mobile"><Fragment set :html={codeMobile} /></div>
|
|
</section>
|
|
</li>
|
|
<li class="featurelist-item cloud-li left">
|
|
<section class="feature-text">
|
|
<h3 class="feature-title">Extensive integrations</h3>
|
|
<span class="feature-subtitle">
|
|
Quickshell comes with a large set of integrations, with new ones
|
|
arriving all the time.
|
|
</span>
|
|
</section>
|
|
<section class="feature-showcase cloud">
|
|
<section class="feature-cloud">
|
|
<div class="cloud-center">
|
|
<img src="/favicon.svg" alt="Quickshell">
|
|
</div>
|
|
<div class="cloud-items-wrapper">
|
|
<span class="cloud-item wayland">
|
|
<div>
|
|
<img
|
|
class="feature-icon"
|
|
src="/assets/logos/wayland.svg"
|
|
alt="Wayland"
|
|
>
|
|
</div>
|
|
</span>
|
|
<span class="cloud-item hyprland">
|
|
<div>
|
|
<img
|
|
class="feature-icon"
|
|
src="/assets/logos/hyprland.svg"
|
|
alt="Hyprland"
|
|
>
|
|
</div>
|
|
</span>
|
|
<span class="cloud-item pipewire">
|
|
<div>
|
|
<img
|
|
class="feature-icon"
|
|
src="/assets/logos/pipewire.svg"
|
|
alt="Pipewire"
|
|
>
|
|
</div>
|
|
</span>
|
|
<span class="cloud-item x-org">
|
|
<div>
|
|
<img
|
|
class="feature-icon"
|
|
src="/assets/logos/xorg.svg"
|
|
alt="X.Org"
|
|
>
|
|
</div>
|
|
</span>
|
|
<span class="cloud-item sway">
|
|
<div>
|
|
<img class="feature-icon" src="/assets/logos/sway.svg" alt="Sway">
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</li>
|
|
</ul>
|