From 9743619de42e47ac302f66b192df2ea0eee38dce Mon Sep 17 00:00:00 2001 From: Matthew Holloway Date: Fri, 22 Nov 2024 11:54:14 +1300 Subject: [PATCH] feat: print css. devcontainer fixes. adding renderable.vue to clean up generic rendering --- .devcontainer/devcontainer.json | 49 +- client/assets/css/tailwind.css | 8 + client/components/Card.vue | 6 +- client/components/Footer.vue | 2 +- client/components/Graphics/Diamond.vue | 2 +- client/components/Header.vue | 2 +- client/components/Heading.vue | 2 +- client/components/RFCCard.vue | 6 +- client/components/Renderable.vue | 22 + client/components/Tag.vue | 37 +- client/package-lock.json | 11006 +++++++++++++---------- client/tailwind.config.js | 4 + 12 files changed, 6357 insertions(+), 4789 deletions(-) create mode 100644 client/components/Renderable.vue diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 8ff608e..d23a91b 100644 --- a/.devcontainer/devcontainer.json +++ b/.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" } diff --git a/client/assets/css/tailwind.css b/client/assets/css/tailwind.css index 0495c2e..82f80ed 100644 --- a/client/assets/css/tailwind.css +++ b/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; +} diff --git a/client/components/Card.vue b/client/components/Card.vue index 755175f..2e53b15 100644 --- a/client/components/Card.vue +++ b/client/components/Card.vue @@ -1,12 +1,12 @@