Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: upgrade vitepress and update theme #191

Merged
merged 3 commits into from
Feb 7, 2022
Merged

docs: upgrade vitepress and update theme #191

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ead4da6
docs: upgrade vitepress
ElMassimo Feb 7, 2022
bf83d9f
docs: use a new theme based on the vue docs
ElMassimo Feb 7, 2022
9fbfbeb
docs: remove unnecessary css vars
ElMassimo Feb 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
docs: use a new theme based on the vue docs
  • Loading branch information
@ElMassimo
ElMassimo committed Feb 7, 2022
commit bf83d9fdef7afb6fc166eed773778a36f4c14a83
149 changes: 90 additions & 59 deletions docs/.vitepress/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import baseConfig from '@vue/theme/config'
import baseConfig from '@mussi/vitepress-theme/config'

import { defineConfigWithTheme, HeadConfig, UserConfig } from 'vitepress'
import type { Config } from '@vue/theme'
import { NavItem, SidebarConfig } from '@vue/theme/src/vitepress/config'
import type { Config } from '@mussi/vitepress-theme'
import { NavItem, SidebarConfig } from '@mussi/vitepress-theme/src/vitepress/config'

const isProd = process.env.NODE_ENV === 'production'

Expand All @@ -16,7 +16,7 @@ const head: HeadConfig = [
['meta', { name: 'author', content: 'Máximo Mussini' }],
['meta', { name: 'keywords', content: 'rails, vitejs, vue, react, vite, ruby' }],

['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
['link', { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],

['meta', { name: 'HandheldFriendly', content: 'True' }],
['meta', { name: 'MobileOptimized', content: '320' }],
Expand All @@ -39,6 +39,75 @@ const head: HeadConfig = [
if (isProd)
head.push(['script', { src: 'https://unpkg.com/thesemetrics@latest', async: '' }])

const nav: NavItem[] = [
{ text: 'Guide', link: '/guide/' },
{ text: 'Config', link: '/config/' },
{
text: 'Links',
items: [
{
text: 'Documentation',
items: [
{ text: 'Vite', link: 'https://vitejs.dev/' },
],
},
{
text: 'Changelogs',
items: [
{ text: 'vite-plugin-ruby', link: 'https://github.com/ElMassimo/vite_ruby/blob/main/vite-plugin-ruby/CHANGELOG.md' },
{ text: 'Vite Ruby', link: 'https://github.com/ElMassimo/vite_ruby/blob/main/vite_ruby/CHANGELOG.md' },
{ text: 'Vite Rails', link: 'https://github.com/ElMassimo/vite_ruby/blob/main/vite_rails/CHANGELOG.md' },
{ text: 'Vite Hanami', link: 'https://github.com/ElMassimo/vite_ruby/blob/main/vite_hanami/CHANGELOG.md' },
{ text: 'Vite Padrino', link: 'https://github.com/ElMassimo/vite_ruby/blob/main/vite_padrino/CHANGELOG.md' },
],
},
],
},
]

const sidebar: SidebarConfig = {
// '/config/': 'auto',
// catch-all fallback
'/': [
{
text: 'Guide',
items: [
{ text: 'Introduction', link: '/guide/introduction' },
{ text: 'Getting Started', link: '/guide/' },
{ text: 'Development', link: '/guide/development' },
{ text: 'Deployment', link: '/guide/deployment' },
{ text: 'Migration', link: '/guide/migration' },
{ text: 'Plugins', link: '/guide/plugins' },
{ text: 'Advanced', link: '/guide/advanced' },
],
},
{
text: 'Integrations',
items: [
{ text: 'Rails', link: '/guide/rails' },
{ text: 'Hanami', link: '/guide/hanami' },
{ text: 'Padrino', link: '/guide/padrino' },
{ text: 'Plugin Legacy', link: '/guide/plugin-legacy' },
],
},
{
text: 'FAQs',
items: [
{ text: 'Troubleshooting', link: '/guide/troubleshooting' },
{ text: 'Motivation', link: '/motivation' },
{ text: 'Overview', link: '/overview' },
{ text: 'Debugging', link: '/guide/debugging' },
],
},
{
text: 'Config',
items: [
{ text: 'Configuration', link: '/config/' },
],
},
],
}

export default defineConfigWithTheme<Config>({
extends: baseConfig as () => UserConfig<Config>,
title: 'Vite Ruby',
Expand All @@ -48,67 +117,29 @@ export default defineConfigWithTheme<Config>({
scrollOffset: 'header',
srcDir: 'src',
themeConfig: {
logo: '/logo.svg',
author: {
name: 'Maximo Mussini',
link: 'https://maximomussini.com',
},
algolia: {
appId: 'GERZE019PN',
apiKey: 'cdb4a3df8ecf73fadf6bde873fc1b0d2',
indexName: 'vite_rails',
},
repo: 'ElMassimo/vite_ruby',
logo: '/logo.svg',
docsDir: 'docs',
docsBranch: 'main',
editLinks: true,
editLinkText: 'Suggest changes to this page',

nav: [
{ text: 'Guide', link: '/guide/' },
{ text: 'Config', link: '/config/' },
{ text: 'Vite', link: 'https://vitejs.dev/' },
{
text: 'Changelog',
link: 'https://github.com/ElMassimo/vite_ruby/blob/main/vite_ruby/CHANGELOG.md',
},
nav,
sidebar,
socialLinks: [
{ icon: 'github', link: 'https://github.com/ElMassimo/vite_ruby' },
{ icon: 'twitter', link: 'https://twitter.com/MaximoMussini' },
{ icon: 'discord', link: 'https://discord.gg/9sSq53jxb4' },
],

sidebar: {
'/config/': 'auto',
// catch-all fallback
'/': [
{
text: 'Guide',
children: [
{ text: 'Introduction', link: '/guide/introduction' },
{ text: 'Getting Started', link: '/guide/' },
{ text: 'Development', link: '/guide/development' },
{ text: 'Deployment', link: '/guide/deployment' },
{ text: 'Migration', link: '/guide/migration' },
{ text: 'Plugins', link: '/guide/plugins' },
{ text: 'Advanced', link: '/guide/advanced' },
],
},
{
text: 'Integrations',
children: [
{ text: 'Rails', link: '/guide/rails' },
{ text: 'Hanami', link: '/guide/hanami' },
{ text: 'Padrino', link: '/guide/padrino' },
{ text: 'Plugin Legacy', link: '/guide/plugin-legacy' },
],
},
{
text: 'FAQs',
children: [
{ text: 'Troubleshooting', link: '/guide/troubleshooting' },
{ text: 'Motivation', link: '/motivation' },
{ text: 'Overview', link: '/overview' },
{ text: 'Debugging', link: '/guide/debugging' },
],
},
{
text: 'Config',
link: '/config/',
},
],
footer: {
license: {
text: 'MIT License',
link: 'https://opensource.org/licenses/MIT',
},
copyright: 'Copyright © 2021-2022',
},
},
})
164 changes: 164 additions & 0 deletions docs/.vitepress/theme/components/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
<script setup lang="ts">
import { useData } from 'vitepress'

const { frontmatter } = useData()
</script>

<template>
<section id="hero" class="flex flex-col items-center">
<img class="logo" src="/logo.svg" height="220" alt="Vite Ruby Logo by Maximo Mussini"/>
<h1 class="tagline font-semibold">
Vite Ruby
</h1>
<p class="description text-lg md:text-2xl">
Bringing joy to your frontend experience.
</p>
<p class="actions">
<a class="get-started" href="/guide/introduction.html">
Get Started
<svg
class="icon"
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
viewBox="0 0 24 24"
>
<path
d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"
/>
</svg>
</a>
<a class="setup" href="/guide/index.html">Install</a>
</p>
</section>

<section id="highlights">
<a class="highlight" v-for="feature in frontmatter.features" :href="feature.link">
<h2 class="font-semibold">{{ feature.title }}</h2>
<p v-html="feature.details"/>
</a>
</section>
</template>

<style scoped>
h1, h2, p, a {
transition: color 0.5s, background-color 0.5s;
}

#hero {
padding: 96px 32px;
text-align: center;
}

.logo {
height: 220px;
}

.tagline {
background: -webkit-linear-gradient(317deg, #000 25%, #000);
font-size: 45px;
line-height: 1.25;
letter-spacing: -1.5px;
margin-top: 2rem;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

html:not(.dark) .accent,
.dark .tagline {
background-image: -webkit-linear-gradient(317deg, var(--vt-c-yellow) 25%, var(--vt-c-brand) 75%);
}

.description {
line-height: 1;
color: var(--vt-c-text-2);
margin: 10px 0px 60px 0px;
}

.actions a {
font-size: 16px;
display: inline-block;
background-color: var(--vt-c-bg-mute);
padding: 8px 18px;
font-weight: 500;
border-radius: 8px;
}

.actions .get-started {
font-weight: 600;
background-color: var(--vt-c-brand);
color: #fff;
margin-right: 18px;
}

.actions .icon {
display: inline;
position: relative;
top: -1px;
margin-left: 2px;
fill: currentColor;
transition: transform 0.2s;
}

.dark .actions .get-started {
color: var(--vt-c-text-1);
}

.actions .get-started:hover .icon {
transform: translateX(2px);
}

.actions .get-started:hover {
background-color: var(--vt-c-brand-light);
}

.actions .setup {
color: var(--vt-c-text-code);
}

.actions .setup:hover {
background-color: var(--vt-c-gray-light-4);
transition-duration: 0.2s;
}

.dark .actions .setup:hover {
background-color: var(--vt-c-gray-dark-3);
}

#highlights {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 972px;
margin: 0px auto;
padding: 0 32px 72px;
color: var(--vt-c-text-2);
}

.highlight {
padding: 28px 36px;
border-radius: 8px;
flex: 0 32%; /* default 3 column */
font-size: 14px;
font-weight: 500;
}

@media (max-width: 768px) {
.highlight {
flex: 0 100%;
margin-bottom: 20px;
}
}

.highlight h2 {
font-size: 20px;
letter-spacing: -0.4px;
color: var(--vt-c-text-1);
margin-bottom: 0.75em;
}

.highlight p {
font-size: 15px;
}
</style>
10 changes: 10 additions & 0 deletions docs/.vitepress/components/Quote.vue → docs/.vitepress/theme/components/Quote.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,13 @@ defineProps({
</p>
</div>
</template>

<style scoped>
.custom-block {
padding-left: 24px;
}

.custom-block:before {
content: none!important;
}
</style>
8 changes: 4 additions & 4 deletions docs/.vitepress/theme/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import Theme from 'vitepress/theme'
import Quote from '../components/Quote.vue'
import { VPTheme } from '@mussi/vitepress-theme'
import Quote from './components/Quote.vue'

import 'windi.css'
import '../styles/styles.css'
import './styles/styles.css'

export default {
...Theme,
...VPTheme,
enhanceApp ({ app }) {
app.component('Quote', Quote)
},
Expand Down
Loading