Minor tweaks

- Renamed blog
- Disallowed more bots
- Updated gitignore
- Revised README to make it clear that this is a WhiteWind blog, powered by WhiteBreeze
This commit is contained in:
Tony Bark 2024-12-08 15:17:07 -05:00
parent 93c011eed9
commit b8156f6e70
10 changed files with 282 additions and 86 deletions

191
.gitignore vendored
View file

@ -1,21 +1,176 @@
node_modules # File created using '.gitignore Generator' for Visual Studio Code: https://bit.ly/vscode-gig
# Created by https://www.toptal.com/developers/gitignore/api/dotenv,node,svelte,visualstudiocode
# Edit at https://www.toptal.com/developers/gitignore?templates=dotenv,node,svelte,visualstudiocode
# Output ### dotenv ###
.output
.vercel
/.svelte-kit
/build
# OS
.DS_Store
Thumbs.db
# Env
.env .env
.env.*
!.env.example
!.env.test
# Vite ### Node ###
vite.config.js.timestamp-* # Logs
vite.config.ts.timestamp-* logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
### Node Patch ###
# Serverless Webpack directories
.webpack/
# Optional stylelint cache
# SvelteKit build / generate output
.svelte-kit
### Svelte ###
# gitignore template for the SvelteKit, frontend web component framework
# website: https://kit.svelte.dev/
.svelte-kit/
package
### VisualStudioCode ###
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets
# Local History for Visual Studio Code
.history/
# Built Visual Studio Code Extensions
*.vsix
### VisualStudioCode Patch ###
# Ignore all local history of files
.history
.ionide
# End of https://www.toptal.com/developers/gitignore/api/dotenv,node,svelte,visualstudiocode
# Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)

View file

@ -1,9 +1,21 @@
# WhiteBreeze # TonyBark.com
A small frontend for [WhiteWind](https://whtwnd.com/), a MarkDown blog service using [ATProto](https://atproto.com/).
WhiteBreeze targets a single user and is meant for someone to self-host their WhiteWind blog posts, without having to direct users to the WhiteWind website. A small, self-hosted [WhiteWind](https://whtwnd.com/) blog, powered by [WhiteBreeze](https://github.com/hugeblank/whitebreeze).
## Usage ## Usage
*[Bun](https://bun.sh/) recommended.*
### Environment variables
Whether in development or production, you will need to change environment variables when working with WhiteBreeze.
```sh
PUBLIC_HANDLE="myhandle.bsky.social" # Your handle, or DID
PUBLIC_ABOUT="Welcome to my blog!" # Optional description of the kinds of posts you'll be making, or a greeting.
# PUBLIC_ABOUT Shows up under your Bluesky profile description in the profile card.
```
### Development ### Development
```sh ```sh
@ -11,16 +23,7 @@ npm install
npm run dev npm run dev
``` ```
### Production ### Standalone
Change environment variables:
```sh
PUBLIC_HANDLE="myhandle.bsky.social" # Your handle, or DID
PUBLIC_ABOUT="Welcome to my blog!" # Optional description of the kinds of posts you'll be making, or a greeting.
# PUBLIC_ABOUT Shows up under your Bluesky profile description in the profile card.
```
#### Standalone
``` ```
npm install npm install
@ -29,7 +32,8 @@ node index.js
``` ```
Put environment variables ahead of the last command, port can also be configured with `PORT`. Put environment variables ahead of the last command, port can also be configured with `PORT`.
#### Dockerized ### Dockerized
Modify `docker-compose.yaml` and change the host port if necessary. Modify `docker-compose.yaml` and change the host port if necessary.
``` ```

BIN
bun.lockb Executable file

Binary file not shown.

View file

@ -2,19 +2,30 @@
import { profile } from "./identity"; import { profile } from "./identity";
</script> </script>
<div class="p-4 bg-local relative border-gray-500 border-[1px] rounded-[1em] m-2" style="background-image: url({profile.banner}); background-size: cover; background-position: center;"> <div
<div class="flex m-2 p-3 bg-black bg-opacity-80 rounded-md shrink"> class="p-4 bg-local relative border-gray-500 border-[1px] rounded-[1em] m-2"
<img src={profile.avatar} alt="Bluesky avatar" class="rounded-full w-[4em] m-2 h-full"/> style="background-image: url({profile.banner}); background-size: cover; background-position: center;"
<div class="p-3"> >
<h4 class="">{profile.displayName}</h4> <div class="flex m-2 p-3 bg-black bg-opacity-80 rounded-md shrink">
<h6 class="hover:text-blue-500 hover:underline"><a href="https://bsky.app/profile/{profile.handle}">@{profile.handle}</a></h6> <img
</div> src={profile.avatar}
<div class="p-3"> alt="Bluesky avatar"
<p class="">{profile.description}</p> class="rounded-full w-[4em] m-2 h-full"
{#if profile.about} />
<br/> <div class="p-3">
<p class="">{profile.about}</p> <h4 class="">{profile.displayName}</h4>
{/if} <h6 class="hover:text-blue-500 hover:underline">
</div> <a href="https://bsky.app/profile/{profile.handle}"
>@{profile.handle}</a
>
</h6>
</div> </div>
</div> <div class="p-3">
<p class="">{profile.description}</p>
{#if profile.about}
<br />
<p class="">{profile.about}</p>
{/if}
</div>
</div>
</div>

View file

@ -1,15 +1,20 @@
<script lang="ts"> <script lang="ts">
import Profile from '$lib/Profile.svelte'; import Profile from "$lib/Profile.svelte";
import '../app.css'; import "../app.css";
let { children } = $props(); let { children } = $props();
</script> </script>
<div class="box-border mx-auto px-8 max-w-[1000px] pb-8"> <div class="box-border mx-auto px-8 max-w-[1000px] pb-8">
<nav class="flex justify-between items-center box-border m-[15px]"> <nav class="flex justify-between items-center box-border m-[15px]">
<a class="font-medium text-[x-large]" href="/">Home</a> <a class="font-medium text-[x-large]" href="/">Home</a>
<a class="font-medium text-[large]" href="/about">About</a> <a class="font-medium text-[large]" href="/about">About</a>
</nav> </nav>
<Profile/> <Profile />
{@render children()} {@render children()}
</div> </div>
<footer class="text-center"><a class="hover:underline hover:text-blue-500" href="https://github.com/hugeblank/whitebreeze">WhiteBreeze</a></footer> <footer class="text-center">
Powered by <a
class="hover:underline hover:text-blue-500"
href="https://github.com/hugeblank/whitebreeze">WhiteBreeze</a
>
</footer>

View file

@ -1,18 +1,25 @@
<script lang="ts"> <script lang="ts">
const {data} = $props() const { data } = $props();
const posts = data.posts const posts = data.posts;
</script> </script>
<svelte:head> <svelte:head>
<title>WhiteBreeze</title> <title>Tony Bark Online</title>
<meta name="description" content="Self-Hosted WhiteWind Blogspot" /> <meta name="description" content="Self-Hosted WhiteWind Blogspot" />
</svelte:head> </svelte:head>
<div class="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr)_)] gap-x-2.5 gap-y-5 justify-between ml-2 mr-2"> <div
{#each posts as post} class="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr)_)] gap-x-2.5 gap-y-5 justify-between ml-2 mr-2"
<a href="{post.rkey}"> >
<div class="border rounded-[1em] border-solid border-[gray] p-[1em]"> {#each posts as post}
<p class="text-[cornflowerblue] leading-[1.5]">{post.title}</p><br/>{post.createdAt.toDateString() + " @ " + post.createdAt.toLocaleTimeString()}<br/> <a href={post.rkey}>
</div> <div
</a> class="border rounded-[1em] border-solid border-[gray] p-[1em]"
{/each} >
</div> <p class="text-[cornflowerblue] leading-[1.5]">{post.title}</p>
<br />{post.createdAt.toDateString() +
" @ " +
post.createdAt.toLocaleTimeString()}<br />
</div>
</a>
{/each}
</div>

View file

@ -34,10 +34,10 @@ const customSchema = {
'width', 'height', 'title', 'frameborder', 'allow', 'referrerpolicy', 'allowfullscreen', 'style', 'seamless', 'width', 'height', 'title', 'frameborder', 'allow', 'referrerpolicy', 'allowfullscreen', 'style', 'seamless',
['src', /https:\/\/(www.youtube.com|bandcamp.com)\/.*/] ['src', /https:\/\/(www.youtube.com|bandcamp.com)\/.*/]
], ],
section: ['dataFootnotes', 'className'] section: ['dataFootnotes', 'className']
}, },
tagNames: [...(defaultSchema.tagNames ?? []), 'font', 'mark', 'iframe', 'section'] tagNames: [...(defaultSchema.tagNames ?? []), 'font', 'mark', 'iframe', 'section']
} }
// Automatically enforce https on PDS images. Heavily inspired by WhiteWind's blob replacer: // Automatically enforce https on PDS images. Heavily inspired by WhiteWind's blob replacer:
// https://github.com/whtwnd/whitewind-blog/blob/7eb8d4623eea617fd562b93d66a0e235323a2f9a/frontend/src/services/DocProvider.tsx#L90 // https://github.com/whtwnd/whitewind-blog/blob/7eb8d4623eea617fd562b93d66a0e235323a2f9a/frontend/src/services/DocProvider.tsx#L90
@ -59,15 +59,15 @@ const upgradeImage = (child: Node): void => {
const rehypeUpgradeImage: Plugin<any, Root, Node> = () => { const rehypeUpgradeImage: Plugin<any, Root, Node> = () => {
return (tree) => { return (tree) => {
tree.children.forEach(child => upgradeImage(child)) tree.children.forEach(child => upgradeImage(child))
} }
} }
export async function load({ params }) { export async function load({ params }) {
const rawResponse = await fetch(`${pds}/xrpc/com.atproto.repo.getRecord?repo=${profile.did}&collection=com.whtwnd.blog.entry&rkey=${params.rkey}`) const rawResponse = await fetch(`${pds}/xrpc/com.atproto.repo.getRecord?repo=${profile.did}&collection=com.whtwnd.blog.entry&rkey=${params.rkey}`)
const response = await rawResponse.json() const response = await rawResponse.json()
try { try {
return { return {
title: response["value"]["title"], title: response["value"]["title"],
mdcontent: String( mdcontent: String(

View file

@ -4,12 +4,15 @@
</script> </script>
<svelte:head> <svelte:head>
<title>{data.title} - WhiteBreeze</title> <title>{data.title} - Tony Bark Online</title>
<meta name="description" content="This is where the description goes for SEO" /> <meta
name="description"
content="This is where the description goes for SEO"
/>
</svelte:head> </svelte:head>
<h1 class="text-center pt-4 pb-4">{data.title}</h1> <h1 class="text-center pt-4 pb-4">{data.title}</h1>
<hr class="pb-4"> <hr class="pb-4" />
<article class="mx-auto max-w-4xl px-2 sm:px-6 lg:px-8 prose dark:prose-invert"> <article class="mx-auto max-w-4xl px-2 sm:px-6 lg:px-8 prose dark:prose-invert">
{@html data.mdcontent} {@html data.mdcontent}
</article> </article>

View file

@ -1,11 +1,18 @@
<svelte:head> <svelte:head>
<title>About - WhiteBreeze</title> <title>About - Tony Bark Online</title>
<meta name="description" content="Self-Hosted WhiteWind Blogspot" /> <meta name="description" content="Self-Hosted WhiteWind Blogspot" />
</svelte:head> </svelte:head>
<p class="m-3"> <p class="m-3">
WhiteBreeze is a small frontend for <a class="text-blue-500 hover:underline" href="https://whtwnd.com/">WhiteWind</a>, WhiteBreeze is a small frontend for <a
intended for users who would like to self host their own blogs on their own webpage. The user who this WhiteBreeze instance is targeting is shown on every page. class="text-blue-500 hover:underline"
If you would like to host your own WhiteWind blog posts, consider cloning <a class="text-blue-500 hover:underline" href="https://github.com/hugeblank/whitebreeze">WhiteBreeze on GitHub</a>. href="https://whtwnd.com/">WhiteWind</a
</p> >, intended for users who would like to self host their own blogs on their
own webpage. The user who this WhiteBreeze instance is targeting is shown on
every page. If you would like to host your own WhiteWind blog posts,
consider cloning
<a
class="text-blue-500 hover:underline"
href="https://github.com/hugeblank/whitebreeze">WhiteBreeze on GitHub</a
>.
</p>

View file

@ -3,6 +3,7 @@ User-Agent: ChatGPT-User
User-Agent: ClaudeBot User-Agent: ClaudeBot
User-Agent: anthropic-ai User-Agent: anthropic-ai
User-Agent: CCBot User-Agent: CCBot
User-agent: Bytespider
User-Agent: FacebookBot User-Agent: FacebookBot
User-Agent: Twitterbot User-Agent: Twitterbot
User-Agent: PerplexityBot User-Agent: PerplexityBot
@ -12,6 +13,7 @@ User-Agent: mlbot
User-Agent: PetalBot User-Agent: PetalBot
User-Agent: Amazonbot User-Agent: Amazonbot
User-Agent: DuckAssistBot User-Agent: DuckAssistBot
User-agent: Diffbot
User-Agent: OAI-SearchBot User-Agent: OAI-SearchBot
User-Agent: OAI-SearchBot User-Agent: OAI-SearchBot
User-Agent: omgili User-Agent: omgili
@ -21,4 +23,6 @@ User-Agent: Webzio-Extended
User-Agent: Meta-ExternalAgent User-Agent: Meta-ExternalAgent
User-Agent: Meta-ExternalFetcher User-Agent: Meta-ExternalFetcher
User-Agent: cohere-ai User-Agent: cohere-ai
User-agent: Google-Extended
User-agent: PerplexityBot
Disallow: / Disallow: /