Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
fb65b32c6c | ||
|
|
8f497974a8 |
32
.github/actions/force-ipv4/README.md
vendored
32
.github/actions/force-ipv4/README.md
vendored
@@ -1,32 +0,0 @@
|
||||
# force-ipv4
|
||||
|
||||
## Overview
|
||||
|
||||
This GitHub action enforces IPv4 for all outgoing network requests. It addresses connectivity issues encountered in GitHub runners, where IPv6 requests may lead to timeouts due to the lack of IPv6 support [1] [2].
|
||||
|
||||
## Background
|
||||
|
||||
Some applications attempt network connections over IPv6.
|
||||
Such as requests made by Node's `fetch` API causes `UND_ERR_CONNECT_TIMEOUT` [3] [4] and similar issues [5].
|
||||
This happens when the software cannot handle this such as by using Happy Eyeballs [6] [7].
|
||||
|
||||
## Usage
|
||||
|
||||
To use this action in your GitHub workflow, add the following step before any job that requires network access:
|
||||
|
||||
```yaml
|
||||
- name: Enforce IPv4 Connectivity
|
||||
uses: ./.github/actions/force-ipv4
|
||||
```
|
||||
|
||||
## Note
|
||||
|
||||
This action is a workaround addressing specific IPv6-related connectivity issues on GitHub runners and may not be necessary if GitHub's infrastructure evolves to fully support IPv6 in the future.
|
||||
|
||||
[1]: https://archive.ph/2024.03.28-185829/https://github.com/actions/runner/issues/3138 "Actions Runner fails on IPv6 only host · Issue #3138 · actions/runner · GitHub | github.com"
|
||||
[2]: https://archive.ph/2024.03.28-185838/https://github.com/actions/runner-images/issues/668 "IPv6 on GitHub-hosted runners · Issue #668 · actions/runner-images · GitHub | github.com"
|
||||
[3]: https://archive.ph/2024.03.28-185847/https://github.com/actions/runner/issues/3213 "GitHub runner cannot send `fetch` with `node`, failing with IPv6 DNS error `UND_ERR_CONNECT_TIMEOUT` · Issue #3213 · actions/runner · GitHub | github.com"
|
||||
[4]: https://archive.ph/2024.03.28-185853/https://github.com/actions/runner-images/issues/9540 "Cannot send outbound requests using node fetch, failing with IPv6 DNS error UND_ERR_CONNECT_TIMEOUT · Issue #9540 · actions/runner-images · GitHub | github.com"
|
||||
[5]: https://archive.today/2024.03.30-113315/https://github.com/nodejs/node/issues/40537 "\"localhost\" favours IPv6 in node v17, used to favour IPv4 · Issue #40537 · nodejs/node · GitHub"
|
||||
[6]: https://archive.ph/2024.03.28-185900/https://github.com/nodejs/node/issues/41625 "Happy Eyeballs support (address IPv6 issues in Node 17) · Issue #41625 · nodejs/node · GitHub | github.com"
|
||||
[7]: https://archive.ph/2024.03.28-185910/https://github.com/nodejs/undici/issues/1531 "fetch times out in under 5 seconds · Issue #1531 · nodejs/undici · GitHub | github.com"
|
||||
12
.github/actions/force-ipv4/action.yml
vendored
12
.github/actions/force-ipv4/action.yml
vendored
@@ -1,12 +0,0 @@
|
||||
inputs:
|
||||
project-root:
|
||||
required: false
|
||||
default: '.'
|
||||
runs:
|
||||
using: composite
|
||||
steps:
|
||||
-
|
||||
name: Run prefer IPv4 script
|
||||
shell: bash
|
||||
run: ./.github/actions/force-ipv4/force-ipv4.sh
|
||||
working-directory: ${{ inputs.project-root }}
|
||||
80
.github/actions/force-ipv4/force-ipv4.sh
vendored
80
.github/actions/force-ipv4/force-ipv4.sh
vendored
@@ -1,80 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
main() {
|
||||
if is_linux; then
|
||||
echo 'Configuring Linux...'
|
||||
|
||||
configure_warp_with_doh_and_ipv6_exclusion_on_linux # [WORKS] Resolves the issue when run independently on GitHub runners lacking IPv6 support.
|
||||
prefer_ipv4_on_linux # [DOES NOT WORK] It does not resolve the issue when run independently on GitHub runners without IPv6 support.
|
||||
|
||||
# Considered alternatives:
|
||||
# - `sysctl` commands, and direct changes to `/proc/sys/net/` and `/etc/sysctl.conf` led to silent
|
||||
# Node 18 exits (code: 13) when using `fetch`.
|
||||
elif is_macos; then
|
||||
echo 'Configuring macOS...'
|
||||
|
||||
configure_warp_with_doh_and_ipv6_exclusion_on_macos # [WORKS] Resolves the issue when run independently on GitHub runners lacking IPv6 support.
|
||||
disable_ipv6_on_macos # [WORKS INCONSISTENTLY] Resolves the issue inconsistently when run independently on GitHub runners without IPv6 support.
|
||||
fi
|
||||
echo "IPv4: $(curl --ipv4 --silent --max-time 15 --retry 3 --user-agent Mozilla https://api.ip.sb/geoip)"
|
||||
echo "IPv6: $(curl --ipv6 --silent --max-time 15 --retry 3 --user-agent Mozilla https://api.ip.sb/geoip)"
|
||||
}
|
||||
|
||||
is_linux() {
|
||||
[[ "$(uname -s)" == "Linux" ]]
|
||||
}
|
||||
|
||||
is_macos() {
|
||||
[[ "$(uname -s)" == "Darwin" ]]
|
||||
}
|
||||
|
||||
configure_warp_with_doh_and_ipv6_exclusion_on_linux() {
|
||||
install_warp_on_debian
|
||||
configure_warp_doh_and_exclude_ipv6
|
||||
}
|
||||
|
||||
configure_warp_with_doh_and_ipv6_exclusion_on_macos() {
|
||||
brew install cloudflare-warp
|
||||
configure_warp_doh_and_exclude_ipv6
|
||||
}
|
||||
|
||||
configure_warp_doh_and_exclude_ipv6() {
|
||||
echo 'Beginning configuration of the Cloudflare WARP client with DNS-over-HTTPS and IPv6 exclusion...'
|
||||
echo 'Initiating client registration with Cloudflare...'
|
||||
warp-cli --accept-tos registration new
|
||||
echo 'Configuring WARP to operate in DNS-over-HTTPS mode (warp+doh)...'
|
||||
warp-cli --accept-tos mode warp+doh
|
||||
echo 'Excluding IPv6 traffic from WARP by configuring it as a split tunnel...'
|
||||
warp-cli --accept-tos add-excluded-route '::/0' # Exclude IPv6, forcing IPv4 resolution
|
||||
# `tunnel ip add` does not work with IP ranges, see https://community.cloudflare.com/t/cant-cidr-for-split-tunnling/630834
|
||||
echo 'Establishing WARP connection...'
|
||||
warp-cli --accept-tos connect
|
||||
}
|
||||
|
||||
install_warp_on_debian() {
|
||||
curl -fsSL https://pkg.cloudflareclient.com/pubkey.gpg | sudo gpg --yes --dearmor --output /usr/share/keyrings/cloudflare-warp-archive-keyring.gpg
|
||||
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/cloudflare-warp-archive-keyring.gpg] https://pkg.cloudflareclient.com/ $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/cloudflare-client.list
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y cloudflare-warp
|
||||
}
|
||||
|
||||
disable_ipv6_on_macos() {
|
||||
networksetup -listallnetworkservices \
|
||||
| tail -n +2 \
|
||||
| while IFS= read -r interface; do
|
||||
echo "Disabling IPv6 on: $interface..."
|
||||
networksetup -setv6off "$interface"
|
||||
done
|
||||
}
|
||||
|
||||
prefer_ipv4_on_linux() {
|
||||
local -r gai_config_file_path='/etc/gai.conf'
|
||||
if [ ! -f "$gai_config_file_path" ]; then
|
||||
echo "Creating $gai_config_file_path since it doesn't exist..."
|
||||
touch "$gai_config_file_path"
|
||||
fi
|
||||
echo "precedence ::ffff:0:0/96 100" | sudo tee -a "$gai_config_file_path" > /dev/null
|
||||
echo "Configuration complete."
|
||||
}
|
||||
|
||||
main
|
||||
3
.github/actions/setup-node/action.yml
vendored
3
.github/actions/setup-node/action.yml
vendored
@@ -5,5 +5,4 @@ runs:
|
||||
name: Setup node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20.x
|
||||
check-latest: true
|
||||
node-version: 18.x
|
||||
|
||||
15
.github/workflows/checks.build.yaml
vendored
15
.github/workflows/checks.build.yaml
vendored
@@ -81,10 +81,15 @@ jobs:
|
||||
uses: actions/checkout@v4
|
||||
-
|
||||
name: Install Docker on macOS
|
||||
if: matrix.os == 'macos' # macOS runner is missing Docker
|
||||
if: matrix.os == 'macos' # macOS runner is missing Docker (see actions/runner-images#17)
|
||||
run: |-
|
||||
# Install Docker
|
||||
brew install docker
|
||||
# Install `buildx` (`docker build` without `buildx` is deprecated)
|
||||
brew install docker-buildx
|
||||
mkdir -p ~/.docker/cli-plugins
|
||||
ln -sfn $(which docker-buildx) ~/.docker/cli-plugins/docker-buildx
|
||||
# docker buildx install # Allow running `docker build` instead of `docker buildx build`
|
||||
# Docker on macOS misses daemon due to licensing, so install colima as runtime
|
||||
brew install colima
|
||||
# Start the daemon
|
||||
@@ -95,12 +100,6 @@ jobs:
|
||||
-
|
||||
name: Run Docker image on port 8080
|
||||
run: docker run -d -p 8080:80 --rm --name privacy.sexy undergroundwires/privacy.sexy:latest
|
||||
-
|
||||
name: Enforce IPv4 Connectivity # Used due to GitHub runners' lack of IPv6 support, preventing request timeouts.
|
||||
uses: ./.github/actions/force-ipv4
|
||||
-
|
||||
name: Check server is up and returns HTTP 200
|
||||
run: >-
|
||||
node ./scripts/verify-web-server-status.js \
|
||||
--url http://localhost:8080 \
|
||||
--max-retries ${{ matrix.os == 'macos' && '90' || '30' }}
|
||||
run: node ./scripts/verify-web-server-status.js --url http://localhost:8080
|
||||
|
||||
8
.github/workflows/checks.external-urls.yaml
vendored
8
.github/workflows/checks.external-urls.yaml
vendored
@@ -1,7 +1,6 @@
|
||||
name: checks.external-urls
|
||||
|
||||
on:
|
||||
push:
|
||||
schedule:
|
||||
- cron: '0 0 * * 0' # at 00:00 on every Sunday
|
||||
|
||||
@@ -18,13 +17,6 @@ jobs:
|
||||
-
|
||||
name: Install dependencies
|
||||
uses: ./.github/actions/npm-install-dependencies
|
||||
-
|
||||
name: Enforce IPv4 Connectivity # Used due to GitHub runners' lack of IPv6 support, preventing request timeouts.
|
||||
uses: ./.github/actions/force-ipv4
|
||||
-
|
||||
name: Test
|
||||
run: npm run check:external-urls
|
||||
env:
|
||||
RANDOMIZED_URL_CHECK_LIMIT: "${{ github.event_name == 'push' && '100' || '3000' }}"
|
||||
# - Scheduled checks has high limit for thorough testing.
|
||||
# - For push events, triggered by code changes, the amount of URLs are limited to provide quick feedback.
|
||||
|
||||
18
CHANGELOG.md
18
CHANGELOG.md
@@ -1,23 +1,5 @@
|
||||
# Changelog
|
||||
|
||||
## 0.13.1 (2024-03-22)
|
||||
|
||||
* ci/cd: Fix cross-platform git command compability | [255c51c](https://github.com/undergroundwires/privacy.sexy/commit/255c51c8a0524d3ea8a3b16ffc1b178650525010)
|
||||
* Fix tooltip falling behind elements on fade out | [1964524](https://github.com/undergroundwires/privacy.sexy/commit/19645248ab7bc78dc872fa176c1a3650d7d6d644)
|
||||
* Improve VSCode detection in `configure_vscode.py` | [98845e6](https://github.com/undergroundwires/privacy.sexy/commit/98845e6caee168db131aaf0736533e450827a52c)
|
||||
* Bump TypeScript to 5.3 with `verbatimModuleSyntax` | [a721e82](https://github.com/undergroundwires/privacy.sexy/commit/a721e82a4fb603c0732ccfdffc87396c2a01363e)
|
||||
* Migrate to Vite 5 and adjust configurations | [4ac1425](https://github.com/undergroundwires/privacy.sexy/commit/4ac1425f76079352268c488f3ff607d1fdc1beb2)
|
||||
* win: improve and unify service start/stop logic | [adc2089](https://github.com/undergroundwires/privacy.sexy/commit/adc20898873d50a8873ffc74c48257e69a45d367)
|
||||
* Upgrade vitest to v1 and fix test definitions | [e721885](https://github.com/undergroundwires/privacy.sexy/commit/e7218850ba62a7bebaf4768b13e46cba0dedd906)
|
||||
* Improve URL checks to reduce false-negatives | [5abf8ff](https://github.com/undergroundwires/privacy.sexy/commit/5abf8ff216a1da737fd489864eeee880f78d6601)
|
||||
* win: improve OneDrive data deletion safety | [5eff3a0](https://github.com/undergroundwires/privacy.sexy/commit/5eff3a04886d0d23a6e4c13a0178bb247105c5cb)
|
||||
* Bump Electron to latest and use native ESM | [840adf9](https://github.com/undergroundwires/privacy.sexy/commit/840adf9429ed47f9e88c05e90f1d3ab930c2dfc4)
|
||||
* Fix tooltip styling inconsistency | [ec34ac1](https://github.com/undergroundwires/privacy.sexy/commit/ec34ac1124e8b8ae53bf31a4dbdc88bb078b3d4e)
|
||||
* win: fix VSCode manual update switch script #312 | [b71ad79](https://github.com/undergroundwires/privacy.sexy/commit/b71ad797a3af0db45143249903cb5e178692de7c)
|
||||
* mac, linux, win: fix dead URLs and improve docs | [abec9de](https://github.com/undergroundwires/privacy.sexy/commit/abec9def075d82fdaee9663ef8fe1a488911f45b)
|
||||
|
||||
[compare](https://github.com/undergroundwires/privacy.sexy/compare/0.13.0...0.13.1)
|
||||
|
||||
## 0.13.0 (2024-02-11)
|
||||
|
||||
* win: add disabling clipboard features #251, #247 | [c6ebba8](https://github.com/undergroundwires/privacy.sexy/commit/c6ebba85fb1b362be0d81d3078f19db71e0528b2)
|
||||
|
||||
@@ -122,7 +122,7 @@
|
||||
## Get started
|
||||
|
||||
- 🌍️ **Online**: [https://privacy.sexy](https://privacy.sexy).
|
||||
- 🖥️ **Offline**: Download directly for: [Windows](https://github.com/undergroundwires/privacy.sexy/releases/download/0.13.1/privacy.sexy-Setup-0.13.1.exe), [macOS](https://github.com/undergroundwires/privacy.sexy/releases/download/0.13.1/privacy.sexy-0.13.1.dmg), [Linux](https://github.com/undergroundwires/privacy.sexy/releases/download/0.13.1/privacy.sexy-0.13.1.AppImage). For more options, see [here](#additional-install-options).
|
||||
- 🖥️ **Offline**: Download directly for: [Windows](https://github.com/undergroundwires/privacy.sexy/releases/download/0.13.0/privacy.sexy-Setup-0.13.0.exe), [macOS](https://github.com/undergroundwires/privacy.sexy/releases/download/0.13.0/privacy.sexy-0.13.0.dmg), [Linux](https://github.com/undergroundwires/privacy.sexy/releases/download/0.13.0/privacy.sexy-0.13.0.AppImage). For more options, see [here](#additional-install-options).
|
||||
|
||||
For a detailed comparison of features between the desktop and web versions of privacy.sexy, see [Desktop vs. Web Features](./docs/desktop-vs-web-features.md).
|
||||
|
||||
|
||||
@@ -14,13 +14,14 @@ The presentation layer uses an event-driven architecture for bidirectional react
|
||||
- [**`main.ts`**](./../src/presentation/main.ts): Starts Vue app.
|
||||
- [**`index.html`**](./../src/presentation/index.html): The `index.html` entry file, located at the root of the project as required by Vite
|
||||
- [**`bootstrapping/`**](./../src/presentation/bootstrapping/): Registers Vue components and plugins.
|
||||
- [**`components/`**](./../src/presentation/components/): Contains Vue components, helpers and styles coupled to Vue components.
|
||||
- [**`components/`**](./../src/presentation/components/): Contains Vue components and helpers.
|
||||
- [**`Shared/`**](./../src/presentation/components/Shared): Contains shared Vue components and helpers.
|
||||
- [**`Hooks`**](../src/presentation/components/Shared/Hooks): Hooks used by components through [dependency injection](#dependency-injections).
|
||||
- [**`/public/`**](../src/presentation/public/): Contains static assets.
|
||||
- [**`assets/`**](./../src/presentation/assets/styles/): Contains assets processed by Vite.
|
||||
- [**`fonts/`**](./../src/presentation/assets/fonts/): Contains fonts.
|
||||
- [**`styles/`**](./../src/presentation/assets/styles/): Contains shared styles.
|
||||
- [**`components/`**](./../src/presentation/assets/styles/components): Contains styles coupled to Vue components.
|
||||
- [**`main.scss`**](./../src/presentation/assets/styles/main.scss): Main Sass file, imported by other components as single entrypoint..
|
||||
- [**`electron/`**](./../src/presentation/electron/): Contains Electron code.
|
||||
- [`/main/` **`index.ts`**](./../src/presentation/main.ts): Main entry for Electron, managing application windows and lifecycle events.
|
||||
@@ -37,13 +38,6 @@ The presentation layer uses an event-driven architecture for bidirectional react
|
||||
They should also have different visual state when hovering/touching on them that indicates that they are being clicked, which helps with accessibility.
|
||||
- **Borders**:
|
||||
privacy.sexy prefers sharper edges in its design language.
|
||||
- **Fonts**:
|
||||
- Use the primary font for regular text and monospace font for code or specific data.
|
||||
- Use cursive and logo fonts solely for branding.
|
||||
- Refer to [standardized font size variables](../src/presentation/assets/styles/_typography.scss) for font sizing, avoiding arbitrary `px`, `em`, `rem`, or percentage values.
|
||||
- **Spacing**:
|
||||
Use [global spacing variables](../src/presentation/assets/styles/_spacing.scss) for consistent margin, padding, and gap definitions.
|
||||
This provides uniform spatial distribution and alignment of elements, enhancing visual harmony and making the UI more scalable and maintainable.
|
||||
|
||||
## Application data
|
||||
|
||||
|
||||
7711
package-lock.json
generated
7711
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
72
package.json
72
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "privacy.sexy",
|
||||
"version": "0.13.1",
|
||||
"version": "0.13.0",
|
||||
"private": true,
|
||||
"slogan": "Privacy is sexy",
|
||||
"description": "Enforce privacy & security best-practices on Windows, macOS and Linux, because privacy is sexy.",
|
||||
@@ -33,66 +33,62 @@
|
||||
"postuninstall": "electron-builder install-app-deps"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/vue": "^1.0.6",
|
||||
"@floating-ui/vue": "^1.0.2",
|
||||
"@juggle/resize-observer": "^3.4.0",
|
||||
"ace-builds": "^1.33.0",
|
||||
"@types/markdown-it": "^13.0.7",
|
||||
"ace-builds": "^1.30.0",
|
||||
"electron-log": "^5.1.2",
|
||||
"electron-progressbar": "^2.2.1",
|
||||
"electron-updater": "^6.1.9",
|
||||
"electron-progressbar": "^2.1.0",
|
||||
"electron-updater": "^6.1.4",
|
||||
"file-saver": "^2.0.5",
|
||||
"markdown-it": "^14.1.0",
|
||||
"vue": "^3.4.21"
|
||||
"markdown-it": "^13.0.2",
|
||||
"vue": "^3.3.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@modyfi/vite-plugin-yaml": "^1.1.0",
|
||||
"@rushstack/eslint-patch": "^1.10.2",
|
||||
"@types/ace": "^0.0.52",
|
||||
"@types/file-saver": "^2.0.7",
|
||||
"@types/markdown-it": "^14.0.1",
|
||||
"@typescript-eslint/eslint-plugin": "6.21.0",
|
||||
"@typescript-eslint/parser": "6.21.0",
|
||||
"@rushstack/eslint-patch": "^1.6.1",
|
||||
"@types/ace": "^0.0.49",
|
||||
"@types/file-saver": "^2.0.5",
|
||||
"@typescript-eslint/eslint-plugin": "^6.17.0",
|
||||
"@typescript-eslint/parser": "^6.17.0",
|
||||
"@vitejs/plugin-legacy": "^5.3.2",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vue/eslint-config-airbnb-with-typescript": "^8.0.0",
|
||||
"@vue/eslint-config-typescript": "12.0.0",
|
||||
"@vue/test-utils": "^2.4.5",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"cypress": "^13.7.3",
|
||||
"electron": "^29.3.0",
|
||||
"@vue/eslint-config-typescript": "^12.0.0",
|
||||
"@vue/test-utils": "^2.4.1",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"cypress": "^13.3.1",
|
||||
"electron": "^29.1.4",
|
||||
"electron-builder": "^24.13.3",
|
||||
"electron-devtools-installer": "^3.2.0",
|
||||
"electron-icon-builder": "^2.0.1",
|
||||
"electron-vite": "^2.1.0",
|
||||
"eslint": "8.57.0",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-plugin-cypress": "^2.15.1",
|
||||
"eslint-plugin-vue": "^9.25.0",
|
||||
"eslint-plugin-vuejs-accessibility": "^2.2.1",
|
||||
"eslint-plugin-vue": "^9.19.2",
|
||||
"eslint-plugin-vuejs-accessibility": "^2.2.0",
|
||||
"icon-gen": "^4.0.0",
|
||||
"jsdom": "^24.0.0",
|
||||
"markdownlint-cli": "^0.39.0",
|
||||
"postcss": "^8.4.38",
|
||||
"jsdom": "^22.1.0",
|
||||
"markdownlint-cli": "^0.37.0",
|
||||
"postcss": "^8.4.31",
|
||||
"remark-cli": "^12.0.0",
|
||||
"remark-lint-no-dead-urls": "^1.1.0",
|
||||
"remark-preset-lint-consistent": "^6.0.0",
|
||||
"remark-validate-links": "^13.0.1",
|
||||
"sass": "^1.75.0",
|
||||
"start-server-and-test": "^2.0.3",
|
||||
"remark-preset-lint-consistent": "^5.1.2",
|
||||
"remark-validate-links": "^13.0.0",
|
||||
"sass": "^1.69.3",
|
||||
"start-server-and-test": "^2.0.1",
|
||||
"svgexport": "^0.4.2",
|
||||
"terser": "^5.30.3",
|
||||
"terser": "^5.21.0",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.4.5",
|
||||
"vite": "^5.2.8",
|
||||
"vitest": "^1.5.0",
|
||||
"vue-tsc": "^2.0.13",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.1.6",
|
||||
"vitest": "^1.3.1",
|
||||
"vue-tsc": "^1.8.19",
|
||||
"yaml-lint": "^1.7.0"
|
||||
},
|
||||
"//devDependencies": {
|
||||
"terser": "Used by `@vitejs/plugin-legacy` for minification",
|
||||
"@rushstack/eslint-patch": "Needed by `@vue/eslint-config-typescript` and `@vue/eslint-config-airbnb-with-typescript`",
|
||||
"@typescript-eslint/eslint-plugin": "Cannot migrate to v7 because of `@vue/eslint-config-airbnb-with-typescript`, see https://github.com/vuejs/eslint-config-airbnb/issues/63",
|
||||
"@typescript-eslint/parser": "Cannot migrate to v7 because of `@vue/eslint-config-airbnb-with-typescript`, see https://github.com/vuejs/eslint-config-airbnb/issues/63",
|
||||
"@vue/eslint-config-typescript": "Cannot migrate to v13 because of `@vue/eslint-config-airbnb-with-typescript`, see https://github.com/vuejs/eslint-config-airbnb/issues/63",
|
||||
"eslint": "Cannot migrate to v9 `@typescript-eslint/eslint-plugin` (≤ v7), `@typescript-eslint/parser` (≤ v7), `@vue/eslint-config-airbnb-with-typescript@` (≤ v8) requires `eslint` ≤ v8, see https://github.com/vuejs/eslint-config-airbnb/issues/65, https://github.com/typescript-eslint/typescript-eslint/issues/8211"
|
||||
"@rushstack/eslint-patch": "Needed by `@vue/eslint-config-typescript` and `@vue/eslint-config-airbnb-with-typescript`"
|
||||
},
|
||||
"homepage": "https://privacy.sexy",
|
||||
"repository": {
|
||||
|
||||
@@ -1,15 +1,4 @@
|
||||
/**
|
||||
* Description:
|
||||
* This script updates the logo images across the project based on the primary
|
||||
* logo file ('img/logo.svg' file).
|
||||
* It handles the creation and update of various icon sizes for different purposes,
|
||||
* including desktop launcher icons, tray icons, and web favicons from a single source
|
||||
* SVG logo file.
|
||||
*
|
||||
* Usage:
|
||||
* node ./scripts/logo-update.js
|
||||
*/
|
||||
|
||||
#!/usr/bin/env bash
|
||||
import { resolve, join } from 'node:path';
|
||||
import { rm, mkdtemp, stat } from 'node:fs/promises';
|
||||
import { spawn } from 'node:child_process';
|
||||
|
||||
@@ -1,87 +1,62 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Description:
|
||||
* This script checks if a server, provided as a CLI argument, is up
|
||||
* and returns an HTTP 200 status code.
|
||||
* It is designed to provide easy verification of server availability
|
||||
* and will retry a specified number of times.
|
||||
* This script checks if a server, provided as a CLI argument, is up
|
||||
* and returns an HTTP 200 status code.
|
||||
* It is designed to provide easy verification of server availability
|
||||
* and will retry a specified number of times.
|
||||
*
|
||||
* Usage:
|
||||
* node ./scripts/verify-web-server-status.js --url [URL] [--max-retries NUMBER]
|
||||
* node ./scripts/verify-web-server-status.js --url [URL]
|
||||
*
|
||||
* Options:
|
||||
* --url URL of the server to check
|
||||
* --max-retries Maximum number of retry attempts (default: 30)
|
||||
* --url URL of the server to check
|
||||
*/
|
||||
|
||||
const DEFAULT_MAX_RETRIES = 30;
|
||||
const RETRY_DELAY_IN_SECONDS = 3;
|
||||
const PARAMETER_NAME_URL = '--url';
|
||||
const PARAMETER_NAME_MAX_RETRIES = '--max-retries';
|
||||
import { get } from 'http';
|
||||
|
||||
async function checkServer(currentRetryCount = 1) {
|
||||
const serverUrl = readRequiredParameterValue(PARAMETER_NAME_URL);
|
||||
const maxRetries = parseNumber(
|
||||
readOptionalParameterValue(PARAMETER_NAME_MAX_RETRIES, DEFAULT_MAX_RETRIES),
|
||||
);
|
||||
console.log(`🌐 Requesting ${serverUrl}...`);
|
||||
try {
|
||||
const response = await fetch(serverUrl);
|
||||
if (response.status === 200) {
|
||||
const MAX_RETRIES = 30;
|
||||
const RETRY_DELAY_IN_SECONDS = 3;
|
||||
const URL_PARAMETER_NAME = '--url';
|
||||
|
||||
function checkServer(currentRetryCount = 1) {
|
||||
const serverUrl = getServerUrl();
|
||||
console.log(`Requesting ${serverUrl}...`);
|
||||
get(serverUrl, (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
console.log('🎊 Success: The server is up and returned HTTP 200.');
|
||||
process.exit(0);
|
||||
} else {
|
||||
exitWithError(`Server returned unexpected HTTP status code ${response.statusCode}.`);
|
||||
console.log(`Server returned HTTP status code ${res.statusCode}.`);
|
||||
retry(currentRetryCount);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error making the request:', error);
|
||||
scheduleNextRetry(maxRetries, currentRetryCount);
|
||||
}
|
||||
}).on('error', (err) => {
|
||||
console.error('Error making the request:', err);
|
||||
retry(currentRetryCount);
|
||||
});
|
||||
}
|
||||
|
||||
function scheduleNextRetry(maxRetries, currentRetryCount) {
|
||||
console.log(`Attempt ${currentRetryCount}/${maxRetries}:`);
|
||||
function retry(currentRetryCount) {
|
||||
console.log(`Attempt ${currentRetryCount}/${MAX_RETRIES}:`);
|
||||
console.log(`Retrying in ${RETRY_DELAY_IN_SECONDS} seconds.`);
|
||||
|
||||
const remainingTime = (maxRetries - currentRetryCount) * RETRY_DELAY_IN_SECONDS;
|
||||
const remainingTime = (MAX_RETRIES - currentRetryCount) * RETRY_DELAY_IN_SECONDS;
|
||||
console.log(`Time remaining before timeout: ${remainingTime}s`);
|
||||
|
||||
if (currentRetryCount < maxRetries) {
|
||||
if (currentRetryCount < MAX_RETRIES) {
|
||||
setTimeout(() => checkServer(currentRetryCount + 1), RETRY_DELAY_IN_SECONDS * 1000);
|
||||
} else {
|
||||
exitWithError('The server at did not return HTTP 200 within the allocated time.');
|
||||
console.log('Failure: The server at did not return HTTP 200 within the allocated time. Exiting.');
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
function readRequiredParameterValue(parameterName) {
|
||||
const parameterValue = readOptionalParameterValue(parameterName);
|
||||
if (parameterValue === undefined) {
|
||||
exitWithError(`Parameter "${parameterName}" is required but not provided.`);
|
||||
function getServerUrl() {
|
||||
const urlIndex = process.argv.indexOf(URL_PARAMETER_NAME);
|
||||
if (urlIndex === -1 || urlIndex === process.argv.length - 1) {
|
||||
console.error(`Parameter "${URL_PARAMETER_NAME}" is not provided.`);
|
||||
process.exit(1);
|
||||
}
|
||||
return parameterValue;
|
||||
return process.argv[urlIndex + 1];
|
||||
}
|
||||
|
||||
function readOptionalParameterValue(parameterName, defaultValue) {
|
||||
const index = process.argv.indexOf(parameterName);
|
||||
if (index === -1 || index === process.argv.length - 1) {
|
||||
return defaultValue;
|
||||
}
|
||||
return process.argv[index + 1];
|
||||
}
|
||||
|
||||
function parseNumber(numberLike) {
|
||||
const number = parseInt(numberLike, 10);
|
||||
if (Number.isNaN(number)) {
|
||||
exitWithError(`Invalid number: ${numberLike}`);
|
||||
}
|
||||
return number;
|
||||
}
|
||||
|
||||
function exitWithError(message) {
|
||||
console.error(`Failure: ${message}`);
|
||||
console.log('Exiting');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
await checkServer();
|
||||
checkServer();
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
/*
|
||||
Shuffle an array of strings, returning a new array with elements in random order.
|
||||
Uses the Fisher-Yates (or Durstenfeld) algorithm.
|
||||
*/
|
||||
export function shuffle<T>(array: readonly T[]): T[] {
|
||||
const shuffledArray = [...array];
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
|
||||
}
|
||||
return shuffledArray;
|
||||
}
|
||||
@@ -1733,7 +1733,7 @@ actions:
|
||||
See also:
|
||||
- [Source code for the Ubuntu Report tool | github.com](https://web.archive.org/web/20221029221854/https://github.com/ubuntu/ubuntu-report/)
|
||||
- [Statistics gathered and visualized | ubuntu.com/desktop/statistics](https://web.archive.org/web/20221029221910/https://ubuntu.com/desktop/statistics)
|
||||
- [ubuntu-devel mailing list thread where ubuntu-report was first proposed | lists.ubuntu.com](https://web.archive.org/web/20221029162523/https://lists.ubuntu.com/archives/ubuntu-devel/2018-February/040139.html)
|
||||
- [ubuntu-devel mailing list thread where ubuntu-report was first proposed, | lists.ubuntu.com ](https://web.archive.org/web/20221029162523/https://lists.ubuntu.com/archives/ubuntu-devel/2018-February/040139.html)
|
||||
|
||||
[1]: https://web.archive.org/web/20221029162505/https://github.com/ubuntu/ubuntu-report/blob/30e902ebc17e4e10d83392d7cd3dc05fc9e35cc4/README.md "ubuntu-report/README.md at master · ubuntu/ubuntu-report | github.com"
|
||||
[2]: https://web.archive.org/web/20221029162538/https://github.com/ubuntu/ubuntu-report/blob/8e6030ff9bbeacacf41a9b58ea638a5c9a6f864d/README.md "More diagnostics data from desktop | lists.ubuntu.com"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,16 +0,0 @@
|
||||
// Use for fixed-size elements where consistent spacing is important
|
||||
// regardless of context.
|
||||
$spacing-absolute-xx-small: 3px;
|
||||
$spacing-absolute-x-small : 4px;
|
||||
$spacing-absolute-small : 6px;
|
||||
$spacing-absolute-medium : 10px;
|
||||
$spacing-absolute-large : 15px;
|
||||
$spacing-absolute-x-large : 20px;
|
||||
$spacing-absolute-xx-large: 30px;
|
||||
|
||||
// Use for elements with text content where spacing should
|
||||
// scale with text size.
|
||||
$spacing-relative-x-small : 0.25em;
|
||||
$spacing-relative-small : 0.5em;
|
||||
$spacing-relative-medium : 1em;
|
||||
$spacing-relative-large : 2em;
|
||||
@@ -5,15 +5,16 @@
|
||||
CSS Base applies a style foundation for HTML elements that is consistent for baseline browsers
|
||||
*/
|
||||
|
||||
@use "../colors" as *;
|
||||
@use "../mixins" as *;
|
||||
@use "../vite-path" as *;
|
||||
@use "../typography" as *;
|
||||
@use "../spacing" as *;
|
||||
@use "@/presentation/assets/styles/colors" as *;
|
||||
@use "@/presentation/assets/styles/mixins" as *;
|
||||
@use "@/presentation/assets/styles/vite-path" as *;
|
||||
@use "@/presentation/assets/styles/typography" as *;
|
||||
@use "_code-styling" as *;
|
||||
@use "_margin-padding" as *;
|
||||
@use "_link-styling" as *;
|
||||
|
||||
$base-spacing: 1em;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -21,7 +22,7 @@
|
||||
body {
|
||||
background: $color-background;
|
||||
@include base-font-style;
|
||||
@include apply-uniform-spacing;
|
||||
@include apply-uniform-spacing($base-spacing: $base-spacing)
|
||||
}
|
||||
|
||||
input {
|
||||
@@ -29,12 +30,12 @@ input {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 0 $spacing-relative-medium;
|
||||
border-left: $spacing-absolute-x-small solid $color-primary;
|
||||
padding: 0 $base-spacing;
|
||||
border-left: .25em solid $color-primary;
|
||||
}
|
||||
|
||||
@include style-code-elements(
|
||||
$code-block-padding: $spacing-relative-medium,
|
||||
$code-block-padding: $base-spacing,
|
||||
$color-background: $color-primary-darker,
|
||||
);
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
@use 'sass:math';
|
||||
@use "../spacing" as *;
|
||||
|
||||
@mixin no-margin($selectors) {
|
||||
#{$selectors} {
|
||||
@@ -27,7 +26,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin apply-uniform-vertical-spacing {
|
||||
@mixin apply-uniform-vertical-spacing($base-vertical-spacing) {
|
||||
/* Reset default top/bottom margins added by browser. */
|
||||
@include no-margin('p');
|
||||
@include no-margin('h1, h2, h3, h4, h5, h6');
|
||||
@@ -37,27 +36,29 @@
|
||||
@include no-margin('ul, ol');
|
||||
|
||||
/* Add spacing between elements using `margin-bottom` only (bottom-up instead of top-down strategy). */
|
||||
@include bottom-margin('p', $spacing-relative-medium);
|
||||
@include bottom-margin('li > p', $spacing-relative-small); // Reduce margin for paragraphs directly within list items to visually group related content.
|
||||
@include bottom-margin('h1, h2, h3, h4, h5, h6', $spacing-relative-small);
|
||||
@include bottom-margin('ul, ol', $spacing-relative-medium);
|
||||
@include bottom-margin('li', $spacing-relative-small);
|
||||
@include bottom-margin('table', $spacing-relative-medium);
|
||||
@include bottom-margin('blockquote', $spacing-relative-medium);
|
||||
@include bottom-margin('pre', $spacing-relative-medium);
|
||||
@include bottom-margin('article', $spacing-relative-medium);
|
||||
@include bottom-margin('hr', $spacing-relative-medium);
|
||||
$small-vertical-spacing: math.div($base-vertical-spacing, 2);
|
||||
@include bottom-margin('p', $base-vertical-spacing);
|
||||
@include bottom-margin('li > p', $small-vertical-spacing); // Reduce margin for paragraphs directly within list items to visually group related content.
|
||||
@include bottom-margin('h1, h2, h3, h4, h5, h6', $small-vertical-spacing);
|
||||
@include bottom-margin('ul, ol', $base-vertical-spacing);
|
||||
@include bottom-margin('li', $small-vertical-spacing);
|
||||
@include bottom-margin('table', $base-vertical-spacing);
|
||||
@include bottom-margin('blockquote', $base-vertical-spacing);
|
||||
@include bottom-margin('pre', $base-vertical-spacing);
|
||||
@include bottom-margin('article', $base-vertical-spacing);
|
||||
@include bottom-margin('hr', $base-vertical-spacing);
|
||||
}
|
||||
|
||||
@mixin apply-uniform-horizontal-spacing {
|
||||
@mixin apply-uniform-horizontal-spacing($base-horizontal-spacing) {
|
||||
/* Reset default left/right paddings added by browser. */
|
||||
@include no-padding('ul, ol');
|
||||
|
||||
/* Add spacing for list items. */
|
||||
@include left-padding('ul, ol', $spacing-relative-large);
|
||||
$large-horizontal-spacing: $base-horizontal-spacing * 2;
|
||||
@include left-padding('ul, ol', $large-horizontal-spacing);
|
||||
}
|
||||
|
||||
@mixin apply-uniform-spacing {
|
||||
@include apply-uniform-vertical-spacing;
|
||||
@include apply-uniform-horizontal-spacing;
|
||||
@mixin apply-uniform-spacing($base-spacing) {
|
||||
@include apply-uniform-vertical-spacing($base-spacing);
|
||||
@include apply-uniform-horizontal-spacing($base-spacing);
|
||||
}
|
||||
|
||||
1
src/presentation/assets/styles/components/_card.scss
Normal file
1
src/presentation/assets/styles/components/_card.scss
Normal file
@@ -0,0 +1 @@
|
||||
$card-gap: 15px;
|
||||
@@ -5,5 +5,6 @@
|
||||
@forward "./media";
|
||||
@forward "./colors";
|
||||
@forward "./base";
|
||||
@forward "./spacing";
|
||||
@forward "./mixins";
|
||||
|
||||
@forward "./components/card";
|
||||
|
||||
@@ -50,48 +50,24 @@ function getOptionalDevToolkitComponent(): Component | undefined {
|
||||
|
||||
<style lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
@use 'sass:math';
|
||||
|
||||
@mixin responsive-spacing {
|
||||
// Avoid using percentage-based values for spacing the avoid unintended layout shifts.
|
||||
margin-left: $spacing-absolute-medium;
|
||||
margin-right: $spacing-absolute-medium;
|
||||
padding: $spacing-absolute-xx-large;
|
||||
@media screen and (max-width: $media-screen-big-width) {
|
||||
margin-left: $spacing-absolute-small;
|
||||
margin-right: $spacing-absolute-small;
|
||||
padding: $spacing-absolute-x-large;
|
||||
}
|
||||
@media screen and (max-width: $media-screen-medium-width) {
|
||||
margin-left: $spacing-absolute-x-small;
|
||||
margin-right: $spacing-absolute-x-small;
|
||||
padding: $spacing-absolute-medium;
|
||||
}
|
||||
@media screen and (max-width: $media-screen-small-width) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: $spacing-absolute-small;
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 1600px;
|
||||
.app__wrapper {
|
||||
margin: 0% 2% 0% 2%;
|
||||
background-color: $color-surface;
|
||||
color: $color-on-surface;
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
|
||||
|
||||
@include responsive-spacing;
|
||||
|
||||
padding: 2%;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
.app__row {
|
||||
margin-bottom: $spacing-absolute-large;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.app__code-buttons {
|
||||
padding-bottom: $spacing-absolute-medium;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,6 +74,7 @@ export default defineComponent({
|
||||
color: $color-on-secondary;
|
||||
|
||||
border: none;
|
||||
padding: 20px;
|
||||
transition-duration: 0.4s;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 9px $color-primary-darkest;
|
||||
|
||||
@@ -54,14 +54,14 @@ export default defineComponent({
|
||||
|
||||
.copyable-command {
|
||||
display: inline-flex;
|
||||
padding: $spacing-relative-x-small;
|
||||
padding: 0.25em;
|
||||
font-size: $font-size-absolute-small;
|
||||
.dollar {
|
||||
margin-right: $spacing-relative-small;
|
||||
margin-right: 0.5rem;
|
||||
user-select: none;
|
||||
}
|
||||
.copy-action-container {
|
||||
margin-left: $spacing-relative-medium;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
// Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
|
||||
name: 'InstructionSteps', // Define component name for empty component for Vue build and ESLint compatibility.
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -8,6 +8,6 @@
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
// Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
|
||||
name: 'InstructionSteps', // Define component name for empty component for Vue build and ESLint compatibility.
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -34,15 +34,12 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: $spacing-absolute-xx-large;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.code-button {
|
||||
width: 10%;
|
||||
min-width: 90px;
|
||||
|
||||
@@ -77,7 +77,7 @@ interface DevAction {
|
||||
right: 0;
|
||||
background-color: rgba($color-on-surface, 0.5);
|
||||
color: $color-on-primary;
|
||||
padding: $spacing-absolute-medium;
|
||||
padding: 10px;
|
||||
z-index: 10000;
|
||||
|
||||
display:flex;
|
||||
@@ -113,14 +113,14 @@ interface DevAction {
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-absolute-medium;
|
||||
gap: 10px;
|
||||
@include reset-ul;
|
||||
|
||||
.action-button {
|
||||
@include reset-button;
|
||||
|
||||
display: block;
|
||||
padding: $spacing-absolute-x-small $spacing-absolute-medium;
|
||||
padding: 5px 10px;
|
||||
background-color: $color-primary;
|
||||
color: $color-on-primary;
|
||||
border: none;
|
||||
|
||||
@@ -25,7 +25,7 @@ export default defineComponent({
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
$gap: $spacing-relative-x-small;
|
||||
$gap: 0.25rem;
|
||||
.list {
|
||||
display: flex;
|
||||
:deep(.items) {
|
||||
|
||||
@@ -37,10 +37,8 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
.circle-rating {
|
||||
display: inline-flex;
|
||||
gap: $spacing-relative-x-small;
|
||||
gap: 0.2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
<template>
|
||||
<span class="circle-container">
|
||||
<svg :viewBox="viewBox">
|
||||
<circle
|
||||
:cx="circleRadiusInPx"
|
||||
:cy="circleRadiusInPx"
|
||||
:r="circleRadiusWithoutStrokeInPx"
|
||||
:stroke-width="circleStrokeWidthStyleValue"
|
||||
:class="{
|
||||
filled,
|
||||
}"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
:style="{
|
||||
'--circle-stroke-width': `${circleStrokeWidthInPx}px`,
|
||||
}"
|
||||
:viewBox="viewBox"
|
||||
>
|
||||
<circle
|
||||
:cx="circleRadiusInPx"
|
||||
:cy="circleRadiusInPx"
|
||||
:r="circleRadiusWithoutStrokeInPx"
|
||||
:class="{
|
||||
filled,
|
||||
}"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -41,13 +43,10 @@ export default defineComponent({
|
||||
const height = circleDiameterInPx + circleStrokeWidthInPx;
|
||||
return `${minX} ${minY} ${width} ${height}`;
|
||||
});
|
||||
const circleStrokeWidthStyleValue = computed(() => {
|
||||
return `${circleStrokeWidthInPx}px`;
|
||||
});
|
||||
return {
|
||||
circleRadiusInPx,
|
||||
circleDiameterInPx,
|
||||
circleStrokeWidthStyleValue,
|
||||
circleStrokeWidthInPx,
|
||||
circleRadiusWithoutStrokeInPx,
|
||||
viewBox,
|
||||
};
|
||||
@@ -56,18 +55,17 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
$circle-color: currentColor;
|
||||
$circle-height: $font-size-relative-smaller;
|
||||
$circleColor: currentColor;
|
||||
$circleHeight: 0.8em;
|
||||
$circleStrokeWidth: var(--circle-stroke-width);
|
||||
|
||||
svg {
|
||||
font-size: $circle-height;
|
||||
height: 1em;
|
||||
height: $circleHeight;
|
||||
circle {
|
||||
stroke: $circle-color;
|
||||
stroke: $circleColor;
|
||||
stroke-width: $circleStrokeWidth;
|
||||
&.filled {
|
||||
fill: $circle-color;
|
||||
fill: $circleColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -88,7 +88,7 @@ export default defineComponent({
|
||||
|
||||
@mixin horizontal-stack {
|
||||
display: flex;
|
||||
gap: $spacing-relative-small;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
@mixin apply-icon-color($color) {
|
||||
|
||||
@@ -55,7 +55,7 @@ export default defineComponent({
|
||||
|
||||
@mixin horizontal-stack {
|
||||
display: flex;
|
||||
gap: $spacing-relative-small;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
@mixin apply-icon-color($color) {
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="scripts-menu">
|
||||
<div class="scripts-menu-item scripts-menu-rows">
|
||||
<TheRecommendationSelector class="scripts-menu-item" />
|
||||
<TheRevertSelector class="scripts-menu-item" />
|
||||
<div id="container">
|
||||
<div class="item rows">
|
||||
<TheRecommendationSelector class="item" />
|
||||
<TheRevertSelector class="item" />
|
||||
</div>
|
||||
<TheOsChanger class="scripts-menu-item" />
|
||||
<TheOsChanger class="item" />
|
||||
<TheViewChanger
|
||||
v-if="!isSearching"
|
||||
class="scripts-menu-item"
|
||||
class="item"
|
||||
@view-changed="$emit('viewChanged', $event)"
|
||||
/>
|
||||
</div>
|
||||
@@ -67,44 +67,29 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
@use 'sass:math';
|
||||
|
||||
@mixin center-middle-flex-item {
|
||||
&:first-child, &:last-child {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
&:last-child {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
$responsive-alignment-breakpoint: $media-screen-medium-width;
|
||||
|
||||
.scripts-menu {
|
||||
$margin-between-lines: 7px;
|
||||
#container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: $spacing-relative-medium;
|
||||
row-gap: $spacing-relative-small;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-left: $spacing-absolute-small;
|
||||
margin-right: $spacing-absolute-small;
|
||||
@media screen and (max-width: $responsive-alignment-breakpoint) {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.scripts-menu-item {
|
||||
margin-top: -$margin-between-lines;
|
||||
.item {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
@media screen and (min-width: $responsive-alignment-breakpoint) {
|
||||
@include center-middle-flex-item;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: $margin-between-lines 5px 0 5px;
|
||||
&:first-child {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&:last-child {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.scripts-menu-rows {
|
||||
.rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
row-gap: $spacing-relative-x-small;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
<template>
|
||||
<div class="slider">
|
||||
<div
|
||||
class="slider"
|
||||
:style="{
|
||||
'--vertical-margin': verticalMargin,
|
||||
'--first-min-width': firstMinWidth,
|
||||
'--first-initial-width': firstInitialWidth,
|
||||
'--second-min-width': secondMinWidth,
|
||||
}"
|
||||
>
|
||||
<div ref="firstElement" class="first">
|
||||
<slot name="first" />
|
||||
</div>
|
||||
@@ -19,6 +27,10 @@ export default defineComponent({
|
||||
SliderHandle,
|
||||
},
|
||||
props: {
|
||||
verticalMargin: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
firstMinWidth: {
|
||||
type: String,
|
||||
required: true,
|
||||
@@ -59,18 +71,21 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.first {
|
||||
min-width: v-bind(firstMinWidth);
|
||||
width: v-bind(firstInitialWidth);
|
||||
min-width: var(--first-min-width);
|
||||
width: var(--first-initial-width);
|
||||
}
|
||||
.second {
|
||||
flex: 1;
|
||||
min-width: v-bind(secondMinWidth);
|
||||
min-width: var(--second-min-width);
|
||||
}
|
||||
@media screen and (max-width: $media-vertical-view-breakpoint) {
|
||||
flex-direction: column;
|
||||
.first {
|
||||
width: auto !important;
|
||||
}
|
||||
.second {
|
||||
margin-top: var(--vertical-margin);
|
||||
}
|
||||
.handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -81,7 +81,7 @@ $cursor : v-bind(cursorCssValue);
|
||||
.icon {
|
||||
color: $color;
|
||||
}
|
||||
margin-right: $spacing-absolute-small;
|
||||
margin-left: $spacing-absolute-small;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
<div class="script-area">
|
||||
<TheScriptsMenu @view-changed="currentView = $event" />
|
||||
<HorizontalResizeSlider
|
||||
class="horizontal-slider"
|
||||
class="row"
|
||||
vertical-margin="15px"
|
||||
first-initial-width="55%"
|
||||
first-min-width="20%"
|
||||
second-min-width="20%"
|
||||
@@ -41,17 +42,9 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
.script-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-absolute-medium;
|
||||
}
|
||||
|
||||
.horizontal-slider {
|
||||
// Add row gap between lines on mobile (smaller screens)
|
||||
// when the slider turns into rows.
|
||||
row-gap: $spacing-absolute-large;
|
||||
gap: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<transition name="card-expand-collapse-transition">
|
||||
<slot />
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
// Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
.card-expand-collapse-transition-enter-active {
|
||||
transition:
|
||||
opacity 0.3s ease-in-out,
|
||||
max-height 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.card-expand-collapse-transition-enter-from {
|
||||
opacity: 0; // Fade-in
|
||||
max-height: 0; // Expand
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div class="arrow-container">
|
||||
<div class="arrow" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
// Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
$arrow-size: $font-size-absolute-normal;
|
||||
|
||||
.arrow-container {
|
||||
position: relative;
|
||||
.arrow {
|
||||
position: absolute;
|
||||
left: calc(50% - $arrow-size * 1.5);
|
||||
top: calc(-0.35 * $arrow-size);
|
||||
border: solid $color-primary-darker;
|
||||
border-width: 0 $arrow-size $arrow-size 0;
|
||||
padding: $arrow-size;
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -125,7 +125,6 @@ function isClickable(element: Element) {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
@use "./card-gap" as *;
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
@@ -136,7 +135,7 @@ function isClickable(element: Element) {
|
||||
It ensures that there's room to grow, so the animation is shown without overflowing
|
||||
with scrollbars.
|
||||
*/
|
||||
padding: $spacing-absolute-medium;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.error {
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
ref="cardElement"
|
||||
class="card"
|
||||
:class="{
|
||||
'is-collapsed': !isExpanded,
|
||||
'is-inactive': activeCategoryId && activeCategoryId !== categoryId,
|
||||
'is-expanded': isExpanded,
|
||||
}"
|
||||
@@ -28,28 +29,20 @@
|
||||
:category-id="categoryId"
|
||||
/>
|
||||
</div>
|
||||
<CardExpandTransition>
|
||||
<div v-show="isExpanded">
|
||||
<CardExpansionArrow />
|
||||
<div
|
||||
class="card__expander"
|
||||
@click.stop
|
||||
>
|
||||
<div class="card__expander__close-button">
|
||||
<FlatButton
|
||||
icon="xmark"
|
||||
@click="collapse()"
|
||||
/>
|
||||
</div>
|
||||
<div class="card__expander__content">
|
||||
<ScriptsTree
|
||||
:category-id="categoryId"
|
||||
:has-top-padding="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card__expander" @click.stop>
|
||||
<div class="card__expander__close-button">
|
||||
<FlatButton
|
||||
icon="xmark"
|
||||
@click="collapse()"
|
||||
/>
|
||||
</div>
|
||||
</CardExpandTransition>
|
||||
<div class="card__expander__content">
|
||||
<ScriptsTree
|
||||
:category-id="categoryId"
|
||||
:has-top-padding="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -63,8 +56,6 @@ import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
|
||||
import { sleep } from '@/infrastructure/Threading/AsyncSleep';
|
||||
import CardSelectionIndicator from './CardSelectionIndicator.vue';
|
||||
import CardExpandTransition from './CardExpandTransition.vue';
|
||||
import CardExpansionArrow from './CardExpansionArrow.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@@ -72,8 +63,6 @@ export default defineComponent({
|
||||
AppIcon,
|
||||
CardSelectionIndicator,
|
||||
FlatButton,
|
||||
CardExpandTransition,
|
||||
CardExpansionArrow,
|
||||
},
|
||||
props: {
|
||||
categoryId: {
|
||||
@@ -138,14 +127,16 @@ export default defineComponent({
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
@use "./card-gap" as *;
|
||||
|
||||
$card-inner-padding : $spacing-absolute-xx-large;
|
||||
$expanded-margin-top : $spacing-absolute-xx-large;
|
||||
$card-inner-padding : 30px;
|
||||
$arrow-size : 15px;
|
||||
$expanded-margin-top : 30px;
|
||||
$card-horizontal-gap : $card-gap;
|
||||
|
||||
.card {
|
||||
.card__inner {
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&__inner {
|
||||
padding-top: $card-inner-padding;
|
||||
padding-right: $card-inner-padding;
|
||||
padding-bottom: 0;
|
||||
@@ -158,7 +149,7 @@ $card-horizontal-gap : $card-gap;
|
||||
width: 100%;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
@@ -169,6 +160,9 @@ $card-horizontal-gap : $card-gap;
|
||||
color: $color-on-secondary;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
&:after {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.card__inner__title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -179,18 +173,19 @@ $card-horizontal-gap : $card-gap;
|
||||
.card__inner__selection_indicator {
|
||||
height: $card-inner-padding;
|
||||
margin-right: -$card-inner-padding;
|
||||
padding-right: $spacing-absolute-medium;
|
||||
padding-right: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.card__inner__expand-icon {
|
||||
width: 100%;
|
||||
margin-top: $spacing-relative-x-small;
|
||||
margin-top: .25em;
|
||||
vertical-align: middle;
|
||||
font-size: $font-size-absolute-normal;
|
||||
}
|
||||
}
|
||||
.card__expander {
|
||||
transition: all 0.2s ease-in-out;
|
||||
position: relative;
|
||||
background-color: $color-primary-darker;
|
||||
color: $color-on-primary;
|
||||
@@ -210,7 +205,7 @@ $card-horizontal-gap : $card-gap;
|
||||
.card__expander__close-button {
|
||||
font-size: $font-size-absolute-large;
|
||||
align-self: flex-end;
|
||||
margin-right: $spacing-absolute-small;
|
||||
margin-right: 0.25em;
|
||||
@include clickable;
|
||||
color: $color-primary-light;
|
||||
@include hover-or-touch {
|
||||
@@ -219,15 +214,43 @@ $card-horizontal-gap : $card-gap;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-collapsed {
|
||||
.card__inner {
|
||||
&:after {
|
||||
content: "";
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card__expander {
|
||||
max-height: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-expanded {
|
||||
.card__inner {
|
||||
height: auto;
|
||||
background-color: $color-secondary;
|
||||
color: $color-on-secondary;
|
||||
&:after { // arrow
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: calc(-1 * #{$expanded-margin-top});
|
||||
left: calc(50% - #{$arrow-size});
|
||||
border-left: #{$arrow-size} solid transparent;
|
||||
border-right: #{$arrow-size} solid transparent;
|
||||
border-bottom: #{$arrow-size} solid $color-primary-darker;
|
||||
}
|
||||
}
|
||||
|
||||
.card__expander {
|
||||
min-height: 200px;
|
||||
margin-top: $expanded-margin-top;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@include hover-or-touch {
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
$card-gap: $spacing-absolute-large;
|
||||
@@ -128,7 +128,10 @@ export default defineComponent({
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
$margin-inner: 4px;
|
||||
|
||||
.scripts-view {
|
||||
margin-top: $margin-inner;
|
||||
@media screen and (min-width: $media-vertical-view-breakpoint) {
|
||||
// so the current code is always visible
|
||||
overflow: auto;
|
||||
@@ -140,17 +143,16 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $color-scripts-bg;
|
||||
padding-top: $spacing-absolute-large;
|
||||
padding-bottom:$spacing-absolute-large;
|
||||
.search__query {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 1em;
|
||||
color: $color-primary-light;
|
||||
.search__query__close-button {
|
||||
font-size: $font-size-absolute-large;
|
||||
margin-left: $spacing-relative-x-small;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
.search-no-matches {
|
||||
@@ -159,9 +161,11 @@ export default defineComponent({
|
||||
word-break:break-word;
|
||||
color: $color-on-primary;
|
||||
font-size: $font-size-absolute-large;
|
||||
padding: $spacing-absolute-medium;
|
||||
padding:10px;
|
||||
text-align:center;
|
||||
gap: $spacing-relative-small;
|
||||
> div {
|
||||
padding-bottom:13px;
|
||||
}
|
||||
a {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
@@ -69,7 +69,7 @@ export default defineComponent({
|
||||
flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items.
|
||||
max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
|
||||
*:not(:first-child) {
|
||||
margin-left: $spacing-absolute-small;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
@@ -80,10 +80,10 @@ export default defineComponent({
|
||||
}
|
||||
.docs {
|
||||
background: $color-primary-darkest;
|
||||
margin-top: $spacing-relative-x-small;
|
||||
margin-top: 0.25em;
|
||||
color: $color-on-primary;
|
||||
text-transform: none;
|
||||
padding: $spacing-absolute-medium;
|
||||
padding: 0.5em;
|
||||
&-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import MarkdownIt from 'markdown-it';
|
||||
import type { MarkdownRenderer } from '../MarkdownRenderer';
|
||||
import type { RenderRule } from 'markdown-it/lib/renderer.mjs'; // eslint-disable-line import/extensions
|
||||
import type { RenderRule } from 'markdown-it/lib/renderer';
|
||||
|
||||
export class MarkdownItHtmlRenderer implements MarkdownRenderer {
|
||||
public render(markdownContent: string): string {
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
<template>
|
||||
<DocumentableNode
|
||||
class="node-content-wrapper"
|
||||
:docs="nodeMetadata.docs"
|
||||
>
|
||||
<div class="node-content">
|
||||
<div class="node-content-item">
|
||||
<DocumentableNode :docs="nodeMetadata.docs">
|
||||
<div id="node">
|
||||
<div class="item">
|
||||
<NodeTitle :title="nodeMetadata.text" />
|
||||
</div>
|
||||
<RevertToggle
|
||||
v-if="nodeMetadata.isReversible"
|
||||
class="node-content-item"
|
||||
class="item"
|
||||
:node="nodeMetadata"
|
||||
/>
|
||||
</div>
|
||||
@@ -41,22 +38,13 @@ export default defineComponent({
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
.node-content-wrapper {
|
||||
/*
|
||||
Compensate word breaking when it causes overflows of the node content,
|
||||
This issue happens on small devices when nodes are being rendered during search where the node header or
|
||||
documentation grows to cause to overflow.
|
||||
*/
|
||||
overflow-wrap: anywhere;
|
||||
#node {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.node-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.node-content-item:not(:first-child) {
|
||||
margin-left: $spacing-relative-small;
|
||||
}
|
||||
.item:not(:first-child) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<ToggleSwitch
|
||||
v-model="isReverted"
|
||||
:stop-click-propagation="true"
|
||||
label="Revert"
|
||||
:label="'Revert'"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -83,12 +83,12 @@ $color-text-unchecked : $color-on-primary;
|
||||
$color-text-checked : $color-on-secondary;
|
||||
$color-bg-unchecked : $color-primary;
|
||||
$color-bg-checked : $color-secondary;
|
||||
$padding-horizontal : $spacing-relative-small;
|
||||
$padding-vertical : $spacing-absolute-small;
|
||||
$padding-horizontal : calc($font-size * 0.4);
|
||||
$padding-vertical : calc($font-size * 0.3);
|
||||
$size-height : calc($font-size + ($padding-vertical * 2));
|
||||
$size-circle : calc($size-height * 2/3);
|
||||
$size-circle : math.div($size-height * 2, 3);
|
||||
|
||||
$gap-between-circle-and-text : $spacing-relative-x-small;
|
||||
$gap-between-circle-and-text : 0.25em;
|
||||
|
||||
@mixin locateNearCircle($direction: 'left') {
|
||||
$circle-width: calc(#{$size-circle} + #{$padding-horizontal});
|
||||
|
||||
@@ -73,8 +73,7 @@ export default defineComponent({
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
$padding-horizontal : $spacing-absolute-large;
|
||||
$padding-vertical : $spacing-absolute-x-large;
|
||||
$padding: 20px;
|
||||
|
||||
.scripts-tree-container {
|
||||
display: flex; // We could provide `block`, but `flex` is more versatile.
|
||||
@@ -85,11 +84,11 @@ $padding-vertical : $spacing-absolute-x-large;
|
||||
|
||||
flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items.
|
||||
|
||||
padding-bottom: $padding-vertical;
|
||||
padding-left: $padding-horizontal;
|
||||
padding-right: $padding-horizontal;
|
||||
padding-bottom: $padding;
|
||||
padding-left: $padding;
|
||||
padding-right: $padding;
|
||||
&.top-padding {
|
||||
padding-top: $padding-vertical;
|
||||
padding-top: $padding;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
:tree-root="treeRoot"
|
||||
>
|
||||
<div
|
||||
class="expand-collapse-caret"
|
||||
class="expand-collapse-arrow"
|
||||
:class="{
|
||||
expanded: isExpanded,
|
||||
'has-children': hasChildren,
|
||||
@@ -141,13 +141,10 @@ export default defineComponent({
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.expand-collapse-caret {
|
||||
$caret-size: 24px;
|
||||
$padding-right: $spacing-absolute-small;
|
||||
|
||||
.expand-collapse-arrow {
|
||||
flex-shrink: 0;
|
||||
height: $caret-size;
|
||||
margin-left: $caret-size + $padding-right;
|
||||
height: 30px;
|
||||
margin-left: 30px;
|
||||
width: 0;
|
||||
|
||||
@include clickable;
|
||||
@@ -160,32 +157,25 @@ export default defineComponent({
|
||||
|
||||
&.has-children {
|
||||
margin-left: 0;
|
||||
width: $caret-size + $padding-right;
|
||||
width: 30px;
|
||||
position: relative;
|
||||
|
||||
$caret-dimension: $caret-size * 0.375;
|
||||
$caret-stroke-width: 1.5px;
|
||||
&:after {
|
||||
border: $caret-stroke-width solid $color-node-arrow;
|
||||
border: 1.5px solid $color-node-arrow;
|
||||
position: absolute;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
left: $caret-dimension;
|
||||
left: 9px;
|
||||
top: 50%;
|
||||
height: $caret-dimension;
|
||||
width: $caret-dimension;
|
||||
transform:
|
||||
rotate(-45deg)
|
||||
translateY(-50%)
|
||||
translateX($caret-dimension * 0.2);
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
transform: rotate(-45deg) translateY(-50%) translateX(0);
|
||||
transition: transform .25s;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
&.expanded:after {
|
||||
transform:
|
||||
rotate(45deg)
|
||||
translateY(-50%)
|
||||
translateX($caret-dimension * -0.5);
|
||||
transform: rotate(45deg) translateY(-50%) translateX(-5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,18 +76,18 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.node {
|
||||
margin-bottom: $spacing-absolute-xx-small;
|
||||
margin-top: $spacing-absolute-xx-small;
|
||||
padding-bottom: $spacing-absolute-xx-small;
|
||||
padding-top: $spacing-absolute-xx-small;
|
||||
padding-right: $spacing-absolute-small;
|
||||
margin-bottom: 3px;
|
||||
margin-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
padding-top: 3px;
|
||||
padding-right: 6px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.content {
|
||||
display: flex; // We could provide `block`, but `flex` is more versatile.
|
||||
color: $color-node-fg;
|
||||
padding-left: $spacing-relative-small;
|
||||
padding-right: $spacing-absolute-x-small;
|
||||
padding-left: 9px;
|
||||
padding-right: 6px;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@ export default defineComponent({
|
||||
|
||||
.flat-button {
|
||||
display: inline-flex;
|
||||
gap: $spacing-relative-small;
|
||||
gap: 0.5em;
|
||||
&.disabled {
|
||||
@include flat-button($disabled: true);
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
@click="onBackgroundOverlayClick"
|
||||
/>
|
||||
<ModalContent
|
||||
class="modal-content"
|
||||
:show="isOpen"
|
||||
@transitioned-out="onContentTransitionedOut"
|
||||
>
|
||||
@@ -137,8 +138,6 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
.modal-container {
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -55,11 +55,11 @@ export default defineComponent({
|
||||
$modal-content-transition-duration: 400ms;
|
||||
$modal-content-color-shadow: $color-on-surface;
|
||||
$modal-content-color-background: $color-surface;
|
||||
$modal-content-offset-upward: $spacing-absolute-x-large;
|
||||
$modal-content-offset-upward: 20px;
|
||||
|
||||
@mixin scrollable() {
|
||||
overflow-y: auto;
|
||||
max-height: 100%;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.modal-content-wrapper {
|
||||
@@ -74,17 +74,6 @@ $modal-content-offset-upward: $spacing-absolute-x-large;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
// Margin around modal content ensures visual comfort and consistency across devices.
|
||||
// It provides:
|
||||
// - A visually comfortable space preventing a claustrophobic feeling, especially on smaller screens.
|
||||
// - Consistent appearance on various screen sizes by using absolute spacing.
|
||||
// - Focus on the modal by dimming the background and emphasizing the task.
|
||||
// - Sufficient space on small devices for users to tap outside and close the modal.
|
||||
margin: $spacing-absolute-xx-large;
|
||||
@media screen and (max-width: $media-screen-small-width) {
|
||||
margin: $spacing-absolute-x-large; // Google and Apple recommend at least 44x44px for touch targets
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content-content {
|
||||
|
||||
@@ -63,25 +63,19 @@ export default defineComponent({
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
.dialog {
|
||||
margin-bottom: $spacing-absolute-medium;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&__content {
|
||||
margin: $spacing-absolute-xx-large;
|
||||
@media screen and (max-width: $media-screen-big-width) {
|
||||
margin: $spacing-absolute-x-large;
|
||||
}
|
||||
@media screen and (max-width: $media-screen-medium-width) {
|
||||
margin: $spacing-absolute-large;
|
||||
}
|
||||
margin: 5%;
|
||||
}
|
||||
|
||||
.dialog__close-button {
|
||||
color: $color-primary-dark;
|
||||
width: auto;
|
||||
font-size: $font-size-absolute-large;
|
||||
margin-right: $spacing-absolute-small;
|
||||
margin-right: 0.25em;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -219,7 +219,7 @@ $color-tooltip-background: $color-primary-darkest;
|
||||
background: $color-tooltip-background;
|
||||
color: $color-on-primary;
|
||||
border-radius: 16px;
|
||||
padding: $spacing-absolute-large $spacing-absolute-medium;
|
||||
padding: 12px 10px;
|
||||
|
||||
// Explicitly set font styling for tooltips to prevent inconsistent appearances due to style inheritance from trigger elements.
|
||||
@include base-font-style;
|
||||
@@ -230,8 +230,8 @@ $color-tooltip-background: $color-primary-darkest;
|
||||
and balanced layout.
|
||||
Avoiding setting vertical margin as it disrupts the arrow rendering.
|
||||
*/
|
||||
margin-left: $spacing-absolute-xx-small;
|
||||
margin-right: $spacing-absolute-xx-small;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
|
||||
// Setting max-width increases readability and consistency reducing overlap and clutter.
|
||||
@include set-property-ch-value-with-fallback(
|
||||
|
||||
@@ -67,10 +67,10 @@ export default defineComponent({
|
||||
}
|
||||
.description {
|
||||
&__icon {
|
||||
margin-right: $spacing-relative-small;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
&__text {
|
||||
margin-right: $spacing-relative-x-small;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -79,7 +79,7 @@ export default defineComponent({
|
||||
&:not(:first-child)::before {
|
||||
content: "|";
|
||||
font-size: $font-size-absolute-x-small;
|
||||
padding: 0 $spacing-relative-small;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -104,7 +104,7 @@ export default defineComponent({
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
.icon {
|
||||
margin-right: $spacing-relative-small;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.footer {
|
||||
@@ -119,19 +119,18 @@ export default defineComponent({
|
||||
@media screen and (max-width: $media-screen-big-width) {
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
column-gap: $spacing-relative-medium;
|
||||
&:not(:first-child) {
|
||||
margin-top: $spacing-relative-small;
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
}
|
||||
flex-wrap: wrap;
|
||||
&__item:not(:first-child) {
|
||||
&::before {
|
||||
content: "|";
|
||||
padding: 0 $spacing-relative-small;
|
||||
padding: 0 5px;
|
||||
}
|
||||
@media screen and (max-width: $media-screen-big-width) {
|
||||
margin-top: $spacing-absolute-xx-small;
|
||||
margin-top: 3px;
|
||||
&::before {
|
||||
content: "";
|
||||
padding: 0;
|
||||
|
||||
@@ -106,9 +106,10 @@ export default defineComponent({
|
||||
min-width: 60px;
|
||||
border: 1.5px solid $color-primary;
|
||||
border-right: none;
|
||||
height: 36px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
padding-left: $spacing-absolute-medium;
|
||||
padding-right: $spacing-absolute-medium;
|
||||
padding-left:10px;
|
||||
padding-right:10px;
|
||||
outline: none;
|
||||
color: $color-primary;
|
||||
font-size: $font-size-absolute-normal;
|
||||
@@ -126,6 +127,6 @@ export default defineComponent({
|
||||
color: $color-on-primary;
|
||||
border-radius: 0 5px 5px 0;
|
||||
font-size: $font-size-absolute-large;
|
||||
padding: $spacing-absolute-x-small;
|
||||
padding:5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
import type { IApplication } from '@/domain/IApplication';
|
||||
import type { TestExecutionDetailsLogger } from './TestExecutionDetailsLogger';
|
||||
|
||||
interface UrlExtractionContext {
|
||||
readonly logger: TestExecutionDetailsLogger;
|
||||
readonly application: IApplication;
|
||||
readonly urlExclusionPatterns: readonly RegExp[];
|
||||
}
|
||||
|
||||
export function extractDocumentationUrls(
|
||||
context: UrlExtractionContext,
|
||||
): string[] {
|
||||
const urlsInApplication = extractUrlsFromApplication(context.application);
|
||||
context.logger.logLabeledInformation(
|
||||
'Extracted URLs from application',
|
||||
urlsInApplication.length.toString(),
|
||||
);
|
||||
const uniqueUrls = filterDuplicateUrls(urlsInApplication);
|
||||
context.logger.logLabeledInformation(
|
||||
'Unique URLs after deduplication',
|
||||
`${uniqueUrls.length} (duplicates removed)`,
|
||||
);
|
||||
context.logger.logLabeledInformation(
|
||||
'Exclusion patterns for URLs',
|
||||
context.urlExclusionPatterns.length === 0
|
||||
? 'None (all URLs included)'
|
||||
: context.urlExclusionPatterns.map((pattern, index) => `${index + 1}) ${pattern.toString()}`).join('\n'),
|
||||
);
|
||||
const includedUrls = filterUrlsExcludingPatterns(uniqueUrls, context.urlExclusionPatterns);
|
||||
context.logger.logLabeledInformation(
|
||||
'URLs extracted for testing',
|
||||
`${includedUrls.length} (after applying exclusion patterns; ${uniqueUrls.length - includedUrls.length} URLs ignored)`,
|
||||
);
|
||||
return includedUrls;
|
||||
}
|
||||
|
||||
function extractUrlsFromApplication(application: IApplication): string[] {
|
||||
return [ // Get all executables
|
||||
...application.collections.flatMap((c) => c.getAllCategories()),
|
||||
...application.collections.flatMap((c) => c.getAllScripts()),
|
||||
]
|
||||
// Get all docs
|
||||
.flatMap((documentable) => documentable.docs)
|
||||
// Parse all URLs
|
||||
.flatMap((docString) => extractUrlsExcludingCodeBlocks(docString));
|
||||
}
|
||||
|
||||
function filterDuplicateUrls(urls: readonly string[]): string[] {
|
||||
return urls.filter((url, index, array) => array.indexOf(url) === index);
|
||||
}
|
||||
|
||||
function filterUrlsExcludingPatterns(
|
||||
urls: readonly string[],
|
||||
patterns: readonly RegExp[],
|
||||
): string[] {
|
||||
return urls.filter((url) => !patterns.some((pattern) => pattern.test(url)));
|
||||
}
|
||||
|
||||
function extractUrlsExcludingCodeBlocks(textWithInlineCode: string): string[] {
|
||||
/*
|
||||
Matches URLs:
|
||||
- Excludes inline code blocks as they may contain URLs not intended for user interaction
|
||||
and not guaranteed to support expected HTTP methods, leading to false-negatives.
|
||||
- Supports URLs containing parentheses, avoiding matches within code that might not represent
|
||||
actual links.
|
||||
*/
|
||||
const nonCodeBlockUrlRegex = /(?<!`)(https?:\/\/[^\s`"<>()]+(?:\([^\s`"<>()]*\))?[^\s`"<>()]*)/g;
|
||||
return textWithInlineCode.match(nonCodeBlockUrlRegex) || [];
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import { indentText } from '@tests/shared/Text';
|
||||
|
||||
export class TestExecutionDetailsLogger {
|
||||
public logTestSectionStartDelimiter(): void {
|
||||
this.logSectionDelimiterLine();
|
||||
}
|
||||
|
||||
public logTestSectionEndDelimiter(): void {
|
||||
this.logSectionDelimiterLine();
|
||||
}
|
||||
|
||||
public logLabeledInformation(
|
||||
label: string,
|
||||
detailedInformation: string,
|
||||
): void {
|
||||
console.log([
|
||||
`${label}:`,
|
||||
indentText(detailedInformation),
|
||||
].join('\n'));
|
||||
}
|
||||
|
||||
private logSectionDelimiterLine(): void {
|
||||
const horizontalLine = '─'.repeat(40);
|
||||
console.log(horizontalLine);
|
||||
}
|
||||
}
|
||||
@@ -1,26 +1,19 @@
|
||||
import { test, expect } from 'vitest';
|
||||
import { parseApplication } from '@/application/Parser/ApplicationParser';
|
||||
import type { IApplication } from '@/domain/IApplication';
|
||||
import { indentText } from '@tests/shared/Text';
|
||||
import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
|
||||
import { shuffle } from '@/application/Common/Shuffle';
|
||||
import { type UrlStatus, formatUrlStatus } from './StatusChecker/UrlStatus';
|
||||
import { getUrlStatusesInParallel, type BatchRequestOptions } from './StatusChecker/BatchStatusChecker';
|
||||
import { TestExecutionDetailsLogger } from './TestExecutionDetailsLogger';
|
||||
import { extractDocumentationUrls } from './DocumentationUrlExtractor';
|
||||
|
||||
// arrange
|
||||
const logger = new TestExecutionDetailsLogger();
|
||||
logger.logTestSectionStartDelimiter();
|
||||
const app = parseApplication();
|
||||
let urls = extractDocumentationUrls({
|
||||
logger,
|
||||
urlExclusionPatterns: [
|
||||
const urls = collectUniqueUrls({
|
||||
application: app,
|
||||
excludePatterns: [
|
||||
/^https:\/\/archive\.ph/, // Drops HEAD/GET requests via fetch/curl, responding to Postman/Chromium.
|
||||
],
|
||||
application: app,
|
||||
});
|
||||
urls = filterUrlsToEnvironmentCheckLimit(urls);
|
||||
logger.logLabeledInformation('URLs submitted for testing', urls.length.toString());
|
||||
const requestOptions: BatchRequestOptions = {
|
||||
domainOptions: {
|
||||
sameDomainParallelize: false, // be nice to our third-party servers
|
||||
@@ -37,64 +30,55 @@ const requestOptions: BatchRequestOptions = {
|
||||
enableCookies: true,
|
||||
},
|
||||
};
|
||||
logger.logLabeledInformation('HTTP request options', JSON.stringify(requestOptions, null, 2));
|
||||
const testTimeoutInMs = urls.length * 60 /* seconds */ * 1000;
|
||||
logger.logLabeledInformation('Scheduled test duration', convertMillisecondsToHumanReadableFormat(testTimeoutInMs));
|
||||
logger.logTestSectionEndDelimiter();
|
||||
test(`all URLs (${urls.length}) should be alive`, async () => {
|
||||
// act
|
||||
const results = await getUrlStatusesInParallel(urls, requestOptions);
|
||||
// assert
|
||||
const deadUrls = results.filter((r) => r.code === undefined || !isOkStatusCode(r.code));
|
||||
expect(deadUrls).to.have.lengthOf(
|
||||
0,
|
||||
formatAssertionMessage([createReportForDeadUrlStatuses(deadUrls)]),
|
||||
);
|
||||
expect(deadUrls).to.have.lengthOf(0, formatAssertionMessage([formatUrlStatusReport(deadUrls)]));
|
||||
}, testTimeoutInMs);
|
||||
|
||||
function isOkStatusCode(statusCode: number): boolean {
|
||||
return statusCode >= 200 && statusCode < 300;
|
||||
}
|
||||
|
||||
function createReportForDeadUrlStatuses(deadUrlStatuses: readonly UrlStatus[]): string {
|
||||
function collectUniqueUrls(
|
||||
options: {
|
||||
readonly application: IApplication,
|
||||
readonly excludePatterns?: readonly RegExp[],
|
||||
},
|
||||
): string[] {
|
||||
return [ // Get all nodes
|
||||
...options.application.collections.flatMap((c) => c.getAllCategories()),
|
||||
...options.application.collections.flatMap((c) => c.getAllScripts()),
|
||||
]
|
||||
// Get all docs
|
||||
.flatMap((documentable) => documentable.docs)
|
||||
// Parse all URLs
|
||||
.flatMap((docString) => extractUrls(docString))
|
||||
// Remove duplicates
|
||||
.filter((url, index, array) => array.indexOf(url) === index)
|
||||
// Exclude certain URLs based on patterns
|
||||
.filter((url) => !shouldExcludeUrl(url, options.excludePatterns ?? []));
|
||||
}
|
||||
|
||||
function shouldExcludeUrl(url: string, patterns: readonly RegExp[]): boolean {
|
||||
return patterns.some((pattern) => pattern.test(url));
|
||||
}
|
||||
|
||||
function formatUrlStatusReport(deadUrlStatuses: readonly UrlStatus[]): string {
|
||||
return `\n${deadUrlStatuses.map((status) => indentText(formatUrlStatus(status))).join('\n---\n')}\n`;
|
||||
}
|
||||
|
||||
function filterUrlsToEnvironmentCheckLimit(originalUrls: string[]): string[] {
|
||||
const { RANDOMIZED_URL_CHECK_LIMIT } = process.env;
|
||||
logger.logLabeledInformation('URL check limit', RANDOMIZED_URL_CHECK_LIMIT || 'Unlimited');
|
||||
if (RANDOMIZED_URL_CHECK_LIMIT !== undefined && RANDOMIZED_URL_CHECK_LIMIT !== '') {
|
||||
const maxUrlsInTest = parseInt(RANDOMIZED_URL_CHECK_LIMIT, 10);
|
||||
if (Number.isNaN(maxUrlsInTest)) {
|
||||
throw new Error(`Invalid URL limit: ${RANDOMIZED_URL_CHECK_LIMIT}`);
|
||||
}
|
||||
if (maxUrlsInTest < originalUrls.length) {
|
||||
return shuffle(originalUrls).slice(0, maxUrlsInTest);
|
||||
}
|
||||
}
|
||||
return originalUrls;
|
||||
}
|
||||
|
||||
function convertMillisecondsToHumanReadableFormat(milliseconds: number): string {
|
||||
const timeParts: string[] = [];
|
||||
const addTimePart = (amount: number, label: string) => {
|
||||
if (amount === 0) {
|
||||
return;
|
||||
}
|
||||
timeParts.push(`${amount} ${label}`);
|
||||
};
|
||||
|
||||
const hours = milliseconds / (1000 * 60 * 60);
|
||||
const absoluteHours = Math.floor(hours);
|
||||
addTimePart(absoluteHours, 'hours');
|
||||
|
||||
const minutes = (hours - absoluteHours) * 60;
|
||||
const absoluteMinutes = Math.floor(minutes);
|
||||
addTimePart(absoluteMinutes, 'minutes');
|
||||
|
||||
const seconds = (minutes - absoluteMinutes) * 60;
|
||||
const absoluteSeconds = Math.floor(seconds);
|
||||
addTimePart(absoluteSeconds, 'seconds');
|
||||
|
||||
return timeParts.join(', ');
|
||||
function extractUrls(textWithInlineCode: string): string[] {
|
||||
/*
|
||||
Matches URLs:
|
||||
- Excludes inline code blocks as they may contain URLs not intended for user interaction
|
||||
and not guaranteed to support expected HTTP methods, leading to false-negatives.
|
||||
- Supports URLs containing parentheses, avoiding matches within code that might not represent
|
||||
actual links.
|
||||
*/
|
||||
const nonCodeBlockUrlRegex = /(?<!`)(https?:\/\/[^\s`"<>()]+(?:\([^\s`"<>()]*\))?[^\s`"<>()]*)/g;
|
||||
return textWithInlineCode.match(nonCodeBlockUrlRegex) || [];
|
||||
}
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { expectExists } from '@tests/shared/Assertions/ExpectExists';
|
||||
import { getCurrentHighlightRange } from './support/interactions/code-area';
|
||||
import { selectAllScripts } from './support/interactions/script-selection';
|
||||
import { openCard } from './support/interactions/card';
|
||||
|
||||
describe('script selection highlighting', () => {
|
||||
@@ -8,12 +6,11 @@ describe('script selection highlighting', () => {
|
||||
it('highlights more when multiple scripts are selected', () => {
|
||||
cy.visit('/');
|
||||
selectLastScript();
|
||||
getNonZeroCurrentHighlightRangeValue().then((lastScriptHighlightRange) => {
|
||||
getCurrentHighlightRange((lastScriptHighlightRange) => {
|
||||
cy.log(`Highlight height for last script: ${lastScriptHighlightRange}`);
|
||||
expect(lastScriptHighlightRange).to.be.greaterThan(0);
|
||||
cy.visit('/');
|
||||
selectAllScripts();
|
||||
getNonZeroCurrentHighlightRangeValue().then((allScriptsHighlightRange) => {
|
||||
getCurrentHighlightRange((allScriptsHighlightRange) => {
|
||||
cy.log(`Highlight height for all scripts: ${allScriptsHighlightRange}`);
|
||||
expect(allScriptsHighlightRange).to.be.greaterThan(lastScriptHighlightRange);
|
||||
});
|
||||
@@ -21,15 +18,6 @@ describe('script selection highlighting', () => {
|
||||
});
|
||||
});
|
||||
|
||||
function getNonZeroCurrentHighlightRangeValue() {
|
||||
return getCurrentHighlightRange()
|
||||
.should('not.equal', '0')
|
||||
.then((rangeValue) => {
|
||||
expectExists(rangeValue);
|
||||
return parseInt(rangeValue, 10);
|
||||
});
|
||||
}
|
||||
|
||||
function selectLastScript() {
|
||||
openCard({
|
||||
cardIndex: -1, // last card
|
||||
@@ -38,3 +26,22 @@ function selectLastScript() {
|
||||
.last()
|
||||
.click({ force: true });
|
||||
}
|
||||
|
||||
function selectAllScripts() {
|
||||
cy.contains('span', 'All')
|
||||
.click();
|
||||
}
|
||||
|
||||
function getCurrentHighlightRange(
|
||||
callback: (highlightedRange: number) => void,
|
||||
) {
|
||||
cy
|
||||
.get('#codeEditor')
|
||||
.invoke('attr', 'data-test-highlighted-range')
|
||||
.should('not.be.empty')
|
||||
.and('not.equal', '0')
|
||||
.then((range) => {
|
||||
expectExists(range);
|
||||
callback(parseInt(range, 10));
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,37 +1,38 @@
|
||||
import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
|
||||
import { ViewportTestScenarios } from './support/scenarios/viewport-test-scenarios';
|
||||
|
||||
export function assertLayoutStability(selector: string, action: ()=> void): void {
|
||||
// arrange
|
||||
let initialMetrics: ViewportMetrics | undefined;
|
||||
captureViewportMetrics(selector, (metrics) => {
|
||||
initialMetrics = metrics;
|
||||
});
|
||||
// act
|
||||
action();
|
||||
// assert
|
||||
captureViewportMetrics(selector, (metrics) => {
|
||||
const finalMetrics = metrics;
|
||||
expect(initialMetrics).to.deep.equal(finalMetrics, formatAssertionMessage([
|
||||
`Expected (initial metrics before action): ${JSON.stringify(initialMetrics)}`,
|
||||
`Actual (final metrics after action): ${JSON.stringify(finalMetrics)}`,
|
||||
]));
|
||||
});
|
||||
}
|
||||
describe('Modal interaction and layout stability', () => {
|
||||
ViewportTestScenarios.forEach(({ // some shifts are observed only on extra small or large screens
|
||||
name, width, height,
|
||||
}) => {
|
||||
it(name, () => {
|
||||
cy.viewport(width, height);
|
||||
cy.visit('/');
|
||||
|
||||
function captureViewportMetrics(
|
||||
selector: string,
|
||||
callback: (metrics: ViewportMetrics) => void,
|
||||
): void {
|
||||
cy.window().then((win) => {
|
||||
cy.get(selector)
|
||||
.then((elements) => {
|
||||
const element = elements[0];
|
||||
const position = getElementViewportMetrics(element, win);
|
||||
cy.log(`Captured metrics (\`${selector}\`): ${JSON.stringify(position)}`);
|
||||
callback(position);
|
||||
let metricsBeforeModal: ViewportMetrics | undefined;
|
||||
|
||||
captureViewportMetrics((metrics) => {
|
||||
metricsBeforeModal = metrics;
|
||||
});
|
||||
|
||||
cy
|
||||
.contains('button', 'Privacy')
|
||||
.click();
|
||||
|
||||
cy
|
||||
.get('.modal-content')
|
||||
.should('be.visible');
|
||||
|
||||
captureViewportMetrics((metrics) => {
|
||||
const metricsAfterModal = metrics;
|
||||
expect(metricsBeforeModal).to.deep.equal(metricsAfterModal, formatAssertionMessage([
|
||||
`Expected (initial metrics before modal): ${JSON.stringify(metricsBeforeModal)}`,
|
||||
`Actual (metrics after modal is opened): ${JSON.stringify(metricsAfterModal)}`,
|
||||
]));
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
interface ViewportMetrics {
|
||||
readonly x: number;
|
||||
@@ -43,6 +44,17 @@ interface ViewportMetrics {
|
||||
*/
|
||||
}
|
||||
|
||||
function captureViewportMetrics(callback: (metrics: ViewportMetrics) => void): void {
|
||||
cy.window().then((win) => {
|
||||
cy.get('body')
|
||||
.then((body) => {
|
||||
const position = getElementViewportMetrics(body[0], win);
|
||||
cy.log(`Captured metrics: ${JSON.stringify(position)}`);
|
||||
callback(position);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function getElementViewportMetrics(element: HTMLElement, win: Window): ViewportMetrics {
|
||||
const elementXRelativeToViewport = getElementXRelativeToViewport(element, win);
|
||||
const elementYRelativeToViewport = getElementYRelativeToViewport(element, win);
|
||||
@@ -1,65 +0,0 @@
|
||||
import { ViewportTestScenarios } from './support/scenarios/viewport-test-scenarios';
|
||||
import { openCard } from './support/interactions/card';
|
||||
import { selectAllScripts, unselectAllScripts } from './support/interactions/script-selection';
|
||||
import { assertLayoutStability } from './support/assert/layout-stability';
|
||||
|
||||
describe('Layout stability', () => {
|
||||
ViewportTestScenarios.forEach(({ // some shifts are observed only on extra small or large screens
|
||||
name, width, height,
|
||||
}) => {
|
||||
// Regression test for a bug where opening a modal caused layout shift
|
||||
describe('Modal interaction', () => {
|
||||
it(name, () => {
|
||||
// arrange
|
||||
cy.viewport(width, height);
|
||||
cy.visit('/');
|
||||
// act & assert
|
||||
assertLayoutStability('body', () => {
|
||||
cy
|
||||
.contains('button', 'Privacy')
|
||||
.click();
|
||||
cy
|
||||
.get('.modal-content-content')
|
||||
.should('be.visible');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Regression test for a bug where selecting a script with an open card caused layout shift
|
||||
describe('Initial script selection', () => {
|
||||
it(name, () => {
|
||||
// arrange
|
||||
cy.viewport(width, height);
|
||||
cy.visit('/');
|
||||
cy.contains('span', 'Windows')
|
||||
.click();
|
||||
// act & assert
|
||||
assertLayoutStability('#app', () => {
|
||||
openCard({
|
||||
cardIndex: 0,
|
||||
});
|
||||
selectAllScripts();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Regression test for a bug where unselecting selected with an open card caused layout shift
|
||||
describe('Deselection script selection', () => {
|
||||
it(name, () => {
|
||||
// arrange
|
||||
cy.viewport(width, height);
|
||||
cy.visit('/');
|
||||
cy.contains('span', 'Windows')
|
||||
.click();
|
||||
openCard({
|
||||
cardIndex: 0,
|
||||
});
|
||||
selectAllScripts();
|
||||
// act & assert
|
||||
assertLayoutStability('#app', () => {
|
||||
unselectAllScripts();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -4,27 +4,3 @@
|
||||
*/
|
||||
|
||||
import './commands';
|
||||
|
||||
// Mitigates a Chrome-specific 'ResizeObserver' error in Cypress tests.
|
||||
// The 'ResizeObserver loop limit exceeded' error is non-critical but can cause
|
||||
// false negatives in CI/CD environments, particularly with GitHub runners.
|
||||
// The issue is absent in actual browser usage and local Cypress testing.
|
||||
// Community discussions and contributions have led to this handler being
|
||||
// recommended as a user-level fix rather than a Cypress core inclusion.
|
||||
// Relevant discussions and attempted core fixes:
|
||||
// - Original fix suggestion: https://github.com/cypress-io/cypress/issues/8418#issuecomment-992564877
|
||||
// - Proposed Cypress core PRs:
|
||||
// https://github.com/cypress-io/cypress/pull/20257
|
||||
// https://github.com/cypress-io/cypress/pull/20284
|
||||
// - Current issue tracking: https://github.com/cypress-io/cypress/issues/20341
|
||||
// - Related Quasar framework issue: https://github.com/quasarframework/quasar/issues/2233
|
||||
// - Chromium bug tracker discussion: https://issues.chromium.org/issues/41369140
|
||||
// - Stack Overflow on safely ignoring the error:
|
||||
// https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded/50387233#50387233
|
||||
// https://stackoverflow.com/questions/63653605/resizeobserver-loop-limit-exceeded-api-is-never-used/63653711#63653711
|
||||
// - Spec issue related to 'ResizeObserver': https://github.com/WICG/resize-observer/issues/38
|
||||
Cypress.on(
|
||||
'uncaught:exception',
|
||||
// Ignore this specific error to prevent false test failures
|
||||
(err) => !err.message.includes('ResizeObserver loop limit exceeded'),
|
||||
);
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
export function getCurrentHighlightRange() {
|
||||
return cy
|
||||
.get('#codeEditor')
|
||||
.invoke('attr', 'data-test-highlighted-range')
|
||||
.should('be.a', 'string')
|
||||
.should('not.equal', '');
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { getCurrentHighlightRange } from './code-area';
|
||||
|
||||
export function selectAllScripts() {
|
||||
cy.contains('span', 'All')
|
||||
.click();
|
||||
getCurrentHighlightRange()
|
||||
.should('not.equal', '0');
|
||||
}
|
||||
|
||||
export function unselectAllScripts() {
|
||||
cy.contains('span', 'None')
|
||||
.click();
|
||||
getCurrentHighlightRange()
|
||||
.should('equal', '0');
|
||||
}
|
||||
@@ -12,9 +12,7 @@ describe('TreeView', () => {
|
||||
it('renders all provided root nodes correctly', async () => {
|
||||
// arrange
|
||||
const nodes = createSampleNodes();
|
||||
const { wrapper } = mountWrapperComponent({
|
||||
initialNodeData: nodes,
|
||||
});
|
||||
const wrapper = createTreeViewWrapper(nodes);
|
||||
|
||||
// act
|
||||
await waitForStableDom(wrapper.element);
|
||||
@@ -35,12 +33,10 @@ describe('TreeView', () => {
|
||||
const secondNodeLabel = 'Node 2';
|
||||
const initialNodes: TreeInputNodeDataWithMetadata[] = [{ id: 'node1', data: { label: firstNodeLabel } }];
|
||||
const updatedNodes: TreeInputNodeDataWithMetadata[] = [{ id: 'node2', data: { label: secondNodeLabel } }];
|
||||
const { wrapper, nodes } = mountWrapperComponent({
|
||||
initialNodeData: initialNodes,
|
||||
});
|
||||
const wrapper = createTreeViewWrapper(initialNodes);
|
||||
|
||||
// act
|
||||
nodes.value = updatedNodes;
|
||||
await wrapper.setProps({ nodes: updatedNodes });
|
||||
await waitForStableDom(wrapper.element);
|
||||
|
||||
// assert
|
||||
@@ -49,17 +45,15 @@ describe('TreeView', () => {
|
||||
});
|
||||
});
|
||||
|
||||
function mountWrapperComponent(options?: {
|
||||
readonly initialNodeData?: readonly TreeInputNodeDataWithMetadata[],
|
||||
}) {
|
||||
const nodes = shallowRef(options?.initialNodeData ?? createSampleNodes());
|
||||
const wrapper = mount(defineComponent({
|
||||
function createTreeViewWrapper(initialNodeData: readonly TreeInputNodeDataWithMetadata[]) {
|
||||
return mount(defineComponent({
|
||||
components: {
|
||||
TreeView,
|
||||
},
|
||||
setup() {
|
||||
provideDependencies(new ApplicationContextStub());
|
||||
|
||||
const nodes = shallowRef(initialNodeData);
|
||||
const selectedLeafNodeIds = shallowRef<readonly string[]>([]);
|
||||
|
||||
return {
|
||||
@@ -78,10 +72,6 @@ function mountWrapperComponent(options?: {
|
||||
</TreeView>
|
||||
`,
|
||||
}));
|
||||
return {
|
||||
wrapper,
|
||||
nodes,
|
||||
};
|
||||
}
|
||||
|
||||
interface TreeInputMetadata {
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { shuffle } from '@/application/Common/Shuffle';
|
||||
|
||||
describe('Shuffle', () => {
|
||||
describe('shuffle', () => {
|
||||
it('returns a new array', () => {
|
||||
// arrange
|
||||
const inputArray = ['a', 'b', 'c', 'd'];
|
||||
// act
|
||||
const result = shuffle(inputArray);
|
||||
// assert
|
||||
expect(result).not.to.equal(inputArray);
|
||||
});
|
||||
|
||||
it('returns an array of the same length', () => {
|
||||
// arrange
|
||||
const inputArray = ['a', 'b', 'c', 'd'];
|
||||
// act
|
||||
const result = shuffle(inputArray);
|
||||
// assert
|
||||
expect(result.length).toBe(inputArray.length);
|
||||
});
|
||||
|
||||
it('contains the same elements', () => {
|
||||
// arrange
|
||||
const inputArray = ['a', 'b', 'c', 'd'];
|
||||
// act
|
||||
const result = shuffle(inputArray);
|
||||
// assert
|
||||
expect(result).to.have.members(inputArray);
|
||||
});
|
||||
|
||||
it('does not modify the input array', () => {
|
||||
// arrange
|
||||
const inputArray = ['a', 'b', 'c', 'd'];
|
||||
const inputArrayCopy = [...inputArray];
|
||||
// act
|
||||
shuffle(inputArray);
|
||||
// assert
|
||||
expect(inputArray).to.deep.equal(inputArrayCopy);
|
||||
});
|
||||
|
||||
it('handles an empty array correctly', () => {
|
||||
// arrange
|
||||
const inputArray: string[] = [];
|
||||
// act
|
||||
const result = shuffle(inputArray);
|
||||
// assert
|
||||
expect(result).have.lengthOf(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,7 +1,6 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import RatingCircle from '@/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue';
|
||||
import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
|
||||
|
||||
const DOM_SVG_SELECTOR = 'svg';
|
||||
const DOM_CIRCLE_SELECTOR = `${DOM_SVG_SELECTOR} > circle`;
|
||||
@@ -40,6 +39,12 @@ describe('RatingCircle.vue', () => {
|
||||
});
|
||||
|
||||
describe('SVG and circle styles', () => {
|
||||
it('sets --circle-stroke-width style correctly', () => {
|
||||
const wrapper = shallowMount(RatingCircle);
|
||||
const svgElement = wrapper.find(DOM_SVG_SELECTOR).element;
|
||||
expect(svgElement.style.getPropertyValue('--circle-stroke-width')).to.equal('2px');
|
||||
});
|
||||
|
||||
it('renders circle with correct fill attribute when filled prop is true', () => {
|
||||
const wrapper = shallowMount(RatingCircle, {
|
||||
propsData: {
|
||||
@@ -53,49 +58,32 @@ describe('RatingCircle.vue', () => {
|
||||
|
||||
it('renders circle with the correct viewBox property', () => {
|
||||
const wrapper = shallowMount(RatingCircle);
|
||||
const circleElement = wrapper.find(DOM_SVG_SELECTOR);
|
||||
const circle = wrapper.find(DOM_SVG_SELECTOR);
|
||||
|
||||
expect(circleElement.attributes('viewBox')).to.equal('-1 -1 22 22');
|
||||
expect(circle.attributes('viewBox')).to.equal('-1 -1 22 22');
|
||||
});
|
||||
});
|
||||
|
||||
describe('circle attributes', () => {
|
||||
const testScenarios: ReadonlyArray<{
|
||||
readonly attributeKey: string;
|
||||
readonly expectedValue: string;
|
||||
}> = [
|
||||
{
|
||||
attributeKey: 'stroke-width',
|
||||
expectedValue: '2px', // Based on circleStrokeWidthInPx = 2
|
||||
},
|
||||
{
|
||||
attributeKey: 'cx',
|
||||
expectedValue: '10', // Based on circleDiameterInPx = 20
|
||||
},
|
||||
{
|
||||
attributeKey: 'cy',
|
||||
expectedValue: '10', // Based on circleStrokeWidthInPx = 2
|
||||
},
|
||||
{
|
||||
attributeKey: 'r',
|
||||
expectedValue: '9', // Based on circleRadiusWithoutStrokeInPx = circleDiameterInPx / 2 - circleStrokeWidthInPx / 2
|
||||
},
|
||||
];
|
||||
testScenarios.forEach(({
|
||||
attributeKey, expectedValue,
|
||||
}) => {
|
||||
it(`renders circle with the correct ${attributeKey} attribute`, () => {
|
||||
// act
|
||||
const wrapper = shallowMount(RatingCircle);
|
||||
const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
|
||||
const actualValue = circleElement.attributes(attributeKey);
|
||||
// assert
|
||||
expect(actualValue).to.equal(expectedValue, formatAssertionMessage([
|
||||
`Expected value: ${expectedValue}`,
|
||||
`Actual value: ${actualValue}`,
|
||||
`Attribute: ${attributeKey}`,
|
||||
]));
|
||||
});
|
||||
it('renders circle with the correct cx attribute', () => {
|
||||
const wrapper = shallowMount(RatingCircle);
|
||||
const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
|
||||
|
||||
expect(circleElement.attributes('cx')).to.equal('10'); // Based on circleDiameterInPx = 20
|
||||
});
|
||||
|
||||
it('renders circle with the correct cy attribute', () => {
|
||||
const wrapper = shallowMount(RatingCircle);
|
||||
const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
|
||||
|
||||
expect(circleElement.attributes('cy')).to.equal('10'); // Based on circleDiameterInPx = 20
|
||||
});
|
||||
|
||||
it('renders circle with the correct r attribute', () => {
|
||||
const wrapper = shallowMount(RatingCircle);
|
||||
const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
|
||||
|
||||
expect(circleElement.attributes('r')).to.equal('9'); // Based on circleRadiusWithoutStrokeInPx = circleDiameterInPx / 2 - circleStrokeWidthInPx / 2
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user