requarks · rayer4u · Jul 31, 2025 · Jul 31, 2025 · Aug 1, 2025 · Aug 1, 2025
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,9 @@
+module.exports = {
+    extends: [
+      'plugin:vue/vue3-recommended', // Vue 3
+      // 'plugin:vue/recommended'   // Vue 2
+    ],
+    rules: {
+        'vue/multi-word-component-names': 'off'
+      }
+  }
diff --git a/.gitignore b/.gitignore
@@ -36,3 +36,6 @@ jspm_packages
 # Optional REPL history
 .node_repl_history
 *.sublime-workspace
+
+dist/
+.tmp/
diff --git a/babel.config.js b/babel.config.js
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Wiki.js</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="apple-mobile-web-app-title" content="Wiki.js">
+    <meta name="application-name" content="Wiki.js">
+    <meta name="msapplication-TileColor" content="#603cba">
+    <meta name="msapplication-config" content="/favicons/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
+    <meta name="Description" content="The most powerful and extensible open source Wiki software.">
+    <link href="/favicons/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
+    <link href="/favicons/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32">
+    <link href="/favicons/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16">
+    <link href="/favicons/site.webmanifest" rel="manifest">
+    <link href="/favicons/safari-pinned-tab.svg" rel="mask-icon" color="#7444fd">
+    <link rel="icon" href="/favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-9094100-6"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'UA-9094100-6');
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,61 +1,61 @@
 {
   "name": "wiki-site",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "serve": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@elastic/apm-rum": "^4.0.1",
+    "@elastic/apm-rum": "^5.0.0",
+    "@vue/apollo-composable": "^4.0.0-alpha.16",
     "animate-sass": "^0.8.2",
-    "axios": "^0.18.0",
-    "luxon": "^1.12.0",
+    "animate.css": "^4.1.1",
+    "axios": "^0.21.1",
+    "luxon": "^1.26.0",
     "simplex-noise": "^2.4.0",
-    "vue": "^2.6.6",
-    "vue-apollo": "^3.0.0-beta.11",
-    "vue-axios": "^2.1.4",
-    "vue-luxon": "^0.6.2",
-    "vue-router": "^3.0.1",
-    "vuetify": "^1.5.5",
-    "vuex": "^3.0.1",
-    "vuex-pathify": "^1.2.2"
+    "vue": "^3.2.0",
+    "vue-router": "^4.0.0",
+    "vuetify": "^3.0.0-beta.0",
+    "vuex": "^4.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.5.0",
-    "@vue/cli-plugin-eslint": "^3.5.0",
-    "@vue/cli-service": "^3.5.0",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "graphql-tag": "^2.9.0",
-    "prerender-spa-plugin": "^3.2.1",
-    "sass": "^1.26.3",
-    "sass-loader": "^7.1.0",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.1",
-    "vue-cli-plugin-apollo": "^0.19.2",
-    "vue-cli-plugin-prerender-spa": "^1.1.5",
-    "vue-cli-plugin-pug": "^1.0.7",
-    "vue-cli-plugin-vuetify": "^0.5.0",
-    "vue-template-compiler": "^2.5.21",
-    "vuetify-loader": "^1.0.5"
+    "@apollo/client": "^3.13.9",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "graphql": "^16.11.0",
+    "graphql-tag": "^2.12.6",
+    "postcss": "^8.5.6",
+    "prerender-spa-plugin": "^3.4.0",
+    "pug": "^3.0.3",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
+    "stylus": "^0.54.8",
+    "stylus-loader": "^6.2.0",
+    "vite": "^5.3.1",
+    "vite-plugin-vuetify": "^2.0.3",
+    "vue-cli-plugin-pug": "^2.0.0"
   },
   "eslintConfig": {
     "root": true,
     "env": {
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "@vue/standard"
     ],
-    "rules": {},
     "parserOptions": {
-      "parser": "babel-eslint"
-    }
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
   },
   "postcss": {
     "plugins": {
@@ -65,6 +65,9 @@
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "not ie <= 8"
-  ]
+    "not dead",
+    "not ie 11"
+  ],
+  "type": "module",
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/src/App.vue b/src/App.vue
@@ -1,14 +1,14 @@
 <template lang='pug'>
   v-app
     site-header
-    v-content
+    v-main
       router-view
     site-footer
 </template>
 
 <script>
-import SiteFooter from './components/SiteFooter'
-import SiteHeader from './components/SiteHeader'
+import SiteFooter from './components/SiteFooter.vue'
+import SiteHeader from './components/SiteHeader.vue'
 
 export default {
   name: 'App',

diff --git a/src/components/Carbon.vue b/src/components/Carbon.vue
@@ -6,7 +6,9 @@
 </template>
 
 <script>
+
 export default {
+  name: 'Carbon',
   props: {
     long: {
       type: Boolean,

diff --git a/src/components/HomeCloud.vue b/src/components/HomeCloud.vue
@@ -1,33 +1,25 @@
 <template lang='pug'>
   .home-cloud
-    h3 Get Started #[v-chip.white--text(color='accent') Install Anywhere!]
+    h3 Get Started #[v-chip.text-white(color='accent') Install Anywhere!]
     h4 Host it yourself or launch a pre-configured installation on a cloud provider.
-    v-container.mt-5(grid-list-xl)
-      v-layout(row, wrap)
-        v-flex(xs12, sm6, md6)
+    v-container.mt-5
+      v-row
+        v-col(cols='12', sm='6', md='6')
           .home-cloud-plan
             .home-cloud-plan-icon
-              img(:src='require("../assets/icons/handdrawn-server.svg")', alt='Self-Hosted')
+              img(src='../assets/icons/handdrawn-server.svg', alt='Self-Hosted')
             h6 Self-Hosted
             span Host it on your on-premise servers
             v-divider.mt-3
-            v-btn.mt-4(large, outline, color='primary', to='/get-started') Get Started
-        v-flex(xs12, sm6, md6)
+            v-btn.mt-4(large, variant='outlined', color='primary', to='/get-started') Get Started
+        v-col(cols='12', sm='6', md='6')
           .home-cloud-plan
             .home-cloud-plan-icon.alt1
-              img(:src='require("../assets/icons/handdrawn-cloud.svg")', alt='Cloud')
+              img(src='../assets/icons/handdrawn-cloud.svg', alt='Cloud')
             h6 DigitalOcean Marketplace
             span One-click install, auto-update
             v-divider.mt-3
-            v-btn.mt-4(large, outline, color='primary', href='https://marketplace.digitalocean.com/apps/wiki-js?refcode=5f7445bfa4d0', target='_blank') Get Started
-        //- v-flex(xs12, sm6, md4)
-        //-   .home-cloud-plan
-        //-     .home-cloud-plan-icon.alt1
-        //-       img(:src='require("../assets/icons/handdrawn-cloud.svg")', alt='Cloud')
-        //-     h6 AWS Marketplace
-        //-     span One-click install, auto-update
-        //-     v-divider.mt-3
-        //-     v-btn.mt-4(large, outline, color='primary', href='https://aws.amazon.com/marketplace/pp/B0832LDTKQ', target='_blank') Get Started
+            v-btn.mt-4(large, variant='outlined', color='primary', href='https://marketplace.digitalocean.com/apps/wiki-js?refcode=5f7445bfa4d0', target='_blank') Get Started
 </template>
 
 <script>
@@ -62,17 +54,17 @@ export default {
     margin-top: 20px;
     font-size: 18px;
     font-weight: 300;
-    color: var(--v-greyish-darken1)
+    color: rgb(var(--v-theme-greyish-darken1));
   }
   h5 {
     margin-top: 20px;
     font-size: 18px;
     font-weight: 600;
-    color: var(--v-greyish-darken1)
+    color: rgb(var(--v-theme-greyish-darken1));
   }
 
   &-plan {
-    background: var(--v-greyish-base) linear-gradient(45deg, transparent, var(--v-greyish-lighten4));
+    background: rgb(var(--v-theme-greyish-base)) linear-gradient(45deg, transparent, rgb(var(--v-theme-greyish-lighten4)));
     border: 1px solid transparent;
     border-radius: 8px;
     padding: 40px;
@@ -92,7 +84,7 @@ export default {
 
     &:hover {
       background-color: #FFF;
-      border-color: var(--v-greyish-base);
+      border-color: rgb(var(--v-theme-greyish-base));
       box-shadow: 0 30px 60px 0 rgba(0,11,40,.14);
     }
 

diff --git a/src/components/HomeEasy.vue b/src/components/HomeEasy.vue
@@ -1,60 +1,60 @@
 <template lang='pug'>
   .home-easy
     .home-easy-curve
-    v-container.mt-5(grid-list-xl)
-      v-layout(row, wrap)
-        v-flex(xs12, md8)
-          v-container.pa-0(grid-list-xl)
-            v-layout(row, wrap)
-              v-flex(xs12, sm6)
+    v-container.mt-5
+      v-row
+        v-col(cols='12', md='8')
+          v-container.pa-0
+            v-row
+              v-col(cols='12', sm='6')
                 .home-easy-tile
                   .home-easy-tile-icon
-                    img(:src='require(`../assets/icons/ios-processor.svg`)', alt='Install anywhere')
+                    img(src='../assets/icons/ios-processor.svg', alt='Install anywhere')
                   .home-easy-tile-text
                     h3 Install anywhere
                     span Works on virtually any platform and is compatible with either PostgreSQL, MySQL, MariaDB, MS SQL Server or SQLite!
-              v-flex(xs12, sm6)
+              v-col(cols='12', sm='6')
                 .home-easy-tile
                   .home-easy-tile-icon
-                    img(:src='require(`../assets/icons/ios-gear.svg`)', alt='Administration')
+                    img(src='../assets/icons/ios-gear.svg', alt='Administration')
                   .home-easy-tile-text
                     h3 Administration
                     span Manage all aspects of your wiki using the extensive and intuitive admin area.
-              v-flex(xs12, sm6)
+              v-col(cols='12', sm='6')
                 .home-easy-tile
                   .home-easy-tile-icon
-                    img(:src='require(`../assets/icons/ios-speedometer.svg`)', alt='Performance')
+                    img(src='../assets/icons/ios-speedometer.svg', alt='Performance')
                   .home-easy-tile-text
                     h3 Performance
                     span Running on the blazing fast Node.js engine, Wiki.js is built with performance in mind.
-              v-flex(xs12, sm6)
+              v-col(cols='12', sm='6')
                 .home-easy-tile
                   .home-easy-tile-icon
-                    img(:src='require(`../assets/icons/ios-illustrator.svg`)', alt='Customizable')
+                    img(src='../assets/icons/ios-illustrator.svg', alt='Customizable')
                   .home-easy-tile-text
                     h3 Customizable
                     span Fully customize the appearance of your wiki, including a light and dark mode.
-              v-flex(xs12, sm6)
+              v-col(cols='12', sm='6')
                 .home-easy-tile
                   .home-easy-tile-icon
-                    img(:src='require(`../assets/icons/ios-lock.svg`)', alt='Protected')
+                    img(src='../assets/icons/ios-lock.svg', alt='Protected')
                   .home-easy-tile-text
                     h3 Protected
                     span Make your wiki public, completely private or a mix of both.
-              v-flex(xs12, sm6)
+              v-col(cols='12', sm='6')
                 .home-easy-tile
                   .home-easy-tile-icon
-                    img(:src='require(`../assets/icons/ios-width.svg`)', alt='Scalable')
+                    img(src='../assets/icons/ios-width.svg', alt='Scalable')
                   .home-easy-tile-text
                     h3 Scalable
                     span Whether it's on a tiny Raspberry Pi or on a high performance VM in the cloud, Wiki.js intelligently makes use of the available resources.
-        v-flex(xs12, md4)
+        v-col(cols='12', md='4')
           .home-easy-install
             .home-easy-install-icon
-              img(:src='require(`../assets/icons/nolan-downloading-updates.svg`)', alt='Easy Installation')
+              img(src='../assets/icons/nolan-downloading-updates.svg', alt='Easy Installation')
             h3 Easy Installation
             span You'll be ready to go within minutes! Step-by-step install guides available for all platforms.
-            v-btn.mx-0.mt-4.primary--text(color='white', large, to='/get-started') Get Started
+            v-btn.mx-0.mt-4.text-primary(color='white', large, to='/get-started') Get Started
 </template>
 
 <script>