Extract image generation (#16)

* Init dog package

* Move image generation logic

* Remove image generation from d0xigen

* Somehow generate images using backroad

* Make it run

* CLI generation

* Run web from CLI

* Rename jpeg to jpg

* Update plugin recommendations

* Update netlify configuration

* Create utils folder

* Prepare pdf CDN script

* Lintfix

* Fix resume paths

* Fix resume paths

* lintfix

* Uninstall node-html-parser

* Resume -> Resumé

* Generate PDF

* CDN build workflow

* Redirect PDF link to CDN

* Fix resume print view

* Change CDN build trigger

* Prepare dog for publishing

.changeset/silly-hounds-sit.md

@@ -0,0 +1,5 @@
+---
+'@d0rich/dog': minor
+---
+
+Implement OG images generator CLI and web UI

.changeset/tasty-spies-shop.md

@@ -0,0 +1,5 @@
+---
+'d0xigen': minor
+---
+
+Remove image generations. Now it will be available via @d0rich/dog

.github/workflows/cdn.build.yaml

@@ -0,0 +1,28 @@
+name: Build CDN
+on:
+  schedule:
+    # Run every day
+    - cron: '0 0 * * *'
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+      - name: Install dependencies
+        working-directory: ./cdn
+        run: npm ci
+      - name: Build
+        working-directory: ./cdn
+        run: npm run build
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./cdn/dist
+          publish_branch: cdn

.vscode/extensions.json

@@ -1,6 +1,5 @@
 {
   "recommendations": [
-    "vue.vscode-typescript-vue-plugin",
     "vue.volar",
     "nuxt.mdc",
     "bradlc.vscode-tailwindcss",

apps/d0rich.me/components/layouts/DHeader.vue

@@ -15,7 +15,7 @@
           <DBtn to="/"> Dorich </DBtn>
           <DBtn to="/projects/"> Projects </DBtn>
           <DBtn to="/blog/"> Blog </DBtn>
-          <DBtn to="/resume/"> Resume </DBtn>
+          <DBtn to="/resume/"> Resumé </DBtn>
         </div>
       </DShape>
     </header>

apps/d0rich.me/components/resume/CertificatesCard.vue

@@ -7,9 +7,13 @@ defineProps<{
 </script>
 
 <template>
-  <DCard dense class="break-inside-avoid">
+  <DCard dense class="">
     <ul class="resume-sertificates-card__list">
-      <li v-for="cert in cerificates" :key="cert._id">
+      <li
+        v-for="cert in cerificates"
+        :key="cert._id"
+        class="break-inside-avoid"
+      >
         {{ cert.title }}
         (<NuxtLink
           class="resume-sertificates-card__place"

apps/d0rich.me/components/resume/ProjectNote.vue

@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <DCard class="break-inside-avoid">
+  <DCard class="">
     <DCardTitle>
       {{ project.title }}
       <template #extra>

apps/d0rich.me/components/resume/ProjectsCard.vue

@@ -7,9 +7,13 @@ defineProps<{
 </script>
 
 <template>
-  <DCard dense class="break-inside-avoid">
+  <DCard dense>
     <ul class="resume-projects-card__list">
-      <li v-for="project in projects" :key="project.url">
+      <li
+        v-for="project in projects"
+        :key="project.url"
+        class="break-inside-avoid"
+      >
         <NuxtLink
           class="resume-projects-card__place"
           :href="addTrailingSlash(project.url)"

apps/d0rich.me/components/resume/TimeNote.vue

@@ -18,21 +18,23 @@ defineProps<{
 </script>
 
 <template>
-  <DCard class="break-inside-avoid">
+  <DCard class="">
     <DCardTitle>
       {{ timenote.title }}
       <template #extra>
         <Component
           :is="timenote.place.link ? 'a' : 'span'"
           :href="timenote.place.link"
           target="_blank"
-          class="timenote__place-link"
+          class="timenote__place-link print:ml-2"
         >
           {{ timenote.place.title }}
         </Component>
       </template>
     </DCardTitle>
-    <p class="text-blue-600 dark:text-blue-300 print:text-sm">
+    <p
+      class="text-blue-600 dark:text-blue-300 print:text-sm break-inside-avoid"
+    >
       <time :datetime="timenote.daterange.start">
         {{ dateToMonthYear(timenote.daterange.start) }}
       </time>

apps/d0rich.me/netlify.toml

@@ -1,2 +1,5 @@
 [build]
+  base = "/"
+  publish = "apps/d0rich.me/dist"
   ignore = "node apps/d0rich.me/ignore-build.mjs"
+  command = "npm run generate --workspace=d0rich.me"

apps/d0rich.me/nuxt.config.ts

@@ -24,13 +24,7 @@ export default defineNuxtConfig({
   modules: ['@nuxthq/studio', '@nuxt/content'],
   nitro: {
     prerender: {
-      routes: [
-        '/',
-        '/sitemap.xml',
-        '/api/resume/Nikolai_Dorofeev-Fullstack_Developer.pdf',
-        '/api/resume/Nikolai_Dorofeev-Backend_Developer.pdf',
-        '/api/resume/Nikolai_Dorofeev-Frontend_Developer.pdf'
-      ]
+      routes: ['/', '/sitemap.xml', '/api/resume/list.json']
     }
   },
   content: {

apps/d0rich.me/package.json

@@ -20,9 +20,7 @@
     "dateformat": "^5.0.3",
     "gsap": "^3.12.5",
     "mobile-detect": "^1.4.5",
-    "node-html-parser": "^6.1.13",
     "octokit": "^4.0.2",
-    "puppeteer": "^21.11.0",
     "rehype-external-links": "^3.0.0",
     "remark-simple-plantuml": "npm:@akebifiky/remark-simple-plantuml@^1.0.2",
     "sitemap": "^8.0.0",

apps/d0rich.me/pages/resume/[type].vue

@@ -16,10 +16,8 @@ const { data, error } = useFetch<ResumeData>('/api/resume/data', {
 })
 
 const printResumeLink = computed(() => {
-  return `/api/resume/Nikolai_Dorofeev-${data.value?.lead.title?.replaceAll(
-    ' ',
-    '_'
-  )}.pdf`
+  const specialization = data.value?.lead.title?.replaceAll(' ', '_')
+  return `https://cdn.d0rich.me/resume/Nikolai_Dorofeev-${specialization}.pdf`
 })
 
 const { data: resumeList } = useAsyncData(
@@ -42,7 +40,7 @@ const { data: resumeList } = useAsyncData(
   <div>
     <AsyncSafeSeoWithOg
       v-if="data"
-      :title="`Resume: ${data.lead.title}`"
+      :title="`Resumé: ${data.lead.title}`"
       :description="data.lead.description"
     />
     <DevOnly>
@@ -110,15 +108,15 @@ const { data: resumeList } = useAsyncData(
         }"
       >
         <div class="print:order-2">
-          <section id="languages" class="break-inside-avoid">
+          <section id="languages" class="">
             <h2 class="resume-page__section-title">Languages</h2>
             <ContentRenderer
               :value="data.languages"
               tag="section"
               class="resume-page__prose-content"
             />
           </section>
-          <section id="skills" class="break-inside-avoid">
+          <section id="skills" class="">
             <h2 class="resume-page__section-title">Skills</h2>
             <TransitionGroup
               name="skills-list"
@@ -133,12 +131,13 @@ const { data: resumeList } = useAsyncData(
                 v-for="skillset in data.skills"
                 :key="skillset._id"
                 :value="skillset"
+                class="break-inside-avoid"
               />
             </TransitionGroup>
           </section>
         </div>
         <div>
-          <section id="work-experience" class="break-inside-avoid">
+          <section id="work-experience" class="">
             <h2 class="resume-page__section-title">Work Experience</h2>
             <ResumeTimeNote
               v-for="workPlace in data.work"
@@ -148,16 +147,16 @@ const { data: resumeList } = useAsyncData(
             />
           </section>
           <div class="grid md:grid-cols-2 gap-x-20 print:block">
-            <section id="projects" class="break-inside-avoid">
+            <section id="projects" class="">
               <h2 class="resume-page__section-title">Projects</h2>
               <ResumeProjectsCard :projects="data.projects" />
             </section>
-            <section id="certificates" class="break-inside-avoid">
+            <section id="certificates" class="">
               <h2 class="resume-page__section-title">Certificates</h2>
               <ResumeCertificatesCard :cerificates="data.certificates" />
             </section>
           </div>
-          <section id="education" class="break-inside-avoid">
+          <section id="education" class="">
             <h2 class="resume-page__section-title">Education</h2>
             <ResumeTimeNote
               v-for="eduPlace in data.education"

apps/d0rich.me/server/routes/api/resume/list.json.ts

@@ -0,0 +1,12 @@
+import { serverQueryContent } from '#content/server'
+
+// Add required routes to prerender in nuxt.config.ts
+export default defineEventHandler(async (event) => {
+  const resumeList = await serverQueryContent(event, '/resume/leads')
+    .only(['_path' as const, 'title' as const])
+    .find()
+  return resumeList.map((resume) => ({
+    title: resume.title,
+    path: resume._path?.replace('/resume/leads', '/resume')
+  }))
+})

apps/d0xigen.d0rich.me/app.config.ts

@@ -1,7 +1,7 @@
 export default defineAppConfig({
   d0xigen: {
     title: 'd0xigen',
-    description: '🌬🕮 Docs to breath life into your project',
+    description: '🌬📓 Docs to breath life into your project',
     url: 'https://d0xigen.d0rich.me',
     author: 'Nikolay Dorofeev',
     social: {

apps/d0xigen.d0rich.me/netlify.toml

@@ -1,2 +1,5 @@
 [build]
+  base = "/"
+  publish = "apps/d0xigen.d0rich.me/dist"
   ignore = "node apps/d0xigen.d0rich.me/ignore-build.mjs"
+  command = "npm run generate --workspace=d0xigen.d0rich.me"

apps/design.d0rich.me/netlify.toml

@@ -1,2 +1,5 @@
 [build]
+  base = "/"
+  publish = "apps/design.d0rich.me/dist"
   ignore = "node apps/design.d0rich.me/ignore-build.mjs"
+  command = "npm run generate --workspace=design.d0rich.me"