Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for PWA #1005

Merged
merged 10 commits into from
May 12, 2023
Merged

Add support for PWA #1005

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d418a00
Add logic for dynamically generating web manifest
SleeplessOne1917 May 4, 2023
f032fe0
Make PWA icon get autogenerated
SleeplessOne1917 May 10, 2023
148bf41
Make service worker work
SleeplessOne1917 May 10, 2023
6b7449b
Tweak things for PWA
SleeplessOne1917 May 11, 2023
7e0ded6
Handle apple icons and refactor
SleeplessOne1917 May 11, 2023
8923957
Update prod dockerfile
SleeplessOne1917 May 11, 2023
c46f748
Remove jimp
SleeplessOne1917 May 11, 2023
da8d84a
Remove unnecessary option
SleeplessOne1917 May 11, 2023
641a1c4
Use different function syntax
SleeplessOne1917 May 11, 2023
c76cd20
Merge branch 'main' into custom-manifest
SleeplessOne1917 May 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,13 @@ RUN curl -sf https://gobinaries.com/tj/node-prune | sh

WORKDIR /usr/src/app

ENV npm_config_target_arch=x64
ENV npm_config_target_platform=linux
ENV npm_config_target_libc=musl

# Cache deps
COPY package.json yarn.lock ./
RUN yarn install --production --ignore-scripts --prefer-offline --pure-lockfile
RUN yarn --production --prefer-offline --pure-lockfile

# Build
COPY generate_translations.js \
Expand All @@ -22,7 +26,7 @@ COPY .git .git
# Set UI version
RUN echo "export const VERSION = '$(git describe --tag)';" > "src/shared/version.ts"

RUN yarn install --production --ignore-scripts --prefer-offline
RUN yarn --production --prefer-offline
RUN yarn build:prod

# Prune the image
Expand Down
10 changes: 7 additions & 3 deletions dev.dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,13 @@ RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache

WORKDIR /usr/src/app

ENV npm_config_target_arch=x64
ENV npm_config_target_platform=linux
ENV npm_config_target_libc=musl

# Cache deps
COPY package.json yarn.lock ./
RUN yarn install --ignore-scripts --prefer-offline --pure-lockfile
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This and the environment variables are required to make the image processing library work. See lovell/sharp#3663.

RUN yarn --prefer-offline --pure-lockfile

# Build
COPY generate_translations.js \
Expand All @@ -20,7 +24,7 @@ COPY src src
# Set UI version
RUN echo "export const VERSION = 'dev';" > "src/shared/version.ts"

RUN yarn install --ignore-scripts --prefer-offline
RUN yarn --prefer-offline
RUN yarn build:dev

FROM node:alpine as runner
Expand All @@ -29,4 +33,4 @@ COPY --from=builder /usr/src/app/node_modules /app/node_modules

EXPOSE 1234
WORKDIR /app
CMD node dist/js/server.js
CMD node dist/js/server.js
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"classnames": "^2.3.1",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"cross-fetch": "^3.1.5",
"css-loader": "^6.7.3",
"emoji-mart": "^5.4.0",
"emoji-short-name": "^2.0.0",
Expand Down Expand Up @@ -76,6 +77,7 @@
"sass": "^1.58.3",
"sass-loader": "^13.2.0",
"serialize-javascript": "^6.0.1",
"sharp": "^0.32.1",
"tippy.js": "^6.3.7",
"toastify-js": "^1.12.0",
"tributejs": "^5.1.3",
Expand Down Expand Up @@ -109,6 +111,7 @@
"prettier-plugin-organize-imports": "^3.2.2",
"prettier-plugin-packagejson": "^2.4.3",
"rimraf": "^4.1.2",
"service-worker-webpack": "^1.0.0",
"sortpack": "^2.3.3",
"style-loader": "^3.3.1",
"terser": "^5.16.4",
Expand Down
49 changes: 0 additions & 49 deletions src/assets/manifest.webmanifest
View file
Open in desktop

This file was deleted.

122 changes: 108 additions & 14 deletions src/server/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
import express from "express";
import fs from "fs";
import { existsSync } from "fs";
import { readdir, readFile } from "fs/promises";
import { IncomingHttpHeaders } from "http";
import { Helmet } from "inferno-helmet";
import { matchPath, StaticRouter } from "inferno-router";
import { renderToString } from "inferno-server";
import IsomorphicCookie from "isomorphic-cookie";
import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
import { GetSite, GetSiteResponse, LemmyHttp, Site } from "lemmy-js-client";
import path from "path";
import process from "process";
import serialize from "serialize-javascript";
import sharp from "sharp";
import { App } from "../shared/components/app/app";
import { httpBaseInternal } from "../shared/env";
import { getHttpBase, getHttpBaseInternal } from "../shared/env";
import {
ILemmyConfig,
InitialFetchRequest,
IsoData,
} from "../shared/interfaces";
import { routes } from "../shared/routes";
import { initializeSite } from "../shared/utils";
import { favIconPngUrl, favIconUrl, initializeSite } from "../shared/utils";

const server = express();
const [hostname, port] = process.env["LEMMY_UI_HOST"]
Expand Down Expand Up @@ -54,6 +56,11 @@ Disallow: /password_change
Disallow: /search/
`;

server.get("/service-worker.js", async (_req, res) => {
res.setHeader("Content-Type", "application/javascript");
res.sendFile(path.resolve("./dist/service-worker.js"));
});

server.get("/robots.txt", async (_req, res) => {
res.setHeader("content-type", "text/plain; charset=utf-8");
res.send(robotstxt);
Expand All @@ -67,25 +74,25 @@ server.get("/css/themes/:name", async (req, res) => {
}

const customTheme = path.resolve(`./${extraThemesFolder}/${theme}`);
if (fs.existsSync(customTheme)) {
if (existsSync(customTheme)) {
res.sendFile(customTheme);
} else {
const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);

// If the theme doesn't exist, just send litely
if (fs.existsSync(internalTheme)) {
if (existsSync(internalTheme)) {
res.sendFile(internalTheme);
} else {
res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
}
}
});

function buildThemeList(): string[] {
let themes = ["darkly", "darkly-red", "litely", "litely-red"];
if (fs.existsSync(extraThemesFolder)) {
let dirThemes = fs.readdirSync(extraThemesFolder);
let cssThemes = dirThemes
async function buildThemeList(): Promise<string[]> {
const themes = ["darkly", "darkly-red", "litely", "litely-red"];
if (existsSync(extraThemesFolder)) {
const dirThemes = await readdir(extraThemesFolder);
const cssThemes = dirThemes
.filter(d => d.endsWith(".css"))
.map(d => d.replace(".css", ""));
themes.push(...cssThemes);
Expand All @@ -95,7 +102,7 @@ function buildThemeList(): string[] {

server.get("/css/themelist", async (_req, res) => {
res.type("json");
res.send(JSON.stringify(buildThemeList()));
res.send(JSON.stringify(await buildThemeList()));
});

// server.use(cookieParser());
Expand All @@ -110,7 +117,7 @@ server.get("/*", async (req, res) => {
const promises: Promise<any>[] = [];

const headers = setForwardedHeaders(req.headers);
const client = new LemmyHttp(httpBaseInternal, headers);
const client = new LemmyHttp(getHttpBaseInternal(), headers);

// Get site data first
// This bypasses errors, so that the client can hit the error on its own,
Expand Down Expand Up @@ -180,6 +187,23 @@ server.get("/*", async (req, res) => {

const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };

const appleTouchIcon = site.site_view.site.icon
? `data:image/png;base64,${sharp(
await fetchIconPng(site.site_view.site.icon)
)
.resize(180, 180)
.extend({
bottom: 20,
top: 20,
left: 20,
right: 20,
background: "#222222",
})
.png()
.toBuffer()
.then(buf => buf.toString("base64"))}`
: favIconPngUrl;

res.send(`
<!DOCTYPE html>
<html ${helmet.htmlAttributes.toString()} lang="en">
Expand All @@ -200,9 +224,19 @@ server.get("/*", async (req, res) => {
<meta name="Description" content="Lemmy">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link
id="favicon"
rel="shortcut icon"
type="image/x-icon"
href=${site.site_view.site.icon ?? favIconUrl}
/>

<!-- Web app manifest -->
<link rel="manifest" href="/static/assets/manifest.webmanifest">
<link rel="manifest" href="data:application/manifest+json;base64,${await generateManifestBase64(
site.site_view.site
)}">
<link rel="apple-touch-icon" href=${appleTouchIcon} />
<link rel="apple-touch-startup-image" href=${appleTouchIcon} />

<!-- Styles -->
<link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
Expand Down Expand Up @@ -267,3 +301,63 @@ function removeParam(url: string, parameter: string): string {
.replace(new RegExp("[?&]" + parameter + "=[^&#]*(#.*)?$"), "$1")
.replace(new RegExp("([?&])" + parameter + "=[^&]*&"), "$1");
}

const iconSizes = [72, 96, 128, 144, 152, 192, 384, 512];
const defaultLogoPathDirectory = path.join(
process.cwd(),
"dist",
"assets",
"icons"
);

export async function generateManifestBase64(site: Site) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably re-organize some of this into separate files... not necessary for this PR tho.

const url = (
process.env.NODE_ENV === "development"
? "http://localhost:1236/"
: getHttpBase()
).replace(/\/$/g, "");
const icon = site.icon ? await fetchIconPng(site.icon) : null;

const manifest = {
name: site.name,
description: site.description ?? "A link aggregator for the fediverse",
start_url: url,
scope: url,
display: "standalone",
id: "/",
background_color: "#222222",
theme_color: "#222222",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if theme_color and background_color should be configurable by instance admins?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mmm.... lets not do it until someone asks for it lol. Plus I think that would require a local site setting in the database, or some image processing... pry overkill.

icons: await Promise.all(
iconSizes.map(async size => {
let src = await readFile(
path.join(defaultLogoPathDirectory, `icon-${size}x${size}.png`)
).then(buf => buf.toString("base64"));

if (icon) {
src = await sharp(icon)
.resize(size, size)
.png()
.toBuffer()
.then(buf => buf.toString("base64"));
}

return {
sizes: `${size}x${size}`,
type: "image/png",
src: `data:image/png;base64,${src}`,
purpose: "any maskable",
};
})
),
};

return Buffer.from(JSON.stringify(manifest)).toString("base64");
}

async function fetchIconPng(iconUrl: string) {
return await fetch(
iconUrl.replace(/https?:\/\/localhost:\d+/g, getHttpBaseInternal())
)
.then(res => res.blob())
.then(blob => blob.arrayBuffer());
}
28 changes: 0 additions & 28 deletions src/service-worker.ts
View file
Open in desktop

This file was deleted.

15 changes: 1 addition & 14 deletions src/shared/components/app/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { Component } from "inferno";
import { Helmet } from "inferno-helmet";
import { Provider } from "inferno-i18next-dess";
import { Route, Switch } from "inferno-router";
import { i18n } from "../../i18next";
import { routes } from "../../routes";
import { favIconPngUrl, favIconUrl, setIsoData } from "../../utils";
import { setIsoData } from "../../utils";
import { Footer } from "./footer";
import { Navbar } from "./navbar";
import { NoMatch } from "./no-match";
Expand All @@ -19,24 +18,12 @@ export class App extends Component<any, any> {
render() {
let siteRes = this.isoData.site_res;
let siteView = siteRes.site_view;
let icon = siteView.site.icon;

return (
<>
<Provider i18next={i18n}>
<div id="app">
<Theme defaultTheme={siteView.local_site.default_theme} />
{icon && (
<Helmet>
<link
id="favicon"
rel="shortcut icon"
type="image/x-icon"
href={icon || favIconUrl}
/>
<link rel="apple-touch-icon" href={icon || favIconPngUrl} />
</Helmet>
)}
<Navbar siteRes={siteRes} />
<div className="mt-4 p-0 fl-1">
<Switch>
Expand Down
Loading