2.0.1
This commit is contained in:
parent
41c182b58f
commit
6333561801
GPG key ID:
24001724CDB51342
27 changed files with 945 additions and 215 deletions
4
components.d.ts
vendored
4
components.d.ts
vendored
|
|
@ -7,9 +7,11 @@ export {}
|
|||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
ChipTag: typeof import('./src/components/ChipTag.vue')['default']
|
||||
DiscordLogo: typeof import('./src/components/DiscordLogo.vue')['default']
|
||||
FlowinityLogo: typeof import('./src/components/FlowinityLogo.vue')['default']
|
||||
FlowinityWordmark: typeof import('./src/components/FlowinityWordmark.vue')['default']
|
||||
Header: typeof import('./src/components/Header.vue')['default']
|
||||
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,13 +33,9 @@
|
|||
"description": null,
|
||||
"args": [],
|
||||
"type": {
|
||||
"kind": "NON_NULL",
|
||||
"name": null,
|
||||
"ofType": {
|
||||
"kind": "SCALAR",
|
||||
"name": "String",
|
||||
"ofType": null
|
||||
}
|
||||
"kind": "SCALAR",
|
||||
"name": "Date",
|
||||
"ofType": null
|
||||
},
|
||||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
|
|
@ -49,13 +45,9 @@
|
|||
"description": null,
|
||||
"args": [],
|
||||
"type": {
|
||||
"kind": "NON_NULL",
|
||||
"name": null,
|
||||
"ofType": {
|
||||
"kind": "SCALAR",
|
||||
"name": "String",
|
||||
"ofType": null
|
||||
}
|
||||
"kind": "SCALAR",
|
||||
"name": "String",
|
||||
"ofType": null
|
||||
},
|
||||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
|
|
@ -65,13 +57,21 @@
|
|||
"description": null,
|
||||
"args": [],
|
||||
"type": {
|
||||
"kind": "NON_NULL",
|
||||
"name": null,
|
||||
"ofType": {
|
||||
"kind": "ENUM",
|
||||
"name": "BannerType",
|
||||
"ofType": null
|
||||
}
|
||||
"kind": "ENUM",
|
||||
"name": "BannerType",
|
||||
"ofType": null
|
||||
},
|
||||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
},
|
||||
{
|
||||
"name": "content",
|
||||
"description": null,
|
||||
"args": [],
|
||||
"type": {
|
||||
"kind": "SCALAR",
|
||||
"name": "String",
|
||||
"ofType": null
|
||||
},
|
||||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
"name": null,
|
||||
"ofType": {
|
||||
"kind": "SCALAR",
|
||||
"name": "String",
|
||||
"name": "Date",
|
||||
"ofType": null
|
||||
}
|
||||
},
|
||||
|
|
@ -108,6 +108,18 @@
|
|||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
},
|
||||
{
|
||||
"name": "flowinityUser",
|
||||
"description": null,
|
||||
"args": [],
|
||||
"type": {
|
||||
"kind": "OBJECT",
|
||||
"name": "FlowinityUser",
|
||||
"ofType": null
|
||||
},
|
||||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
},
|
||||
{
|
||||
"name": "flowinityUserId",
|
||||
"description": null,
|
||||
|
|
@ -140,6 +152,22 @@
|
|||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
},
|
||||
{
|
||||
"name": "image",
|
||||
"description": "Resolvable URL to an image",
|
||||
"args": [],
|
||||
"type": {
|
||||
"kind": "NON_NULL",
|
||||
"name": null,
|
||||
"ofType": {
|
||||
"kind": "SCALAR",
|
||||
"name": "String",
|
||||
"ofType": null
|
||||
}
|
||||
},
|
||||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"description": null,
|
||||
|
|
@ -165,7 +193,7 @@
|
|||
"name": null,
|
||||
"ofType": {
|
||||
"kind": "SCALAR",
|
||||
"name": "String",
|
||||
"name": "Date",
|
||||
"ofType": null
|
||||
}
|
||||
},
|
||||
|
|
@ -261,6 +289,73 @@
|
|||
"enumValues": null,
|
||||
"possibleTypes": null
|
||||
},
|
||||
{
|
||||
"kind": "SCALAR",
|
||||
"name": "Date",
|
||||
"description": null,
|
||||
"isOneOf": null,
|
||||
"fields": null,
|
||||
"inputFields": null,
|
||||
"interfaces": null,
|
||||
"enumValues": null,
|
||||
"possibleTypes": null
|
||||
},
|
||||
{
|
||||
"kind": "OBJECT",
|
||||
"name": "FlowinityUser",
|
||||
"description": null,
|
||||
"isOneOf": null,
|
||||
"fields": [
|
||||
{
|
||||
"name": "avatar",
|
||||
"description": null,
|
||||
"args": [],
|
||||
"type": {
|
||||
"kind": "SCALAR",
|
||||
"name": "String",
|
||||
"ofType": null
|
||||
},
|
||||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"description": null,
|
||||
"args": [],
|
||||
"type": {
|
||||
"kind": "NON_NULL",
|
||||
"name": null,
|
||||
"ofType": {
|
||||
"kind": "SCALAR",
|
||||
"name": "Int",
|
||||
"ofType": null
|
||||
}
|
||||
},
|
||||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
},
|
||||
{
|
||||
"name": "username",
|
||||
"description": null,
|
||||
"args": [],
|
||||
"type": {
|
||||
"kind": "NON_NULL",
|
||||
"name": null,
|
||||
"ofType": {
|
||||
"kind": "SCALAR",
|
||||
"name": "String",
|
||||
"ofType": null
|
||||
}
|
||||
},
|
||||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
}
|
||||
],
|
||||
"inputFields": null,
|
||||
"interfaces": [],
|
||||
"enumValues": null,
|
||||
"possibleTypes": null
|
||||
},
|
||||
{
|
||||
"kind": "SCALAR",
|
||||
"name": "Int",
|
||||
|
|
@ -278,6 +373,35 @@
|
|||
"description": null,
|
||||
"isOneOf": null,
|
||||
"fields": [
|
||||
{
|
||||
"name": "announcement",
|
||||
"description": null,
|
||||
"args": [
|
||||
{
|
||||
"name": "id",
|
||||
"description": null,
|
||||
"type": {
|
||||
"kind": "NON_NULL",
|
||||
"name": null,
|
||||
"ofType": {
|
||||
"kind": "SCALAR",
|
||||
"name": "String",
|
||||
"ofType": null
|
||||
}
|
||||
},
|
||||
"defaultValue": null,
|
||||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
}
|
||||
],
|
||||
"type": {
|
||||
"kind": "OBJECT",
|
||||
"name": "Announcement",
|
||||
"ofType": null
|
||||
},
|
||||
"isDeprecated": false,
|
||||
"deprecationReason": null
|
||||
},
|
||||
{
|
||||
"name": "announcements",
|
||||
"description": null,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "troplo-website-next",
|
||||
"version": "0.0.0",
|
||||
"version": "2.0.1",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
|
|
@ -13,11 +13,15 @@
|
|||
"@graphql-codegen/cli": "^5.0.2",
|
||||
"@graphql-codegen/introspection": "^4.0.3",
|
||||
"@mdi/font": "^7.4.47",
|
||||
"@types/markdown-it": "^14.1.2",
|
||||
"@vue/apollo-composable": "^4.2.1",
|
||||
"core-js": "^3.37.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"graphql": "^16.9.0",
|
||||
"graphql-tag": "^2.12.6",
|
||||
"markdown-it": "^14.1.0",
|
||||
"pinia": "^2.2.2",
|
||||
"prettier": "^3.3.3",
|
||||
"roboto-fontface": "*",
|
||||
"vue": "^3.4.31",
|
||||
"vuetify": "^3.6.11"
|
||||
|
|
|
|||
16
public/images/crystal-icon.svg
Normal file
16
public/images/crystal-icon.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 193.2 206.7" style="enable-background:new 0 0 193.2 206.7;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:none;}
|
||||
</style>
|
||||
<g>
|
||||
<path d="M165.4,122l-50,49.9c-0.2,0.2-0.5,0.3-0.7,0.2l-68.3-18.3c-0.3-0.1-0.5-0.3-0.5-0.5L27.5,85.1c-0.1-0.3,0-0.5,0.2-0.7
|
||||
l50-49.9c0.2-0.2,0.5-0.3,0.7-0.2l68.3,18.3c0.3,0.1,0.5,0.3,0.5,0.5l18.3,68.2C165.7,121.6,165.6,121.8,165.4,122z M98.4,67.7
|
||||
L31.3,85.6c-0.1,0-0.2,0.2-0.1,0.3l49.1,49c0.1,0.1,0.3,0.1,0.3-0.1l18-67C98.7,67.8,98.5,67.6,98.4,67.7z" fill="white"/>
|
||||
<g>
|
||||
<rect class="st0" width="193.2" height="206.7"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 856 B |
BIN
public/images/flowinity-update-comms.png
Normal file
BIN
public/images/flowinity-update-comms.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
64
src/App.vue
64
src/App.vue
|
|
@ -1,51 +1,6 @@
|
|||
<template>
|
||||
<v-app>
|
||||
<v-main>
|
||||
<v-alert
|
||||
v-if="outages.length"
|
||||
class="mb-0 p-0"
|
||||
variant="tonal"
|
||||
color="red"
|
||||
:value="true"
|
||||
tile
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center justify-center">
|
||||
<span class="d-flex">
|
||||
<v-icon>mdi-alert-circle</v-icon>
|
||||
<span class="ml-2">
|
||||
You might be currently experiencing problems with:
|
||||
{{ outageName }}.
|
||||
</span></span
|
||||
>
|
||||
<v-btn
|
||||
href="https://status.troplo.com"
|
||||
size="small"
|
||||
color="red"
|
||||
variant="outlined"
|
||||
>Learn more</v-btn
|
||||
>
|
||||
</div>
|
||||
</v-alert>
|
||||
<v-alert
|
||||
v-for="banner in announcementsStore.banners"
|
||||
:key="banner.id"
|
||||
:value="true"
|
||||
variant="tonal"
|
||||
:type="banner.bannerType"
|
||||
:icon="banner.bannerType === 'error' ? 'mdi-alert-circle' : undefined"
|
||||
tile
|
||||
>
|
||||
<strong>UPCOMING:</strong>
|
||||
{{ banner.bannerText }}
|
||||
<template #append>
|
||||
<v-btn
|
||||
:to="`/announcements/${banner.id}`"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
>Learn more</v-btn
|
||||
>
|
||||
</template>
|
||||
</v-alert>
|
||||
<Header />
|
||||
<router-view />
|
||||
</v-main>
|
||||
|
|
@ -53,24 +8,5 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
import Header from "@/components/Header.vue"
|
||||
import { computed, onMounted, ref } from "vue"
|
||||
import { useAnnouncementsStore } from "@/stores/announcements.store"
|
||||
|
||||
const outages = ref<any[]>([])
|
||||
const announcementsStore = useAnnouncementsStore()
|
||||
|
||||
onMounted(() => {
|
||||
fetch("https://troplo-status.flowinity.workers.dev")
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
outages.value = data.data.filter((d) => d.attributes.status !== "up")
|
||||
})
|
||||
announcementsStore.getBanners()
|
||||
})
|
||||
|
||||
const outageName = computed(() => {
|
||||
return outages.value.map((o) => o.attributes.pronounceable_name).join(", ")
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
31
src/components/ChipTag.vue
Normal file
31
src/components/ChipTag.vue
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<v-chip
|
||||
:href="tag.link"
|
||||
:color="tag.color"
|
||||
:disabled="!tag.link"
|
||||
style="opacity: 1"
|
||||
>
|
||||
<v-img
|
||||
v-if="tag.icon === 'crystal'"
|
||||
src="/images/crystal-icon.svg"
|
||||
width="26"
|
||||
class="mx-n1"
|
||||
></v-img>
|
||||
<v-icon v-if="tag.icon !== 'crystal'">{{ tag.icon }}</v-icon>
|
||||
<template v-if="tag.icon"> </template>
|
||||
{{ tag.name }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
tag: {
|
||||
name: string
|
||||
link?: string
|
||||
color?: string
|
||||
icon?: string
|
||||
}
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
16
src/components/DiscordLogo.vue
Normal file
16
src/components/DiscordLogo.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36">
|
||||
<path
|
||||
:fill="theme.current.value.dark ? 'white' : 'black'"
|
||||
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTheme } from "vuetify"
|
||||
|
||||
const theme = useTheme()
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M418.455 0.303628C368.601 3.53963 317.099 15.4736 274.671 33.6216C247.274 45.3406 230.542 54.3696 204.955 71.2386C176.877 89.7506 157.205 105.979 130.432 132.715C92.391 170.705 65.015 208.32 43.462 252.215C24.648 290.532 12.494 328.601 5.50901 371.098C0.525014 401.415 -0.0489904 409.979 0.00300957 453.215C0.0460096 488.587 0.307011 495.159 2.26401 510.012C12.064 584.424 36.235 647.831 76.868 705.715C88.227 721.897 108.825 746.978 121.86 760.5V760.5C123.716 762.425 126.973 761.118 126.983 758.444L127.455 635.5L127.933 510.88C127.948 507.16 128.87 503.498 130.62 500.215V500.215C134.346 493.224 140.794 486.918 147.366 483.836C152.023 481.652 154.372 481.215 161.455 481.215C168.538 481.215 170.887 481.652 175.544 483.836C182.369 487.037 188.65 493.382 192.253 500.715V500.715C194.031 504.333 194.959 508.311 194.965 512.342L195.22 665.376L195.464 811.774C195.477 819.73 199.528 827.136 206.22 831.44V831.44C219.113 839.731 233.998 848.715 234.844 848.715C235.18 848.715 235.455 724.137 235.455 571.875C235.455 301.89 235.503 294.849 237.38 287.507C243.152 264.94 260.408 246.135 281.881 239.012C289.036 236.639 291.492 236.334 303.455 236.334C315.418 236.334 317.874 236.639 325.029 239.012C346.502 246.135 363.758 264.94 369.53 287.507C371.409 294.855 371.455 302.194 371.455 595.356V893.375C371.455 894.718 372.392 895.879 373.705 896.164V896.164C376.489 896.767 387.479 898.218 401.955 899.893C414.535 901.348 479.439 901.702 491.685 900.382V900.382C496.084 899.907 499.42 896.197 499.426 891.773L499.685 708.382L499.943 525.666C499.951 520.069 500.875 514.512 502.679 509.215V509.215C506.467 498.094 511.754 489.557 519.98 481.282C527.75 473.464 535.038 468.745 545.213 464.94C553.437 461.865 572.642 460.71 582.746 462.683C605.287 467.084 624.838 484.756 633.131 508.225V508.225C635 513.513 635.963 519.08 635.979 524.689L636.455 689.875L636.913 848.991C636.932 855.678 643.978 860.012 649.955 857.013V857.013C664.911 849.51 682.159 839.593 695.901 830.595V830.595C701.863 826.692 705.455 820.046 705.455 812.92V583.211C705.455 413.319 705.777 340.339 706.546 336.18C708.763 324.185 716.558 313.757 727.23 308.507C733.573 305.387 734.5 305.215 744.939 305.219C755.049 305.222 758.649 305.954 763.5 308.507C774.055 314.061 779.116 322.479 781.905 333.185C783.281 338.467 783.455 362.492 783.455 547.048C783.455 741.465 783.564 754.871 785.131 753.587C786.054 752.833 791.159 746.998 796.477 740.621C856.831 668.25 888.647 594.484 899.156 502.556C901.658 480.679 901.662 423.739 899.164 401.215C893.347 348.771 882.256 306.938 862.869 264.33C824.083 179.088 751.55 100.867 667.955 54.1346C618.093 26.2596 566.07 9.88263 502.955 2.19063C490.626 0.687629 432.526 -0.609372 418.455 0.303628Z"
|
||||
:fill="fill ? fill : theme.current.value.dark ? 'white' : 'black'"
|
||||
:fill="theme.current.value.dark ? 'white' : 'black'"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -12,12 +12,6 @@
|
|||
<script setup lang="ts">
|
||||
import { useTheme } from "vuetify"
|
||||
|
||||
const props = defineProps<{
|
||||
gradient1: string
|
||||
gradient2: string
|
||||
fill: string
|
||||
}>()
|
||||
|
||||
const theme = useTheme()
|
||||
</script>
|
||||
|
||||
|
|
|
|||
33
src/components/FlowinityWordmark.vue
Normal file
33
src/components/FlowinityWordmark.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<svg
|
||||
width="2042"
|
||||
height="512"
|
||||
viewBox="0 0 2042 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
:fill="theme.current.value.dark ? '#fff' : '#121212'"
|
||||
>
|
||||
<g clip-path="url(#clip0_319_20)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M512 256C512 321.439 487.446 381.144 447.049 426.404V196.232C447.049 184.021 437.15 174.121 424.939 174.121C412.727 174.121 402.828 184.021 402.828 196.232V465.735C390.664 474.266 377.724 481.766 364.134 488.108V306.785C364.134 285.034 346.501 267.401 324.75 267.401C302.998 267.401 285.365 285.034 285.365 306.785V510.334C275.729 511.435 265.931 512 256 512C241.764 512 227.8 510.838 214.197 508.604V174.121C214.197 152.37 196.564 134.737 174.812 134.737C153.061 134.737 135.428 152.37 135.428 174.122V481.885C128.31 478.078 121.394 473.945 114.699 469.505V294.348C114.699 283.282 105.727 274.31 94.6608 274.31C83.5943 274.31 74.623 283.282 74.623 294.348V436.661C28.5064 390.363 0 326.51 0 256C0 114.615 114.615 0 256 0C397.385 0 512 114.615 512 256Z"
|
||||
/>
|
||||
<path
|
||||
d="M587.818 419V139.727H755.273V169.727H621.636V264.091H742.727V294.091H621.636V419H587.818ZM825.651 139.727V419H793.47V139.727H825.651ZM954.325 423.364C935.416 423.364 918.825 418.864 904.553 409.864C890.371 400.864 879.28 388.273 871.28 372.091C863.371 355.909 859.416 337 859.416 315.364C859.416 293.545 863.371 274.5 871.28 258.227C879.28 241.955 890.371 229.318 904.553 220.318C918.825 211.318 935.416 206.818 954.325 206.818C973.235 206.818 989.78 211.318 1003.96 220.318C1018.23 229.318 1029.33 241.955 1037.23 258.227C1045.23 274.5 1049.23 293.545 1049.23 315.364C1049.23 337 1045.23 355.909 1037.23 372.091C1029.33 388.273 1018.23 400.864 1003.96 409.864C989.78 418.864 973.235 423.364 954.325 423.364ZM954.325 394.455C968.689 394.455 980.507 390.773 989.78 383.409C999.053 376.045 1005.92 366.364 1010.37 354.364C1014.83 342.364 1017.05 329.364 1017.05 315.364C1017.05 301.364 1014.83 288.318 1010.37 276.227C1005.92 264.136 999.053 254.364 989.78 246.909C980.507 239.455 968.689 235.727 954.325 235.727C939.962 235.727 928.144 239.455 918.871 246.909C909.598 254.364 902.735 264.136 898.28 276.227C893.825 288.318 891.598 301.364 891.598 315.364C891.598 329.364 893.825 342.364 898.28 354.364C902.735 366.364 909.598 376.045 918.871 383.409C928.144 390.773 939.962 394.455 954.325 394.455ZM1123.33 419L1059.51 209.545H1093.33L1138.6 369.909H1140.78L1185.51 209.545H1219.87L1264.06 369.364H1266.24L1311.51 209.545H1345.33L1281.51 419H1249.87L1204.06 258.091H1200.78L1154.97 419H1123.33ZM1372.51 419V209.545H1404.7V419H1372.51ZM1388.88 174.636C1382.61 174.636 1377.2 172.5 1372.65 168.227C1368.2 163.955 1365.97 158.818 1365.97 152.818C1365.97 146.818 1368.2 141.682 1372.65 137.409C1377.2 133.136 1382.61 131 1388.88 131C1395.15 131 1400.51 133.136 1404.97 137.409C1409.51 141.682 1411.79 146.818 1411.79 152.818C1411.79 158.818 1409.51 163.955 1404.97 168.227C1400.51 172.5 1395.15 174.636 1388.88 174.636ZM1480.46 293V419H1448.28V209.545H1479.37V242.273H1482.1C1487.01 231.636 1494.46 223.091 1504.46 216.636C1514.46 210.091 1527.37 206.818 1543.19 206.818C1557.37 206.818 1569.78 209.727 1580.42 215.545C1591.05 221.273 1599.33 230 1605.23 241.727C1611.14 253.364 1614.1 268.091 1614.1 285.909V419H1581.92V288.091C1581.92 271.636 1577.64 258.818 1569.1 249.636C1560.55 240.364 1548.83 235.727 1533.92 235.727C1523.64 235.727 1514.46 237.955 1506.37 242.409C1498.37 246.864 1492.05 253.364 1487.42 261.909C1482.78 270.455 1480.46 280.818 1480.46 293ZM1657.54 419V209.545H1689.73V419H1657.54ZM1673.91 174.636C1667.64 174.636 1662.23 172.5 1657.68 168.227C1653.23 163.955 1651 158.818 1651 152.818C1651 146.818 1653.23 141.682 1657.68 137.409C1662.23 133.136 1667.64 131 1673.91 131C1680.18 131 1685.54 133.136 1690 137.409C1694.54 141.682 1696.82 146.818 1696.82 152.818C1696.82 158.818 1694.54 163.955 1690 168.227C1685.54 172.5 1680.18 174.636 1673.91 174.636ZM1824.4 209.545V236.818H1715.85V209.545H1824.4ZM1747.49 159.364H1779.67V359C1779.67 368.091 1780.99 374.909 1783.63 379.455C1786.35 383.909 1789.81 386.909 1793.99 388.455C1798.26 389.909 1802.76 390.636 1807.49 390.636C1811.04 390.636 1813.95 390.455 1816.22 390.091C1818.49 389.636 1820.31 389.273 1821.67 389L1828.22 417.909C1826.04 418.727 1822.99 419.545 1819.08 420.364C1815.17 421.273 1810.22 421.727 1804.22 421.727C1795.13 421.727 1786.22 419.773 1777.49 415.864C1768.85 411.955 1761.67 406 1755.95 398C1750.31 390 1747.49 379.909 1747.49 367.727V159.364ZM1878.18 497.545C1872.72 497.545 1867.86 497.091 1863.59 496.182C1859.31 495.364 1856.36 494.545 1854.72 493.727L1862.9 465.364C1870.72 467.364 1877.63 468.091 1883.63 467.545C1889.63 467 1894.95 464.318 1899.59 459.5C1904.31 454.773 1908.63 447.091 1912.54 436.455L1918.54 420.091L1841.09 209.545H1875.99L1933.81 376.455H1935.99L1993.81 209.545H2028.72L1939.81 449.545C1935.81 460.364 1930.86 469.318 1924.95 476.409C1919.04 483.591 1912.18 488.909 1904.36 492.364C1896.63 495.818 1887.9 497.545 1878.18 497.545Z"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_319_20">
|
||||
<rect width="2042" height="512" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTheme } from "vuetify"
|
||||
|
||||
const theme = useTheme()
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,42 +1,69 @@
|
|||
<template>
|
||||
<div id="header">
|
||||
<v-toolbar color="surface">
|
||||
<v-app-bar
|
||||
color="surface"
|
||||
:extension-height="announcementsStore.navbarOffset - 64"
|
||||
>
|
||||
<template #extension>
|
||||
<div class="d-flex flex-column w-100">
|
||||
<v-alert
|
||||
v-for="banner in announcementsStore.banners"
|
||||
:key="banner.id"
|
||||
:value="true"
|
||||
variant="tonal"
|
||||
:type="banner.bannerType"
|
||||
:icon="
|
||||
banner.bannerType === 'error' ? 'mdi-alert-circle' : undefined
|
||||
"
|
||||
tile
|
||||
:id="`banner-${banner.id}`"
|
||||
>
|
||||
<strong v-if="banner.id !== 'status'">UPCOMING:</strong>
|
||||
{{ banner.bannerText }}
|
||||
<template #append>
|
||||
<v-btn
|
||||
:to="`/news/${banner.id}`"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
v-if="banner.id !== 'status'"
|
||||
>Learn more</v-btn
|
||||
>
|
||||
<v-btn
|
||||
v-else
|
||||
size="small"
|
||||
variant="outlined"
|
||||
href="https://status.troplo.com"
|
||||
target="_blank"
|
||||
>Learn More</v-btn
|
||||
>
|
||||
</template>
|
||||
</v-alert>
|
||||
</div>
|
||||
</template>
|
||||
<v-app-bar-nav-icon
|
||||
@click.stop="sidebar = !sidebar"
|
||||
v-if="display.mobile.value"
|
||||
></v-app-bar-nav-icon>
|
||||
<v-toolbar-title
|
||||
class="troplo-title"
|
||||
@click="$router.push('/')"
|
||||
@click="router.push('/')"
|
||||
style="cursor: pointer"
|
||||
>Troplo's Website</v-toolbar-title
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
<div class="d-flex mr-4" style="gap: 4px" v-if="!display.mobile.value">
|
||||
<v-btn
|
||||
text
|
||||
variant="text"
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:key="item.path"
|
||||
:to="item.path"
|
||||
style="text-transform: unset !important"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="false"
|
||||
class="ml-1"
|
||||
text
|
||||
@click="$vuetify.theme.dark = !$vuetify.theme.dark"
|
||||
>
|
||||
<v-list-item-title>
|
||||
<v-icon>{{
|
||||
$vuetify.theme.dark ? "mdi-lightbulb-on" : "mdi-lightbulb-outline"
|
||||
}}</v-icon>
|
||||
</v-list-item-title>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-toolbar>
|
||||
</v-app-bar>
|
||||
<v-navigation-drawer
|
||||
floating
|
||||
color="dark"
|
||||
|
|
@ -47,35 +74,56 @@
|
|||
>
|
||||
<v-divider></v-divider>
|
||||
<v-list nav dense>
|
||||
<v-list-item v-for="item in items" :key="item.id" link :to="item.path">
|
||||
<v-icon>{{ item.icon }}</v-icon>
|
||||
|
||||
<v-list-item
|
||||
v-for="item in items"
|
||||
:key="item.path"
|
||||
link
|
||||
:to="item.path"
|
||||
>
|
||||
<template #prepend>
|
||||
<v-icon>{{ item.icon }}</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item link>
|
||||
<v-icon>{{
|
||||
theme.current.value.dark
|
||||
? "mdi-lightbulb-on"
|
||||
: "mdi-lightbulb-outline"
|
||||
}}</v-icon>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDisplay, useTheme } from "vuetify"
|
||||
import { ref } from "vue"
|
||||
import { useDisplay } from "vuetify"
|
||||
import { onMounted, ref } from "vue"
|
||||
import { useAnnouncementsStore } from "@/stores/announcements.store"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
const display = useDisplay()
|
||||
const theme = useTheme()
|
||||
const announcementsStore = useAnnouncementsStore()
|
||||
|
||||
const sidebar = ref(false)
|
||||
const items = ref([
|
||||
{ id: 1, title: "Home", icon: "mdi-home", path: "/" },
|
||||
{ id: 3, title: "Contact", icon: "mdi-email", path: "/contact" }
|
||||
const items = ref<
|
||||
{
|
||||
title: string
|
||||
icon: string
|
||||
path: string
|
||||
disabled?: boolean
|
||||
}[]
|
||||
>([
|
||||
{ title: "Home", icon: "mdi-home", path: "/" },
|
||||
{ title: "Contact", icon: "mdi-email", path: "/contact" },
|
||||
{
|
||||
title: "Blog & Updates",
|
||||
icon: "mdi-newspaper",
|
||||
path: "/news"
|
||||
}
|
||||
])
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
onMounted(async () => {
|
||||
announcementsStore.banners = await announcementsStore.getAnnouncements({
|
||||
banner: true
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
|
|||
* Therefore it is highly recommended to use the babel or swc plugin for production.
|
||||
*/
|
||||
const documents = {
|
||||
"\n query Announcements($input: AnnouncementsInput!) {\n announcements(input: $input) {\n id\n title\n description\n createdAt\n updatedAt\n banner\n bannerText\n bannerExpiry\n bannerType\n flowinityUserId\n }\n }\n": types.AnnouncementsDocument,
|
||||
"\n query Announcement($announcementId: String!) {\n announcement(id: $announcementId) {\n id\n title\n description\n content\n createdAt\n updatedAt\n bannerExpiry\n image\n flowinityUser {\n username\n avatar\n }\n }\n }\n": types.AnnouncementDocument,
|
||||
"\n query Announcements($input: AnnouncementsInput!) {\n announcements(input: $input) {\n id\n title\n description\n createdAt\n updatedAt\n image\n banner\n bannerText\n bannerExpiry\n bannerType\n flowinityUserId\n }\n }\n": types.AnnouncementsDocument,
|
||||
"\n query StatusPage {\n status {\n name\n status\n }\n }\n": types.StatusPageDocument,
|
||||
};
|
||||
|
||||
|
|
@ -34,7 +35,11 @@ export function graphql(source: string): unknown;
|
|||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n query Announcements($input: AnnouncementsInput!) {\n announcements(input: $input) {\n id\n title\n description\n createdAt\n updatedAt\n banner\n bannerText\n bannerExpiry\n bannerType\n flowinityUserId\n }\n }\n"): (typeof documents)["\n query Announcements($input: AnnouncementsInput!) {\n announcements(input: $input) {\n id\n title\n description\n createdAt\n updatedAt\n banner\n bannerText\n bannerExpiry\n bannerType\n flowinityUserId\n }\n }\n"];
|
||||
export function graphql(source: "\n query Announcement($announcementId: String!) {\n announcement(id: $announcementId) {\n id\n title\n description\n content\n createdAt\n updatedAt\n bannerExpiry\n image\n flowinityUser {\n username\n avatar\n }\n }\n }\n"): (typeof documents)["\n query Announcement($announcementId: String!) {\n announcement(id: $announcementId) {\n id\n title\n description\n content\n createdAt\n updatedAt\n bannerExpiry\n image\n flowinityUser {\n username\n avatar\n }\n }\n }\n"];
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n query Announcements($input: AnnouncementsInput!) {\n announcements(input: $input) {\n id\n title\n description\n createdAt\n updatedAt\n image\n banner\n bannerText\n bannerExpiry\n bannerType\n flowinityUserId\n }\n }\n"): (typeof documents)["\n query Announcements($input: AnnouncementsInput!) {\n announcements(input: $input) {\n id\n title\n description\n createdAt\n updatedAt\n image\n banner\n bannerText\n bannerExpiry\n bannerType\n flowinityUserId\n }\n }\n"];
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -14,20 +14,25 @@ export type Scalars = {
|
|||
Boolean: { input: boolean; output: boolean; }
|
||||
Int: { input: number; output: number; }
|
||||
Float: { input: number; output: number; }
|
||||
Date: { input: any; output: any; }
|
||||
};
|
||||
|
||||
export type Announcement = {
|
||||
__typename?: 'Announcement';
|
||||
banner: Scalars['String']['output'];
|
||||
bannerExpiry: Scalars['String']['output'];
|
||||
bannerText: Scalars['String']['output'];
|
||||
bannerType: BannerType;
|
||||
createdAt: Scalars['String']['output'];
|
||||
bannerExpiry?: Maybe<Scalars['Date']['output']>;
|
||||
bannerText?: Maybe<Scalars['String']['output']>;
|
||||
bannerType?: Maybe<BannerType>;
|
||||
content?: Maybe<Scalars['String']['output']>;
|
||||
createdAt: Scalars['Date']['output'];
|
||||
description: Scalars['String']['output'];
|
||||
flowinityUser?: Maybe<FlowinityUser>;
|
||||
flowinityUserId: Scalars['Int']['output'];
|
||||
id: Scalars['String']['output'];
|
||||
/** Resolvable URL to an image */
|
||||
image: Scalars['String']['output'];
|
||||
title: Scalars['String']['output'];
|
||||
updatedAt: Scalars['String']['output'];
|
||||
updatedAt: Scalars['Date']['output'];
|
||||
};
|
||||
|
||||
export type AnnouncementsInput = {
|
||||
|
|
@ -44,14 +49,27 @@ export enum BannerType {
|
|||
Warning = 'warning'
|
||||
}
|
||||
|
||||
export type FlowinityUser = {
|
||||
__typename?: 'FlowinityUser';
|
||||
avatar?: Maybe<Scalars['String']['output']>;
|
||||
id: Scalars['Int']['output'];
|
||||
username: Scalars['String']['output'];
|
||||
};
|
||||
|
||||
export type Query = {
|
||||
__typename?: 'Query';
|
||||
announcement?: Maybe<Announcement>;
|
||||
announcements: Array<Announcement>;
|
||||
information: Scalars['String']['output'];
|
||||
status: Array<StatusMonitor>;
|
||||
};
|
||||
|
||||
|
||||
export type QueryAnnouncementArgs = {
|
||||
id: Scalars['String']['input'];
|
||||
};
|
||||
|
||||
|
||||
export type QueryAnnouncementsArgs = {
|
||||
input: AnnouncementsInput;
|
||||
};
|
||||
|
|
@ -70,12 +88,19 @@ export type StatusMonitor = {
|
|||
status: Status;
|
||||
};
|
||||
|
||||
export type AnnouncementQueryVariables = Exact<{
|
||||
announcementId: Scalars['String']['input'];
|
||||
}>;
|
||||
|
||||
|
||||
export type AnnouncementQuery = { __typename?: 'Query', announcement?: { __typename?: 'Announcement', id: string, title: string, description: string, content?: string | null, createdAt: any, updatedAt: any, bannerExpiry?: any | null, image: string, flowinityUser?: { __typename?: 'FlowinityUser', username: string, avatar?: string | null } | null } | null };
|
||||
|
||||
export type AnnouncementsQueryVariables = Exact<{
|
||||
input: AnnouncementsInput;
|
||||
}>;
|
||||
|
||||
|
||||
export type AnnouncementsQuery = { __typename?: 'Query', announcements: Array<{ __typename?: 'Announcement', id: string, title: string, description: string, createdAt: string, updatedAt: string, banner: string, bannerText: string, bannerExpiry: string, bannerType: BannerType, flowinityUserId: number }> };
|
||||
export type AnnouncementsQuery = { __typename?: 'Query', announcements: Array<{ __typename?: 'Announcement', id: string, title: string, description: string, createdAt: any, updatedAt: any, image: string, banner: string, bannerText?: string | null, bannerExpiry?: any | null, bannerType?: BannerType | null, flowinityUserId: number }> };
|
||||
|
||||
export type StatusPageQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
|
@ -83,5 +108,6 @@ export type StatusPageQueryVariables = Exact<{ [key: string]: never; }>;
|
|||
export type StatusPageQuery = { __typename?: 'Query', status: Array<{ __typename?: 'StatusMonitor', name: string, status: Status }> };
|
||||
|
||||
|
||||
export const AnnouncementsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Announcements"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AnnouncementsInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"announcements"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"banner"}},{"kind":"Field","name":{"kind":"Name","value":"bannerText"}},{"kind":"Field","name":{"kind":"Name","value":"bannerExpiry"}},{"kind":"Field","name":{"kind":"Name","value":"bannerType"}},{"kind":"Field","name":{"kind":"Name","value":"flowinityUserId"}}]}}]}}]} as unknown as DocumentNode<AnnouncementsQuery, AnnouncementsQueryVariables>;
|
||||
export const AnnouncementDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Announcement"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"announcementId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"announcement"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"announcementId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"bannerExpiry"}},{"kind":"Field","name":{"kind":"Name","value":"image"}},{"kind":"Field","name":{"kind":"Name","value":"flowinityUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]}}]}}]} as unknown as DocumentNode<AnnouncementQuery, AnnouncementQueryVariables>;
|
||||
export const AnnouncementsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Announcements"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AnnouncementsInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"announcements"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"image"}},{"kind":"Field","name":{"kind":"Name","value":"banner"}},{"kind":"Field","name":{"kind":"Name","value":"bannerText"}},{"kind":"Field","name":{"kind":"Name","value":"bannerExpiry"}},{"kind":"Field","name":{"kind":"Name","value":"bannerType"}},{"kind":"Field","name":{"kind":"Name","value":"flowinityUserId"}}]}}]}}]} as unknown as DocumentNode<AnnouncementsQuery, AnnouncementsQueryVariables>;
|
||||
export const StatusPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"StatusPage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}}]}}]} as unknown as DocumentNode<StatusPageQuery, StatusPageQueryVariables>;
|
||||
20
src/graphql/announcements/announcement.query.ts
Normal file
20
src/graphql/announcements/announcement.query.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import gql from "graphql-tag"
|
||||
|
||||
export const AnnouncementQuery = gql`
|
||||
query Announcement($announcementId: String!) {
|
||||
announcement(id: $announcementId) {
|
||||
id
|
||||
title
|
||||
description
|
||||
content
|
||||
createdAt
|
||||
updatedAt
|
||||
bannerExpiry
|
||||
image
|
||||
flowinityUser {
|
||||
username
|
||||
avatar
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -8,6 +8,7 @@ export const AnnouncementsQuery = gql`
|
|||
description
|
||||
createdAt
|
||||
updatedAt
|
||||
image
|
||||
banner
|
||||
bannerText
|
||||
bannerExpiry
|
||||
|
|
|
|||
13
src/lib/dayjs.ts
Normal file
13
src/lib/dayjs.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/**
|
||||
* plugins/dayjs.ts
|
||||
*/
|
||||
|
||||
import dayjs from "dayjs";
|
||||
import advancedFormat from "dayjs/plugin/advancedFormat";
|
||||
import relativeTime from "dayjs/plugin/relativeTime";
|
||||
import customParseFormat from "dayjs/plugin/customParseFormat";
|
||||
|
||||
dayjs.extend(advancedFormat);
|
||||
dayjs.extend(relativeTime);
|
||||
dayjs.extend(customParseFormat);
|
||||
export default dayjs;
|
||||
16
src/lib/mdAnnouncements.ts
Normal file
16
src/lib/mdAnnouncements.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import MarkdownIt from "markdown-it"
|
||||
|
||||
const md = new MarkdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: false,
|
||||
breaks: true,
|
||||
quotes: "“”‘’",
|
||||
langPrefix: "language-",
|
||||
xhtmlOut: true
|
||||
})
|
||||
|
||||
const mdNoHtml = new MarkdownIt("commonmark", {})
|
||||
|
||||
export default md
|
||||
export { mdNoHtml }
|
||||
|
|
@ -5,7 +5,9 @@
|
|||
<v-container class="text-center">
|
||||
<p class="text-h4">Not Found.</p>
|
||||
<p class="subtitle">This route does not exist.</p>
|
||||
<v-btn text @click="$router.push('/')">Go Home</v-btn>
|
||||
<v-btn variant="tonal" class="mt-2" @click="$router.push('/')"
|
||||
>Go Home</v-btn
|
||||
>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
|
@ -13,8 +13,18 @@
|
|||
>
|
||||
<v-card class="rounded-xl" elevation="8">
|
||||
<br />
|
||||
<v-icon v-if="contact.icon">{{ contact.icon }}</v-icon>
|
||||
<FlowinityLogo style="width: 24px" v-else />
|
||||
<v-icon
|
||||
v-if="contact.icon !== 'flowinity' && contact.icon !== 'discord'"
|
||||
>{{ contact.icon }}</v-icon
|
||||
>
|
||||
<FlowinityLogo
|
||||
style="width: 24px"
|
||||
v-else-if="contact.icon === 'flowinity'"
|
||||
/>
|
||||
<DiscordLogo
|
||||
style="width: 24px"
|
||||
v-else-if="contact.icon === 'discord'"
|
||||
/>
|
||||
<v-card-title class="justify-center">{{
|
||||
contact.title
|
||||
}}</v-card-title>
|
||||
|
|
@ -31,6 +41,7 @@
|
|||
|
||||
<script>
|
||||
import FlowinityLogo from "@/components/FlowinityLogo.vue"
|
||||
import DiscordLogo from "@/components/DiscordLogo.vue"
|
||||
|
||||
export default {
|
||||
name: "Contact",
|
||||
|
|
@ -39,7 +50,7 @@ export default {
|
|||
contacts: [
|
||||
{
|
||||
id: 0,
|
||||
icon: null,
|
||||
icon: "flowinity",
|
||||
title: "Flowinity",
|
||||
displayName: "Troplo",
|
||||
url: "https://flowinity.com/u/Troplo"
|
||||
|
|
@ -60,7 +71,7 @@ export default {
|
|||
},*/
|
||||
{
|
||||
id: 3,
|
||||
icon: "mdi-discord",
|
||||
icon: "discord",
|
||||
title: "Discord",
|
||||
displayName: "@troplo",
|
||||
url: "https://discord.com/users/692259321907773460"
|
||||
|
|
@ -104,6 +115,7 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
DiscordLogo,
|
||||
FlowinityLogo
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,97 @@
|
|||
<template>
|
||||
<div id="projects">
|
||||
<v-container :width="display.lgAndDown.value ? '100%' : '70%'">
|
||||
<v-carousel
|
||||
:style="`height: calc(100vh - ${announcementsStore.navbarOffset}px)`"
|
||||
hide-delimiters
|
||||
cycle
|
||||
:show-arrows="!display.mobile.value"
|
||||
:interval="7000"
|
||||
>
|
||||
<v-carousel-item
|
||||
v-for="(project, index) in carousel"
|
||||
:key="index"
|
||||
gradient="to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)"
|
||||
:src="project.src"
|
||||
cover
|
||||
class="position-relative"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column align-center justify-center w-100 h-100 cursor-auto"
|
||||
>
|
||||
<v-card
|
||||
class="d-flex flex-column align-center justify-center rounded-xl pb-4 px-4"
|
||||
style="background: rgb(18, 18, 18, 0)"
|
||||
:elevation="0"
|
||||
>
|
||||
<v-card-title
|
||||
class="text-h3 d-flex justify-center"
|
||||
style="text-shadow: 0 0 10px black"
|
||||
>
|
||||
<component
|
||||
:is="project.logo"
|
||||
v-if="project.logo"
|
||||
style="width: 52px"
|
||||
class="mr-4"
|
||||
/>
|
||||
{{ project.name }}
|
||||
</v-card-title>
|
||||
|
||||
<p class="text-center" style="text-shadow: 0 0 10px black">
|
||||
{{ project.description }}
|
||||
</p>
|
||||
<v-btn
|
||||
v-for="link in project.links"
|
||||
:key="link.name"
|
||||
color="blue"
|
||||
class="mt-4"
|
||||
:variant="link.link || link.click ? 'elevated' : 'text'"
|
||||
:href="link.link"
|
||||
:ripple="false"
|
||||
target="_blank"
|
||||
@click="link.click && link.click()"
|
||||
>
|
||||
<v-icon class="mr-2" v-if="link.link"> mdi-open-in-new </v-icon>
|
||||
{{ link.name }}
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-carousel-item>
|
||||
<v-btn
|
||||
icon
|
||||
class="position-absolute mb-6"
|
||||
style="bottom: 0; left: 50%; transform: translateX(-50%)"
|
||||
@click="scrollToProjects"
|
||||
>
|
||||
<v-icon>mdi-arrow-down</v-icon>
|
||||
</v-btn>
|
||||
</v-carousel>
|
||||
<v-container id="projects-list" :fluid="true">
|
||||
<p class="justify-center text-center text-h4 mb-4">My Projects</p>
|
||||
<v-row>
|
||||
<v-col lg="3" v-for="(project, index) in getVisible" :key="index">
|
||||
<v-card class="rounded-xl troplo-p" elevation="8">
|
||||
<v-col
|
||||
v-for="(project, index) in getVisible"
|
||||
:key="index"
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="3"
|
||||
xl="4"
|
||||
>
|
||||
<v-card
|
||||
class="rounded-xl troplo-p"
|
||||
elevation="8"
|
||||
:color="highlight === project.id ? '#303030' : ''"
|
||||
>
|
||||
<v-hover>
|
||||
<template v-slot:default="{ isHovering, props }">
|
||||
<v-img
|
||||
style="min-height: 100px"
|
||||
v-bind="props"
|
||||
:alt="'Image of ' + project.name"
|
||||
:src="getImage(project.internalName)"
|
||||
>
|
||||
<a :href="getImage(project.internalName)" target="_blank">
|
||||
<v-overlay
|
||||
:model-value="isHovering"
|
||||
:model-value="isHovering!"
|
||||
class="align-center justify-center"
|
||||
:contained="true"
|
||||
scrim="#000000"
|
||||
|
|
@ -24,6 +101,18 @@
|
|||
>
|
||||
</v-overlay>
|
||||
</a>
|
||||
<template #placeholder>
|
||||
<v-row
|
||||
align="center"
|
||||
class="fill-height ma-0"
|
||||
justify="center"
|
||||
>
|
||||
<v-progress-circular
|
||||
color="grey lighten-5"
|
||||
indeterminate
|
||||
/>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-img>
|
||||
</template>
|
||||
</v-hover>
|
||||
|
|
@ -52,38 +141,21 @@
|
|||
<v-card-title class="text-wrap">Information</v-card-title>
|
||||
|
||||
<v-card-text class="d-flex flex-wrap text-wrap" style="gap: 6px">
|
||||
<v-chip
|
||||
v-for="tag in project.tags"
|
||||
:key="tag.id"
|
||||
:href="tag.link"
|
||||
:color="tag.color"
|
||||
:disabled="!tag.link"
|
||||
class="troplo-p"
|
||||
:text-color="tag.textColor || 'white'"
|
||||
style="opacity: 1"
|
||||
>
|
||||
<v-img
|
||||
v-if="tag.icon === 'crystal'"
|
||||
src="../assets/icons/crystal-icon.svg"
|
||||
width="30"
|
||||
height="30"
|
||||
></v-img>
|
||||
<v-icon v-if="tag.icon !== 'crystal'">{{ tag.icon }}</v-icon>
|
||||
<template v-if="tag.icon"> </template>
|
||||
{{ tag.name }}
|
||||
</v-chip>
|
||||
<ChipTag v-for="tag in project.tags" :key="tag.name" :tag="tag" />
|
||||
</v-card-text>
|
||||
|
||||
<v-divider v-if="project.links.length" class="mx-4"></v-divider>
|
||||
|
||||
<v-card-actions v-if="project.links.length">
|
||||
<v-card-actions v-if="project.links.length" class="mx-2">
|
||||
<v-btn
|
||||
v-for="link in project.links"
|
||||
:key="link.name"
|
||||
color="blue"
|
||||
text
|
||||
variant="text"
|
||||
target="_blank"
|
||||
:href="link.link"
|
||||
>
|
||||
<v-icon v-if="link.icon" class="mr-1">{{ link.icon }}</v-icon>
|
||||
{{ link.name }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
|
|
@ -97,9 +169,14 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue"
|
||||
import { useDisplay } from "vuetify"
|
||||
import { useAnnouncementsStore } from "@/stores/announcements.store"
|
||||
import ChipTag from "@/components/ChipTag.vue"
|
||||
import FlowinityLogo from "@/components/FlowinityLogo.vue"
|
||||
|
||||
const display = useDisplay()
|
||||
|
||||
const highlight = ref<number | null>(null)
|
||||
|
||||
enum Tags {
|
||||
Active,
|
||||
Vue,
|
||||
|
|
@ -113,9 +190,12 @@ enum Tags {
|
|||
Inactive,
|
||||
DevelopmentHalted,
|
||||
Crystal,
|
||||
NoLongerAffiliated
|
||||
NoLongerAffiliated,
|
||||
New
|
||||
}
|
||||
|
||||
const announcementsStore = useAnnouncementsStore()
|
||||
|
||||
const tags = {
|
||||
[Tags.Active]: {
|
||||
name: "Active",
|
||||
|
|
@ -126,8 +206,7 @@ const tags = {
|
|||
name: "Vue",
|
||||
icon: "mdi-vuejs",
|
||||
color: "#42b883",
|
||||
link: "https://vuejs.org",
|
||||
textColor: "black"
|
||||
link: "https://vuejs.org"
|
||||
},
|
||||
[Tags.Vuetify]: {
|
||||
name: "Vuetify",
|
||||
|
|
@ -162,12 +241,14 @@ const tags = {
|
|||
[Tags.GraphQL]: {
|
||||
name: "GraphQL",
|
||||
icon: "mdi-graphql",
|
||||
link: "https://graphql.org"
|
||||
link: "https://graphql.org",
|
||||
color: "#E10098"
|
||||
},
|
||||
[Tags.Firebase]: {
|
||||
name: "Google APIs",
|
||||
icon: "mdi-firebase",
|
||||
link: "https://firebase.com"
|
||||
link: "https://firebase.com",
|
||||
color: "#FFCA28"
|
||||
},
|
||||
[Tags.Inactive]: {
|
||||
name: "Discontinued",
|
||||
|
|
@ -181,7 +262,6 @@ const tags = {
|
|||
},
|
||||
[Tags.Crystal]: {
|
||||
color: "white",
|
||||
textColor: "black",
|
||||
name: "Crystal",
|
||||
icon: "crystal",
|
||||
link: "https://crystal-lang.org"
|
||||
|
|
@ -189,9 +269,74 @@ const tags = {
|
|||
[Tags.NoLongerAffiliated]: {
|
||||
name: "No longer affiliated",
|
||||
icon: "mdi-help-circle",
|
||||
color: "indigo"
|
||||
color: "yellow"
|
||||
},
|
||||
[Tags.New]: {
|
||||
name: "New",
|
||||
icon: "mdi-new-box",
|
||||
color: "success"
|
||||
}
|
||||
}
|
||||
} as Record<
|
||||
Tags,
|
||||
{
|
||||
name: string
|
||||
link?: string
|
||||
color?: string
|
||||
icon?: string
|
||||
}
|
||||
>
|
||||
|
||||
const carousel = [
|
||||
{
|
||||
src: "/images/flowinity-update-comms.png",
|
||||
name: "Flowinity",
|
||||
logo: FlowinityLogo,
|
||||
description: "The versatile online social and collaborative platform.",
|
||||
links: [
|
||||
{
|
||||
name: "Get Started",
|
||||
link: "https://flowinity.com/home?mtm_campaign=troplo-carousel"
|
||||
}
|
||||
],
|
||||
tags: []
|
||||
},
|
||||
{
|
||||
src: "/images/flowforms.png",
|
||||
name: "FlowForms",
|
||||
description: "The free flow chart form builder.",
|
||||
tags: [tags[Tags.New]],
|
||||
links: [
|
||||
{
|
||||
name: "Learn More",
|
||||
click: () => {
|
||||
scrollToProjects()
|
||||
setTimeout(() => {
|
||||
highlight.value = 13
|
||||
}, 500)
|
||||
setTimeout(() => {
|
||||
highlight.value = null
|
||||
}, 1500)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
] as {
|
||||
src: string
|
||||
name: string
|
||||
description: string
|
||||
logo?: any
|
||||
tags: {
|
||||
name: string
|
||||
link?: string
|
||||
color?: string
|
||||
icon?: string
|
||||
}[]
|
||||
links: {
|
||||
name: string
|
||||
link?: string
|
||||
click?: () => void
|
||||
}[]
|
||||
}[]
|
||||
|
||||
const projects = [
|
||||
{
|
||||
|
|
@ -211,11 +356,13 @@ const projects = [
|
|||
links: [
|
||||
{
|
||||
name: "Website",
|
||||
link: "https://flowinity.com"
|
||||
link: "https://flowinity.com/home?mtm_campaign=troplo-projects",
|
||||
icon: "mdi-web"
|
||||
},
|
||||
{
|
||||
name: "GitHub",
|
||||
link: "https://github.com/Flowinity/Flowinity"
|
||||
link: "https://github.com/Flowinity/Flowinity",
|
||||
icon: "mdi-github"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -225,7 +372,7 @@ const projects = [
|
|||
release: "2024",
|
||||
internalName: "flowforms",
|
||||
tags: [
|
||||
tags[Tags.Active],
|
||||
tags[Tags.New],
|
||||
tags[Tags.Vue],
|
||||
tags[Tags.Vuetify],
|
||||
tags[Tags.GraphQL],
|
||||
|
|
@ -235,12 +382,14 @@ const projects = [
|
|||
visible: true,
|
||||
links: [
|
||||
{
|
||||
name: "Website",
|
||||
link: "https://flowforms.troplo.com"
|
||||
name: "Early Access",
|
||||
link: "https://flowforms.troplo.com",
|
||||
icon: "mdi-web"
|
||||
},
|
||||
{
|
||||
name: "GitHub",
|
||||
link: "https://github.com/Troplo/FlowForms"
|
||||
name: "Provide Feedback",
|
||||
link: "https://flowforms.troplo.com/form/9ab39eb2-6fa0-41b1-b669-d665281b29b1",
|
||||
icon: "mdi-message-alert"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -256,11 +405,13 @@ const projects = [
|
|||
links: [
|
||||
{
|
||||
name: "Google Play",
|
||||
link: "https://play.google.com/store/apps/details?id=com.troplo.privateuploader"
|
||||
link: "https://play.google.com/store/apps/details?id=com.troplo.privateuploader",
|
||||
icon: "mdi-google-play"
|
||||
},
|
||||
{
|
||||
name: "GitHub",
|
||||
link: "https://github.com/Flowinity/Android"
|
||||
link: "https://github.com/Flowinity/Android",
|
||||
icon: "mdi-github"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -279,13 +430,10 @@ const projects = [
|
|||
visible: true,
|
||||
release: "2022",
|
||||
links: [
|
||||
{
|
||||
name: "Website",
|
||||
link: "https://colubrina.troplo.com"
|
||||
},
|
||||
{
|
||||
name: "GitHub",
|
||||
link: "https://github.com/Troplo/Colubrina"
|
||||
link: "https://github.com/Troplo/Colubrina",
|
||||
icon: "mdi-github"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -306,11 +454,13 @@ const projects = [
|
|||
links: [
|
||||
{
|
||||
name: "Website",
|
||||
link: "https://compass.troplo.com"
|
||||
link: "https://compass.troplo.com",
|
||||
icon: "mdi-web"
|
||||
},
|
||||
{
|
||||
name: "GitHub",
|
||||
link: "https://github.com/Troplo/BetterCompass"
|
||||
link: "https://github.com/Troplo/BetterCompass",
|
||||
icon: "mdi-github"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -331,15 +481,18 @@ const projects = [
|
|||
links: [
|
||||
{
|
||||
name: "My Instance",
|
||||
link: "https://geo.troplo.com"
|
||||
link: "https://geo.troplo.com",
|
||||
icon: "mdi-web"
|
||||
},
|
||||
{
|
||||
name: "GitHub",
|
||||
link: "https://github.com/GeoGuess/GeoGuess"
|
||||
link: "https://github.com/GeoGuess/GeoGuess",
|
||||
icon: "mdi-github"
|
||||
},
|
||||
{
|
||||
name: "Website",
|
||||
link: "https://geoguess.games"
|
||||
link: "https://geoguess.games",
|
||||
icon: "mdi-web"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -354,7 +507,8 @@ const projects = [
|
|||
links: [
|
||||
{
|
||||
name: "GitHub",
|
||||
link: "https://github.com/pinnoto/mira"
|
||||
link: "https://github.com/pinnoto/mira",
|
||||
icon: "mdi-github"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -363,7 +517,7 @@ const projects = [
|
|||
name: "Vixlatio",
|
||||
internalName: "vixlatio",
|
||||
release: "2022",
|
||||
tags: [tags[Tags.Active], tags[Tags.Vue], tags[Tags.Express]],
|
||||
tags: [tags[Tags.NoLongerAffiliated], tags[Tags.Vue], tags[Tags.Express]],
|
||||
description:
|
||||
"Developer for Vixlatio, a blazing fast gaming platform that is powered by the creativity of its users.",
|
||||
visible: true,
|
||||
|
|
@ -395,11 +549,13 @@ const projects = [
|
|||
links: [
|
||||
{
|
||||
name: "GitHub",
|
||||
link: "https://github.com/Troplo/website"
|
||||
link: "https://github.com/Troplo/website",
|
||||
icon: "mdi-github"
|
||||
},
|
||||
{
|
||||
name: "Website",
|
||||
link: "https://troplo.com"
|
||||
link: "https://troplo.com",
|
||||
icon: "mdi-web"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -418,9 +574,18 @@ const projects = [
|
|||
|
||||
const getVisible = computed(() => projects.filter((i) => i.visible))
|
||||
|
||||
const getImage = (image) => {
|
||||
const getImage = (image: string) => {
|
||||
return `/images/${image}.png`
|
||||
}
|
||||
|
||||
const scrollToProjects = () => {
|
||||
const element = document.getElementById("projects-list")!
|
||||
const y =
|
||||
element.getBoundingClientRect().top +
|
||||
window.scrollY -
|
||||
announcementsStore.navbarOffset
|
||||
window.scrollTo({ top: y + 6, behavior: "smooth" })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
107
src/pages/news/[id].vue
Normal file
107
src/pages/news/[id].vue
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<v-img
|
||||
v-if="announcement"
|
||||
:src="announcement.image!"
|
||||
:alt="announcement.title"
|
||||
height="300"
|
||||
class="d-flex mx-auto"
|
||||
aspect-ratio="32/5"
|
||||
cover
|
||||
/>
|
||||
<v-container max-width="1400">
|
||||
<div v-if="!loading && announcement">
|
||||
<div>
|
||||
<v-card-title class="text-h4 text-wrap text-center">
|
||||
{{ announcement.title }}
|
||||
</v-card-title>
|
||||
<div class="d-flex justify-center">
|
||||
<div class="d-flex flex-column align-center">
|
||||
<v-avatar size="40">
|
||||
<v-img
|
||||
v-if="announcement.flowinityUser?.avatar"
|
||||
:src="announcement.flowinityUser.avatar"
|
||||
:alt="announcement.flowinityUser.username"
|
||||
></v-img>
|
||||
</v-avatar>
|
||||
<p class="v-card-subtitle">
|
||||
{{ announcement.flowinityUser?.username }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="v-card-subtitle">
|
||||
{{ dayjs(announcement.createdAt).format("Do of MMMM YYYY") }}
|
||||
<small
|
||||
v-if="
|
||||
announcement.bannerExpiry &&
|
||||
dayjs(announcement.bannerExpiry).isAfter(dayjs())
|
||||
"
|
||||
>
|
||||
(Expires {{ dayjs(announcement.bannerExpiry).fromNow() }})
|
||||
</small>
|
||||
<small v-else-if="announcement.bannerExpiry" class="text-red">
|
||||
(Expired {{ dayjs(announcement.bannerExpiry).fromNow() }})
|
||||
</small>
|
||||
</p>
|
||||
<v-divider class="my-2" />
|
||||
<p
|
||||
class="ml-4"
|
||||
v-if="announcement.content"
|
||||
v-html="mdAnnouncements.render(announcement.content)"
|
||||
></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<v-skeleton-loader
|
||||
v-else-if="loading"
|
||||
:loading="true"
|
||||
class="mx-auto"
|
||||
height="100%"
|
||||
type="article"
|
||||
/>
|
||||
<div v-else class="d-flex justify-center flex-column">
|
||||
<v-card-title class="text-h4 text-wrap text-center">
|
||||
Announcement does not exist.
|
||||
</v-card-title>
|
||||
<v-btn to="/news"> Back to News </v-btn>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from "vue"
|
||||
import { useRoute } from "vue-router"
|
||||
import { useApolloClient } from "@vue/apollo-composable"
|
||||
import { AnnouncementDocument, AnnouncementQuery } from "@/gql/graphql"
|
||||
import dayjs from "../../lib/dayjs"
|
||||
import mdAnnouncements from "@/lib/mdAnnouncements"
|
||||
|
||||
const route = useRoute()
|
||||
const id = computed(() => <string>route.params.id)
|
||||
const apollo = useApolloClient()
|
||||
const announcement = ref<AnnouncementQuery["announcement"] | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
async function getAnnouncement() {
|
||||
loading.value = true
|
||||
const { data } = await apollo.client.query({
|
||||
query: AnnouncementDocument,
|
||||
variables: { announcementId: id.value }
|
||||
})
|
||||
announcement.value = data.announcement
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getAnnouncement()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => id.value,
|
||||
() => {
|
||||
getAnnouncement()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
69
src/pages/news/index.vue
Normal file
69
src/pages/news/index.vue
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<v-container max-width="1400">
|
||||
<div v-if="!loading" class="d-flex flex-column" style="gap: 12px">
|
||||
<v-card
|
||||
v-for="announcement in news"
|
||||
:key="announcement.id"
|
||||
class="rounded-xl"
|
||||
>
|
||||
<div :class="{ 'd-flex': !display.mobile.value }">
|
||||
<v-img
|
||||
:src="announcement.image"
|
||||
aspect-ratio="16/9"
|
||||
max-width="400"
|
||||
min-width="400"
|
||||
cover
|
||||
/>
|
||||
<div class="d-flex flex-column justify-center flex-0">
|
||||
<v-card-title class="text-h4 text-wrap">{{
|
||||
announcement.title
|
||||
}}</v-card-title>
|
||||
<v-card-subtitle>
|
||||
{{ dayjs(announcement.createdAt).format("Do of MMMM YYYY") }}
|
||||
</v-card-subtitle>
|
||||
<v-card-text>
|
||||
{{ announcement.description }}
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
:to="`/news/${announcement.id}`"
|
||||
variant="outlined"
|
||||
class="ml-2"
|
||||
>Read more</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AnnouncementsQuery } from "@/gql/graphql"
|
||||
import { onMounted, ref } from "vue"
|
||||
import { useAnnouncementsStore } from "@/stores/announcements.store"
|
||||
import dayjs from "../../lib/dayjs"
|
||||
import { useDisplay } from "vuetify"
|
||||
|
||||
const news = ref<AnnouncementsQuery["announcements"]>([])
|
||||
const announcementsStore = useAnnouncementsStore()
|
||||
const loading = ref(false)
|
||||
const page = ref(1)
|
||||
const display = useDisplay()
|
||||
|
||||
async function getNews() {
|
||||
loading.value = true
|
||||
const data = await announcementsStore.getAnnouncements({
|
||||
page: page.value
|
||||
})
|
||||
news.value = data
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getNews()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -2,7 +2,7 @@ import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client"
|
|||
|
||||
const httpLink = createHttpLink({
|
||||
// You should use an absolute URL here
|
||||
uri: "/graphql"
|
||||
uri: import.meta.env.DEV ? "/graphql" : "https://api.troplo.com/graphql"
|
||||
})
|
||||
|
||||
// Cache implementation
|
||||
|
|
|
|||
|
|
@ -1,26 +1,47 @@
|
|||
import { defineStore } from "pinia"
|
||||
import { Announcement, AnnouncementsDocument } from "@/gql/graphql"
|
||||
import { ref } from "vue"
|
||||
import {
|
||||
AnnouncementsDocument,
|
||||
AnnouncementsInput,
|
||||
AnnouncementsQuery
|
||||
} from "@/gql/graphql"
|
||||
import { nextTick, ref, watch } from "vue"
|
||||
import { useApolloClient } from "@vue/apollo-composable"
|
||||
import { useDisplay } from "vuetify"
|
||||
|
||||
export const useAnnouncementsStore = defineStore("announcements", () => {
|
||||
const banners = ref<Announcement[]>([])
|
||||
const banners = ref<AnnouncementsQuery["announcements"]>([])
|
||||
|
||||
async function getBanners() {
|
||||
async function getAnnouncements(input: AnnouncementsInput = {}) {
|
||||
const apolloClient = useApolloClient()
|
||||
const { data } = await apolloClient.client.query({
|
||||
query: AnnouncementsDocument,
|
||||
variables: {
|
||||
input: {
|
||||
banner: true
|
||||
}
|
||||
}
|
||||
variables: { input }
|
||||
})
|
||||
banners.value = data.announcements
|
||||
return data.announcements
|
||||
}
|
||||
|
||||
const navbarOffset = ref(0)
|
||||
const display = useDisplay()
|
||||
|
||||
watch(
|
||||
() => [banners.value, display.width.value, display.height.value],
|
||||
async () => {
|
||||
await nextTick(() => {
|
||||
let offset = 64
|
||||
for (const banner of banners.value) {
|
||||
const element = document.getElementById(`banner-${banner.id}`)
|
||||
if (element) {
|
||||
offset += element.clientHeight
|
||||
}
|
||||
}
|
||||
navbarOffset.value = offset
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
banners,
|
||||
getBanners
|
||||
getAnnouncements,
|
||||
navbarOffset
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -70,4 +70,9 @@
|
|||
.v-list-item--variant-outlined
|
||||
{
|
||||
border-color: hsla(0, 0%, 100%, 0.12) !important;
|
||||
}
|
||||
|
||||
.v-btn {
|
||||
letter-spacing: inherit !important;
|
||||
text-transform: inherit !important;
|
||||
}
|
||||
4
typed-router.d.ts
vendored
4
typed-router.d.ts
vendored
|
|
@ -19,7 +19,9 @@ declare module 'vue-router/auto-routes' {
|
|||
*/
|
||||
export interface RouteNamedMap {
|
||||
'/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
|
||||
'/404': RouteRecordInfo<'/404', '/404', Record<never, never>, Record<never, never>>,
|
||||
'/[...path]': RouteRecordInfo<'/[...path]', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
|
||||
'/contact': RouteRecordInfo<'/contact', '/contact', Record<never, never>, Record<never, never>>,
|
||||
'/news/': RouteRecordInfo<'/news/', '/news', Record<never, never>, Record<never, never>>,
|
||||
'/news/[id]': RouteRecordInfo<'/news/[id]', '/news/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
64
yarn.lock
64
yarn.lock
|
|
@ -1309,6 +1309,24 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
|
||||
integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
|
||||
|
||||
"@types/linkify-it@^5":
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-5.0.0.tgz#21413001973106cda1c3a9b91eedd4ccd5469d76"
|
||||
integrity sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==
|
||||
|
||||
"@types/markdown-it@^14.1.2":
|
||||
version "14.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-14.1.2.tgz#57f2532a0800067d9b934f3521429a2e8bfb4c61"
|
||||
integrity sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==
|
||||
dependencies:
|
||||
"@types/linkify-it" "^5"
|
||||
"@types/mdurl" "^2"
|
||||
|
||||
"@types/mdurl@^2":
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-2.0.0.tgz#d43878b5b20222682163ae6f897b20447233bdfd"
|
||||
integrity sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==
|
||||
|
||||
"@types/node@*":
|
||||
version "22.5.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-22.5.4.tgz#83f7d1f65bc2ed223bdbf57c7884f1d5a4fa84e8"
|
||||
|
|
@ -2311,6 +2329,11 @@ dataloader@^2.2.2:
|
|||
resolved "https://registry.yarnpkg.com/dataloader/-/dataloader-2.2.2.tgz#216dc509b5abe39d43a9b9d97e6e5e473dfbe3e0"
|
||||
integrity sha512-8YnDaaf7N3k/q5HnTJVuzSyLETjoZjVmHc4AeKAzOvKHEFQKcn64OKBfzHYtE9zGjctNM7V9I0MfnUVLpi7M5g==
|
||||
|
||||
dayjs@^1.11.13:
|
||||
version "1.11.13"
|
||||
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
|
||||
integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
|
||||
|
||||
de-indent@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
|
||||
|
|
@ -2429,7 +2452,7 @@ emoji-regex@^8.0.0:
|
|||
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
|
||||
integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
|
||||
|
||||
entities@^4.5.0:
|
||||
entities@^4.4.0, entities@^4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
|
||||
integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
|
||||
|
|
@ -3623,6 +3646,13 @@ lines-and-columns@^1.1.6:
|
|||
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
|
||||
integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
|
||||
|
||||
linkify-it@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
|
||||
integrity sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==
|
||||
dependencies:
|
||||
uc.micro "^2.0.0"
|
||||
|
||||
listr2@^4.0.5:
|
||||
version "4.0.5"
|
||||
resolved "https://registry.yarnpkg.com/listr2/-/listr2-4.0.5.tgz#9dcc50221583e8b4c71c43f9c7dfd0ef546b75d5"
|
||||
|
|
@ -3739,6 +3769,23 @@ map-cache@^0.2.0:
|
|||
resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
|
||||
integrity sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==
|
||||
|
||||
markdown-it@^14.1.0:
|
||||
version "14.1.0"
|
||||
resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
|
||||
integrity sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==
|
||||
dependencies:
|
||||
argparse "^2.0.1"
|
||||
entities "^4.4.0"
|
||||
linkify-it "^5.0.0"
|
||||
mdurl "^2.0.0"
|
||||
punycode.js "^2.3.1"
|
||||
uc.micro "^2.1.0"
|
||||
|
||||
mdurl@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
|
||||
integrity sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==
|
||||
|
||||
merge2@^1.3.0, merge2@^1.4.1:
|
||||
version "1.4.1"
|
||||
resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
|
||||
|
|
@ -4165,6 +4212,11 @@ prelude-ls@^1.2.1:
|
|||
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
|
||||
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
|
||||
|
||||
prettier@^3.3.3:
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
|
||||
integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
|
||||
|
||||
promise@^7.1.1:
|
||||
version "7.3.1"
|
||||
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
|
||||
|
|
@ -4181,6 +4233,11 @@ prop-types@^15.7.2:
|
|||
object-assign "^4.1.1"
|
||||
react-is "^16.13.1"
|
||||
|
||||
punycode.js@^2.3.1:
|
||||
version "2.3.1"
|
||||
resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
|
||||
integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
|
||||
|
||||
punycode@^1.3.2:
|
||||
version "1.4.1"
|
||||
resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
|
||||
|
|
@ -4838,6 +4895,11 @@ ua-parser-js@^1.0.35:
|
|||
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.38.tgz#66bb0c4c0e322fe48edfe6d446df6042e62f25e2"
|
||||
integrity sha512-Aq5ppTOfvrCMgAPneW1HfWj66Xi7XL+/mIy996R1/CLS/rcyJQm6QZdsKrUeivDFQ+Oc9Wyuwor8Ze8peEoUoQ==
|
||||
|
||||
uc.micro@^2.0.0, uc.micro@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
|
||||
integrity sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==
|
||||
|
||||
ufo@^1.5.3:
|
||||
version "1.5.4"
|
||||
resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.5.4.tgz#16d6949674ca0c9e0fbbae1fa20a71d7b1ded754"
|
||||
|
|
|
|||
Loading…
Reference in a new issue