2.0.1 is giving error on my website now

avj2352 commented 6 years ago

Refused to apply style from 'https://unpkg.com/docsify-copy-code@2.0.1/styles.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

(index):1 Refused to execute script from 'https://unpkg.com/docsify-copy-code@2.0.1/index.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. (index):80 Uncaught TypeError: Cannot read property 'init' of undefined at (index):80

jperasmus commented 6 years ago

Hi @avj2352

Thanks for reporting this issue. Are you explicitly adding the stylesheet to your index.html file or just the javascript file? The reason I'm asking is that we made a change in the past day or so which you now don't need to add the stylesheet anymore.

Can you give me a code example of how you run the plugin, please?

avj2352 commented 6 years ago

@jperasmus : Sure, the errors are both to do with the stylesheet and script of copy-code so I will send the links as is in my file:

for CSS, this is the current link: < link rel="stylesheet" href="//unpkg.com/docsify-copy-code/styles.css" >
For JS, this is the current script tag:

jperasmus commented 6 years ago

Okay, thanks. You can remove the stylesheet completely and change your script tag to:

<script src="https://unpkg.com/docsify-copy-code"></script>

You can then also remove the part where you explicitly ran window.DocsifyCopyCodePlugin.init() since version 2 of this plugin does that for you now. Just be sure to add the script tag below the docsify configuration object.

adrianbj commented 6 years ago

Thanks for the instructions on how to get this working with the new version. Just wanted to note though that you now need to load the js file after window.$docsify whereas before it worked before.

Mohsens22 commented 6 years ago

It's not working for me

Mohsens22 commented 6 years ago

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Programming tips</title>
  <link rel="icon" href="docs/_media/favicon.ico">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="keywords" content="doc,programming,dotnet,goodpractices,mvc,tips,geeks,geeksltd">
  <meta name="description" content="Programming tips">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
  <link rel="stylesheet" href="//unpkg.com/docsify-copy-code/styles.css">
</head>
<body>
  <div id="app">Loading ...</div>
  <script>
    window.$docsify = {
      notFoundPage: 'docs/_media/404.md',
      auto2top: true,
      executeScript: true,
      loadSidebar: true,
      mergeNavbar: true,
      maxLevel: 4,
      subMaxLevel: 2,
      name: 'Programming Tips',
      search: {
        noData: {
          '/': 'No results!'
        },
        paths: 'auto',
        placeholder: {
          '/': 'Search'
        }
      },
      formatUpdated: '{MM}/{DD} {HH}:{mm}',
      plugins: [
        function (hook, vm) {
          hook.beforeEach(function (html) {
            var url = 'https://github.com/geeksltd/Programming.Tips/blob/master/' + vm.route.file
            var editHtml = '[:memo: Edit Document](' + url + ')\n'
            return editHtml
             + html
             + '\n\n----\n\n'
             + '<a href="https://www.geeks.ltd.uk/" target="_blank" style="color: inherit; font-weight: normal; text-decoration: none;">Powered by Geeks Ltd</a>'
          })
        },
      window.DocsifyCopyCodePlugin.init()
      ]

    }
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
  <script src="//unpkg.com/docsify-copy-code/"></script>
  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-csharp.min.js"></script>
</body>
</html>

adrianbj commented 6 years ago

You're still manually loading the css file and also calling the plugin init() - remove those and it should work.

nieyafei commented 6 years ago

the css file is not loaded

adrianbj commented 6 years ago

the css file is not loaded

line #12 of @mohsens22 's code above is:

<link rel="stylesheet" href="//unpkg.com/docsify-copy-code/styles.css">

nieyafei commented 6 years ago

@adrianbj Just seen, the source code has CSS code

Mohsens22 commented 6 years ago

I removed them the error is gone but the plugin does not seem to work

Mohsens22 commented 6 years ago

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Programming tips</title>
  <link rel="icon" href="docs/_media/favicon.ico">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="keywords" content="doc,programming,dotnet,goodpractices,mvc,tips,geeks,geeksltd">
  <meta name="description" content="Programming tips">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
</head>
<body>
  <div id="app">Loading ...</div>
  <script>
    window.$docsify = {
      notFoundPage: 'docs/_media/404.md',
      auto2top: true,
      executeScript: true,
      loadSidebar: true,
      mergeNavbar: true,
      maxLevel: 4,
      subMaxLevel: 2,
      name: 'Programming Tips',
      search: {
        noData: {
          '/': 'No results!'
        },
        paths: 'auto',
        placeholder: {
          '/': 'Search'
        }
      },
      formatUpdated: '{MM}/{DD} {HH}:{mm}',
      plugins: [
        function (hook, vm) {
          hook.beforeEach(function (html) {
            var url = 'https://github.com/geeksltd/Programming.Tips/blob/master/' + vm.route.file
            var editHtml = '[:memo: Edit Document](' + url + ')\n'
            return editHtml
             + html
             + '\n\n----\n\n'
             + '<a href="https://www.geeks.ltd.uk/" target="_blank" style="color: inherit; font-weight: normal; text-decoration: none;">Powered by Geeks Ltd</a>'
          })
        }
      ]

    }
  </script>
  <script src="//unpkg.com/docsify-copy-code/"></script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-csharp.min.js"></script>
</body>
</html>

jperasmus commented 6 years ago

Hi @mohsens22

You'll need to put the script tag below the docsify.min.js one like you have with the other plugins. Can be above or below search.min.js.

Also, I'm not 100% sure if it would make a difference, but there shouldn't be a / at the end, the script tag should look like this:

<script src="https://unpkg.com/docsify-copy-code"></script>

Mohsens22 commented 6 years ago

doesn't work

Mohsens22 commented 6 years ago

Now it does work

corradomatt commented 6 years ago

Thanks @jperasmus - that fixes it...and I can confirm that the / at the end of the line will break it.

jhildenbiddle commented 6 years ago

FYI...

The new URL allows unpkg.com to redirect requests to the appropriate file. This is better than linking directly to file because a developer may change file names or locations. Using the redirect makes this a non-issue.

As for the trailing slash...

Without slash = redirect to script file: https://unpkg.com/docsify-copy-code
With slash = list files in a package: https://unpkg.com/docsify-copy-code/

Appending a @[number] after the package name let's you specify a package version:

v1.xx redirect = https://unpkg.com/docsify-copy-code@1
v1.xx files = https://unpkg.com/docsify-copy-code@1/
v1.xx redirect = https://unpkg.com/docsify-copy-code@2
v1.xx files = https://unpkg.com/docsify-copy-code@2/

😄

gcphost commented 6 years ago

This completely broke my docsify site, only the index was working.

Thanks for the fixes, hope it can be avoided in the future.

jhildenbiddle commented 6 years ago

@gcphost Apologies for the breaking change. The changes made in 2.x along with the new install instructions should prevent this from happening in future releases.

If you find yourself linking to a CDN for a production site, it's safer to link directly to a specific version instead of the latest version. Semantic versioning rules indicate that a major version change (like v1.x => v2.x) includes breaking change(s). By that logic, it would be best to swap the order of the URLs presented in the README so folks are linking specifically to v2.x instead of the latest version to prevent a similar situation happening with future releases.

jhildenbiddle commented 6 years ago

FYI, we've made two small tweaks (#8) that should help alleviate the issues caused by the breaking changes in 2.0:

Updated: README now recommends a version-specific CDN URL. Specifying a version ensures that the release of a major update (v3.x) will not break a production site.
Added placeholder file and method to prevent v1 installations that point to the latest release (causing v2 to be downloaded) from throwing an error. These v1 sites will no longer have copy code functionality since they need to update their script src, but the site will no longer break as a result. A console message will be displayed in this scenario to let devs know that v2 has been released and new installation instructions are available.

Thanks!

jperasmus / docsify-copy-code

2.0.1 is giving error on my website now #7