Skip to content

Commit fd91b80

Browse files
ArmaldioArmaldio
committed
improvements
1 parent 3150ec0 commit fd91b80

File tree

6 files changed

+451
-427
lines changed

6 files changed

+451
-427
lines changed

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"dependencies": {
1717
"@primevue/themes": "^4.0.6",
1818
"@vueuse/core": "^11.0.3",
19+
"date-fns": "^4.1.0",
1920
"pinia": "^2.1.7",
2021
"primeflex": "^3.3.1",
2122
"primeicons": "^7.0.0",
@@ -25,6 +26,8 @@
2526
},
2627
"devDependencies": {
2728
"@iconify-json/line-md": "^1.2.1",
29+
"@iconify-json/simple-icons": "^1.2.3",
30+
"@iconify/vue": "^4.1.2",
2831
"@playwright/test": "^1.44.1",
2932
"@tsconfig/node20": "^20.1.4",
3033
"@types/jsdom": "^21.1.7",

‎pnpm-lock.yaml

Lines changed: 31 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/DownloadCard.vue

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div class="os-card">
3+
<div class="flex align-items-center mb-4">
4+
<span class="text-4xl mr-2">
5+
<Icon height="22" :icon="getOsIcon(os)" /></span>
6+
<h2 class="text-2xl font-semibold">{{ os }}</h2>
7+
<span
8+
v-if="os === 'Windows'"
9+
class="ml-2 px-2 py-1 bg-yellow-100 text-yellow-900 text-xs border-round"
10+
>Unsigned</span
11+
>
12+
</div>
13+
<div
14+
v-for="option in options"
15+
:key="option.value"
16+
class="flex justify-content-between align-items-center mb-2"
17+
>
18+
<span>{{ option.label }}</span>
19+
<Button as="a" :href="option.value" icon="pi pi-download" text rounded class="p-button-sm primary-btn" />
20+
</div>
21+
</div>
22+
</template>
23+
24+
<script setup>
25+
import { defineProps } from "vue";
26+
import Button from "primevue/button";
27+
import { Icon } from '@iconify/vue';
28+
29+
const props = defineProps({
30+
os: String,
31+
options: Array,
32+
});
33+
34+
const getOsIcon = (os) => {
35+
switch (os) {
36+
case "macOS":
37+
return "simple-icons:apple";
38+
case "Windows":
39+
return "simple-icons:windows10";
40+
case "Linux":
41+
return "simple-icons:linux";
42+
default:
43+
return "";
44+
}
45+
};
46+
</script>
47+
48+
<style lang="scss" scoped>
49+
.os-card {
50+
background-color: #fff;
51+
border-radius: 16px;
52+
padding: 1rem 1rem;
53+
transition: transform 0.3s ease, box-shadow 0.3s ease;
54+
position: relative;
55+
border: 1px solid #f1f1f1;
56+
width: 300px;
57+
}
58+
</style>

‎src/views/download.vue

Lines changed: 122 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,138 @@
11
<template>
2-
<div class="flex flex-col items-center p-8 bg-gray-100 min-h-screen">
3-
<img
4-
alt="Dataflare Logo"
5-
class="w-16 h-16 mb-4"
6-
/>
7-
<h1 class="text-2xl font-bold mb-2">Download Dataflare</h1>
8-
<p class="text-gray-600 mb-8">
2+
<div class="flex flex-column align-items-center p-8 surface-100">
3+
<!-- <img
4+
alt="Cyn Logo"
5+
class="w-4rem h-4rem mb-4"
6+
/> -->
7+
<h1 class="text-4xl font-bold mb-2">Download Cyn</h1>
8+
<p class="text-color-secondary mb-8">
99
Choose the version that suits your operating system (OS) and CPU
1010
architecture
1111
</p>
12-
13-
<div class="flex flex-wrap justify-center gap-8">
14-
<DownloadCard
15-
os="macOS"
16-
:options="macOptions"
17-
brewCommand="brew install dataflare"
18-
/>
19-
<DownloadCard
20-
os="Windows"
21-
:options="windowsOptions"
22-
wingetCommand="winget install Dataflare.Dataflare"
23-
/>
12+
<div class="flex flex-wrap justify-content-center gap-4">
13+
<DownloadCard os="macOS" :options="macOptions" />
14+
<DownloadCard os="Windows" :options="windowsOptions" />
2415
<DownloadCard os="Linux" :options="linuxOptions" />
2516
</div>
17+
<div class="flex flex-column text-center justify-content-center mt-8">
18+
<p>Looking for older versions?</p>
19+
<a href="https://github.com/CynToolkit/cyn/releases"
20+
>Check the releases page</a
21+
>
22+
</div>
2623
</div>
2724
</template>
2825

2926
<script setup lang="ts">
30-
import { defineComponent, ref } from "vue";
27+
import { computed, ref } from "vue";
28+
import DownloadCard from "@/components/DownloadCard.vue";
29+
import { isAfter } from "date-fns";
3130
32-
const macOptions = ref([
33-
{ label: ".dmg (Apple Silicon)", value: "apple-silicon" },
34-
{ label: ".dmg (Intel)", value: "intel" },
35-
]);
3631
37-
const windowsOptions = ref([{ label: ".exe (x86_64)", value: "x86_64" }]);
32+
const macOptions = computed(() => ([
33+
{ label: ".dmg (arm64)", value: release.value?.assets.find(asset => asset.name.includes("arm64.dmg"))?.browser_download_url },
34+
{ label: ".zip", value: release.value?.assets.find(asset => asset.name.includes("darwin-arm64"))?.browser_download_url }
35+
]));
3836
39-
const linuxOptions = ref([
40-
{ label: ".AppImage (x86_64)", value: "x86_64" },
41-
{ label: ".AppImage (AArch64)", value: "aarch64" },
42-
]);
37+
const windowsOptions = computed(() => ([
38+
{ label: ".exe", value: release.value?.assets.find(asset => asset.name.includes(".Setup.exe"))?.browser_download_url },
39+
{ label: ".zip", value: release.value?.assets.find(asset => asset.name.includes("win32-x64"))?.browser_download_url }
40+
]));
4341
44-
const DownloadCard = defineComponent({
45-
props: {
46-
os: String,
47-
options: Array,
48-
brewCommand: String,
49-
wingetCommand: String,
50-
},
51-
setup(props) {
52-
const getOsIcon = (os: string) => {
53-
switch (os) {
54-
case "macOS":
55-
return "🍎";
56-
case "Windows":
57-
return "🪟";
58-
case "Linux":
59-
return "🐧";
60-
default:
61-
return "";
62-
}
63-
};
42+
const linuxOptions = computed(() => ([
43+
{ label: ".zip", value: release.value?.assets.find(asset => asset.name.includes("linux-x64"))?.browser_download_url },
44+
]))
6445
65-
return { getOsIcon };
66-
},
67-
template: `
68-
<div class="bg-white rounded-lg shadow-md p-6 w-80">
69-
<div class="flex items-center mb-4">
70-
<span class="text-2xl mr-2">{{ getOsIcon(os) }}</span>
71-
<h2 class="text-xl font-semibold">{{ os }}</h2>
72-
<span v-if="os === 'Windows'" class="ml-2 px-2 py-1 bg-yellow-200 text-yellow-800 text-xs rounded">Unsigned</span>
73-
</div>
74-
<div v-if="brewCommand || wingetCommand" class="bg-gray-100 p-2 rounded mb-4 font-mono text-sm">
75-
{{ brewCommand || wingetCommand }}
76-
</div>
77-
<div v-for="option in options" :key="option.value" class="flex justify-between items-center mb-2">
78-
<span>{{ option.label }}</span>
79-
<button class="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 transition">↓</button>
80-
</div>
81-
</div>
82-
`,
83-
});
84-
</script>
46+
export interface Release {
47+
url: string
48+
assets_url: string
49+
upload_url: string
50+
html_url: string
51+
id: number
52+
author: Author
53+
node_id: string
54+
tag_name: string
55+
target_commitish: string
56+
name: string
57+
draft: boolean
58+
prerelease: boolean
59+
created_at: string
60+
published_at: string
61+
assets: Asset[]
62+
tarball_url: string
63+
zipball_url: string
64+
body: string
65+
}
66+
67+
export interface Author {
68+
login: string
69+
id: number
70+
node_id: string
71+
avatar_url: string
72+
gravatar_id: string
73+
url: string
74+
html_url: string
75+
followers_url: string
76+
following_url: string
77+
gists_url: string
78+
starred_url: string
79+
subscriptions_url: string
80+
organizations_url: string
81+
repos_url: string
82+
events_url: string
83+
received_events_url: string
84+
type: string
85+
site_admin: boolean
86+
}
8587
86-
<style lang="scss" scoped></style>
88+
export interface Asset {
89+
url: string
90+
id: number
91+
node_id: string
92+
name: string
93+
label: string
94+
uploader: Uploader
95+
content_type: string
96+
state: string
97+
size: number
98+
download_count: number
99+
created_at: string
100+
updated_at: string
101+
browser_download_url: string
102+
}
103+
104+
export interface Uploader {
105+
login: string
106+
id: number
107+
node_id: string
108+
avatar_url: string
109+
gravatar_id: string
110+
url: string
111+
html_url: string
112+
followers_url: string
113+
following_url: string
114+
gists_url: string
115+
starred_url: string
116+
subscriptions_url: string
117+
organizations_url: string
118+
repos_url: string
119+
events_url: string
120+
received_events_url: string
121+
type: string
122+
site_admin: boolean
123+
}
124+
125+
const release = ref<Release>();
126+
127+
128+
fetch("https://api.github.com/repos/CynToolkit/cyn/releases/latest", {
129+
headers: {
130+
"Accept": "application/vnd.github+json",
131+
}
132+
})
133+
.then(response => response.json())
134+
.then((data: Release) => {
135+
console.log(data)
136+
release.value = data
137+
})
138+
</script>

0 commit comments

Comments
 (0)