You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

84 lines
1.7 KiB

  1. <template lang='pug'>
  2. v-app(:dark='darkMode').source
  3. nav-header
  4. v-content
  5. v-toolbar(color='primary', dark)
  6. .subheading Viewing source of page #[strong /{{path}}]
  7. template(v-if='$vuetify.breakpoint.mdAndUp')
  8. v-spacer
  9. .caption.blue--text.text--lighten-3 ID {{pageId}}
  10. v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') Return to Normal View
  11. v-card(tile)
  12. v-card-text
  13. v-card.grey.radius-7(flat, :class='darkMode ? `darken-4` : `lighten-4`')
  14. v-card-text
  15. pre
  16. code
  17. slot
  18. nav-footer
  19. notify
  20. search-results
  21. </template>
  22. <script>
  23. import { get } from 'vuex-pathify'
  24. export default {
  25. props: {
  26. pageId: {
  27. type: Number,
  28. default: 0
  29. },
  30. locale: {
  31. type: String,
  32. default: 'en'
  33. },
  34. path: {
  35. type: String,
  36. default: 'home'
  37. }
  38. },
  39. data() {
  40. return {}
  41. },
  42. computed: {
  43. darkMode: get('site/dark')
  44. },
  45. created () {
  46. this.$store.commit('page/SET_ID', this.id)
  47. this.$store.commit('page/SET_LOCALE', this.locale)
  48. this.$store.commit('page/SET_PATH', this.path)
  49. this.$store.commit('page/SET_MODE', 'history')
  50. },
  51. methods: {
  52. goLive() {
  53. window.location.assign(`/${this.path}`)
  54. }
  55. }
  56. }
  57. </script>
  58. <style lang='scss'>
  59. .source {
  60. pre > code {
  61. box-shadow: none;
  62. color: mc('grey', '800');
  63. font-family: 'Roboto Mono', sans-serif;
  64. font-weight: 400;
  65. font-size: 1rem;
  66. @at-root .theme--dark.source pre > code {
  67. background-color: mc('grey', '900');
  68. color: mc('grey', '400');
  69. }
  70. &::before {
  71. display: none;
  72. }
  73. }
  74. }
  75. </style>