make page easier to use with vitepress

Author: pandermatt

.github/workflows/gh-pages.yml

@@ -1,2 +1,2 @@
-book
-Brewfile.lock.json
+.vitepress/cache
+node_modules

.gitignore

@@ -0,0 +1,54 @@
+import { defineConfig } from 'vitepress'
+
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "Laptop Setup Guide",
+  description: "for macOS",
+  lang: 'en-US',
+  head: [
+    ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
+    ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com' }],
+    ['link', { href: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap', rel: 'stylesheet' }]
+  ],
+
+  sitemap: {
+    hostname: 'https://laptop-setup-guide.renuo.ch'
+  },
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/start' },
+      { text: 'About Renuo', link: 'https://www.renuo.ch' }
+    ],
+
+    footer: {
+      message: "Made with ❤️ in Switzerland",
+      copyright: '<a href="https://www.renuo.ch">Renuo AG</a>',
+    },
+
+    externalLinkIcon: true,
+
+    lastUpdated: {
+      formatOptions: {
+        dateStyle: 'medium',
+      }
+    },
+    editLink: {
+      pattern: 'https://github.com/renuo/laptop-setup-guide-for-macos/edit/main/:path'
+    },
+
+    sidebar: [
+      {
+        text: 'Renuo Laptop Setup Guide',
+        link: '/start',
+        items: [
+          { text: 'Non-Technical Setup', link: '/non-technical-setup' },
+          { text: 'Technical Setup', link: '/technical-setup' },
+          { text: 'Nice to have', link: '/nice-to-have' }
+        ]
+      }
+    ],
+  }
+})

.vitepress/config.mts

@@ -0,0 +1,17 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import './style.css'
+
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    })
+  },
+  enhanceApp({ app, router, siteData }) {
+    // ...
+  }
+} satisfies Theme

.vitepress/theme/index.ts

@@ -0,0 +1,135 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ * 
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+ 
+ :root {
+  --vp-font-family-base: 'Montserrat', sans-serif;
+
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: #1d9f74;
+  --vp-c-brand-2: #28d79d;
+  --vp-c-brand-3: #1d9f74;
+  --vp-c-brand-soft: #28d79d;
+  
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #1d9f74 30%,
+    #28d79d
+  );
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+

.vitepress/theme/style.css

@@ -0,0 +1,33 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "Laptop Setup Guide"
+  text: "for macOS"
+  tagline: Ruby on Rails Edition
+  image:
+    src: /r-logo.png
+
+  actions:
+    - theme: brand
+      text: Start Setup
+      link: /start
+    - theme: alt
+      text: Nice to Have
+      link: /nice-to-have
+    - theme: alt
+      text: Discover Renuo AG
+      link: https://www.renuo.ch
+
+
+features:
+  - title: "🚀 Supercharge Your RoR Skills"
+    details: "Unlock the full potential of Ruby on Rails development on macOS with our expert-curated setup guide. From zero to hero, we'll walk you through every step to configure your environment like a pro. Say goodbye to setup woes and hello to seamless coding sessions!"
+
+  - title: "💎 Pristine Development Environment"
+    details: "Dive into a crystal-clear development setup tailored for macOS. Our guide ensures you're equipped with the latest tools, gems, and best practices. Perfect your workflow with optimized settings for efficiency and speed, making your RoR journey smoother and more enjoyable."
+
+  - title: "🔒 Secure & Up-to-Date"
+    details: "Stay ahead of the curve with a setup that prioritizes security and modernity. Our guide covers the latest security practices, keeping your development environment safe and sound. Plus, we provide tips on keeping your tools up-to-date, ensuring you're always working with the cutting edge of RoR technology."
+---

Brewfile

@@ -0,0 +1,30 @@
+---
+outline: deep
+---
+
+# Nice to have
+
+Now you finished with the Setup, below are some further recommendations. Do the Mac Setup before you do any of the next steps (except you know exactly what you are looking for). Here now follows the section with stuff that is nice to have. Cherry-pick!
+
+⭐ = Recommended for Interns
+
+- ⭐ [Rubymine / Toolbox](nice_to_have/rubymine.md): A powerful IDE for Ruby and Rails development
+- ⭐ [Fork](https://git-fork.com/): A fast and friendly git client for Mac and Windows
+- ⭐ [Google Chrome Shortcuts](nice_to_have/google_chrome_shortcuts.md): A list of useful Google Chrome shortcuts
+- ⭐ [Refined GitHub](https://github.com/refined-github/refined-github): Browser extension that simplifies the GitHub interface and adds useful features
+- ⭐ [GitHub CLI](https://cli.github.com/): `brew install gh` - GitHub's official command line tool
+- ⭐ [Spark](https://sparkmailapp.com/): A powerful and intelligent email client for macOS. Use this to read and organize your emails. Send emails from Gmail, since we have a custom signature.
+- [Raycast](nice_to_have/raycast.md): A powerful alternative to Spotlight and Alfred
+- [Google Drive Desktop](https://www.google.com/drive/download/): Access your Google Drive files from your desktop
+- [CleanShot X](https://cleanshot.com): Powerful and lightweight screenshot software for Mac
+- [Autojump](nice_to_have/autojump.md): A faster way to navigate your filesystem
+- [fzf](https://github.com/junegunn/fzf): A fuzzy finder for files, command history, processes, git commits etc.
+- [Puma-dev or Hotel](nice_to_have/puma_or_hotel.md)
+- [Increase GitHub Quota](nice_to_have/increase_github_quota.md)
+- Additional Browser for Development
+  - Firefox _is heavily used mainly in Germany. It's relevant for testing our web applications. We recommend checking your website in other browsers._
+  - Opera
+- [KeepYouAwake](https://github.com/newmarcel/KeepingYouAwake): Prevent your Mac from going to sleep
+- [Rectangle](https://rectangleapp.com/): Move and resize windows in macOS using keyboard shortcuts or snap areas
+- [Alfred](https://www.alfredapp.com/): A productivity app for macOS
+- [Bat](https://formulae.brew.sh/formula/bat): A clone of cat(1) with syntax highliting and Git integration

SUMMARY.md

@@ -7,7 +7,7 @@ The Toolbox App gives you a list of all your projects.
 Follow this [guide](https://www.jetbrains.com/help/ruby/working-with-the-ide-features-from-command-line.html#f9fe282c) to install the command line tools.
 Then you can use the command `mine .` to open the current folder in RubyMine.
 
-<img src="../img/toolbox_app_shellscript_location.png" style="width: 100%; max-width: 500px;">
+![](/toolbox_app_shellscript_location.png)
 
 **If this fails**, you might want to change the permission of the `/usr/local/bin` folder, using following command: