✨(frontend) add a docs logo watermark to presentations

Show a monochrome Docs logo in the slide corner (web and PDF) to signal
the document was made with Docs.

Closes #2472
This commit is contained in:
Nathan Panchout
2026-07-01 16:17:53 +02:00
parent 02b56e2076
commit 5afdba1ae9
3 changed files with 45 additions and 0 deletions
@@ -0,0 +1,10 @@
<svg width="80" height="32" viewBox="0 0 80 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.2">
<path d="M20.504 26.2648C21.4382 26.0029 22.3329 25.5248 22.92 24.6801C23.4995 23.8529 23.6627 22.8036 23.6627 21.7939V7.00065C23.6627 6.73872 23.6485 6.47631 23.6169 6.21704C24.0809 6.39955 24.4385 6.70112 24.6897 7.12176C24.9861 7.60005 25.1343 8.22991 25.1343 9.01133V24.037C25.1343 25.0946 24.875 25.8861 24.3563 26.4116C23.8376 26.937 23.0561 27.1997 22.012 27.1997H16.3363C16.4708 27.1762 16.6055 27.152 16.7406 27.127C17.925 26.9154 19.1767 26.6282 20.4944 26.2675L20.504 26.2648Z" fill="#222631"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.86523 23.7239V8.67802C6.86523 7.76186 7.11111 7.06801 7.60287 6.59646C8.10137 6.12491 8.76154 5.86555 9.58339 5.8184C10.7959 5.7443 11.9445 5.64325 13.0291 5.51526C14.1136 5.38053 15.1511 5.22559 16.1413 5.05044C17.1383 4.8753 18.1084 4.67994 19.0515 4.46437C20.0215 4.23533 20.7659 4.34985 21.2846 4.80793C21.8033 5.26601 22.0626 5.99691 22.0626 7.00064V21.7939C22.0626 22.6763 21.9111 23.3331 21.6079 23.7643C21.3048 24.2021 20.7928 24.5221 20.072 24.7242C18.7921 25.0745 17.5863 25.3507 16.4546 25.5528C15.3228 25.7616 14.2181 25.9199 13.1402 26.0277C12.0624 26.1355 10.9576 26.2197 9.8259 26.2803C8.88953 26.3342 8.162 26.1389 7.64329 25.6943C7.12459 25.2564 6.86523 24.5996 6.86523 23.7239ZM10.5665 11.4098C12.0504 11.3154 13.4101 11.1703 14.6456 10.9745C14.9454 10.9256 15.2447 10.8747 15.5429 10.8219C15.8549 10.7667 16.0806 10.4947 16.0806 10.1785C16.0806 9.76909 15.71 9.46073 15.3076 9.52937C15.0764 9.5688 14.844 9.60712 14.6104 9.64435C13.3873 9.83924 12.0358 9.98384 10.5558 10.078C10.3342 10.0923 10.1578 10.1614 10.0445 10.299C9.93728 10.4291 9.88477 10.5857 9.88477 10.7641C9.88477 10.9455 9.94598 11.1035 10.0682 11.2333L10.0699 11.235C10.2023 11.3674 10.3706 11.4247 10.5665 11.4098ZM10.566 14.7647C12.0501 14.6702 13.41 14.5252 14.6456 14.3293C15.8866 14.127 17.1145 13.8909 18.3286 13.6211C18.5749 13.5664 18.7595 13.4801 18.8518 13.3462C18.9425 13.2175 18.9874 13.07 18.9874 12.9064C18.9874 12.722 18.9171 12.5631 18.7804 12.434C18.6332 12.2949 18.4275 12.2626 18.1839 12.3127L18.1824 12.3131C17.0255 12.5754 15.8348 12.8041 14.6104 12.9992C13.3873 13.1941 12.0358 13.3387 10.5558 13.4329C10.3342 13.4472 10.1578 13.5162 10.0445 13.6538C9.93782 13.7833 9.88477 13.9363 9.88477 14.1089C9.88477 14.2961 9.94528 14.4577 10.0681 14.5882L10.0716 14.5915C10.2036 14.7157 10.3701 14.7723 10.564 14.7648L10.566 14.7647ZM10.5664 18.1194C12.0503 18.0182 13.4101 17.8698 14.6456 17.674C15.8867 17.4784 17.1144 17.2457 18.3286 16.9758C18.5755 16.921 18.7602 16.8311 18.8524 16.69C18.9423 16.5622 18.9874 16.4185 18.9874 16.2612C18.9874 16.0767 18.9171 15.9178 18.7804 15.7887C18.6332 15.6497 18.4275 15.6173 18.1839 15.6675L18.1828 15.6677C17.0258 15.9233 15.835 16.1487 14.6104 16.3438C13.3872 16.5387 12.0356 16.6867 10.5556 16.7876C10.334 16.8019 10.1578 16.871 10.0445 17.0086C9.93782 17.1381 9.88477 17.291 9.88477 17.4636C9.88477 17.6508 9.94528 17.8125 10.0681 17.9429L10.0716 17.9463C10.2036 18.0705 10.3701 18.127 10.564 18.1196L10.5664 18.1194ZM14.6456 21.0055C13.4101 21.2013 12.0504 21.3463 10.5665 21.4408C10.3706 21.4557 10.2023 21.3984 10.0699 21.266L10.0682 21.2642C9.94601 21.1344 9.88477 20.9765 9.88477 20.7951C9.88477 20.6167 9.93728 20.4601 10.0445 20.33C10.1578 20.1923 10.3342 20.1233 10.5559 20.109C12.0358 20.0148 13.3873 19.8702 14.6104 19.6753C14.844 19.6381 15.0764 19.5998 15.3076 19.5603C15.71 19.4917 16.0806 19.8001 16.0806 20.2095C16.0806 20.5257 15.8549 20.7976 15.5429 20.8529C15.2447 20.9057 14.9454 20.9566 14.6456 21.0055Z" fill="#222631"/>
<path d="M32.9608 22.3601C32.8724 22.3601 32.8008 22.2885 32.8008 22.2001V9.7601C32.8008 9.67173 32.8724 9.6001 32.9608 9.6001H37.7772C38.7858 9.6001 39.7033 9.77023 40.5297 10.1105C41.3561 10.4508 42.067 10.9186 42.6624 11.5141C43.2701 12.0974 43.7318 12.7719 44.0478 13.5375C44.3759 14.3031 44.54 15.1173 44.54 15.9801C44.54 16.8429 44.3759 17.6571 44.0478 18.4227C43.7318 19.1883 43.2701 19.8689 42.6624 20.4643C42.067 21.0476 41.3561 21.5094 40.5297 21.8497C39.7033 22.19 38.7858 22.3601 37.7772 22.3601H32.9608ZM37.7954 11.6235H35.2029C35.1145 11.6235 35.0429 11.6951 35.0429 11.7835V20.1767C35.0429 20.2651 35.1145 20.3367 35.2029 20.3367H37.7954C38.4395 20.3367 39.0289 20.2274 39.5636 20.0086C40.1104 19.7777 40.5783 19.4618 40.9672 19.0607C41.3682 18.6597 41.6781 18.1979 41.8968 17.6754C42.1156 17.1528 42.225 16.5877 42.225 15.9801C42.225 15.3725 42.1156 14.8074 41.8968 14.2848C41.6781 13.7501 41.3682 13.2883 40.9672 12.8995C40.5783 12.4984 40.1104 12.1886 39.5636 11.9698C39.0289 11.7389 38.4395 11.6235 37.7954 11.6235Z" fill="#222631"/>
<path d="M50.7159 20.4826C51.1291 20.4826 51.5119 20.4036 51.8643 20.2456C52.2167 20.0755 52.5205 19.8507 52.7757 19.5712C53.0431 19.2917 53.2497 18.9696 53.3955 18.6051C53.5413 18.2283 53.6143 17.8273 53.6143 17.402C53.6143 16.8187 53.4867 16.2961 53.2315 15.8343C52.9762 15.3725 52.6299 15.008 52.1924 14.7406C51.7549 14.4611 51.2628 14.3214 50.7159 14.3214C50.2906 14.3214 49.8956 14.4003 49.5311 14.5583C49.1786 14.7163 48.8687 14.935 48.6014 15.2146C48.3462 15.4941 48.1457 15.8222 47.9999 16.1989C47.854 16.5756 47.7811 16.9766 47.7811 17.402C47.7811 17.9731 47.9087 18.4957 48.1639 18.9696C48.4191 19.4314 48.7654 19.8021 49.2029 20.0816C49.6526 20.3489 50.1569 20.4826 50.7159 20.4826ZM50.6977 12.4438C51.439 12.4438 52.1134 12.5714 52.721 12.8266C53.3408 13.0818 53.8694 13.4403 54.3069 13.9021C54.7566 14.3517 55.0968 14.8804 55.3277 15.488C55.5708 16.0834 55.6923 16.7214 55.6923 17.402C55.6923 18.0825 55.5708 18.7266 55.3277 19.3342C55.0968 19.9297 54.7566 20.4583 54.3069 20.9201C53.8694 21.3697 53.3408 21.7222 52.721 21.9774C52.1134 22.2326 51.439 22.3602 50.6977 22.3602C49.9564 22.3602 49.2759 22.2326 48.6561 21.9774C48.0485 21.7222 47.5198 21.3697 47.0702 20.9201C46.6206 20.4583 46.2742 19.9297 46.0312 19.3342C45.8003 18.7266 45.6848 18.0825 45.6848 17.402C45.6848 16.7214 45.8003 16.0834 46.0312 15.488C46.2742 14.8804 46.6206 14.3517 47.0702 13.9021C47.5198 13.4403 48.0485 13.0818 48.6561 12.8266C49.2759 12.5714 49.9564 12.4438 50.6977 12.4438Z" fill="#222631"/>
<path d="M61.8289 12.4438C62.6674 12.4438 63.4148 12.6139 64.071 12.9542C64.6897 13.2579 65.2042 13.6657 65.6146 14.1776C65.6696 14.2461 65.6552 14.3459 65.5853 14.399L64.2623 15.4026C64.1885 15.4586 64.0829 15.44 64.0268 15.3662C63.8074 15.0774 63.5244 14.8385 63.1778 14.6495C62.789 14.4307 62.3332 14.3214 61.8107 14.3214C61.3854 14.3214 60.9904 14.4003 60.6258 14.5583C60.2734 14.7163 59.9696 14.935 59.7144 15.2146C59.4592 15.4941 59.2587 15.8222 59.1129 16.1989C58.967 16.5635 58.8941 16.9645 58.8941 17.402C58.8941 17.9853 59.0217 18.5139 59.2769 18.9879C59.5321 19.4497 59.8785 19.8142 60.316 20.0816C60.7534 20.3489 61.2638 20.4826 61.8472 20.4826C62.3454 20.4826 62.789 20.3732 63.1778 20.1545C63.5244 19.9655 63.8074 19.7266 64.0268 19.4378C64.0829 19.364 64.1885 19.3453 64.2623 19.4014L65.584 20.404C65.6544 20.4575 65.6684 20.5582 65.6124 20.6266C65.2023 21.1277 64.6885 21.5354 64.071 21.8498C63.4148 22.19 62.6674 22.3602 61.8289 22.3602C60.796 22.3602 59.9028 22.1353 59.1493 21.6857C58.3959 21.2239 57.8126 20.6163 57.3994 19.8628C56.9984 19.1094 56.7978 18.2891 56.7978 17.402C56.7978 16.7336 56.9133 16.1017 57.1442 15.5062C57.3751 14.9107 57.7093 14.3821 58.1468 13.9203C58.5842 13.4585 59.1129 13.1 59.7326 12.8448C60.3524 12.5775 61.0512 12.4438 61.8289 12.4438Z" fill="#222631"/>
<path d="M68.7348 15.1234C68.7348 15.4151 68.8381 15.6581 69.0447 15.8526C69.2634 16.0348 69.5429 16.1928 69.8832 16.3265C70.2234 16.4602 70.5819 16.606 70.9587 16.764C71.3475 16.9098 71.7121 17.0921 72.0524 17.3108C72.3926 17.5174 72.6661 17.7969 72.8727 18.1494C73.0914 18.4896 73.2008 18.921 73.2008 19.4436C73.2008 20.0634 73.0489 20.592 72.7451 21.0295C72.4534 21.4548 72.0645 21.7829 71.5784 22.0138C71.0923 22.2447 70.5576 22.3602 69.9743 22.3602C69.1844 22.3602 68.4978 22.2143 67.9145 21.9227C67.377 21.6427 66.9015 21.2751 66.4878 20.8198C66.4289 20.755 66.4361 20.6549 66.5019 20.597L67.6246 19.609C67.6931 19.5487 67.7979 19.5581 67.8576 19.6273C68.1218 19.9337 68.4142 20.1884 68.7348 20.3915C69.0994 20.6224 69.5065 20.7378 69.9561 20.7378C70.3814 20.7378 70.7035 20.6284 70.9222 20.4097C71.1531 20.1788 71.2686 19.8993 71.2686 19.5712C71.2686 19.2674 71.1592 19.0243 70.9404 18.842C70.7338 18.6598 70.4604 18.5018 70.1202 18.3681C69.7799 18.2344 69.4153 18.0947 69.0264 17.9488C68.6497 17.7909 68.2912 17.6025 67.951 17.3838C67.6107 17.165 67.3312 16.8855 67.1124 16.5452C66.9058 16.1928 66.8026 15.7432 66.8026 15.1963C66.8026 14.6859 66.9362 14.2241 67.2036 13.811C67.4709 13.3856 67.8416 13.0514 68.3155 12.8084C68.8016 12.5653 69.3546 12.4438 69.9743 12.4438C70.6427 12.4438 71.2625 12.5896 71.8336 12.8813C72.3653 13.1471 72.7909 13.4785 73.1106 13.8756C73.163 13.9407 73.1516 14.0352 73.088 14.0895L71.9649 15.0479C71.8941 15.1083 71.787 15.0955 71.7283 15.0232C71.5209 14.7678 71.2826 14.5521 71.0134 14.376C70.6974 14.1694 70.351 14.0662 69.9743 14.0662C69.707 14.0662 69.4761 14.1148 69.2816 14.212C69.0994 14.3092 68.9596 14.4368 68.8624 14.5948C68.7773 14.7528 68.7348 14.929 68.7348 15.1234Z" fill="#222631"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.0 KiB

@@ -0,0 +1,23 @@
import { css } from 'styled-components';
import { Box } from '@/components';
import LogoDocsMonoSVG from '../assets/logo-docs-mono.svg';
const logoCss = css`
width: 80px;
height: 32px;
pointer-events: none;
svg {
display: block;
width: 80px;
height: 32px;
}
`;
export const PresenterDocsLogo = () => (
<Box $css={logoCss} aria-hidden="true">
<LogoDocsMonoSVG />
</Box>
);
@@ -16,6 +16,7 @@ import { usePresenterShortcuts } from '../hooks/usePresenterShortcuts';
import { getSlideTitle, useSlides } from '../hooks/useSlides';
import { PresenterBlock, PresenterSlideData } from '../types';
import { PresenterDocsLogo } from './PresenterDocsLogo';
import { PresenterFloatingBar } from './PresenterFloatingBar';
import { PresenterSlide } from './PresenterSlide';
@@ -44,6 +45,13 @@ const slideAreaCss = css`
background: white;
`;
const docsLogoCss = css`
position: fixed;
bottom: 1rem;
left: 1rem;
z-index: 1;
`;
export const PresenterOverlay = ({
doc,
onClose,
@@ -197,6 +205,10 @@ export const PresenterOverlay = ({
))}
</Box>
<Box $css={docsLogoCss}>
<PresenterDocsLogo />
</Box>
<PresenterFloatingBar
index={currentIndex}
total={total}