diff --git a/src/assets/css/prism-okaidia.css b/src/assets/css/prism-okaidia.css index fcb5fc4e..89201fc5 100644 --- a/src/assets/css/prism-okaidia.css +++ b/src/assets/css/prism-okaidia.css @@ -1,123 +1,127 @@ +/* PrismJS 1.20.0 +https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+bash+docker+git+graphql+http+json+json5+jsonp+markup-templating+php+plsql+python+sass+scss+sql+typescript */ /** * okaidia theme for JavaScript, CSS and HTML * Loosely based on Monokai textmate theme by http://www.monokai.nl/ * @author ocodia */ -code[class*="language-"], -pre[class*="language-"] { - color: #f8f8f2; - background: none; - text-shadow: 0 1px rgba(0, 0, 0, 0.3); - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; - border-radius: 0.3em; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: #272822; -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: slategray; -} - -.token.punctuation { - color: #f8f8f2; -} - -.token.namespace { - opacity: .7; -} - -.token.property, -.token.tag, -.token.constant, -.token.symbol, -.token.deleted { - color: #f92672; -} - -.token.boolean, -.token.number { - color: #ae81ff; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #a6e22e; -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string, -.token.variable { - color: #f8f8f2; -} - -.token.atrule, -.token.attr-value, -.token.function, -.token.class-name { - color: #e6db74; -} - -.token.keyword { - color: #66d9ef; -} - -.token.regex, -.token.important { - color: #fd971f; -} - -.token.important, -.token.bold { - font-weight: bold; -} -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} + code[class*="language-"], + pre[class*="language-"] { + color: #f8f8f2; + background: none; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 12px; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + } + + /* Code blocks */ + pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; + } + + :not(pre) > code[class*="language-"], + pre[class*="language-"] { + background: #272822; + } + + /* Inline code */ + :not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; + } + + .token.comment, + .token.prolog, + .token.doctype, + .token.cdata { + color: #8292a2; + } + + .token.punctuation { + color: #f8f8f2; + } + + .token.namespace { + opacity: .7; + } + + .token.property, + .token.tag, + .token.constant, + .token.symbol, + .token.deleted { + color: #f92672; + } + + .token.boolean, + .token.number { + color: #ae81ff; + } + + .token.selector, + .token.attr-name, + .token.string, + .token.char, + .token.builtin, + .token.inserted { + color: #a6e22e; + } + + .token.operator, + .token.entity, + .token.url, + .language-css .token.string, + .style .token.string, + .token.variable { + color: #f8f8f2; + } + + .token.atrule, + .token.attr-value, + .token.function, + .token.class-name { + color: #e6db74; + } + + .token.keyword { + color: #66d9ef; + } + + .token.regex, + .token.important { + color: #fd971f; + } + + .token.important, + .token.bold { + font-weight: bold; + } + .token.italic { + font-style: italic; + } + + .token.entity { + cursor: help; + } + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 855bfa3b..69bb44da 100755 --- a/src/main.js +++ b/src/main.js @@ -31,6 +31,7 @@ export default function (Vue, { router, head, appOptions, isClient, isServer }) Vue.use(Vuetify) Vue.use(Vuex) Vue.use(Vuelidate) + Vue.use(Prism) appOptions.store = new Vuex.Store({ state: { diff --git a/src/templates/WordPressBlog.vue b/src/templates/WordPressBlog.vue index 932715d1..6c9fd450 100644 --- a/src/templates/WordPressBlog.vue +++ b/src/templates/WordPressBlog.vue @@ -95,6 +95,10 @@ query ($id: ID!) { import Prism from 'prismjs' import ShareButtons from '~/components/ShareButtons' +import 'prismjs/components/prism-javascript' +import 'prismjs/components/prism-json' +import 'prismjs/components/prism-typescript' + export default { components: { ShareButtons diff --git a/src/templates/WordPressPost.vue b/src/templates/WordPressPost.vue index c0ddedf8..c26b26f0 100755 --- a/src/templates/WordPressPost.vue +++ b/src/templates/WordPressPost.vue @@ -127,7 +127,7 @@ export default { { key: `og:image`, property: `og:image`, - content: this.$page.wordPressPost.featuredMedia.sourceUrl, + content: this.$page.metadata.siteOgImage, }, { key: `og:title`, @@ -139,7 +139,7 @@ export default { }, { name: 'twitter:image', - content: this.$page.wordPressPost.featuredMedia.sourceUrl, + content: this.$page.metadata.siteOgImage, } ] }