Migration to VuePress v2

.gitignore

@@ -2,5 +2,7 @@ node_modules/
 dist/
 data/contributors.json
 data/sponsors.json
+src/.vuepress/.temp/
+src/.vuepress/.cache/
 src/.vuepress/public/contributors.svg
 src/.vuepress/public/sponsors.svg

package.json

@@ -2,27 +2,27 @@
   "name": "@assemblyscript/website",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "license": "Apache-2.0",
   "description": "AssemblyScript's Website.",
   "scripts": {
-    "start": "vuepress dev src --host localhost --no-cache",
+    "start": "vuepress dev src --host localhost --clean-cache",
     "build": "vuepress build src",
-    "serve": "vuepress serve src"
+    "serve": "serve dist"
   },
   "devDependencies": {
-    "@vuepress/plugin-html-redirect": "^0.2.1",
+    "@vuepress/bundler-vite": "2.0.0-rc.28",
+    "@vuepress/plugin-copy-code": "next",
+    "@vuepress/plugin-docsearch": "2.0.0-rc.128",
+    "@vuepress/plugin-redirect": "2.0.0-rc.128",
+    "@vuepress/plugin-register-components": "2.0.0-rc.128",
+    "@vuepress/plugin-shiki": "next",
+    "@vuepress/theme-default": "2.0.0-rc.128",
     "he": "^1.2.0",
-    "node-addon-api": "^8.7.0",
-    "node-fetch": "^2.7.0",
-    "node-gyp": "^12.2.0",
     "pngquant": "^4.2.0",
-    "prism-themes": "^1.9.0",
+    "sass-embedded": "^1.99.0",
+    "serve": "^14.2.0",
     "sharp": "^0.34.5",
-    "vuepress": "^1.9.10",
-    "vuepress-plugin-serve": "^2.0.4",
-    "vuepress-plugin-sitemap": "^2.3.1"
-  },
-  "overrides": {
-    "watchpack": "2.5.1"
+    "vuepress": "2.0.0-rc.28"
   }
 }

scripts/update-data.js

@@ -112,7 +112,7 @@ function updateSponsors() {
 /** Updates contributors data by pulling stats from GitHub. */
 function updateContributors() {
   const contributors = {}
-  Promise.all(repos.map(repo => fetch('http://api.github.com/repos/' + repo + '/contributors').then(res => res.json())))
+  Promise.all(repos.map(repo => fetch('https://api.github.com/repos/' + repo + '/contributors').then(res => res.json())))
     .then(jsons => {
       jsons.forEach(json => {
         json

src/.vuepress/components/Community.vue

@@ -47,6 +47,7 @@ export default {
   position: relative;
   top: 0;
   transition: top 100ms;
+  padding: 0.15rem;
 }
 .community .list a:hover {
   top: -4px;
@@ -81,7 +82,5 @@ export default {
   border: 1px solid #fff;
   box-shadow: 0 0 0 1px #007acc;
 }
-.community .list a {
-  padding: 0.15rem;
-}
+
 </style>

src/.vuepress/components/EditorFrame.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue'
+
+const props = defineProps<{
+  initialSource: string
+}>()
+
+const editor = ref<HTMLElement | null>(null)
+const isMaximized = ref(false)
+
+const iframeSrc = computed(() => `/editor.html#${props.initialSource}`)
+
+function updateBodyOverflow(): void {
+  document.body.style.overflow = isMaximized.value ? 'hidden' : 'auto'
+}
+
+function toggleEditor(): void {
+  isMaximized.value = !isMaximized.value
+  updateBodyOverflow()
+
+  if (!isMaximized.value) {
+    editor.value?.scrollIntoView({
+      block: 'nearest',
+      behavior: 'smooth',
+    })
+  }
+}
+
+function closeEditor(): void {
+  isMaximized.value = false
+  document.body.style.overflow = 'auto'
+}
+
+onUnmounted(() => {
+  if (isMaximized.value) closeEditor()
+})
+</script>
+
+<template>
+  <div ref="editor" class="editor-wrap" :class="{ maximized: isMaximized }">
+    <button
+      type="button"
+      class="maximize"
+      :aria-label="isMaximized ? 'Minimize editor' : 'Maximize editor'"
+      @click="toggleEditor"
+    >
+      {{ isMaximized ? '◲' : '◰' }}
+    </button>
+    <iframe :src="iframeSrc" title="Editor" />
+  </div>
+</template>
+
+<style scoped>
+.editor-wrap {
+  position: relative;
+  margin-block: 1em;
+}
+
+.maximize {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  z-index: 1000;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: #c7c4c7;
+  cursor: pointer;
+  font: inherit;
+  font-size: 1.2rem;
+  line-height: 1;
+}
+
+.maximize:hover {
+  color: #fff;
+}
+
+iframe {
+  width: 100%;
+  height: 540px;
+  min-height: 540px;
+  border: 0;
+  background: #1e1e1e;
+  resize: vertical;
+}
+
+.maximized {
+  position: fixed;
+  z-index: 9000;
+  inset: 0;
+  margin: 0;
+}
+
+.maximized iframe {
+  height: 100% !important;
+  resize: none;
+}
+</style>