diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index f082429a..00000000 --- a/.eslintignore +++ /dev/null @@ -1,15 +0,0 @@ -*.css -*.png -*.ico -*.toml -*.patch -*.txt -Dockerfile -public/ -public-dev/ -public-staging/ -https-dev-config/localhost.crt -https-dev-config/localhost.key -Dockerfile -elk-translation-status.json -docs/translation-status.json diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 3319c362..00000000 --- a/.eslintrc +++ /dev/null @@ -1,19 +0,0 @@ -{ - "extends": "@antfu", - "ignorePatterns": ["!pages/public"], - "overrides": [ - { - "files": ["locales/**.json"], - "rules": { - "jsonc/sort-keys": "error" - } - } - ], - "rules": { - "vue/no-restricted-syntax":["error", { - "selector": "VElement[name='a']", - "message": "Use NuxtLink instead." - }], - "n/prefer-global/process": "off" - } -} diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000..6313b56c --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto eol=lf diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 1bf9f7fc..20d6dc32 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -2,4 +2,4 @@ name: 🚀 New feature proposal about: Propose a new feature labels: 's: pending triage' ---- \ No newline at end of file +--- diff --git a/.github/renovate.json5 b/.github/renovate.json5 index fc618cd2..b5a984b5 100644 --- a/.github/renovate.json5 +++ b/.github/renovate.json5 @@ -40,7 +40,6 @@ "groupName": "lint", "matchPackageNames": [ "@antfu/eslint-config", - "@types/prettier", "eslint", "prettier" ] diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 065fb4c2..a9da0969 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -18,11 +18,13 @@ jobs: steps: - uses: actions/checkout@v4 - - run: corepack enable - - uses: actions/setup-node@v4 + # workaround for npm registry key change + # ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack + # - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091 + - run: npm i -g corepack@latest && corepack enable + - uses: actions/setup-node@v4.4.0 with: - node-version: 18 - cache: pnpm + node-version-file: .nvmrc - name: 📦 Install dependencies run: pnpm install --frozen-lockfile @@ -32,6 +34,7 @@ jobs: - name: 🧪 Test project run: pnpm test:ci + timeout-minutes: 10 - name: 📝 Lint run: pnpm lint diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index 47f98381..47793600 100644 --- a/.github/workflows/docker.yml +++ b/.github/workflows/docker.yml @@ -35,10 +35,10 @@ jobs: username: ${{ github.actor }} password: ${{ github.token }} - name: Build and push - uses: docker/build-push-action@v5 + uses: docker/build-push-action@v6 with: context: . - platforms: linux/amd64 + platforms: linux/amd64,linux/arm64 push: ${{ github.event_name != 'pull_request' }} tags: ${{ steps.metal.outputs.tags }} labels: ${{ steps.metal.outputs.labels }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index b99de717..b733190d 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -19,7 +19,7 @@ jobs: - name: Set node uses: actions/setup-node@v4 with: - node-version: 18 + node-version-file: .nvmrc - run: npx changelogithub env: diff --git a/.github/workflows/semantic-pull-request.yml b/.github/workflows/semantic-pull-request.yml index 94b93e69..f3e6813a 100644 --- a/.github/workflows/semantic-pull-request.yml +++ b/.github/workflows/semantic-pull-request.yml @@ -19,6 +19,6 @@ jobs: name: Semantic Pull Request steps: - name: Validate PR title - uses: amannn/action-semantic-pull-request@v5.4.0 + uses: amannn/action-semantic-pull-request@v5.5.3 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.npmrc b/.npmrc index 079dd26f..c6d7600b 100644 --- a/.npmrc +++ b/.npmrc @@ -1,3 +1,4 @@ shamefully-hoist=true shell-emulator=true ignore-workspace-root-check=true +package-manager-strict=false diff --git a/.nvmrc b/.nvmrc index 2edeafb0..8fdd954d 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -20 \ No newline at end of file +22 \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index 4b6c677a..bd7e45ee 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,10 +5,6 @@ "unmute", "unstorage" ], - "editor.codeActionsOnSave": { - "source.fixAll.eslint": true - }, - "editor.formatOnSave": false, "files.associations": { "*.css": "postcss" }, @@ -23,7 +19,44 @@ "i18n-ally.preferredDelimiter": "_", "i18n-ally.sortKeys": true, "i18n-ally.sourceLanguage": "en", + + // Enable the ESlint flat config support + "eslint.experimental.useFlatConfig": true, + + // Disable the default formatter, use eslint instead "prettier.enable": false, - "volar.completion.preferredTagNameCase": "pascal", - "volar.completion.preferredAttrNameCase": "kebab" + "editor.formatOnSave": false, + + // Auto fix + "editor.codeActionsOnSave": { + "source.fixAll": "explicit", + "source.organizeImports": "never" + }, + + // Silent the stylistic rules in you IDE, but still auto fix them + "eslint.rules.customizations": [ + { "rule": "style/*", "severity": "off" }, + { "rule": "*-indent", "severity": "off" }, + { "rule": "*-spacing", "severity": "off" }, + { "rule": "*-spaces", "severity": "off" }, + { "rule": "*-order", "severity": "off" }, + { "rule": "*-dangle", "severity": "off" }, + { "rule": "*-newline", "severity": "off" }, + { "rule": "*quotes", "severity": "off" }, + { "rule": "*semi", "severity": "off" } + ], + + // Enable eslint for all supported languages + "eslint.validate": [ + "javascript", + "javascriptreact", + "typescript", + "typescriptreact", + "vue", + "html", + "markdown", + "json", + "jsonc", + "yaml" + ] } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 2b764eac..5e2f3b32 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -6,23 +6,16 @@ Refer also to https://github.com/antfu/contribute. For guidelines on contributing to the documentation, refer to the [docs README](./docs/README.md). -### Online - -You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow). - -[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk) - ### Local Setup To develop and test the Elk package: 1. Fork the Elk repository to your own GitHub account and then clone it to your local device. -2. Ensure using the latest Node.js (16.x). +2. Ensure using the LTS version of Node.js. If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version. - -3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v7. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 16+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command) +3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v9. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 20+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command) 4. Check out a branch where you can work and commit your changes: ```shell @@ -84,21 +77,21 @@ Simple approach used by most websites of relying on direction set in HTML elemen We've added some `UnoCSS` utilities styles to help you with that: - Do not use `left/right` padding and margin: for example `pl-1`. Use `padding-inline-start/end` instead. So `pl-1` should be `ps-1`, `pr-1` should be `pe-1`. The same rules apply to margin. - Do not use `rtl-` classes, such as `rtl-left-0`. -- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception from the rule above. For icons inside the timeline, it might not work as expected. +- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception to the rule above. For icons inside the timeline, it might not work as expected. - For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`. - If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`. - If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`. ## Internationalization -We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://v8.i18n.nuxtjs.org/) to handle internationalization. +We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://i18n.nuxtjs.org/) to handle internationalization. -You can check the current [translation status](https://docs.elk.zone/docs/guide/contributing#translation-status): more instructions on the table caption. +You can check the current [translation status](https://docs.elk.zone/guide/contributing#translation-status): more instructions on the table caption. If you are updating a translation in your local environment, you can run the following commands to check the status: - from root folder: `nr prepare-translation-status` - change to `docs` folder and run docs dev server `nr dev` -- open `http://localhost:3000/docs/guide/contributing#translation-status` in your browser +- open `http://localhost:3000/guide/contributing#translation-status` in your browser ### Adding a new language diff --git a/Dockerfile b/Dockerfile index dee00724..64974e1f 100644 --- a/Dockerfile +++ b/Dockerfile @@ -6,7 +6,10 @@ WORKDIR /elk FROM base AS builder # Prepare pnpm https://pnpm.io/installation#using-corepack -RUN corepack enable +# workaround for npm registry key change +# ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack +# - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091 +RUN npm i -g corepack@latest && corepack enable # Prepare deps RUN apk update diff --git a/README.md b/README.md index cfe2c2a0..3d90a5da 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,6 @@ A nimble Mastodon web client

discord chat - Start new PR in StackBlitz Codeflow Open board on Volta


@@ -39,25 +38,24 @@ The Elk team maintains a deployment at: ### Self-Host Docker Deployment -In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself. -One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc. +In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself. +One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc. 1. checkout source ```git clone https://github.com/elk-zone/elk.git``` 1. got into new source dir: ```cd elk``` -1. build Docker image: ```docker build .``` 1. create local storage directory for settings: ```mkdir elk-storage``` 1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage``` -1. start container: ```docker-compose up -d``` +1. start container: ```docker-compose up --build -d``` > [!NOTE] > The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container. - ### Ecosystem These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse: - [elk.fedified.com](https://elk.fedified.com) - Use Elk to log into any compatible instance +- [elk.mastodon.com.pl](https://elk.mastodon.com.pl) - Use Elk for the `mastodon.com.pl` Server - [elk.me.uk](https://elk.me.uk) - Use Elk to log into any compatible instance, hosted on Google Cloud Run with no Cloudflare proxy - [elk.h4.io](https://elk.h4.io) - Use Elk for the `h4.io` Server - [elk.universeodon.com](https://elk.universeodon.com) - Use Elk for the Universeodon Server @@ -68,6 +66,7 @@ These are known deployments using Elk as an alternative Web client for Mastodon - [elk.mstdn.ca](https://elk.mstdn.ca) - Use Elk for the `mstdn.ca` Server - [elk.mastodonapp.uk](https://elk.mastodonapp.uk) - Use Elk for the `mastodonapp.uk` Server - [elk.bolha.us](https://elk.bolha.us) - Use Elk for the `bolha.us` Server +- [crab.bumscode.com](https://crab.bumscode.com) - Use [crab](https://github.com/maybeanerd/crab) - a soft fork of Elk - for the `bumscode.com` Server > **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them. @@ -105,12 +104,6 @@ We would also appreciate sponsoring other contributors to the Elk project. If so We're really excited that you're interested in contributing to Elk! Before submitting your contribution, please read through the following guide. -### Online - -You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow). - -[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk) - ### Local Setup Clone the repository and run on the root folder: @@ -152,14 +145,14 @@ You can consult the [PWA documentation](https://docs.elk.zone/pwa) to learn more - [UnoCSS](https://uno.antfu.me/) - The instant on-demand atomic CSS engine - [Iconify](https://github.com/iconify/icon-sets#iconify-icon-sets-in-json-format) - Iconify icon sets in JSON format - [Masto.js](https://neet.github.io/masto.js) - Mastodon API client in TypeScript -- [shikiji](https://shikiji.netlify.app/) - A beautiful and powerful syntax highlighter +- [shiki](https://shiki.style/) - A beautiful yet powerful syntax highlighter - [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API ## 👨‍💻 Contributors - - + + ## 📄 License diff --git a/app.vue b/app/app.vue similarity index 93% rename from app.vue rename to app/app.vue index 89c1fa0e..4498af06 100644 --- a/app.vue +++ b/app/app.vue @@ -4,7 +4,7 @@ provideGlobalCommands() const route = useRoute() -if (process.server && !route.path.startsWith('/settings')) { +if (import.meta.server && !route.path.startsWith('/settings')) { const url = useRequestURL() useHead({ diff --git a/components/account/AccountAvatar.vue b/app/components/account/AccountAvatar.vue similarity index 60% rename from components/account/AccountAvatar.vue rename to app/components/account/AccountAvatar.vue index 26953d8d..195a9d44 100644 --- a/components/account/AccountAvatar.vue +++ b/app/components/account/AccountAvatar.vue @@ -1,13 +1,18 @@