feat: move landing page videos to cloudfare (#253)

* moved videos to cloudfare

* add custom domain

* add border to iframe

---------

Co-authored-by: Rotimi Best <[email protected]>
This commit is contained in:
Em_Dev
2024-04-11 21:25:29 +01:00
committed by GitHub
co-authored by Rotimi Best
parent 4ef1d7bf6c
commit 6c12411dca
11 changed files with 51 additions and 34 deletions
@@ -1,6 +1,5 @@
import { PUBLIC_SERVER_URL } from '$env/static/public';
var win, output, textarea;
// Follow this guide to get source code: https://editor.codecogs.com/docs/3-Tiny_MCE_v6.php
@@ -8,11 +7,11 @@ export const addMathPlugin = (tinymce: any) => {
tinymce.PluginManager.add('eqneditor', function (editor, url) {
// Load necessary javascript for editor from CodeCogs
var sl = new tinymce.dom.ScriptLoader();
sl.add('https://pub-19b235c5098f4ff1a6b1099331c8d00e.r2.dev/eqneditor.api.min.js');
sl.add('https://assets.cdn.clsrio.com/eqneditor.api.min.js');
var loaded = sl.loadQueue();
// Load custom CSS
tinymce.DOM.loadCSS('https://pub-19b235c5098f4ff1a6b1099331c8d00e.r2.dev/eqneditor_1.css');
tinymce.DOM.loadCSS('https://assets.cdn.clsrio.com/eqneditor_1.css');
editor.ui.registry.addIcon(
'logo',
@@ -90,24 +89,24 @@ export const addMathPlugin = (tinymce: any) => {
// The generated content always points to https://latex.codecogs.com/svg.image, this means we have to always rely on their server to serve formulas. We have a dedicated endpoint for generating formulas on our backend service: GET `/katex`. We will need to manually update the URL in the generate HTML to point to our server:
// https://latex.codecogs.com/svg.image
// 1. Get only the URL in the img tag generated by codecogs library
const srcRegex = /<img[^>]+src\s*=\s*['"]([^'"]+)['"][^>]*>/i;
const srcMatch = content.match(srcRegex);
if (srcMatch) {
// 2. Point the formula to our server
const customAPI = PUBLIC_SERVER_URL + '/katex'
const customAPI = PUBLIC_SERVER_URL + '/katex';
const url = srcMatch[1]?.replaceAll('https://latex.codecogs.com/svg.image', customAPI);
// 3. Fetch the HTML from the server
const response = await fetch(url);
const html = await response.text();
const html = await response.text();
// 4. Set the content to the html
content = `<p>${html}</p><p>&nbsp;</p>`;
} else {
console.error("No src attribute found in the img tag.");
console.error('No src attribute found in the img tag.');
}
tinymce.activeEditor.execCommand('mceInsertContent', false, content);