fzankl / docsify-plugin-flexible-alerts Goto Github PK

docsify plugin to convert blockquotes into beautiful and configurable alerts using preconfigured or own styles and alert types.

License: MIT License

JavaScript 63.92% SCSS 36.08%

docsify docsify-plugin alert blockquote hint callout

docsify-plugin-flexible-alerts's Introduction

Hi 👋 I'm Fabian

Expert Distributed IIoT-Software Solutions

I work as an Expert Distributed IIoT Software Solutions and have a passion for Azure, .NET and Angular.

🌍 I'm based in Germany
🖥️ See my portfolio at fzankl.de
✉️ You can contact me at [email protected]

Skills

Socials

Badges

GitHub Stats

docsify-plugin-flexible-alerts's People

Contributors

Stargazers

Watchers

Forkers

jamuszyn zhying214 kylefairns lkhzb enjoytoshare liminany velocat pivoto whyisee 1148260649 tian0zhi wisdom798

docsify-plugin-flexible-alerts's Issues

Supporting Dark Mode for callout style

I really like the boxes :) But in dark mode they stay white.

Regards,
Tim

About Chinese and description errors

I want use chinese label ,I rewrote here

var l = (t || "").match(new RegExp(e + ":(([\\w\\s\\u4e00-\\u9fa5]*))"));

/<\s*blockquote[^>]*>(?:<p>|[\S\n]*)?\[!(\w*)((?:\|[\w*:[\u4e00-\u9fa5\w\s]+)*?)\]([\s\S]*?)(?:<\/p>)?<\s*\/\s*blockquote>/g,

and in README.md Have an error

iconVisibility:false

GET https://use.fontawesome.com/releases/v5.6.3/css/fontawesome.css net::ERR_TIMED_OUT

First of all, I really like this plugin，but i have something wrong.
my docsify loading slowly, the console message is 【fontawesome】fail to load

i had try to download fontawesome, and import relevant document in index.html
after doing this, fontawesome can work, but docsify still loading slowly due to the fail request

Is there a way to solve it, i really really love this plugin~~

how to delete the blank line between icons and main body

unpkg.com CDN broken

Looks like using unpgk.com as CDN is broken:

Steps to reproduce

Include unpkg.com CDN snippet in the index.html:

<script src="https://unpkg.com/docsify-plugin-flexible-alerts"></script>

Expected behaviour

No 404 in console.

Using jsdelivr.com works without errors:

<script src="https://cdn.jsdelivr.net/npm/docsify-plugin-flexible-alerts@latest/dist/docsify-plugin-flexible-alerts.min.js"></script>

Actual behaviour

unpkg.com produced this error in the Google Chrome Console:

DevTools failed to load SourceMap: Could not load content for https://unpkg.com/docsify-plugin-flexible-alerts.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Possible fixes

I'm not familiar with how unpkg.com works - what I've noticed is, that https://unpkg.com/docsify-plugin-flexible-alerts would work:

curl -I https://unpkg.com/docsify-plugin-flexible-alerts.min.js.map
HTTP/2 404
date: Tue, 09 Feb 2021 06:00:03 GMT

curl -I https://unpkg.com/docsify-plugin-flexible-alerts
HTTP/2 302
date: Tue, 09 Feb 2021 05:59:41 GMT

How use use font-awesome after deprecation?

I think there must be some swizzle to enable font-awesome again after the dependency removal?

label bug

This custom label will not resolve correctly:

> [!TIP|label:An example of pom.xml]
> This is the description.

As you could see, if you put a dot in label, the whole message box will instantly break.
This really annoying me, please fix this!

In order to get the Attention one must write [!DANGER]

Instead of

> [!ATTENTION]
> An alert of type 'note' using global style 'callout'.

one must write

> [!DANGER]
> An alert of type 'note' using global style 'callout'.

I suggest mentioning this in readme file or changing the example

I am not able to use it

I really like the style of your plugin but I am not able to make it to work.
Maybe you can help me to understand what I am doing wrong.

Here the files.

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      'flexible-alerts': {
        style: 'flat'
      }
    };
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
  <!-- Latest -->
  <script src="https://unpkg.com/docsify-plugin-flexible-alerts"></script>
</body>
</html>

<!-- README.md -->
Test
==============

[!NOTE]
An alert of type 'note' using global style 'callout'.

Unable to display

The two "alerts" together will result in the above cannot be displayed

index.html

bans.md

Webpage

problem

"Tip" cannot be displayed

nothing happening after configuring this plugin

I'm doing the step-by-step guide but I cannot see any change.
to reproduce it, please see zivl/sentry-testkit#35

Can't get custom font-awesome icons to work

So I've been trying to use a custom icon, and I cant get it to render at all.

So for example, this is my alert heading where I'm trying to use the microchip icon from fa.

> [!NOTE|label:Specs|icon:fas fa-microchip]

I've tried it with icon:fas-fa-microchip as well as icon:fa-microchip and neither seems to work. I then thought it was maybe this specific Icon, so I tried many other ones from the site as well as the example listed in the README ("fa fa-comments") and nothign worked.

I double checked the source of the docsify-plugin-flexible-alerts .js file I'm using, and it does seem to be successfully pulling in the Font Awesome 5.6.3.

Am I missing something about how to use custom Icons, or is there really a bug here?

Thanks guys
Nico

Support for `[!Important]`

GitHub's markdown now supports [!Note], [!Important], and [!Warning], but not [!Tip] or [!Attention].

Currently docsify-plugin-flexible-alerts is missing [!Important]. Would be nice to get that one, to maximize compatibility with GitHub.

Great plugin btw!

Small issue with TIP

Hi,
I have just noticed that, at least using themeable, the Tip callout has more padding and two icons. Please see the screenshot below.

Before

Temporarily solving the issue is as simple as adding:

.markdown-section .tip:before {
	content: unset;
}

.markdown-section .tip {
	padding: .75rem 1.25rem;
}