diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 00000000..46154788 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,19 @@ +# Modified from .gitignore +node_modules +*.log +dist +.output +.nuxt +#.env # Not ignoring this file because it can contain build-related settings. +.DS_Store +.idea/ +.vite-inspect +.netlify/ +.eslintcache + +public/shiki +public/emojis + +*~ +*swp +*swo diff --git a/.env.example b/.env.example index a21e7f83..9b0ba49a 100644 --- a/.env.example +++ b/.env.example @@ -1,5 +1,7 @@ NUXT_PUBLIC_TRANSLATE_API= NUXT_PUBLIC_DEFAULT_SERVER= +NUXT_PUBLIC_SINGLE_INSTANCE= +NUXT_PUBLIC_PRIVACY_POLICY_URL= # Production only NUXT_CLOUDFLARE_ACCOUNT_ID= @@ -10,6 +12,8 @@ NUXT_CLOUDFLARE_API_TOKEN= NUXT_STORAGE_DRIVER= NUXT_STORAGE_FS_BASE= +NUXT_ADMIN_KEY= + NUXT_PUBLIC_DISABLE_VERSION_CHECK= NUXT_GITHUB_CLIENT_ID= diff --git a/.eslintignore b/.eslintignore index a5104c82..f082429a 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,5 +3,13 @@ *.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 index f56d6544..3319c362 100644 --- a/.eslintrc +++ b/.eslintrc @@ -13,6 +13,7 @@ "vue/no-restricted-syntax":["error", { "selector": "VElement[name='a']", "message": "Use NuxtLink instead." - }] + }], + "n/prefer-global/process": "off" } } diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 00000000..a76d8646 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,5 @@ +--- +name: 🐞 Bug report +about: Report an issue +labels: ['s: pending triage', 'c: bug'] +--- diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml deleted file mode 100644 index a97f3365..00000000 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ /dev/null @@ -1,56 +0,0 @@ -name: 🐞 Bug report -description: Report an issue -labels: ['s: pending triage', 'c: bug'] -body: - - type: markdown - attributes: - value: | - Thanks for taking the time to fill out this bug report! - - If you are unsure whether your problem is a bug or not, you can check the following: - - - use our [Discord community](https://chat.elk.zone) - - open a new [discussion](https://github.com/elk-zone/elk/discussions) and ask your question there - - - type: checkboxes - id: checkboxes - attributes: - label: Pre-Checks - description: Before submitting the issue, please make sure you do the following - options: - # - label: Follow our [Code of Conduct](https://github.com/elk-zone/elk/blob/main/CODE_OF_CONDUCT.md). - # required: true - # - label: Read the [Contributing Guidelines](https://github.com/elk-zone/elk/blob/main/CONTRIBUTING.md). - # required: true - - label: Check that there isn't [already an issue](https://github.com/elk-zone/elk/issues) that reports the same bug to avoid creating a duplicate. - required: true - - label: Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/elk-zone/elk/discussions) or join our [Discord Chat Server](https://chat.elk.zone). - required: true - - label: Providing a screenshot or video to reproduce the issue or show visually what was meant. - required: true - - label: I am willing to provide a PR. - - - type: textarea - id: bug-description - attributes: - label: Describe the bug - description: A clear and concise description of what the bug is. - placeholder: I am doing ... What I expect is ... What actually happening is ... - validations: - required: true - - - type: textarea - id: reproduction - attributes: - label: Reproduction video or screenshot - description: | - A video or screenshot that visually shows the issue. - **Tip:** You can attach images or recordings files by clicking this area to highlight it and then dragging files in. - - - type: textarea - id: additional-context - attributes: - label: Additional Context - description: | - Anything else relevant? Please tell us here, e.g. your used web browser and/or you are on desktop or mobile. - **Tip:** You can attach images or recordings files by clicking this area to highlight it and then dragging files in. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 00000000..1bf9f7fc --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,5 @@ +--- +name: 🚀 New feature proposal +about: Propose a new feature +labels: 's: pending triage' +--- \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml deleted file mode 100644 index 478c620f..00000000 --- a/.github/ISSUE_TEMPLATE/feature_request.yml +++ /dev/null @@ -1,35 +0,0 @@ -name: 🚀 New feature proposal -description: Propose a new feature -labels: ['s: pending triage'] # This will automatically assign the 's: pending triage' label -body: - - type: markdown - attributes: - value: Thanks for your interest in the project and taking the time to fill out this feature report! - - - type: textarea - id: feature-description - attributes: - label: Clear and concise description of the problem - description: 'As a user I want [goal / wish] so that [benefit]. If you intend to submit a PR for this issue, tell us in the description. Thanks!' - validations: - required: true - - - type: textarea - id: suggested-solution - attributes: - label: Suggested solution - description: 'In section [xy] we could provide following feature...' - validations: - required: true - - - type: textarea - id: alternative - attributes: - label: Alternative - description: Clear and concise description of any alternative solutions or features you've considered. - - - type: textarea - id: additional-context - attributes: - label: Additional context - description: Any other context about the feature request here. diff --git a/.github/ISSUE_TEMPLATE/freestyle.md b/.github/ISSUE_TEMPLATE/freestyle.md deleted file mode 100644 index 642eec30..00000000 --- a/.github/ISSUE_TEMPLATE/freestyle.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -name: Freestyle Report -about: Create a report to help us improve -labels: 'pending triage' # This will automatically assign the 'pending triage' label ---- \ No newline at end of file diff --git a/.github/renovate.json5 b/.github/renovate.json5 index 8e3bb798..fc618cd2 100644 --- a/.github/renovate.json5 +++ b/.github/renovate.json5 @@ -3,6 +3,14 @@ "extends": ["config:base", "schedule:weekly", "group:allNonMajor"], "labels": ["c: dependencies"], "rangeStrategy": "bump", + "ignoreDeps": [ + "vue", + "vue-tsc", + "typescript", + + // Intl.Segmenter is not supported in Firefox + "string-length" + ], "packageRules": [ { "groupName": "devDependencies", @@ -56,6 +64,10 @@ { "groupName": "typescript", "matchPackageNames": ["typescript"] + }, + { + "matchDatasources": ["node-version"], + "enabled": false } ], "vulnerabilityAlerts": { diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 3ed97488..2782743f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -10,6 +10,7 @@ on: branches: - main workflow_dispatch: {} + merge_group: {} jobs: ci: @@ -30,7 +31,7 @@ jobs: run: pnpm nuxi prepare - name: 🧪 Test project - run: pnpm test + run: pnpm test tests/unit - name: 📝 Lint run: pnpm lint diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml new file mode 100644 index 00000000..1d8fe565 --- /dev/null +++ b/.github/workflows/docker.yml @@ -0,0 +1,46 @@ +name: build & push docker container +on: + push: + branches: + - main + tags: + - '*' + pull_request: + branches: + - main +jobs: + docker: + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + steps: + - name: Checkout + uses: actions/checkout@v3 + - name: Docker meta + id: metal + uses: docker/metadata-action@v4 + with: + images: | + ghcr.io/${{ github.repository }} + - name: Set up QEMU + uses: docker/setup-qemu-action@v2 + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v2 + - name: Login to GitHub Container Registry + if: github.event_name != 'pull_request' + uses: docker/login-action@v2 + with: + registry: ghcr.io + username: ${{ github.actor }} + password: ${{ github.token }} + - name: Build and push + uses: docker/build-push-action@v4 + with: + context: . + platforms: linux/amd64 + push: ${{ github.event_name != 'pull_request' }} + tags: ${{ steps.metal.outputs.tags }} + labels: ${{ steps.metal.outputs.labels }} + cache-from: type=gha + cache-to: type=gha,mode=max diff --git a/.github/workflows/semantic-pull-request.yml b/.github/workflows/semantic-pull-request.yml index 281c3fce..42a451df 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.0.2 + uses: amannn/action-semantic-pull-request@v5.2.0 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.gitignore b/.gitignore index 72b234fa..a7cd793f 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,7 @@ dist .vite-inspect .netlify/ .eslintcache +elk-translation-status.json public/shiki public/emojis diff --git a/.npmrc b/.npmrc index e4a0f0b7..079dd26f 100644 --- a/.npmrc +++ b/.npmrc @@ -1,4 +1,3 @@ shamefully-hoist=true -strict-peer-dependencies=false shell-emulator=true ignore-workspace-root-check=true diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 00000000..25bf17fc --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +18 \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index f1855fcb..4b6c677a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -22,7 +22,7 @@ ], "i18n-ally.preferredDelimiter": "_", "i18n-ally.sortKeys": true, - "i18n-ally.sourceLanguage": "en-US", + "i18n-ally.sourceLanguage": "en", "prettier.enable": false, "volar.completion.preferredTagNameCase": "pascal", "volar.completion.preferredAttrNameCase": "kebab" diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 00000000..160e3b39 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,45 @@ +# Code Of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, political party, or sexual identity and orientation. Note, however, that religion, political party, or other ideological affiliation provide no exemptions for the behavior we outline as unacceptable in this Code of Conduct. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment include: + +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +- The use of sexualized language or imagery and unwelcome sexual attention or advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team by DM at [the Elk Discord](https://chat.elk.zone). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html + +[homepage]: https://www.contributor-covenant.org diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 31e43a9d..2b764eac 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,9 +1,11 @@ # Contributing Guide -Hi! We are really excited that you are interested in contributing to Elk. Before submitting your contribution, please make sure to take a moment and read through the following guide. +Hi! We are excited that you are interested in contributing to Elk. Before submitting your contribution, please make sure to take a moment and read through the following guide. 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). @@ -16,7 +18,9 @@ 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 latest Node.js (16.x). +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) @@ -50,16 +54,16 @@ nr test In order to run Elk with PWA enabled, run `pnpm dev:pwa` in Elk's root folder to start dev server or `pnpm dev:mocked:pwa` to start dev server with `@elkdev@universeodon.com` user. -You should test the Elk PWA application on private browsing mode on any Chromium based browser: will not work on Firefox and Safari. +You should test the Elk PWA application on private browsing mode on any Chromium-based browser: will not work on Firefox and Safari. If not using private browsing mode, you will need to uninstall the PWA application from your browser once you finish testing: - Open `Dev Tools` (`Option + ⌘ + J` on macOS, `Shift + CTRL + J` on Windows/Linux) -- Go to `Application > Storage`, you should check following checkboxes: +- Go to `Application > Storage`, you should check the following checkboxes: - Application: [x] Unregister service worker - Storage: [x] IndexedDB and [x] Local and session storage - Cache: [x] Cache storage and [x] Application cache - Click on `Clear site data` button -- Go to `Application > Service Workers` and check the current `service worker` is missing or has the state `deleted` or `redundant` +- Go to `Application > Service Workers` and check if the current `service worker` is missing or has the state `deleted` or `redundant` ## CI errors @@ -78,30 +82,45 @@ Elk supports `right-to-left` languages, we need to make sure that the UI is work Simple approach used by most websites of relying on direction set in HTML element does not work because direction for various items, such as timeline, does not always match direction set in HTML. 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`. Same rules applies for margin. +- 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 rule above. For icons inside 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 from 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 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 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`. +- 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://i18n.nuxtjs.org/) to handle internationalization. +We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://v8.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. + +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 ### Adding a new language 1. Add a new file in [locales](./locales) folder with the language code as the filename. -2. Copy [en-US](./locales/en-US.json) and translate the strings. -3. Add the language to the `locales` array in [config/i18n.ts](./config/i18n.ts#L12), below `en` variants and `ar-EG`. -4. If the language is `right-to-left`, add `dir` option with `rtl` value, for example, for [ar-EG](./config/i18n.ts#L27) -5. If the language requires special pluralization rules, add `pluralRule` callback option, for example, for [ar-EG](./config/i18n.ts#L27) +2. Copy [en](./locales/en.json) and translate the strings. +3. Add the language to the `locales` array in [config/i18n.ts](./config/i18n.ts#L61), below `en` and `ar`: + - If your language has multiple country variants, add the generic one for language only (only if there are a lot of common entries, you can always add it as a new one) + - Add all country variants in [country variants object](./config/i18n.ts#L12) + - Add all country variants files with empty `messages` object: `{}` + - Translate the strings in the generic language file + - Later, when anyone wants to add the corresponding translations for the country variant, just override any entry in the corresponding file: you can see an example with `en` variants. + - If the generic language already exists: + - If the translation doesn't differ from the generic language, then add the corresponding translations in the corresponding file + - If the translation differs from the generic language, then add the corresponding translations in the corresponding file and remove it from the country variants entry +4. If the language is `right-to-left`, add `dir` option with `rtl` value, for example, for [ar](./config/i18n.ts#L71) +5. If the language requires special pluralization rules, add `pluralRule` callback option, for example, for [ar](./config/i18n.ts#L72) Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization) for more info. ### Messages interpolation -Most of the messages used in Elk do not require any interpolation, however, there are some messages that require interpolation: check [Message Format Syntax](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) for more info. +Most of the messages used in Elk do not require any interpolation, however, some messages require interpolation: check [Message Format Syntax](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) for more info. We're using these types of interpolation: - [List interpolation](https://vue-i18n.intlify.dev/guide/essentials/syntax.html#list-interpolation) @@ -123,7 +142,7 @@ Check [Custom Plural Number Formatting Entries](#custom-plural-number-formatting When using plural number formatting, we'll have always `{n}` available in the message, for example, `You have {n} new notifications|You have {n} new notification|You have {n} new notifications` or `You have no new notifications|You have 1 new notification|You have {n} new notifications`. -We've included `v` named parameter, it will be used to pass the formatted number using [Intl.NumberFormat::format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format): will be the number with separators symbols. The exception to previous rule is when we're using `plural` **with** `i18n-t` component, in this case, we'll need to use `{0}` instead `{v}` to access the number. +We've included `v` named parameter, it will be used to pass the formatted number using [Intl.NumberFormat::format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format): will be the number with separators symbols. The exception to the previous rule is when we're using `plural` **with** `i18n-t` component, in this case, we'll need to use `{0}` instead `{v}` to access the number. Additionally, Elk will use [compact notation for numbers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#parameters) for some entries, check `notation` and `compactDisplay` options: for example, `1K` for `1000`, `1M` for `1000000`, `1B` for `1000000000` and so on. That entry will be available in the message using `{v}` named parameter (or `{0}` if using the message **with** `i18n-t` component). diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 00000000..dee00724 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,57 @@ +FROM docker.io/library/node:lts-alpine AS base + +# Prepare work directory +WORKDIR /elk + +FROM base AS builder + +# Prepare pnpm https://pnpm.io/installation#using-corepack +RUN corepack enable + +# Prepare deps +RUN apk update +RUN apk add git --no-cache + +# Prepare build deps ( ignore postinstall scripts for now ) +COPY package.json ./ +COPY .npmrc ./ +COPY pnpm-lock.yaml ./ +COPY patches ./patches +RUN pnpm i --frozen-lockfile --ignore-scripts + +# Copy all source files +COPY . ./ + +# Run full install with every postinstall script ( This needs project file ) +RUN pnpm i --frozen-lockfile + +# Build +RUN pnpm build + +FROM base AS runner + +ARG UID=911 +ARG GID=911 + +# Create a dedicated user and group +RUN set -eux; \ + addgroup -g $GID elk; \ + adduser -u $UID -D -G elk elk; + +USER elk + +ENV NODE_ENV=production + +COPY --from=builder /elk/.output ./.output + +EXPOSE 5314/tcp + +ENV PORT=5314 + +# Specify container only environment variables ( can be overwritten by runtime env ) +ENV NUXT_STORAGE_FS_BASE='/elk/data' + +# Persistent storage data +VOLUME [ "/elk/data" ] + +CMD ["node", ".output/server/index.mjs"] diff --git a/README.md b/README.md index b43e52cd..54f22b5b 100644 --- a/README.md +++ b/README.md @@ -28,11 +28,48 @@ A nimble Mastodon web client It is already quite usable, but it isn't ready for wide adoption yet. We recommend you use it if you would like to help us build it. We appreciate your feedback and contributions. Check out the [Open Issues](https://github.com/elk-zone/elk/issues) and jump in the action. Join the [Elk discord server](https://chat.elk.zone) to chat with us and learn more about the project. -The client is deployed on: +## Deployment + +### Official Deployment + +The Elk team maintains a deployment at: - 🦌 Production: [elk.zone](https://elk.zone) - 🐙 Canary: [main.elk.zone](https://main.elk.zone) (deploys on every commit to `main` branch) +### 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. + +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``` + +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.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 +- [elk.vmst.io](https://elk.vmst.io) - Use Elk for the `vmst.io` Server +- [elk.hostux.social](https://elk.hostux.social) - Use Elk for the `hostux.social` Server +- [elk.cupoftea.social](https://elk.cupoftea.social) - Use Elk for the `cupoftea.social` Server +- [elk.aus.social](https://elk.aus.social) - Use Elk for the `aus.social` Server +- [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 + +> **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. + ## 💖 Sponsors We are grateful for the generous sponsorship and help of: @@ -99,6 +136,10 @@ Elk uses [Vitest](https://vitest.dev). You can run the test suite with: nr test ``` +## 📲 PWA + +You can consult the [PWA documentation](https://docs.elk.zone/docs/pwa) to learn more about the PWA capabilities on Elk, how to install Elk PWA in your desktop or mobile device and some hints about PWA stuff on Elk. + ## 🦄 Stack - [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling @@ -111,7 +152,13 @@ nr test - [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 - [shiki](https://shiki.matsu.io/) - A beautiful Syntax Highlighter -- [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update and push notifications +- [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/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue index 31d39e6c..26953d8d 100644 --- a/components/account/AccountAvatar.vue +++ b/components/account/AccountAvatar.vue @@ -15,9 +15,11 @@ const error = $ref(false) :key="account.avatar" width="400" height="400" + select-none :src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar" :alt="$t('account.avatar_description', [account.username])" loading="lazy" + class="account-avatar" :class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')" :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }" v-bind="$attrs" diff --git a/components/account/AccountBigCard.vue b/components/account/AccountBigCard.vue index 7116d9fe..4788bafb 100644 --- a/components/account/AccountBigCard.vue +++ b/components/account/AccountBigCard.vue @@ -1,16 +1,16 @@ diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue index 255d455d..ecada64e 100644 --- a/components/account/AccountFollowButton.vue +++ b/components/account/AccountFollowButton.vue @@ -1,5 +1,6 @@