├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── CODE_OF_CONDUCT.md
├── README.md
├── UNLICENSE
├── demo.html
├── devserver.js
├── icons
├── apple-touch-icon.png
├── big-icon.png
├── favicon-32x32.png
├── favicon.ico
├── mask-icon.svg
└── micro-panel.svg
├── manifest.json
├── package-lock.json
├── package.json
├── rollup.config.js
└── src
├── indie-action.js
├── micro-panel-action.js
├── micro-panel-all.js
├── micro-panel-editor-entry.js
├── micro-panel-editor.js
├── micro-panel-toolbar.js
├── mp-code-mirror.js
└── util.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | end_of_line = lf
5 | insert_final_newline = true
6 | charset = utf-8
7 | indent_style = tab
8 | indent_size = 2
9 |
10 | [*.json]
11 | indent_style = space
12 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "standard",
3 | "parserOptions": { "ecmaVersion": 6, "sourceType": "module" },
4 | "env": { "browser": true, "es6": true },
5 | "rules": {
6 | "no-tabs": "off",
7 | "indent": ["error", "tab"],
8 | "comma-dangle": ["error", "only-multiline"]
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | bower_components/
3 | tmp/
4 | dist/
5 | build/
6 | shrinkwrap.yaml
7 | yarn.lock
8 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, gender identity and expression, level of experience,
9 | nationality, personal appearance, race, religion, or sexual identity and
10 | orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project owner at val@packett.cool. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project owner is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at [http://contributor-covenant.org/version/1/4][version]
72 |
73 | [homepage]: http://contributor-covenant.org
74 | [version]: http://contributor-covenant.org/version/1/4/
75 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # micro-panel
4 |
5 | micro-panel is a set of [Web Components] made with [Lit] that provide an interface for editing [posts] on your website using the [Micropub] protocol from the [IndieWeb].
6 |
7 | [Web Components]: https://developers.google.com/web/fundamentals/web-components/
8 | [Lit]: https://lit.dev/
9 | [posts]: https://indieweb.org/posts
10 | [Micropub]: https://micropub.net/
11 | [IndieWeb]: https://indieweb.org/
12 |
13 | ## Requirements
14 |
15 | To use micro-panel, your website needs to
16 |
17 | - have a Micropub endpoint (duh) that
18 | - supports browser session (cookie) authentication, i.e. you can "just log in" on your website and send micropub requests, without going through OAuth/IndieAuth and stuff (which technically violates [the spec](https://www.w3.org/TR/micropub/#authentication-1) :D)
19 | - supports [source content queries with `?q=source`](https://www.w3.org/TR/micropub/#source-content)
20 | - accepts [JSON requests](https://www.w3.org/TR/micropub/#json-syntax)
21 | - supports update and delete (if you want to be able to do these things, which you probably do)
22 |
23 | ## Installation
24 |
25 | (TODO publish to npm // for now, build with `npm run build`)
26 |
27 | First of all, put the bundled script somewhere on your server.
28 |
29 | Then edit the templates, like in the (hopefully obvious) pseudocode below:
30 |
31 | ### Script loading
32 |
33 | Just do it!
34 |
35 | ```html
36 | ...
37 | {{if logged-in-as-admin}}
38 |
39 | {{else}}
40 |
41 | {{endif}}
42 |
43 | ```
44 |
45 | Note that micro-panel includes an implementation of the `indie-action` tag from [webactions] to allow you to easily e.g. like your own posts -- or actually not just your own posts if your site acts as a [reader]!
46 | So if you use a "guest" implementation to allow others to easily react to your posts -- such as the implementation from [indieweb-components] that uses [indie-config] -- load that one for non-admin users.
47 |
48 | [webactions]: https://indieweb.org/webactions
49 | [reader]: https://indieweb.org/reader
50 | [indie-config]: https://indieweb.org/indie-config
51 | [indieweb-components]: https://github.com/unrelentingtech/indieweb-components
52 |
53 | ### Editor and toolbar
54 |
55 | Place the `micro-panel-editor` directly into the body.
56 | Beginning, end, doesn't matter -- it's a full screen overlay.
57 | Don't forget to provide your Micropub endpoint's URL!
58 | There's no smart detection, it doesn't look up in various links for simplicity reasons.
59 |
60 | The `micro-panel-toolbar` is what provides the Edit/New post buttons.
61 | It's a normal block element.
62 | You can write custom styles to make it `position:sticky` or whatever.
63 |
64 | ```html
65 |