Customize styles on shared link page

Features & ideas
1

Summary

As a user of Inkdrop, I would like to be able to have shared notes use custom styles, and remove Inkdrop branding.

I would be willing to pay a higher amount for this functionality.

Example

As part of my business workflow, I write documents and send those to clients. For example, I write project bids and proposals.

My current workflow is to write in markdown, then export the HTML, then copy the contents to a rich document editor, apply style changes, then save as a PDF.

With this new feature, I could customize the style of the shared note page to use my business brand styles, so that I would simply share a link to the clients. This would save me a lot of work.

Other

From a user perspective, I would not be willing to pay more money for only customized styles (like font colors, sizes, etc.) but I would be willing to pay more to be able to remove Inkdrop branding (icon and menu elements).

1 Like
2

Hi Tobias,

Thank you for the suggestion.
Yeah that would be nice to have and I understand your workflow, but itā€™s not currently planned to be supported as note sharing feature is just a supplemental feature.
BTW, I am considering to improve the export feature so that you can use it for building websites using frameworks like Gatsby, which allows you to fully customize styles and pages.

3

That makes sense, sure.

Another option I am considering iss writing a plugin that would override the ā€œShare Noteā€ functionality, and push the note up to my own servers. Any tips or pointers would be helpful!

Thanks for your time!

4

Thank you for your understanding!

You can add a button on the editor header bar. Check out the docs:

And you can also get currently editing note data from editingNote flux state:

Hope that helps!

1 Like
5

Thatā€™s very helpful, thank you!

6

Iā€™ve about got the plugin working, but Iā€™m not sure how to introspect the Inkdrop React components, specifically the MessageDialog component.

In the share modal dialog there are action buttons (ok/cancel) but when I make a modal (following that example) it only shows ā€œokā€.

The example here is absolutely brilliant, thank you for it: https://github.com/inkdropapp/layout-example-plugin/blob/master/lib/layout-example-message-dialog.js

I found the documentation here but it doesnā€™t list the available components, or how to use them.

Any specific advice or general tips for figuring out how to use React components would be very appreciated.

7

Yeah, the app React components are not documented yet.
MessageDialog accepts following props:

type Props = {|
  title: string | (() => React.Node),
  message: string,
  buttons: MessageDialogButton[],
  autofocus: boolean,
  className?: string,
  onDismiss?: (dialog: MessageDialog, buttonIndex: number) => any,
  onHidden?: (dialog: MessageDialog, buttonIndex: number) => any,
  children: React.Node
|}

type MessageDialogButton = {
  label: string,
  primary?: boolean,
  destructive?: boolean
}

In the share dialog, it renders the dialog like this:

<MessageDialog
  ref={dialogRef}
  title={renderTitle}
  buttons={[
    { label: 'Cancel', cancel: true },
    { label: 'Share', primary: true }
  ]}
  onDismiss={handleDismiss}
>
  <p>
    Are you sure you want to share this note on the web? A public link
    will be created.
  </p>
</MessageDialog>

So you should be able to use it in the same way :slight_smile:

1 Like
8

Thatā€™s great information, thank you so much!

1 Like
9

Put me down as wanting custom styling on public links. Even if it was just an optional CSS snippet.

10

Hi @Ryan_McQuen

Inkdrop provides a way to access notes via HTTP:

So, you can build a website using frameworks like Gatsby and Jekyll by exporting notes via the local HTTP API.
It requires some work though, you have full control of page styling and hosting including domain.

11

Yeah, I just want something really simple I can update on mobile.

12

Thatā€™s going to be a big feature like building another blogging service. It becomes no longer just a note-taking app.
Iā€™d like to focus on improving it as a simple note-taking app.

13

Yeah, I donā€™t want that. Itā€™d be nice if the wrapping wasnā€™t so prominent or if it allowed custom CSS. If it just had a bottom footer that said it was ā€˜Powered by Inkdropā€™ instead of a big header and menu and all that it would be a giant improvement for me.

14

No. Providing such customization makes it complicated.

15

Is it possible to just change the default to not have so much wrapping?

16

No, because itā€™s a supplementary feature. I have to focus on improving the core features instead.

17

UPDATE: Moved the Inkdrop logo to the bottom of the page so that it would look more personal.

18

Created a tool called live-export, which allows you to programmatically export notes for creating blogs. Check this out:

Now I think itā€™s been resolved.