feat(backend): host privacy policy on the back-end

Since I am forced by Google's OAuth2 to have a back-end, I might as well host the README.md policy there. Otherwise, I would have to separately maintain GitHub pages, and separate domains (because it would be tricky to host GitHub pages and auth backend endpoint on the same domain).
maxpatiiuk · Apr 14, 2024 · f99fda1 · f99fda1
1 parent 644fef0
commit f99fda1
Show file tree

Hide file tree

Showing 20 changed files with 185 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -47,6 +47,6 @@ Editing the layout
  Npm 8
  ```
 
-2. Complete installation steps in [./auth-backend](./auth-backend/)
+2. Complete installation steps in [./backend](./backend/)
 
 3. Complete installation steps in [./src](./src/)
diff --git a/auth-backend/.gitignore → backend/.gitignore b/auth-backend/.gitignore → backend/.gitignore
diff --git a/auth-backend/README.md → backend/README.md b/auth-backend/README.md → backend/README.md
@@ -13,7 +13,7 @@ This backend is used to generate a more-persistent token.
  ```sh
  git clone https://github.com/maxpatiiuk/calendar-plus
  cd calendar-plus
- cd auth-backend
+ cd backend
  ```
 
 2. Create
@@ -26,8 +26,8 @@ This backend is used to generate a more-persistent token.
  - For development set:
  - Authorized redirect URIs: `https://calendar-plus.patii.uk/api/route`
  - For production set:
- - Authorized JavaScript origins: set to domain on which `auth-backend` will
- be hosted (`https://calendar-plus.patii.uk`)
+ - Authorized JavaScript origins: set to domain on which `backend` will be
+ hosted (`https://calendar-plus.patii.uk`)
 
 3. Copy [./example.config.js](./example.config.js) into `./config.js` and fill
  it in according to instructions in that file and the credentials you received
@@ -47,5 +47,4 @@ This backend is used to generate a more-persistent token.
 ### Production
 
 1. Create new vercel.com project from this repository
-2. Change the "Root Directory" setting to current directory
- (/packages/auth-backend)
+2. Change the "Root Directory" setting to current directory (/packages/backend)
diff --git a/auth-backend/app/api/auth/route.ts → backend/app/api/auth/route.ts b/auth-backend/app/api/auth/route.ts → backend/app/api/auth/route.ts
diff --git a/backend/app/docs/privacy/page.tsx b/backend/app/docs/privacy/page.tsx
@@ -0,0 +1,7 @@
+'use server';
+
+import { markdownToJsx } from '../../../utils/markdownToHtml';
+
+export default async function MainPage(): Promise<JSX.Element> {
+ return markdownToJsx('../docs/privacy/README.md');
+}
diff --git a/backend/app/error.tsx b/backend/app/error.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import React from 'react';
+
+import { Metadata } from 'next';
+import { localization } from '../const/localization';
+
+export default function Error({ error }: { error: Error }): JSX.Element {
+ return <h1>{String(error)}</h1>;
+}
+
+export const metadata: Metadata = {
+ title: localization.unexpectedErrorHasOccurred,
+};
diff --git a/backend/app/icon.png b/backend/app/icon.png
diff --git a/backend/app/layout.tsx b/backend/app/layout.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { baseUrl, robots, twitter } from '../const/siteConfig';
+import { Metadata, Viewport } from 'next';
+import { localization } from '../const/localization';
+
+export default function RootLayout({
+ children,
+}: {
+ readonly children: React.ReactNode;
+}): JSX.Element {
+ return (
+ <html lang="en-US">
+ <body style={{ minHeight: '100vh', margin: 0, background: 'black' }}>
+ {children}
+ </body>
+ </html>
+ );
+}
+
+export const metadata: Metadata = {
+ title: {
+ default: localization.siteTitle,
+ template: `%s | ${localization.siteTitle}`,
+ },
+ description: localization.siteDescription,
+ applicationName: localization.siteTitle,
+ keywords: localization.siteKeywords,
+ creator: localization.siteAuthor,
+ generator: 'Next.js',
+ robots,
+ twitter: {
+ card: 'summary_large_image',
+ site: twitter,
+ creator: twitter,
+ },
+ metadataBase: new URL(baseUrl),
+};
+
+export const viewport: Viewport = {
+ colorScheme: 'light',
+};
diff --git a/backend/app/not-found.tsx b/backend/app/not-found.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { localization } from '../const/localization';
+import { Metadata } from 'next';
+
+export default function NotFound(): JSX.Element {
+ return <h1>{localization.notFound}</h1>;
+}
+
+export const metadata: Metadata = {
+ title: localization.notFound,
+};
diff --git a/backend/app/page.tsx b/backend/app/page.tsx
@@ -0,0 +1,7 @@
+'use server';
+
+import { markdownToJsx } from '../utils/markdownToHtml';
+
+export default async function MainPage(): Promise<JSX.Element> {
+ return markdownToJsx('../README.md');
+}
diff --git a/backend/const/localization.ts b/backend/const/localization.ts
@@ -0,0 +1,10 @@
+export const localization = {
+ siteTitle: 'Calendar Plus',
+ siteDescription:
+ 'Google Calendar extension that provides insights into where your time goes. Includes power user tools, data export and customization',
+ siteKeywords:
+ 'Calendar Plus, Google Calendar, Google Chrome, productivity, time management, time tracking, data export, insights, analytics, power user, customization',
+ siteAuthor: 'Max Patiiuk',
+ notFound: 'Page not found',
+ unexpectedErrorHasOccurred: 'An unexpected error has occurred',
+};
diff --git a/backend/const/siteConfig.ts b/backend/const/siteConfig.ts
@@ -0,0 +1,10 @@
+export const robots = { index: true, follow: true } as const;
+export const privatePage = { index: false, follow: false } as const;
+export const twitter = '@maxpatiiuk';
+export const githubRepository = 'maxpatiiuk/calendar-plus';
+
+export const baseUrl =
+ typeof process.env.VERCEL_URL === 'string' &&
+ process.env.VERCEL_URL.length > 0
+ ? `https://${process.env.VERCEL_URL}`
+ : 'http://localhost:3000';
diff --git a/auth-backend/example.config.js → backend/example.config.js b/auth-backend/example.config.js → backend/example.config.js
@@ -11,6 +11,6 @@ export const googleClientRedirectUrl='https://kgbbebdcmdgkbopcffmpgkgcmcoomhmh.c
 // origins by setting ACCESS_CONTROL_ALLOW_ORIGIN=*
 export const accessControlAllowOrigin='chrome-extension://kgbbebdcmdgkbopcffmpgkgcmcoomhmh';
 
-// The URL at which the /api/auth endpoint from the auth-backend is hosted
+// The URL at which the /api/auth endpoint from the backend is hosted
 export const productionAuthUrl = 'https://calendar-plus.patii.uk/api/auth';
 export const developmentAuthUrl = 'http://localhost:3000/api/auth';
diff --git a/auth-backend/next-env.d.ts → backend/next-env.d.ts b/auth-backend/next-env.d.ts → backend/next-env.d.ts
diff --git a/auth-backend/package-lock.json → backend/package-lock.json b/auth-backend/package-lock.json → backend/package-lock.json
diff --git a/auth-backend/package.json → backend/package.json b/auth-backend/package.json → backend/package.json
@@ -1,5 +1,5 @@
 {
- "name": "calendar-stats-auth-backend",
+ "name": "calendar-stats-backend",
  "private": true,
  "license": "MIT",
  "type": "module",
@@ -21,6 +21,8 @@
  "type-check": "tsc"
  },
  "dependencies": {
+ "github-markdown-css": "^5.5.1",
+ "marked": "^12.0.1",
  "next": "^14.2.1"
  },
  "devDependencies": {

diff --git a/auth-backend/tsconfig.json → backend/tsconfig.json b/auth-backend/tsconfig.json → backend/tsconfig.json
@@ -1,9 +1,5 @@
 {
- "include": [
- "**/*.ts",
- ".next/types/**/*.ts",
- "next-env.d.ts"
- ],
+ "include": ["**/*.ts", ".next/types/**/*.ts", "next-env.d.ts"],
  "extends": "../tsconfig.json",
  "compilerOptions": {
  "incremental": true,

diff --git a/backend/utils/markdownToHtml.tsx b/backend/utils/markdownToHtml.tsx
@@ -0,0 +1,46 @@
+import { githubRepository } from '../const/siteConfig';
+import { marked } from 'marked';
+import fs from 'node:fs/promises';
+
+import 'github-markdown-css';
+
+// Make relative URLs be relative to the GitHub repository
+marked.use({
+ renderer: {
+ image(href, title, text) {
+ const url = new URL(
+ href,
+ `https://github.com/${githubRepository}/raw/main/`,
+ );
+ return `<img src="${url}" alt="${text}" title="${title}">`;
+ },
+ link(href, title, text) {
+ const url = new URL(
+ href,
+ `https://github.com/${githubRepository}/tree/main/`,
+ );
+ return `<a href="${url}" title="${title}">${text}</a>`;
+ },
+ },
+});
+
+export async function markdownToHtml(path: string): Promise<string> {
+ const content = await fs.readFile(path, 'utf8');
+ return marked(content, { gfm: true, breaks: false });
+}
+
+export async function markdownToJsx(path: string): Promise<JSX.Element> {
+ const content = await markdownToHtml(path);
+ return (
+ <div
+ className="markdown-body"
+ style={{ padding: '2rem', display: 'flex', justifyContent: 'center' }}
+ >
+ <main
+ id="content"
+ style={{ maxWidth: '50rem' }}
+ dangerouslySetInnerHTML={{ __html: content }}
+ />
+ </div>
+ );
+}
diff --git a/index.html b/index.html
diff --git a/src/webpack.config.js b/src/webpack.config.js
@@ -8,7 +8,7 @@ import {
  developmentAuthUrl,
  productionAuthUrl,
  googleClientId,
-} from '../auth-backend/config.js';
+} from '../backend/config.js';
 import { fileURLToPath } from 'url';
 
 const outputPath = path.resolve(