migrate: scss — @import to @use and add development mode

.eleventy.js

@@ -1,4 +1,5 @@
 const pluginRss = require('@11ty/eleventy-plugin-rss')
+require('dotenv').config()
 
 module.exports = function (eleventyConfig) {
   const { DateTime } = require('luxon')
@@ -36,6 +37,9 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.setLibrary('md', markdownIt)
 
+  const isDevelopment = process.env.NODE_ENV === 'development';
+  eleventyConfig.addGlobalData("isDevelopment", isDevelopment);
+
   eleventyConfig.addPlugin(pluginRss, {
     posthtmlRenderOptions: {
       closingSingleTag: 'default',
@@ -85,10 +89,15 @@ module.exports = function (eleventyConfig) {
     const [year, ...title] = titleParts
     const titleInitials = title.map(title => title.split('')[0]).join('')
     const yearSuffix = year.slice(-yearSplice)
-    
+
     return `${yearSuffix}-${titleInitials}`
   })
 
+  eleventyConfig.addFilter("development", (link) => {
+    console.log(isDevelopment)
+    return isDevelopment ? "/" : link;
+  });
+
   eleventyConfig.addFilter('breakLine', (string, cutAt = 3, maxSize = 30) => {
     const titleWords = string.split(' ')
     const titleLength = string.length
@@ -97,7 +106,7 @@ module.exports = function (eleventyConfig) {
 
     const hasTitleRemaining = !!titleRemaining
     const formattedTitleWithBreak = hasTitleRemaining ? `${titlePreview}<br/>${titleRemaining}` : titlePreview
-    
+
     const returnTitle = titleLength <= maxSize || !hasTitleRemaining ? string : formattedTitleWithBreak
     return returnTitle
   })

.gitignore

@@ -1,5 +1,6 @@
 # dependencies
 /node_modules
+.env
 
 # public files
 /public

archives/error.scss

@@ -0,0 +1,14 @@
+@import './modules/vars';
+@import './modules/mixin';
+@import './modules/global';
+
+@import './modules/component/preload';
+
+@import './modules/header';
+@import './modules/component/nav';
+@import './modules/component/title';
+@import './modules/main';
+@import './modules/footer';
+
+@import './modules/component/contact';
+@import './modules/component/error';

src/assets/scss/modules/_footer.scss → archives/modules/_footer.scss

@@ -1,70 +1,70 @@
-.footer {
-  background-color: var(--clr-background);
-  color: var(--clr-foreground);
-  padding: 0.8rem;
-
-  .brand {
-    display: flex;
-    gap: 0.5rem;
-    width: max-content;
-
-    &-title {
-      font-size: 1.3rem;
-      font-weight: 700;
-    }
-
-    &-logo {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  &-top {
-    padding: 0.8rem;
-    padding-top: 3rem;
-    font-size: 2rem;
-    max-width: 35ch;
-    line-height: 1.2;
-    position: relative;
-    isolation: isolate;
-
-    &::before {
-      content: '"';
-      position: absolute;
-      font-size: 4em;
-      left: 0;
-      top: 0;
-      color: var(--clr-background-800);
-      font-weight: 600;
-      user-select: none;
-      z-index: -1;
-    }
-  }
-
-  &-bottom {
-    padding: 0.8rem;
-    text-align: left;
-    display: flex;
-    flex-direction: column;
-    gap: 0.3em;
-  }
-
-  &-container {
-    max-width: 64rem;
-    margin: 0 auto;
-  }
-
-  .copyright {
-    font-size: 0.9rem;
-    margin: 1rem auto;
-    text-align: left;
-    border: 0.0625rem solid var(--clr-foreground);
-    width: 100%;
-    max-width: max-content;
-    padding: 0.2rem 2rem;
-
-    @include breakpoint-up('medium') {
-      flex-direction: row;
-    }
-  }
-}
+.footer {
+  background-color: var(--clr-background);
+  color: var(--clr-foreground);
+  padding: 0.8rem;
+
+  .brand {
+    display: flex;
+    gap: 0.5rem;
+    width: max-content;
+
+    &-title {
+      font-size: 1.3rem;
+      font-weight: 700;
+    }
+
+    &-logo {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &-top {
+    padding: 0.8rem;
+    padding-top: 3rem;
+    font-size: 2rem;
+    max-width: 35ch;
+    line-height: 1.2;
+    position: relative;
+    isolation: isolate;
+
+    &::before {
+      content: '"';
+      position: absolute;
+      font-size: 4em;
+      left: 0;
+      top: 0;
+      color: var(--clr-background-800);
+      font-weight: 600;
+      user-select: none;
+      z-index: -1;
+    }
+  }
+
+  &-bottom {
+    padding: 0.8rem;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3em;
+  }
+
+  &-container {
+    max-width: 64rem;
+    margin: 0 auto;
+  }
+
+  .copyright {
+    font-size: 0.9rem;
+    margin: 1rem auto;
+    text-align: left;
+    border: 0.0625rem solid var(--clr-foreground);
+    width: 100%;
+    max-width: max-content;
+    padding: 0.2rem 2rem;
+
+    @include breakpoint-up('medium') {
+      flex-direction: row;
+    }
+  }
+}