Merge pull request #18007 from maapteh/fix-print

fix: make pages and techdocs nicely printable / export PDF

.changeset/smart-ads-rush.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Make the documentation pages printable (also handy for exporting to PDF)

packages/core-components/src/layout/InfoCard/InfoCard.tsx

@@ -92,6 +92,10 @@ const VARIANT_STYLES = {
       flexDirection: 'column',
       height: 'calc(100% - 10px)', // for pages without content header
       marginBottom: '10px',
+      breakInside: 'avoid-page',
+      '@media print': {
+        height: 'auto',
+      },
     },
   },
   cardContent: {

packages/core-components/src/layout/Page/Page.tsx

@@ -33,6 +33,11 @@ const useStyles = makeStyles<BackstageTheme>(
       [theme.breakpoints.down('xs')]: {
         height: '100%',
       },
+      '@media print': {
+        display: 'block',
+        height: 'auto',
+        overflowY: 'inherit',
+      },
     },
   }),
   { name: 'BackstagePage' },

packages/core-components/src/layout/Sidebar/Bar.tsx

@@ -63,6 +63,9 @@ const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
       '&::-webkit-scrollbar': {
         display: 'none',
       },
+      '@media print': {
+        display: 'none',
+      },
     },
     drawerWidth: props => ({
       width: props.sidebarConfig.drawerWidthClosed,

packages/core-components/src/layout/Sidebar/MobileSidebar.tsx

@@ -72,6 +72,9 @@ const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
       zIndex: theme.zIndex.snackbar,
       // SidebarDivider color
       borderTop: '1px solid #383838',
+      '@media print': {
+        display: 'none',
+      },
     },
 
     overlay: props => ({

packages/core-components/src/layout/Sidebar/Page.tsx

@@ -51,6 +51,9 @@ const useStyles = makeStyles<
       [theme.breakpoints.down('xs')]: {
         paddingBottom: props => props.sidebarConfig.mobileSidebarHeight,
       },
+      '@media print': {
+        padding: '0px !important',
+      },
     },
     content: {
       zIndex: 0,

plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx

@@ -39,6 +39,9 @@ const useStyles = makeStyles({
       width: 'calc(100% - 34.4rem)',
       margin: '0 auto',
     },
+    '@media print': {
+      display: 'none',
+    },
   },
 });
 

plugins/techdocs/src/reader/components/TechDocsReaderPageSubheader/TechDocsReaderPageSubheader.tsx

@@ -39,6 +39,9 @@ const useStyles = makeStyles(theme => ({
     flexDirection: 'column',
     minHeight: 'auto',
     padding: theme.spacing(3, 3, 0),
+    '@media print': {
+      display: 'none',
+    },
   },
 }));
 

plugins/techdocs/src/reader/transformers/styles/rules/layout.ts

@@ -227,4 +227,18 @@ export default ({ theme, sidebar }: RuleOptions) => `
     width: 12.1rem;
   }
 }
+
+
+@media print {
+  .md-sidebar,
+  #toggle-sidebar {
+    display: none;
+  }
+  
+  .md-content {
+    margin: 0;
+    width: 100%;
+    max-width: 100%;
+  }
+}
 `;