Merge pull request bootstrap-vue#6623 from Hiws/specify-specific-cdn-versions

Issayah · web-flow · commit c597779a8296 · 2022-12-27T09:52:07.000-06:00
chore(docs): use specific bootstrap and vue versions for cdn links
diff --git a/docs/components/main-docs.js b/docs/components/main-docs.js
@@ -4,6 +4,7 @@ import QuickLinks from '~/components/quick-links'
 import Reload from '~/components/reload'
 import Section from '~/components/section'
 import { mergeData } from 'vue-functional-data-merge'
+import { bootstrapVersion, vueVersion } from '~/content'
 
 // @vue/component
 export default {
@@ -62,11 +63,25 @@ export default {
     const $quickLinks = h(QuickLinks)
 
     // Body section
-    const $bodySection = h(Section, {
-      props: { play: true },
-      domProps: { innerHTML: body || '' }
+    const $bodySectionContent = h({
+      delimiters: ['[[', ']]'], // change the delimiters to avoid conflicts with code examples
+      data() {
+        return {
+          bootstrapVersion,
+          vueVersion
+        }
+      },
+      template: `<div>${body}</div>`
     })
 
+    const $bodySection = h(
+      Section,
+      {
+        props: { play: true }
+      },
+      [$bodySectionContent]
+    )
+
     return h(Main, mergeData(data, { props: { tag } }), [
       $leadSection,
       $error,
diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md
@@ -712,14 +712,14 @@ JavaScript files.
 <!-- Add this to <head> -->
 
 <!-- Load required Bootstrap and BootstrapVue CSS -->
-<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
+<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@{{ bootstrapVersion }}/dist/css/bootstrap.min.css" />
 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
 
 <!-- Load polyfills to support older browsers -->
 <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
 
 <!-- Load Vue followed by BootstrapVue -->
-<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
+<script src="https://unpkg.com/vue@{{ vueVersion }}/dist/vue.min.js"></script>
 <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
 
 <!-- Load the following for BootstrapVueIcons support -->
diff --git a/docs/markdown/reference/starter-templates/README.md b/docs/markdown/reference/starter-templates/README.md
@@ -26,7 +26,7 @@ tags to load the required JavaScript and CSS in your page.
     <link
       type="text/css"
       rel="stylesheet"
-      href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
+      href="https://unpkg.com/bootstrap@[[ bootstrapVersion ]]/dist/css/bootstrap.min.css"
     />
     <link
       type="text/css"
@@ -38,7 +38,7 @@ tags to load the required JavaScript and CSS in your page.
     <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
 
     <!-- Required scripts -->
-    <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
+    <script src="https://unpkg.com/vue@[[ vueVersion ]]/dist/vue.js"></script>
     <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
   </head>
   <body>
diff --git a/docs/pages/docs/icons/index.js b/docs/pages/docs/icons/index.js
@@ -7,7 +7,13 @@ import Main from '~/components/main'
 import QuickLinks from '~/components/quick-links'
 import Section from '~/components/section'
 import docsMixin from '~/plugins/docs-mixin'
-import { icons as iconsMeta, bootstrapIconsVersion, bootstrapIconsCount } from '~/content'
+import {
+  icons as iconsMeta,
+  bootstrapIconsVersion,
+  bootstrapIconsCount,
+  bootstrapVersion,
+  vueVersion
+} from '~/content'
 import readmeData from '~/../src/icons/README.md'
 
 const { titleLead = '', body = '', baseTOC = {} } = readmeData
@@ -35,7 +41,9 @@ export default {
       // Key for icons meta is `''` (empty slug)
       meta: iconsMeta[''],
       bootstrapIconsVersion,
-      bootstrapIconsCount
+      bootstrapIconsCount,
+      bootstrapVersion,
+      vueVersion
     }
   },
   computed: {
diff --git a/src/icons/README.md b/src/icons/README.md
@@ -130,10 +130,10 @@ icons library:
 
 ```html
 <head>
-  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
+  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@{{ bootstrapVersion }}/dist/css/bootstrap.min.css" />
   <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
   <!-- Load Vue followed by BootstrapVue, and BootstrapVueIcons -->
-  <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
+  <script src="//unpkg.com/vue@{{ vueVersion }}/dist/vue.min.js"></script>
   <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
   <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
 </head>
@@ -143,10 +143,10 @@ If using just the icons:
 
 ```html
 <head>
-  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
+  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@{{ bootstrapVersion }}/dist/css/bootstrap.min.css" />
   <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.css" />
   <!-- Load Vue followed by BootstrapVueIcons -->
-  <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
+  <script src="//unpkg.com/vue@{{ vueVersion }}/dist/vue.min.js"></script>
   <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
 </head>
 ```
@@ -514,7 +514,7 @@ class to the icon component, or create a new animation class in the form of
   `prefers-reduced-motion` media query. See the
   [reduced motion section of our accessibility documentation](/docs/reference/accessibility#reduced-motion)
   for additional details.
-- The `cylon` animation gets its name from the "eye" of the Cylons from the _original_
+- The `cylon` animation gets its name from the "eye" of the Cylons from the *original*
   [1978 Battlestar Galactica TV series](https://www.youtube.com/watch?v=5a5bEIf0UaU).
 
 ## Stacking icons
