From b75a8db2513d98826a8b0fbe3873ce5f6d6fb786 Mon Sep 17 00:00:00 2001
From: Philip Molares <philip.molares@udo.edu>
Date: Wed, 20 Nov 2024 18:57:10 +0100
Subject: [PATCH] WIP

Signed-off-by: Philip Molares <philip.molares@udo.edu>
---
 frontend/global-styles/markdown-tweaks.scss   |  8 ++++++
 frontend/global-styles/print.scss             | 28 +++++++++++++++++++
 .../copy-to-clipboard-button.tsx              |  2 ++
 .../style.module.scss                         | 11 ++++++++
 .../highlighted-code.module.scss              |  7 +++++
 .../click-shield/click-shield.module.scss     |  4 +++
 .../asciinema/replace-asciinema-link.ts       |  2 +-
 7 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/common/copyable/copy-to-clipboard-button/style.module.scss

diff --git a/frontend/global-styles/markdown-tweaks.scss b/frontend/global-styles/markdown-tweaks.scss
index 5d8782155..f9fd09257 100644
--- a/frontend/global-styles/markdown-tweaks.scss
+++ b/frontend/global-styles/markdown-tweaks.scss
@@ -49,6 +49,14 @@
     }
   }
 
+  hr {
+    color: #bbbcbf;
+    @media print {
+      color: transparent !important;
+      border-bottom: 2px solid #bbbcbf;
+    }
+  }
+
   blockquote .blockquote-extra {
     font-size: 0.85em;
     margin-inline-start: 0.5em;
diff --git a/frontend/global-styles/print.scss b/frontend/global-styles/print.scss
index 7d9857f3d..cdedd714e 100644
--- a/frontend/global-styles/print.scss
+++ b/frontend/global-styles/print.scss
@@ -7,4 +7,32 @@
   .heading-anchor {
     display: none;
   }
+
+  mark {
+    print-color-adjust: exact;
+  }
+
+  h1, h2, h3, h4, h5 {
+    break-after: avoid;
+  }
+
+  table, figure {
+    break-inside: avoid;
+  }
+
+  @page {
+    size: A4;
+    margin: 0 15pt;
+  }
+
+  .print-link {
+    display: block;
+  }
+
+}
+
+@media screen {
+  .print-link {
+    display: none;
+  }
 }
diff --git a/frontend/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx b/frontend/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx
index 42d3877cf..4b689f770 100644
--- a/frontend/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx
+++ b/frontend/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx
@@ -12,6 +12,7 @@ import React, { Fragment, useRef } from 'react'
 import { Button } from 'react-bootstrap'
 import { Files as IconFiles } from 'react-bootstrap-icons'
 import type { Variant } from 'react-bootstrap/types'
+import styles from './style.module.scss'
 
 export interface CopyToClipboardButtonProps extends PropsWithDataCypressId {
   content: string
@@ -40,6 +41,7 @@ export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
   return (
     <Fragment>
       <Button
+        className={styles['copy-button']}
         ref={button}
         size={size}
         variant={variant}
diff --git a/frontend/src/components/common/copyable/copy-to-clipboard-button/style.module.scss b/frontend/src/components/common/copyable/copy-to-clipboard-button/style.module.scss
new file mode 100644
index 000000000..c0b51ee42
--- /dev/null
+++ b/frontend/src/components/common/copyable/copy-to-clipboard-button/style.module.scss
@@ -0,0 +1,11 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+@media print {
+  .copy-button {
+    display: none;
+  }
+}
diff --git a/frontend/src/components/common/highlighted-code/highlighted-code.module.scss b/frontend/src/components/common/highlighted-code/highlighted-code.module.scss
index 5b1823f6c..bf4108927 100644
--- a/frontend/src/components/common/highlighted-code/highlighted-code.module.scss
+++ b/frontend/src/components/common/highlighted-code/highlighted-code.module.scss
@@ -55,3 +55,10 @@
     }
   }
 }
+
+@media print {
+  .code-highlighter {
+    border: black solid 1px;
+    border-radius: var(--bs-border-radius);
+  }
+}
diff --git a/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss b/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss
index fc79aad30..d61e59679 100644
--- a/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss
+++ b/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss
@@ -6,6 +6,10 @@
 
 .click-shield {
 
+  @media print {
+    display: none;
+  }
+
   position: relative;
   cursor: pointer;
   width: 100%;
diff --git a/frontend/src/extensions/external-lib-app-extensions/asciinema/replace-asciinema-link.ts b/frontend/src/extensions/external-lib-app-extensions/asciinema/replace-asciinema-link.ts
index ea3640cda..b30bb9613 100644
--- a/frontend/src/extensions/external-lib-app-extensions/asciinema/replace-asciinema-link.ts
+++ b/frontend/src/extensions/external-lib-app-extensions/asciinema/replace-asciinema-link.ts
@@ -16,7 +16,7 @@ const replaceAsciinemaLink: RegexOptions = {
   replace: (match) => {
     // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
     // noinspection CheckTagEmptyBody
-    return `<${AsciinemaMarkdownExtension.tagName} id='${match}'></${AsciinemaMarkdownExtension.tagName}>`
+    return `<${AsciinemaMarkdownExtension.tagName} id='${match}'></${AsciinemaMarkdownExtension.tagName}><br /><a class='print-link' href='https://asciinema.org/a/${match}'>https://asciinema.org/a/${match}</a>`
   }
 }