Add documentation website (ElMassimo#3)

zerodom30 · Jan 20, 2021 · 9e8d222 · 9e8d222
1 parent a3708d3
commit 9e8d222
Show file tree

Hide file tree

Showing 16 changed files with 3,825 additions and 63 deletions.
diff --git a/.gitignore b/.gitignore
@@ -19,3 +19,26 @@ gemfiles/*.lock
 node_modules
 *.local
 .DS_Store
+
+# Vitepress
+dist
+examples_dist
+node_modules
+coverage
+.nyc_output
+.rpt2_cache
+.env
+local.log
+.DS_Store
+e2e/reports
+e2e/screenshots
+__build__
+playground_dist
+yarn-error.log
+temp
+markdown
+explorations
+selenium-server.log
+
+# Algolia
+.algolia.env
diff --git a/README.md b/README.md
@@ -19,6 +19,10 @@
   </p>
 </h1>
 
+[website]: https://vite-rails.netlify.app/
+[features]: https://vite-rails.netlify.app/guide/introduction.html
+[guides]: https://vite-rails.netlify.app/guide/
+[config]: https://vite-rails.netlify.app/config/
 [vite_rails]: https://github.com/ElMassimo/vite_rails
 [webpacker]: https://github.com/rails/webpacker
 [vite]: http://vitejs.dev/
@@ -30,15 +34,15 @@
 
 ## Features ⚡️
 
-- 🤖 Automatic Entrypoint Detection
-- ⚡️ Hot Reload
-- ⚙️ Rake Tasks
-- 🤝 Integrated with <kbd>assets:precompile</kbd> and friends
-- And more! (detects changes, and builds automatically if Vite is not running)
+- 🤖 Automatic entrypoint detection
+- ⚡️ Blazing fast hot reload
+- 🚀 Zero-config deployments
+- 🤝 Integrated with <kbd>assets:precompile</kbd>
+- [And more!][features]
 
 ## Documentation 📖
 
-A documentation website is coming soon!
+Visit the [documentation website][website] to check out the [guides] and searchable [configuration reference].
 
 ## Installation 💿
 
@@ -57,70 +61,21 @@ bin/rake vite:install
 
 This will generate configuration files and a sample setup.
 
-## Usage 🚀
+Additional installation instructions are available in the [documentation website][website].
 
-Drawing inspiration from [webpacker], any files in `app/javascript/entrypoints`
-will be considered entries to your application (SPAs or pages).
+## Getting Started 💻
 
-These files will be detected, and passed on to Vite, all configuration is done
-for you.
+Restart your Rails server, and then run `bin/vite` to start the Vite development server.
 
-### Imports ⤵️
+Add the following your `views/layouts/application.html.erb`:
 
-For convenience, a `~/` import alias is configured to `app/javascript`, allowing
-you to use absolute paths:
-
-```js
-import { createApp } from 'vue'
-import App from '~/App.vue'
-import '~/channels'
-
-createApp(App).mount('#app')
+```erb
+<%= vite_javascript_tag 'application' %>
 ```
 
-### Tags 🏷
-
-`vite_typescript_tag`, `vite_javascript_tag`, and `vite_stylesheet_tag` can be
-used to output `<script>` and `<link>` tags in your Rails layouts or templates.
-
-```html
-<head>
-  <title>Joie</title>
-  <%= csrf_meta_tags %>
-  <%= csp_meta_tag %>
-
-  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
-
-  <%= vite_stylesheet_tag 'strange' %>
-  <%= vite_typescript_tag 'application' %>
-</head>
-```
-
-For other types of assets, you can use `vite_asset_path` and pass that to the appropriate tag helper.
-
-## Configuration ⚙️
-
-This is what your `config/vite.json` might look like:
-
-```json
-{
-  "all": {
-    "watchAdditionalPaths": []
-  },
-  "development": {
-    "autoBuild": true,
-    "publicOutputDir": "vite-dev",
-    "port": 3036
-  },
-  "test": {
-    "autoBuild": true,
-    "publicOutputDir": "vite-test"
-  }
-}
-```
+Visit any page and you should see a printed console output: `Vite ⚡️ Rails`.
 
-Check [this file][config file] to see all config options, documentation is coming soon.
+For more [guides] and a full [configuration reference], check the [documentation website][website].
 
 ## Inspiration 💡
 

diff --git a/docs/.algolia/config.json b/docs/.algolia/config.json
@@ -0,0 +1,99 @@
+{
+  "index_name": "vite_rails",
+  "start_urls": [
+    {
+      "url": "https://vite-rails.netlify.app/api/options.html",
+      "selectors_key": "options",
+      "tags": ["options"],
+      "page_rank": 1
+    },
+    {
+      "url": "https://vite-rails.netlify.app/api/",
+      "selectors_key": "api",
+      "tags": ["api"],
+      "page_rank": 2
+    },
+    {
+      "url": "https://vite-rails.netlify.app/",
+      "tags": ["guide"],
+      "page_rank": 3
+    }
+  ],
+  "stop_urls": [
+    "https://vite-rails.netlify.app/introduction.html",
+    "https://vite-rails.netlify.app/installation.html",
+    "https://vite-rails.netlify.app/guide/index.html",
+    "https://vite-rails.netlify.app/guide/essentials/actions.html",
+    "https://vite-rails.netlify.app/guide/essentials/finders.html",
+    "https://vite-rails.netlify.app/guide/essentials/querying.html",
+    "https://vite-rails.netlify.app/guide/essentials/assertions.html",
+    "https://vite-rails.netlify.app/guide/essentials/aliases.html",
+    "https://vite-rails.netlify.app/guide/essentials/current-context.html",
+    "https://vite-rails.netlify.app/guide/essentials/injection.html",
+    "https://vite-rails.netlify.app/guide/advanced/assertions.html",
+    "https://vite-rails.netlify.app/guide/advanced/composition.html",
+    "https://vite-rails.netlify.app/guide/advanced/debugging.html",
+    "https://vite-rails.netlify.app/guide/advanced/design-patterns.html",
+    "https://vite-rails.netlify.app/guide/advanced/filtering.html",
+    "https://vite-rails.netlify.app/guide/advanced/synchronization.html",
+    "https://vite-rails.netlify.app/guide/cucumber/index.html"
+  ],
+  "selectors": {
+    "default": {
+      "lvl0": {
+        "selector": "p.sidebar-heading.open",
+        "global": true,
+        "default_value": "Guide"
+      },
+      "lvl1": ".content h1",
+      "lvl2": ".content h2",
+      "lvl3": ".content h3",
+      "lvl4": ".content h4",
+      "lvl5": ".content h5",
+      "text": ".content p, .content li",
+      "lang": {
+        "selector": "/html/@lang",
+        "type": "xpath",
+        "global": true
+      }
+    },
+    "api": {
+      "lvl0": {
+        "selector": "p.sidebar-heading.open",
+        "global": true,
+        "default_value": "API"
+      },
+      "lvl1": ".content h2",
+      "lvl2": ".content h3",
+      "text": ".content p, .content li",
+      "lang": {
+        "selector": "/html/@lang",
+        "type": "xpath",
+        "global": true
+      }
+    },
+    "options": {
+      "lvl0": {
+        "selector": "p.sidebar-heading.open",
+        "global": true,
+        "default_value": "Selectors"
+      },
+      "lvl1": ".content h1",
+      "lvl2": ".content h2",
+      "lvl3": ".content ul li code",
+      "text": ".content p, .content li",
+      "lang": {
+        "selector": "/html/@lang",
+        "type": "xpath",
+        "global": true
+      }
+    }
+  },
+  "scrape_start_urls": true,
+  "strip_chars": " .,;:#",
+  "custom_settings": {
+    "attributesForFaceting": [
+      "lang"
+    ]
+  }
+}
diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js
@@ -0,0 +1,49 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  parserOptions: {
+    parser: '@typescript-eslint/parser'
+  },
+  extends: [
+    'plugin:vue/recommended', // https://github.com/vuejs/eslint-plugin-vue
+    '@vue/standard', // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue',
+    '@typescript-eslint',
+  ],
+  // add your custom rules here
+  rules: {
+    'arrow-parens': ['error', 'as-needed', { requireForBlockBody: false }],
+    'comma-dangle': ['error', 'always-multiline'],
+    'no-console': process.env.NODE_ENV === 'production' ? ['error', { allow: ['warn', 'error', 'info'] }] : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+
+    // Vue Rules from eslint-plugin-vue
+    'vue/attribute-hyphenation': ['error', 'never', {
+      ignore: [
+        'stroke-dasharray',
+        'stroke-width',
+      ],
+    }],
+    'vue/html-closing-bracket-spacing': ['error', {
+      selfClosingTag: 'never',
+    }],
+    'vue/max-attributes-per-line': ['error', {
+      singleline: 5,
+      multiline: {
+        max: 1,
+        allowFirstLine: false,
+      },
+    }],
+    'vue/multiline-html-element-content-newline': 0,
+    'vue/no-v-html': 0,
+    'vue/singleline-html-element-content-newline': 0,
+  },
+}
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -0,0 +1,53 @@
+// @ts-check
+
+/**
+ * @type {import('vitepress').UserConfig}
+ */
+module.exports = {
+  title: 'Vite ⚡ Rails',
+  description: 'Bringing joy to your frontend experience',
+  head: [
+    [
+      'style',
+      {},
+      'img { border-radius: 10px }' + 'h1.title { margin-left: 0.5em }',
+    ],
+  ],
+  themeConfig: {
+    repo: 'ElMassimo/vite_rails',
+    docsDir: 'docs',
+    docsBranch: 'main',
+    editLinks: true,
+    editLinkText: 'Suggest changes to this page',
+
+    nav: [
+      { text: 'Guide', link: '/guide/' },
+      { text: 'Config Reference', link: '/config/' },
+      {
+        text: 'Changelog',
+        link:
+          'https://github.com/ElMassimo/vite_rails/blob/main/CHANGELOG.md',
+      },
+    ],
+
+    sidebar: {
+      '/config/': 'auto',
+      // catch-all fallback
+      '/': [
+        {
+          text: 'Guide',
+          children: [
+            {
+              text: 'Introduction',
+              link: '/guide/introduction',
+            },
+            {
+              text: 'Getting Started',
+              link: '/guide/',
+            },
+          ],
+        },
+      ],
+    },
+  },
+}
diff --git a/docs/.vitepress/styles/styles.css b/docs/.vitepress/styles/styles.css
@@ -0,0 +1,15 @@
+:root {
+  --c-brand: #cc0000;
+  --c-brand-light: #d53f3f;
+
+  --bg-colored-light: #f3f7f7;
+}
+
+.custom-block.custom-block.tip {
+  background-color: var(--bg-colored-light);
+  border-color: #00c7cc;
+}
+
+.custom-block.custom-block.tip a {
+  color: #007d80;
+}
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
@@ -0,0 +1,5 @@
+import Theme from 'vitepress/theme'
+
+import '../styles/styles.css'
+
+export default Theme