Add Vitepress docs (#326)

* Add vitepress for docs * some fix * Use vitepress and update docs * Use vitepress and update docs * Update README.md * Add favicon * Add docs by @jiriks74 Co-authored-by: jiriks74 <[email protected]> --------- Co-authored-by: jiriks74 <[email protected]>
thomiceli · Sep 11, 2024 · 6d31ef9 · 6d31ef9
1 parent 678fb99
commit 6d31ef9
Show file tree

Hide file tree

Showing 29 changed files with 1,300 additions and 1,498 deletions.
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -0,0 +1,47 @@
+name: Build / Deploy docs
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install JS dependencies
+        run: |
+          npm install [email protected] [email protected]
+
+      - name: Build docs
+        run: |
+          cd docs
+          npx tailwindcss -i .vitepress/theme/style.css -o .vitepress/theme/theme.css -c .vitepress/tailwind.config.js
+          npm run docs:build
+
+      - name: Deploy to server
+        uses: appleboy/scp-action@master
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USERNAME }}
+          key: ${{ secrets.SERVER_SSH_KEY }}
+          source: "docs/.vitepress/dist/*"
+          target: ${{ secrets.SERVER_PATH }}
+
+      - name: Update remote docs
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USERNAME }}
+          key: ${{ secrets.SERVER_SSH_KEY }}
+          script: |
+            ${{ secrets.UPDATE_DOCS }}
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,5 @@ public/assets/*
 public/manifest.json
 opengist
 build/
+docs/.vitepress/dist/
+docs/.vitepress/cache/
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
 # Opengist
 
-<img height="108px" src="https://raw.githubusercontent.com/thomiceli/opengist/a9dd531f676d01b93bb6bd70751a69382ca563b0/public/opengist.svg" alt="Opengist" align="right" />
+<img height="108px" src="https://raw.githubusercontent.com/thomiceli/opengist/master/public/opengist.svg" alt="Opengist" align="right" />
 
 Opengist is a **self-hosted** pastebin **powered by Git**. All snippets are stored in a Git repository and can be
 read and/or modified using standard Git commands, or with the web interface.
 It is similiar to [GitHub Gist](https://gist.github.com/), but open-source and could be self-hosted.
 
-[Documentation](/docs) • [Discord](https://discord.gg/9Pm3X5scZT) • [Demo](https://demo.opengist.io)
+[Home Page](https://opengist.io) • [Documentation](https://opengist.io/docs) • [Discord](https://discord.gg/9Pm3X5scZT) • [Demo](https://demo.opengist.io)
 
 
 ![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/thomiceli/opengist?sort=semver)
@@ -103,11 +103,11 @@ Opengist is now running on port 6157, you can browse http://localhost:6157
 
 ---
 
-To create and run a development environment, see [run-development.md](/docs/contributing/run-development.md).
+To create and run a development environment, see [run-development.md](/docs/contributing/development.md).
 
 ## Documentation
 
-The documentation is available in [/docs](/docs) directory.
+The documentation is available at [https://opengist.io/](https://opengist.io/) or in the [/docs](/docs) directory.
 
 
 ## License

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -0,0 +1,89 @@
+import {defineConfig} from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    title: "Opengist",
+    description: "Documention for Opengist",
+    rewrites: {
+        'index.md': 'index.md',
+        'introduction.md': 'docs/index.md',
+        ':path(.*)': 'docs/:path'
+    },
+    themeConfig: {
+        // https://vitepress.dev/reference/default-theme-config
+        logo: 'https://raw.githubusercontent.com/thomiceli/opengist/master/public/opengist.svg',
+        logoLink: '/',
+        nav: [
+            { text: 'Demo', link: 'https://demo.opengist.io' },
+            { text: 'Translate', link: 'https://tr.opengist.io' }
+        ],
+
+        sidebar: {
+            '/docs/': [
+            {
+                text: '', items: [
+                    {text: 'Introduction', link: '/docs'},
+                    {text: 'Installation', link: '/docs/installation', items: [
+                        {text: 'Docker', link: '/docs/installation/docker'},
+                        {text: 'Binary', link: '/docs/installation/binary'},
+                        {text: 'Source', link: '/docs/installation/source'},
+                        ],
+                        collapsed: true
+                    },
+                    {text: 'Update', link: '/docs/update'},
+                ], collapsed: false
+            },
+            {
+                text: 'Configuration', base: '/docs/configuration', items: [
+                    {text: 'Configure Opengist', link: '/configure'},
+                    {text: 'Admin panel', link: '/admin-panel'},
+                    {text: 'OAuth Providers', link: '/oauth-providers'},
+                    {text: 'Custom assets', link: '/custom-assets'},
+                    {text: 'Custom links', link: '/custom-links'},
+                    {text: 'Cheat Sheet', link: '/cheat-sheet'},
+                ], collapsed: false
+            },
+            {
+                text: 'Usage', base: '/docs/usage', items: [
+                    {text: 'Init via Git', link: '/init-via-git'},
+                    {text: 'Embed Gist', link: '/embed'},
+                    {text: 'Gist as JSON', link: '/gist-json'},
+                    {text: 'Import Gists from Github', link: '/import-from-github-gist'},
+                    {text: 'Git push options', link: '/git-push-options'},
+                ], collapsed: false
+            },
+            {
+                text: 'Administration', base: '/docs/administration', items: [
+                    {text: 'Run with systemd', link: '/run-with-systemd'},
+                    {text: 'Reverse proxy', items: [
+                        {text: 'Nginx', link: '/nginx-reverse-proxy'},
+                        {text: 'Traefik', link: '/traefik-reverse-proxy'},
+                    ], collapsed: true},
+                    {text: 'Fail2ban', link: '/fail2ban-setup'},
+                    {text: 'Healthcheck', link: '/healthcheck'},
+                ], collapsed: false
+            },
+            {
+                text: 'Contributing', base: '/docs/contributing', items: [
+                    {text: 'Community', link: '/community'},
+                    {text: 'Development', link: '/development'},
+                ], collapsed: false
+            },
+
+        ]},
+
+        socialLinks: [
+            {icon: 'github', link: 'https://github.com/thomiceli/opengist'}
+        ],
+        editLink: {
+            pattern: 'https://github.com/thomiceli/opengist/edit/stable/docs/:path'
+        },
+        // @ts-ignore
+        lastUpdated: true,
+
+    },
+    head: [
+        ['link', {rel: 'icon', href: '/favicon.svg'}],
+    ],
+    ignoreDeadLinks: true
+})
diff --git a/docs/.vitepress/tailwind.config.js b/docs/.vitepress/tailwind.config.js
@@ -0,0 +1,37 @@
+const colors = require('tailwindcss/colors')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./.vitepress/theme/*.vue",
+  ],
+  theme: {
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      white: colors.white,
+      black: colors.black,
+      gray: {
+        50: "#EEEFF1",
+        100: "#DEDFE3",
+        200: "#BABCC5",
+        300: "#999CA8",
+        400: "#75798A",
+        500: "#585B68",
+        600: "#464853",
+        700: "#363840",
+        800: "#232429",
+        900: "#131316"
+      },
+      indigo: colors.indigo,
+
+    },
+    extend: {
+      borderWidth: {
+        '1': '1px',
+      }
+    },
+  },
+  plugins: [],
+  darkMode: 'class',
+}
diff --git a/docs/.vitepress/theme/Home.vue b/docs/.vitepress/theme/Home.vue
@@ -0,0 +1,101 @@
+<script>
+import { withBase } from 'vitepress';
+import './theme.css'
+
+export default {
+
+  setup() {
+    return { withBase };
+  },
+};
+
+</script>
+
+
+<template>
+  <main class="home">
+    <header class="hero">
+      <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="mx-auto  lg:text-center">
+          <img class="rotating h-36 mx-auto my-8 " src="https://raw.githubusercontent.com/thomiceli/opengist/master/public/opengist.svg" alt="" >
+          <a target="_blank" href="https://github.com/thomiceli/opengist/releases" class="inline-flex items-center rounded-full bg-indigo-100 hover:bg-indigo-200 px-4 py-1.5 text-lg font-medium text-indigo-700">
+              <span class="pr-1">Released 1.7.4</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+              <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
+            </svg>
+            </a>
+            <h1 class="mt-5 text-4xl font-bold tracking-tight sm:text-5xl">Opengist</h1>
+            <h2 class="mt-4 text-xl">Self-hosted pastebin powered by Git, open-source alternative to Github Gist.</h2>
+          </div>
+        <div class="space-x-2 my-12">
+          <a href="/docs" class="rounded-md bg-indigo-600 mt-6 px-5 py-3 text-xl font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Docs</a>
+          <a target="_blank" href="https://demo.opengist.io" class="rounded-md bg-indigo-400 mt-6 px-5 py-3 text-xl border-white font-semibold text-white shadow-sm hover:bg-indigo-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Live demo</a>
+          <a target="_blank" href="https://github.com/thomiceli/opengist" class="rounded-md bg-gray-800 mt-6 px-3 py-3 text-xl dark:border dark:border-1 dark:border-gray-400 font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="w-7 h-auto inline" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"></path></svg>
+          </a>
+        </div>
+        <div class="border border-1 mt-6 px-5 py-3 rounded-md shadow-sm ">
+          <code class="select-all ">docker run --name <span class="text-indigo-700 dark:text-indigo-300 font-bold">opengist</span> -p <span class="text-indigo-700 dark:text-indigo-300 font-bold">6157</span>:6157 -v "<span class="text-indigo-700 dark:text-indigo-300 font-bold">$HOME/.opengist</span>:/opengist" ghcr.io/thomiceli/opengist:1</code>
+        </div>
+      </div>
+    </header>
+
+    <div class="relative w-full sm:max-w-7xl mx-auto overflow-auto">
+      <img class="block w-[200vw] max-w-none sm:w-full h-auto" :src="withBase('/opengist-demo.png')" alt="demo-opengist-screenshot" />
+    </div>
+
+  </main>
+</template>
+
+
+
+<style>
+@-webkit-keyframes rotating /* Safari and Chrome */ {
+  from {
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotating {
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.home {
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  text-align: center;
+}
+
+.rotating {
+  -webkit-animation: rotating 8s linear infinite;
+  -moz-animation: rotating 4s linear infinite;
+  -ms-animation: rotating 4s linear infinite;
+  -o-animation: rotating 4s linear infinite;
+  animation: rotating 12s linear infinite;
+}
+
+
+</style>
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { useData } from 'vitepress'
+import Home from './Home.vue'
+import DefaultTheme from 'vitepress/theme'
+
+const { Layout } = DefaultTheme
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <Layout>
+    <template v-if="frontmatter.layout === 'home'" #home-hero-after>
+      <Home />
+    </template>
+  </Layout>
+</template>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,12 @@
+import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import Layout from "./Layout.vue";
+
+export default {
+  ...DefaultTheme,
+  Layout,
+  enhanceApp({ app, router, siteData }) {
+    // ...
+  }
+} satisfies Theme