wip

Author: NicolasRichel

.gitignore

@@ -1,3 +1,3 @@
 node_modules
-
-src/.vuepress/dist
+src/.vitepress/cache
+src/.vitepress/dist

package-lock.json

@@ -2,23 +2,24 @@
   "name": "documentation",
   "version": "1.0.0",
   "description": "BIMData documentation",
+  "type": "module",
   "main": "index.js",
   "authors": {
     "name": "BIMData",
     "email": "support@bimdata.io"
   },
   "repository": "https://github.com/bimdata/documentation",
   "scripts": {
-    "dev": "NODE_OPTIONS=--openssl-legacy-provider vuepress dev src",
-    "build": "vuepress build src"
+    "dev": "vitepress dev src",
+    "build": "vitpress build src"
   },
   "license": "MIT",
   "devDependencies": {
-    "@bimdata/design-system": "0.3.20",
-    "sass": "^1.79.3",
-    "sass-loader": "^10.5.2",
+    "@bimdata/design-system": "2.3.0",
+    "sass": "^1.97.3",
     "swagger-ui": "^5.31.0",
     "swagger-ui-dist": "4.1.3",
-    "vuepress": "^1.9.10"
+    "vitepress": "^1.6.4",
+    "vue": "^3.5.28"
   }
 }

package.json

@@ -1,25 +1,27 @@
 <template>
-  <div class="bimdata-documentation__home">
-    <Navbar />
+  <div class="bimdata-design-system bimdata-documentation__home">
+    <!-- <Navbar /> -->
     <section class="bimdata-documentation__home__header m-b-48">
       <h1 class="bimdata-h1">Documentation</h1>
       <div class="home_illustration flex items-center justify-center m-b-18">
-        <img :src="$withBase('/assets/img/home_illu.svg')" alt="" />
+        <img src="/images/home/home_illu.svg" alt="" />
       </div>
       <div class="home_links flex justify-center">
         <BIMDataCard>
           <template #content>
-            <img :src="$withBase('/assets/img/bimdata_icon-viewer.svg')" alt="" />
+            <img src="/images/home/bimdata_icon-viewer.svg" alt="" />
             <h3 class="color-primary">Viewer</h3>
-            <p>BIMData provides you a customizable 3D Viewer, to see and manipulate your models.</p>
+            <p>
+              BIMData provides you a customizable 3D Viewer, to see and manipulate your models.
+            </p>
             <RouterLink to="/viewer/">
               <BIMDataButton width="165px" color="primary" fill radius>Viewer</BIMDataButton>
             </RouterLink>
           </template>
         </BIMDataCard>
         <BIMDataCard>
           <template #content>
-            <img :src="$withBase('/assets/img/bimdata_icon-api.svg')" alt="" />
+            <img src="/images/home/bimdata_icon-api.svg" alt="" />
             <h3 class="color-primary">API</h3>
             <p>
               BIMData's API provides you tools to upload IFCs, manage your files and retreive your
@@ -32,7 +34,7 @@
         </BIMDataCard>
         <BIMDataCard>
           <template #content>
-            <img :src="$withBase('/assets/img/bimdata_icon-on_premises.svg')" alt="" />
+            <img src="/images/home/bimdata_icon-on_premises.svg" alt="" />
             <h3 class="color-primary">On-Premises</h3>
             <p>
               BIMData's On-Premises provides you the possibility to host our solutions on your
@@ -55,7 +57,7 @@
         <BIMDataCard class="m-r-12" borderRadius="6px">
           <template #content>
             <div class="flex items-center justify-center m-b-24">
-              <img :src="$withBase('/assets/img/bimdata_icon-ifc.svg')" alt="" />
+              <img src="/images/home/bimdata_icon-ifc.svg" alt="" />
             </div>
             <h4 class="color-primary">IFC</h4>
             <p>
@@ -73,7 +75,7 @@
         <BIMDataCard class="m-r-12" borderRadius="6px">
           <template #content>
             <div class="flex items-center justify-center m-b-24">
-              <img :src="$withBase('/assets/img/bimdata_icon-bcf.svg')" alt="" />
+              <img src="/images/home/bimdata_icon-bcf.svg" alt="" />
             </div>
             <h4 class="color-primary">BCF</h4>
             <p>Access, create, share, export your BCFs with our BCF API.</p>
@@ -88,7 +90,7 @@
         <BIMDataCard class="m-r-12" borderRadius="6px">
           <template #content>
             <div class="flex items-center justify-center m-b-24">
-              <img :src="$withBase('/assets/img/bimdata_icon-open_source.svg')" alt="" />
+              <img src="/images/home/bimdata_icon-open_source.svg" alt="" />
             </div>
             <h4 class="color-primary">Open source</h4>
             <p>You can install our platform on your own server.</p>
@@ -100,7 +102,7 @@
         <BIMDataCard class="m-r-12" borderRadius="6px">
           <template #content>
             <div class="flex items-center justify-center m-b-24">
-              <img :src="$withBase('/assets/img/bimdata_icon-plugin.svg')" alt="" />
+              <img src="/images/home/bimdata_icon-plugin.svg" alt="" />
             </div>
             <h4 class="color-primary">Plugin</h4>
             <p>Develop your own plugins to increase the efficiency of your tools.</p>
@@ -115,7 +117,7 @@
         <BIMDataCard borderRadius="6px">
           <template #content>
             <div class="flex items-center justify-center m-b-24">
-              <img :src="$withBase('/assets/img/bimdata_icon-viewer_sdk.svg')" alt="" />
+              <img src="/images/home/bimdata_icon-viewer_sdk.svg" alt="" />
             </div>
             <h4 class="color-primary">Viewer SDK</h4>
             <p>You can develop, test, build, package and share your plugin easily.</p>
@@ -129,11 +131,11 @@
     <section class="bimdata-documentation__home__ds p-y-24">
       <div class="flex items-center">
         <div class="bimdata-documentation__home__ds__img">
-          <img :src="$withBase('/assets/img/bimdata_img-ds.png')" alt="" />
+          <img src="/images/home/bimdata_img-ds.png" alt="" />
         </div>
         <div class="bimdata-documentation__home__ds__right">
           <div class="bimdata-documentation__home__ds__right--icon">
-            <img :src="$withBase('/assets/img/design-system_logo.png')" alt="" />
+            <img src="/images/home/design-system_logo.png" alt="" />
           </div>
           <h2 class="bimdata-h2 m-b-12">Design System</h2>
           <p class="color-granite m-y-12">
@@ -156,23 +158,24 @@
       </p>
       <p class="bimdata-text color-granite">
         Your data will be treated in accordance with our
-        <a href="https://bimdata.io/en/terms-of-services/" class="color-primary" target="_blank"
-          >Privacy Policy</a
-        >, which sets out the rights you have in respect of your data.
+        <a href="https://bimdata.io/en/terms-of-services/" class="color-primary" target="_blank">
+          Privacy Policy
+        </a>
+        , which sets out the rights you have in respect of your data.
       </p>
     </section>
     <section class="bimdata-documentation__home__footer p-y-42">
       <h2 class="bimdata-h2 m-b-12">Ready to build ?</h2>
       <div class="flex justify-center items-center">
         <a href="https://connect.bimdata.io/" target="_blank">
-          <BIMDataButton width="125px" color="secondary" fill radius class="m-r-18"
-            >Sign up</BIMDataButton
-          >
+          <BIMDataButton width="125px" color="secondary" fill radius class="m-r-18">
+            Sign up
+          </BIMDataButton>
         </a>
         <a href="https://form.typeform.com/to/cQIOr6zI" target="_blank">
-          <BIMDataButton width="125px" color="default" fill radius class="m-l-18"
-            >Contact us</BIMDataButton
-          >
+          <BIMDataButton width="125px" color="default" fill radius class="m-l-18">
+            Contact us
+          </BIMDataButton>
         </a>
       </div>
     </section>
@@ -181,43 +184,46 @@
 
 <script>
 import { BIMDataButton, BIMDataCard } from "@bimdata/design-system";
-//import BIMDataCard from "@bimdata/design-system/dist/js/BIMDataComponents/BIMDataCard.js";
-
-import Navbar from "@vuepress/theme-default/components/Navbar.vue";
+// import { VPNavBar } from "vitepress/theme";
 
 export default {
   components: {
     BIMDataCard,
     BIMDataButton,
-    Navbar,
+    // Navbar,
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../../node_modules/@bimdata/design-system/dist/css/design-system.css";
-@import "../../../node_modules/@bimdata/design-system/dist/scss/_BIMDataVariables.scss";
+@import "../../../node_modules/@bimdata/design-system/src/assets/css/design-system.css";
+
 .bimdata-documentation__home {
   /* custom HEADER HOME */
   &__header {
     margin-top: calc(60px + 34px);
+
     h1 {
       text-align: center;
     }
+
     .home_links {
       width: 100%;
+
       .bimdata-card {
         margin-right: 53px;
         padding: 16px;
         max-width: 330px;
         text-align: center;
+
         img {
           margin: auto;
           height: 220px;
           display: flex;
           align-items: center;
           justify-content: center;
         }
+
         h3 {
           position: relative;
           &::after {
@@ -227,24 +233,28 @@ export default {
             height: 2px;
             bottom: -7px;
             left: calc(50% - (16px / 2));
-            background-color: $color-secondary;
+            background-color: var(--color-secondary);
           }
         }
+
         p {
           margin: 18px 0;
           min-height: 60px;
           display: flex;
           align-items: center;
         }
+
         .bimdata-btn {
           margin: auto;
         }
+
         &:last-child {
           margin-right: 0;
         }
       }
     }
   }
+
   /* custom CONTENT & QUESTIONS & FOOTER HOME */
   &__content,
   &__questions,
@@ -260,12 +270,13 @@ export default {
       line-height: 1.5;
     }
   }
+
   /* custom CONTENT HOME */
   &__content {
     .bimdata-card {
       padding: 16px;
       width: 204px;
-      border: 1px solid $color-tertiary-lightest;
+      border: 1px solid var(--color-tertiary-lightest);
       box-shadow: none;
       transition: all ease 0.2s;
       .flex {
@@ -285,30 +296,36 @@ export default {
         margin: auto;
       }
       &:hover {
-        box-shadow: 0px 2px 10px rgba($color-black, 0.1);
+        box-shadow: var(--box-shadow);
         transition: all ease 0.2s;
       }
     }
   }
+
   /* custom DESIGN SYSTEM SECTION */
   &__ds {
     background-color: #f0f5ff;
+
     .flex {
       margin: auto;
       width: 1200px;
     }
+
     &__img {
       img {
         width: 436px;
       }
     }
+
     &__right {
       margin-left: 62px;
+
       h2 {
         padding: 0;
         border: none;
         position: relative;
       }
+
       &--icon {
         background: white;
         border-radius: 50%;
@@ -323,27 +340,30 @@ export default {
       }
     }
   }
+
   &__questions {
     margin: 0;
     background: #dce7ff;
   }
+
   /* custom FOOTER HOME */
   &__footer {
-    background-color: $color-primary;
-    color: $color-white;
+    background-color: var(--color-primary);
+    color: var(--color-white);
   }
 }
 </style>
 
 <style lang="scss">
-@import "../../../node_modules/@bimdata/design-system/dist/scss/BIMDataVariables.scss";
+@import "../../../node_modules/@bimdata/design-system/src/assets/css/variables.css";
+
 .navbar {
   padding: 0 24px;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  box-shadow: 0px 2px 10px rgba($color-black, 0.1);
+  box-shadow: var(--box-shadow);
   .home-link {
     width: 130px;
     .can-hide {
@@ -363,9 +383,9 @@ export default {
       input {
         width: 217px;
         border: none;
-        color: $color-primary;
+        color: var(--color-primary);
         border-radius: 3px;
-        background-color: $color-tertiary-lightest;
+        background-color: var(--color-tertiary-lightest);
       }
     }
     .nav-links {
@@ -380,12 +400,12 @@ export default {
         height: 100%;
         display: flex;
         align-items: center;
-        color: $color-primary;
+        color: var(--color-primary);
         &:hover {
           border-bottom: 2px solid #fdf3d4;
         }
         &.router-link-active {
-          border-bottom: 2px solid $color-secondary;
+          border-bottom: 2px solid var(--color-secondary);
         }
         span {
           display: none;