From c3de606ee6e23669ac6b8d70174b4e8b7c051b60 Mon Sep 17 00:00:00 2001
From: Sandro Ducceschi <ducceschi@ditoy.com>
Date: Tue, 21 May 2024 19:21:04 +0200
Subject: [PATCH] ADDED: new codeblock pageblock

---
 package.json                                  |   1 +
 src/components/blocks/Codeblock.vue           | 393 ++++++++++++++++++
 .../blocks/subcontent/ArticleCodeblock.vue    | 236 +++++++++++
 src/views/PageFactory.vue                     |   8 +
 src/views/news/detail.vue                     |   7 +
 5 files changed, 645 insertions(+)
 create mode 100644 src/components/blocks/Codeblock.vue
 create mode 100644 src/components/blocks/subcontent/ArticleCodeblock.vue

diff --git a/package.json b/package.json
index e2289da..03fc1c1 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "dayjs": "^1.11.3",
     "gsap": "^3.10.4",
     "intl-tel-input": "^17.0.18",
+    "prismjs": "^1.29.0",
     "slugify": "^1.6.6",
     "vue": "^2.6.11",
     "vue-cookies": "^1.8.1",
diff --git a/src/components/blocks/Codeblock.vue b/src/components/blocks/Codeblock.vue
new file mode 100644
index 0000000..7e831e7
--- /dev/null
+++ b/src/components/blocks/Codeblock.vue
@@ -0,0 +1,393 @@
+<template>
+  <div
+    class="code-block"
+    :class="{ margined: setAsH1, reversed: variation === 'text-right', 'is-first': isFirst }"
+    :style="computedStyles">
+    <div class="container">
+      <div>
+        <h1 v-if="setAsH1" class="h1" v-html="boxTitle" :data-slug="slugged" />
+        <h2 v-else class="h1" v-html="boxTitle" :data-slug="slugged" />
+        <p v-html="boxContent"></p>
+        <Button class="primary" v-if="hasButton">
+          <router-link v-if="button.type === 'int'" :to="`/${$i18n.locale}${button.url}`">
+            {{ button.text }}
+          </router-link>
+          <a v-if="button.type === 'ext'" :href="`${button.url}`" target="_blank">
+            {{ button.text }}
+          </a>
+        </Button>
+        <template v-if="hasButton && hasFile">
+          &nbsp;
+        </template>
+        <Button class="primary" v-if="hasFile">
+          <a :href="downloadLink(file.id)" target="_blank">{{file.text}}</a>
+        </Button>
+
+      </div>
+      <div>
+        <pre><code :class="`language-${language}`">{{ code }}</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import config from '@/directus/config';
+import slugify from 'slugify';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-cmake';
+import 'prismjs/components/prism-docker';
+import 'prismjs/components/prism-git';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/themes/prism.css';
+
+const { API_URL } = config;
+
+export default {
+  name: 'Codeblock',
+  components: {},
+  //---------------------------------------------------
+  //
+  //  Properties
+  //
+  //---------------------------------------------------
+  props: {
+    boxTitle: {
+      type: String,
+      default: 'Titel',
+    },
+    boxContent: {
+      type: String,
+      default: '',
+    },
+    code: {
+      type: String,
+      default: null,
+    },
+    language: {
+      type: String,
+      default: null,
+    },
+    bgColor: {
+      type: String,
+      default: null,
+    },
+    titleColor: {
+      type: String,
+      default: null,
+    },
+    textColor: {
+      type: String,
+      default: null,
+    },
+    linkColor: {
+      type: String,
+      default: null,
+    },
+    media: {
+      type: Array,
+      default: null,
+    },
+    variation: {
+      type: String,
+      default: 'text-left',
+    },
+    isFirst: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  //---------------------------------------------------
+  //
+  //  Data model
+  //
+  //---------------------------------------------------
+  data() {
+    return {
+      setAsH1: false,
+      imageDescription: null,
+    };
+  },
+  //---------------------------------------------------
+  //
+  //  Computed Properties
+  //
+  //---------------------------------------------------
+  computed: {
+    computedStyles() {
+      const {
+        bgColor,
+        titleColor,
+        textColor,
+        linkColor,
+      } = this;
+
+      let out = '--hcolor:initial;';
+      if (titleColor) {
+        out += `--hcolor:${titleColor};`;
+      }
+      if (bgColor) {
+        out += `background-color:${bgColor};`;
+      }
+      if (textColor) {
+        out += `color:${textColor};`;
+      }
+      if (linkColor) {
+        out += `--lcolor:${linkColor};`;
+      }
+      return out;
+    },
+    image() {
+      const media = this.media || [];
+      if (media.length > 0 && media[0]) {
+        return media[0];
+      }
+      return null;
+    },
+    hasFile() {
+      const { file } = this;
+      return file && file.id && file.text;
+    },
+    hasButton() {
+      const { button } = this;
+      return button && button.url && button.text;
+    },
+    slugged() {
+      const title = (this.boxTitle || '').replace(/<\/?[^>]+(>|$)/g, '');
+      return slugify(title, { lower: true, strict: true });
+    },
+  },
+  //---------------------------------------------------
+  //
+  //  Watch Properties
+  //
+  //---------------------------------------------------
+  watch: {},
+  //---------------------------------------------------
+  //
+  //  Filter Properties
+  //
+  //---------------------------------------------------
+  // filters: {},
+  //---------------------------------------------------
+  //
+  //  Validation Properties
+  //
+  //---------------------------------------------------
+  // validations: {},
+  //---------------------------------------------------
+  //
+  //  Vue Lifecycle
+  //
+  //---------------------------------------------------
+  // beforeCreate() {},
+  // created() {},
+  // beforeMount() {},
+  // render(h) { return h(); },
+  async mounted() {
+    const h1 = document.querySelector('h1');
+    if (!h1 && window.h1Set !== true) {
+      this.setAsH1 = true;
+      window.h1Set = true;
+    }
+    if (this.code && this.language) {
+      Prism.highlightAll();
+    }
+    /*
+    const media = this.media || [];
+    if (media.length > 0 && media[0]) {
+      const resp = await fetch(`${API_URL}/files/${media[0]}?fields=description`);
+      const data = await resp.json();
+      console.log(data);
+    }
+    */
+  },
+  // beforeUpdate() {},
+  // updated() {},
+  // beforeDestroy() {},
+  // destroyed() {},
+  //---------------------------------------------------
+  //
+  //  Methods
+  //
+  //---------------------------------------------------
+  methods: {
+    downloadLink(linkID) {
+      return `${API_URL}/assets/${linkID}?download`;
+    },
+    //----------------------------------
+    // Event Handlers
+    //----------------------------------
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~scss/mixins';
+
+.code-block {
+  & > div {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 32px;
+    padding-top: 100px;
+    padding-bottom: 100px;
+
+    > div:first-child {
+      width: 50%;
+      min-width: 50%;
+    }
+
+    > div:last-child {
+      width: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      & > pre {
+        box-shadow: 0 0 8px -2px rgba(0, 0, 0, .1);
+      }
+
+    }
+
+    @include breakpoint('sm') {
+      flex-direction: column;
+      padding-top: 45px;
+      // padding-bottom: 45px;
+
+      > div:first-child {
+        width: 100%;
+      }
+
+      > div:last-child {
+        width: 100%;
+
+        & > img {
+          max-width: 280px;
+        }
+      }
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: var(--hcolor);
+    }
+
+    h1 {
+      font-weight: 300;
+      margin-bottom: 48px;
+
+      span {
+        font-weight: 300;
+      }
+    }
+
+    p {
+      font-weight: 300;
+
+      a {
+        font-family: inherit;
+        font-size: inherit;
+        color: var(--lcolor, var(--color-blue));
+        text-decoration: underline;
+      }
+    }
+
+    .btn.primary {
+      margin-top: 32px;
+
+      @include breakpoint('sm') {
+        margin-top: 24px;
+      }
+    }
+  }
+
+  &.is-first {
+    & > div {
+      padding-top: 200px;
+
+      @include breakpoint('s') {
+        padding-top: 150px;
+      }
+    }
+  }
+
+  &.white {
+    color: var(--color-white);
+  }
+
+  &.no-bottom {
+    & > div {
+      padding-bottom: 0;
+    }
+  }
+
+  &.reversed {
+    & > div {
+      flex-direction: row-reverse;
+      gap: 64px;
+
+      > div:first-child {
+        width: 55%;
+        min-width: 55%;
+      }
+
+      > div:last-child {
+        width: 35%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        & > img {
+          width: 100%;
+          max-width: 400px;
+          height: auto;
+        }
+      }
+
+      @include breakpoint('sm') {
+        flex-direction: column;
+        padding-top: 45px;
+
+        > div:first-child {
+          width: 100%;
+        }
+
+        > div:last-child {
+          width: 100%;
+
+          & > img {
+            max-width: 280px;
+          }
+        }
+      }
+    }
+  }
+
+  &.fullwidth {
+    & > div {
+      > div:first-child {
+        width: 100%;
+        min-width: 100%;
+      }
+
+      > div:last-child {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/blocks/subcontent/ArticleCodeblock.vue b/src/components/blocks/subcontent/ArticleCodeblock.vue
new file mode 100644
index 0000000..9933925
--- /dev/null
+++ b/src/components/blocks/subcontent/ArticleCodeblock.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="container" :id="slugged">
+    <div class="article-text-block">
+      <div>
+        <h2 v-html="title" :data-slug="hashSlug"></h2>
+        <Button class="primary" v-if="buttonTarget">
+          <router-link :to="`/${$i18n.locale}${buttonTarget}`" v-if="buttonType === 'int'">
+            {{buttonLabel}}
+          </router-link>
+          <a :href="`${buttonTarget}`" target="_blank" v-if="buttonType === 'ext'">
+            {{buttonLabel}}
+          </a>
+        </Button>
+      </div>
+      <div>
+        <p v-html="content"></p>
+        <template v-if="code && language">
+          <p>
+            <pre><code :class="`language-${language}`">{{ code }}</code></pre>
+          </p>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import slugify from 'slugify';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-cmake';
+import 'prismjs/components/prism-docker';
+import 'prismjs/components/prism-git';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/themes/prism.css';
+
+export default {
+  name: 'ArticleCodeblock',
+  components: {},
+  //---------------------------------------------------
+  //
+  //  Properties
+  //
+  //---------------------------------------------------
+  props: {
+    title: String,
+    content: String,
+    code: {
+      type: String,
+      default: null,
+    },
+    language: {
+      type: String,
+      default: null,
+    },
+    buttonLabel: {
+      type: String,
+      default: null,
+    },
+    buttonTarget: {
+      type: String,
+      default: null,
+    },
+    buttonType: {
+      type: String,
+      default: null,
+    },
+  },
+  //---------------------------------------------------
+  //
+  //  Data model
+  //
+  //---------------------------------------------------
+  data() {
+    return {};
+  },
+  //---------------------------------------------------
+  //
+  //  Computed Properties
+  //
+  //---------------------------------------------------
+  computed: {
+    slugged() {
+      if (this.title) {
+        return this.title.toLowerCase()
+          .replace(/\s/g, '-')
+          .replace(/(<([^>]+)>)/ig, '')
+          .replace(/[~`!@#$%^&*()+={}[\];:'"<>.,/\\?]/g, '');
+      }
+      return '';
+    },
+    hashSlug() {
+      const title = (this.title || '').replace(/<\/?[^>]+(>|$)/g, '');
+      return slugify(title, { lower: true, strict: true });
+    },
+  },
+  //---------------------------------------------------
+  //
+  //  Watch Properties
+  //
+  //---------------------------------------------------
+  watch: {},
+  //---------------------------------------------------
+  //
+  //  Filter Properties
+  //
+  //---------------------------------------------------
+  // filters: {},
+  //---------------------------------------------------
+  //
+  //  Validation Properties
+  //
+  //---------------------------------------------------
+  // validations: {},
+  //---------------------------------------------------
+  //
+  //  Vue Lifecycle
+  //
+  //---------------------------------------------------
+  // beforeCreate() {},
+  // created() {},
+  // beforeMount() {},
+  // render(h) { return h(); },
+  mounted() {
+    if (this.code && this.language) {
+      Prism.highlightAll();
+    }
+  },
+  // beforeUpdate() {},
+  // updated() {},
+  // beforeDestroy() {},
+  // destroyed() {},
+  //---------------------------------------------------
+  //
+  //  Methods
+  //
+  //---------------------------------------------------
+  methods: {
+    //----------------------------------
+    // Event Handlers
+    //----------------------------------
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~scss/mixins';
+@import '~scss/variables';
+
+.article-text-block {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+  padding-top: 80px;
+  width: 100%;
+  gap: 32px;
+
+  @include breakpoint('sm') {
+    padding-top: 32px;
+  }
+
+  > div:first-child {
+    flex: 1 0 40%;
+    padding-right: 16px;
+    position: sticky;
+    max-width: 40%;
+    top: 110px;
+
+    @include breakpoint('sm') {
+      flex: initial;
+      padding-right: 0;
+      position: initial;
+      top: initial;
+    }
+
+    h2 {
+      margin-top: 0;
+    }
+
+    @include breakpoint('sm') {
+      h2 {
+        margin-top: 0;
+        margin-bottom: 32px;
+      }
+    }
+  }
+
+  > div:last-child {
+    width: 100%;
+  }
+
+  p {
+    @include style-body('large');
+    font-weight: 400;
+    flex: 1 0 52%;
+    width: 100%;
+    min-width: 52%;
+
+    ::v-deep a {
+      color: var(--color-blue);
+      text-decoration: underline;
+      @include style-body('large');
+      word-break: break-all;
+    }
+
+    ::v-deep pre {
+      font-size: 16px;
+      line-height: 1;
+      font-weight: normal;
+      box-shadow: 0 0 8px -2px rgba(0, 0, 0, .1);
+      letter-spacing: normal;
+    }
+  }
+
+  @include breakpoint('sm') {
+    flex-direction: column;
+  }
+}
+
+div.container {
+  margin: 0 auto;
+  padding: 0 20px !important;
+}
+</style>
diff --git a/src/views/PageFactory.vue b/src/views/PageFactory.vue
index dbfbb85..680bb3c 100644
--- a/src/views/PageFactory.vue
+++ b/src/views/PageFactory.vue
@@ -30,6 +30,14 @@
         :media="block.media"
         :variation="block.variation"
       />
+      <Codeblock
+        :is-first="blockIndex === 0"
+        v-if="block.blocktype === 'codeblock'"
+        :box-title="block.title"
+        :box-content="block.content"
+        :code="block.code"
+        :language="block.language"
+      />
       <div class="container embed" v-if="block.blocktype === 'embed'" v-html="block.html" />
       <div class="container" v-if="block.blocktype === 'linklist'">
         <LinkList
diff --git a/src/views/news/detail.vue b/src/views/news/detail.vue
index 9ab6492..563e558 100644
--- a/src/views/news/detail.vue
+++ b/src/views/news/detail.vue
@@ -18,6 +18,13 @@
           :button-type="block.button.type"
           :button-label="block.button.text"
         />
+        <ArticleCodeblock
+          v-if="block.blocktype === 'codeblock'"
+          :title="block.title"
+          :content="block.content"
+          :code="block.code"
+          :language="block.language"
+        />
         <div class="container -long" v-if="block.blocktype === 'highlight'">
           <div class="container">
             <SingleQuote