From 048267b4198d5301809a5772c9bb7a8022b3ac30 Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 9 Sep 2021 22:39:17 +0100 Subject: [PATCH] Remove stray console.log and update translations. Update themes endpoint and filter unmatched commits. --- .env | 2 +- .env.build | 2 +- external/lang | 2 +- src/components/markdown/Renderer.tsx | 21 +- src/lib/links.ts | 20 +- src/pages/settings/panes/ThemeShop.tsx | 307 ++++++++++++++----------- 6 files changed, 196 insertions(+), 158 deletions(-) diff --git a/.env b/.env index d72dbacc..fd3eeb19 100644 --- a/.env +++ b/.env @@ -1,2 +1,2 @@ VITE_API_URL=https://api.revolt.chat -VITE_THEMES_URL=https://static.revolt.chat/themes +VITE_THEMES_URL=https://themes.revolt.chat diff --git a/.env.build b/.env.build index 4d3f2a45..73e8d2f4 100644 --- a/.env.build +++ b/.env.build @@ -1,2 +1,2 @@ VITE_API_URL=__API_URL__ -VITE_THEMES_URL=https://static.revolt.chat/themes \ No newline at end of file +VITE_THEMES_URL=https://themes.revolt.chat \ No newline at end of file diff --git a/external/lang b/external/lang index 2d5b96a5..edebbe8a 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 2d5b96a5c72bb706b73e9b67d5be395810a18c15 +Subproject commit edebbe8a1d720b2ecbedbf137e2e7c2f2e3d1e13 diff --git a/src/components/markdown/Renderer.tsx b/src/components/markdown/Renderer.tsx index c845390c..9656d54a 100644 --- a/src/components/markdown/Renderer.tsx +++ b/src/components/markdown/Renderer.tsx @@ -44,7 +44,7 @@ if (typeof window !== "undefined") { if (code) { navigator.clipboard.writeText(code.textContent?.trim() ?? ""); } - } catch (e) { } + } catch (e) {} }; } @@ -150,8 +150,8 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { `<@${element.dataset.mentionId}>`, "mention", ); - ev.preventDefault() - return + ev.preventDefault(); + return; } case "channel_mention": { internalEmit( @@ -160,8 +160,8 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { `<#${element.dataset.mentionId}>`, "channel_mention", ); - ev.preventDefault() - return + ev.preventDefault(); + return; } } } @@ -194,7 +194,6 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { element.removeAttribute("target"); const link = determineLink(element.href); - console.log(link) switch (link.type) { case "profile": { element.setAttribute( @@ -203,20 +202,20 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { ); element.setAttribute( "data-mention-id", - link.id - ) + link.id, + ); break; } case "navigate": { - if (link.navigation_type === 'channel') { + if (link.navigation_type === "channel") { element.setAttribute( "data-type", "channel_mention", ); element.setAttribute( "data-mention-id", - link.channel_id - ) + link.channel_id, + ); } break; } diff --git a/src/lib/links.ts b/src/lib/links.ts index c41b5bf5..6a1adf25 100644 --- a/src/lib/links.ts +++ b/src/lib/links.ts @@ -1,7 +1,12 @@ type LinkType = | { type: "profile"; id: string } | { type: "navigate"; path: string; navigation_type?: null } - | { type: "navigate"; path: string; navigation_type: 'channel'; channel_id: string } + | { + type: "navigate"; + path: string; + navigation_type: "channel"; + channel_id: string; + } | { type: "external"; href: string; url: URL } | { type: "none" }; @@ -12,7 +17,8 @@ const ALLOWED_ORIGINS = [ "local.revolt.chat", ]; -const CHANNEL_PATH_RE = /^\/server\/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}\/channel\/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}$/ +const CHANNEL_PATH_RE = + /^\/server\/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}\/channel\/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}$/; export function determineLink(href?: string): LinkType { let internal, @@ -30,9 +36,13 @@ export function determineLink(href?: string): LinkType { return { type: "profile", id }; } } else { - console.log(path) - if(CHANNEL_PATH_RE.test(path)) { - return { type: 'navigate', path, navigation_type: 'channel', channel_id: path.slice(43) } + if (CHANNEL_PATH_RE.test(path)) { + return { + type: "navigate", + path, + navigation_type: "channel", + channel_id: path.slice(43), + }; } return { type: "navigate", path }; } diff --git a/src/pages/settings/panes/ThemeShop.tsx b/src/pages/settings/panes/ThemeShop.tsx index 205f0960..a23dcc93 100644 --- a/src/pages/settings/panes/ThemeShop.tsx +++ b/src/pages/settings/panes/ThemeShop.tsx @@ -1,178 +1,207 @@ -import { useEffect, useState } from "preact/hooks" -import styled from "styled-components" -import Tip from "../../../components/ui/Tip" -import { Theme, generateVariables } from '../../../context/Theme' -import { dispatch } from "../../../redux" +import styled from "styled-components"; + +import { useEffect, useState } from "preact/hooks"; + +import { dispatch } from "../../../redux"; + +import { Theme, generateVariables } from "../../../context/Theme"; + +import Tip from "../../../components/ui/Tip"; +import previewPath from "../assets/preview.svg"; + +import { GIT_REVISION } from "../../../revision"; export const fetchManifest = (): Promise => - fetch(`${import.meta.env.VITE_THEMES_URL}/manifest.json`).then(res => res.json()) + fetch(`${import.meta.env.VITE_THEMES_URL}/manifest.json`).then((res) => + res.json(), + ); export const fetchTheme = (slug: string): Promise => - fetch(`${import.meta.env.VITE_THEMES_URL}/theme_${slug}.json`).then(res => res.json()) - + fetch(`${import.meta.env.VITE_THEMES_URL}/theme_${slug}.json`).then((res) => + res.json(), + ); interface ThemeMetadata { - name: string, - creator: string, - description: string + name: string; + creator: string; + commit?: string; + description: string; } type Manifest = { - generated: string, - themes: Record -} + generated: string; + themes: Record; +}; // TODO: ability to preview / display the settings set like in the appearance pane const ThemeInfo = styled.article` - display: grid; - grid: - "preview name creator" min-content - "preview desc desc" 1fr - / 200px 1fr 1fr; - - gap: 0.5rem 1rem; - padding: 1rem; - border-radius: var(--border-radius); - background: var(--secondary-background); + display: grid; + grid: + "preview name creator" min-content + "preview desc desc" 1fr + / 200px 1fr 1fr; + + gap: 0.5rem 1rem; + padding: 1rem; + border-radius: var(--border-radius); + background: var(--secondary-background); + + &[data-loaded] { + .preview { + opacity: 1; + } + } - &[data-loaded] { .preview { - opacity: 1; - } - } + grid-area: preview; + aspect-ratio: 323 / 202; - .preview { - grid-area: preview; - aspect-ratio: 323 / 202; - - background-color: var(--secondary-background); - border-radius: calc(var(--border-radius) / 2); - - // prep style for later - outline: 3px solid transparent; + background-color: var(--secondary-background); + border-radius: calc(var(--border-radius) / 2); - // hide random svg parts, crop border on firefox - overflow: hidden; - - // hide until loaded - opacity: 0; - - // style button - border: 0; - margin: 0; - padding: 0; - - transition: 0.25s opacity, 0.25s outline; - - > * { - grid-area: 1 / 1; + // prep style for later + outline: 3px solid transparent; + + // hide random svg parts, crop border on firefox + overflow: hidden; + + // hide until loaded + opacity: 0; + + // style button + border: 0; + margin: 0; + padding: 0; + + transition: 0.25s opacity, 0.25s outline; + + > * { + grid-area: 1 / 1; + } + + svg { + height: 100%; + width: 100%; + object-fit: contain; + } + + &:hover, + &:active, + &:focus-visible { + outline: 3px solid var(--tertiary-background); + } } - svg { - height: 100%; - width: 100%; - object-fit: contain; + .name { + grid-area: name; + margin: 0; } - - &:hover, &:active, &:focus-visible { - outline: 3px solid var(--tertiary-background); + + .creator { + grid-area: creator; + justify-self: end; + font-size: 0.75rem; } - } - .name { - grid-area: name; - margin: 0; - } - - .creator { - grid-area: creator; - justify-self: end; - font-size: 0.75rem; - } - - .description { - grid-area: desc; - } -` + .description { + grid-area: desc; + } +`; const ThemeList = styled.div` - display: grid; - gap: 1rem; -` - -import previewPath from '../assets/preview.svg' + display: grid; + gap: 1rem; +`; const ThemedSVG = styled.svg<{ theme: Theme }>` - ${props => props.theme && generateVariables(props.theme)} -` + ${(props) => props.theme && generateVariables(props.theme)} +`; type ThemePreviewProps = Omit, "as"> & { - slug?: string, - theme?: Theme - onThemeLoaded?: (theme: Theme) => void + slug?: string; + theme?: Theme; + onThemeLoaded?: (theme: Theme) => void; }; const ThemePreview = ({ theme, ...props }: ThemePreviewProps) => { - return -} + return ( + + ); +}; const ThemeShopRoot = styled.div` - display: grid; - gap: 1rem; -` + display: grid; + gap: 1rem; +`; export function ThemeShop() { - // setThemeList is for adding more / lazy loading in the future - const [themeList, setThemeList] = useState<[string, ThemeMetadata][] | null>(null); - const [themeData, setThemeData] = useState>({}); + // setThemeList is for adding more / lazy loading in the future + const [themeList, setThemeList] = useState< + [string, ThemeMetadata][] | null + >(null); + const [themeData, setThemeData] = useState>({}); - async function fetchThemeList() { - const manifest = await fetchManifest() - setThemeList(Object.entries(manifest.themes)) - } + async function fetchThemeList() { + const manifest = await fetchManifest(); + setThemeList( + Object.entries(manifest.themes).filter((x) => + x[1].commit ? x[1].commit === GIT_REVISION : true, + ), + ); + } - async function getTheme(slug: string) { - const theme = await fetchTheme(slug); - setThemeData(data => ({ ...data, [slug]: theme })) - } + async function getTheme(slug: string) { + const theme = await fetchTheme(slug); + setThemeData((data) => ({ ...data, [slug]: theme })); + } - useEffect(() => { - fetchThemeList() - }, []) + useEffect(() => { + fetchThemeList(); + }, []); - useEffect(() => { - themeList?.forEach(([slug]) => { - getTheme(slug) - }) - }, [themeList]) + useEffect(() => { + themeList?.forEach(([slug]) => { + getTheme(slug); + }); + }, [themeList]); - return ( - This section is under construction. - - {themeList?.map(([slug, theme]) => ( - -

{theme.name}

- {/* Maybe id's of the users should be included as well / instead? */} -
by {theme.creator}
-
{theme.description}
- - - ))} - - ) -} \ No newline at end of file + return ( + + + This section is under construction. + + + {themeList?.map(([slug, theme]) => ( + +

{theme.name}

+ {/* Maybe id's of the users should be included as well / instead? */} +
by {theme.creator}
+
{theme.description}
+ + + ))} + + + ); +}