January 22, 2026

GitHub to LinkedIn, ship updates people actually read

Lisa Granqvist Partner Workflow Automation Expert

Get a free AI assessment → ⬇️ Use template

Your product ships. Your GitHub shows the proof. But LinkedIn stays quiet because turning commits into a post is annoying, context-switch heavy, and always “later.”

This GitHub LinkedIn automation hits founders and indie hackers first, honestly. Developer advocates and marketing leads feel it too when “we should share this” turns into another unfinished draft.

This workflow watches your repo, writes a clean update people will actually read, generates a sharp code image, then publishes to LinkedIn. You’ll see what it does, why it works, and what you need to run it.

How This Automation Works

See how this solves the problem:

n8n Workflow Template: GitHub to LinkedIn, ship updates people actually read

Click to explore

flowchart LR

    subgraph sg0["Github Flow"]
        direction LR
        n0["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/github.dark.svg' width='40' height='40' /></div><br/>Github Trigger1"]
        n1["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/github.dark.svg' width='40' height='40' /></div><br/>GitHub File Download"]
        n2["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/linkedin.svg' width='40' height='40' /></div><br/>Post to LinkedIn"]
        n3@{ icon: "mdi:robot", form: "rounded", label: "LinkedIn Content Creator", pos: "b", h: 48 }
        n4["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Create Code HTML"]
        n5["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Generate Code Image"]
        n6["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>GET the genarted Image"]
        n7["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/github.dark.svg' width='40' height='40' /></div><br/>Upload to Image Repo"]
        n8["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/merge.svg' width='40' height='40' /></div><br/>Merge"]
        n9["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Extract Modified Files"]
        n10@{ icon: "mdi:cog", form: "rounded", label: "Extract from File", pos: "b", h: 48 }
        n11@{ icon: "mdi:robot", form: "rounded", label: "Structured Output Parser", pos: "b", h: 48 }
        n12@{ icon: "mdi:swap-vertical", form: "rounded", label: "Edit Fields", pos: "b", h: 48 }
        n13@{ icon: "mdi:brain", form: "rounded", label: "OpenRouter Chat Model", pos: "b", h: 48 }
        n14@{ icon: "mdi:cog", form: "rounded", label: "Extract from File1", pos: "b", h: 48 }
        n8 --> n2
        n12 --> n4
        n0 --> n9
        n4 --> n5
        n10 --> n3
        n14 --> n7
        n5 --> n6
        n1 --> n10
        n1 --> n14
        n7 --> n8
        n13 -.-> n3
        n9 --> n1
        n6 --> n8
        n3 --> n12
        n11 -.-> n3
    end

    %% Styling
    classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
    classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
    classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
    classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
    classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
    classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
    classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
    classDef disabled stroke-dasharray: 5 5,opacity: 0.5
    class n0 trigger
    class n3,n11 ai
    class n13 aiModel
    class n5,n6 api
    class n4,n9 code
    classDef customIcon fill:none,stroke:none
    class n0,n1,n2,n4,n5,n6,n7,n8,n9 customIcon

The Challenge: Turning commits into posts (without wasting your day)

Posting engineering progress sounds simple until you try to do it consistently. First you scan commits, then you open diffs, then you hunt for the one snippet that won’t confuse everyone. After that, you write, rewrite, simplify the wording, and still worry it reads like a changelog nobody asked for. Meanwhile, you lose your build focus, and the moment is gone. The worst part is that launches and improvements never compound in public because you keep shipping quietly.

It adds up fast. Here’s where it usually breaks down.

You forget the details by the time you sit down to write, so the post turns vague and gets ignored.
Pulling a code snippet that looks good in a feed takes longer than it should, especially if you’re reformatting or screenshotting.
Manual posts drift in tone, which means your “voice” changes every week and people don’t know what to expect.
One missed week turns into a month, because restarting the habit feels like extra work.

The Fix: Auto-generate LinkedIn posts from GitHub pushes

This workflow listens for new push events in your GitHub repository and pulls the files that changed. It extracts the relevant code text, then sends those changes to an LLM (via LangChain) to do two things at once: pick a snippet worth sharing and write a LinkedIn-ready explanation in plain English. Next, it builds a “Mac-window” style code preview in HTML with syntax highlighting and converts that HTML into an image through the HCTI API. Finally, it uploads the generated image back into GitHub (so you’ve got a stable hosted asset), merges the image with the LinkedIn copy, and publishes the post directly to LinkedIn under your profile.

The workflow starts with a GitHub push listener. Then the AI agent produces a short narrative and selects the snippet that best supports it. After the image render and upload, LinkedIn gets a complete post with text plus a clean visual, ready for a scroll-stopping feed.

What Changes: Before vs. After

What This Eliminates

Impact You’ll See

Reading through diffs just to figure out what’s worth posting.
Writing LinkedIn copy from scratch every time you ship.
Manually creating “pretty code” screenshots that don’t look like a random terminal grab.
Uploading assets somewhere, grabbing links, and assembling a post by hand.

Most teams get a post out in about 10 minutes instead of an hour.
Your updates stay consistent because the prompt and structure don’t drift.
Posts read like product progress, not commit noise.
Code visuals look designed, which helps stop the scroll.
You build a public shipping trail that compounds week after week.

Real-World Impact

Say you ship 4 meaningful updates a week. Manually, a typical “turn this into a LinkedIn post” routine takes about 20 minutes to understand the change, 20 minutes to write, and another 20 minutes to create a code screenshot that doesn’t look messy (about 1 hour per update). That’s roughly 4 hours a week. With this workflow, the push triggers everything, then you spend about 10 minutes reviewing and tweaking before it publishes. You get back about 3 hours weekly, and the posts actually happen.

Requirements

n8n instance (try n8n Cloud free)
Self-hosting option if you prefer (Hostinger works well)
GitHub to detect pushes and host images.
LinkedIn to publish posts automatically.
OpenRouter API key (get it from your OpenRouter dashboard).
HCTI.io API key (get it from your HCTI account settings).

Skill level: Intermediate. You’ll connect OAuth accounts and paste a couple API keys, plus update repo fields and your LinkedIn Person URN.

Need help implementing this? Talk to an automation expert (free 15-minute consultation).

The Workflow Flow

A GitHub push kicks things off. The workflow watches one repository for new push events, so every meaningful change can become a shareable update without you remembering to do it.

Changed files get identified and pulled. n8n figures out what actually changed, retrieves the file contents, and extracts the text so the AI isn’t guessing from a vague commit message.

AI writes the post and chooses the snippet. Through LangChain + OpenRouter, the workflow turns raw code changes into a LinkedIn post with context, plus a “best snippet” that supports the story.

The snippet becomes a clean image, then gets published. The workflow builds an HTML “Mac-window” code block, sends it to HCTI to render, stores the image in GitHub for hosting, merges image and copy, and posts to LinkedIn.

You can easily modify the prompt and posting rules to match your brand voice or add an approval step based on your needs. See the full implementation guide below for customization options.

Step-by-Step Implementation Guide

Step 1: Configure the GitHub Trigger

Set up the webhook listener so the workflow starts on repo pushes.

Add and open GitHub Push Listener.
Set Owner to [YOUR_ID] and Repository to [YOUR_ID].
Ensure Events includes push.
Credential Required: Connect your githubApi credentials.

If your repository name differs from your account name, replace [YOUR_ID] in both Owner and Repository to match your repo settings.

Step 2: Connect GitHub File Retrieval and Storage

Pull the changed file and prepare it for both text processing and binary handling.

In Identify Changed Files, keep the default JavaScript to output filePath for each changed file.
Configure Retrieve Repo File with Resource set to file and Operation set to get.
Set File Path to {{ $json.filePath }} in Retrieve Repo File.
Credential Required: Connect your githubApi credentials to Retrieve Repo File.
Retrieve Repo File outputs to both Read Text Content and Binary to Property in parallel.
Set Read Text Content Operation to text.
Set Binary to Property Operation to binaryToPropery.
In Store Image in Repo, set File Path to {{ $('Retrieve Repo File').item.json.filePath }} and File Content to {{ $json.data }}.
Set Commit Message to Upload generated image for {{ $('Retrieve Repo File').item.json.filePath }} in Store Image in Repo.
Credential Required: Connect your githubApi credentials to Store Image in Repo.

⚠️ Common Pitfall: If Identify Changed Files outputs no items, the workflow stops gracefully. Test with a commit that modifies at least one file.

Step 3: Set Up AI Copy Generation and Parsing

Generate LinkedIn-ready content and extract structured fields for later steps.

Open Compose LinkedIn Copy and keep Text set to Data{{ $json.data }}.
Ensure Compose LinkedIn Copy has Prompt Type set to define and Has Output Parser enabled.
Verify OpenRouter Chat Engine is connected as the language model for Compose LinkedIn Copy and set Model to google/gemini-2.5-flash.
Credential Required: Connect your openRouterApi credentials to OpenRouter Chat Engine.
Ensure Structured JSON Parser is connected as the output parser for Compose LinkedIn Copy with the provided schema.
In Map Content Fields, map the outputs with expressions like {{ $json.output.post_title }}, {{ $json.output.post_content }}, {{ $json.output.code_snippet }}, {{ $json.output.code_language }}, {{ $json.output.hashtags }}, and {{ $json.output.character_count }}.

For AI sub-nodes, credentials are added to the parent. The Structured JSON Parser relies on OpenRouter Chat Engine credentials via Compose LinkedIn Copy.

Step 4: Render Code Snippet Image

Convert the code snippet into a styled image using HTML-to-image rendering.

In Build Code HTML, keep the JavaScript that builds html, estimatedWidth, and estimatedHeight.
Configure Render Code Image with URL set to https://hcti.io/v1/image and Method set to POST.
Set body parameters in Render Code Image: html to {{ $json.html }}, google_fonts to Fira Code, viewport_width to {{ Math.min($json.estimatedWidth || 800, 1920) }}, viewport_height to {{ Math.min($json.estimatedHeight || 400, 1080) }}, and device_scale to {{ 2 }}.
Set header Content-Type to application/json in Render Code Image.
Credential Required: Connect your httpBasicAuth and httpHeaderAuth credentials to Render Code Image.
In Fetch Rendered Image, set URL to {{ $json.url }} and keep response format as file.

⚠️ Common Pitfall: If the render API returns errors, confirm the width/height expressions resolve to integers and that your HTTP auth credentials are valid.

Step 5: Combine Media and Publish to LinkedIn

Merge the rendered image and text content, then publish to LinkedIn.

Fetch Rendered Image outputs to Combine Image and Text for image data, while Store Image in Repo outputs to the same merge node.
Ensure Combine Image and Text uses Mode combine and Combine By combineAll.
Configure Publish on LinkedIn Text to use the expression: {{ $('Compose LinkedIn Copy').item.json.output.post_title }} + {{ $('Compose LinkedIn Copy').item.json.output.post_content }} + {{ $('Compose LinkedIn Copy').item.json.output.hashtags }} + Link to Github: {{ $json.content._links.html }}.
Set Person to [YOUR_ID] and Share Media Category to IMAGE in Publish on LinkedIn.
Credential Required: Connect your linkedInOAuth2Api credentials to Publish on LinkedIn.

If LinkedIn posts fail, verify that the merged item includes both the image binary and the LinkedIn text fields.

Step 6: Test and Activate Your Workflow

Validate each stage and switch the workflow to active mode.

Click Execute Workflow and push a test commit to the repo configured in GitHub Push Listener.
Confirm Identify Changed Files outputs one or more filePath items.
Verify the AI output fields in Map Content Fields and that Render Code Image returns a valid image URL.
Check that Publish on LinkedIn creates a post with the generated text and attached image.
When satisfied, toggle the workflow to Active for production use.

🔒

Unlock Full Step-by-Step Guide

Get the complete implementation guide + downloadable template

Watch Out For

GitHub credentials can expire or need specific permissions. If things break, check your n8n credential test and the repo access token scopes first.
If you’re using external rendering (HCTI), processing times vary. Bump up the wait duration if downstream nodes fail on empty responses.
Default prompts in AI nodes are generic. Add your brand voice early or you’ll be editing outputs forever.

Common Questions

How quickly can I implement this GitHub LinkedIn automation automation?

About 30 minutes if your accounts and API keys are ready.

Can non-technical teams implement this GitHub LinkedIn automation?

Yes, but you’ll want someone comfortable with OAuth and API keys. No coding is required, though minor field edits (repo name, LinkedIn URN) are part of setup.

Is n8n free to use for this GitHub LinkedIn automation workflow?

Yes. n8n has a free self-hosted option and a free trial on n8n Cloud. Cloud plans start at $20/month for higher volume. You’ll also need to factor in OpenRouter model usage and HCTI image rendering costs.

Where can I host n8n to run this automation?

Two options: n8n Cloud (managed, easiest setup) or self-hosting on a VPS. For self-hosting, Hostinger VPS is affordable and handles n8n well. Self-hosting gives you unlimited executions but requires basic server management.

How do I adapt this GitHub LinkedIn automation solution to my specific challenges?

You can tweak the “Compose LinkedIn Copy” agent prompt to match your tone, audience, and post length. If you prefer OpenAI or Anthropic, swap the “OpenRouter Chat Engine” node for your model node and keep the same structured output. Many teams also customize “Identify Changed Files” to ignore docs or dependency bumps, then adjust “Build Code HTML” to match their preferred theme and font.

Why is my GitHub connection failing in this workflow?

Usually it’s token scope or an expired OAuth connection. Reconnect GitHub in n8n, confirm the workflow has access to the source repo and the target repo used by “Store Image in Repo,” then re-run a test push. If failures happen only on larger commits, the file retrieval step may be hitting size limits, so narrowing the snippet selection helps.

What’s the capacity of this GitHub LinkedIn automation solution?

If you self-host, there’s no execution cap (it mostly depends on your server and API rate limits). On n8n Cloud, capacity depends on your plan, and this workflow runs once per push event, so most small teams are fine unless they push constantly.

Is this GitHub LinkedIn automation automation better than using Zapier or Make?

For this specific job, usually yes. You’re mixing GitHub file handling, an AI agent, structured parsing, HTML generation, an external render call, and a multi-step merge before posting. n8n handles that kind of branching and data shaping without turning your automation into a pile of paid “tasks.” Also, self-hosting matters here because a busy repo can create lots of executions. Zapier or Make can still be fine for simple “new commit → post message” flows, just don’t expect the same control over snippet selection and image rendering. If you want help deciding, Talk to an automation expert.

Ship your work, then let the workflow translate it into a post people can understand. The repetitive part is handled, so you can stay in build mode.

Need Help Setting This Up?

Our automation experts can build and customize this workflow for your specific needs. Free 15-minute consultation—no commitment required.

Lisa Granqvist

Workflow Automation Expert

Expert in workflow automation and no-code tools.

{
"id": null,
"meta": {
"instanceId": "d20a723492732ad48567264bf28a683b0423b58a5c64c8193f36f5a386b1251a",
"templateId": null,
"templateCredsSetupCompleted": null
},
"name": "Automated Code-to-LinkedIn Publishing Flow",
"tags": [],
"nodes": [
{
"id": "flowpast-topbar-12131",
"name": "Flowpast Branding",
"type": "n8n-nodes-base.stickyNote",
"position": [
0,
20
],
"parameters": {
"color": 7,
"width": 1560,
"height": 80,
"content": "## Flowpast.com | Automation Workflow Library\n**\ud83d\udcd6 Full tutorial & setup guide:** flowpast.com"
},
"typeVersion": 1
},
{
"id": "53ff6b5d-cda9-4bf5-b28a-a8983e8b8d5e",
"name": "GitHub Push Listener",
"type": "n8n-nodes-base.githubTrigger",
"position": [
1460,
200
],
"webhookId": "27faf4c4-2fa4-4df0-b023-87e55cafc956",
"parameters": {
"owner": {
"__rl": true,
"mode": "name",
"value": "[YOUR_ID]"
},
"events": [
"push"
],
"options": [],
"repository": {
"__rl": true,
"mode": "name",
"value": "[YOUR_ID]"
}
},
"credentials": {
"githubApi": {
"id": "credential-id",
"name": ""
}
},
"typeVersion": 1
},
{
"id": "d9397243-bad3-4699-9056-a22e41009a4d",
"name": "Identify Changed Files",
"type": "n8n-nodes-base.code",
"notes": "",
"position": [
1170,
240
],
"parameters": {
"jsCode": "// Get the head_commit object from the webhook body\nconst headCommit = $json.body.head_commit;\n\n// Get the arrays of added and modified files. Default to empty arrays if they don't exist.\nconst addedFiles = headCommit.added || [];\nconst modifiedFiles = headCommit.modified || [];\n\n// Combine both arrays into a single list of file paths\nconst allChangedFiles = [...addedFiles, ...modifiedFiles];\n\n// If there are no changed files, return an empty result to stop the workflow gracefully.\nif (allChangedFiles.length === 0) {\n  return [];\n}\n\n// Create a new list of n8n items. Each item will contain one file path.\nconst items = allChangedFiles.map(filePath => {\n  return {\n    json: {\n      // We store the path in a new field called 'filePath'\n      filePath: filePath\n    }\n  };\n});\n\n// Return the new list of items\nreturn items;"
},
"typeVersion": 2
},
{
"id": "ae31ca41-9c74-48ef-bb43-9ff5627c1c0f",
"name": "Retrieve Repo File",
"type": "n8n-nodes-base.github",
"position": [
880,
260
],
"webhookId": "65f14e41-f887-4878-b292-3f2a0a4dca39",
"parameters": {
"owner": {
"__rl": true,
"mode": "name",
"value": "[YOUR_ID]"
},
"filePath": "={{ $json.filePath }}",
"resource": "file",
"operation": "get",
"repository": {
"__rl": true,
"mode": "name",
"value": "[YOUR_ID]"
},
"additionalParameters": []
},
"credentials": {
"githubApi": {
"id": "credential-id",
"name": ""
}
},
"typeVersion": 1.1
},
{
"id": "b00dc7bd-c999-4617-b752-1c78a93fabd7",
"name": "Read Text Content",
"type": "n8n-nodes-base.extractFromFile",
"position": [
590,
300
],
"parameters": {
"options": [],
"operation": "text"
},
"typeVersion": 1
},
{
"id": "5afb4709-1651-4ba5-9cb7-e9da7437afe4",
"name": "Binary to Property",
"type": "n8n-nodes-base.extractFromFile",
"position": [
700,
420
],
"parameters": {
"options": [],
"operation": "binaryToPropery"
},
"typeVersion": 1.1
},
{
"id": "88ce4578-58f3-4cbc-8ae4-fed95b73a75d",
"name": "Store Image in Repo",
"type": "n8n-nodes-base.github",
"position": [
960,
560
],
"webhookId": "5208ba8d-bfa6-4f88-a22c-1242bfc8b26f",
"parameters": {
"owner": {
"__rl": true,
"mode": "name",
"value": "[YOUR_ID]"
},
"filePath": "={{ $('Retrieve Repo File').item.json.filePath }}",
"resource": "file",
"repository": {
"__rl": true,
"mode": "name",
"value": "[YOUR_ID]"
},
"fileContent": "={{ $json.data }}",
"commitMessage": "=Upload generated image for {{ $('Retrieve Repo File').item.json.filePath }}"
},
"credentials": {
"githubApi": {
"id": "credential-id",
"name": ""
}
},
"typeVersion": 1.1
},
{
"id": "426f6797-088e-42f2-9f5d-ebcf2b853974",
"name": "Structured JSON Parser",
"type": "@n8n/n8n-nodes-langchain.outputParserStructured",
"position": [
160,
120
],
"parameters": {
"schemaType": "manual",
"inputSchema": "{\n\t\"type\": \"object\",\n\t\"properties\": {\n\t\t\"post_title\": {\n\t\t\t\"type\": \"string\"\n\t\t},\n      \"post_content\": {\n\t\t\t\"type\": \"string\"\n\t\t},\n      \"code_snippet\": {\n\t\t\t\"type\": \"string\"\n\t\t},\n      \"code_language\": {\n\t\t\t\"type\": \"string\"\n\t\t},\n      \"hashtags\": {\n\t\t\t\"type\": \"string\"\n\t\t},\n      \"character_count\": {\n\t\t\t\"type\": \"integer\"\n\t\t}\n\t}\n}"
},
"typeVersion": 1.3
},
{
"id": "7d068914-c1cc-4553-945d-0327ea5e66df",
"name": "OpenRouter Chat Engine",
"type": "@n8n/n8n-nodes-langchain.lmChatOpenRouter",
"position": [
160,
480
],
"parameters": {
"model": "google/gemini-2.5-flash",
"options": {
"responseFormat": "json_object"
}
},
"credentials": {
"openRouterApi": {
"id": "credential-id",
"name": ""
}
},
"typeVersion": 1
},
{
"id": "3eb75e0a-0c99-4cf1-b6a5-105a5fb705d4",
"name": "Compose LinkedIn Copy",
"type": "@n8n/n8n-nodes-langchain.agent",
"position": [
300,
340
],
"parameters": {
"text": "=Data\n{{ $json.data }}",
"options": {
"systemMessage": "You are a LinkedIn content strategist and copywriter specialising in professional, engaging technical content focused on infrastructure as code with bicep for azure workloads.\n\nAnalyze the provided code file and create:\n1. A LinkedIn post with compelling narrative (without including the actual code)\n2. Extract the most important/interesting code snippet (10-20 lines max) that showcases the key concept\n\nFor the LinkedIn post:\n- Open with a compelling hook that grabs attention\n- Explain what the code does and why it's valuable\n- Use professional yet conversational tone\n- Include a clear call-to-action\n- Stay within 400 characters\n- DO NOT include the actual code in the post content\n\nFor the code snippet:\n- Select the most interesting or important part\n- Keep it concise (10-20 lines)\n- Ensure it's self-contained and understandable\n- Include any necessary context as comments\n\nIMPORTANT: Return hashtags as a single string with space-separated hashtags, NOT as an array.\n\nFormat your response as JSON with the following structure:\n{\n  \"post_title\": \"string\",\n  \"post_content\": \"string (narrative without code and without hashtags)\",\n  \"code_snippet\": \"string (the actual code to display)\",\n  \"code_language\": \"string (javascript, typescript, python, etc.)\",\n  \"hashtags\": \"string\",\n  \"character_count\": integer\n}"
},
"promptType": "define",
"hasOutputParser": true
},
"typeVersion": 2
},
{
"id": "b1c72cac-7e02-4a24-8dc0-99ea96a00c44",
"name": "Map Content Fields",
"type": "n8n-nodes-base.set",
"position": [
0,
380
],
"parameters": {
"options": [],
"assignments": {
"assignments": [
{
"id": "13b0cb01-c54d-43bb-90df-a48f12d76fb3",
"name": "post_title",
"type": "string",
"value": "={{ $json.output.post_title }}"
},
{
"id": "f3b23908-6876-46b7-be5f-d8a41c209202",
"name": "post_content",
"type": "string",
"value": "={{ $json.output.post_content }}"
},
{
"id": "a915c874-e76a-408e-ad92-d8863397a5e0",
"name": "code_snippet",
"type": "string",
"value": "={{ $json.output.code_snippet }}"
},
{
"id": "571704c3-425c-4aa2-a44a-1147ac56ad1c",
"name": "code_language",
"type": "string",
"value": "={{ $json.output.code_language }}"
},
{
"id": "6599c4be-cbaf-4155-b7b9-4930b1386e48",
"name": "hashtags",
"type": "string",
"value": "={{ $json.output.hashtags }}"
},
{
"id": "0e9bde61-489f-4c20-b68a-0193cd8a388e",
"name": "character_count",
"type": "number",
"value": "={{ $json.output.character_count }}"
}
]
}
},
"typeVersion": 3.4
},
{
"id": "377af262-7c5f-45ad-81a3-ea8af25f3862",
"name": "Build Code HTML",
"type": "n8n-nodes-base.code",
"position": [
220,
520
],
"parameters": {
"jsCode": "// Get the code snippet and language from previous node\nconst codeSnippet = $json.code_snippet || '';\nconst language = $json.code_language || 'javascript';\n\n// Calculate dimensions based on content\nconst lines = codeSnippet.split('\\n');\nconst lineCount = lines.length;\nconst maxLineLength = Math.max(...lines.map(line => line.length));\n\n// Adjust sizing calculations\nconst charWidth = 8.4; // approximate width per character in monospace\nconst lineHeight = 24; // pixels per line\nconst containerPadding = 20; // padding inside code container\nconst bodyPadding = 10; // minimal body padding\nconst headerHeight = 40; // header with dots\n\n// Calculate dimensions and FORCE INTEGERS (Math.ceil) to prevent API errors\nconst calculatedWidth = Math.max(400, maxLineLength * charWidth + (containerPadding * 2));\nconst contentWidth = Math.ceil(Math.min(calculatedWidth, 1200)); \nconst contentHeight = Math.ceil((lineCount * lineHeight) + headerHeight + (containerPadding * 2));\n\n// Create HTML with minimal padding, sized to content\nconst html = `\n<!DOCTYPE html>\n<html>\n<head>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link href=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css\" rel=\"stylesheet\" />\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap\" rel=\"stylesheet\">\n  <style>\n    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n    html, body {\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      padding: 0;\n    }\n    body {\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      font-family: 'Fira Code', 'Consolas', monospace;\n      padding: ${bodyPadding}px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .code-container {\n      background: #2d2d2d;\n      border-radius: 10px;\n      padding: ${containerPadding}px;\n      box-shadow: 0 10px 30px rgba(0,0,0,0.4);\n      width: auto;\n      max-width: 100%;\n    }\n    .header {\n      display: flex;\n      gap: 8px;\n      margin-bottom: 15px;\n    }\n    .dot {\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n    }\n    .dot-red { background: #ff5f56; }\n    .dot-yellow { background: #ffbd2e; }\n    .dot-green { background: #27c93f; }\n    pre {\n      margin: 0;\n      padding: 0;\n      overflow-x: visible;\n      white-space: pre;\n      max-width: 100%;\n    }\n    code {\n      font-size: 12px;\n      line-height: 1.5;\n      display: block;\n      font-family: 'Fira Code', 'Consolas', monospace;\n    }\n    /* Override Prism's default margins */\n    pre[class*=\"language-\"] {\n      margin: 0;\n      padding: 0;\n      background: transparent;\n    }\n  </style>\n<link rel="preload" as="image" href="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/107618.webp"><link rel="preload" as="image" href="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/107618.webp"></head>
\n<body>\n  <div class=\"code-container\">\n    <div class=\"header\">\n      <div class=\"dot dot-red\"></div>\n      <div class=\"dot dot-yellow\"></div>\n      <div class=\"dot dot-green\"></div>\n    </div>\n    <pre><code class=\"language-${language}\">${codeSnippet.replace(/</g, '<').replace(/>/g, '>')}</code></pre>\n  </div>\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js\"></script>\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-${language}.min.js\"></script>\n</body>\n</html>\n`;\n\nreturn [{\n  json: {\n    ...items[0].json,\n    html: html,\n    estimatedWidth: contentWidth + (bodyPadding * 2),\n    estimatedHeight: contentHeight + (bodyPadding * 2)\n  }\n}];"
},
"typeVersion": 1
},
{
"id": "d1d0195c-ec4e-4990-bce9-0b103ceef218",
"name": "Render Code Image",
"type": "n8n-nodes-base.httpRequest",
"position": [
480,
570
],
"parameters": {
"url": "https://hcti.io/v1/image",
"method": "POST",
"options": {
"timeout": 30000,
"response": {
"response": {
"responseFormat": "json"
}
}
},
"sendBody": true,
"sendHeaders": true,
"authentication": "genericCredentialType",
"bodyParameters": {
"parameters": [
{
"name": "html",
"value": "={{ $json.html }}"
},
{
"name": "google_fonts",
"value": "Fira Code"
},
{
"name": "viewport_width",
"value": "={{ Math.min($json.estimatedWidth || 800, 1920) }}"
},
{
"name": "viewport_height",
"value": "={{ Math.min($json.estimatedHeight || 400, 1080) }}"
},
{
"name": "device_scale",
"value": "={{ 2 }}"
}
]
},
"genericAuthType": "httpBasicAuth",
"headerParameters": {
"parameters": [
{
"name": "Content-Type",
"value": "application/json"
}
]
}
},
"credentials": {
"httpBasicAuth": {
"id": "credential-id",
"name": ""
},
"httpHeaderAuth": {
"id": "credential-id",
"name": ""
}
},
"typeVersion": 4.2
},
{
"id": "b900240c-9695-4c2a-8766-a0703c530721",
"name": "Fetch Rendered Image",
"type": "n8n-nodes-base.httpRequest",
"position": [
740,
550
],
"parameters": {
"url": "={{ $json.url }}",
"options": {
"response": {
"response": {
"responseFormat": "file"
}
}
}
},
"typeVersion": 4.2,
"alwaysOutputData": true
},
{
"id": "b99f1752-f6cd-4149-88c7-ba02975aeaf4",
"name": "Combine Image and Text",
"type": "n8n-nodes-base.merge",
"position": [
1180,
700
],
"parameters": {
"mode": "combine",
"options": [],
"combineBy": "combineAll"
},
"typeVersion": 3.2
},
{
"id": "c19ca9b7-3d0a-4f8a-be54-bff3b188c12a",
"name": "Publish on LinkedIn",
"type": "n8n-nodes-base.linkedIn",
"position": [
1440,
700
],
"parameters": {
"text": "={{ $('Compose LinkedIn Copy').item.json.output.post_title }}\n\n{{ $('Compose LinkedIn Copy').item.json.output.post_content }}\n{{ $('Compose LinkedIn Copy').item.json.output.hashtags }}\n\nLink to Github: {{ $json.content._links.html }}\n",
"person": "[YOUR_ID]",
"additionalFields": {
"visibility": "PUBLIC"
},
"shareMediaCategory": "IMAGE"
},
"credentials": {
"linkedInOAuth2Api": {
"id": "credential-id",
"name": ""
}
},
"typeVersion": 1
}
],
"active": false,
"pinData": [],
"settings": {
"availableInMCP": false,
"executionOrder": "v1"
},
"versionId": null,
"connections": {
"Combine Image and Text": {
"main": [
[
{
"node": "Publish on LinkedIn",
"type": "main",
"index": 0
}
]
]
},
"Map Content Fields": {
"main": [
[
{
"node": "Build Code HTML",
"type": "main",
"index": 0
}
]
]
},
"GitHub Push Listener": {
"main": [
[
{
"node": "Identify Changed Files",
"type": "main",
"index": 0
}
]
]
},
"Build Code HTML": {
"main": [
[
{
"node": "Render Code Image",
"type": "main",
"index": 0
}
]
]
},
"Read Text Content": {
"main": [
[
{
"node": "Compose LinkedIn Copy",
"type": "main",
"index": 0
}
]
]
},
"Binary to Property": {
"main": [
[
{
"node": "Store Image in Repo",
"type": "main",
"index": 0
}
]
]
},
"Render Code Image": {
"main": [
[
{
"node": "Fetch Rendered Image",
"type": "main",
"index": 0
}
]
]
},
"Retrieve Repo File": {
"main": [
[
{
"node": "Read Text Content",
"type": "main",
"index": 0
},
{
"node": "Binary to Property",
"type": "main",
"index": 0
}
]
]
},
"Store Image in Repo": {
"main": [
[
{
"node": "Combine Image and Text",
"type": "main",
"index": 0
}
]
]
},
"OpenRouter Chat Engine": {
"ai_languageModel": [
[
{
"node": "Compose LinkedIn Copy",
"type": "ai_languageModel",
"index": 0
}
]
]
},
"Identify Changed Files": {
"main": [
[
{
"node": "Retrieve Repo File",
"type": "main",
"index": 0
}
]
]
},
"Fetch Rendered Image": {
"main": [
[
{
"node": "Combine Image and Text",
"type": "main",
"index": 1
}
]
]
},
"Compose LinkedIn Copy": {
"main": [
[
{
"node": "Map Content Fields",
"type": "main",
"index": 0
}
]
]
},
"Structured JSON Parser": {
"ai_outputParser": [
[
{
"node": "Compose LinkedIn Copy",
"type": "ai_outputParser",
"index": 0
}
]
]
}
}
}