first commit

xterminal/docs/.vitepress/theme/components/BrowserPreview.vue

@@ -0,0 +1,95 @@
+<script setup>
+const props = defineProps({
+    hidelabel: {
+        type: Boolean,
+        default: () => false
+    }
+})
+</script>
+
+<template>
+    <div>
+        <div v-if="!props.hidelabel" class="bp-preview">
+            <b>Result: </b>
+        </div>
+        <div class="bp-container">
+            <header class="bp-header">
+                <div class="bp-dots">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+                <div class="bp-title">My First Terminal</div>
+            </header>
+            <main class="bp-main">
+                <slot></slot>
+            </main>
+        </div>
+    </div>
+</template>
+
+<style>
+*,
+*::after,
+*::before {
+    box-sizing: border-box;
+}
+
+.bp-preview {
+    margin-bottom: 1rem;
+}
+
+.bp-container {
+    display: flex;
+    flex-direction: column;
+    border-radius: 6px;
+    background-color: var(--vp-code-block-bg);
+    color: var(--vp-c-text-1);
+    overflow: hidden;
+    border: 1px solid var(--vp-c-divider);
+}
+
+.bp-header {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-bottom: 1px solid var(--vp-c-divider);
+}
+.bp-header > .bp-title {
+    flex-grow: 1;
+    text-align: right;
+    font-size: min(15px, calc(1.5vw + 7px));
+}
+.bp-header .bp-dots > * {
+    display: inline-block;
+    width: min(0.65rem, calc(2.25vw));
+    height: min(0.65rem, calc(2.25vw));
+    border-radius: 50%;
+    margin-right: min(0.25rem, calc(1vw));
+}
+.bp-header .bp-dots > *:first-child {
+    background-color: rgba(255, 91, 82, 1);;
+}
+.bp-header .bp-dots > *:nth-child(2) {
+    background-color: rgba(83, 195, 43, 1);
+}
+.bp-header .bp-dots > *:last-child {
+    background-color: rgba(230, 192, 41, 1);
+}
+
+.bp-main {
+    display: flex;
+    flex-direction: column;
+    max-height: 400px;
+    overflow-y: hidden;
+    padding: 0 min(15px, calc(1.5vw + 5px));
+    background-color: rgba(225,225,225,0.05);
+}
+
+html.dark .bp-main {
+    background-color: rgb(41, 40, 40);
+}
+html.dark .bp-container {
+    color: rgba(239, 239, 239, 0.85);
+}
+</style>

xterminal/docs/.vitepress/theme/components/ProjectCards.vue

@@ -0,0 +1,73 @@
+<script setup>
+const props = defineProps(["projects"]);
+</script>
+
+<template>
+    <div class="grid">
+        <div class="intro">
+            <h1><b>Showcase</b></h1>
+            <p>Below is a list of projects that are using XTerminal.</p>
+            <p>
+                To add yours, edit this
+                <a
+                    href="https://github.com/henryhale/xterminal/blob/master/docs/showcase/index.md"
+                    >file</a
+                >.
+            </p>
+        </div>
+        <div v-for="(p, i) in projects" :key="i" class="row">
+            <div class="grow">
+                <div class="row">
+                    <img :src="p.logo" :alt="p.name" width="45" />
+                    <span>
+                        {{ p.name }}<br />{{ p.desc }}<br />
+                        <a :href="p?.author.link">@{{ p?.author.username }}</a>
+                    </span>
+                </div>
+            </div>
+            <div>
+                <a :href="p.link">Visit &RightArrow;</a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.grid {
+    display: flex;
+    flex-direction: column;
+    padding: 4rem 1rem;
+}
+
+.grid > * {
+    margin-bottom: 2rem;
+    width: 100%;
+    max-width: 720px;
+    margin: 0 auto;
+}
+
+.row {
+    display: flex;
+    align-items: center;
+    padding: 1rem 0;
+}
+
+.row > *:not(:last-child) {
+    margin-right: 1rem;
+}
+
+.grow {
+    flex-grow: 1;
+}
+
+a {
+    color: var(--vp-c-brand);
+}
+
+.intro h1 {
+    font-size: 32px;
+    letter-spacing: -0.02em;
+    line-height: 40px;
+    margin: 1rem 0;
+}
+</style>