1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-08-03 20:07:35 +02:00

notifications: refactor and add 3.3 changelog

This commit is contained in:
Kushagra Gour
2018-06-23 00:29:03 +05:30
parent a9f95c0903
commit 207e0e2a85

View File

@@ -1,51 +1,37 @@
import { h } from 'preact'; import { h } from 'preact';
import { A } from './common'; import { A } from './common';
export function Notifications(props) { function NotificationItem({ type, children }) {
var strongTag;
if (type === 'bug') {
strongTag = <strong>🔧 Bugfix</strong>;
} else if (type === 'a11y') {
strongTag = <strong> Accessibility</strong>;
}
return ( return (
<div> <li>
<h1>Whats new?</h1> {strongTag}: {children}
</li>
);
}
<div class="notification"> function ThanksTo({ name, url }) {
<span class="notification__version">3.2.0</span> return (
<ul> <a href={url} target="_blank" rel="noopener noreferrer">
<li> {' '}
<strong>🚀 Loop timeout setting</strong>: You now have a setting to {name}
tweak the maximum timeout of a loop iteration before it's marked as
infinite loop.
</li>
<li>
<strong>♿️ Accessibility</strong>: Modals now have proper keyboard
navigation integrated.
</li>
<li>
<strong>♿️ Accessibility</strong>: Color contrast improvements.
</li>
<li>
🚀 Popular libraries list updated. Thanks
<a
href="https://github.com/diomed"
target="_blank"
rel="noopener noreferrer"
>
@diomed
</a>{' '}
&{' '}
<a
href="https://github.com/leninalbertolp"
target="_blank"
rel="noopener noreferrer"
>
@leninalbertolp
</a> </a>
</li> );
<li> }
<strong>🔧 Bugfix</strong>: Modal take up appropriate width instead
of spanning full width.
</li>
<br /> function Notification({ version, isLatest, ...props }) {
<li> return (
<div class="notification">
<span class="notification__version">{version}</span>
<ul>{props.children}</ul>
{isLatest ? (
<div class="mt-2">
<p>
<strong>🚀 Announcement</strong>: Hi! I am Kushagra Gour (creator of <strong>🚀 Announcement</strong>: Hi! I am Kushagra Gour (creator of
Web Maker) and I have launched a Web Maker) and I have launched a
<a <a
@@ -53,6 +39,7 @@ export function Notifications(props) {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
{' '}
Patreon campaign Patreon campaign
</a>. If you love Web Maker, consider pledging to </a>. If you love Web Maker, consider pledging to
<a <a
@@ -60,11 +47,12 @@ export function Notifications(props) {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
{' '}
support me support me
</a>{' '} </a>{' '}
:) :)
</li> </p>
<li> <p>
<a <a
href="https://github.com/chinchang/web-maker/issues" href="https://github.com/chinchang/web-maker/issues"
target="_blank" target="_blank"
@@ -72,11 +60,11 @@ export function Notifications(props) {
> >
Suggest features or report bugs. Suggest features or report bugs.
</a> </a>
</li> </p>
<li> <p>
Web Maker now has more than 50K weekly active users! Thank you for Web Maker now has more than 50K weekly active users! Thank you for
being a part of this community of awesome developers. If you find being a part of this community of awesome developers. If you find
Web Maker helpful, Web Maker helpful,{' '}
<a <a
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
target="_blank" target="_blank"
@@ -102,37 +90,85 @@ export function Notifications(props) {
> >
Support the developer Support the developer
</A> </A>
</li> </p>
</ul>
</div> </div>
) : null}
</div>
);
}
export function Notifications(props) {
return (
<div>
<h1>Whats new?</h1>
<div class="notification"> <Notification version="3.3.0" isLatest={true} {...props}>
<span class="notification__version">3.1.1</span>
<ul>
<li> <li>
<strong>Bugfix</strong>: Fix the "Run" button not refreshing the <strong>🔥 [Dev] Code Refactor</strong>: I rewrote Web Maker. Yes, Web
preview after release 3.0.4. Maker's codebase has been ported from plain JS to{' '}
<a
href="https://preactjs.com/"
target="_blank"
rel="noopener noreferrer"
>
Preact
</a>. What does this mean for you as a end-user? This means that now
that the code is much smaller, more modular and maintainable. Hence,
future features can be developed more rapidly. So fasten your seat
belts, and get ready to use loads of new features coming your way in
next releases!<br />
<a
href="https://medium.com/web-maker/web-maker-ported-to-preact-85af98be8683"
target="_blank"
rel="noopener noreferrer"
>
Read more about this big code refactor
</a>.
</li> </li>
</ul> </Notification>
</div>
<div class="notification"> <Notification version="3.2.0" {...props}>
<span class="notification__version">3.1.0</span> <li>
<ul> <strong>🚀 Loop timeout setting</strong>: You now have a setting to
tweak the maximum timeout of a loop iteration before it's marked as
infinite loop.
</li>
<NotificationItem type="a11y">
Modals now have proper keyboard navigation integrated.
</NotificationItem>
<NotificationItem type="a11y">
Color contrast improvements.
</NotificationItem>
<li>
🚀 Popular libraries list updated. Thanks
<ThanksTo url="https://github.com/diomed" name="@diomed" /> &{' '}
<ThanksTo
url="https://github.com/leninalbertolp"
name="@leninalbertolp"
/>
</li>
<NotificationItem type="bug">
Modal take up appropriate width instead of spanning full width.
</NotificationItem>
</Notification>
<Notification version="3.1.1" {...props}>
<NotificationItem type="bug">
Fix the "Run" button not refreshing the preview after release 3.0.4.
</NotificationItem>
</Notification>
<Notification version="3.1.0" {...props}>
<li> <li>
<strong>Mobile Support (app only).</strong>: Make the Web Maker app <strong>Mobile Support (app only).</strong>: Make the Web Maker app
usable on mobile. This is only for web app as Chrome extensions usable on mobile. This is only for web app as Chrome extensions don't
don't run on mobile. run on mobile.
</li>
</ul>
</div>
<div class="notification">
<span class="notification__version">3.0.4</span>
<ul>
<li>
<strong>Bugfix</strong>: Guarantee code doesn't execute when "auto
preview" is off.
</li> </li>
</Notification>
<Notification version="3.0.4" {...props}>
<NotificationItem type="bug">
Guarantee code doesn't execute when "auto preview" is off.
</NotificationItem>
<li> <li>
Add link to our new Add link to our new
<a <a
@@ -144,18 +180,14 @@ export function Notifications(props) {
</a>{' '} </a>{' '}
🤗. 🤗.
</li> </li>
</ul> </Notification>
</div>
<div class="notification"> <Notification version="3.0.3" {...props}>
<span class="notification__version">3.0.3</span>
<ul>
<li> <li>
<strong>Bugfix (extension)</strong>: "Save as HTML" file saves with <strong>Bugfix (extension)</strong>: "Save as HTML" file saves with
correct extension. correct extension.
</li> </li>
</ul> </Notification>
</div>
<div class="notification"> <div class="notification">
<span class="notification__version">3.0.1</span> <span class="notification__version">3.0.1</span>
@@ -167,6 +199,7 @@ export function Notifications(props) {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
{' '}
Read the blog post about it Read the blog post about it
</a>. </a>.
</li> </li>
@@ -218,35 +251,21 @@ export function Notifications(props) {
> >
Tailwind CSS Tailwind CSS
</a>{' '} </a>{' '}
added to popular CSS libraries list. Thanks added to popular CSS libraries list. Thanks{' '}
<a <ThanksTo url="https://github.com/diomed" name="diomed" />.
href="https://github.com/diomed"
target="_blank"
rel="noopener noreferrer"
>
diomed
</a>.
</li> </li>
<li> <li>
Popular libraries list updated. Thanks Popular libraries list updated. Thanks{' '}
<a <ThanksTo url="https://github.com/diomed" name="diomed" />.
href="https://github.com/diomed"
target="_blank"
rel="noopener noreferrer"
>
diomed
</a>.
</li> </li>
<li> <li>
<strong>Dev</strong>: Bug fixes and code refactoring to make things <strong>Dev</strong>: Bug fixes and code refactoring to make things
simple. Thanks simple.{' '}
<a <ThanksTo
href="https://github.com/iamandrewluca" url="https://github.com/iamandrewluca"
target="_blank" name="iamandrewluca"
rel="noopener noreferrer" />{' '}
> .
iamandrewluca
</a>.
</li> </li>
</ul> </ul>
</div> </div>