Pdf/emoji

docker-compose.pdf.yml

@@ -14,7 +14,9 @@ services:
       retries: 30
 
   puppeteer:
-    image: ghcr.io/puppeteer/puppeteer:16.1.0
+    build:
+      context: pdf
+      dockerfile: Dockerfile
     volumes:
       - ./pdf:/home/pptruser/pdf
     command: node pdf/export.js http://resume/ pdf/out/resume.pdf

docusaurus.config.ts

@@ -2,7 +2,6 @@ import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 import ReactDOMServer from 'react-dom/server';
 import { FaFileDownload, FaGithub } from 'react-icons/fa';
-
 import dayjs from 'dayjs';
 import { BsFillMusicPlayerFill } from 'react-icons/bs';
 import { IconBaseProps } from 'react-icons';
@@ -18,12 +17,20 @@ const soundPlayerHtml = `
 const iconStyle: IconBaseProps = {
   style: { display: 'flex', alignItems: 'center', fontSize: '1.2rem' },
 };
-const githubIconHtml = ReactDOMServer.renderToString(FaGithub(iconStyle));
-const fileDownloadIconHtml = ReactDOMServer.renderToString(
-  FaFileDownload(iconStyle),
+
+const iconWrapper = (iconHtml: string, title: string) =>
+  `<span title="${title}">${iconHtml}</span><span class="capy--mobile-only" style="margin-left: 0.5rem">${title}</span>`;
+const githubIconHtml = iconWrapper(
+  ReactDOMServer.renderToString(FaGithub(iconStyle)),
+  'リポジトリを表示する',
+);
+const fileDownloadIconHtml = iconWrapper(
+  ReactDOMServer.renderToString(FaFileDownload(iconStyle)),
+  'PDFファイルをダウンロードする',
 );
-const musicIconHtml = ReactDOMServer.renderToString(
-  BsFillMusicPlayerFill(iconStyle),
+const musicIconHtml = iconWrapper(
+  ReactDOMServer.renderToString(BsFillMusicPlayerFill(iconStyle)),
+  'Music Playerへ移動する',
 );
 
 const metaTitle = 'yktakaha4.github.io';
@@ -108,17 +115,17 @@ const config: Config = {
         {
           position: 'right',
           href: repositoryUrl,
-          html: `<div title="リポジトリを表示する">${githubIconHtml}</div>`,
+          html: githubIconHtml,
         },
         {
           position: 'right',
           href: pdfUrl,
-          html: `<div title="PDFファイルをダウンロードする">${fileDownloadIconHtml}</div>`,
+          html: fileDownloadIconHtml,
         },
         {
           position: 'right',
           href: `#${soundPlayerAnchor}`,
-          html: `<div style="margin-right: 0.4rem" title="Music Playerへ移動する">${musicIconHtml}</div>`,
+          html: `<div style="display: flex; margin-right: 0.35rem">${musicIconHtml}</div>`,
         },
       ],
     },

pdf/Dockerfile

@@ -0,0 +1,11 @@
+FROM ghcr.io/puppeteer/puppeteer:21
+
+USER root
+
+RUN apt-get update && apt-get install -y \
+    fonts-noto \
+    fonts-noto-extra \
+    fonts-noto-cjk \
+    fonts-noto-color-emoji
+
+USER pptruser

pdf/export.js

@@ -15,7 +15,17 @@ async function run() {
   await page.goto(url, { waitUntil: 'networkidle0' });
 
   console.log('Generating PDF...');
-  await page.pdf({ path: output, format: 'A4' });
+  await page.pdf({
+    path: output,
+    format: 'A4',
+    displayHeaderFooter: true,
+    footerTemplate:
+      '<div style="width: 100%; font-size: 12px; padding: 0 0.5cm; display: flex; justify-content: space-between;"><div></div><div><span class="pageNumber"></span> / <span class="totalPages"></span></div></div>',
+    margin: {
+      top: '0.4cm',
+      bottom: '0.8cm',
+    },
+  });
 
   await browser.close();
   console.log('Done: Generating PDF');

src/components/ui/Timestamp.spec.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+import { Timestamp } from '@/components/ui/Timestamp';
+import dayjs from 'dayjs';
+
+describe('Timestamp', () => {
+  test('現在時刻が描画される', () => {
+    const { container } = render(<Timestamp />);
+    expect(container.textContent).toBe(
+      `内容は${dayjs().format('YYYY/M/D')}時点の情報です`,
+    );
+  });
+});

src/components/ui/Timestamp.tsx

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import dayjs from 'dayjs';
+
+export const Timestamp: FC = () => {
+  return <>内容は{dayjs().format('YYYY/M/D')}時点の情報です</>;
+};

src/css/custom.css

@@ -4,9 +4,20 @@
     --ifm-footer-background-color: transparent;
 }
 
+.capy--mobile-only {
+    display: none;
+}
+
+@media only screen and (max-width: 997px) {
+    .capy--mobile-only {
+        display: inherit;
+    }
+}
+
 @media print {
     * {
         color: black !important;
+        font-family: "Noto Sans JP", sans-serif !important;
     }
     .badge {
         border: grey solid thin !important;

src/pages/index.mdx

@@ -3,10 +3,10 @@ import { TechArticles } from '../components/TechArticles';
 import { Margin } from '../components/ui/Margin';
 import { Break } from '../components/ui/Break';
 import { ProfileImages } from '../components/ProfileImages';
+import { Timestamp } from '../components/ui/Timestamp';
 
 <head>
-  <title>yktakaha4.github.io</title>
-  <meta name="description" content="yktakaha4のポートフォリオサイト" />
+  <title>Portfolio | {contentTitle}</title>
 </head>
 
 # yktakaha4.github.io
@@ -27,6 +27,10 @@ import { ProfileImages } from '../components/ProfileImages';
 
 ## 職務経歴
 
+<Margin>
+  <Timestamp />
+</Margin>
+
 ### 正社員
 
 #### 2021/1 ~ 現在 : LAPRAS株式会社