Skip to content
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

fix: fix issue on prettifier #446

Merged
merged 4 commits into from
Oct 10, 2024
Merged

fix: fix issue on prettifier #446

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e214115
fix: fix issue on prettifier
gabyzif Oct 10, 2024
9eaab23
fix: add a tool that shrinks the svg to the correct viewport
gabyzif Oct 10, 2024
271bfd5
chore: rollback to prev implementation
gabyzif Oct 10, 2024
ee6fc7e
fix: remove svgo since we are not using it for
gabyzif Oct 10, 2024
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
123 changes: 36 additions & 87 deletions src/utils/svg-prettifier/prettifier.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,93 +1,42 @@
const fs = require('fs')
const http = require('http')
const path = require('path')
const multer = require('multer')

const { prettifySVG, savePrettifiedSVG } = require('../src/utils/svg-prettifier/prettifier.cjs') // Ensure correct path

const port = 8000

// Use memory storage for uploaded files
const storage = multer.memoryStorage()
const upload = multer({ storage: storage })

// Custom filename sanitizer
function sanitizeFileName(filename) {
return filename.replace(/[^a-z0-9\.\-_]/gi, '_') // Replace any non-alphanumeric characters (except . - _) with an underscore
const { JSDOM } = require('jsdom');
const fs = require('fs');
const path = require('path');

function prettifySVG(content) {
const { window } = new JSDOM(content);
const svgElement = window.document.querySelector('svg');

if (svgElement !== null) {
svgElement.removeAttribute('fill');
svgElement.querySelectorAll('path').forEach(pathElement => {
pathElement.removeAttribute('fill');
});

svgElement.setAttribute('fill', 'currentColor');
svgElement.removeAttribute('height');
svgElement.removeAttribute('width');

const viewBoxValue = svgElement.getAttribute('viewBox');
if (viewBoxValue !== '0 0 20 20') {
throw new Error('Error: The SVG must have a viewBox of 0 0 20 20 for the prettifier to process it correctly.');
}

return svgElement.outerHTML;
} else {
throw new Error('Invalid SVG content');
}
}

const server = http.createServer((req, res) => {
// Add CORS headers
res.setHeader('Access-Control-Allow-Origin', '*')
res.setHeader('Access-Control-Allow-Methods', 'POST')
res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
function savePrettifiedSVG(filePath, content) {
const fileName = path.basename(filePath, path.extname(filePath));
const targetDirectory = path.join(__dirname, '../../assets/svg');

if (req.method === 'OPTIONS') {
// Handle preflight requests
res.writeHead(204)
res.end()
return
if (!fs.existsSync(targetDirectory)) {
fs.mkdirSync(targetDirectory, { recursive: true });
}

if (req.method === 'POST' && req.url === '/api') {
upload.array('files')(req, res, err => {
if (err) {
console.error('Error uploading file:', err)
res.writeHead(500, { 'Content-Type': 'text/plain' })
res.end('Error uploading file')
return
}

// Accumulate success or error messages
const results = []
let hasErrors = false // Flag to check if any file failed

// Process each uploaded file
req.files.forEach(file => {
try {
const safeFileName = sanitizeFileName(file.originalname) // Use custom sanitizer
const content = file.buffer.toString('utf8')
const prettifiedSVG = prettifySVG(content)

// Destination path for the prettified SVG
const filePath = path.join(__dirname, '../src/assets/svg/', safeFileName)

// Check if the file already exists
if (fs.existsSync(filePath)) {
results.push({ file: file.originalname, status: 'error', message: 'File already exists' })
hasErrors = true // Mark that there is an error
return
}

// Save the prettified SVG
savePrettifiedSVG(filePath, prettifiedSVG)

// Add success message
results.push({ file: file.originalname, status: 'success' })
} catch (error) {
console.error(`Error prettifying file ${file.originalname}:`, error)
hasErrors = true // Mark that there is an error

// Add error message
results.push({ file: file.originalname, status: 'error', message: error.message })
}
})

// If there are errors, return a 400 Bad Request status
if (hasErrors) {
res.writeHead(400, { 'Content-Type': 'application/json' })
} else {
res.writeHead(200, { 'Content-Type': 'application/json' })
}

res.end(JSON.stringify(results)) // Send results as JSON
})
} else {
res.writeHead(404, { 'Content-Type': 'text/plain' })
res.end('Not found')
}
})
// Save the prettified SVG without sanitization
fs.writeFileSync(path.join(targetDirectory, `${fileName}.svg`), content);
}

server.listen(port, () => {
console.log(`Server is listening on port ${port}`)
})
module.exports = { prettifySVG, savePrettifiedSVG };
Loading