attio-slack-summaries
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data ā all from the browser, and deployed in milliseconds.
I have tried to organize the codebase for easy customization.
- User-facing files (
formatters.ts
,slack.ts
) - Internal logic is isolated in
core/
directory - Type safety ensures custom formatters match Attio attribute types
The sections below cover the customization options.
The formatters.ts
file controls how Attio attribute values appear in Slack messages. Formatters are functions that take an object of a type in AttioAttributeValue
and return a string
. Type-safety ensures that custom formatters match Attio attribute types. The formatter file is organized into sections for easy customization:
Text & Selections:
const textFormatters = {
text: (av: AttioTextValue) => av.value,
status: (av: AttioStatusValue) => av.status.title,
select: (av: AttioSelectValue) => av.option.title,
checkbox: (av: AttioCheckboxValue) => av.value.toString(),
};
Numbers & Currency:
const numberFormatters = {
currency: (av: AttioCurrencyValue) => {
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: av.currency_code,
}).format(Number(av.currency_value));
},
number: (av: AttioNumberValue) => av.value.toString(),
};
Dates, People, Links, etc. - Each category has its own section with examples showing input / output.
The slack.ts
file controls Slack message appearance. See the file for more examples and details.
Message Settings:
const SLACK_CONFIG = {
maxCommentLength: 150, // Comment truncation
groupByEntry: true, // Group changes by entry (as in the image above)
allowEmojis: true, // Enable emoji in headers
};
Message Templates:
const MESSAGE_TEMPLATES = {
entryCreated: (actor: string, name: string) => `${actor} added ${name}`,
entryDeleted: (actor: string, name: string) => `${actor} removed ${name}`,
fieldChanged: (field: string, oldValue: string, newValue: string) =>
`*${field}*: ${oldValue} ā ${newValue}`,
// ... more templates
};
Link Formats:
const LINK_FORMATS = {
entry: (
workspaceSlug: string,
objectSlug: string,
recordId: string,
name: string
) =>
`<https://app.attio.com/${workspaceSlug}/${objectSlug}/${recordId}/overview|${name}>`,
// ... more link formats
};