add comparison-slider (#7)

Author: denkiwakame

package-lock.json

@@ -48,6 +48,7 @@
     "@iconify-json/simple-icons": "^1.1.110",
     "@iconify/react": "^5.0.1",
     "highlight.js": "^11.11.1",
+    "img-comparison-slider": "^8.0.6",
     "marked": "^13.0.0",
     "marked-highlight": "^2.2.1",
     "marked-katex-extension": "^5.0.1",

package.json

@@ -4,11 +4,13 @@ import { marked } from 'marked';
 import markedKatex from 'marked-katex-extension';
 import { markedHighlight } from 'marked-highlight';
 import hljs from 'highlight.js';
-import 'highlight.js/styles/base16/gruvbox-dark-hard.css';
+//import 'highlight.js/styles/base16/gruvbox-dark-hard.css';
 // import 'highlight.js/styles/base16/github.css';
-// import 'highlight.js/styles/tokyo-night-dark.css';
+import 'highlight.js/styles/tokyo-night-dark.css';
 // import 'highlight.js/styles/pojoaque.css';
 
+import 'img-comparison-slider';
+
 const renderer = new marked.Renderer();
 renderer.table = (header, body) => {
   return `<div class="uk-overflow-auto uk-width-1-1"><table class="uk-table uk-table-small uk-text-small uk-table-divider"> ${header} ${body} </table></div>`;

public/004.jpg

@@ -6,6 +6,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Georgia:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
+// material design colors
+@import 'material-design-color/material-color';
+
 // font families
 $global-font-family: 'Merriweather', 'Georgia', 'Inter';
 $base-heading-font-family: 'Garamond', 'EB Garamond';
@@ -44,6 +47,8 @@ $button-primary-background: $theme-color;
 $global-primary-background: $accent-color;
 $text-primary-color: $theme-color-fg;
 
+$base-focus-outline-style: none;
+
 // uikit imports
 @import 'uikit/src/scss/variables-theme.scss';
 @import 'uikit/src/scss/mixins-theme.scss';

src/components/body.jsx

@@ -43,6 +43,8 @@ $button-primary-background: $theme-color;
 $global-primary-background: $accent-color;
 $text-primary-color: $theme-color-fg;
 
+$base-focus-outline-style: none;
+
 // uikit imports
 @import 'uikit/src/scss/variables-theme.scss';
 @import 'uikit/src/scss/mixins-theme.scss';

src/scss/classic-theme.scss

@@ -58,8 +58,12 @@ abstract: |
 body:
   - title: Media examples
     text: |
+      ### Mediafile Path
       Files in `public/` can be referenced directly: `<img src="001.jpg" />`
 
+      ### UIKit Components
+      This template supports all UIKit components.
+      To check available components, refer to the [UIKit documentation](https://getuikit.com/docs).
       [Slideshow](https://getuikit.com/docs/slideshow) example
 
       </div>
@@ -83,13 +87,16 @@ body:
       </div>
 
       [Grid system](https://getuikit.com/docs/grid) example
-      <div class="uk-child-width-1-2 uk-child-width-1-3@m" uk-grid>
+      <div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@m" uk-grid>
         <div>
           <img src="001.jpg">
           <span class="uk-text-meta">Fig1 - caption example</figcaption>
         </div>
         <div>
-          <img src="002.jpg">
+          <img-comparison-slider>
+            <img slot="first" src="002.jpg" />
+            <img slot="second" src="004.jpg" />
+          </img-comparison-slider>
           <span class="uk-text-meta">Fig2 - caption example</figcaption>
         </div>
         <div>
@@ -100,7 +107,7 @@ body:
 
       [Video](https://getuikit.com/docs/video) and [Slider](https://getuikit.com/docs/slider) component example
       <div uk-slider>
-        <div class="uk-slider-items uk-child-width-1-1 uk-child-width-1-2@m uk-grid">
+        <div class="uk-slider-items uk-grid-small uk-child-width-1-1 uk-child-width-1-2@m uk-grid">
           <div>
             <video
               src="https://yootheme.com/site/images/media/yootheme-pro.mp4"
@@ -217,6 +224,7 @@ body:
       $$ \begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD} $$
       [KaTeX supports a wide range of mathematical symbols and equations](https://katex.org/docs/support_table.html), ensuring your technical content is both clear and visually appealing.
       With markdown for text formatting and KaTeX for mathematical expressions, our template empowers you to communicate complex ideas effectively. Whether you're writing a scientific paper or a technical blog post, harnessing these tools will elevate your content and engage your readers.
+
   - title: Color Palette
     text: |
       To customize the theme, edit UIkit variables in [theme.scss](https://github.com/denkiwakame/academic-project-template/blob/project-page/src/scss/theme.scss). Material Design colors are available as variables (e.g. `$clr-blue-50` ). For the full set of colors, please visit [Material Design Color System](https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors).