├── .gitignore
├── README.md
├── favicon.svg
├── index.html
├── logo-dark.svg
├── package-lock.json
├── package.json
├── plugin-connected.svg
├── plugin-connecting.svg
├── plugin-disconnected.svg
├── public
├── about.html
├── indexTemplate.html
├── postTemplate.html
└── templateStyle.css.txt
├── src
├── main.ts
├── style.css
└── vite-env.d.ts
├── tsconfig.json
└── vite.config.ts
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
26 | .tool-versions
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | > [!WARNING]
2 | > [Fission is winding down](https://fission.codes/blog/farewell-from-fission/) and the infra needed for this app is no longer hosted by them. Use this as reference only.
3 |
4 | # mumblr: blogging, decentralized.
5 |
6 | **Micro-blogging in the vein of [tumblr](https://tumblr.com).** Remember tumblr? Me too. A simpler age of blogging. Longer than a tweet. Shorter than a Medium post. Lighter. More ephemeral. More fun. On the surface, mumblr is "self-hosted" microblogging in the spirit of tumblr. But beneath the surface lie some surprises...
7 |
8 | Conceptually, mumblr consists of two components:
9 |
10 | - A User Interface for writing blog posts in markdown and storing them to IPFS.
11 | - A static site generator that reads blog posts from IPFS, generates a static website, and writes that site to IPFS.
12 |
13 | ## What makes mumblr different from other blogging platforms?
14 |
15 | - **No user accounts.** Rather than creating an account with a username and password, mumblr asks for your permission to access to write and read data on your behalf. This permission is secured by a private key that resides in your browser and never leaves your local machine; all requests go directly from your browser to the IPFS network.
16 | - **You own your data.** The mumblr user interface requests access to storage in IPFS that belongs to you and is secured by your keys. This storage is accessible by your keys using other IPFS-enabled applications such as [Fission Drive]().
17 | - **Bring your own client.** As a consequence of _You own your data_, you can edit the data mumblr creates directly, bypassing mumblr's user interface. For example, you could use a CLI tool to place additional markdown files in IPFS and mumblr will see them the next time you load the user interface.
18 | - **No backend.** Mumblr is a simple front-end application. There are no servers. Every action is initiated by the front-end application loaded in your browser. The storage layer is backed by IPFS.
19 | - **Separation between content and presentation.** Mumblr's conceptual architecture separates the "writing" process from "site generation." Technically, each function can be used independently. You can use mumblr's UI to write posts. Or not. You can use mumblr's static site generator to generate the blog. Or not. They go together like peanut butter and jelly, but each is delicious on it's own.
20 |
21 | ## How mumblr works
22 |
23 | Mumblr inherits much of the above functionality from Fission's [WebNative library](https://guide.fission.codes/developers/webnative). WebNative handles a lot for mumblr, letting mumblr focus on it's unique function: the user interface for writing and the static site generation. Here are a few things handled by WebNative:
24 |
25 | - [authentication with WebCrypto and UCAN](https://guide.fission.codes/developers/webnative/auth): the creation of keys in the user's browser and the delegation of permissions from the user to mumblr via UCANs.
26 | - [storage with WNFS](https://guide.fission.codes/developers/webnative/file-system-wnfs): creating and managing a filesystem for the user in IPFS, wrapping IPFS with some handy methods for reading and writing to that file system.
27 |
28 | WebNative also provides an [app publishing system](https://guide.fission.codes/developers/webnative/platform), but I'm not currently taking advantage of that.
29 |
30 | ## Watch me build it
31 |
32 |
2 |
4 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | mumblr
5 |
19 |
22 | mumblr
24 | Write stuff. Store it in IPFS.
25 |
31 | mumblr
7 | About mumblr
27 |
28 |
29 |
30 |
31 | My name is Jess Martin and this is
32 | my mumblr.
33 |
34 |
35 |
36 |
37 | Mumblr is a microblog, in the vein
38 | of Tumblr . It's a tribute to a
39 | simpler time of blogging, a few steps away from the noise and
40 | platform paranoia of twitter. It's a quiet place to share my
41 | thoughts without distraction.
42 |
43 |
44 |
45 |
46 | Strange Software mumblr , is a
50 | little bizarre. If you'd like to learn more about it, I recommend
51 | you head to
52 | the README in GitHub .
55 |
56 |
57 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/public/indexTemplate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | mumblr
7 | Jess's mumblr
27 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/public/postTemplate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | mumblr
7 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/public/templateStyle.css.txt:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | }
5 |
6 | body {
7 | --primary-bg: #fdfeff;
8 | --primary-text: #111111;
9 | --secondary-bg: #eeeef3;
10 | --secondary-text: #9b9b9b;
11 | --hover-bg: #dde1e5;
12 | --active-bg: #cdcfd2;
13 |
14 | --dark-primary-bg: #141516;
15 | --dark-primary-text: #ebebeb;
16 | --dark-secondary-bg: #30373a;
17 | --dark-secondary-text: #a4a7a9;
18 | --dark-hover-bg: #474c50;
19 | --dark-active-bg: #626569;
20 | }
21 |
22 | .dark {
23 | --primary-bg: var(--dark-primary-bg);
24 | --primary-text: var(--dark-primary-text);
25 | --secondary-bg: var(--dark-secondary-bg);
26 | --secondary-text: var(--dark-secondary-text);
27 | --hover-bg: var(--dark-hover-bg);
28 | --active-bg: var(--dark-active-bg);
29 | }
30 |
31 | @media (prefers-color-scheme: dark) {
32 | body:not(.light) {
33 | --primary-bg: var(--dark-primary-bg);
34 | --primary-text: var(--dark-primary-text);
35 | --secondary-bg: var(--dark-secondary-bg);
36 | --secondary-text: var(--dark-secondary-text);
37 | --hover-bg: var(--dark-hover-bg);
38 | --active-bg: var(--dark-active-bg);
39 | }
40 | }
41 |
42 | body {
43 | font-family: system-ui, sans-serif;
44 | color: var(--primary-text);
45 | background: var(--primary-bg);
46 |
47 | display: flex;
48 | flex-direction: column;
49 | min-height: 100vh;
50 | border-bottom: 8px solid #111111;
51 | }
52 |
53 | input,
54 | button,
55 | textarea {
56 | font-size: 1em;
57 | padding: 0.5em 0.8em;
58 | color: var(--primary-text);
59 | font-family: system-ui, sans-serif;
60 | tab-size: 4;
61 | }
62 |
63 | input::placeholder,
64 | textarea::placeholder {
65 | color: var(--secondary-text);
66 | }
67 |
68 | header,
69 | h1,
70 | main {
71 | width: calc(100% - 32px);
72 | max-width: 860px;
73 | margin: 1em auto;
74 | }
75 |
76 | header {
77 | display: flex;
78 | flex-direction: row;
79 | align-items: center;
80 | justify-content: space-between;
81 | }
82 |
83 | header .logo {
84 | font-weight: bold;
85 | }
86 |
87 | nav {
88 | display: flex;
89 | flex-direction: row-reverse;
90 | align-items: center;
91 | gap: 1em;
92 | }
93 |
94 | header a,
95 | header button {
96 | display: inline;
97 | cursor: pointer;
98 | color: var(--primary-text);
99 | background: transparent;
100 | border: 0;
101 | border-radius: 0;
102 | text-decoration: none;
103 | padding: 0.5em 0;
104 | }
105 |
106 | header a:hover,
107 | header button:hover {
108 | text-decoration: underline;
109 | }
110 |
111 | h1 {
112 | margin-top: 0.75em;
113 | margin-bottom: 0.25em;
114 | line-height: 1.4em;
115 | }
116 |
117 | main {
118 | margin-bottom: 3em;
119 | }
120 |
121 | .about p,
122 | .about li {
123 | max-width: 64ch;
124 | line-height: 1.5em;
125 | }
126 |
127 | .about a {
128 | color: inherit;
129 | }
130 |
131 | .about a:hover {
132 | background: var(--hover-bg);
133 | }
134 |
135 | form {
136 | position: relative;
137 | margin-bottom: 2em;
138 | overflow: hidden;
139 | }
140 |
141 | form input,
142 | form textarea {
143 | display: block;
144 | border-radius: 6px;
145 | border: 0;
146 | background: var(--hover-bg);
147 | width: 100%;
148 | box-sizing: border-box;
149 | }
150 |
151 | form textarea {
152 | min-height: 50vh;
153 | line-height: 1.5em;
154 | resize: vertical;
155 | }
156 |
157 | form input:hover,
158 | form input:focus,
159 | form textarea:hover,
160 | form textarea:focus {
161 | outline: 0;
162 | }
163 |
164 | form button[type="submit"] {
165 | border-radius: 6px;
166 | border: 0;
167 | color: var(--primary-bg);
168 | background: var(--primary-text);
169 | margin-top: 0.5em;
170 | float: right;
171 | cursor: pointer;
172 | }
173 |
174 | form button[type="submit"]:hover {
175 | background: var(--secondary-text);
176 | }
177 |
178 | .pageControls {
179 | float: right;
180 | display: flex;
181 | flex-direction: row;
182 | align-items: center;
183 | justify-content: flex-end;
184 | gap: 0.75em;
185 | }
186 |
187 | .pageControls a {
188 | color: var(--primary-text);
189 | text-decoration: none;
190 | }
191 |
192 | .pageControls a:hover {
193 | text-decoration: underline;
194 | }
195 |
196 | a.pageButton {
197 | display: flex;
198 | align-items: center;
199 | justify-content: center;
200 | font-size: 1.5em;
201 | height: 1.5em;
202 | width: 1.5em;
203 | border-radius: 50%;
204 | background: var(--secondary-bg);
205 | }
206 |
207 | a.pageButton:hover {
208 | background: var(--hover-bg);
209 | text-decoration: none;
210 | }
211 |
212 | .message {
213 | font-style: italic;
214 | color: var(--secondary-text);
215 | margin-bottom: 2em;
216 | }
217 |
218 | .update {
219 | margin-bottom: 2.5em;
220 | word-break: break-word;
221 | }
222 |
223 | .update .update-t {
224 | font-size: 14px;
225 | color: var(--secondary-text);
226 | margin-bottom: -0.5em;
227 | }
228 |
229 | .update .update-t a {
230 | color: var(--secondary-text);
231 | text-decoration: none;
232 | }
233 |
234 | .update .update-t a:hover {
235 | text-decoration: underline;
236 | }
237 |
238 | .update-t .relativestamp {
239 | margin-bottom: 6px;
240 | }
241 |
242 | /* update Markdown */
243 |
244 | .update h1,
245 | .update h2,
246 | .update h3 {
247 | margin: 0.75em 0 0.5em 0;
248 | line-height: 1.4em;
249 | }
250 |
251 | .update h1 {
252 | font-size: 1.75em;
253 | }
254 |
255 | .update h2 {
256 | font-size: 1.5em;
257 | }
258 |
259 | .update h3 {
260 | font-size: 1.2em;
261 | }
262 |
263 | .update h4,
264 | .update h5,
265 | .update h6 {
266 | font-size: 1em;
267 | }
268 |
269 | .update p,
270 | .update li {
271 | line-height: 1.5em;
272 | max-width: 64ch;
273 | }
274 |
275 | .update strike {
276 | color: var(--secondary-text);
277 | }
278 |
279 | .update img {
280 | max-width: 100%;
281 | max-height: 500px;
282 | border-radius: 6px;
283 | }
284 |
285 | .update a {
286 | color: var(--primary-text);
287 | text-decoration: underline;
288 | }
289 |
290 | .update ul,
291 | .update ol {
292 | padding-left: 3ch;
293 | }
294 |
295 | .update pre,
296 | .update code {
297 | background: var(--hover-bg);
298 | font-size: 1em;
299 | font-family: "IBM Plex Mono", "Menlo", "Monaco", monospace;
300 | /*
301 | * In Safari (2021), word-break: break-word from `.update` combined with
302 | * certain contents of tags that do not begin lines with whitespace
303 | * break line-wrapping behavior. This inversion of word-break works around
304 | * that Safari bug (or at least, what appears to be a browser bug, as
305 | * Chrome does not reproduce).
306 | */
307 | word-break: initial;
308 | }
309 |
310 | .update pre {
311 | border-radius: 6px;
312 | box-sizing: border-box;
313 | padding: 12px 8px;
314 | overflow-x: auto;
315 | }
316 |
317 | .update code {
318 | padding: 1px 5px;
319 | border-radius: 6px;
320 | }
321 |
322 | .update pre code {
323 | padding: 0;
324 | }
325 |
326 | .update blockquote {
327 | margin: 0;
328 | border-left: 4px solid var(--active-bg);
329 | padding-left: 1em;
330 | display: block;
331 | }
332 |
333 | @media only screen and (min-width: 760px) {
334 | .update {
335 | display: flex;
336 | flex-direction: row;
337 | align-items: flex-start;
338 | justify-content: space-between;
339 | margin-bottom: 1.5em;
340 | }
341 | .update-t {
342 | flex-grow: 0;
343 | flex-shrink: 0;
344 | width: 134px;
345 | margin-top: 3px;
346 | }
347 | .update-s {
348 | width: 0;
349 | flex-grow: 1;
350 | flex-shrink: 1;
351 | }
352 | .update-s :first-child {
353 | margin-top: 0;
354 | }
355 | }
356 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import "./style.css";
2 | import * as wn from "webnative";
3 | import FileSystem from "webnative/fs/index";
4 | import { unified } from "unified";
5 | import remarkParse from "remark-parse";
6 | import remarkRehype from "remark-rehype";
7 | import rehypeStringify from "rehype-stringify";
8 | import remarkFrontmatter from "remark-frontmatter";
9 | import extract from "remark-extract-frontmatter";
10 | import { parse } from "yaml";
11 | import ConnectedIcon from "../plugin-connected.svg";
12 | import DisconnectedSvg from "../plugin-disconnected.svg";
13 | import { BaseLink } from "webnative/fs/types";
14 |
15 | const permissions = {
16 | app: {
17 | name: "mumblr",
18 | creator: "Jess Martin",
19 | },
20 | fs: {
21 | private: [wn.path.directory("Posts")], // This will be `private/Posts`
22 | public: [wn.path.directory("Posts"), wn.path.directory("Apps", "mumblr")], // This will be `public/Posts`
23 | },
24 | };
25 |
26 | const state = await wn
27 | .initialise({
28 | permissions: permissions,
29 | })
30 | .catch((err) => {
31 | switch (err) {
32 | case wn.InitialisationError.InsecureContext:
33 | // TODO: Notify the user that the app is not secure
34 | case wn.InitialisationError.UnsupportedBrowser:
35 | // TODO: Notify the user of the error
36 | }
37 | });
38 |
39 | // Give me maximum debuggage
40 | // TODO: Disable when in production
41 | wn.setup.debug({ enabled: true });
42 |
43 | let fs: FileSystem | undefined;
44 | const connectionStatus = document.querySelector(
45 | "#connect-disconnect"
46 | )!;
47 |
48 | switch (state?.scenario) {
49 | case wn.Scenario.AuthCancelled:
50 | console.log("Auth cancelled by user");
51 | break;
52 |
53 | case wn.Scenario.AuthSucceeded:
54 | // New permissions have been granted
55 | case wn.Scenario.Continuation:
56 | // Great success! We can now use the filesystem!
57 | console.log("Connected");
58 | connectionStatus.innerHTML = `("#post")!.disabled = false;
67 | document.querySelector("#body-input")!.disabled =
68 | false;
69 | break;
70 |
71 | case wn.Scenario.NotAuthorised:
72 | connectionStatus.innerHTML = `("#post")!;
82 |
83 | publishBtn.addEventListener("click", async function () {
84 | const body = document.querySelector(".body-input")!;
85 |
86 | // If body is blank, don't publish
87 | if (body.value.trim().length === 0) {
88 | return;
89 | }
90 |
91 | publishBtn.disabled = true;
92 | publishBtn.value = "Publishing...";
93 |
94 | const postTimestamp = Date.now();
95 | const frontmatter = `---
96 | postedAt: ${postTimestamp}
97 | ---\n`;
98 | const postContent = frontmatter + body.value;
99 |
100 | if (fs !== undefined) {
101 | const filePath = wn.path.file("public", "Posts", `${postTimestamp}.md`);
102 | await fs.add(filePath, postContent).then(() => {
103 | console.log("file saved");
104 | });
105 | await fs
106 | .publish()
107 | .then(() => {
108 | console.log("file system published");
109 | publishBtn.value = "Publish successful!";
110 | enablePublishBtn();
111 | })
112 | .catch((err) => {
113 | console.log(err);
114 | });
115 | } else {
116 | console.log("no file system");
117 | }
118 | });
119 |
120 | async function enablePublishBtn() {
121 | await new Promise((resolve) => setTimeout(resolve, 2000));
122 | publishBtn.value = "Publish";
123 | publishBtn.disabled = false;
124 | }
125 |
126 | const buildSiteButton =
127 | document.querySelector("#build-button")!;
128 |
129 | buildSiteButton.addEventListener("click", async function () {
130 | console.log("attempting to build site");
131 | buildSiteButton.disabled = true;
132 | buildSiteButton.value = "Building...";
133 |
134 | // Read the most recent Markdown files
135 | let markdownPosts = [];
136 | // TODO: Make this into a "break" statement
137 | if (fs !== undefined) {
138 | const linksObject = await fs.ls(wn.path.directory("public", "Posts"));
139 | const links = Object.entries(linksObject);
140 |
141 | // If file is a directory, skip it
142 | const files = await Promise.all(
143 | links.filter((link) => (link[1] as BaseLink).isFile)
144 | );
145 |
146 | const posts = await Promise.all(
147 | files.map(([name, _]) => {
148 | const filePath = wn.path.file("public", "Posts", name);
149 | return fs?.cat(filePath);
150 | })
151 | );
152 |
153 | // Convert the FileContentRaw, which is a uint8array to string
154 | const filesContents = [];
155 | const decoder = new TextDecoder();
156 | for (const post of posts) {
157 | filesContents.push(decoder.decode(post as Uint8Array));
158 | }
159 |
160 | // Convert the string to micromark
161 | const parsedPosts = await Promise.all(
162 | filesContents.map((content) => {
163 | return unified()
164 | .use(remarkParse)
165 | .use(remarkFrontmatter)
166 | .use(extract, { yaml: parse })
167 | .use(remarkRehype)
168 | .use(rehypeStringify)
169 | .process(content);
170 | })
171 | );
172 |
173 | // Ignore files that don't have postedAt
174 | markdownPosts = parsedPosts.filter((post) => {
175 | return post.data.postedAt !== undefined;
176 | });
177 |
178 | // Sort the files by postedAt
179 | markdownPosts.sort((a, b) => {
180 | return (
181 | new Date(b.data.postedAt as number).getTime() -
182 | new Date(a.data.postedAt as number).getTime()
183 | );
184 | });
185 | console.log(markdownPosts);
186 | // Build the HTML/CSS
187 | const parser = new DOMParser();
188 | const serializer = new XMLSerializer();
189 |
190 | // Load the template HTML file locally
191 | const indexTemplate = await fetch("/indexTemplate.html");
192 | const indexTemplateString = await indexTemplate.text();
193 | const indexTemplateDoc = parser.parseFromString(
194 | indexTemplateString,
195 | "text/html"
196 | );
197 |
198 | const postTemplate = await fetch("/postTemplate.html");
199 | const postTemplateString = await postTemplate.text();
200 |
201 | // Generate the HTML for each markdown post and insert into template html
202 | const blogPostsDiv = document.createElement("div");
203 | // iterate over the posts
204 | for await (const markdownPost of markdownPosts) {
205 | const postTimestamp = markdownPost.data.postedAt as number;
206 | const postDate = new Date(markdownPost.data.postedAt as number);
207 | const postDateString = postDate.toLocaleString("en-us", {
208 | year: "numeric",
209 | month: "numeric",
210 | day: "numeric",
211 | });
212 | // build up blogPostHtml
213 | const postDiv = document.createElement("div");
214 | postDiv.innerHTML = `
215 |
216 |
222 |
223 | ${markdownPost.value}
224 |
225 |
33 |
34 | I've been livestreaming most of my work on mumblr. You can view past livestreams in [this playlist](https://www.youtube.com/playlist?list=PLR5cUEyS7wdhcv8v2KDOwRkyP9EPKOHmA).
35 |
36 | ## FAQ
37 |
38 | Q: What's IPFS?
39 |
40 | A: [IPFS](https://ipfs.io) stands for Interplanetary File System. It's a distributed, peer-to-peer, content-addressed storage protocol. If you want a simple analogy, it's BitTorrent meets the Internet Archive. Going a bit deeper, it's a powerful and future-proof way of storing content on the web.
41 |
42 | Q: Is the "m" in mumblr capitalized or lowercase?
43 |
44 | A: Mumblr prefers to be capitalized when at the beginning of a sentence. When occurring within a sentence, mumblr prefers to be lowercase.
45 |
--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |