The bounty expires in 7 days. Answers to this question are eligible for a +250 reputation bounty.
Lars Nyström wants to draw more attention to this question.
My Laravel email notification prints blade component names instead of html element names in the output. Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -webkit-text-size-adjust: none; background-color: #ffffff; color: #718096; height: 100%; line-height: 1.4; margin: 0; padding: 0; width: 100% !important;">
<:message style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
# Hi,
<:button :url="$actionUrl" :color="$color" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
Open
</:button>
See ya!
<subcopy style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
If you're having trouble clicking the "Open" button, copy and paste the URL below
into your web browser: <span class="break-all" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; word-break: break-all;">[http://localhost:3000/](http://localhost:3000/)</span>
</subcopy>
</:message>
</body></html>
As you can see, there is a <:message> and a <:button> component in the output, but they should probably have been replaced with some html.
How can I fix this? I've tried publishing the notification views but that doesn't do anything. This is Laravel 9.
Edit
I understand there must be something wrong with my app, but I can reproduce this issue by doing the following (in my app):
Generate a new notification with php artisan make:notification MyNotification --markdown=emails.my-notification.
In routes/web.php, add:
Route::get("/test-notification", function () {
return (new \App\Notifications\MyNotification)->toMail(new \App\User);
});
The output when visiting /test-notification in a browser is (if you view the source of the page):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -webkit-text-size-adjust: none; background-color: #ffffff; color: #718096; height: 100%; line-height: 1.4; margin: 0; padding: 0; width: 100% !important;">
<:message style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
# Introduction
The body of your message.
<:button :url="''" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
Button Text
</:button>
Thanks,<br>
Laravel
</:message>
</body></html>
However, if I follow those two steps in a fresh Laravel 9 application, the output instead is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Laravel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">
<style>
#media only screen and (max-width: 600px) {
.inner-body {
width: 100% !important;
}
.footer {
width: 100% !important;
}
}
#media only screen and (max-width: 500px) {
.button {
width: 100% !important;
}
}
</style>
</head>
<body style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -webkit-text-size-adjust: none; background-color: #ffffff; color: #718096; height: 100%; line-height: 1.4; margin: 0; padding: 0; width: 100% !important;">
<table class="wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%; background-color: #edf2f7; margin: 0; padding: 0; width: 100%;">
<tr>
<td align="center" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<table class="content" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%; margin: 0; padding: 0; width: 100%;">
<tr>
<td class="header" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; padding: 25px 0; text-align: center;">
<a href="http://localhost" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #3d4852; font-size: 19px; font-weight: bold; text-decoration: none; display: inline-block;">
<img src="https://laravel.com/img/notification-logo.png" class="logo" alt="Laravel Logo" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; max-width: 100%; border: none; height: 75px; max-height: 75px; width: 75px;">
</a>
</td>
</tr>
<!-- Email Body -->
<tr>
<td class="body" width="100%" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%; background-color: #edf2f7; border-bottom: 1px solid #edf2f7; border-top: 1px solid #edf2f7; margin: 0; padding: 0; width: 100%; border: hidden !important;">
<table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 570px; background-color: #ffffff; border-color: #e8e5ef; border-radius: 2px; border-width: 1px; box-shadow: 0 2px 0 rgba(0, 0, 150, 0.025), 2px 4px 0 rgba(0, 0, 150, 0.015); margin: 0 auto; padding: 0; width: 570px;">
<!-- Body content -->
<tr>
<td class="content-cell" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; max-width: 100vw; padding: 32px;">
<h1 style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #3d4852; font-size: 18px; font-weight: bold; margin-top: 0; text-align: left;">Hello!</h1>
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">The introduction to the notification.</p>
<table class="action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%; margin: 30px auto; padding: 0; text-align: center; width: 100%;">
<tr>
<td align="center" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<tr>
<td align="center" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<tr>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
Notification Action
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">Thank you for using our application!</p>
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">Regards,<br>
Laravel</p>
<table class="subcopy" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; border-top: 1px solid #e8e5ef; margin-top: 25px; padding-top: 25px;">
<tr>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; line-height: 1.5em; margin-top: 0; text-align: left; font-size: 14px;">If you're having trouble clicking the "Notification Action" button, copy and paste the URL below
into your web browser: <span class="break-all" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; word-break: break-all;">http://localhost:50027</span></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<table class="footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 570px; margin: 0 auto; padding: 0; text-align: center; width: 570px;">
<tr>
<td class="content-cell" align="center" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; max-width: 100vw; padding: 32px;">
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; line-height: 1.5em; margin-top: 0; color: #b0adc5; font-size: 12px; text-align: center;">© 2023 Laravel. All rights reserved.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
So somewhere in my application, the resolution of blade components in markdown emails is disabled. I have run artisan view:clear to clear the cache. Maybe there are other caches in play?
I can also pinpoint that this problem was introduced when I upgraded Laravel from 9.34.0 to 9.35.0. I.e., with 9.34.0 the components resolve just fine, but in 9.35.0 and onwards I get the behavior described above.
To display a component, you may use a Blade component tag within one
of your Blade templates. Blade component tags start with the string x-
followed by the kebab case name of the component class:
<x-button/>
<x-user-profile/>
If the component class is nested deeper within the app/View/Components
directory, you may use the . character to indicate directory nesting.
For example, if we assume a component is located at
app/View/Components/Inputs/Button.php, we may render it like so:
<x-inputs.button/>
Reference: https://laravel.com/docs/10.x/blade#rendering-components
This is embarrassing, but I will own my mistake in the hope it helps someone else. In an edit to my question I wrote
So somewhere in my application, the resolution of blade components in markdown emails is disabled.
Turns out I actually have this in my AppServiceProvider:
class AppServiceProvider extends ServiceProvider
{
public function boot()
{
// ...
Blade::withoutComponentTags();
// ...
}
// ...
}
So yeah, I explicitly disabled blade component tags and then forgot about it... Sorry for wasting your time.
Note that the CSV file may or may not have multiple line breaks in each cell, and each split file must also be a valid CSV file.
I have tried using split, however, if I split by number of lines, it doesn't take into account that the CSV can have line breaks inside fields, and if I split by filesize, it sometimes cuts the last line of the file in half, meaning that it is no longer a valid CSV file.
You can find a test file here:
https://pastebin.com/raw/pw9PF9U1
It looks like this:
post_title,tax:wcpv_product_vendors,post_content
Product title 1,Sample,"<div class=""productdetails"">
<h2 style=""margin: 0px 0px 15px; line-height: 1.2; text-align: center;"">Title</h2>
<p style=""color: #333333; margin: 0px; font-size: 13px; line-height: 23.1111px; padding: 0px; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS';""><strong>Features:</strong></p>
<ul style=""padding: 0px 40px; margin: 0px; color: #333333; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; line-height: 20.8px;"">
<li style=""list-style: none;"">Testing testing</li>
<li style=""list-style: none;"">One two three</li>
</ul>
</div>"
Product title 2,Sample,"<div class=""productdetails"">
<h2 style=""margin: 0px 0px 15px; line-height: 1.2; text-align: center;"">Title</h2>
<p style=""color: #333333; margin: 0px; font-size: 13px; line-height: 23.1111px; padding: 0px; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS';""><strong>Features:</strong></p>
<ul style=""padding: 0px 40px; margin: 0px; color: #333333; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; line-height: 20.8px;"">
<li style=""list-style: none;"">Testing testing</li>
<li style=""list-style: none;"">One two three</li>
</ul>
</div>"
Product title 3,Sample,"<div class=""productdetails"">
<h2 style=""margin: 0px 0px 15px; line-height: 1.2; text-align: center;"">Title</h2>
<p style=""color: #333333; margin: 0px; font-size: 13px; line-height: 23.1111px; padding: 0px; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS';""><strong>Features:</strong></p>
<ul style=""padding: 0px 40px; margin: 0px; color: #333333; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; line-height: 20.8px;"">
<li style=""list-style: none;"">Testing testing</li>
<li style=""list-style: none;"">One two three</li>
</ul>
</div>"
Product title 4,Sample,"<div class=""productdetails"">
<h2 style=""margin: 0px 0px 15px; line-height: 1.2; text-align: center;"">Title</h2>
<p style=""color: #333333; margin: 0px; font-size: 13px; line-height: 23.1111px; padding: 0px; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS';""><strong>Features:</strong></p>
<ul style=""padding: 0px 40px; margin: 0px; color: #333333; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; line-height: 20.8px;"">
<li style=""list-style: none;"">Testing testing</li>
<li style=""list-style: none;"">One two three</li>
</ul>
</div>"
Product title 5,Sample,"<div class=""productdetails"">
<h2 style=""margin: 0px 0px 15px; line-height: 1.2; text-align: center;"">Title</h2>
<p style=""color: #333333; margin: 0px; font-size: 13px; line-height: 23.1111px; padding: 0px; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS';""><strong>Features:</strong></p>
<ul style=""padding: 0px 40px; margin: 0px; color: #333333; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; line-height: 20.8px;"">
<li style=""list-style: none;"">Testing testing</li>
<li style=""list-style: none;"">One two three</li>
</ul>
</div>"
Product title 6,Sample,"<div class=""productdetails"">
<h2 style=""margin: 0px 0px 15px; line-height: 1.2; text-align: center;"">Title</h2>
<p style=""color: #333333; margin: 0px; font-size: 13px; line-height: 23.1111px; padding: 0px; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS';""><strong>Features:</strong></p>
<ul style=""padding: 0px 40px; margin: 0px; color: #333333; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; line-height: 20.8px;"">
<li style=""list-style: none;"">Testing testing</li>
<li style=""list-style: none;"">One two three</li>
</ul>
</div>"
Product title 7,Sample,"<div class=""productdetails"">
<h2 style=""margin: 0px 0px 15px; line-height: 1.2; text-align: center;"">Title</h2>
<p style=""color: #333333; margin: 0px; font-size: 13px; line-height: 23.1111px; padding: 0px; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS';""><strong>Features:</strong></p>
<ul style=""padding: 0px 40px; margin: 0px; color: #333333; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; line-height: 20.8px;"">
<li style=""list-style: none;"">Testing testing</li>
<li style=""list-style: none;"">One two three</li>
</ul>
</div>"
Product title 8,Sample,"<div class=""productdetails"">
<h2 style=""margin: 0px 0px 15px; line-height: 1.2; text-align: center;"">Title</h2>
<p style=""color: #333333; margin: 0px; font-size: 13px; line-height: 23.1111px; padding: 0px; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS';""><strong>Features:</strong></p>
<ul style=""padding: 0px 40px; margin: 0px; color: #333333; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; line-height: 20.8px;"">
<li style=""list-style: none;"">Testing testing</li>
<li style=""list-style: none;"">One two three</li>
</ul>
</div>"
Product title 9,Sample,"<div class=""productdetails"">
<h2 style=""margin: 0px 0px 15px; line-height: 1.2; text-align: center;"">Title</h2>
<p style=""color: #333333; margin: 0px; font-size: 13px; line-height: 23.1111px; padding: 0px; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS';""><strong>Features:</strong></p>
<ul style=""padding: 0px 40px; margin: 0px; color: #333333; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; line-height: 20.8px;"">
<li style=""list-style: none;"">Testing testing</li>
<li style=""list-style: none;"">One two three</li>
</ul>
</div>"
Also note each row of the csv has a ^M symbol at the end of it when I open it in vim. That may be useful to split correctly.
Here's one in awk. You provide it with filename and the maximum number of "lines" (for example -v m=3) you want in one file and it splits the file (based on your data) on lines that do not start with < so basically the header and the product title lines:
$ awk -v m=3 'NR==1{j=0}{if($0!~/^</){i++;if(i>m){i=1;j++}};print > "split-" j}' file
$ ls -1rt
split-3
split-2
split-1
split-0
$ cat split-3
Product title 9,Sample,"<div class=""productdetails"">
<h2 style=""margin: 0px 0px 15px; line-height: 1.2; text-align: center;"">Title</h2>
<p style=""color: #333333; margin: 0px; font-size: 13px; line-height: 23.1111px; padding: 0px; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS';""><strong>Features:</strong></p>
<ul style=""padding: 0px 40px; margin: 0px; color: #333333; font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; line-height: 20.8px;"">
<li style=""list-style: none;"">Testing testing</li>
<li style=""list-style: none;"">One two three</li>
</ul>
</div>"
Explained:
awk -v m=3 ' # provide m
NR==1 { # on the first record
j=0 # set j to 0
}
{
if($0!~/^</) { # when a line not starting with a < is met
i++ # increase line counter
if(i>m) { # if line counter exceeds max
i=1 # reset it back to 1
j++ # split file name index
}
}
print > "split-" j # output
}' file
to split file.csv to 5 files
split -n 5 file.csv
If you need to support embedded newline characters,
then there is no easy way to do this right using Bash alone.
Otherwise split could have been a good choice.
You could implement a CSV parser (of your desired dialect) in Bash,
but it would be a lot of work for a fragile solution.
It's better to not use Bash for this,
but some other language with good library support for proper CSV parsing.
Such as Python,
which comes with a csv package included.
Here is a method that still makes split usable.
The incentive here is to use a null byte character \0 instead of a new line character \n as a record separator for splitting.
First, we can use sed to add a \0 to the beginning of each line that does not begin with <
sed 's/^[^<]/\x0&/' file.csv > file_tmp.csv
Next, we can use split as usual
split -n l/5 -t '\0' --filter='sed 's/\x0//g' > $FILE.csv' file_tmp.csv split_
-n l/5 splits file into roughly 5 equal parts without splitting records
-t '\0' uses the null byte character as a record separator
--filter='sed 's/\x0//g' > $FILE.csv' removes all null byte characters from splitted files
I have a horizontal navigation bar with the first link in the navigation bar "products" having a vertical drop down menu. This was working not long ago then when I added more content to this website today the sub menu for "products" disappeared, I do not know how to get it working again or why it stopped working in the first place.
Any ideas??
here is my code:
(the html part is in li class"products" in div id"navigation", and the css part for the sub menu is where I've commented "/products menu/". I've place all the code here as the error happened only after I added more code, it was working before. So maybe I have an error in other parts too which is preventing the sub menu from working, not sure though. )
html:
<body>
<div id="wrapperContainer">
<div id ="container">
<!-- header -->
<div id = "header">
<!-- logo -->
<div id = "logo">
<img src = "images/TelefunkenLogo.png" width="132" height="20"/>
</div>
<!-- close logo -->
<!-- contact/languages/flag -->
<div id = "rightHeader">
<ul>
<li>CONTACT</li>
<li onclick="location.href='#languageContainer';"><a href ="#" >SELECT COUNTRY</a></li>
<li class = "flag"><img src = "images/germany.png"/></li>
</ul>
</div>
<!-- close contact/languages/flag -->
</div>
<!-- close header -->
<!-- drop down language options -->
<div class="languageContainer">
<!-- left options-->
<div id="leftLanguageContainer">
<ul>
<li><img src = "images/england.png"/>INTERNATIONAL - English</li>
<li><a id="selectCountry" href="#"><img src = "images/germany.png"/>DEUTSCHLAND - Deutsch</a></li>
</ul>
</div>
<!-- close left options-->
<!-- cross -->
<a class="closeCross" title="Close" href="#">
<span></span>
</a>
<!-- close cross -->
</div>
<!-- close drop down language options -->
<!-- navigation -->
<div id="navigation">
<!-- menu items -->
<ul class="menu">
<li class="home"><img src="images/homeButton.png" alt="Telefunken"/></li>
<li class="products" >PRODUCTS
<ul class="subMenu">
<li><img src="images/product1.jpg" alt="Telefunken"/>some text</li>
<li><img src="images/product2.jpg" alt="Telefunken"/></li>
<li><img src="images/product3.jpg" alt="Telefunken"/></li>
<li><img src="images/product4.jpg" alt="Telefunken"/></li>
<li><img src="images/product5.jpg" alt="Telefunken"/></li>
<li><img src="images/product6.jpg" alt="Telefunken"/></li>
<li><img src="images/product7.jpg" alt="Telefunken"/></li>
<li><img src="images/product8.jpg" alt="Telefunken"/></li>
<li><img src="images/product9.jpg" alt="Telefunken"/></li>
</ul>
</li>
<li class="company">COMPANY</li>
<li class="service">SERVICE</li>
<li class="news">NEWS</li>
</ul>
<!-- close menu items -->
<!-- search function -->
<div id="searchWrapper">
<div id="search">
<form action="searchresult/" method="post" onsubmit="return searchAction(this)">
<input type="text" name="tx_indexedsearch[sword]" value>
<input type="hidden" id="searchProductUrl" name="searchProductURL" value="searchresultproducts/">
<select name="page"id="selectPage">
<option value="1">WEBSITE</option>
<option value="2">PRODUCTS</option>
</select>
<div id="submitButton">
<input type="submit" value class ="btnSubmit">
</div>
</form>
</div>
</div>
<!-- close search function -->
</div>
<!-- close navigation -->
</div>
<!-- close container -->
<div class="slider" >
<img src="images/sliderBkg.jpg" alt="alt text" width="100%" />
<div id="sliderImages">
<img class="img" style="width:983.5px; margin: 0 auto" src="images/sliderLEDTV.jpg">
<!--<img class="img" style="width:983.5px" src="images/sliderCamcorder.jpg">
<img class="img" style="width:983.5px" src="images/sliderSystemPa.jpg">-->
</div>
</div>
<!-- slider
<div class="slider" style="width:100%;">
<img class="img" style="width:983.5px" src="images/sliderLEDTV.jpg">
</div>-->
<!--<img class="img"src="images/sliderLEDTV.jpg">
<img class="img"src="images/sliderCamcorder.jpg">
<img class="img"src="images/sliderSystemPa.jpg">-->
<!-- close slider -->
<!-- lower content -->
<div id="lowerContent">
<div id="leftContent">
<h1>RECENT PRODUCTS</h1>
<div class="inline"><div id ="product1">
<img src="images/recentProducts1.jpg">
<h2>PORTABLE </br>STEREO RDS RADIO</h2>
<p>Some Text.</p>
<span class=">" style="font-size=0.7em; color:#F00; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> > </span> <span class="more" style="color:#000000; font-size:0.7em; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> more</span>
</div></div>
<div class="inline"><div id ="product2">
<img src="images/recentProducts2.jpg">
<h2>ICONCERTO </br>I-POD PLAYER</h2>
<p>Some Text.</p>
<span class=">" style="font-size=0.7em; color:#F00; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> > </span> <span class="more" style="color:#000000; font-size:0.7em; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> more</span>
</div></div>
<div class="inline"><div id ="product3">
<img src="images/recentProducts3.jpg">
<h2>T9HD </br>42" (106 CM) LOREM</h2>
<p>Some Text.</p>
<span class=">" style="font-size=0.7em; color:#F00; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> > </span> <span class="more" style="color:#000000; font-size:0.7em; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> more</span>
</div></div>
</div>
<div id="rightContent">
</div>
</div>
<!-- close lower content -->
<!-- footer -->
<div id="footer">
</div>
<!-- footer -->
</div>
</body>
css:
#charset "utf-8";
/* CSS Document */
/*all content sits in here*/
#wrapperContainer {
width:100%;
}
#container {
width:983.5px;
margin:0px auto;
}
h1 {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 1em;
color:#7f7f7f;
}
h2 {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 0.8em;
color:#000000;
}
p {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 0.7em;
color:#666666;
}
a:link {
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
color:#d34242;
}
/*header*/
#header {
margin: 0 auto;
padding: 20px 0 0px 0;
height: 60px;
width: 983px;
}
/*logo in header*/
#logo {
float: left;
}
/*links to the right of the header*/
#rightHeader {
float: right;
}
/*styling the header links*/
#rightHeader li {
display: inline;
list-style-type: none;
padding: 5px;
border-right:1px solid #dbdbdb;
padding-right:10px;
}
#rightHeader li a:link {
text-decoration: none;
font-size: 12px;;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #b2b2b2;
}
#rightHeader li a:visited {
text-decoration: none;
text-size: 0.01em;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #b2b2b2;
}
a.selectCountry:hover + .languageContainer {
visibility: visible;
}
#rightHeader li a:hover {
text-decoration: none;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #cc0000;
}
/*this is meant to display the language options when you click on 'select country'*/
.languageContainer {
cursor:pointer;
margin: 0 auto;
position:relative;
display:none;
padding: 20px 0 0px 0;
width: 983px;
height: 70px;
border:1px solid #b2b2b2;
}
/*language options*/
#leftLanguageContainer li {
display: inline;
float: left;
padding:30px;
margin-left:-40px;
padding-top:0px;
}
/*language options styling*/
#leftLanguageContainer li a:link {
text-decoration: none;
font-size: 9px;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #b2b2b2;
}
#leftLanguageContainer li a:visited {
text-decoration: none;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #b2b2b2;
}
#leftLanguageContainer li a:hover {
text-decoration: none;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #cc0000;
}
/*cross in the language container*/
a.closeCross {
background-image:url('images/closeCross.png');
display:block;
width:30px;
height:30px;
margin-top:-36px;
float:right;
overflow: hidden;
text-decoration:none;
}
a.closeCross:hover {
background-image:url('images/closeCrossHover.png');
}
/*main navigation*/
#navigation {
background-image:url(images/menuBkg.png);
background-repeat: no-repeat;
height:40px;
width:103%;
z-index:999;
position:absolute;
overflow:hidden;
}
/*setting height of the menu*/
.menu {
height:40px;
}
/*styling the home button*/
.menu li.home {
display:inline;
position:relative;
left:-40px;
top:-25px;
height:43px;
width:40px;
padding:0px;
}
/*products menu*/
.menu li ul.subMenu {
margin:0px;
display:none;
padding:0px;
background:#FFFFFF;
width:985px;
top:40px;
height:250px;
}
.menu li:hover ul.subMenu {
display:block;
width:970px;
}
.menu li li {
list-style:none;
display:list-item;
width:100%;
top:0px;
left:10px;
line-height:2px;
background:#FFFFFF;
}
.menu ul.subMenu li {
display:inline;
list-style:none;
position:relative;
}
.menu li ul.subMenu {
margin:0px;
padding:0px;
display:none;
position:absolute;
}
/* trying to set a width to each 'li' in the subMenu to get the text to move below the image
.menu li ul.subMenu li {
width:10px;
}*/
.subMenu a:hover {
color:#603;
/*border properties*/
}
/*end products menu*/
/*styling individual menu links*/
.products {
border-right: 1px solid #eaeaea;
border-left: 1px solid #c9c9c9;
}
.products:hover {
background-image:url(images/pressed2.jpg);
background-repeat: no-repeat;
top:-40px;
background-size: 120px 40px;
font-color: #FFFFFF;
color: #FFFFFF;
}
.company {
border-right: 1px solid #eaeaea;
border-left: 1px solid #c9c9c9;
width:120px;
}
.company:hover {
background-image:url(images/pressed2.jpg);
background-repeat: no-repeat;
top:-40px;
background-size: 120px 40px;
font-color: #FFFFFF;
color: #FFFFFF;
}
.service {
border-right: 1px solid #eaeaea;
border-left: 1px solid #c9c9c9;
margin-left:-4px;
}
.service:hover {
background-image:url(images/pressed2.jpg);
background-repeat: no-repeat;
top:-40px;
background-size: 120px 40px;
font-color: #FFFFFF;
color: #FFFFFF;
}
.news {
border-right: 1px solid #eaeaea;
border-left: 1px solid #c9c9c9;
margin-left:-4px;
}
.news:hover {
background-image:url(images/pressed2.jpg);
background-repeat: no-repeat;
top:-40px;
background-size: 120px 40px;
font-color: #FFFFFF;
color: #FFFFFF;
}
/*all menu links in navigation bar*/
.menu li {
display:inline;
position:relative;
bottom:45px;
right:50px;
width:130px;
height:43px;
padding:15px;
}
.menu li a:link {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:0.8em;
width:120px;
height:43px;
text-decoration:none;
color: #000000;
}
.menu li a:visited {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:0.8em;
width:120px;
height:43px;
text-decoration:none;
color: #000000;
}
.menu li a:hover {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:0.8em;
text-decoration:none;
color: #FFFFFF;
}
/*search bar in navigation*/
#searchWrapper {
height:100px;
left:212px;
/*float:right;*/
position:relative;
}
#search{
left:80px;
top:70px;
}
/*puts everything in the menu on the same line. */
.menu, #searchWrapper, #search, #submitButton {
display: inline-block;
vertical-align: top;
}
#submitButton {
z-index:1;
}
.btnSubmit {
border:0;
width:40px;
height: 40px;
top:10px;
background-image:url(images/rightArrow.jpg);
}
.btnSubmit:hover {
background-image:url(images/rightArrowPressed.jpg);
}
/*style slideshow*/
.slider {
height: 420px;
overflow:hidden;
}
#sliderImages {
}
/*#slideshow, #navigation {
display: inline-block;
vertical-align: top;
}
#slideshow {
margin-top:-40px;
margin-left: -30px;
}*/
#lowerContent{
margin: 0 auto;
padding: 0px 0 0px 0;
width: 983px;
}
#leftContent {
padding-left:10px;
width:750px;
display:inline;
}
.inline {
float: left;
}
#product1 {
width:240px;
border-right: 1px solid #dbdbdb;
}
#product2 {
width:240px;
padding-left:40px;
border-right: 1px solid #dbdbdb;
}
#product3 {
width:240px;
padding-left:40px;
border-right: 1px solid #dbdbdb;
}