diff options
| -rw-r--r-- | docs/eslint.config.js | 30 | ||||
| -rw-r--r-- | docs/package.json | 8 | ||||
| -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/tokyob0t-super-duper-hiper-mega-ultra-contribution.webp | bin | 0 -> 122412 bytes | |||
| -rw-r--r-- | docs/showcases/Showcase.vue | 164 | ||||
| -rw-r--r-- | docs/showcases/Showcases.vue | 32 | ||||
| -rw-r--r-- | docs/showcases/showcases.ts | 28 | ||||
| -rw-r--r-- | docs/vitepress.config.ts | 8 | ||||
| -rw-r--r-- | examples/lua/simple-bar/widget/Bar.lua | 8 |
9 files changed, 236 insertions, 42 deletions
diff --git a/docs/eslint.config.js b/docs/eslint.config.js new file mode 100644 index 0000000..847a9dc --- /dev/null +++ b/docs/eslint.config.js @@ -0,0 +1,30 @@ +import eslint from "@eslint/js" +import tseslint from "typescript-eslint" +import stylistic from "@stylistic/eslint-plugin" +import pluginVue from "eslint-plugin-vue" + +export default tseslint.config({ + ignores: [".vitepress/cache/*"], + extends: [ + eslint.configs.recommended, + ...tseslint.configs.recommended, + ...pluginVue.configs["flat/recommended"], + stylistic.configs.customize({ + semi: false, + indent: 4, + quotes: "double", + }), + ], + rules: { + "vue/multi-word-component-names": ["off"], + "vue/html-indent": ["error", 4], + "vue/max-attributes-per-line": ["error", { + singleline: { + max: 2, + }, + multiline: { + max: 1, + }, + }], + }, +}) diff --git a/docs/package.json b/docs/package.json index 0bc5ce1..fea7e8f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -2,6 +2,11 @@ "name": "docs", "type": "module", "devDependencies": { + "@eslint/js": "^9.12.0", + "@stylistic/eslint-plugin": "^2.9.0", + "eslint-plugin-vue": "^9.28.0", + "typescript": "^5.6.3", + "typescript-eslint": "^8.8.1", "vitepress": "^1.3.4", "vitepress-plugin-auto-sidebar": "^1.2.0", "vue": "^3.4.38" @@ -10,7 +15,8 @@ "dev": "vitepress dev", "build": "vitepress build", "preview": "vitepress preview", - "vitepress": "vitepress" + "vitepress": "vitepress", + "lint": "eslint . --fix" }, "dependencies": { "devicon": "^2.16.0", 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/tokyob0t-super-duper-hiper-mega-ultra-contribution.webp b/docs/public/showcase/tokyob0t-super-duper-hiper-mega-ultra-contribution.webp Binary files differnew file mode 100644 index 0000000..94f6080 --- /dev/null +++ b/docs/public/showcase/tokyob0t-super-duper-hiper-mega-ultra-contribution.webp diff --git a/docs/showcases/Showcase.vue b/docs/showcases/Showcase.vue index a5a1e01..a300974 100644 --- a/docs/showcases/Showcase.vue +++ b/docs/showcases/Showcase.vue @@ -1,38 +1,158 @@ <script setup> -const props = defineProps({ +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, default: "" }, + title: { type: String, required: false, default: "" }, + description: { type: String, required: false, default: "" }, + author: { type: String, required: true }, +}) </script> <template> <figure> - <a :href="url"> - <img :src="src" :alt="label" /> - </a> - <figcaption> - <span>{{ label }}</span> - </figcaption> + <div class="image-wrapper"> + <img :src="src" :alt="title"> + <div class="overlay"> + <div class="text-content"> + <h3 v-if="title.length"> + {{ title }} + </h3> + <h3 v-else> + {{ author }}'s dotfiles + </h3> + <p v-if="description"> + {{ description }} + </p> + <span class="author">— {{ author }}</span> + <a + :href="url" + target="_blank" + class="setup-button" + >View Setup</a> + </div> + </div> + <i + v-if="icon" + :class="icon" + class="language-icon" + /> + </div> </figure> </template> <style scoped> -img { - border-radius: 4px; -} - -/* same as VPFeature */ figure { - padding: 0.8rem; - padding-bottom: 0; - border-radius: 12px; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 1rem; + border-radius: 1rem; background-color: var(--vp-c-bg-soft); + transition: + box-shadow 0.3s ease, + transform 0.3s ease; +} + +figure:hover { + box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2); + transform: translateY(-1rem); +} + +.image-wrapper { + position: relative; + width: 100%; + border-radius: 0.5rem; + overflow: hidden; +} + +figure img { + width: 100%; + transition: filter 0.3s ease; +} + +figure .overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: flex-start; + padding: 1rem; + opacity: 0; + transition: + opacity 0.3s ease, + backdrop-filter 0.01s ease; +} + +figure:hover .overlay { + opacity: 1; + backdrop-filter: blur(1rem); +} + +.text-content { + color: white; + text-align: left; + opacity: 0; + transform: translateX(-5rem); + transition: + transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), + opacity 0.6s ease; +} + +figure:hover .text-content { + transform: translateX(2.5rem); + opacity: 1; +} + +.text-content h3 { + margin: 0; + font-size: 2rem; +} + +.text-content p { + margin: 0.5rem 0; + font-size: 1.1rem; +} + +.text-content .author { + margin-top: 0.5rem; + text-align: left; + display: block; + position: relative; + font-style: italic; + font-size: 1rem; + color: #f0f0f0; +} + +figure .language-icon { + position: absolute; + bottom: 0.5rem; + right: 0.5rem; + padding: 0.5rem; + background: var(--vp-c-bg-soft); + border-radius: 100%; + font-size: 1rem; + z-index: 1; +} + +.setup-button { + margin-top: 2rem; + padding: 0.5rem 1rem; + background-color: var(--vp-c-brand); + color: white; + text-decoration: none; + border-radius: 0.5rem; + font-weight: bold; + display: inline-block; + font-size: 1rem; + transition: background-color 0.3s ease; } -figcaption { - text-align: center; - padding-top: .4em; - padding-bottom: .6em; +.setup-button:hover { + background-color: darken(var(--vp-c-brand), 10%); } </style> diff --git a/docs/showcases/Showcases.vue b/docs/showcases/Showcases.vue index 86a17bf..34960d2 100644 --- a/docs/showcases/Showcases.vue +++ b/docs/showcases/Showcases.vue @@ -1,18 +1,36 @@ <script setup lang="ts"> -import showcases from './showcases' -import Showcase from './Showcase.vue' +import showcases from "./showcases" +import Showcase from "./Showcase.vue" </script> - <template> <div class="Showcases"> <template v-for="(showcase, index) in showcases" :key="index"> <div v-if="Array.isArray(showcase)" class="row"> - <div v-for="(elem, elemIndex) in showcase" :key="elemIndex" class="item" - :class="`grid-${showcase.length}`"> - <Showcase v-bind="elem" /> + <div + v-for="(elem, elemIndex) in showcase" + :key="elemIndex" + class="item" + :class="`grid-${showcase.length}`" + > + <Showcase + :src="elem.src" + :url="elem.url" + :icon="elem.icon" + :title="elem.title" + :description="elem.description" + :author="elem.author" + /> </div> </div> - <Showcase v-else v-bind="showcase" /> + <Showcase + v-else + :src="showcase.src" + :url="showcase.url" + :icon="showcase.icon" + :title="showcase.title" + :description="showcase.description" + :author="showcase.author" + /> </template> </div> </template> diff --git a/docs/showcases/showcases.ts b/docs/showcases/showcases.ts index 138ae7f..8354cd8 100644 --- a/docs/showcases/showcases.ts +++ b/docs/showcases/showcases.ts @@ -1,15 +1,29 @@ type Showcase = { - label: string src: string url: string + icon?: string // https://devicon.dev/ + title?: string + description?: string + author: string } -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 + { + src: "/astal/showcase/aylur.png", + url: "https://github.com/Aylur/dotfiles", + icon: "devicon-javascript-plain", + description: "Placeholder (this is an ags v1 screenshot)", + author: "Aylur", + }, + { + src: "/astal/showcase/tokyob0t-super-duper-hiper-mega-ultra-contribution.webp", + url: "https://github.com/tokyob0t/dotfiles", + icon: "devicon-lua-plain", + title: "Tokyob0t's Desktop", + description: "Abandonad toda esperanza, vosotros que entráis aquí.", + author: "tokyob0t", + }, + // add more showcases here~ ] satisfies Array<Grid<Showcase>> diff --git a/docs/vitepress.config.ts b/docs/vitepress.config.ts index a9c6ab9..47ed81e 100644 --- a/docs/vitepress.config.ts +++ b/docs/vitepress.config.ts @@ -23,8 +23,8 @@ export default defineConfig({ outline: "deep", footer: { - message: 'Released under the LGPL v2.1 License', - copyright: 'Logo is created by VDawg' + message: "Released under the LGPL v2.1 License", + copyright: "Logo is created by VDawg", }, nav: [ @@ -44,7 +44,7 @@ export default defineConfig({ { text: "Contributing", link: github("/blob/main/CONTRIBUTING.md") }, { text: "Changelog", link: github("/blob/main/CHANGELOG.md") }, ], - } + }, ], sidebar: [ @@ -113,6 +113,6 @@ export default defineConfig({ search: { provider: "local", - } + }, }, }) 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), |
