Welcome to Astro
9 |
10 | To get started, open the directory src/pages
in your project.
12 | Code Challenge: Tweak the "Welcome to Astro" message above.
13 |
-
15 |
├── .eslintignore ├── .eslintrc.cjs ├── .github └── workflows │ └── release.yml ├── .gitignore ├── .husky ├── config-msg └── pre-commit ├── .prettierignore ├── .prettierrc ├── .releaserc ├── README.md ├── demo ├── .gitignore ├── .vscode │ ├── extensions.json │ └── launch.json ├── README.md ├── astro.config.mjs ├── package-lock.json ├── package.json ├── public │ └── favicon.svg ├── sandbox.config.json ├── src │ ├── components │ │ └── Card.astro │ ├── env.d.ts │ ├── layouts │ │ └── Layout.astro │ └── pages │ │ └── index.astro └── tsconfig.json ├── index.ts ├── package-lock.json ├── package.json ├── src ├── integration.ts ├── routes │ └── webfinger.ts ├── types │ └── module.d.ts ├── utils │ └── simpleWebfinger.ts └── vite-webfinger-plugin.ts └── tsconfig.json /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .github -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | 'plugin:@typescript-eslint/recommended', 4 | 'plugin:astro/recommended', 5 | 'plugin:astro/jsx-a11y-recommended', 6 | 'prettier', 7 | ], 8 | overrides: [ 9 | { 10 | files: ['*.astro'], 11 | parser: 'astro-eslint-parser', 12 | parserOptions: { 13 | parser: '@typescript-eslint/parser', 14 | extraFileExtensions: ['.astro'], 15 | }, 16 | rules: {}, 17 | }, 18 | { 19 | files: ['*.ts'], 20 | parser: '@typescript-eslint/parser', 21 | parserOptions: { 22 | ecmaVersion: 'latest', 23 | sourceType: 'module', 24 | rules: { 25 | indent: ['error', 2], 26 | 'linebreak-style': ['error', 'unix'], 27 | quotes: ['error', 'single'], 28 | semi: ['error', 'never'], 29 | }, 30 | }, 31 | }, 32 | ], 33 | } 34 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - next 8 | - beta 9 | - alpha 10 | 11 | jobs: 12 | release: 13 | runs-on: ubuntu-latest 14 | name: Release 15 | steps: 16 | - name: Checkout 17 | uses: actions/checkout@v3 18 | - name: Setup Node 19 | uses: actions/setup-node@v3 20 | with: 21 | node-version: 16 22 | - name: Install dependencies 23 | run: npm install 24 | - name: Lint 25 | run: npm run lint 26 | - name: Semantic Release 27 | uses: cycjimmy/semantic-release-action@v3 28 | env: 29 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 30 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | 4 | # dependencies 5 | node_modules/ 6 | 7 | # logs 8 | npm-debug.log* 9 | yarn-debug.log* 10 | yarn-error.log* 11 | pnpm-debug.log* 12 | 13 | 14 | # environment variables 15 | .env 16 | .env.production 17 | 18 | # macOS-specific files 19 | .DS_Store 20 | 21 | # Local Netlify folder 22 | .netlify 23 | -------------------------------------------------------------------------------- /.husky/config-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx commitlint --edit $1 -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npm run lint -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .github -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "arrowParens": "avoid" 5 | } 6 | -------------------------------------------------------------------------------- /.releaserc: -------------------------------------------------------------------------------- 1 | { 2 | "branches": ["main", "next", "beta", "alpha"] 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `astro-webfinger` 2 | 3 | This [Astro integration](https://docs.astro.build/en/guides/integrations-guide/) allows any Mastodon instance to discover your Mastodon profile directly from your own domain. 4 | 5 | **Try it out** In your favorite Mastodon instance, search for `@toot@tonysull.co` and you'll find my Mastodon profile. 6 | 7 | ## Why? 8 | 9 | Hosting a live Mastodon site on your own domain is no easy task. If you aren't ready to take that leap you can use your own domain as an alias to point to your Mastodon profile. 10 | 11 | This uses the [WebFinger](https://webfinger.net/) protocol to attach information to an email, in this case to point an email address on your own domain to your Mastodon profile. 12 | 13 | For example, I have a Mastodon profile at [@tonysull@indieweb.social](https://indieweb.social/@tonysull). The `astro-webfinger` integration is added to my Astro site at [https://tonysull.co](https://tonysull.co), allowing any Mastodon instance to discover my account by searching for `toot@tonysull.co`. 14 | 15 | ## Installation 16 | 17 | ```bash 18 | # npm 19 | npm i @astrojs/rss 20 | # yarn 21 | yarn add @astrojs/rss 22 | # pnpm 23 | pnpm i @astrojs/rss 24 | ``` 25 | 26 | ## Configuration 27 | 28 | To configure this integration, pass a `config` object to the `webfinger()` function call in `astro.config.mjs` - both static (SSG) builds an server-rendered (SSR) builds. 29 | 30 | ### Static builds (SSG) 31 | 32 | The Webfinger protocol actually depends on using query parameters when searching for accounts. Because query parameters aren't actually supported in static builds, only one account can be provided to the account. 33 | 34 | > :caution: Query parameters won't actually be used at all when your account is requested, your account information will always be returned for any Webfinger request regardless of what was being searched for. 35 | 36 | ```js 37 | import webfinger from 'astro-webfinger' 38 | 39 | export default defineConfig({ 40 | integrations: [ 41 | webfinger({ 42 | instance: 'myinstance.social', 43 | username: 'myusername', 44 | }), 45 | ], 46 | }) 47 | ``` 48 | 49 | ### Server-rendering (SSR) 50 | 51 | With server-rendering the Webfinger query parameters can be used to actually match accounts. If the same integration options as above are passed during an SSR build, it will function the same as SSG and always return your account regardless of what was searched for. 52 | 53 | To take full advantage of the benefits of SSR, the integration can be given an object mapping local usernames **on your own domain** to the related Webfinger accounts. 54 | 55 | ```js 56 | import webfinger from 'astro-webfinger' 57 | 58 | export default defineConfig({ 59 | site: 'https://tonysull.co', 60 | integrations: [ 61 | webfinger({ 62 | tony: { 63 | instance: 'myinstance.social', 64 | username: 'tony', 65 | }, 66 | nottony: { 67 | instance: 'secret.social', 68 | username: 'someoneelse', 69 | }, 70 | }), 71 | ], 72 | }) 73 | ``` 74 | 75 | In the example above, a search for: 76 | 77 | - `tony@tonysull.co` would return account information for `@tony@myinstance.social` 78 | - `nottony@tonysull.co` would return account information for `@someoneelse@secret.social` 79 | - all other searches would return a 404 error 80 | 81 | ## What's next? 82 | 83 | ### Fine-grained control of the Webfinger redirect 84 | 85 | Currently the list of aliases and links in the Webfinger redirect are hard-coded for basic support. I'm definitely not a power user when it comes to the Fediverse but could see there being good reason to support custom aliases and links! 86 | 87 | Have something else in mind? Start a [discussion thread](https://github.com/tony-sull/astro-webfinger/discussions) open an [issue](https://github.com/tony-sull/astro-webfinger/issues), or file a [pull request](https://github.com/tony-sull/astro-webfinger/pulls) if you're able to contribute code! 88 | 89 | ## Credits 90 | 91 | Inspired by [`Jekyll::MastodonWebfinger`](https://github.com/philnash/jekyll-mastodon_webfinger) 92 | 93 | **Related articles** 94 | 95 | [Maarten Balliauw's](https://maartenballiauw.be) blog post [Mastodon on your own domain without hosting a server](https://blog.maartenballiauw.be/post/2022/11/05/mastodon-own-donain-without-hosting-server.html) 96 | 97 | [Lindsay Wardell's](https://lindsaykwardell.com) blog post [Integrate Mastodon with Astro](https://www.lindsaykwardell.com/blog/integrate-mastodon-with-astro) 98 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | .output/ 4 | 5 | # dependencies 6 | node_modules/ 7 | 8 | # logs 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | pnpm-debug.log* 13 | 14 | 15 | # environment variables 16 | .env 17 | .env.production 18 | 19 | # macOS-specific files 20 | .DS_Store 21 | -------------------------------------------------------------------------------- /demo/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /demo/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | # Welcome to [Astro](https://astro.build) 2 | 3 | [](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) 4 | [](https://codesandbox.io/s/github/withastro/astro/tree/latest/examples/basics) 5 | 6 | > 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun! 7 | 8 |  9 | 10 | ## 🚀 Project Structure 11 | 12 | Inside of your Astro project, you'll see the following folders and files: 13 | 14 | ``` 15 | / 16 | ├── public/ 17 | │ └── favicon.svg 18 | ├── src/ 19 | │ ├── components/ 20 | │ │ └── Card.astro 21 | │ ├── layouts/ 22 | │ │ └── Layout.astro 23 | │ └── pages/ 24 | │ └── index.astro 25 | └── package.json 26 | ``` 27 | 28 | Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. 29 | 30 | There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. 31 | 32 | Any static assets, like images, can be placed in the `public/` directory. 33 | 34 | ## 🧞 Commands 35 | 36 | All commands are run from the root of the project, from a terminal: 37 | 38 | | Command | Action | 39 | | :--------------------- | :------------------------------------------------- | 40 | | `npm install` | Installs dependencies | 41 | | `npm run dev` | Starts local dev server at `localhost:3000` | 42 | | `npm run build` | Build your production site to `./dist/` | 43 | | `npm run preview` | Preview your build locally, before deploying | 44 | | `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` | 45 | | `npm run astro --help` | Get help using the Astro CLI | 46 | 47 | ## 👀 Want to learn more? 48 | 49 | Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). 50 | -------------------------------------------------------------------------------- /demo/astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config' 2 | import node from '@astrojs/node' 3 | import webfinger from 'astro-webfinger' 4 | 5 | // https://astro.build/config 6 | export default defineConfig({ 7 | site: 'https://tonysull.co', 8 | adapter: node({ mode: 'standalone' }), 9 | output: 'server', 10 | integrations: [ 11 | webfinger({ 12 | tony: { 13 | instance: 'indieweb.social', 14 | username: 'tonysull', 15 | }, 16 | astro: { 17 | instance: 'm.webtoo.ls', 18 | username: 'astrodotbuild', 19 | }, 20 | }), 21 | ], 22 | }) 23 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@example/basics", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "dev": "astro dev", 8 | "start": "astro dev", 9 | "build": "astro build", 10 | "preview": "astro preview", 11 | "astro": "astro" 12 | }, 13 | "dependencies": { 14 | "@astrojs/node": "^5.1.0", 15 | "astro": "^2.1.2", 16 | "astro-webfinger": "file:.." 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /demo/public/favicon.svg: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /demo/sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "infiniteLoopProtection": true, 3 | "hardReloadOnChange": false, 4 | "view": "browser", 5 | "template": "node", 6 | "container": { 7 | "port": 3000, 8 | "startScript": "start", 9 | "node": "14" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /demo/src/components/Card.astro: -------------------------------------------------------------------------------- 1 | --- 2 | export interface Props { 3 | title: string 4 | body: string 5 | href: string 6 | } 7 | 8 | const { href, title, body } = Astro.props 9 | --- 10 | 11 |
18 | {body} 19 |
20 | 21 |
10 | To get started, open the directory src/pages
in your project.
12 | Code Challenge: Tweak the "Welcome to Astro" message above.
13 |