From b23a73ac51c6c7cdfe00a527e8f2c0fa0c5ab761 Mon Sep 17 00:00:00 2001 From: Philip Molares Date: Wed, 1 Jul 2020 23:20:00 +0200 Subject: [PATCH] added branding option (#301) added branding option via '@ ' or '@ ' after the CodiMD logo and text. This was a user can personalize their CodiMD instance Signed-off-by: Tilman Vatteroth Co-authored-by: Erik Michelson Co-authored-by: Tilman Vatteroth --- CHANGELOG.md | 1 + public/acme.png | Bin 0 -> 3977 bytes public/api/v2/config | 4 +++ src/api/backend-config/types.ts | 6 ++++ src/components/common/branding/branding.scss | 7 ++++ src/components/common/branding/branding.tsx | 32 ++++++++++++++++++ .../common/document-title/document-title.tsx | 13 +++++++ src/components/editor/task-bar/task-bar.tsx | 7 ++-- src/components/landing/landing-layout.tsx | 2 ++ src/components/landing/pages/intro/intro.tsx | 7 ++-- src/redux/backend-config/reducers.ts | 4 +++ 11 files changed, 79 insertions(+), 4 deletions(-) create mode 100644 public/acme.png create mode 100644 src/components/common/branding/branding.scss create mode 100644 src/components/common/branding/branding.tsx create mode 100644 src/components/common/document-title/document-title.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index daade7ce2..870574c0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,7 @@ - Users may now change their display name and password (only email accounts) on the new profile page - Highlighted code blocks can now use line wrapping and line numbers at once - Images, videos, and other non-text content is now wider in View Mode +- CodiMD instances can now be branded either with a '@ ' or '@ ' after the CodiMD logo and text ### Changed diff --git a/public/acme.png b/public/acme.png new file mode 100644 index 0000000000000000000000000000000000000000..a8ddbad5cdfd72c8612ca77b01ba9a41a5e8c032 GIT binary patch literal 3977 zcmV;44|ed0P)F(^RKS+w6pIxHuw7a_x}FxIXCY}M(-~y^P{5gGBEEoGw@hf_ww@gAnOeSO4_qpKQiXj}5%=d6{ z(V;_!4jnpl=+L1Itf}9E9Egf^RE9vs5E-L^uYl9 zdE~nI)np)AxyPS_zj#dyy=yqC*oa&sO|JV{%tzS=w5!!0`szRH)VST?&Uu5s(<5hU z_}61*;I7|}r8?;Bu*fqYst6yvM<-FXA zc-qQpPuH`IiTI9~fr_q@%!l(0@+UxK`j*pIpU|G(7q0P(&w9e?wd1YYq3=e)Dc?=! zF5ylg>EpCVgXhwd^vz0w8#wJdCSuaArZeaG`Ahwe^x65AY)EceS?ub;J^SMnaN48c zqhK+`4`9H7Ya%A?>8)dPY{$QN1Lrl_P|n*p+tZ&OgkiL&&mtwEmqA55 zx^eLcX=jO~{1!;m7ye-iptBZ8-<*(qfr`?eUU}>o2&l-YiSw+6w6pY*_!5l&DN|%V z+Bn+Nh0i**)2>Dy;=w=(>~8hoJOlvkYLYYVSpr3AESn_UFyX*CA#2!aPhVt5Oivd; zkzt&@fcA9FxF=MU)KIn~vqcLMRlR!Il~&r-#NSNX5BD(!FVC&W0@}we)2bT39zOb# z(O#}vpgn!^k~3D?(h=*+`GJXf1mG%K=;aOoQGGq6i zscBDH@-h2WuhjInNTO=!A`J!KooAz6x_dW>mq5{Ybq{l-T}@-oa*0>K5hhz4#b+C5 zjHh?VMtk~Oqz`WaOm~(wbEKW8gX;tw5ToKhqsS=Vx!7n|zRunw3`K_H8amR>b7&-w zV3tDHKz12^wR_vk7TVRTkG*v=8gvb~CF+rO=DeZAj;@3rnN@g+>TS4LXpg+?Edxeq ziDPmdXis^@hGEo7T?64288!74h8Ei04lEQ1=woYan?XUjzmtxu-de=4uy=vImR}^E{zj z+SQa3-{_qS~)OzPP?#ub-Y? zZr|VEo}Yh!4a~^h-C|2STb9h=8HT$Cl8=8`H6U{hHE1VAVf;CbQdkyok}S_0rpAVL zcI;P|V44Fw{jr_Q02CtQvPnDPVcO{B+=aw+RBdQy>#Hy!Obzj;Z70_bdrny-u6efO zF4&|$U~gY$4omiH%+wxFBr0KH&DzOcw}Xu4;ZJr-JC(`h;YCt&-Xh2r{J0GCrVv_N za`P_*DwTAsaUW@e_9?D~#{7~Wu45B3PV8PC^Gyw2*30((yvuqgr7vUr z4AZ>?Ly-hN_Nl5LoeO zoC9hu4wayQ8KV+ktKSpwFvhJ1tw$cTU*L+2N2cr%;ToV2+K?iA z{`v2el#?dygg@0ME<>DoQow{THD{Z)<`aZn?39GrR<-bHPuJ*`Fl_IDnzSHM*F4t% zf#NOf(N08iiXRcJ6`s(JADS88`a2_28wISv5JuSpmjP3IZkN91ame7O0}R_cAWfzq zV5BYz5>s|h5Vm@T&>Jcfhfh0^5ti}0fp}HM@{l|N!#)*>4qXIJI>mjp<*qRTn|30I zuL}>?KzJL~$R%b}=U4!f;{$-GUQVhM2R7}5{_jylt0saJ1_#VsVo{XcsLMYe1gVFF zS~l%?YP(0MOpuD{1PmDoT?5%VDD8M^gf1#yDVug89_vwilFHNhP{2M@Lf1gpU>^~q zKj?h?)sE|r9)`8Ba*=}0VNWJmuYp-mi5j7X__6SnO*>u*tz&-5=Gd$Jo&}>AKxP9Q zZ|-am^6Tj5WYa!EtxFHr0JliM2QX5n=A!Y7&yYuZgr?-{_;vq&xwI3}1CNwVS)LRP z*da{GBzD*sD_-NaQJ7Q(F71?<;Hv>=RQjQS)j2}ffQOashMJ;G>5uyZn3)5FQSYG! z2u*hix(97kDxnFF=#?RRZc@sWE)HPk$>1u8_HhlgV58o{JxNGxG z``MNWq@8ded&J!7Ol|u7!G47aVT9b*IX~`r76#`!oebLXmTDd`cT%DfX@SJAX5$WA zni(RXMMxV^)_}AVfmEOVT10+Yazmv&>c<;9?M7l0;TrG=fSm!YCyoaQFy)L|&&S3I^@Ccju1p8ldvz;%|!fe4*`+1CKbuHK6kr zx`0^_APdOQWYFWmBQQgrd-0s0UH6yB%g26# zfAS}U^8?UMnO-{nV)8yF#LedA;k0kaMK-S?Q58CZ)|XcpLVoh+jD9=y!vfl=CignK zR&Xt0#vd78E>{HY*&1ubZEUpx?qJgRhl>7O1=Deakz5micDk@tXZ`i%W;uN?mtSA2 z)#~Bl^>sR(4=3A-axf{XRn=^O)2_22mYogtLe5uHY(s?0^%Z6tn}D=C%Au2bF_nAF zDgfhSzW0NU|Dssm7QqvTEe9ig=Aa)i}8nVqa*2OFtsA-qi8-aRNN}_JFM^W12Wr|8v5KmM?QPx1X zc6h?ns8iImi?gHQha0F_ZR;^G+V$NCJ+)z45#w_oHh7d>x!~Ug&jvud)cAs5xS}NL z)}e*bp1-G9nw9Q>hZbffc$8hy2vslv&UUF28OkfF`QtX752L+YMVLd^Xmc-X+ZXNw z1)(zcYud$Mh5-5_Sq#3dokwWbJ%xT(#!M>`we5o+`#cM3B>ReA14r6oE`=t--3V&yVKqQPa-&l7<~X)1V~kP7g$A-{?Z9M1?8VLf1er zk1)|1zz;{-sk#=#U3WoKG=8sjW zot^gWM!?!DC(ytYPSPW#jRbXjTmBzDqndVEt77BBVpQ|T>M}d+v$;ZZbc}>BnfK4= zZ+;FGu65|di}#v#X}$Wc;J5;1=vHFQO8YkD4E?KNU~)T-pN#L(2!{eylV$6)I(T%odLq2)Y{TCkdxmob~Zr$kuWAI$Bm74 zoo`NkELlXCAXP-@8VFUQhllv>b&MR^l{ASJ#D0k8k2e6p9txA2wCij@WG$FEuOe#&dPvUz)gIq&kFjW1b6F*SzqU~cwRZ1%wa~upGlYAc zjdECCPx!_R!+aNlc)Fc*64Ea8{DQheBH(tgsVubbl8G_To=zsvH6ZKW!|y*t0*~e) z-3)lNtD!_agYhyvdA+#5KxnVJQDEV7BOy%a8VD27ql#2YyYqorAek-%tEo0;sBS`s zM{m-;`vt9OHdJn*YamQSkH{j@iTxB~*QGxDKUZCFKpAm|qR=MoyTl>%uZFA=CI$sc zO>(a(DeY=}@6CH1=_F;&UdwFIUP)wJqOQ(%4H(%?Vn|v}^SdXFpFPzX;AX;mPShDj z4caRU60LljL5VsN9qk?^5d?_NmPXHK5$zW$S|piI;0nk*qVdJ?h;Gnc)kb4IIgF2+ z3S9$9h++dZpW$h(3*-jrJNl=xck-&z(fTGX(R-X?cJx20$zNh-ho%#c=FsJCrKlk? zzZvX`5iS0(rv=9d5z$j~B8eNb#?%V^&((M1;`Cy;`o{lof;t0bLd@(S0HWo|FO|4M z{|cp{dSFk=xOWiOfIGH^UAcI&|pJp+kob9XfRA j(4j+z4jnpl_&?%*2$4TfAYGvp00000NkvXXu0mjffoaA8 literal 0 HcmV?d00001 diff --git a/public/api/v2/config b/public/api/v2/config index a0ec2dcb8..c7c7992e4 100644 --- a/public/api/v2/config +++ b/public/api/v2/config @@ -13,6 +13,10 @@ "email": true, "openid": true }, + "branding": { + "name": "ACME Corp", + "logo": "http://localhost:3000/acme.png" + }, "banner": { "text": "This is the test banner text", "timestamp": "2020-05-22T20:46:08.962Z" diff --git a/src/api/backend-config/types.ts b/src/api/backend-config/types.ts index 874861f79..844a4e334 100644 --- a/src/api/backend-config/types.ts +++ b/src/api/backend-config/types.ts @@ -1,12 +1,18 @@ export interface BackendConfig { allowAnonymous: boolean, authProviders: AuthProvidersState, + branding: BrandingConfig, banner: BannerConfig, customAuthNames: CustomAuthNames, specialLinks: SpecialLinks, version: BackendVersion, } +export interface BrandingConfig { + name: string, + logo: string, +} + export interface BannerConfig { text: string timestamp: string diff --git a/src/components/common/branding/branding.scss b/src/components/common/branding/branding.scss new file mode 100644 index 000000000..164f57f8e --- /dev/null +++ b/src/components/common/branding/branding.scss @@ -0,0 +1,7 @@ +.regular-size { + height: 50px; +} + +.inline-size { + height: 30px; +} diff --git a/src/components/common/branding/branding.tsx b/src/components/common/branding/branding.tsx new file mode 100644 index 000000000..b31289e07 --- /dev/null +++ b/src/components/common/branding/branding.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import { useSelector } from 'react-redux' +import { ApplicationState } from '../../../redux' +import { ShowIf } from '../show-if/show-if' +import './branding.scss' + +export interface BrandingProps { + inline?: boolean +} + +export const Branding: React.FC = ({ inline = false }) => { + const branding = useSelector((state: ApplicationState) => state.backendConfig.branding) + const showBranding = branding.name !== '' || branding.logo !== '' + + console.log(branding.logo) + + return ( + + @ + { + branding.logo + ? {branding.name} + : branding.name + } + + ) +} diff --git a/src/components/common/document-title/document-title.tsx b/src/components/common/document-title/document-title.tsx new file mode 100644 index 000000000..3154dc5f4 --- /dev/null +++ b/src/components/common/document-title/document-title.tsx @@ -0,0 +1,13 @@ +import React, { useEffect } from 'react' +import { useSelector } from 'react-redux' +import { ApplicationState } from '../../../redux' + +export const DocumentTitle: React.FC = () => { + const branding = useSelector((state: ApplicationState) => state.backendConfig.branding) + + useEffect(() => { + document.title = `CodiMD ${branding.name ? ` @ ${branding.name}` : ''}` + }, [branding]) + + return null +} diff --git a/src/components/editor/task-bar/task-bar.tsx b/src/components/editor/task-bar/task-bar.tsx index d868cf646..5a57c0444 100644 --- a/src/components/editor/task-bar/task-bar.tsx +++ b/src/components/editor/task-bar/task-bar.tsx @@ -2,6 +2,7 @@ import React from 'react' import { Button, Nav, Navbar } from 'react-bootstrap' import { Trans, useTranslation } from 'react-i18next' import { Link } from 'react-router-dom' +import { Branding } from '../../common/branding/branding' import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon' import { ConnectionIndicator } from './connection-indicator' import { DarkModeButton } from './dark-mode-button' @@ -15,8 +16,10 @@ const TaskBar: React.FC = () => {