Merge pull request #375 from cheeaun/main

Update from main

.env

@@ -1,3 +1,4 @@
-VITE_CLIENT_NAME=Phanpy
-VITE_CLIENT_ID=social.phanpy
-VITE_WEBSITE=https://phanpy.social
+PHANPY_CLIENT_NAME=Phanpy
+PHANPY_WEBSITE=https://phanpy.social
+PHANPY_LINGVA_INSTANCES="lingva.phanpy.social lingva.lunar.icu lingva.garudalinux.org translate.plausibility.cloud"
+PHANPY_PRIVACY_POLICY_URL="https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD"

PRIVACY.MD

@@ -6,9 +6,9 @@ Phanpy does not collect or process any personal information from its users. The
 
 Phanpy is hosted on [Cloudflare Pages](https://pages.cloudflare.com/) as a static website. Read more about [Cloudflare's privacy policy](https://www.cloudflare.com/privacypolicy/).
 
-## Post translations
+## Translations
 
-Phanpy uses [Lingva Translate](https://github.com/thedaviddelta/lingva-translate) to translate posts.
+Phanpy uses [Lingva API](https://github.com/cheeaun/lingva-api) and [Lingva Translate](https://github.com/thedaviddelta/lingva-translate) as fallbacks for translating post content, profile bio and media description.
 
 ## Error logging
 

README.md

@@ -126,10 +126,68 @@ This is a **pure static web app**. You can host it anywhere you want.
 
 Two ways (choose one):
 
-1. (Recommended) Go to [Releases](https://github.com/cheeaun/phanpy/releases) and download the latest `phanpy-dist.zip`. It's pre-built so don't need to run any install/build commands. Extract it. Serve the folder of extracted files.
-2. Download or `git clone` this repository. Build it by running `npm run build` (after `npm install`). Serve the `dist` folder.
-
-Try search for "how to self-host static sites" as there are many ways to do it.
+### Easy way
+
+Go to [Releases](https://github.com/cheeaun/phanpy/releases) and download the latest `phanpy-dist.zip` or `phanpy-dist.tar.gz`. It's pre-built so don't need to run any install/build commands. Extract it. Serve the folder of extracted files.
+
+### Custom-build way
+
+Requires [Node.js](https://nodejs.org/).
+
+Download or `git clone` this repository. Use `production` branch for *stable* releases, `main` for *latest*. Build it by running `npm run build` (after `npm install`). Serve the `dist` folder.
+
+Customization can be done by passing environment variables to the build command. Examples:
+
+```bash
+PHANPY_APP_TITLE="Phanpy Dev" \
+    PHANPY_WEBSITE="https://dev.phanpy.social" \
+    npm run build
+```
+
+```bash
+PHANPY_DEFAULT_INSTANCE=hachyderm.io \
+    PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL=https://hachyderm.io/auth/sign_up \
+    PHANPY_PRIVACY_POLICY_URL=https://hachyderm.io/privacy-policy \
+    npm run build
+```
+
+It's also possible to set them in the `.env` file.
+
+Available variables:
+
+- `PHANPY_CLIENT_NAME` (optional, default: `Phanpy`) affects:
+  - Web page title, shown in the browser window or tab title
+  - App title, when installed as PWA, shown in the Home screen, macOS dock, Windows taskbar, etc
+  - OpenGraph card title, when shared on social networks
+  - Client name, when [registering the app for authentication](https://docs.joinmastodon.org/client/token/#app) and shown as client used on posts in some apps/clients
+- `PHANPY_WEBSITE` (optional but recommended, default: `https://phanpy.social`) affects:
+  - Canonical URL of the website
+  - OpenGraph card URL, when shared on social networks
+  - Root path for the OpenGraph card image
+  - Client URL, when [registering the app for authentication](https://docs.joinmastodon.org/client/token/#app) and shown as client used on posts in some apps/clients
+- `PHANPY_DEFAULT_INSTANCE` (optional, no defaults):
+  - e.g. 'mastodon.social', without `https://`
+  - Default instance for log-in
+  - When logging in, the user will be redirected instantly to the instance's authentication page instead of having to manually type the instance URL and submit
+- `PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL` (optional, no defaults):
+  - URL of the instance registration page
+  - E.g. `https://mastodon.social/auth/sign_up`
+- `PHANPY_PRIVACY_POLICY_URL` (optional, default to official instance's privacy policy):
+  - URL of the privacy policy page
+  - May specify the instance's own privacy policy
+- `PHANPY_LINGVA_INSTANCES` (optional, space-separated list, default: `lingva.phanpy.social [...hard-coded list of fallback instances]`):
+  - Specify a space-separated list of instances. First will be used as default before falling back to the subsequent instances. If there's only 1 instance, means no fallback.
+  - May specify a self-hosted Lingva instance, powered by either [lingva-translate](https://github.com/thedaviddelta/lingva-translate) or [lingva-api](https://github.com/cheeaun/lingva-api)
+  - List of fallback instances hard-coded in `/.env`
+  - [↗️ List of lingva-translate instances](https://github.com/thedaviddelta/lingva-translate?tab=readme-ov-file#instances)
+
+### Static site hosting
+
+Try online search for "how to self-host static sites" as there are many ways to do it.
+
+#### Lingva-translate or lingva-api hosting
+
+See documentation for [lingva-translate](https://github.com/thedaviddelta/lingva-translate) or [lingva-api](https://github.com/cheeaun/lingva-api).
 
 ## Community deployments
 

compose/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Compose / %VITE_CLIENT_NAME%</title>
+    <title>Compose / %PHANPY_CLIENT_NAME%</title>
     <meta name="color-scheme" content="dark light" />
     <meta name="google" content="notranslate" />
   </head>

index.html

@@ -6,40 +6,55 @@
       name="viewport"
       content="width=device-width, initial-scale=1, viewport-fit=cover"
     />
-    <title>%VITE_CLIENT_NAME%</title>
+    <title>%PHANPY_CLIENT_NAME%</title>
     <meta
       name="description"
       content="Minimalistic opinionated Mastodon web client"
     />
     <meta name="color-scheme" content="dark light" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <meta name="apple-mobile-web-app-title" content="%VITE_CLIENT_NAME%" />
+    <meta name="apple-mobile-web-app-title" content="%PHANPY_CLIENT_NAME%" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
-    <link rel="canonical" href="%VITE_WEBSITE%" />
+    <link rel="canonical" href="%PHANPY_WEBSITE%" />
+    <meta
+      name=""
+      data-theme-setting="manual"
+      content="#242526"
+      data-theme-light-color="#fff"
+      data-theme-light-color-temp="#ffff"
+      data-theme-dark-color="#242526"
+      data-theme-dark-color-temp="#242526ff"
+    />
     <meta
       name="theme-color"
+      data-theme-setting="auto"
       content="#fff"
+      data-content="#fff"
+      data-content-temp="#fffa"
       media="(prefers-color-scheme: light)"
     />
     <meta
       name="theme-color"
+      data-theme-setting="auto"
       content="#242526"
+      data-content="#242526"
+      data-content-temp="#242526aa"
       media="(prefers-color-scheme: dark)"
     />
     <meta name="google" content="notranslate" />
     <link rel="me" href="https://hachyderm.io/@phanpy" />
 
     <!-- Metacrap https://broken-links.com/2015/12/01/little-less-metacrap/ -->
     <meta property="twitter:card" content="summary_large_image" />
-    <meta property="og:url" content="%VITE_WEBSITE%" />
-    <meta property="og:title" content="%VITE_CLIENT_NAME%" />
+    <meta property="og:url" content="%PHANPY_WEBSITE%" />
+    <meta property="og:title" content="%PHANPY_CLIENT_NAME%" />
     <meta
       property="og:description"
       content="Minimalistic opinionated Mastodon web client"
     />
-    <meta property="og:image" content="%VITE_WEBSITE%/og-image-2.jpg" />
+    <meta property="og:image" content="%PHANPY_WEBSITE%/og-image-2.jpg" />
   </head>
   <body>
     <div id="app"></div>

package.json

@@ -27,7 +27,7 @@
     "lz-string": "~1.5.0",
     "masto": "~6.5.1",
     "moize": "~6.1.6",
-    "p-retry": "~6.1.0",
+    "p-retry": "~6.2.0",
     "p-throttle": "~6.1.0",
     "preact": "~10.19.3",
     "react-hotkeys-hook": "~4.4.1",

scripts/fetch-lingva-languages.js

@@ -1,15 +1,14 @@
-// Fetch https://lingva.ml/api/v1/languages/{source|target}
 import fs from 'fs';
 
-fetch('https://lingva.ml/api/v1/languages/source')
+fetch('https://lingva.phanpy.social/api/v1/languages/source')
   .then((response) => response.json())
   .then((json) => {
     const file = './src/data/lingva-source-languages.json';
     console.log(`Writing ${file}...`);
     fs.writeFileSync(file, JSON.stringify(json.languages, null, '\t'), 'utf8');
   });
 
-fetch('https://lingva.ml/api/v1/languages/target')
+fetch('https://lingva.phanpy.social/api/v1/languages/target')
   .then((response) => response.json())
   .then((json) => {
     const file = './src/data/lingva-target-languages.json';

src/app.css

@@ -686,6 +686,22 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   pointer-events: none;
 }
 
+.timeline.contextual > li .replies {
+  > ul > li:only-child {
+    > .replies {
+      > ul > li:only-child {
+        margin-left: calc(-1 * var(--line-margin-end));
+        background-position: calc(16px) 0;
+        background-size: 100% calc(20px + 8px);
+
+        &:before {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
 .timeline-deck.compact .status {
   max-height: max(25vh, 160px);
   overflow: hidden;
@@ -1092,6 +1108,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   transform: translate(-50%, 0);
   font-size: 90%;
   pointer-events: auto;
+  transition: all 0.3s ease-in-out;
+
+  header[hidden] & {
+    opacity: 0;
+    transform: translate(-50%, -100%) scale(0.9);
+    pointer-events: none;
+    animation: none !important;
+  }
 }
 .updates-button .icon {
   vertical-align: top;