Actually, It's 𝕏
An annoying bot that corrects people about the new name of the app previously known as Twitter. Follow it on 𝕏!
The Twitter → 𝕏 transition is pretty painful, and this bot is here to make things even worse!
Want to create your own bot? Check out https://www.val.town/v/andreterron.twitter
Use GPT to generate vals on your account!
Describe the val that you need, call this function, and you'll get a new val on your workspace generated by OpenAI's API!
First, ensure you have a Val Town API Token, then call @andreterron.createGeneratedVal({...})
like this example:
@andreterron.createGeneratedVal({
valTownKey: @me.secrets.vt_token,
description:
"A val that given a text file position in `{line, col}` and the text contents, returns the index position",
});
This will create a val in your workspace, and here's the one created by the example above: https://www.val.town/v/andreterron.getFileIndexPosition
Email notifications when your vals are referenced
Setup
- Create a Val Town API Token
- Add it to your secrets as
valtown
- Fork & Run this val
Login with Twitter 𝕏
Use this val to login with 𝕏 and save your token into a twitter_token
val
Usage
- Fork this val
- Change the 🔒 privacy to "Unlisted"
- Navigate to https://developer.twitter.com/en/portal/dashboard to create an OAuth app and save your client id and secret to your secrets page
- Navigate to https://{your_username}-twitter.web.val.run to authenticate with 𝕏
And then you'll have your tokens saved to a twitter_token
val!
Other Twitter 𝕏 helper vals
- Refresh your tokens: https://www.val.town/v/andreterron/refreshTwitterToken
- Fetch user by id: https://www.val.town/v/andreterron/fetchTwitterUser
- Search posts: https://www.val.town/v/andreterron/searchTweets
- Write an X post: https://www.val.town/v/andreterron/postTweet
An example of how to render an invoice using @vtdocs.generateInvoicePDF
Code on Val Town
Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it.
This uses github-fork-ribbon-css under the hood.
Usage
Here are 2 different ways to add the "Code on Val Town" ribbon:
1. Wrap your fetch handler (recommended)
Create valimport { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=45";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default modifyFetchHandler(async (req: Request): Promise<Response> => {
return html(`<h2>Hello world!</h2>`);
});
Example: @andreterron/openable_handler
2. Wrap your HTML string
Create valimport { modifyHtmlString } from "https://esm.town/v/andreterron/codeOnValTown?v=45";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default async (req: Request): Promise<Response> => {
return html(modifyHtmlString(`<h2>Hello world!</h2>`));
};
Example: @andreterron/openable_html
Other ways
We made sure this was very modular, so you can also add the ribbon using these methods:
- Get the element string directly: @andreterron/codeOnVT_ribbonElement
- Modify an HTTP Response: @andreterron/codeOnVT_modifyResponse
- Use
.pipeThrough
to append to a stream: @andreterron/InjectCodeOnValTownStream
Customization
Linking to the val
These functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the val
argument:
modifyFetchHandler(handler, {val: { handle: "andre", name: "foo" }})
modifyHtmlString("<html>...", {val: { handle: "andre", name: "foo" }})
Styling
You can set the style parameter to a css string to customize the ribbon. Check out github-fork-ribbon-css to learn more about how to style the element.
modifyFetchHandler(handler, {style: ".github-fork-ribbon:before { background-color: #333; }"})
modifyHtmlString("<html>...", {style: ".github-fork-ribbon:before { background-color: #333; }"})
Here's how you can hide the ribbon on small screens:
Create valmodifyFetchHandler(handler, {style: `@media (max-width: 768px) {
.github-fork-ribbon {
display: none !important;
}
}`})
To-dos
- Let users customize the ribbon. Some ideas are the text, color or placement.
"Code on Val Town" Ribbon HTML Element
Ribbon element used by @andreterron/codeOnValTown
Usage
ribbonElement({val: { handle: "andre", name: "foo" }})
- define which val to link to;ribbonElement()
- infer the val from the call stack.
Example: @andreterron/openable_element
Create valimport { ribbonElement } from "https://esm.town/v/andreterron/codeOnVT_ribbonElement?v=3";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default async (req: Request): Promise<Response> => {
return html(`
<h2>Hello world!</h2>
<style>* { font-family: sans-serif }</style>
${ribbonElement()}
`);
};
Inject HTML Element Stream
Use InjectHTMLElementStream
to inject an HTML element inside the <body />
or <html />
tag of a streamed HTML string.