Github pages docs (#1627)

* Attempt #1 * Workflow update. * Workflow update #2 * Workflow update #3 * Test base. * Test image path #1 * Fix assets. * Font relative path. * Fix og. * Reset test config.
area17 · May 6, 2022 · 5a5a2ac · 5a5a2ac
1 parent f3c412e
commit 5a5a2ac
Show file tree

Hide file tree

Showing 27 changed files with 39 additions and 38 deletions.
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -19,5 +19,5 @@ jobs:
           ACCESS_TOKEN: ${{ secrets.TWILL_PAT_TOKEN }}
           TARGET_REPO: area17/twill
           TARGET_BRANCH: build/docs
-          BUILD_SCRIPT: cd docs && npm ci && npm run build
+          BUILD_SCRIPT: cd docs && npm ci && VUEPRESS_BASE=twill npm run build
           BUILD_DIR: docs/
diff --git a/docs/package.json b/docs/package.json
@@ -3,7 +3,7 @@
     "scripts": {
         "dev": "vuepress dev src",
         "build": "vuepress build src",
-        "prod": "npm run build && mkdir -p docs/api && cp -R ../docs-api/build/* docs/api"
+        "prod": "export VUEPRESS_BASE=docs && npm run build && mkdir -p docs/api && cp -R ../docs-api/build/* docs/api"
     },
     "dependencies": {
         "@vuepress/plugin-google-analytics": "1.3.1",

diff --git a/docs/src/.vuepress/config.js b/docs/src/.vuepress/config.js
@@ -1,19 +1,20 @@
+let base = process.env.VUEPRESS_BASE || 'docs';
 module.exports = {
   title: 'Twill',
   description: 'Twill — An open source CMS toolkit for Laravel',
-  base: "/docs/",
+  base: `/${base}/`,
   dest: "docs",
   head: [
-    ['link', { rel: 'shortcut icon', href: '/favicon.ico' }],
-    ['link', { rel: 'apple-touch-icon', href: '/favicon-192.png' }],
+    ['link', { rel: 'shortcut icon', href: `/${base}/favicon.ico` }],
+    ['link', { rel: 'apple-touch-icon', href: `/${base}/favicon-192.png` }],
     ['meta', { name: 'theme-color', content: '#000000' }],
     ['meta', { property: 'og:url', content: 'https://twill.io/' }],
     ['meta', { name: 'twitter:url', content: 'https://twill.io/' }],
-    ['meta', { property: 'og:image', content: '/social_share.png' }],
+    ['meta', { property: 'og:image', content: `/${base}/social_share.png` }],
     ['meta', { property: 'og:image:width', content: '1200' }],
     ['meta', { property: 'og:image:height', content: '630' }],
-    ['meta', { name: 'twitter:image', content: '/social_share.png' }],
-    ['meta', { itemprop: 'image', content: '/social_share.png' }],
+    ['meta', { name: 'twitter:image', content: `/${base}/social_share.png` }],
+    ['meta', { itemprop: 'image', content: `/${base}/social_share.png` }],
     ['meta', { property: 'og:site_name', content: 'Twill' }],
     ['meta', { property: 'og:author', content: 'https://www.facebook.com/twillcms/' }],
     ['meta', { name: 'twitter:card', content: 'summary_large_image' }],

diff --git a/docs/src/.vuepress/styles/index.styl b/docs/src/.vuepress/styles/index.styl
@@ -2,17 +2,17 @@
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 400;
-  src: url("/docs/Inter-Regular.woff2") format("woff2"),
-       url("/docs/Inter-Regular.woff") format("woff");
+  src: url("../../../../src/.vuepress/public/Inter-Regular.woff2") format("woff2"),
+       url("../../../../src/.vuepress/public/Inter-Regular.woff") format("woff");
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 600;
-  src: url("/docs/Inter-Medium.woff2") format("woff2"),
-       url("/docs/Inter-Medium.woff") format("woff");
+  src: url("../../../../src/.vuepress/public/Inter-Medium.woff2") format("woff2"),
+       url("../../../../src/.vuepress/public/Inter-Medium.woff") format("woff");
   font-display: block;
 }
 

diff --git a/docs/src/crud-modules/controllers.md b/docs/src/crud-modules/controllers.md
@@ -279,7 +279,7 @@ If needed you can customize the permalink displayed in the admin interface when
 useful if you are using Laravel for displaying your front-end as you do not need to keep your permalink and routes in
 sync.
 
-![screenshot](/docs/_media/custom-permalink.png)
+![screenshot](../.vuepress/public/_media/custom-permalink.png)
 
 This can be done by setting the `customPermalink` via the `formData` method in the model controller.
 

diff --git a/docs/src/crud-modules/nested-modules.md b/docs/src/crud-modules/nested-modules.md
@@ -10,7 +10,7 @@ Out of the box, Twill supports 2 kinds of nested modules: [self-nested](#self-ne
 
 Self-nested modules allow items to be nested within other items of the same module (e.g. Pages can contain other Pages):
 
-![self-nested module](/docs/_media/nested-module.png)
+![self-nested module](../.vuepress/public/_media/nested-module.png)
 
 ### Creating self-nested modules
 
@@ -85,7 +85,7 @@ For more information on how to work with nested items in your application, you c
 
 Parent-child modules are 2 distinct modules, where items of the child module are attached to items of the parent module (e.g. Issues can contain Articles):
 
-![parent-child modules](/docs/_media/nested-parent-index.png)
+![parent-child modules](../.vuepress/public/_media/nested-parent-index.png)
 
 Items of the child module can't be created independently.
 
@@ -251,7 +251,7 @@ class IssueArticleController extends BaseModuleController
 }
 ```
 
-![child module index](/docs/_media/nested-child-index.png)
+![child module index](../.vuepress/public/_media/nested-child-index.png)
 
 <br>
 
@@ -284,4 +284,4 @@ Then, override the `formData()` method to do the same in the form view:
     }
 ```
 
-![nested child form](/docs/_media/nested-child-form.png)
+![nested child form](../.vuepress/public/_media/nested-child-form.png)
diff --git a/docs/src/form-fields/block-editor.md b/docs/src/form-fields/block-editor.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Block Editor
 
-![screenshot](/docs/_media/blockeditor.png)
+![screenshot](../.vuepress/public/_media/blockeditor.png)
 
 ```php
 @formField('block_editor', [

diff --git a/docs/src/form-fields/browser.md b/docs/src/form-fields/browser.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Browser
 
-![screenshot](/docs/_media/browser.png)
+![screenshot](../.vuepress/public/_media/browser.png)
 
 ```php
 @formField('browser', [

diff --git a/docs/src/form-fields/checkbox.md b/docs/src/form-fields/checkbox.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Checkbox
 
-![screenshot](/docs/_media/checkbox.png)
+![screenshot](../.vuepress/public/_media/checkbox.png)
 
 ```php
 @formField('checkbox', [

diff --git a/docs/src/form-fields/color.md b/docs/src/form-fields/color.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Color
 
-![screenshot](/docs/_media/color.png)
+![screenshot](../.vuepress/public/_media/color.png)
 
 ```php
 @formField('color', [

diff --git a/docs/src/form-fields/datepicker.md b/docs/src/form-fields/datepicker.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Datepicker
 
-![screenshot](/docs/_media/datepicker.png)
+![screenshot](../.vuepress/public/_media/datepicker.png)
 
 ```php
 @formField('date_picker', [

diff --git a/docs/src/form-fields/files.md b/docs/src/form-fields/files.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Files
 
-![screenshot](/docs/_media/files.png)
+![screenshot](../.vuepress/public/_media/files.png)
 
 ```php
 @formField('files', [

diff --git a/docs/src/form-fields/index.md b/docs/src/form-fields/index.md
@@ -98,4 +98,4 @@ alternatively, or if you need more control, you can use the `sideFieldsets` sect
 
 Both combined produces the result as shown in the screenshot below:
 
-![screenshot](/docs/_media/screenshot-sidebar.png)
+![screenshot](../.vuepress/public/_media/screenshot-sidebar.png)
diff --git a/docs/src/form-fields/input.md b/docs/src/form-fields/input.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Input
 
-![screenshot](/docs/_media/input.png)
+![screenshot](../.vuepress/public/_media/input.png)
 
 ```php
 @formField('input', [

diff --git a/docs/src/form-fields/map.md b/docs/src/form-fields/map.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Map
 
-![screenshot](/docs/_media/map.png)
+![screenshot](../.vuepress/public/_media/map.png)
 
 ```php
 @formField('map', [

diff --git a/docs/src/form-fields/medias.md b/docs/src/form-fields/medias.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Medias
 
-![screenshot](/docs/_media/medias.png)
+![screenshot](../.vuepress/public/_media/medias.png)
 
 ```php
 @formField('medias', [

diff --git a/docs/src/form-fields/multi-select-inline.md b/docs/src/form-fields/multi-select-inline.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Multi Select Inline
 
-![screenshot](/docs/_media/multiselectinline.png)
+![screenshot](../.vuepress/public/_media/multiselectinline.png)
 
 ```php
 @formField('multi_select', [

diff --git a/docs/src/form-fields/multi-select.md b/docs/src/form-fields/multi-select.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Multi Select
 
-![screenshot](/docs/_media/multiselectunpacked.png)
+![screenshot](../.vuepress/public/_media/multiselectunpacked.png)
 
 ```php
 @formField('multi_select', [

diff --git a/docs/src/form-fields/multiple-checkboxes.md b/docs/src/form-fields/multiple-checkboxes.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Multiple Checkboxes
 
-![screenshot](/docs/_media/checkboxes.png)
+![screenshot](../.vuepress/public/_media/checkboxes.png)
 
 ```php
 @formField('checkboxes', [

diff --git a/docs/src/form-fields/radios.md b/docs/src/form-fields/radios.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Radios
 
-![screenshot](/docs/_media/radios.png)
+![screenshot](../.vuepress/public/_media/radios.png)
 
 ```php
 @formField('radios', [

diff --git a/docs/src/form-fields/repeater.md b/docs/src/form-fields/repeater.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Repeater
 
-![screenshot](/docs/_media/repeater.png)
+![screenshot](../.vuepress/public/_media/repeater.png)
 
 ```php
 @formField('repeater', ['type' => 'video'])

diff --git a/docs/src/form-fields/select-unpacked.md b/docs/src/form-fields/select-unpacked.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Select Unpacked
 
-![screenshot](/docs/_media/selectunpacked.png)
+![screenshot](../.vuepress/public/_media/selectunpacked.png)
 
 ```php
 @formField('select', [

diff --git a/docs/src/form-fields/select.md b/docs/src/form-fields/select.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # Select
 
-![screenshot](/docs/_media/select.png)
+![screenshot](../.vuepress/public/_media/select.png)
 
 ```php
 @formField('select', [

diff --git a/docs/src/form-fields/wysiwyg.md b/docs/src/form-fields/wysiwyg.md
@@ -4,7 +4,7 @@ pageClass: twill-doc
 
 # WYSIWYG
 
-![screenshot](/docs/_media/wysiwyg.png)
+![screenshot](../.vuepress/public/_media/wysiwyg.png)
 
 ```php
 @formField('wysiwyg', [

diff --git a/docs/src/index.md b/docs/src/index.md
@@ -6,7 +6,7 @@ next: "/preface/"
 
 # Twill Documentation
 
-![Twill Dashboard](/docs/_media/twill-dashboard.jpg)
+![Twill Dashboard](./.vuepress/public/_media/twill-dashboard.jpg)
 
 #### About Twill
 

diff --git a/docs/src/media-library/imgix-and-local-uploads.md b/docs/src/media-library/imgix-and-local-uploads.md
@@ -6,4 +6,4 @@ pageClass: twill-doc
 
 When setting up an Imgix source for local uploads, choose the `Web Folder` source type and specify your domain in the `Base URL` settings.
 
-![screenshot](/docs/_media/imgix_source.png)
+![screenshot](../.vuepress/public/_media/imgix_source.png)
diff --git a/docs/src/media-library/index.md b/docs/src/media-library/index.md
@@ -4,4 +4,4 @@ pageClass: twill-doc
 
 # Media Library
 
-![screenshot](/docs/_media/medialibrary.png)
+![screenshot](../.vuepress/public/_media/medialibrary.png)