ð; deno简历网站建造者使用尾风
#html #css #tailwindcss #deno

我试图与Deno创建简历网站。我的要求如下：

  • 使用deno
    • 将简历网页作为路线提供
  • 生成没有外部CSS或JS依赖项的静态HTML文档
  • 自定义print css类，以便人们轻松打印页面
  • 导出在编程上创建网站的PDF

这个项目实现了所有这些目标ð。

怎么运行的

简历数据是JSON对象。这是type definition。这是一个example of the data。这用作主要道具传递到Resume页组件中。

screenshot

我已经在可以使用该项目的几种方式中提供了一些细节，我将尝试在此处记录一些用法。

程序用法

如果您想运行自己的简历页面，请在DeNo部署上说这是一个可以让您开始的单文件。

import { serve } from "https://deno.land/std@0.188.0/http/server.ts"
import { router } from "https://crux.land/router@0.0.12"
import resume from "https://deno.land/x/resume/mod.ts"
import data from "https://deno.land/x/resume/example/thomas-anderson.json" assert { type: "json" }
import theme from "https://deno.land/x/resume/theme.json" assert { type: "json" }

await serve(router({
  "/": resume({
    theme,
    ...data,
  }),
}))

主题

主题是一个JSON对象，其中键是CSS选择器，值是尾风类。 twind不支持print()，我添加了扩展该关键字的功能。 print()括号内的任何内容都将得到print:前缀。我还在功能中添加了用于使用语法[width=20]设置标签属性的功能。 

{
  "body": "print(text-xs) mx-auto max-w-screen-lg py-10 px-10",
  "a": "font-medium text-blue-600 dark:text-blue-500 hover:underline",
  ".topSection": "mb-3 relative",
  ".name": "print(text-2xl) text-4xl",
  ".downloadLink": "print(hidden) absolute pt-5 top-0 right-0",
  ".job": "flex mb-3",
  ".jobImage": "flex-none pr-3 pt-1",
  ".jobImage img": "rounded-full",
  ".job h2": "print(text-lg) text-xl",
  ".job h3": "print(text-base) inline mr-3 text-lg",
  ".jobSummary": "mb-2",
  ".label": "print(font-normal) text-xs font-semibold inline-block px-1 lowercase rounded text-sky-600 bg-sky-200 last:mr-0 mr-1"
}

CLI用法

CLI分解为3个不同的脚本。

  • ./pdf/cmd.ts
  • ./serve/cmd.ts
  • ./render/cmd.ts

这种隔离的依赖关系，这意味着如果您只想说render，则不需要安装pdf依赖项（Puppeteer）。所有这些文件都动态导入到单个./cmd.ts文件中，该文件将用于本文档，但是您可以直接调用这些文件中的任何一个用于单个用法。

提供JSON文件 

deno run ./cmd.ts --serve --json ./example/thomas-anderson.json
# or with permissions
deno run --allow-read --allow-net ./cmd.ts --serve --json ./example/thomas-anderson.json

生成PDF 

deno run ./cmd.ts --pdf ./example/output/resume.pdf --json ./example/thomas-anderson.json
# or with permissions
deno run --allow-read --allow-env --allow-write --allow-run --allow-net ./cmd.ts --pdf ./example/output/resume.pdf --json ./example/thomas-anderson.json

生成静态HTML文件 

deno run ./cmd.ts --html ./example/output/index.html --json ./example/thomas-anderson.json
# or with permissions
deno run --allow-read --allow-write ./cmd.ts --html ./example/output/index.html --json ./example/thomas-anderson.json