ElMassimo / jekyll-vite

⚡️🩸 Use Vite.js in Jekyll as your assets pipeline
https://jekyll-vite.netlify.app/
MIT License
50 stars 6 forks source link

Jekyll site using minima theme does not work #4

Closed MidasVE closed 3 years ago

MidasVE commented 3 years ago

Description 📖

When running bin/vite serve, the local server url returns a 404

Reproduction 🐞

https://github.com/MidasVE/vitejekylltest

(Just ran jekyll new command and then followed the installation instructions from this repo)

Logs 📜

Ran DEBUG=vite-plugin-ruby:* bin/vite dev, provided the output:

Output ``` vite-plugin-ruby:config { vite-plugin-ruby:config base: '/vite-dev/', vite-plugin-ruby:config build: { vite-plugin-ruby:config emptyOutDir: true, vite-plugin-ruby:config sourcemap: false, vite-plugin-ruby:config assetsDir: 'assets', vite-plugin-ruby:config manifest: true, vite-plugin-ruby:config outDir: '..\\..\\.jekyll-cache\\vite-dev', vite-plugin-ruby:config rollupOptions: { input: {}, output: [Object] } vite-plugin-ruby:config }, vite-plugin-ruby:config root: 'D:\\Development\\vitejekylltest\\_frontend\\entrypoints', vite-plugin-ruby:config server: { vite-plugin-ruby:config host: 'localhost', vite-plugin-ruby:config https: false, vite-plugin-ruby:config port: 3036, vite-plugin-ruby:config strictPort: true, vite-plugin-ruby:config fsServe: { root: 'D:/Development/vitejekylltest' } vite-plugin-ruby:config }, vite-plugin-ruby:config entrypoints: {} vite-plugin-ruby:config } +0ms ```

Screenshots 📷

image

ElMassimo commented 3 years ago

Hi Midas!

Run bin/vite dev to start the Vite development server, and then restart your Jekyll server with bin/jekyll serve

Visit any page and you should see a printed console output: Vite ⚡️ Ruby.

I should clarify that you should visit any page in your Jekyll server. The Vite dev server will only serve assets.

ElMassimo commented 3 years ago

Edit: See jekyll-vite-minima for information on how to setup Vite Ruby with the minima theme.


@MidasVE

Here's a patch that you could apply to your example repo to get started with Vite.js.

Because you are using the minima theme, the default installation does not have a layout where it can write, so it requires some setup.

A git patch for the vitejekylltest repo ```patch diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0003547 --- /dev/null +++ b/.gitignore @@ -0,0 +1,12 @@ +/.bundle +pkg +log +tmp +node_modules +gemfiles/*.lock +.DS_Store +*.local +.rspec_status +.jekyll-cache +_site +/coverage diff --git a/Gemfile b/Gemfile index 2ceb991..2daebe9 100644 --- a/Gemfile +++ b/Gemfile @@ -8,6 +8,8 @@ source "https://rubygems.org" # This will help ensure the proper Jekyll version is running. # Happy Jekylling! gem "jekyll", "~> 4.2.0" +gem "webrick" + # This is the default theme for new Jekyll sites. You may change this to anything you like. gem "minima", "~> 2.5" # If you want to use GitHub Pages, remove the "gem "jekyll"" above and diff --git a/Gemfile.lock b/Gemfile.lock index 28cbe86..1632067 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -9,7 +9,9 @@ GEM em-websocket (0.5.2) eventmachine (>= 0.12.9) http_parser.rb (~> 0.6.0) + eventmachine (1.2.7) eventmachine (1.2.7-x64-mingw32) + ffi (1.15.3) ffi (1.15.3-x64-mingw32) forwardable-extended (2.6.0) http_parser.rb (0.6.0) @@ -66,25 +68,23 @@ GEM rexml (3.2.5) rouge (3.26.0) safe_yaml (1.0.5) + sassc (2.4.0) + ffi (~> 1.9) sassc (2.4.0-x64-mingw32) ffi (~> 1.9) terminal-table (2.0.0) unicode-display_width (~> 1.1, >= 1.1.1) - thread_safe (0.3.6) - tzinfo (1.2.9) - thread_safe (~> 0.1) - tzinfo-data (1.2021.1) - tzinfo (>= 1.0.0) unicode-display_width (1.7.0) vite_ruby (1.2.18) dry-cli (~> 0.7.0) rack-proxy (~> 0.6, >= 0.6.1) zeitwerk (~> 2.2) - wdm (0.1.1) + webrick (1.7.0) zeitwerk (2.4.2) PLATFORMS x64-mingw32 + x86_64-darwin-19 DEPENDENCIES jekyll (~> 4.2.0) @@ -94,6 +94,7 @@ DEPENDENCIES tzinfo (~> 1.2) tzinfo-data wdm (~> 0.1.1) + webrick BUNDLED WITH - 2.2.8 + 2.2.11 diff --git a/_config.yml b/_config.yml index 5a9d645..e04a001 100644 --- a/_config.yml +++ b/_config.yml @@ -8,7 +8,7 @@ # For technical reasons, this file is *NOT* reloaded automatically when you use # 'bundle exec jekyll serve'. If you change this file, please restart the server process. # -# If you need help with YAML syntax, here are some quick references for you: +# If you need help with YAML syntax, here are some quick references for you: # https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml # https://learnxinyminutes.com/docs/yaml/ # @@ -38,16 +38,16 @@ plugins: # Exclude from processing. # The following items will not be processed, by default. # Any item listed under the `exclude:` key here will be automatically added to - - bin - - config - - vite.config.ts - - tmp # the internal "default list". # # Excluded items can be processed by explicitly listing the directories or # their entries' file path in the `include:` list. # -# exclude: +exclude: + - bin + - config + - vite.config.ts + - tmp # - .sass-cache/ # - .jekyll-cache/ # - gemfiles/ diff --git a/_frontend/entrypoints/styles.scss b/_frontend/entrypoints/styles.scss new file mode 100644 index 0000000..cc8e65e --- /dev/null +++ b/_frontend/entrypoints/styles.scss @@ -0,0 +1 @@ +@import "~/minima/skins/classic", "~/minima/initialize"; diff --git a/_frontend/minima/_base.scss b/_frontend/minima/_base.scss new file mode 100644 index 0000000..a6f104e --- /dev/null +++ b/_frontend/minima/_base.scss @@ -0,0 +1,282 @@ +html { + font-size: $base-font-size; +} + +/** + * Reset some basic elements + */ +body, h1, h2, h3, h4, h5, h6, +p, blockquote, pre, hr, +dl, dd, ol, ul, figure { + margin: 0; + padding: 0; + +} + + + +/** + * Basic styling + */ +body { + font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; + color: $text-color; + background-color: $background-color; + -webkit-text-size-adjust: 100%; + -webkit-font-feature-settings: "kern" 1; + -moz-font-feature-settings: "kern" 1; + -o-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + font-kerning: normal; + display: flex; + min-height: 100vh; + flex-direction: column; + overflow-wrap: break-word; +} + + + +/** + * Set `margin-bottom` to maintain vertical rhythm + */ +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +ul, ol, dl, figure, +%vertical-rhythm { + margin-bottom: $spacing-unit / 2; +} + +hr { + margin-top: $spacing-unit; + margin-bottom: $spacing-unit; +} + +/** + * `main` element + */ +main { + display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ +} + + + +/** + * Images + */ +img { + max-width: 100%; + vertical-align: middle; +} + + + +/** + * Figures + */ +figure > img { + display: block; +} + +figcaption { + font-size: $small-font-size; +} + + + +/** + * Lists + */ +ul, ol { + margin-left: $spacing-unit; +} + +li { + > ul, + > ol { + margin-bottom: 0; + } +} + + + +/** + * Headings + */ +h1, h2, h3, h4, h5, h6 { + font-weight: $base-font-weight; +} + + + +/** + * Links + */ +a { + color: $link-base-color; + text-decoration: none; + + &:visited { + color: $link-visited-color; + } + + &:hover { + color: $link-hover-color; + text-decoration: underline; + } + + .social-media-list &:hover { + text-decoration: none; + + .username { + text-decoration: underline; + } + } +} + + +/** + * Blockquotes + */ +blockquote { + color: $brand-color; + border-left: 4px solid $border-color-01; + padding-left: $spacing-unit / 2; + @include relative-font-size(1.125); + font-style: italic; + + > :last-child { + margin-bottom: 0; + } + + i, em { + font-style: normal; + } +} + + + +/** + * Code formatting + */ +pre, +code { + font-family: $code-font-family; + font-size: 0.9375em; + border: 1px solid $border-color-01; + border-radius: 3px; + background-color: $code-background-color; +} + +code { + padding: 1px 5px; +} + +pre { + padding: 8px 12px; + overflow-x: auto; + + > code { + border: 0; + padding-right: 0; + padding-left: 0; + } +} + +.highlight { + border-radius: 3px; + background: $code-background-color; + @extend %vertical-rhythm; + + .highlighter-rouge & { + background: $code-background-color; + } +} + + + +/** + * Wrapper + */ +.wrapper { + max-width: calc(#{$content-width} - (#{$spacing-unit})); + margin-right: auto; + margin-left: auto; + padding-right: $spacing-unit / 2; + padding-left: $spacing-unit / 2; + @extend %clearfix; + + @media screen and (min-width: $on-large) { + max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); + padding-right: $spacing-unit; + padding-left: $spacing-unit; + } +} + + + +/** + * Clearfix + */ +%clearfix:after { + content: ""; + display: table; + clear: both; +} + + + +/** + * Icons + */ + +.orange { + color: #f66a0a; +} + +.grey { + color: #828282; +} + +.svg-icon { + width: 16px; + height: 16px; + display: inline-block; + fill: currentColor; + padding: 5px 3px 2px 5px; + vertical-align: text-bottom; +} + + +/** + * Tables + */ +table { + margin-bottom: $spacing-unit; + width: 100%; + text-align: $table-text-align; + color: $table-text-color; + border-collapse: collapse; + border: 1px solid $table-border-color; + tr { + &:nth-child(even) { + background-color: $table-zebra-color; + } + } + th, td { + padding: ($spacing-unit / 3) ($spacing-unit / 2); + } + th { + background-color: $table-header-bg-color; + border: 1px solid $table-header-border; + } + td { + border: 1px solid $table-border-color; + } + + @include media-query($on-laptop) { + display: block; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + } +} diff --git a/_frontend/minima/_layout.scss b/_frontend/minima/_layout.scss new file mode 100644 index 0000000..40d2cd1 --- /dev/null +++ b/_frontend/minima/_layout.scss @@ -0,0 +1,342 @@ +/** + * Site header + */ +.site-header { + border-top: 5px solid $border-color-03; + border-bottom: 1px solid $border-color-01; + min-height: $spacing-unit * 1.865; + line-height: $base-line-height * $base-font-size * 2.25; + + // Positioning context for the mobile navigation icon + position: relative; +} + +.site-title { + @include relative-font-size(1.625); + font-weight: 300; + letter-spacing: -1px; + margin-bottom: 0; + float: left; + + @include media-query($on-palm) { + padding-right: 45px; + } + + &, + &:visited { + color: $site-title-color; + } +} + +.site-nav { + position: absolute; + top: 9px; + right: $spacing-unit / 2; + background-color: $background-color; + border: 1px solid $border-color-01; + border-radius: 5px; + text-align: right; + + .nav-trigger { + display: none; + } + + .menu-icon { + float: right; + width: 36px; + height: 26px; + line-height: 0; + padding-top: 10px; + text-align: center; + + > svg path { + fill: $border-color-03; + } + } + + label[for="nav-trigger"] { + display: block; + float: right; + width: 36px; + height: 36px; + z-index: 2; + cursor: pointer; + } + + input ~ .trigger { + clear: both; + display: none; + } + + input:checked ~ .trigger { + display: block; + padding-bottom: 5px; + } + + .page-link { + color: $text-color; + line-height: $base-line-height; + display: block; + padding: 5px 10px; + + // Gaps between nav items, but not on the last one + &:not(:last-child) { + margin-right: 0; + } + margin-left: 20px; + } + + @media screen and (min-width: $on-medium) { + position: static; + float: right; + border: none; + background-color: inherit; + + label[for="nav-trigger"] { + display: none; + } + + .menu-icon { + display: none; + } + + input ~ .trigger { + display: block; + } + + .page-link { + display: inline; + padding: 0; + + &:not(:last-child) { + margin-right: 20px; + } + margin-left: auto; + } + } +} + + + +/** + * Site footer + */ +.site-footer { + border-top: 1px solid $border-color-01; + padding: $spacing-unit 0; +} + +.footer-heading { + @include relative-font-size(1.125); + margin-bottom: $spacing-unit / 2; +} + +.feed-subscribe .svg-icon { + padding: 5px 5px 2px 0 +} + +.contact-list, +.social-media-list { + list-style: none; + margin-left: 0; +} + +.footer-col-wrapper, +.social-links { + @include relative-font-size(0.9375); + color: $brand-color; +} + +.footer-col { + margin-bottom: $spacing-unit / 2; +} + +.footer-col-1, +.footer-col-2 { + width: calc(50% - (#{$spacing-unit} / 2)); +} + +.footer-col-3 { + width: calc(100% - (#{$spacing-unit} / 2)); +} + +@media screen and (min-width: $on-large) { + .footer-col-1 { + width: calc(35% - (#{$spacing-unit} / 2)); + } + + .footer-col-2 { + width: calc(20% - (#{$spacing-unit} / 2)); + } + + .footer-col-3 { + width: calc(45% - (#{$spacing-unit} / 2)); + } +} + +@media screen and (min-width: $on-medium) { + .footer-col-wrapper { + display: flex + } + + .footer-col { + width: calc(100% - (#{$spacing-unit} / 2)); + padding: 0 ($spacing-unit / 2); + + &:first-child { + padding-right: $spacing-unit / 2; + padding-left: 0; + } + + &:last-child { + padding-right: 0; + padding-left: $spacing-unit / 2; + } + } +} + + + +/** + * Page content + */ +.page-content { + padding: $spacing-unit 0; + flex: 1 0 auto; +} + +.page-heading { + @include relative-font-size(2); +} + +.post-list-heading { + @include relative-font-size(1.75); +} + +.post-list { + margin-left: 0; + list-style: none; + + > li { + margin-bottom: $spacing-unit; + } +} + +.post-meta { + font-size: $small-font-size; + color: $brand-color; +} + +.post-link { + display: block; + @include relative-font-size(1.5); +} + + + +/** + * Posts + */ +.post-header { + margin-bottom: $spacing-unit; +} + +.post-title, +.post-content h1 { + @include relative-font-size(2.625); + letter-spacing: -1px; + line-height: 1.15; + + @media screen and (min-width: $on-large) { + @include relative-font-size(2.625); + } +} + +.post-content { + margin-bottom: $spacing-unit; + + h1, h2, h3 { margin-top: $spacing-unit * 2 } + h4, h5, h6 { margin-top: $spacing-unit } + + h2 { + @include relative-font-size(1.75); + + @media screen and (min-width: $on-large) { + @include relative-font-size(2); + } + } + + h3 { + @include relative-font-size(1.375); + + @media screen and (min-width: $on-large) { + @include relative-font-size(1.625); + } + } + + h4 { + @include relative-font-size(1.25); + } + + h5 { + @include relative-font-size(1.125); + } + h6 { + @include relative-font-size(1.0625); + } +} + + +.social-media-list { + display: table; + margin: 0 auto; + li { + float: left; + margin: 5px 10px 5px 0; + &:last-of-type { margin-right: 0 } + a { + display: block; + padding: $spacing-unit / 4; + border: 1px solid $border-color-01; + &:hover { border-color: $border-color-02 } + } + } +} + + + +/** + * Pagination navbar + */ +.pagination { + margin-bottom: $spacing-unit; + @extend .social-media-list; + li { + a, div { + min-width: 41px; + text-align: center; + box-sizing: border-box; + } + div { + display: block; + padding: $spacing-unit / 4; + border: 1px solid transparent; + + &.pager-edge { + color: $border-color-01; + border: 1px dashed; + } + } + } +} + + + +/** + * Grid helpers + */ +@media screen and (min-width: $on-large) { + .one-half { + width: calc(50% - (#{$spacing-unit} / 2)); + } +} diff --git a/_frontend/minima/custom-styles.scss b/_frontend/minima/custom-styles.scss new file mode 100644 index 0000000..436746f --- /dev/null +++ b/_frontend/minima/custom-styles.scss @@ -0,0 +1 @@ +// https://github.com/jekyll/minima/blob/master/_sass/minima/custom-styles.scss diff --git a/_frontend/minima/custom-variables.scss b/_frontend/minima/custom-variables.scss new file mode 100644 index 0000000..2a2d0fa --- /dev/null +++ b/_frontend/minima/custom-variables.scss @@ -0,0 +1 @@ +// Placeholder to allow overriding predefined variables smoothly. diff --git a/_frontend/minima/initialize.scss b/_frontend/minima/initialize.scss new file mode 100644 index 0000000..611683a --- /dev/null +++ b/_frontend/minima/initialize.scss @@ -0,0 +1,50 @@ +@charset "utf-8"; + +// Define defaults for each variable. + +$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif !default; +$code-font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace; +$base-font-size: 16px !default; +$base-font-weight: 400 !default; +$small-font-size: $base-font-size * 0.875 !default; +$base-line-height: 1.5 !default; + +$spacing-unit: 30px !default; + +$table-text-align: left !default; + +// Width of the content area +$content-width: 800px !default; + +$on-palm: 600px !default; +$on-laptop: 800px !default; + +$on-medium: $on-palm !default; +$on-large: $on-laptop !default; + +// Use media queries like this: +// @include media-query($on-palm) { +// .wrapper { +// padding-right: $spacing-unit / 2; +// padding-left: $spacing-unit / 2; +// } +// } +// Notice the following mixin uses max-width, in a deprecated, desktop-first +// approach, whereas media queries used elsewhere now use min-width. +@mixin media-query($device) { + @media screen and (max-width: $device) { + @content; + } +} + +@mixin relative-font-size($ratio) { + font-size: #{$ratio}rem; +} + +// Import pre-styling-overrides hook and style-partials. +@import + "~/minima/custom-variables", // Hook to override predefined variables. + "~/minima/base", // Defines element resets. + "~/minima/layout", // Defines structure and style based on CSS selectors. + "~/minima/custom-styles" // Hook to override existing styles. +; diff --git a/_frontend/minima/skins/classic.scss b/_frontend/minima/skins/classic.scss new file mode 100644 index 0000000..c6dc292 --- /dev/null +++ b/_frontend/minima/skins/classic.scss @@ -0,0 +1,91 @@ +@charset "utf-8"; + +$brand-color: #828282 !default; +$brand-color-light: lighten($brand-color, 40%) !default; +$brand-color-dark: darken($brand-color, 25%) !default; + +$site-title-color: $brand-color-dark !default; + +$text-color: #111111 !default; +$background-color: #fdfdfd !default; +$code-background-color: #eeeeff !default; + +$link-base-color: #2a7ae2 !default; +$link-visited-color: darken($link-base-color, 15%) !default; +$link-hover-color: $text-color !default; + +$border-color-01: $brand-color-light !default; +$border-color-02: lighten($brand-color, 35%) !default; +$border-color-03: $brand-color-dark !default; + +$table-text-color: lighten($text-color, 18%) !default; +$table-zebra-color: lighten($brand-color, 46%) !default; +$table-header-bg-color: lighten($brand-color, 43%) !default; +$table-header-border: lighten($brand-color, 37%) !default; +$table-border-color: $border-color-01 !default; + + +// Syntax highlighting styles should be adjusted appropriately for every "skin" +// ---------------------------------------------------------------------------- + +.highlight { + .c { color: #998; font-style: italic } // Comment + .err { color: #a61717; background-color: #e3d2d2 } // Error + .k { font-weight: bold } // Keyword + .o { font-weight: bold } // Operator + .cm { color: #998; font-style: italic } // Comment.Multiline + .cp { color: #999; font-weight: bold } // Comment.Preproc + .c1 { color: #998; font-style: italic } // Comment.Single + .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: #000; background-color: #fdd } // Generic.Deleted + .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific + .ge { font-style: italic } // Generic.Emph + .gr { color: #a00 } // Generic.Error + .gh { color: #999 } // Generic.Heading + .gi { color: #000; background-color: #dfd } // Generic.Inserted + .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific + .go { color: #888 } // Generic.Output + .gp { color: #555 } // Generic.Prompt + .gs { font-weight: bold } // Generic.Strong + .gu { color: #aaa } // Generic.Subheading + .gt { color: #a00 } // Generic.Traceback + .kc { font-weight: bold } // Keyword.Constant + .kd { font-weight: bold } // Keyword.Declaration + .kp { font-weight: bold } // Keyword.Pseudo + .kr { font-weight: bold } // Keyword.Reserved + .kt { color: #458; font-weight: bold } // Keyword.Type + .m { color: #099 } // Literal.Number + .s { color: #d14 } // Literal.String + .na { color: #008080 } // Name.Attribute + .nb { color: #0086B3 } // Name.Builtin + .nc { color: #458; font-weight: bold } // Name.Class + .no { color: #008080 } // Name.Constant + .ni { color: #800080 } // Name.Entity + .ne { color: #900; font-weight: bold } // Name.Exception + .nf { color: #900; font-weight: bold } // Name.Function + .nn { color: #555 } // Name.Namespace + .nt { color: #000080 } // Name.Tag + .nv { color: #008080 } // Name.Variable + .ow { font-weight: bold } // Operator.Word + .w { color: #bbb } // Text.Whitespace + .mf { color: #099 } // Literal.Number.Float + .mh { color: #099 } // Literal.Number.Hex + .mi { color: #099 } // Literal.Number.Integer + .mo { color: #099 } // Literal.Number.Oct + .sb { color: #d14 } // Literal.String.Backtick + .sc { color: #d14 } // Literal.String.Char + .sd { color: #d14 } // Literal.String.Doc + .s2 { color: #d14 } // Literal.String.Double + .se { color: #d14 } // Literal.String.Escape + .sh { color: #d14 } // Literal.String.Heredoc + .si { color: #d14 } // Literal.String.Interpol + .sx { color: #d14 } // Literal.String.Other + .sr { color: #009926 } // Literal.String.Regex + .s1 { color: #d14 } // Literal.String.Single + .ss { color: #990073 } // Literal.String.Symbol + .bp { color: #999 } // Name.Builtin.Pseudo + .vc { color: #008080 } // Name.Variable.Class + .vg { color: #008080 } // Name.Variable.Global + .vi { color: #008080 } // Name.Variable.Instance + .il { color: #099 } // Literal.Number.Integer.Long +} diff --git a/_includes/custom-head.html b/_includes/custom-head.html new file mode 100644 index 0000000..237f133 --- /dev/null +++ b/_includes/custom-head.html @@ -0,0 +1,2 @@ +{% vite_client_tag %} +{% vite_stylesheet_tag styles.scss %} +{% vite_javascript_tag application %} diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000..a604d80 --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,11 @@ + + + + + {%- seo -%} + {%- feed_meta -%} + {%- if jekyll.environment == 'production' and site.google_analytics -%} + {%- include google-analytics.html -%} + {%- endif -%} + {%- include custom-head.html -%} + diff --git a/bin/jekyll b/bin/jekyll old mode 100644 new mode 100755 diff --git a/bin/vite b/bin/vite old mode 100644 new mode 100755 diff --git a/package-lock.json b/package-lock.json index cbdcffd..c6297ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "devDependencies": { + "sass": "^1.36.0", "vite": "^2.3.8", "vite-plugin-ruby": "^2.0.4" } @@ -44,6 +45,28 @@ "node": ">= 8" } }, + "node_modules/anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dev": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/braces": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", @@ -56,6 +79,27 @@ "node": ">=8" } }, + "node_modules/chokidar": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz", + "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==", + "dev": true, + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/colorette": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", @@ -170,6 +214,18 @@ "node": ">= 0.4.0" } }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-core-module": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.5.0.tgz", @@ -252,6 +308,15 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", @@ -308,6 +373,18 @@ } ] }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/resolve": { "version": "1.20.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", @@ -369,6 +446,21 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/sass": { + "version": "1.36.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.36.0.tgz", + "integrity": "sha512-fQzEjipfOv5kh930nu3Imzq3ie/sGDc/4KtQMJlt7RRdrkQSfe37Bwi/Rf/gfuYHsIuE1fIlDMvpyMcEwjnPvg==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=8.9.0" + } + }, "node_modules/source-map-js": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz", @@ -452,6 +544,22 @@ "fastq": "^1.6.0" } }, + "anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dev": true, + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true + }, "braces": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", @@ -461,6 +569,22 @@ "fill-range": "^7.0.1" } }, + "chokidar": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz", + "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==", + "dev": true, + "requires": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "fsevents": "~2.3.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + } + }, "colorette": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", @@ -544,6 +668,15 @@ "function-bind": "^1.1.1" } }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "requires": { + "binary-extensions": "^2.0.0" + } + }, "is-core-module": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.5.0.tgz", @@ -602,6 +735,12 @@ "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==", "dev": true }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true + }, "path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", @@ -631,6 +770,15 @@ "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", "dev": true }, + "readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "requires": { + "picomatch": "^2.2.1" + } + }, "resolve": { "version": "1.20.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", @@ -665,6 +813,15 @@ "queue-microtask": "^1.2.2" } }, + "sass": { + "version": "1.36.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.36.0.tgz", + "integrity": "sha512-fQzEjipfOv5kh930nu3Imzq3ie/sGDc/4KtQMJlt7RRdrkQSfe37Bwi/Rf/gfuYHsIuE1fIlDMvpyMcEwjnPvg==", + "dev": true, + "requires": { + "chokidar": ">=3.0.0 <4.0.0" + } + }, "source-map-js": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz", diff --git a/package.json b/package.json index 0f48eff..d3e8bbb 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "devDependencies": { + "sass": "^1.36.0", "vite": "^2.3.8", "vite-plugin-ruby": "^2.0.4" } ```

If you are using minima higher than 2.5.1 (see https://github.com/jekyll/minima/issues/472), for example by using it directly from master, then the setup is a lot simpler since you can provide _includes/custom-head.html with:

{% vite_client_tag %}
{% vite_javascript_tag application %}
MidasVE commented 3 years ago

Thanks @ElMassimo ! I'll try your suggestions and let you know how it went