Skip to content

feat: Add support to create Ghost Posts #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dkyadav34 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Add support to create Ghost Posts #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions public/scripts/upload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,24 @@
async function updateMediaType(attachmentsCount, attachmentListElem) {
const mediaTypeElem = document.getElementById('media-type');
const spoilerMediaControl = document.querySelector('.spoiler-media-control');
const ghostPostMediaControl = document.querySelector('.ghost-post-media-control');

let mediaTypeDesc;
if (attachmentsCount === 0) {
mediaTypeDesc = 'Text 📝';
spoilerMediaControl.style.display = 'none';
ghostPostMediaControl.style.display = 'block';
} else if (attachmentsCount === 1) {
const singleAttachmentType =
attachmentListElem.querySelector('select').value;
if (singleAttachmentType === 'Image') mediaTypeDesc = 'Image 🖼️';
else mediaTypeDesc = 'Video 🎬';
spoilerMediaControl.style.display = 'block';
ghostPostMediaControl.style.display = 'none';
} else {
mediaTypeDesc = 'Carousel 🎠';
spoilerMediaControl.style.display = 'block';
ghostPostMediaControl.style.display = 'none';
}

mediaTypeElem.innerText = mediaTypeDesc;
Expand Down Expand Up @@ -72,10 +76,58 @@ document.addEventListener('DOMContentLoaded', async () => {
const pollAttachmentOptions = document.getElementById(
'poll-attachment-options'
);
const ghostPostMediaControl = document.querySelector('.ghost-post-media-control');
if (pollAttachmentOptions.style.display === 'none') {
pollAttachmentOptions.style.display = 'block';
ghostPostMediaControl.style.display = 'none';
} else {
pollAttachmentOptions.style.display = 'none';
ghostPostMediaControl.style.display = 'block';
}
});

const ghostPostCheckbox = document.querySelector('input[name="ghostPostMedia"]');
const topicTagMediaControl = document.querySelector('.topic-tag-media-control');
const linkAttachmentMediaControl = document.querySelector('.link-attachment-media-control');
const attachImageMediaControl = document.querySelector('.attach-image-media-control');
const replyMediaControl = document.querySelector('.reply-options-media-control');
Copy link
Contributor

@anujs3 anujs3 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: rename to replyOptionsMediaControl

Copy link
Contributor

@anujs3 anujs3 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const replyMediaControl = document.querySelector('.reply-options-media-control');
const replyOptionsMediaControl = document.querySelector('.reply-options-media-control');


const topicTagInput = document.getElementById('topic-tag');
const linkAttachmentInput = document.getElementById('link-attachment');
const replyControlSelect = document.getElementById('reply-control');
const attachmentsList = document.getElementById('attachments-list');
const pollAttachmentOptions = document.getElementById('poll-attachment-options');

if (ghostPostCheckbox) {
ghostPostCheckbox.addEventListener('change', async () => {
// When ghost post is checked, disable fields that are not relevant to ghost posts
if (ghostPostCheckbox.checked) {
topicTagMediaControl.style.display = 'none';
linkAttachmentMediaControl.style.display = 'none';
attachPollButton.style.display = 'none';
attachImageMediaControl.style.display = 'none';
replyMediaControl.style.display = 'none';

if (topicTagInput) topicTagInput.value = '';
if (linkAttachmentInput) linkAttachmentInput.value = '';
if (replyControlSelect) replyControlSelect.value = '';
if (attachmentsList) attachmentsList.innerHTML = '';
if (pollAttachmentOptions) {
pollAttachmentOptions.style.display = 'none';
const pollInputs = pollAttachmentOptions.querySelectorAll('input[type="text"]');
pollInputs.forEach(input => input.value = '');
}

await updateMediaType(0, null);
}
// When the checkbox is unchecked, enable all fields
if (!ghostPostCheckbox.checked) {
Comment on lines +122 to +124
Copy link
Contributor

@anujs3 anujs3 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could simply put this under an else block.

Copy link
Contributor

@anujs3 anujs3 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
}
// When the checkbox is unchecked, enable all fields
if (!ghostPostCheckbox.checked) {
} else { // When the checkbox is unchecked, enable all fields

topicTagMediaControl.style.display = 'block';
linkAttachmentMediaControl.style.display = 'block';
attachPollButton.style.display = 'block';
attachImageMediaControl.style.display = 'block';
replyMediaControl.style.display = 'block';
}
});
}
});
16 changes: 15 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ const FIELD__USERNAME = 'username';
const FIELD__VIEWS = 'views';
const FIELD_IS_SPOILER_MEDIA = 'is_spoiler_media';
const FIELD_TEXT_ENTITES = 'text_entities';
const FIELD_GHOST_POST_STATUS = 'ghost_post_status';

const MEDIA_TYPE__CAROUSEL = 'CAROUSEL';
const MEDIA_TYPE__IMAGE = 'IMAGE';
Expand Down Expand Up @@ -100,6 +101,7 @@ const PARAMS__TOPIC_TAG = 'topic_tag';
const PARAMS__USERNAME = 'username';
const PARAMS_IS_SPOILER_MEDIA = 'is_spoiler_media';
const PARAMS_TEXT_ENTITES = 'text_entities';
const PARAMS_IS_GHOST_POST = 'is_ghost_post';

// Read variables from environment
require('dotenv').config();
Expand Down Expand Up @@ -449,6 +451,7 @@ app.post('/upload', upload.array(), async (req, res) => {
pollOptionD,
quotePostId,
spoilerMedia,
ghostPostMedia,
} = req.body;

const params = {
Expand Down Expand Up @@ -479,6 +482,10 @@ app.post('/upload', upload.array(), async (req, res) => {
params[PARAMS_IS_SPOILER_MEDIA] = true;
}

if (ghostPostMedia) {
params[PARAMS_IS_GHOST_POST] = true;
}

if (pollOptionA && pollOptionB) {
const pollAttachment = JSON.stringify({
option_a: pollOptionA,
Expand Down Expand Up @@ -679,6 +686,7 @@ app.get('/threads/:threadId', loggedInUserChecker, async (req, res) => {
FIELD__REPOSTED_POST,
FIELD_IS_SPOILER_MEDIA,
FIELD_TEXT_ENTITES,
FIELD_GHOST_POST_STATUS,
].join(','),
},
req.session.access_token
Expand All @@ -688,7 +696,7 @@ app.get('/threads/:threadId', loggedInUserChecker, async (req, res) => {
const queryResponse = await axios.get(queryThreadUrl, {
httpsAgent: agent,
});
const { poll_attachment, ...rest } = queryResponse.data;
const { poll_attachment, ghost_post_status, ...rest } = queryResponse.data;
data = rest;

if (poll_attachment) {
Expand All @@ -697,6 +705,12 @@ app.get('/threads/:threadId', loggedInUserChecker, async (req, res) => {
...poll_attachment,
};
}

const is_ghost_post = ghost_post_status === 'ACTIVE';
data = {
...data,
is_ghost_post,
};
} catch (e) {
console.error(e?.response?.data?.error?.message ?? e.message);
}
Expand Down
3 changes: 3 additions & 0 deletions views/thread.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ block content
tr
td Is Spoiler Media Post
td #{is_spoiler_media}
tr
td Is Ghost Post
td #{is_ghost_post}
tr
td GIF URL
td
Expand Down
79 changes: 54 additions & 25 deletions views/upload.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,16 @@ block content
.spoiler-media-control {
display: none;
}
.ghost-post-media-control {
display: flex;
flex-direction: row;
align-items: center;
}
#ghost-post-img{
width:25px;
height:25px;
Comment on lines +67 to +68
Copy link
Contributor

@anujs3 anujs3 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
width:25px;
height:25px;
width: 25px;
height: 25px;

margin-bottom: 0;
}

if (replyToId !== undefined)
p(style='color: gray') Replying to #{replyToId}
Expand All @@ -67,37 +77,56 @@ block content
| Text:
textarea(placeholder='Start a thread...' id='text' name='text' autocomplete='off')
br
| To attach an image or video, click the image below
div.attachments-area
img#attachments-button(src='/img/attachment.png')
div.attachment-controls
div#attachments-list.attachments
div.spoiler-media-control
label(for='spoilerMedia')
| Mark Media as Spoiler   
input(type='checkbox' name='spoilerMedia' value='true')
br

label(for="reply-control") Who Can Reply
select#reply-control(name='replyControl' hint="Reply Control")
option(value="" selected)
option(value="everyone") Everyone
option(value="accounts_you_follow") Accounts You Follow
option(value="mentioned_only") Mentioned Only
option(value="parent_post_author_only") Parent Post Author Only
option(value="followers_only") Followers Only
div.attach-image-media-control
| To attach an image or video, click the image below
div.attachments-area
img#attachments-button(src='/img/attachment.png')
div.attachment-controls
div#attachments-list.attachments
div.spoiler-media-control
label(for='spoilerMedia')
| Mark Media as Spoiler   
input(type='checkbox' name='spoilerMedia' value='true')
br

label(for='topicTag')
| Topic Tag
input#topic-tag(type='text' name='topicTag' value='' maxlength='50')
div.reply-options-media-control
label(for="reply-control") Who Can Reply
br
select#reply-control(name='replyControl' hint="Reply Control")
option(value="" selected)
option(value="everyone") Everyone
option(value="accounts_you_follow") Accounts You Follow
option(value="mentioned_only") Mentioned Only
option(value="parent_post_author_only") Parent Post Author Only
option(value="followers_only") Followers Only

div.topic-tag-media-control
label(for='topicTag')
| Topic Tag
br
input#topic-tag(type='text' name='topicTag' value='' maxlength='50')
br

label(for='linkAttachment')
| Link Attachment
input#link-attachment(type='text' name='linkAttachment' value='')
div.link-attachment-media-control
label(for='linkAttachment')
| Link Attachment
br
input#link-attachment(type='text' name='linkAttachment' value='')
br

label(for="autoPublishText")
input(type="checkbox" name="autoPublishText" id="autoPublishText")
| Auto-Publish (only for text posts)
br

br
div.ghost-post-media-control
input(type='checkbox' name='ghostPostMedia' value='true')
label(for='ghostPostMedia')
| Publish as GhostPost  
Copy link
Contributor

@anujs3 anujs3 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: let's add a space between Ghost and Post

change to: Publish as Ghost Post

Copy link
Contributor

@anujs3 anujs3 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| Publish as GhostPost  
| Publish as Ghost Post  

img#ghost-post-img(src='/img/ghost_post.png')
img#ghost-post-img(src='/img/ghost_post.png')
Comment on lines +127 to +128
Copy link
Contributor

@anujs3 anujs3 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can probably remove one of the ghost images (one is probably enough).

Copy link
Contributor

@anujs3 anujs3 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
img#ghost-post-img(src='/img/ghost_post.png')
img#ghost-post-img(src='/img/ghost_post.png')
img#ghost-post-img(src='/img/ghost_post.png')

br

button#poll-attachment-button(type='button' name='pollAttachment') Attach Poll 🗳️
div#poll-attachment-options(style='display:none')
Expand Down