garbage-heap/vulpine-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

slightly better status, internationalization

Browse source
This commit is contained in:
sam 2023-12-20 03:24:38 +01:00
parent 7c5acad535
commit a06dd22da4
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
22 changed files with 2416 additions and 1009 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
.eslintrc.cjs
View file

@ -1,15 +1,15 @@
/* eslint-env node */ /* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution') require("@rushstack/eslint-patch/modern-module-resolution");
module.exports = { module.exports = {
root: true, root: true,
'extends': [ extends: [
'plugin:vue/vue3-essential', "plugin:vue/vue3-essential",
'eslint:recommended', "eslint:recommended",
'@vue/eslint-config-typescript', "@vue/eslint-config-typescript",
'@vue/eslint-config-prettier/skip-formatting' "@vue/eslint-config-prettier/skip-formatting",
], ],
parserOptions: { parserOptions: {
ecmaVersion: 'latest' ecmaVersion: "latest",
} },
} };

4
README.md
View file

@ -13,8 +13,8 @@ TypeScript cannot handle type information for `.vue` imports by default, so we r
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension 1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette 1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` 2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration ## Customize configuration

1
env.d.ts vendored
View file

@ -1 +1,2 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
/// <reference types="@modyfi/vite-plugin-yaml/modules" />

8
index.html
View file

@ -1,9 +1,9 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body>

5
package.json
View file

@ -10,9 +10,10 @@
"build-only": "vite build", "build-only": "vite build",
"type-check": "vue-tsc --build --force", "type-check": "vue-tsc --build --force",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"format": "prettier --write src/" "format": "prettier --write ."
}, },
"dependencies": { "dependencies": {
"@tabler/icons-vue": "^2.44.0",
"axios": "^1.6.2", "axios": "^1.6.2",
"flowbite": "^2.2.1", "flowbite": "^2.2.1",
"flowbite-vue": "^0.1.2", "flowbite-vue": "^0.1.2",
@ -20,9 +21,11 @@
"sass": "^1.69.5", "sass": "^1.69.5",
"swrv": "^1.0.4", "swrv": "^1.0.4",
"vue": "^3.3.11", "vue": "^3.3.11",
"vue-i18n": "9",
"vue-router": "^4.2.5" "vue-router": "^4.2.5"
}, },
"devDependencies": { "devDependencies": {
"@modyfi/vite-plugin-yaml": "^1.0.4",
"@rushstack/eslint-patch": "^1.3.3", "@rushstack/eslint-patch": "^1.3.3",
"@tsconfig/node18": "^18.2.2", "@tsconfig/node18": "^18.2.2",
"@types/node": "^18.19.3", "@types/node": "^18.19.3",

2804
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

2
postcss.config.js
View file

@ -3,4 +3,4 @@ export default {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },
} };

40
src/components/status/VulStatus.vue
View file

@ -1,7 +1,36 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from "vue-i18n";
import type Activity from "@/lib/api/entities/activity"; import type Activity from "@/lib/api/entities/activity";
import { IconWorld, IconHome, IconLock, IconMail } from "@tabler/icons-vue";
const { t } = useI18n();
defineProps<{ status: Activity }>(); defineProps<{ status: Activity }>();
const statusScopeKey = ({ visibility }: Activity) => {
switch (visibility) {
case "direct":
return "status.visibility.directMessage";
case "private":
return "status.visibility.followersOnly";
case "unlisted":
return "status.visibility.unlisted";
case "public":
return "status.visibility.public";
}
};
const statusScopeIcon = ({ visibility }: Activity) => {
switch (visibility) {
case "direct":
return IconMail
case "private":
return IconLock
case "unlisted":
return IconHome
case "public":
return IconWorld
}
}
</script> </script>
<template> <template>
@ -12,8 +41,8 @@ defineProps<{ status: Activity }>();
class="rounded-full m-2" class="rounded-full m-2"
:src="status.account.avatar" :src="status.account.avatar"
width="64" width="64"
alt="Avatar for {{ status.account.acct }}" :alt="t('status.avatar', { name: status.account.acct })"
title="Avatar for {{ status.account.acct }}" :title="t('status.avatar', { name: status.account.acct })"
/> />
</RouterLink> </RouterLink>
<div class="flex flex-col my-1"> <div class="flex flex-col my-1">
@ -29,11 +58,10 @@ defineProps<{ status: Activity }>();
</div> </div>
<div class="my-1 flex flex-row"> <div class="my-1 flex flex-row">
<span> <span>
<span title="{t(statusScopeKey(status))}" aria-hidden="true"> <span :title="t(statusScopeKey(status))" aria-hidden="true">
<!-- <StatusScopeIcon status="{status}" /> --> <component :is="statusScopeIcon(status)" />
Public
</span> </span>
<span class="sr-only">{t(statusScopeKey(status))}</span> <span class="sr-only">{{ t(statusScopeKey(status)) }}</span>
</span> </span>
<RouterLink :to="`/@${status.account.acct}/statuses/${status.id}`"> <RouterLink :to="`/@${status.account.acct}/statuses/${status.id}`">
{humanizeDuration(time)} {humanizeDuration(time)}

35
src/i18n.ts Normal file
View file

@ -0,0 +1,35 @@
import { nextTick } from "vue";
import { createI18n } from "vue-i18n";
import en from "./locale/en.yaml";
export const supportedLocales = ["en", "en-PR"];
export const i18n = createI18n({
legacy: false,
locale: "en",
messages: {
en: en,
},
});
export function setLanguage(locale: string) {
// @ts-ignore
i18n.global.locale.value = locale;
document.querySelector("html")!.setAttribute("lang", locale);
}
export async function loadLocale(locale: string) {
// Check if the locale is already loaded. If not, return
// @ts-ignore
if (i18n.global.availableLocales.indexOf(locale) !== -1) return;
if (supportedLocales.indexOf(locale) === -1) throw `${locale} is not a valid locale`;
const messages = await locales[locale as keyof typeof locales]();
i18n.global.setLocaleMessage(locale, messages.default);
return nextTick();
}
const locales = {
"en-PR": () => import("./locale/en.pirate.yaml"),
};

32
src/locale/en.pirate.yaml Normal file
View file

@ -0,0 +1,32 @@
status:
avatar: "{name}'s mugshot"
characterCount: "{count} character | {count} characters"
showContent: "Show treasure ({@:status.characterCount})"
hideContent: "Hide treasure ({@:status.characterCount})"
visibility:
directMessage: Direct bottle
followersOnly: Only shown to their mateys
unlisted: Quietly thrown in the sea
public: Free as the wind
navbar:
homeTimeine: Yar friends' bottles
localTimeline: Ship's bottles
bubbleTimeline: Fleet's bottles
globalTimeline: The seven seas
settings: Yar pref'rences
login: Report fer duty
logout: Go to sleep
settings:
darkTheme: Like the moon's out
lightTheme: Like the sun's out
sidebar:
postbox:
placeholder: What be happening on deck?
postButton: Roll up an' send
directMessage: Direct bottle
followersOnly: Only send to yer mateys
unlisted: Quietly throw in the sea
public: Post free as the wind
emojiButton: Draw lil' faces
pollButton: Start a vote
fileButton: Draw images

32
src/locale/en.yaml Normal file
View file

@ -0,0 +1,32 @@
status:
avatar: "{name}'s avatar"
characterCount: "{count} character | {count} characters"
showContent: "Show content ({@:status.characterCount})"
hideContent: "Hide content ({@:status.characterCount})"
visibility:
directMessage: Direct message
followersOnly: Followers only
unlisted: Unlisted
public: Public
navbar:
homeTimeine: Home timeline
localTimeline: Local timeline
bubbleTimeline: Bubble timeline
globalTimeline: Global timeline
settings: Settings
login: Log in
logout: Log out
settings:
darkTheme: Dark theme
lightTheme: Light theme
sidebar:
postbox:
placeholder: What's going on?
postButton: Post
directMessage: Direct message
followersOnly: Followers only
unlisted: Unlisted
public: Public
emojiButton: Emoji
pollButton: Create poll
fileButton: Attach a file

2
src/main.ts
View file

@ -2,6 +2,7 @@ import "./assets/style.css";
import { createApp } from "vue"; import { createApp } from "vue";
import { createPinia } from "pinia"; import { createPinia } from "pinia";
import { i18n } from "./i18n";
import App from "./App.vue"; import App from "./App.vue";
import router from "./router"; import router from "./router";
@ -10,5 +11,6 @@ const app = createApp(App);
app.use(createPinia()); app.use(createPinia());
app.use(router); app.use(router);
app.use(i18n);
app.mount("#app"); app.mount("#app");

10
src/stores/application.ts
View file

@ -6,7 +6,7 @@ import { ref } from "vue";
const localStorageKey = "vulpine-oauth-app"; const localStorageKey = "vulpine-oauth-app";
export const useAppStore = defineStore("oauth-app", () => { export const useAppStore = defineStore("oauth-app", () => {
const json = localStorage.getItem(localStorageKey) const json = localStorage.getItem(localStorageKey);
const app = ref<Application>(json ? JSON.parse(json) : undefined); const app = ref<Application>(json ? JSON.parse(json) : undefined);
async function getApp() { async function getApp() {
@ -18,12 +18,12 @@ export const useAppStore = defineStore("oauth-app", () => {
client_name: "vulpine-fe", client_name: "vulpine-fe",
redirect_uris: `${window.location.origin}/auth/callback`, redirect_uris: `${window.location.origin}/auth/callback`,
scopes: "read write follow push", scopes: "read write follow push",
} },
}) });
app.value = resp; app.value = resp;
localStorage.setItem(localStorageKey, JSON.stringify(resp)); localStorage.setItem(localStorageKey, JSON.stringify(resp));
return app.value; return app.value;
} }
return { app, getApp } return { app, getApp };
}) });

1
src/views/StatusView.vue
View file

@ -35,6 +35,7 @@ watch(
}, },
); );
</script> </script>
<template> <template>
<div v-if="error">Failed to load: {{ error }}</div> <div v-if="error">Failed to load: {{ error }}</div>
<FwbSpinner v-else-if="!data" size="10" /> <FwbSpinner v-else-if="!data" size="10" />

8
tailwind.config.js
View file

@ -4,11 +4,11 @@ export default {
content: [ content: [
"./index.html", "./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}", "./src/**/*.{vue,js,ts,jsx,tsx}",
'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}', "node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}",
'node_modules/flowbite/**/*.{js,jsx,ts,tsx}', "node_modules/flowbite/**/*.{js,jsx,ts,tsx}",
], ],
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [import('flowbite/plugin')], plugins: [import("flowbite/plugin")],
} };

3
vite.config.ts
View file

@ -2,13 +2,14 @@ import { fileURLToPath, URL } from "node:url";
import { loadEnv, defineConfig } from "vite"; import { loadEnv, defineConfig } from "vite";
import vue from "@vitejs/plugin-vue"; import vue from "@vitejs/plugin-vue";
import yaml from "@modyfi/vite-plugin-yaml";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig(({ mode }) => { export default defineConfig(({ mode }) => {
const { INSTANCE } = loadEnv(mode, process.cwd(), ""); const { INSTANCE } = loadEnv(mode, process.cwd(), "");
return { return {
plugins: [vue()], plugins: [vue(), yaml()],
resolve: { resolve: {
alias: { alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)), "@": fileURLToPath(new URL("./src", import.meta.url)),