GDPR Demo

Few More Embeds

Wed, 30 Dec 2020 09:04:07 GMT

Tweet Embed is here - Tweet

Youtube Caption - Youtube

Instagram Caption - Instagram

Vimeo Embed - Vimeo

Spotify Caption - Spotify

Codepen Embed - Codepen

Gist Embed - Gist

Embeds

Wed, 30 Dec 2020 09:01:15 GMT

hahahha


console.log('Hola')

Meet Draftbox

Hola
Nana
ddadada

This is image gallery

No	Name	Role
1	Shyam	Frontend
2	Keyur	Fullstack

Default image

Medium Image

Full size image

Post with cookies

Wed, 30 Dec 2020 08:45:10 GMT

At Draftbox, we're committed to providing the best reading experience to your users. We've hand-crafted WYSIWYG styling to achieve this goal.

Image With Caption

This is info notice

Warning Notice

Tip Notice

Headings

Here's a demo of headings with dummy text for reference:

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod eu est et suscipit. Aenean non nulla in tortor laoreet posuere.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod eu est et suscipit. Aenean non nulla in tortor laoreet posuere.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod eu est et suscipit. Aenean non nulla in tortor laoreet posuere.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod eu est et suscipit. Aenean non nulla in tortor laoreet posuere.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod eu est et suscipit. Aenean non nulla in tortor laoreet posuere.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod eu est et suscipit. Aenean non nulla in tortor laoreet posuere.

Here is a list of headings without dummy text:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Inline text elements

~~This line of text is meant to be treated as no longer accurate.~~

This line of text will render as underlined

This line rendered as bold text.

This line rendered as italicized text.

This text is in blockquote format.

List

Here's an unordered list of latin phrases:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Eget porttitor lorem

Here's an ordered list:

Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
Phasellus iaculis neque

What about image and image caption?

Don't worry! We've got you covered.

Image by NASA

That worked well, didn't it.

Here's an example of image gallery:

Image gallery of beautiful sunsets

But I often use YouTube, Twitter and other embeds

So do we – check this out:

One of the most watched video on YouTube

Here's one of the most retweeted tweet by Ellen DeGeneres:

Here's the countdown song from movie Inception:

Photo by Patrick Fore / Unsplash

thenumbersmagazine · Jay-Z 100 Bill- Great Gatsby Soundtrack

Southern California beach - post by Instagram

But can you handle code snippets?

We thought you'd never ask! Of course we can. Here's a snippet of code from vintage Facebook code repo:


my $id = $input{id};
my $user = $input{user};
my $code = $input{code};
my $course = 0;#$input{course};
my @node;my @edge;
\#my $db_data = Mysql->connect("69.28.179.12", "login", "mark", $pass);
my $db_data = Mysql->connect("$cookies{host}", "$cookies{db}", "mark", $pass);
my $map;
if ($ENV{'HTTP_HOST'} =\~ m/^(.\*)\\.thefacebook\\.com/) {    $map = $1;}

Codepen Embed

This is an inline link - https://draftbox.co

Following is a bookmark link [link as a card]

Draftbox | Publish blog with superpowers

We built Draftbox so you can focus on what matters — content. Leave your worries about performance, user experience, SEO, security, and scalability to us. Draftbox is a no-code JAMstack blogging platform, built on Gatsby.

Draftbox | Publish blog with superpowers

Have we missed something? Let us know in comments.

r/UsabilityPorn - [Sway on Void] Switched to using a high-contrast light theme a while ago and never looked back.

75 votes and 21 comments so far on Reddit

Built with Draftbox

Lightning fast, secure front-end for your WordPress or Ghost blog, without coding. Draftbox is a new-age blogging platform for everyone, built on Gatsby.

Built with Draftbox

Hello

Webpack 5 Federation: A game changer in JavaScript architecture

Module federation — The Javascript equivalent of what Apollo did with GraphQL. Multiple Webpack builds work together, sharing the dependency graph at runtime. Multiple bundles working as an SPA

The Startup

Welcome to Draftbox

Wed, 30 Dec 2020 08:18:46 GMT

We are excited to have you on-board. To give you a glimpse of what Draftbox is, we have populated it with sample posts.

A short story

We are building Draftbox on the promise of bringing JAMstack to content creators. We are very bullish on results when content creators can fully utilize JAMstack, and we want to empower them. Draftbox is a no-code JAMstack blogging platform that provides performance, user experience, SEO, security, and scalability without breaking a sweat.

Under the hood

Draftbox sites are created using Gatsby. Gatsby is a framework for building blazing-fast apps and websites. Gatsby has a flourishing ecosystem, strong community, and is being used by companies like Nike, Tinder, and AirBnB.

Draftbox sites are deployed to Netlify Edge. Netlify is a market leader in hosting services for static sites. Netlify has been at the forefront of the JAMstack revolution and loved by thousands of developers worldwide.

Next up — Draftbox Editor

As a content creator, you would be excited to learn what kind of content blocks you can add using editor.

BTW, you can delete these sample posts from dashboard.

Publish a blog with superpowers

Wed, 30 Dec 2020 08:18:46 GMT

We built Draftbox so you can focus on what matters — content. Leave your worries about performance, user experience, SEO, security, and scalability to us.

Get started — it's free

Simple. Fast. Secure. No-code JAMstack. Powered by Gatsby.

Advantages of having a Draftbox blog

Superpowers

Image optimization

Draftbox optimizes images and renders ones that are appropriate for the current screen resolution (desktop, mobile, table, and everything in between), providing faster load time and reduced time-to-interactive.

Caching

Draftbox with its intelligent caching mechanism and leveraging CDN functionalities from Netlify: stores, invalidates, and fetches resources (E.g. HTML, CSS, Images, and JavaScript) in the background without affecting user experience. Draftbox generates sites which are PWA compliant that provides potential performance improvements by leveraging the cache for almost instant page loads.

Prefetch pages

Draftbox prefetches resources of other pages when the current page has loaded. This mechanism provides smoother and faster navigation among internal pages. Due to prefetch, there is a considerable reduction in bounce rate and an increase in domain authority.

SEO optimization

Built-in support for metadata, descriptive text for links and images, canonical URLs, XML sitemaps helps you rank your site better. Rich metatags for Facebook Open Graph, Twitter Cards, and JSON-LD provide a beautiful representation of your articles on every part of the web.

Web Vitals

With Google adding Web Vitals as one of the factors in their holy search ranking algorithm. So what are core web vitals? These are real-world experience metrics that Google is looking at, that answer things like: How fast does the page load? How fast is it interactive? How fast is it stable? Draftbox sites are carefully crafted and regularly optimized to meet the standards set by Google and W3C.

AMP pages

Google prioritizes AMP pages in mobile search results. AMP becomes a critical part of your content strategy since most of the searches happen over mobile. Draftbox provides clean, elegant, and valid AMP pages for your articles without breaking a sweat.

Why Draftbox?

Draftbox replaces the mess of bloated plugins/template code editing for essential functionalities, slower/broken site, security issues with Gatsby-powered static site, and in-built integrations that just works.

Users will love your site's experience

Provide 10x better experience with pre-built pages served from global CDN in a jiffy. In-built caching and image optimization will ensure a better experience even for poor internet connection. Not only that, once loaded, Draftbox prefetches resources for other pages, so clicking around the site feels incredibly fast.

Google will love your site’s SEO

Google has made site speed an actual search ranking factor, and Draftbox leaves no stone unturned to help you rank better. Along with performance, Draftbox also provides in-built SEO optimization. Essentials like metadata, descriptive text for links and images, sitemap are covered along with in-built AMP page generation.

Stay green, stay ahead

Mobile-friendly experience

It takes less than a second for a mobile user to reach an opinion about your website, and Draftbox will ensure that you leave the first good impression. Along with responsive web design and clean layout, faster page load ensures a better experience for your users, even on mobile networks. AMP pages help increase visibility in organic search results on mobile.

Grow your audience

At Draftbox, we understand the importance of reaching out to as many users as you can, via different channels. In-built features like RSS feed, subscription form, social sharing and SEO optimization help you grow your audience via channels like RSS reader, mailing list, social sharing and search engines.

Build a great community

Analytics, forms, comments, and support are the 4 most essential pillars of nurturing a great community and providing them with the best content by understanding their behaviour, feedback, and engagement with your content. Draftbox provides all four pillars as in-built integrations.

Be ahead of the curve

Powerful editor built for pro content creators

Wed, 30 Dec 2020 08:18:46 GMT

At Draftbox, we're committed to providing the best writing experience to our creators. We've engineered a powerful editor to help you craft engaging and captivating content.

Heading 1

Heading 2

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod eu est et suscipit. Aenean non nulla in tortor laoreet posuere.

Inline text elements

~~This line of text is meant to be treated as no longer accurate.~~

This line of text will render as underlined

This line rendered as bold text.

This line rendered as highlighted text.

This line rendered as italicized text.

This text is in blockquote format.

List

Here's an unordered list of latin phrases:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Eget porttitor lorem

Here's an ordered list:

Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
Phasellus iaculis neque

Here’s a todo list:

List item 1
List item 2
List item 3

What about image and image caption?

Don't worry! We've got you covered.

Default size

Large size

Image gallery

Draftbox editor also supports embeds:

Our creators often embed social content in their blogs.

Our editors have tons of features for dev bloggers as well:

You can embed GitHub gist, CodePen, code snippets and even inline code. Here’s a snippet of code from vintage Facebook code repo:


my $id = $input{id};
my $user = $input{user};
my $code = $input{code};
my $course = 0;#$input{course};
my @node;my @edge;
\\#my $db_data = Mysql->connect("69.28.179.12", "login", "mark", $pass);
my $db_data = Mysql->connect("$cookies{host}", "$cookies{db}", "mark", $pass);
my $map;
if ($ENV{'HTTP_HOST'} =\\\~ m/^(.\\\*)\\\\.thefacebook\\\\.com/) {    $map = $1;}

Want to grab attention of your readers?

Notice blocks can be really helpful while writing long, text-heavy content.

This is an info note.

This is a warning note.

This is a tip.

And if there’s something missing, you can always add custom HTML snippets:

Here’s a callout added using HTML snippet:

Publish blog with superpowers

Learn more »

Link card

Here’s a link to Draftbox website in card format:

Draftbox | Publish blog with superpowers

Did we miss anything? Let us know in comments.