diff --git a/README.md b/README.md
index 3bf15d16..4977be72 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,81 @@ Use Publications on Leaflet for blogs, newsletters, project logs — anything yo
Read ours here: [Leaflet Lab Notes](https://lab.leaflet.pub/).
+### Local Development (Linux, WSL)
+
+#### Prerequisites
+
+- [NodeJS](https://nodejs.org/en) (version 20 or later)
+- [Supabase CLI](https://supabase.com/docs/guides/local-development/cli/getting-started)
+- [Docker](https://docker.com) (required for local Supabase)
+
+#### Installation
+
+1. Clone the repository `git clone https://tangled.org/leaflet.pub/leaflet.git`
+ 1. If using WSL, it's recommended to install in the native file structure vs in a mounted Windows file structure (i.e, prefer installing at `~/code/leaflet` vs `/mnt/c/code/leaflet`)
+2. Install the dependencies: `npm install`
+3. Install the Supabase CLI:
+ - **macOS:** `brew install supabase/tap/supabase`
+ - **Windows:** `scoop bucket add supabase https://github.com/supabase/scoop-bucket.git && scoop install supabase`
+ - **Linux:** Use Homebrew or download packages from [releases page](https://github.com/supabase/cli/releases)
+ - **Via npm:** The CLI is already included in package.json, use `npx supabase` for commands
+
+#### Local Supabase Setup
+
+1. Start the local Supabase stack: `npx supabase start`
+ - First run takes longer while Docker images download
+ - Once complete, you'll see connection details in the terminal output
+ - Keep note of the `API URL`, `anon key`, `service_role key`, and `DB URL`
+2. Copy the `.env` file example to `.env.local` and update with your local values from the previous step:
+
+```env
+# Supabase Configuration (from `supabase start` output)
+NEXT_PUBLIC_SUPABASE_API_URL=http://localhost:54321
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-local-anon-key-from-terminal
+SUPABASE_SERVICE_ROLE_KEY=your-local-service-role-key-from-terminal
+
+# Database (default local connection)
+DB_URL=postgresql://postgres:postgres@localhost:54322/postgres
+
+# Leaflet specific
+LEAFLET_APP_PASSWORD=any-password-you-want
+
+# Feed Service (for publication features, optional)
+FEED_SERVICE_URL=http://localhost:3001
+```
+
+#### Database Migrations
+
+1. Apply migrations to your local database:
+ - First time setup: `npx supabase db reset` (resets database and applies all migrations)
+ - Apply new migrations only: `npx supabase migration up` (applies unapplied migrations)
+ - Note: You don't need to link to a remote project for local development
+2. Access Supabase Studio at `http://localhost:54323` to view your local database
+
+#### Running the App
+
+1. `npm run dev` to start the development server
+2. Visit `http://localhost:3000` in your browser
+
+#### Stopping Local Supabase
+
+- Run `npx supabase stop` to stop the local Supabase stack
+- Add `--no-backup` flag to reset the database on next start
+
+#### Feed service setup (optional)
+
+Setup instructions to run a local feed service from a docker container. This step isn't necessary if you're not working on publication or BlueSky integration features.
+
+1. Clone the repo `git clone https://github.com/hyperlink-academy/leaflet-feeds.git`
+2. Update your `.env.local` to include the FEED_SERVICE_URL (if not already set): `FEED_SERVICE_URL=http://localhost:3001`
+3. Change to the directory and build the docker container `docker build -t leaflet-feeds .`
+4. Run the docker container on port 3001 (to avoid conflicts with the main app): `docker run -p 3001:3000 leaflet-feeds`
+
+#### Troubleshooting
+
+- Persisting articles on a fresh install over a fresh DB are usually due to stale Replicache entrys. To clear, open your browser DevTools and delete Replicache entries (usually under IndexedDB Storage)
+- Supabase settings will get cached in `.next`; if you change where you're pointing your supabase connections to you may need to delete the `.next` folder (it will rebuild next time you start the app).
+
## Technical details
The stack:
diff --git a/actions/publishToPublication.ts b/actions/publishToPublication.ts
index 8f5075c0..8ce771c7 100644
--- a/actions/publishToPublication.ts
+++ b/actions/publishToPublication.ts
@@ -41,7 +41,7 @@ import { AtUri } from "@atproto/syntax";
import { Json } from "supabase/database.types";
import { $Typed, UnicodeString } from "@atproto/api";
import { List, parseBlocksToList } from "src/utils/parseBlocksToList";
-import { getBlocksWithTypeLocal } from "src/hooks/queries/useBlocks";
+import { getBlocksWithTypeLocal } from "src/replicache/getBlocks";
import { Lock } from "src/utils/lock";
import type { PubLeafletPublication } from "lexicons/api";
import {
diff --git a/actions/subscriptions/subscribeToMailboxWithEmail.ts b/actions/subscriptions/subscribeToMailboxWithEmail.ts
index 7f145132..4117bc56 100644
--- a/actions/subscriptions/subscribeToMailboxWithEmail.ts
+++ b/actions/subscriptions/subscribeToMailboxWithEmail.ts
@@ -6,7 +6,7 @@ import { and, eq } from "drizzle-orm";
import { drizzle } from "drizzle-orm/node-postgres";
import { email_subscriptions_to_entity } from "drizzle/schema";
import postgres from "postgres";
-import { getBlocksWithTypeLocal } from "src/hooks/queries/useBlocks";
+import { getBlocksWithTypeLocal } from "src/replicache/getBlocks";
import type { Fact, PermissionToken } from "src/replicache";
import type { Attribute } from "src/replicache/attributes";
import { Database } from "supabase/database.types";
diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
index 47c27dc0..a660e1a9 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -6,6 +6,7 @@ import {
PubLeafletBlocksImage,
PubLeafletBlocksText,
PubLeafletBlocksUnorderedList,
+ PubLeafletBlocksOrderedList,
PubLeafletBlocksWebsite,
PubLeafletDocument,
PubLeafletPagesLinearDocument,
@@ -238,6 +239,26 @@ export let Block = ({
);
}
+ case PubLeafletBlocksOrderedList.isMain(b.block): {
+ return (
+
+ {b.block.children.map((child, i) => (
+
+ ))}
+
+ );
+ }
case PubLeafletBlocksMath.isMain(b.block): {
return ;
}
@@ -459,3 +480,55 @@ function ListItem(props: {
);
}
+
+function OrderedListItem(props: {
+ index: number[];
+ pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
+ item: PubLeafletBlocksOrderedList.ListItem;
+ did: string;
+ className?: string;
+ bskyPostData: AppBskyFeedDefs.PostView[];
+ pollData: PollData[];
+ pageId?: string;
+ startIndex?: number;
+}) {
+ const calculatedIndex = (props.startIndex || 1) + props.index[props.index.length - 1];
+ let children = props.item.children?.length ? (
+
+ {props.item.children.map((child, index) => (
+
+ ))}
+
+ ) : null;
+ return (
+
+
+ {calculatedIndex}.
+
+
+
+ {children}{" "}
+
+
+ );
+}
diff --git a/components/Blocks/Block.tsx b/components/Blocks/Block.tsx
index 33ff933a..1ba258be 100644
--- a/components/Blocks/Block.tsx
+++ b/components/Blocks/Block.tsx
@@ -26,13 +26,11 @@ import { PollBlock } from "./PollBlock";
import { BlueskyPostBlock } from "./BlueskyPostBlock";
import { CheckboxChecked } from "components/Icons/CheckboxChecked";
import { CheckboxEmpty } from "components/Icons/CheckboxEmpty";
-import { LockTiny } from "components/Icons/LockTiny";
import { MathBlock } from "./MathBlock";
import { CodeBlock } from "./CodeBlock";
import { HorizontalRule } from "./HorizontalRule";
import { deepEquals } from "src/utils/deepEquals";
import { isTextBlock } from "src/utils/isTextBlock";
-import { focusPage } from "src/utils/focusPage";
import { DeleteTiny } from "components/Icons/DeleteTiny";
import { ArrowDownTiny } from "components/Icons/ArrowDownTiny";
import { Separator } from "components/Layout";
@@ -47,6 +45,9 @@ export type Block = {
type: Fact<"block/type">["data"]["value"];
listData?: {
checklist?: boolean;
+ listStyle?: "ordered" | "unordered";
+ listStart?: number;
+ displayNumber?: number;
path: { depth: number; entity: string }[];
parent: string;
depth: number;
@@ -192,7 +193,9 @@ function deepEqualsBlockProps(
if (
prevProps.listData.checklist !== nextProps.listData.checklist ||
prevProps.listData.parent !== nextProps.listData.parent ||
- prevProps.listData.depth !== nextProps.listData.depth
+ prevProps.listData.depth !== nextProps.listData.depth ||
+ prevProps.listData.displayNumber !== nextProps.listData.displayNumber ||
+ prevProps.listData.listStyle !== nextProps.listData.listStyle
) {
return false;
}
@@ -495,6 +498,7 @@ export const ListMarker = (
) => {
let isMobile = useIsMobile();
let checklist = useEntity(props.value, "block/check-list");
+ let listStyle = useEntity(props.value, "block/list-style");
let headingLevel = useEntity(props.value, "block/heading-level")?.data.value;
let children = useEntity(props.value, "card/block");
let folded =
@@ -504,6 +508,43 @@ export const ListMarker = (
let depth = props.listData?.depth;
let { permissions } = useEntitySetContext();
let { rep } = useReplicache();
+
+ let [editingNumber, setEditingNumber] = useState(false);
+ let [numberInputValue, setNumberInputValue] = useState("");
+
+ useEffect(() => {
+ if (!editingNumber) {
+ setNumberInputValue("");
+ }
+ }, [editingNumber]);
+
+ const handleNumberSave = async () => {
+ if (!rep || !props.listData) return;
+
+ const newNumber = parseInt(numberInputValue, 10);
+ if (isNaN(newNumber) || newNumber < 1) {
+ setEditingNumber(false);
+ return;
+ }
+
+ const currentDisplay = props.listData.displayNumber || 1;
+
+ if (newNumber === currentDisplay) {
+ // Remove override if it matches the computed number
+ await rep.mutate.retractAttribute({
+ entity: props.value,
+ attribute: "block/list-number",
+ });
+ } else {
+ await rep.mutate.assertFact({
+ entity: props.value,
+ attribute: "block/list-number",
+ data: { type: "number", value: newNumber },
+ });
+ }
+
+ setEditingNumber(false);
+ };
return (