This topic was automatically generated from Slack. You can find the original thread here.
I’m trying to take a document from GOOGLE DOCS to WordPress.
My biggest challenge is when I format the document in GOOGLE DOCS, the formatting doesn’t come over to WORDPRESS.
It sounds like you want to transfer the formatting from a Google Docs document to WordPress. To achieve this, you can use Pipedream’s pre-built components for Google and WordPress. First, you’ll need to use the Google Drive and Google Docs components to read the content of your Google Docs document. Then, you can use the WordPress component to create a new post with the content from the Google Docs document. Here’s a high-level outline of the steps you’ll need to follow: 1. Use the Google Drive component to list the files and find the Google Docs document you want to transfer. 2. Use the Google Docs component to read the content of the document. 3. Use the WordPress component to create a new post with the content from the Google Docs document. You can search for these components in the Pipedream UI and follow the instructions provided in the “Using the [Component Name]” sections of the respective component documentation. If you need further assistance or have any questions, please let me know!
Does Pipedream use Wordable?
Pipedream does not specifically use Wordable. However, you can create custom workflows in Pipedream to integrate with various apps and APIs, including Google Docs and WordPress. If you need help setting up a workflow or have any questions, feel free to ask!
What about Markdown?
If you want to convert between Markdown and HTML, you can use Pipedream’s Formatting app. There are two actions available: [Text] Convert Markdown to HTML and [Text] Convert HTML to Markdown. To use these actions in your workflow: 1. Search for the Formatting app from the step menu. 2. Select either the [Text] Convert Markdown to HTML action or the [Text] Convert HTML to Markdown action, depending on your needs. 3. Connect your Formatting account. 4. Select an input or pass a string from a previous step. 5. At the bottom of the step, click Test to run the action and test the configuration. For more details, you can refer to the following documentation: - Convert Markdown to HTML: https://pipedream.com/apps/formatting/actions/convert-markdown-to-html - Convert HTML to Markdown: https://pipedream.com/apps/formatting/actions/convert-html-to-markdown If you need further assistance or have any questions, please let me know!
This works nicely, but it’s stripping the H1 and H2 out and replacing them with P tags. Any suggestions?
I understand that the conversion from HTML to Markdown is causing issues with H1 and H2 tags being replaced with P tags. One possible solution is to use a custom code step in your Pipedream workflow to handle the conversion more accurately. You can use the turndown library to convert HTML to Markdown with more control over the conversion process. First, add a new code step in your workflow and include the following import at the top: import TurndownService from "turndown"; Then, you can create a new instance of TurndownService and customize the conversion rules as needed. Here’s an example: ```
const turndownService = new TurndownService(); // Add custom rules or modify existing ones if needed turndownService.addRule(“h1”, { filter: “h1”, replacement: (content) => # ${content}\n, }); turndownService.addRule(“h2”, { filter: “h2”, replacement: (content) => ## ${content}\n, }); // Assuming your HTML content is in a variable called htmlContent const markdown = turndownService.turndown(htmlContent);
Please explain where do I put this code?
My workflow starts with an HTTP trigger.
Then I pull the Google Doc.
To add the custom code to your workflow, follow these steps: 1. In your Pipedream workflow, you already have an HTTP trigger and a step to pull the Google Doc. After these steps, click on the “+” button to add a new step. 2. Select the “Code” option to add a code step. 3. In the code step, paste the custom code I provided earlier. Make sure to modify the code as needed to fit your specific use case, such as adjusting the input variables or customizing the conversion rules. 4. After adding the custom code, you can continue with your workflow, such as adding a WordPress component to create a new post with the converted Markdown content. Remember to replace the htmlContent variable in the code with the actual content you fetched from the Google Docs step. If you need further assistance or have any questions, please let me know!
Please alter the code so the htmlContent is a field.
Here’s the modified code with htmlContent as a prop: import TurndownService from "turndown"; export default defineComponent({ props: { htmlContent: { type: "string", label: "HTML Content", }, }, async run({ steps, $ }) { const turndownService = new TurndownService(); // Add custom rules or modify existing ones if needed turndownService.addRule("h1", { filter: "h1", replacement: (content) => `# ${content}\n`, }); turndownService.addRule("h2", { filter: "h2", replacement: (content) => `## ${content}\n`, }); // Use the input prop `htmlContent` const markdown = turndownService.turndown(this.htmlContent); return markdown; }, }); This code adds a htmlContent prop to the component, allowing you to input the HTML content directly in the Pipedream UI.
So, the Google Doc is formatted using regular Google markup. When I pull the document from Google Docs, I don’t see any HTML.
Is this normal?
Yes, it’s normal that you don’t see HTML when you pull the document from Google Docs, as the content is fetched in Google’s native format. To convert the Google Docs content to HTML, you can use the Google Docs API’s export method with the application/vnd.google-apps.document+html MIME type. Here’s an example of how to fetch the Google Doc content as HTML using a Pipedream component: import { axios } from "@pipedream/platform"; export default defineComponent({ props: { google: { type: "app", app: "google", }, documentId: { type: "string", label: "Document ID", }, }, async run({ steps, $ }) { const response = await axios(this, { url: `https://docs.googleapis.com/v1/documents/${this.documentId}/export`, method: "GET", responseType: "text", headers: { Authorization: `Bearer ${this.google.$auth.oauth_access_token}`, Accept: "application/vnd.google-apps.document+html", }, }); const htmlContent = response.data; return htmlContent; }, }); Replace documentId with the actual ID of the Google Doc you want to fetch. Once you have the HTML content, you can use the TurndownService code I provided earlier to convert the HTML to Markdown.
I only want to fetch a certain part of the document. I want to fetch what’s in between:
==== WORDPRESS START ===
and
==== WORDPRESS END ===
To fetch the content between ==== WORDPRESS START === and ==== WORDPRESS END === from the Google Doc’s HTML content, you can use the following code snippet after obtaining the HTML content using the Google Docs API export method: const startMarker = "==== WORDPRESS START ==="; const endMarker = "==== WORDPRESS END ==="; const startIndex = htmlContent.indexOf(startMarker) + startMarker.length; const endIndex = htmlContent.indexOf(endMarker); const contentBetweenMarkers = htmlContent.slice(startIndex, endIndex).trim(); Add this snippet after fetching the HTML content from the Google Doc using the code I provided earlier. The contentBetweenMarkers variable will contain the content between the specified markers. You can then use the TurndownService code to convert this extracted content to Markdown.
Please write that code in it’s entirely.
Here’s the complete code to fetch the Google Doc content as HTML, extract the content between the specified markers, and convert it to Markdown using TurndownService: import { axios } from "@pipedream/platform"; import TurndownService from "turndown"; export default defineComponent({ props: { google: { type: "app", app: "google", }, documentId: { type: "string", label: "Document ID", }, }, async run({ steps, $ }) { // Fetch the Google Doc content as HTML const response = await axios(this, { url: `https://docs.googleapis.com/v1/documents/${this.documentId}/export`, method: "GET", responseType: "text", headers: { Authorization: `Bearer ${this.google.$auth.oauth_access_token}`, Accept: "application/vnd.google-apps.document+html", }, }); const htmlContent = response.data; // Extract content between markers const startMarker = "==== WORDPRESS START ==="; const endMarker = "==== WORDPRESS END ==="; const startIndex = htmlContent.indexOf(startMarker) + startMarker.length; const endIndex = htmlContent.indexOf(endMarker); const contentBetweenMarkers = htmlContent.slice(startIndex, endIndex).trim(); // Convert the extracted content to Markdown using TurndownService const turndownService = new TurndownService(); const markdown = turndownService.turndown(contentBetweenMarkers); return markdown; }, }); Replace documentId with the actual ID of the Google Doc you want to fetch. This code will fetch the Google Doc content as HTML, extract the content between ==== WORDPRESS START === and ==== WORDPRESS END ===, and convert it to Markdown using TurndownService.
I received the following error message:
Error - Request failed with status code 404
"!DOCTYPE html\n<html lang=en>\n <meta charset=utf-8>\n <meta name=viewport content=\"initial-scale=1, minimum-scale=1, width=device-width\">\n <title>Error 404 (Not Found)!!1</title>\n <style>\n **{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}** > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}\n </style>\n <a href=//www.google.com/><span id=logo aria-label=Google></span></a>\n <p><b>404.</b> <ins>That's an error.</ins>\n <p>The requested URL <code>/v1/documents/1x83iPJ0bjNfVYmRsue-UDqjx_YQFDH_7cDfPoFmoihY/export</code> was not found on this server. <ins>That's all we know.</ins>\n"
I’m sorry you encountered a 404 error. It seems like the requested URL /v1/documents/1x83iPJ0bjNfVYmRsue-UDqjx_YQFDH_7cDfPoFmoihY/export was not found on the server. To help you further, I’ll need more information about the API you’re trying to access and the specific task you’re trying to accomplish. Please provide more details so I can assist you better.