Merge branch 'master' into os

Author: sboldyreva

docs/.vuepress/components/ComponentsUsage.md

@@ -0,0 +1,80 @@
+## Components: CodeWithCopy
+
+**Description**: 
+- Adds copy button to a code.
+- Suitable for both single/multiple lines in a *code-block*
+
+**Known issues**: 
+- Doesn't look nice on long code-lines, copy button overlays code. It's better to break such lines to several.
+
+**Usage example**:
+
+<CodeWithCopy>
+
+```text
+CODE
+```
+
+</CodeWithCopy>
+
+## Components: CodeTabs
+
+**Description**:
+
+- Designed to combine code, for example, one-purpose commands for different Linux systems.
+- Has a built-in copy button and scroll.
+
+**Usage example**:
+
+- Single line
+
+  <CodeTabs :tabs="[
+    { title: 'Option-1', content: `CODE` },
+    { title: 'Option-2', content: `CODE` }
+  ]" />
+
+- Multiple lines
+
+  <CodeTabs :tabs="[
+  { title: 'Option-1', content:
+  `CODE
+  CODE
+  CODE` },
+  { title: 'Option-2', content:
+  `CODE
+  CODE
+  CODE` }
+  ]" />
+
+## Components: TableTabs
+
+**Description**:
+
+- Designed to combine content (version-tables, text informtation, etc).
+- Lines help distinguish interactive content beginning and finish.
+- Has a drop-down selector to choose what content to show.
+- Each option in selector has a anchor to be able to get an individual link and send it to another person who will see the respective content when clicking the link.
+- A `label` can be added before selector as an option intro-phrase like *Choose version*.
+- Dropdown item names are written in respective templates as `#XX_YY_ZZ`, when rendering `_` will be replaced with space ` `.
+
+**Known issues**: 
+
+- Headings *inside* a selector option loose their linkability so instead better to proived to another person a link to the entire option.
+
+**Usage example**:
+
+<TableTabs label="Choose an extension: " >
+
+  <template #Extension_1>
+  
+  Any your content.
+
+  </template>
+
+  <template #Extension_2>
+  
+  Any your content.
+
+  </template>
+
+</TableTabs>

docs/.vuepress/components/TableTabs.vue

@@ -1,30 +1,100 @@
 <script setup>
-import { ref, computed, useSlots } from 'vue'
+import { ref, computed, useSlots, onMounted, watch, nextTick } from 'vue'
 
 const slots = useSlots()
 const tabKeys = Object.keys(slots)
 const activeTab = ref(tabKeys[0] ?? '')
 const currentTab = computed(() => activeTab.value)
+const wrapperRef = ref(null)
+
+function formatKey(key) {
+  return key.replace(/[__]/g, ' ')
+}
+
+defineProps({
+  label: {
+    type: String,
+    default: ''
+  }
+})
+
+onMounted(() => {
+  const hash = decodeURIComponent(window.location.hash.slice(1))
+  if (tabKeys.includes(hash)) {
+    activeTab.value = hash
+    nextTick(() => {
+      const el = wrapperRef.value
+      if (el) {
+        const offset = 80
+        const top = el.getBoundingClientRect().top + window.scrollY - offset
+        window.scrollTo({ top, behavior: 'smooth' })
+      }
+    })
+  }
+})
+
+watch(activeTab, (newVal) => {
+  if (newVal) {
+    history.replaceState(null, '', `#${encodeURIComponent(newVal)}`)
+  }
+})
 </script>
 
 <template>
-  <div class="table-tabs mt-8 border rounded-lg overflow-hidden text-sm">
-    <div class="bg-gray-50 flex justify-between items-center border-b">
-<!--  <span class="font-medium text-gray-700">Optional Text:span>   -->
-      <select
-        v-model="activeTab"
-        class="bg-white text-gray-800 text-sm rounded border-gray-300 focus:outline-none focus:ring-1 focus:ring-blue-500"
-      >
+  <div ref="wrapperRef" class="table-tabs" :id="activeTab">
+    <div class="tab-header">
+      <span v-if="label" class="label-text">
+        {{ label }}
+      </span>
+      <select v-model="activeTab" class="tab-select">
         <option v-for="key in tabKeys" :key="key" :value="key">
-          {{ key }}
+          {{ formatKey(key) }}
         </option>
       </select>
     </div>
 
-    <div class="tab-content prose prose-sm max-w-none">
+    <div class="tab-content">
       <slot :name="currentTab" />
     </div>
+
+    <div class="bottom-line" />
   </div>
 </template>
 
 
+<style scoped>
+.table-tabs {
+  background: #fff;
+  scroll-margin-top: 4rem;
+}
+
+.tab-header {
+  border-top: 1px solid #d1d5db;
+  padding: 1rem 0;
+}
+
+.label-text {
+  color: #314659;
+}
+
+.tab-select {
+  background-color: #fff;
+  color: #314659;
+  font-size: 0.9rem;
+  padding: 0.25rem 0.25rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  outline: none;
+}
+
+.tab-select:focus {
+  border-color: #5897fb;
+  box-shadow: 0 0 0 1px #5897fb;
+}
+
+.bottom-line {
+  border-top: 1px solid #d1d5db;
+  margin-top: 1rem; 
+}
+</style>
+

docs/.vuepress/routes.json

@@ -30,5 +30,16 @@
     "/els-for-languages/php/#download-tuxcare-php-windows": "/els-for-languages/php/#download-and-install-tuxcare-php-windows",
     "/els-for-languages/php/#configure-php": "/els-for-languages/php/#download-and-install-tuxcare-php-windows",
     "/els-for-languages/php/#add-php-to-the-system-path": "/els-for-languages/php/#download-and-install-tuxcare-php-windows",
-    "/els-for-os/#cloudlinux-6-els": "/els-for-os/"
+    "/els-for-os/#cloudlinux-6-els": "/els-for-os/",
+    "/els-for-languages/php/#additional-configurations-optional": "/els-for-languages/php/#Enabling_a_module",
+    "/els-for-languages/php/#enabling-a-module-through-default-ini": "/els-for-languages/php/#Enabling_a_module",
+    "/els-for-languages/php/#enabling-a-module-through-the-configuration-files": "/els-for-languages/php/#Enabling_a_module",
+    "/els-for-languages/php/#enabling-a-module-through-the-cli": "/els-for-languages/php/#Enabling_a_module",
+    "/els-for-languages/php/#listing-enabled-modules-on-a-specific-version": "/els-for-languages/php/#Listing_enabled_modules_on_a_specific_version",
+    "/els-for-languages/php/#location-of-default-ini": "/els-for-languages/php/#Location_of_default.ini",
+    "/els-for-languages/php/#location-of-ini-config-files": "/els-for-languages/php/#Location_of_ini_config_files",
+    "/els-for-languages/php/#running-code-on-a-specific-version-through-the-cli": "/els-for-languages/php/#Running_code_on_a_specific_version_through_the_CLI",
+    "/els-for-languages/php/#modules-and-pecl-extensions": "/els-for-languages/php/#Modules_and_pecl_extensions",
+    "/els-for-languages/php/#the-bin-files": "/els-for-languages/php/#The_bin_files",
+    "/els-for-languages/php/#how-to-use-php-els": "/els-for-languages/php/#Increase_upload_or_memory_limits"
 }