🔮
Hello, world.

federated social web blog

using the foundation of CRA-all-the-things

NOTE: still under active development and I'm not currently providing backwards compatibility until things stabilize.

📯
Description

federated social web blog app. in short, i'm trying to build an open-source Tumblr (RIP). passes SWAT0!

⚡
Features

• social features:
  
  
  
  • RSS reader
  
  
  • oStatus stack, WebSub/Salmon/Webfinger
  
  
  • commenting
  
  
  • api to follow/reblog content (pretty basic right now)
  
  


• WYSIWYG editor
  
  
  
  • edit content in page, or add new content via dashboard
  
  
  • rich content pasting (paste in url/embed and we'll grab the video or image)
  
  
  • tagging objects through #catvideo and people @bestfriendforevs
  
  
  • different templates (namely, albums currently)
  
  
  • CSS/JS/HTML editing via CodeMirror
  
  


• technology features:
  
  
  
  • foundation: CRA-all-the-things
  
  
  • Auth0 for logging
  
  

💾
Install

npm install

Then, to run your newly created server locally, with the Storybook styleguide server:

npm start

Prerequisites: Node 13+ if you want proper internationalization (i18n) support (via full-icu).

Or, to run locally without the Storybook styleguide server:

npm run serve:dev

To run in production (or better yet check out bin/flightplan.js)

npm --production install

# TODO(mime): annoyingly, you'll need to build the hello-world-editor/social-butterfly separately b/c npm workspaces isn't so robust yet.

# in flightplan.js i hack around this by removing the workspaces, ugh.

npm run build

npm run serve:prod

To run tests:

npm run test

To change port, in an .env change the values to what you would like

PORT=3000

REACT_APP_SSR_PORT=3001

To run migrations:

npx sequelize db:migrate && npx sequelize db:seed:all

To create a new migration:

npx sequelize migration:generate --name [migration_name]

To learn more about Sequelize and migrations, read the docs here.

To extract i18n messages (they go into the folder build/messages):

npm run extract-messages

To use Docker:

npm run dev

and then MySQL will be available on port 3002 (with username/password/database name all being allthethings). Redis will be on port 3003. To set up Redis be sure to set REACT_APP_REDIS_HOST and REACT_APP_REDIS_PORT.

🎯
Goals

• pass SWAT0


• open source


• quick to install


• be a good, straightforward-to-use alternative to what's out there!

🗺️
Roadmap

p0 (high pri)

• creating comment doesn't load in comment properly (text missing)


• replying from dashboard when body of editor isn't selected throws error


• possible to pause compilation while building package?


• apostrophe in title makes it not hidden, e.g. Don-t-deploy-on-Fridays-wRXma4oxja


• Multiple app capable


• getting negative counts on dashboard - regression


• Fault tolerant http


• rm antiCache with migration to React hook <- needed anymore?


• Package directories build sanely


• Reader WordPress alt Tumblr alternative


• freeze HMR when re-building


• when done with editing doesn’t have latest version


• don't have edit link on feed page / or redirect to content page


• graphql errors should surface to top


• use rebound?


• end debugger debugger on run, to be safe?


• bin / fly prod should have npm corresponding command


• think about igor's feedback re css and other stuff


• high-res picture load in app, not new link


• hw loading old entries if purged prbly


• sorting should refresh feed


• pasting iframe into editor doesn’t work (npr video embed)


• fix img sizes in comments (too big - see example on nite-lite about page)


• Email is formatted wrong when getting webmention (says self sent email)


• don't update updatedAt for view


• migrate from user context to local state


• split off dashboard, admin panel, draft.js code, auth0, and lodash code for performance


• social api:
  
  
  
  • provide function to generate RSA
  
  
  • provide function to generate html
  
  
  • remove XML version of webfinger
  
  
  • add JSON feeds
  
  
  • microsub/micropub
    
    
    
    • to test suite https://micropub.rocks/
    
    
  
  
  • litepub?
  
  
  • list library on indieweb wiki later when more mature
  
  
  • deprecate salmon, get rid of magic_keys - stick with public keys
  
  
  • get rid of local fields: comments_count and comments_updated, favorites_count, derive instead
  
  
  • move urls to constants (foaf, webfinger, etc.)
  
  
  • rename fields to be consistent
    
    
    
    • from_user: remoteProfileUrl,
    
    
    • local_content_name: localContentUrl,
    
    
    • to_username: localUsername,
    
    
    • logo -> avatar
    
    
  
  
  • maybe get rid of underscores vs camelCase
  
  
  • should go into a retry queue, async
  
  
  • remove FOAF probably
  
  
  • look at https://github.com/jasnell/activitystrea.ms library
    
    
    
    • https://test.activitypub.rocks/
    
    
  
  
  • look at https://github.com/glennjones/microformat-node
  
  
  • maybe indieauth - but probably not, hard to integrate into social-butterfly
  
  
  • maybe vouch or salmention? https://spec.indieweb.org/
  
  
  • fix https://indieweb-endpoints.cc for site
  
  
  • prbly move comments/favorites to separate 'social' table (also need to consolidate ‘local’ and ‘remote' comments)
  
  
  • publish to fediverse.party and the-federation.info and https://en.wikipedia.org/wiki/ActivityPub and https://en.wikipedia.org/wiki/Fediverse
  
  
  • check out https://fed.brid.gy/
  
  
  • see remote comments
  
  
  • hacky URI decorations
  
  
  • look into making a fed bridgy/granary translation
  
  
  • webmention: add like, other action verbs
    
    
    
    • should verify source
    
    
    • https://webmention.rocks/ to test suite
    
    
  
  
  • activitypub
    
    
    
    • verifyMessage - Digest header of body
    
    
    • undo (unfollow/unfavorite)
    
    
    • outbox
    
    
    • followers
    
    
    • ostatus:attention/mentioned (a la salmon)
    
    
    • thr:replies (a la salmon)
    
    
    • add salmon 'comment' type back for content.section === 'comment'
    
    
    • needs more work for gnusocial/friendica/pleroma/hubzilla interoperability
    
    
    • Linked Data Signatures for forwarded payloads.
    
    
    • if payload contains an attribution verify both actors
    
    
    • check out https://docs.joinmastodon.org/development/activitypub/
      
      
      
      • object IDs must use the https:// schema.
      
      
      • Servers must offer a WebFinger endpoint for turning usernames into actors.
      
      
      • Activities attributed to an actor must have an ID on the same host as the actor
      
      
      • https://activitypub.rocks/implementation-report/ (test suite broken?)
      
      
    
    
  
  
  • websub
    
    
    
    • switch to https://www.npmjs.com/package/websub-hub
    
    
    • or https://www.npmjs.com/package/websub
    
    
  
  


• twitter embed support


• editor
  
  
  
  • onbeforeleave fix after posting once
  
  
  • drop anywhere on page
  
  
  • don’t replace when uploading twice
  
  
  • don’t allow links to be clicked in editor
  
  
  • something wrong with toolbars editing (multiple)
  
  
  • grab thumb from first image (if pasted in)
  
  
  • when finishing editing doesn’t show new version
  
  
  • show uploading spinner
  
  


• fix linting / compilation checks in packages


• get rid of trailing slash on profile page


• make install instructions dead-simple, one-liner with mysql mock db setup.


• render HTML with inline styling (e.g. mentions)


• getting an error in graphql seems to freeze the apollo server. if so, update all-the-things, too.


• same Apollo query twice causes SSR to fail with htmlHead, wtf.


• more GraphQL examples:
  
  
  
  • fragments
    
    
    
    • also, things like fetchPublicUserData should be part of the graph not separate queries
    
    
  
  
  • local state
  
  
  • subscriptions
  
  
  • check out dataloader: https://github.com/graphql/dataloader
  
  
  • generate automatically schemas/typedefs
  
  


• generator steps for Sequelize files


• see if lazy attribute can be a good substitute for ContentThumb's delay-loading logic (chrome 75)


• finish up Admin panel to add/delete users


• loading state when following someone new


• incorrect url (i.e. with http:) follow error on dashboard

p1 (medium pri)

• web components? (e.g. check out youtube.com)


• update material-ui with proper theme (instead of pixel.css)


• should follow self in dashboard, when posting new comment it goes to 'user remote' version.


• add site loading/working component, say when following a feed and it's working.


• hubspot's draft-extend / draft-convert might be a better route than draft-js-plugins, maybe combine the two editors


• more winston logging


• links template should only open embeds in lightbox?


• images open in lightbox


• editor features to bring back (from Python version)
  
  
  
  • use CSS-in-JS in editor package to avoid having to import separately
  
  
  • add snackbar close action
  
  
  • better emoji picker (can use EmojiOne's)
  
  
  • custom emojis
  
  
  • gotta fix @-mentioning for editing content (works for dashboard only now)
  
  
  • draft.js:
    
    
    
    • move paste code out of main index.js
    
    
    • custom tab behavior - draft.js's default is terrible
    
    
    • add markdown
      
      
      
      • https://github.com/withspectrum/draft-js-markdown-plugin
      
      
      • https://github.com/ngs/draft-js-markdown-shortcuts-plugin
      
      
      • --- for divider
      
      
    
    
    • add inline-code
    
    
    • add empty newline always at end of doc
    
    
    • image upload progress (or indeterminate loading "spinner")
    
    
    • unfurl should have "(via link)"
    
    
    • take a look at utils codebase: https://github.com/jpuri/draftjs-utils
    
    
    • code, use prism syntax highlighting
    
    
    • google maps embed
    
    
    • can’t import CSS for some reason into webpack from node_modules (from draft-js-plugins)
    
    
    • DraftEntity.get/create deprecated
    
    
    • multiple images - single undo instead of two (also when pasting unfurl)
    
    
    • use something instead of ' ‘ and ‘a’ for atomic blocks
    
    
    • convertFromHTML bug - this will fail <figure> <img src=""> </figure> but w/o whitespace won’t
    
    
    • toolbar don’t move on click (position so it doesn’t go off screen), get rid of scale
    
    
    • checklist / tasklist
    
    
    • dnd + align toolbars don’t actually work
    
    
    • htmlToEntity has extra data (entity and node both have the same data :-/), need to update attachment.js, unfurl.js, Iframe.js, Image.js, Blocks.js
    
    
  
  
  • create new sections / albums, renames (and redirects)
  
  
  • content rename (and redirects)
  
  
  • draggable, be able to drag album, sitemap, followers and move to different categories
  
  
  • some content is uneditable (like from Simple.js)
  
  
  • audio/video uploads
  
  
  • css/js live updates to wysiwyg
  
  
  • figcaption
  
  


• dashboard: better way to sandbox remote content?


• search should have InfiniteFeed


• bring back old features (from Python version)
  
  
  
  • data liberation, ability to port data to another site/service
  
  
  • themes
  
  
  • forums
  
  
  • events
  
  
  • store
  
  
  • slideshow
  
  
  • favorites and shares
  
  
  • spam control
  
  
  • webfinger if http://ostatus.org/schema/1.0/subscribe present then show Follow button for user
  
  
  • fb/google+/twitter mirroring (backwards compatibility ;)
  
  
  • media manager: had support for video/audio/images
  
  
  • resumable uploads
  
  
  • edit images
  
  
  
  
  
  
  • newsletter, google analytics, basic ads, adult content flag
  
  
  • Structured data w movies music
  
  
  • content management
    
    
    
    • drag & drop to move sections
    
    
    • drag & drop to move content in albums
    
    
    • have hidden content
    
    
    • change section/album/thumb/hidden/template/thumb in content editor
    
    
    • be able to delete from within content editor
    
    
  
  


• friendica, other webfinger/host-meta tech
  
  
  
  • check out oexchange (see friendica)
  
  
  • check out amcd (see friendica)
  
  
  • why does friendica have salmon magic-key at top level host-meta file?
  
  


• dashboard/item.js update() is called so much there's a race condition and sometimes the apollo store gets -1

p2 (ideas)

• look at/switch over to a React Hook

📙
Learn More

Changelog

Code of Conduct

Contributing

Contributors

Support

📜
License

MIT

(The format is based on Make a README)