gwbasic / z3 Goto Github PK

Clean up the editor view so that more of the editor fits on screen.

The current problem with the editor is that the global navigation bar, editor links, and then editor toolbar, take up too much space on screen.

In this ticket: Figure out how to use less horizontal space so more screen gets dedicated to the editor itself.

Buttons to share on Facebook, Twitter, LinkedIn, and Hacker News, would be useful!

Throughout developing z3, I've found it difficult to work with CKEditor.

In this ticket: Try switching to Jodit: https://xdsoft.net/jodit/. Jodit contains a WYSIWYG mode that, in theory, should fix #5

Alternatively, try Quill: https://quilljs.com/

After logging in, there is no link to create a post. Need a button to create a post.

(Also, allow enabling a login button on the blog itself.)

I recently encountered a 500 error when publishing a post. Upon closer inspection, an img tag had no src after the image was uploaded.

From the log:

2020-06-05T15:22:30.208817+00:00 app[web.1]: Unhandled error POST /publish/5: TypeError: Cannot read property 'startsWith' of undefined
2020-06-05T15:22:30.208837+00:00 app[web.1]: at Object.exports.extractImages (/app/z3.js:205:25)
2020-06-05T15:22:30.208838+00:00 app[web.1]: at /app/routes/publish.js:131:53
2020-06-05T15:22:30.208839+00:00 app[web.1]: at processTicksAndRejections (internal/process/task_queues.js:97:5)

The code:
` const originalSrc = imageElement.attribs.src;

    if (originalSrc.startsWith(filterPrefix)) {`

My steps:

1. Create a new blog post
2. Do not edit the post in any way
3. Drag and drop an image file into the editor
4. Publish

This triggered a 500 error.

But, then on closer inspection:

1. Create a new blog post
2. Do not edit the post in any way
3. Drag and drop an image file into the editor
4. Switch to the HTML view
5. Observe that the img tag has no src value

When viewing the preview of a blog entry, images are not resized.

Instead, images are shown at their full size.

Expected behavior: Show resized images just like the published blog entry

When editing a blog post, the header and footer take up a lot of screen real estate. They should be able to be hidden. In such a situation, only the content specific to the editor will be visible.

One thing that's useful is allowing other people to view a preview of a blog post.

To do this, allow viewing a preview with a password.

OR: Allow connecting a Facebook account and allowing viewing a preview with a Facebook account.

Currently, all 3rd party Javascript dependencies come via CDN.

Experiment with using npm and WebPack for 3rd party dependencies.

NOTE: Currently, z3 is "build and run" if you have NodeJS, and deploys easily to Heroku. If this breaks "build and run," it's probably best to stick with CDNs for 3rd party Javascript.

When sharing to facebook, ensure that the correct image is in the share.

To do this, use <meta property="og:image" ... >

See example at https://developers.facebook.com/docs/plugins/share-button

Note that this may require modifying the publish page to allow selecting the default image.

In the editor, add an "upload" button that allows uploading arbitrary media. (Video, audio file)

Then have a way to insert the media into the post.

When previewing a blog entry, every effort is made to make the blog entry look similar to the published blog entry.

The links in the sidebar listing summaries of other articles are broken.

For example: On https://andrewrondeau.herokuapp.com/preview/takehome_vs_whiteboard_coding_the_problem_is_bad_interviews, all three sidebar links to blog entries are broken.

It's confusing that the blog has no "login" link.

A "login" link should be enabled by default, and then optionally disabled on the configuration page.

The editor was originally intended to be WYSIWYG, but there are enough differences between the editor and final view that a preview button is ideal.

For this enhancement:

• Implement a draft preview page: /draft/:draftId and /draft/image/:imageId
• Refactor / use code in z3 to ensure that images are shown at their appropriate width
• Link to this page on the editor and the drafts view page

Animated gifs show their animation in the WYSIWYG editor.

But, on the published page they have no animation!

Need a way to preserve animated gifs uploaded to a page

When editing a blog post, if the editor looses focus, the editor shrinks.

To reproduce:

1. Create a new blog post / edit an existing blog post
2. Resize your window so it's tall. (Use a large monitor, make the window fill the screen)
3. Select another tab or window
4. Return to the editor

Observe that the editor shrunk.

(Reproduced with Chrome on Mac)

Use https://www.startpage.com/ as the default search engine

It's based on Google and privacy focused

When pogon.html uses cheerio 1.0.0-rc5, requests fail with the following error:

TypeError: Cannot read property '_options' of undefined at exports.html (/Users/andrewrondeau/git/z3/node_modules/cheerio/lib/static.js:133:10) at initialize.exports.html (/Users/andrewrondeau/git/z3/node_modules/cheerio/lib/api/manipulation.js:697:12) at merge (/Users/andrewrondeau/git/z3/node_modules/pogon.html/pogon.html.js:217:40) at Object.exports.render (/Users/andrewrondeau/git/z3/node_modules/pogon.html/pogon.html.js:89:8) at async View.exports.renderFile [as engine] (/Users/andrewrondeau/git/z3/node_modules/pogon.html/pogon.html.js:185:20)

I'm not sure if that's a cheerio bug or a problem with pogon.html. For now, forcing pogon.html to use an older version of cheerio.

It appears that edits to the title are ignored.

To reproduce:

1. Create a blog entry with no title
2. Edit the title
3. Edit the text
4. Preview it

Observe that the title is still blank

Expected:

• I should not be able to create a blog entry with a blank title
• Changes to the title should apply

A problem with CKEditor is that it removes unrecognized tags, like <form>. If someone adds custom HTML to a blog post, it will be cleared out as soon as the blog post is edited in WYSIWYG.

To reproduce:

1. Create / edit a blog post
2. Select "HTML" at the bottom of the screen
3. Add a form:
4. Switch back to WYSIWYG
5. Switch back to HTML

Observe that the form is removed

In this bug:

1. In the editor, detect that a blog entry has unsupported HTML
2. Don't allow switching back to WYSIWYG
3. Default to HTML when the editor is opened