todd-alex
commented
1 week ago @SienciLabs I am not sure that this plugin is for deploying / rendering browser apps from markdown. I believe the focus is on automating and extending dealing with text and images in post workflows for Wordpress. I would recommend something like Vercel in your workflow to first deploy the app, get the URL, and maybe use iFrame in your markdown file.
Maybe it would even make it easier if there was a shortcode for iFrames.
But I would suggest to keep the application and WordPress content separate so you can reduce the potential for compatibility issues and maintain a clear boundary between content creation and application functionality.
Having Git It Write integrate WP post authoring workflows with Github is powerful.
For instance, you can setup a CI/CD workflow with YAML files like below in .github/workflows of your repo for each article. This example YAML below uses Vercel and Github actions to automate deployment and publishing with Vercel as well as updating the published URL in an iFrame placeholder tag inside of each of your articles you want that browser app in.
You can remove the loop if you don't need it.
name: Deploy to Vercel and Update Markdown Files
on:
push:
branches:
- main # Adjust this to the branch you want to deploy from
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout Code
uses: actions/checkout@v3
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: '16' # Use the Node.js version compatible with your project
- name: Install Dependencies
run: npm install
- name: Build Project
run: npm run build # Adjust this if your build process is different
- name: Prepare Script and Style Deployment
run: |
# Create necessary directories for custom scripts and styles
mkdir -p public/wp-content/react
# Download the JavaScript and CSS files
curl -o public/wp-content/react/wizard.js https://resources.sienci.com/wp-content/react/wizard.js
curl -o public/wp-content/react/wizard.css https://resources.sienci.com/wp-content/react/wizard.css
- name: Deploy to Vercel
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
run: |
npm install -g vercel
# Deploy to production and capture the published URL
URL=$(vercel --prod --token $VERCEL_TOKEN --confirm)
echo "Deployment URL: $URL"
echo "URL=$URL" >> $GITHUB_ENV # Save URL as an environment variable
- name: Update Markdown Files with iFrame
run: |
# Define the list of Markdown files to update
FILES=(
"path/to/article1.md"
"path/to/article2.md"
"path/to/article3.md"
# Add all your markdown files here
)
# Loop through each file and replace the placeholder with the iFrame
for FILE in "${FILES[@]}"; do
echo "Updating $FILE"
# Replace the placeholder with the iFrame containing the deployment URL
sed -i "s|<!-- URL_PLACEHOLDER -->|<iframe src=\"$URL\" width=\"100%\" height=\"600\"></iframe>|g" "$FILE"
done
- name: Commit and Push Changes
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
git config --global user.name "GitHub Actions"
git config --global user.email "actions@github.com"
git add path/to/article*.md # Adjust this pattern to match all your Markdown files
git commit -m "Update Markdown files with deployed URL"
git push
SienciLabs
vaakash
Hi @vaakash!
I've now been using your plugin quite successfully, I'm not sure if you'd like a donation that I can give somewhere to help support your project.
One remaining thing that would be very helpful, is that for some pages I have a custom browser app I import into my Wordpress pages with:
<script src="https://resources.sienci.com/wp-content/react/wizard.js"></script><style>@import url('https://resources.sienci.com/wp-content/react/wizard.css')</style>Right now, GIW seems to get stuck on these and instead only brings over
@import url('https://resources.sienci.com/wp-content/react/wizard.css')and then gets stuck and doesn't process to import the rest of the page content. Is there a simple rule that could be added to handle this type of content similar to how handling of other common HTML elements is already implemented? I just want the raw HTML to be delivered to the other side for the WordPress page to receive and host.Many thanks, Chris