Skip to content

Commit

Permalink
fix: revert index
Browse files Browse the repository at this point in the history
  • Loading branch information
@danstarns
danstarns committed Aug 17, 2024
1 parent cb96b7f commit b61aec1
Showing 1 changed file with 159 additions and 67 deletions.
226 changes: 159 additions & 67 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,168 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>GrapesJS MJML Plugin</title>
<link
href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/grapesjs"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}

.cke_top {
background: #444 !important;
}
<head>
<meta charset="utf-8">
<title>GrapesJS MJML Plugin</title>
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}

.cke_chrome {
border: none !important;
}
.cke_top {
background: #444 !important;
}

.cke_toolgroup {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
</style>
</head>
.cke_chrome {
border: none !important;
}

<body>
<div id="gjs" style="height: 0px; overflow: hidden">
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text
>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</mj-text>
</mj-column>
.cke_toolgroup {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
</style>
</head>

<body>

<div id="gjs" style="height:0px; overflow:hidden">
<mjml>
<mj-head>
<mj-font name="Barlow" href="https://fonts.googleapis.com/css?family=Barlow"></mj-font>

<mj-style>
.slogan {
background: #000;
}
</mj-style>
</mj-head>
<mj-body>
<!-- Company Header -->
<mj-section background-color="#f0f0f0">
<mj-column border="10px solid #F45E43">
<mj-text font-family="Barlow">A first line of text</mj-text>
<mj-spacer height="50px" />
</mj-column>
</mj-section>

<!-- Image Header -->
<mj-section background-url="http://1.bp.blogspot.com/-TPrfhxbYpDY/Uh3Refzk02I/AAAAAAAALw8/5sUJ0UUGYuw/s1600/New+York+in+The+1960's+-+70's+(2).jpg"
background-size="cover" background-repeat="no-repeat">
<mj-column>
<mj-text css-class="slogan" align="center" color="#fff" font-size="40px" font-family="Helvetica Neue">Slogan here</mj-text>
<mj-button background-color="#F63A4D" href="#">
Promotion
</mj-button>
</mj-column>
</mj-section>

<!-- Intro text -->
<mj-wrapper background-color="#ffe9f7" padding="10px">
<mj-section background-color="#eaeffa">
<mj-group background-color="#fffadd">
<mj-column>
<mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">My Awesome Text</mj-text>
<mj-text color="#525252">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper.
Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec
commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
</mj-text>
<mj-button background-color="#F45E43" href="#">Learn more</mj-button>
</mj-column>
</mj-group>
</mj-section>
</mj-body>
</mjml>
</div>
</mj-wrapper>

<!-- Side image -->
<mj-section background-color="white">
<mj-column>
<mj-image width="200px" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg" />
</mj-column>
<mj-column>
<mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">
Find amazing places ...
</mj-text>
<mj-text color="#525252">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper.
Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.</mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262" align="center">
... with real-life images
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<div class="container">
<img class="item" src="https://source.unsplash.com/random/200x141?random" alt="Example image">
<img class="item" src="https://source.unsplash.com/random/200x142?random" alt="Example image">
<img class="item" src="https://source.unsplash.com/random/200x143?random" alt="Example image">
<img class="item" src="https://source.unsplash.com/random/200x144?random" alt="Example image">
<img class="item" src="https://source.unsplash.com/random/200x145?random" alt="Example image">
<img class="item" src="https://source.unsplash.com/random/200x146?random" alt="Example image">
</div>
</mj-raw>
<!-- Icons -->
<mj-section background-color="#fbfbfb">
<mj-column>
<mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x0l.png" />
</mj-column>
<mj-column>
<mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x01.png" />
</mj-column>
<mj-column>
<mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x0s.png" />
</mj-column>
</mj-section>

<!-- Footer -->
<mj-section background-color="#e7e7e7">
<mj-column>
<mj-button href="#">Hello There!</mj-button>
<mj-social font-size="15px" icon-size="30px" mode="horizontal">
<mj-social-element name="facebook" href="https://mjml.io/">
Facebook
</mj-social-element>
<mj-social-element name="google" href="https://mjml.io/">
Google
</mj-social-element>
<mj-social-element name="twitter" href="https://mjml.io/">
Twitter
</mj-social-element>
</mj-social>
</mj-column>
</mj-section>
<!-- Footer -->
</mj-body>
</mjml>
</div>


<script type="text/javascript">
// Wait for the plugin to be injected by the dev server
window.onload = () => {
window.editor = grapesjs.init({
height: '100%',
noticeOnUnload: false,
storageManager: false,
fromElement: true,
container: '#gjs',

<script type="text/javascript">
// Wait for the plugin to be injected by the dev server
window.onload = () => {
window.editor = grapesjs.init({
height: "100%",
noticeOnUnload: false,
storageManager: false,
fromElement: true,
container: "#gjs",
plugins: ['grapesjs-mjml'],
pluginsOpts: {
'grapesjs-mjml': {}
}
});
}
</script>
</body>

plugins: ["grapesjs-mjml"],
pluginsOpts: {
"grapesjs-mjml": {},
},
});
};
</script>
</body>
</html>

0 comments on commit b61aec1

Please sign in to comment.