我已经在这个网站上摆弄了一年的大部分时间,现在它相当稳定,我正在整理相当于公开README
(或自我注释)的内容。这篇文章就是那个文件。
目录
数据
包含该站点所有数据的数据库位于Supabase 。
Directus用于管理数据。 Directus使用其应用程序平台部署在DigitalOcean 。每当我更新包含该Dockerfile
的 GitHub 存储库中的版本(且仅包含该文件)时,都会部署更新。
# syntax=docker/dockerfile:1.4 FROM directus/directus:11.2.1 USER root RUN corepack enable \ && corepack prepare [email protected] --activate \ && chown node:node /directus EXPOSE 8055 USER node CMD : \ && node /directus/cli.js bootstrap \ && node /directus/cli.js start;
数据分为许多不同的类别。
11ty在构建时使用其Javascript SDK查询Supabase 。动态生成的页面在收到请求时会查询Supabase 。
全局变量
管理全局站点元数据 – 站点名称、描述、作者等。头像图像在此处上传,并使用bunny.net图像优化器进行转换,以适应整个网站的用例(网站图标、Apple 触摸图标等)。
页数
我网站上的独立页面的数据,例如uses
、 colophon
和search
——任何相对静态的数据。页面是使用本文档后面讨论的blocks
构建的。
导航
如果导航项映射到一个页面,则链接到该页面。否则,可以设置永久链接,选择菜单位置( primary
、 footer_icons
、 footer_text
)并安排排序顺序。菜单位置和排序位置决定了项目的呈现位置。
机器人
在robots.txt
中阻止的爬虫。每个条目都是在生成的文本文件中呈现的文本字段。
帖子
从 Markdown 呈现的博客文章。 title
、 date
、 tags
、 description
和content
是必需的。如果某个帖子被选为featured
帖子,则该帖子时间戳旁边将呈现一个星形图标。
块元素可以添加到帖子正文下方(稍后会详细介绍)。
保存时可以关联站点其他地方的媒体。
保存帖子时会生成一个slug
。一旦帖子被联合发布, Mastodon URL
就会被添加。
链接
链接项目需要title
、 author
、 description
、 date
和link
。
链接与authors
集合相关联。
作者
作者需要name
和url
。
作者应该有一个mastodon
URL。
作者可能有rss feed
、 json feed
和newsletter
。如果作者的blogroll
设置为 true,这些内容将呈现在我的blogroll
页面上。
标签
tags
用于搜索权重,如果标签项联合到支持它们的平台,则标签会转换为主题标签。
tags
由帖子、链接、书籍和电影共享并与之关联。
艺术家
当跟踪和显示我听的音乐时使用。 Name string
、 slug
、 art
、 country
和description
是必需的。
slug
格式必须为/music/artists/artist-country-name
。
art
应该是艺术家的方形照片。
country
应该是艺术家所在国家/地区的两位数字代码。支持多个国家,并应遵循NN and NN
的格式。
description
是一个降价字段,新条目的格式应为专辑标题和其他媒体斜体,与其他艺术家和流派的链接应该是相对的内部链接(如果存在 – 如果没有提到的艺术家的艺术家条目,则可以省略)。
艺术家应该选择一个流派并添加专辑。
艺术家可能添加了MusicBrainz ID、标记为最爱、设置了表情符号(或其组合)(这些表情符号将与主页和音乐页面上当前播放的曲目一起呈现(如果已设置),否则将显示艺术家流派的表情符号),标记为启发了纹身或标记为暂定(如果在为没有记录的艺术家录制听过的曲目时添加)。
艺术家可能有相关的媒体。
专辑
必须与艺术家相关。 name
、 key
、 art
和artist name
为必填项。
key
格式必须为artist-name-album-name
。
art
应该是方形的。
专辑可能会添加MusicBrainz ID、设置发行年份、标记为暂定(如果在为没有记录的专辑录制已听曲目时添加)、设置发行日期和发行链接(如果设置了这些并且日期在将来,该专辑将被添加到音乐页面上的即将推出的专辑部分 – 设置了这些字段的所有专辑都将添加到专辑发布日历订阅中)。
如果为专辑添加了tentative
记录(在发生key
不匹配的情况下), old key
可能会添加到metadata updates
部分中的新记录中。流程会将所有数据从旧记录复制到新记录,删除暂定状态,更新所有收听记录的密钥,更新总播放次数并删除旧记录。
音乐会
音乐会必须与艺术家记录相关联或具有name string
集。还需要date
。
音乐会应该有一个相关的场地。
音乐会可能有音符。
场地
name
、 latitude
和longitude
是必需的。所有这些字段都配置为查询OpenStreetMap和自动完成结果。
场地可能有一个边界框集。
聆听
所有监听条目都是只读的,新条目由 Cloudflare Worker 插入。
收听将包含album name
、 artist name
、 listened at
、 track name
和album key
集。
流派
name
和description
为必填项。
name
应该是小写的。
description
是 Markdown 的,应该格式化。
artists
可以在此处或从artist
记录中关联。
如果description
源自Wikipedia,则必须设置wiki link
。
流派可能有相关的媒体。
电影
title
、 tags
、 art
、 backdrop
、 description
和tmdb id
是必需的。
来自TMDB API 的title
和description
自动完成。
电影应该有year
。
电影可以选择star rating
、添加review
、计算播放plays
、标记为favorite
、标记为collected
或标记为启发tattoo
。
电影可能有相关媒体。
保存记录后就会添加电影片段。
演出
title
、 tags
、 art
、 backdrop
和tmdb id
是必需的。
来自TMDB API 的title
和description
自动完成。
演出应该有year
。
节目可能会添加review
、计算plays
数、标记为favorite
、标记为collected
或标记为激发tattoo
灵感。
节目可能有相关媒体。
保存记录后就会添加显示片段。
图书
title
、 art
、 read status
、 tags
、 isbn
和description
是必需的。
书籍应该有作者集。
书籍可能会记录progress
(如果read status
为started
或finished
)、添加review
、选择star rating
、标记为favorite
或标记为激发tattoo
灵感。
书籍可能有相关的媒体。
保存记录后就会添加书籍片段。
联系方式
name
、 email
和message
是只读的。
新记录是通过我的联系页面上提交给 Cloudflare 工作人员的表单添加的。该消息的副本也通过电子邮件发送给我。
当我replied
时,联系人应该设置为replied
。
被阻止的域名
domain name
为必填项。
与domain name
匹配的提交将被阻止。
积木
可以添加到帖子或用于构建页面。
markdown
允许设置 markdown 文本。
youtube player
需要name
和url
才能呈现 YouTube 视频。
banners
支持rss
、 github
和npm
横幅。这些需要根据类型组合name
、 title
、 text
、 url
和command
。
hero
渲染英雄图像横幅。需要alt text
和image
。
书签
Directus导航中有多个已添加书签的过滤器。这些包括:
- 描述未格式化的艺术家
- 暂定专辑待修复
- 即将推出的专辑
- 值得观看的电影
- 值得观看的节目
- 我正在积极阅读的书籍
流量
我使用流程来自动更新或插入记录。
- 正确的暂定专辑:这采用输入的“旧”专辑
key
,查找具有该密钥的记录,将所有数据从该记录移动到新记录,更新播放总数和收听记录album key
,将新记录标记为不存在暂定并删除旧的。 - 部署站点:触发我在Cloudflare站点的11ty渲染代码的新部署。从侧边栏导航手动触发。
- Slugify 流:书籍、流派、电影、帖子和节目的流。每个都遵循一致的路由模式(例如
/watching/movies/:id
)为该部分构建一个 slug 并更新记录。 - 更新监听:对 Supabase 的 RPC 调用,运行数据库函数,更新监听表中所有艺术家、流派和专辑的
total_plays
值。从侧边栏导航手动触发。
图片
所有集合中的所有图像均通过Directus UI 上传到 Backblaze B2 存储桶。然后对图像进行优化并通过bunny.net提供服务。
图像根据与其关联的部分/集合组织到文件夹中。 art
和backdrop
字段将适当的文件夹设置为默认值。
电子邮件
当我的联系表单成功提交或添加暂定artist
或album
记录时,将发送交易电子邮件。这些电子邮件是使用 SMTP 从通过forwardemail.net路由的子域发送的。 Directus还配置了对此 SMTP 帐户的访问权限。
我的电子邮件是通过Fastmail路由的。
渲染
该网站的所有核心内容都是由11ty以某种方式生成的。
我有一个base
布局,所有页面都扩展了它。核心页面( index
、 posts
、 search
和根媒体页面 – music
、 books
等)在构建时生成。各个媒体页面的低流量页面根据请求动态呈现。
搜索
搜索向 Cloudflare Worker 发出网络请求,Cloudflare Worker 通过处理视图的分页和纯文本搜索的数据库函数将查询路由到Supabase上的optimized_search_index
视图。
客户端实现依赖于小型搜索库。
网站地图
站点地图由查询optimized_sitemap
视图的 Cloudflare 工作线程呈现。该视图从上面讨论的各种数据段中组装完整的 URL。
饲料
我的网站上可用的每个提要都是从每个集合的优化视图中包含的提要对象生成的。 links
,例如:
json_build_object('title', CONCAT(l.title, ' via ', a.name), 'url', l.link, 'description', l.description, 'date', l.date) AS feed
这允许每个提要由单个模板生成,无需11ty中的额外逻辑。
同样的方法也适用于网格中显示的媒体( music
、 movies
、 shows
和books
)。网格对象包含在网格模板可以呈现的每个优化视图中。
使用 Cloudflare Worker 将 Feed 联合到 Mastodon。生成专用的联合提要供工作人员读取,该联合提要是通过查询optimized_syndication
视图构建的。
音乐
音乐数据是使用Plex Webhooks 记录的,该 Webhook 将数据发送到 Cloudflare Worker。我在这里有一篇关于该实现的详细帖子。
我相信这涵盖了目前的一切。数据在Directus中管理,写入Supabase 。 Plex 写入监听Supabase 。 11ty和 Cloudflare 查询Supabase以获取要渲染的数据。 [1]
-
是的,我把每一个提到的事情都联系起来了。 ↩︎
原文: https://coryd.dev/posts/2024/heres-how-this-is-all-put-together