├── README.md ├── _headers ├── feed └── index.html ├── following.json ├── image.jpg ├── index.html ├── profile.json └── stream.json /README.md: -------------------------------------------------------------------------------- 1 | # Social Network 2 | 3 | Publish three files, and share yourself with the world. 4 | 5 | [social.jake.fun](https://social.jake.fun) is this specific social domain. 6 | 7 | - Visit [buddy.pizza.jake.fun](https://buddy.pizza.jake.fun) for the latest reader ([repo](https://github.com/jakealbaugh/buddy-pizza)). 8 | - Visit `buddy.pizza.jake.fun?s=your-domain.com` if you want to see your personal feed. 9 | - Visit [buddy.pizza.jake.fun/post](https://buddy.pizza.jake.fun/post) for a post template. 10 | 11 | ## Instructions 12 | 13 | Participate by publishing three JSON files to the internet. 14 | 15 | - `profile.json` is an object describing yourself. 16 | - `stream.json` is an array of your posts. 17 | - `following.json` is an array of the domains you are following. 18 | 19 | Anyone that knows about your profile and stream can access it on the internet. 20 | If someone knows about many streams, they can collect them all together in a "feed" to be displayed however they like. 21 | 22 | ### CORS 23 | 24 | You'll want to allow CORS (adding a `Access-Control-Allow-Origin: *` header) so that client side JavaScript can access your files. [\_headers](_headers) in this repo is an example of how to do this for Netlify. [GitHub pages should support this out of the box](https://twitter.com/invisiblecomma/status/575219895308324864)! 25 | 26 | ### What does the data look like? 27 | 28 | Your profile and stream can look _however_ you want them to look. As long as they are valid JSON, they can be read by anyone. 29 | 30 | However, if you are looking to do this with other people, you'll want the structure of your JSON to follow at least _some_ rules so that a reader knows how to handle your stream and profile. 31 | 32 | ### profile.json 33 | 34 | Currently, I am proposing the following for a minimal `profile.json` 35 | 36 | ```json 37 | { 38 | "@": "jandoe", 39 | "name": "Jan Doe", 40 | "pronouns": "whoever/you/are", 41 | "location": "Anytown, USA", 42 | "bio": "normal bio [with links](https://links.com)", 43 | "website": "https://jandoe.com", 44 | "image": { 45 | "url": "https://website.com/image.jpg", 46 | "alt": "A picture of me looking directly into the camera", 47 | "height": 600, 48 | "width": 600 49 | } 50 | } 51 | ``` 52 | 53 | ### stream.json 54 | 55 | For `stream.json` the only important value is a `time` value. This way posts can be ordered when streams are combined into a feed. For that, use a millisecond epoch. You can get that by running `Date.now()` in a JavaScript console, or using a tool like [buddy.pizza.jake.fun/post](https://buddy.pizza.jake.fun/post/) which provides templates. The number should be 13 digits long and in the JSON as numbers (not strings). 56 | 57 | Currently, I am proposing something like this for a basic stream that supports text, image, and link posts: 58 | 59 | ```json 60 | [ 61 | { 62 | "text": "a text post with an image", 63 | "image": { 64 | "url": "https://image.com/image.jpg", 65 | "alt": "alt text of the image.", 66 | "height": 600, 67 | "width": 600 68 | }, 69 | "time": 1650938694864 70 | }, 71 | { 72 | "text": "a text post with a link at the end", 73 | "url": "https://link.com/something", 74 | "time": 1650938170000 75 | }, 76 | { 77 | "text": "a pure text post", 78 | "time": 1650938164497 79 | } 80 | ] 81 | ``` 82 | 83 | These can really look however you want them to though. No one is saying you have to do it this way. I am making a reader that reads ^ this format, but you can make a reader that reads whatever you and your friends want to post. 84 | 85 | ### following.json 86 | 87 | Currently using `following.json` as an array of domains that you are following. This array can be used by a reader to assemble your feed, and can be used by others to explore the network. 88 | 89 | The domains at `following.json` are listed without protocol. SSL is assumed. 90 | 91 | ```json 92 | [ 93 | "social.jake.fun", 94 | "social.buddy.pizza.jake.fun", 95 | "profile.rog.ie", 96 | "social.daverupert.com", 97 | "social.andy-bell.co.uk" 98 | ] 99 | ``` 100 | 101 | ### Threads / Replies 102 | 103 | This is very much WIP, but here's a proposal for threads and replies. 104 | 105 | It is important that you host your stream at a location that wont change, that way your friends can easily find you and communicate with you. 106 | 107 | Your stream has one message and it looks like this, hosted at `social.yourwebsite.com`: 108 | 109 | ```json 110 | [ 111 | { 112 | "text": "a pure text post", 113 | "time": 1650938164497 114 | } 115 | ] 116 | ``` 117 | 118 | You could thread to that status using the following syntax: 119 | 120 | ```json 121 | [ 122 | { 123 | "text": "@social.yourwebsite.com#1650938164497 this one is a reply", 124 | "time": 1650938694864 125 | }, 126 | { 127 | "text": "a pure text post", 128 | "time": 1650938164497 129 | } 130 | ] 131 | ``` 132 | 133 | The format is `@ + domain + # + time`. This way a reader can find the post an link to it, visualize the thread however it wants. You can use this to reply to another stream's thread as well, since the domain is the unique identifier for each stream. 134 | 135 | ```json 136 | [ 137 | { 138 | "text": "@stream.anotherwebsite.com#1650933416323 hiya, pal!", 139 | "time": 1650938695555 140 | }, 141 | { 142 | "text": "@social.yourwebsite.com#1650938164497 this one is a reply", 143 | "time": 1650938694864 144 | }, 145 | { 146 | "text": "a pure text post", 147 | "time": 1650938164497 148 | } 149 | ] 150 | ``` 151 | 152 | ## Readers 153 | 154 | A reader will only read the streams it is subscribed to following the formats it expects. That means if you want to read your own streams, you'll have to make one until someone makes a tool that makes this easier. I created an unstyled example on [CodePen](https://codepen.io/jakealbaugh/pen/abEgGQd/f7c9f5c6d2c5ac7d0ef29b433b6a2e0c) if you want to do it that way, or checkout the [buddy.pizza source code](https://github.com/ja-k-e/buddy-pizza/tree/main/website). 155 | -------------------------------------------------------------------------------- /_headers: -------------------------------------------------------------------------------- 1 | /* 2 | Access-Control-Allow-Origin: * 3 | cache-control: public, max-age=0 -------------------------------------------------------------------------------- /feed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /following.json: -------------------------------------------------------------------------------- 1 | [ 2 | "social.jake.fun", 3 | "profile.rog.ie", 4 | "social.buddy.pizza.jake.fun", 5 | "social.daverupert.com", 6 | "social.andy-bell.co.uk", 7 | "social.claudiorimann.com" 8 | ] 9 | -------------------------------------------------------------------------------- /image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ja-k-e/social/95da0696dbbb6f821a79e4d17602d7365437d659/image.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jake 8 | 9 | 10 | 17 |

This is a social network!

18 |

These links are my social presence. Consume them however you like.

19 | 20 |

21 | stream.json • 22 | profile.json • 23 | following.json • 24 | image.jpg 25 |

26 | 27 |

28 | my feed 29 |

30 | 31 |

32 | info & code 37 |

38 | 39 | 40 | -------------------------------------------------------------------------------- /profile.json: -------------------------------------------------------------------------------- 1 | { 2 | "@": "jake", 3 | "name": "jake", 4 | "pronouns": "he/they", 5 | "location": "USA", 6 | "bio": "code, music, art, accessibility, ux", 7 | "website": "https://www.jake.fun", 8 | "image": { 9 | "url": "https://social.jake.fun/image.jpg", 10 | "alt": "A photograph of my head looking up into a blue sky wearing a hat.", 11 | "height": 600, 12 | "width": 600 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /stream.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "text": "funny how the negative features of social media are what keeps you posting. this idea isn't bad tho...", 4 | "time": 1654523934265 5 | }, 6 | { 7 | "text": "got a juicer. grapefruit pulp soup is underrated.", 8 | "time": 1651595389061 9 | }, 10 | { 11 | "text": "a tiny base64 image", 12 | "image": { 13 | "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABXFBMVEUQEBAPDw8ZFRcODg4ODw8eFRqDSme/cJfBd5yOX3cxJitqMU3gcqn1l8b5os38rdXKk68zKi4NDg4NDw4wHCa+UIfWXprokb3zq872tdX9w+CXeokSEBGKPWTeWpzVV5XZdafusc/zvtj6zOPLrbwbGxsNDg1HJDbXWZjlea/ncKvlYaPwp8330ef73O3mw9WMRmlcK0MREBEaExesSHrufrf42Or5stf3Za73gr782O3+6/f3ttjuY6liLkhnMEvvZKr3uNn+6vf3g7/5sdb41ejue7WmRnYYExVXKkCFRGTlwtX62uz30OXvp83jYaLlbqrkda3UWJZCIjIMDg3LrLz6y+LzvdjusM/adqjUV5WFO2AREBCVeIb9wuD2tNXzqs7pkr3WX5q7ToQtGiQODw4wKCzGj6v7rNT2l8ZkL0otIyiHWnC6c5a3bJF7RmEbFBgXExUWExX///9l+i8dAAAAAWJLR0RzQQk9zgAAAAd0SU1FB+YEHRIaC2NnL/AAAAC8SURBVBjTY2AAA0YgYEACjIxMTIzMCD4LKxs7BycXXISRhZuHl49fQFAIKiAsIiomLiEpJc0AMYdRRlZOXkFRSVlFVQ0soKauoamlraOrp29gaARUw2hsYmpmbmFpZW1jayfMyMAobO/g6GTlbOHi6ubuAVJg5Onl7ePr5x8QGBQMsSZENTQsPCIySi46BmoLQ2xcfEJiUnJKKtQdzGnpGXyZPFmpcO8wZ+fk5uUXIHmPmbmwKBXNuzDvAwC5ZRvyvNlhRAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wNC0yOVQxODoyNjoxMSswMDowMDpAzD4AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDQtMjlUMTg6MjY6MTErMDA6MDBLHXSCAAAAAElFTkSuQmCC", 14 | "alt": "A very small pixelated image of the buddy.pizza logo", 15 | "height": 16, 16 | "width": 16 17 | }, 18 | "time": 1651256443636 19 | }, 20 | { 21 | "text": "yawn", 22 | "time": 1651237143751 23 | }, 24 | { 25 | "text": "instead of saying, \"you too\" i now say, \"uno reverse card\"", 26 | "time": 1651097610901 27 | }, 28 | { 29 | "text": "@profile.rog.ie#1651072955550 welcome!", 30 | "time": 1651073159486 31 | }, 32 | { 33 | "text": "@social.jake.fun#1651015866206 also added feed to homescreen for autorefreshing app-like experience", 34 | "time": 1651015944891 35 | }, 36 | { 37 | "text": "@social.jake.fun#1651015755207 replies got easier too. timestamp on reader links to editor with the mention prefilled", 38 | "time": 1651015866206 39 | }, 40 | { 41 | "text": "creating a status is easier", 42 | "url": "https://buddy.pizza.jake.fun/post", 43 | "time": 1651015755207 44 | }, 45 | { 46 | "text": "what to do with user profiles...", 47 | "time": 1651000861249 48 | }, 49 | { 50 | "text": "if you add a following.json to your domain, you can append \"?s=you.com\" to my main reader and it'll read your feed.", 51 | "time": 1650994509806 52 | }, 53 | { 54 | "text": "added following.json so that the network can be explored and readers can be dynamic.", 55 | "url": "https://social.jake.fun/following.json", 56 | "time": 1650993257731 57 | }, 58 | { 59 | "text": "this is kinda nice...", 60 | "time": 1650988894883 61 | }, 62 | { 63 | "text": "it needs to be easier to post for folks that don't like manually editing JSON", 64 | "time": 1650985282931 65 | }, 66 | { 67 | "text": "added some instructions to the repo", 68 | "url": "https://github.com/ja-k-e/social", 69 | "time": 1650985241320 70 | }, 71 | { 72 | "text": "it me. posting images.", 73 | "image": { 74 | "url": "https://social.jake.fun/image.jpg", 75 | "alt": "A photograph of my head looking up into a blue sky wearing a hat.", 76 | "height": 600, 77 | "width": 600 78 | }, 79 | "time": 1650938694864 80 | }, 81 | { 82 | "text": "this is as transient as you want it to be. i can edit, reorder, delete. nice that git keeps the history...", 83 | "time": 1650938164497 84 | }, 85 | { 86 | "text": "right now a stream node has two properties, \"text\" and \"time\" but really, you could have anything. formalizing a universal pattern isn't necessary. right now, i don't need much more than this. maybe an \"image\" object with \"url\" and \"alt\" attributes...", 87 | "time": 1650937854061 88 | }, 89 | { 90 | "text": "made some updates to the feed", 91 | "url": "https://buddy.pizza", 92 | "time": 1650936249574 93 | }, 94 | { 95 | "text": "@social.daverupert.com#1650932588000 loud and clear!", 96 | "time": 1650936070255 97 | }, 98 | { 99 | "text": "@social.jake.fun#1650928030807 maybe this is a way to reply/thread?", 100 | "time": 1650929993507 101 | }, 102 | { 103 | "text": "infinite edit button!", 104 | "time": 1650928216046 105 | }, 106 | { 107 | "text": "the only really annoying thing about my current setup (github & netlify) is 1. using git to update json and 2. manually generating timestamps. other than that, it's really a dream.", 108 | "time": 1650928131915 109 | }, 110 | { 111 | "text": "there is something kinda nice about the lack of formality to this. people who don't do it right / do it annoyingly will just never be followed.", 112 | "time": 1650928030807 113 | }, 114 | { 115 | "text": "lol this is a social network", 116 | "time": 1650922457865 117 | }, 118 | { 119 | "text": "Hello world!", 120 | "time": 1650919460264 121 | } 122 | ] 123 | --------------------------------------------------------------------------------