diff options
| -rw-r--r-- | docs/public/showcase/aylur.png (renamed from docs/public/showcase/aylur1.png) | bin | 3202086 -> 3202086 bytes | |||
| -rw-r--r-- | docs/public/showcase/contrib1.webp | bin | 0 -> 122412 bytes | |||
| -rw-r--r-- | docs/showcases/Showcase.vue | 80 | ||||
| -rw-r--r-- | docs/showcases/showcases.ts | 31 | ||||
| -rw-r--r-- | examples/lua/simple-bar/widget/Bar.lua | 8 |
5 files changed, 91 insertions, 28 deletions
diff --git a/docs/public/showcase/aylur1.png b/docs/public/showcase/aylur.png Binary files differindex 5dc5dd7..5dc5dd7 100644 --- a/docs/public/showcase/aylur1.png +++ b/docs/public/showcase/aylur.png diff --git a/docs/public/showcase/contrib1.webp b/docs/public/showcase/contrib1.webp Binary files differnew file mode 100644 index 0000000..94f6080 --- /dev/null +++ b/docs/public/showcase/contrib1.webp diff --git a/docs/showcases/Showcase.vue b/docs/showcases/Showcase.vue index a5a1e01..f790fbf 100644 --- a/docs/showcases/Showcase.vue +++ b/docs/showcases/Showcase.vue @@ -2,37 +2,85 @@ const props = defineProps({ src: { type: String, required: true }, label: { type: String, required: true }, - url: { type: String, required: true } + url: { type: String, required: true }, + icon: { type: String, required: false }, }); </script> <template> - <figure> - <a :href="url"> - <img :src="src" :alt="label" /> - </a> + <figure class="showcase"> + <div> + <a :href="url" target="_blank"> + <img :src="src" :alt="label" /> + </a> + <i :class="icon" class="language-icon"></i> + </div> <figcaption> - <span>{{ label }}</span> + <a :href="url" class="label-link" target="_blank">{{ label }}</a> </figcaption> </figure> </template> <style scoped> -img { - border-radius: 4px; +.showcase { + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem; + border-radius: 15px; + background-color: var(--vp-c-bg-soft); + transition: + transform 0.3s ease, + box-shadow 0.3s ease; } -/* same as VPFeature */ -figure { - padding: 0.8rem; - padding-bottom: 0; - border-radius: 12px; - background-color: var(--vp-c-bg-soft); +.showcase:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); +} + +.showcase:hover img { + transform: scale(1.05); +} + +.showcase div { + position: relative; + display: inline-block; + width: 100%; + border-radius: 5px; + overflow: hidden; +} + +.showcase img { + width: 100%; + border-radius: 5px; + transition: transform 0.3s ease; +} + +.showcase i { + position: absolute; + bottom: 5px; + right: 5px; + padding: 0.5rem; + background: var(--vp-c-bg-soft); + border-radius: 100%; + font-size: 1rem; } figcaption { + margin-top: 0.8rem; text-align: center; - padding-top: .4em; - padding-bottom: .6em; +} + +.label-link { + text-decoration: none; + color: var(--vp-c-text-primary); + font-weight: semibold; + font-size: 1rem; + transition: color 0.3s ease; +} + +.label-link:hover { + color: var(--vp-c-brand); } </style> diff --git a/docs/showcases/showcases.ts b/docs/showcases/showcases.ts index 138ae7f..f4899c2 100644 --- a/docs/showcases/showcases.ts +++ b/docs/showcases/showcases.ts @@ -1,15 +1,24 @@ type Showcase = { - label: string - src: string - url: string -} + label: string; + src: string; + url: string; + icon: string; // https://devicon.dev/ +}; -type Grid<T> = T - | [T, T] - | [T, T, T] - | [T, T, T, T] +type Grid<T> = T | [T, T] | [T, T, T] | [T, T, T, T]; export default [ - { label: "Placeholder (this is an ags v1 screenshot)", src: "/astal/showcase/aylur1.png", url: "https://github.com/Aylur/dotfiles" }, - // add more showcases here -] satisfies Array<Grid<Showcase>> + { + label: "Placeholder (this is an ags v1 screenshot)", + src: "/astal/showcase/aylur.png", + url: "https://github.com/Aylur/dotfiles", + icon: "devicon-javascript-plain", + }, + { + label: "Idk I just love oxocarbon", + src: "/astal/showcase/contrib1.webp", + url: "https://github.com/tokyob0t/dotfiles", + icon: "devicon-lua-plain", + }, + // add mowe shuwucases hewe~ +] satisfies Array<Grid<Showcase>>; diff --git a/examples/lua/simple-bar/widget/Bar.lua b/examples/lua/simple-bar/widget/Bar.lua index d44db2d..d340cba 100644 --- a/examples/lua/simple-bar/widget/Bar.lua +++ b/examples/lua/simple-bar/widget/Bar.lua @@ -134,6 +134,10 @@ local function Workspaces() return Widget.Box({ class_name = "Workspaces", bind(hypr, "workspaces"):as(function(wss) + table.sort(wss, function(a, b) + return a.id < b.id + end) + return map(wss, function(ws) return Widget.Button({ class_name = bind(hypr, "focused-workspace"):as(function(fw) @@ -142,7 +146,9 @@ local function Workspaces() on_clicked = function() ws:focus() end, - label = bind(ws, "id"):as(tostring), + label = bind(ws, "id"):as(function(v) + return type(v) == "number" and string.format("%.0f", v) or v + end), }) end) end), |
