feat: print css. devcontainer fixes. adding renderable.vue to clean u…

…p generic rendering

.devcontainer/devcontainer.json

@@ -1,31 +1,40 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
-	"name": "rfced-www",
-	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
+  "name": "rfced-www",
+  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
 
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	"features": {
-		"ghcr.io/devcontainers/features/docker-in-docker:1": {}
-	},
+  // Features to add to the dev container. More info: https://containers.dev/features.
+  "features": {
+    "ghcr.io/devcontainers/features/docker-in-docker:1": {}
+  },
 
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	"forwardPorts": [3000],
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [3000, 4000],
 
-	"portsAttributes": {
-        "3000": {
-            "label": "Nuxt",
-            "onAutoForward": "silent"
-        }
+  "portsAttributes": {
+    "3000": {
+      "label": "Nuxt",
+      "onAutoForward": "silent"
     },
+    "4000": {
+      "label": "Nuxt (dev server websockets)",
+      "onAutoForward": "silent"
+    }
+  },
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "bash .devcontainer/post-create.sh"
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "bash .devcontainer/post-create.sh",
+  "customizations": {
+    "vscode": {
+      "extensions": ["Vue.volar", "esbenp.prettier-vscode"]
+    }
+  }
 
-	// Configure tool-specific properties.
-	// "customizations": {},
+  // Configure tool-specific properties.
+  // "customizations": {},
 
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	// "remoteUser": "root"
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  // "remoteUser": "root"
 }

client/assets/css/tailwind.css

@@ -31,3 +31,11 @@ html.dark {
   background: theme('colors.black');
   color: theme('colors.white');
 }
+
+.print-with-background {
+  /*
+  To be used sparingly.
+  See also https://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color
+  */
+  -webkit-print-color-adjust: exact !important;
+}

client/components/Card.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="bg-white dark:bg-black relative dark:border-2 pl-5 pr-7 py-4 rounded"
+    class="bg-white dark:bg-black relative dark:border-2 pl-5 pr-7 py-4 rounded print:border-2 print:border-black"
   >
     <Heading :level="props.headingLevel">
       <a
         :href="props.href"
         :class="[
-          'block text-[22px] font-bold text-blue-300 dark:text-blue-100 no-underline focus:underline hover:underline group',
+          'block text-[22px] font-bold text-blue-300 dark:text-blue-100 print:text-black no-underline focus:underline hover:underline group',
           props.hasCoverLink &&
             `before:absolute before:content-[\'\'] before:inset-0 before:transition-all dark:before:shadow-slate-700 hover:before:shadow-xl focus:before:shadow-xl dark:hover:before:shadow-[0_0px_40px_20px_#00101c] ${
               /* this is only a template string to allow inline doc:
@@ -25,7 +25,7 @@
           width="14"
           height="21"
           :class="[
-            'absolute right-4 text-gray-200 group-hover:text-blue-400 group-focus:text-blue-400 dark:group-hover:text-blue-100 dark:group-focus:text-blue-100 transition-all group-hover:right-3 group-focus:right-3 -rotate-90',
+            'absolute right-4 text-gray-200 group-hover:text-blue-400 group-focus:text-blue-400 dark:group-hover:text-blue-100 dark:group-focus:text-blue-100 transition-all group-hover:right-3 group-focus:right-3 -rotate-90 print:hidden',
             props.chevronPosition === 'center' ? 'bottom-[50%]' : 'bottom-4'
           ]"
         />

client/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="bg-blue-900 text-white dark:bg-blue-950 relative">
+  <footer class="bg-blue-900 text-white dark:bg-blue-950 relative print:hidden">
     <div class="container mx-auto flex flex-col md:flex-row py-4 lg:py-8 gap-4">
       <div class="flex-1 flex flex-col gap-5 pr-4">
         <p class="text-base">

client/components/Graphics/Diamond.vue

@@ -1,5 +1,5 @@
 <template>
   <span
-    class="inline-block w-[5px] h-[5px] mx-2 rotate-45 bg-gray-600 dark:bg-white opacity-50 align-middle"
+    class="inline-block w-[5px] h-[5px] mx-2 rotate-45 bg-gray-600 dark:bg-white opacity-50 align-middle print:bg-black print:opacity-100 print-with-background"
   />
 </template>

client/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="bg-blue-900 text-white dark:bg-blue-950 relative">
+  <header class="bg-blue-900 text-white dark:bg-blue-950 relative print:hidden">
     <HeaderSkipToContent />
     <nav class="container mx-auto flex justify-between py-4 px-0 w-full">
       <GraphicsHeaderLogos />

client/components/Heading.vue

@@ -5,7 +5,7 @@
   >
     <GraphicsIETFMotif
       v-if="hasIcon"
-      class="absolute ml-[-1.3em] -mt-4"
+      class="absolute ml-[-1.3em] -mt-4 print:hidden"
       width="75"
       height="55"
       :opacity="0.05"

client/components/RFCCard.vue

@@ -15,20 +15,20 @@
     <p class="text-base mt-2 text-blue-900 dark:text-white">
       <slot />
     </p>
-    <div class="my-4">
+    <div class="my-4 print:m-0">
       <Tag :text="[props.tag.type, formatDate(props.tag.date)]" />
     </div>
     <ul
       v-if="props.body"
-      class="hidden lg:block text-base text-blue-900 dark:text-white"
+      class="hidden lg:block print:block text-base text-blue-900 dark:text-white"
     >
       <li v-for="(part, index) in props.body" :key="index" class="inline">
         <GraphicsDiamond v-if="index > 0" />{{ part }}
       </li>
     </ul>
     <ul
       v-if="props.footer"
-      class="hidden lg:block text-base text-gray-800 mt-1 dark:text-white"
+      class="hidden lg:block print:block text-base text-gray-800 mt-1 dark:text-white"
     >
       <li v-for="(part, index) in props.footer" :key="index" class="inline">
         <GraphicsDiamond v-if="index > 0" />{{ part }}

client/components/Renderable.vue

@@ -0,0 +1,22 @@
+<template>
+  <template v-if="isVNode(val)">
+    <component :is="val" />
+  </template>
+  <template v-else>
+    {{ val }}
+  </template>
+</template>
+
+<script setup>
+import { isVNode } from 'vue'
+
+defineProps({
+  /**
+   * Definitions of columns and their labels
+   **/
+  val: {
+    type: [String, Object],
+    required: true
+  }
+})
+</script>

client/components/Tag.vue

@@ -1,48 +1,33 @@
 <template>
   <div
     :class="[
-      'pointer-events-none inline-flex items-center bg-blue-400 dark:bg-blue-800 text-white text-base uppercase font-semibold',
+      'pointer-events-none inline-flex items-center bg-blue-400 dark:bg-blue-800 print:bg-white text-white print:text-black text-base print:text-sm uppercase font-semibold',
       props.class,
       {
-        '[clip-path:polygon(0%_50%,_6%_0%,_96%_0%,100%_50%,96%_100%,6%_100%)]':
+        'screen:[clip-path:polygon(0%_50%,_6%_0%,_96%_0%,100%_50%,96%_100%,6%_100%)]':
           totalTextLength < 5,
-        '[clip-path:polygon(0%_50%,_10%_0%,_90%_0%,100%_50%,90%_100%,10%_100%)]':
+        'screen:[clip-path:polygon(0%_50%,_10%_0%,_90%_0%,100%_50%,90%_100%,10%_100%)]':
           totalTextLength >= 5 && totalTextLength <= 10,
-        '[clip-path:polygon(0%_50%,_7%_0%,_93%_0%,100%_50%,93%_100%,7%_100%)]':
+        'screen:[clip-path:polygon(0%_50%,_7%_0%,_93%_0%,100%_50%,93%_100%,7%_100%)]':
           totalTextLength > 10 && totalTextLength <= 15,
-        '[clip-path:polygon(0%_50%,_5%_0%,_95%_0%,100%_50%,95%_100%,5%_100%)]':
+        'screen:[clip-path:polygon(0%_50%,_5%_0%,_95%_0%,100%_50%,95%_100%,5%_100%)]':
           totalTextLength > 15
       }
     ]"
   >
     <template v-if="props.text.length === 1">
-      <span class="px-3 py-1 whitespace-nowrap">
-        <template v-if="typeof props.text[0] === 'string'">
-          {{ props.text[0] }}
-        </template>
-        <template v-else>
-          <component :is="props.text[0]" />
-        </template>
+      <span class="px-3 py-1 print:px-0 whitespace-nowrap">
+        <Renderable :val="props.text[0]" />
       </span>
     </template>
     <template v-else-if="props.text.length === 2">
-      <span class="pl-5 pr-2 py-2 whitespace-nowrap">
-        <template v-if="typeof props.text[0] === 'string'">
-          {{ props.text[0] }}
-        </template>
-        <template v-else>
-          <component :is="props.text[0]" />
-        </template>
+      <span class="pl-5 pr-2 py-2 print:p-0 whitespace-nowrap">
+        <Renderable :val="props.text[0]" />
       </span>
       <span
-        class="bg-yellow-200 dark:bg-yellow-700 dark:text-white text-black pl-2 pr-5 py-2"
+        class="bg-yellow-200 dark:bg-yellow-700 dark:text-white text-black print:text-black pl-2 pr-5 py-2 print:py-0"
       >
-        <template v-if="typeof props.text[1] === 'string'">
-          {{ props.text[1] }}
-        </template>
-        <template v-else>
-          <component :is="props.text[1]" />
-        </template>
+        <Renderable :val="props.text[1]" />
       </span>
     </template>
     <template v-else>