+
+
+
Loving Koel? Please consider supporting its development via
GitHub Sponsors
@@ -55,6 +53,7 @@ import { isDemo } from '@/utils'
import { useNewVersionNotification } from '@/composables'
import { http } from '@/services'
+import SponsorList from '@/components/meta/SponsorList.vue'
import Btn from '@/components/ui/Btn.vue'
type DemoCredits = {
@@ -62,7 +61,7 @@ type DemoCredits = {
url: string
}
-const credits = ref([])
+const credits = ref(null)
const {
shouldNotifyNewVersion,
@@ -75,7 +74,7 @@ const emit = defineEmits(['close'])
const close = () => emit('close')
onMounted(async () => {
- credits.value = isDemo() ? orderBy(await http.get('demo/credits'), 'name') : []
+ credits.value = isDemo() ? orderBy(await http.get('demo/credits'), 'name') : null
})
@@ -87,6 +86,7 @@ onMounted(async () => {
width: 90%;
border-radius: .6rem;
overflow: hidden;
+ position: relative;
main {
padding: 2rem;
@@ -96,22 +96,16 @@ onMounted(async () => {
}
}
- header, footer {
+ footer {
padding: 1rem;
- background: rgba(255, 255, 255, .05);
- }
-
- header {
- font-size: 1.2rem;
- border-bottom: 1px solid rgba(255, 255, 255, .1);
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+ background: rgba(255, 255, 255, .02);
}
a {
color: var(--color-text-primary);
&:hover {
- color: var(--color-highlight);
+ color: var(--color-accent);
}
}
}
@@ -148,4 +142,8 @@ onMounted(async () => {
}
}
}
+
+.sponsors {
+ margin-top: 1rem;
+}
diff --git a/resources/assets/js/components/meta/SponsorList.spec.ts b/resources/assets/js/components/meta/SponsorList.spec.ts
new file mode 100644
index 00000000..55cc7088
--- /dev/null
+++ b/resources/assets/js/components/meta/SponsorList.spec.ts
@@ -0,0 +1,11 @@
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import SponsorList from './SponsorList.vue'
+
+new class extends UnitTestCase {
+ protected test () {
+ it('renders', () => {
+ expect(this.render(SponsorList).html()).toMatchSnapshot()
+ })
+ }
+}
diff --git a/resources/assets/js/components/meta/SponsorList.vue b/resources/assets/js/components/meta/SponsorList.vue
new file mode 100644
index 00000000..4604bc06
--- /dev/null
+++ b/resources/assets/js/components/meta/SponsorList.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
diff --git a/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap b/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
index 9dbe859e..61c5d14b 100644
--- a/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
+++ b/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
@@ -2,15 +2,12 @@
exports[`renders 1`] = `
-
- v0.0.0
+ Koel v0.0.0
Made with ❤️ by Phan An and quite a few awesome contributors.
-
+
Loving Koel? Please consider supporting its development via GitHub Sponsors and/or OpenCollective.
diff --git a/resources/assets/js/components/meta/__snapshots__/SponsorList.spec.ts.snap b/resources/assets/js/components/meta/__snapshots__/SponsorList.spec.ts.snap
new file mode 100644
index 00000000..5f9ce23f
--- /dev/null
+++ b/resources/assets/js/components/meta/__snapshots__/SponsorList.spec.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`renders 1`] = ``;
diff --git a/resources/assets/js/sponsors.ts b/resources/assets/js/sponsors.ts
new file mode 100644
index 00000000..ec44079c
--- /dev/null
+++ b/resources/assets/js/sponsors.ts
@@ -0,0 +1,46 @@
+import renderLogo from '@/../img/sponsors/render.svg'
+import exoscaleLogo from '@/../img/sponsors/exoscale.svg'
+import keyCdnLogo from '@/../img/sponsors/keycdn.svg'
+import whatTheDiffLogo from '@/../img/sponsors/what-the-diff.svg'
+
+type Sponsor = {
+ description: string
+ url: string
+ logo: {
+ src: string
+ style?: string
+ }
+}
+
+export default [
+ {
+ description: 'Render - Cloud Hosting for Developers',
+ url: 'https://render.com',
+ logo: {
+ src: renderLogo,
+ style: 'height: 28px'
+ }
+ },
+ {
+ description: 'Exoscale - European Cloud Hosting',
+ url: 'https://exoscale.ch',
+ logo: {
+ src: exoscaleLogo
+ }
+ },
+ {
+ description: 'KeyCDN - Content delivery made easy',
+ url: 'https://www.keycdn.com?a=11519',
+ logo: {
+ src: keyCdnLogo
+ }
+ },
+ {
+ description: 'What The Diff - AI powered changelog generation',
+ url: 'https://whatthediff.ai',
+ logo: {
+ src: whatTheDiffLogo,
+ style: 'height: 20px'
+ }
+ }
+] as Sponsor[]
