diff --git a/package.json b/package.json index 1fbc5b5..68fd04f 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,6 @@ "react-chartjs-2": "^5.2.0", "react-dom": "npm:@preact/compat@latest", "reading-time": "^1.5.0", - "sal.js": "^0.8.5", "swup": "^4.6.1", "tailwindcss": "^3.4.3", "unist-util-visit": "^5.0.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4b9706f..a87f44a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -120,9 +120,6 @@ importers: reading-time: specifier: ^1.5.0 version: 1.5.0 - sal.js: - specifier: ^0.8.5 - version: 0.8.5 swup: specifier: ^4.6.1 version: 4.7.0 @@ -6165,10 +6162,6 @@ packages: safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} - sal.js@0.8.5: - resolution: {integrity: sha512-KUb3fNrVZ1oWxxkEAfQfQ4Mrd910yboIRHqsvioBkulQInqMVeSMah+J5f7ch7KXFLicKlAaE0TzTsG/eJ02Dg==} - engines: {node: '>=12.0.0'} - sass-formatter@0.7.9: resolution: {integrity: sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==} @@ -14334,8 +14327,6 @@ snapshots: safer-buffer@2.1.2: {} - sal.js@0.8.5: {} - sass-formatter@0.7.9: dependencies: suf-log: 2.5.3 diff --git a/public/assets/scripts/sal.js b/public/assets/scripts/sal.js deleted file mode 100644 index 91d3e1b..0000000 --- a/public/assets/scripts/sal.js +++ /dev/null @@ -1,2 +0,0 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.sal=t():e.sal=t()}(this,(function(){return(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function r(e){for(var t=1;tj});var a="Sal was not initialised! Probably it is used in SSR.",s="Your browser does not support IntersectionObserver!\nGet a polyfill from here:\nhttps://github.com/w3c/IntersectionObserver/tree/master/polyfill",i={root:null,rootMargin:"0% 50%",threshold:.5,animateClassName:"sal-animate",disabledClassName:"sal-disabled",enterEventName:"sal:in",exitEventName:"sal:out",selector:"[data-sal]",once:!0,disabled:!1},l=[],c=null,u=function(e){e&&e!==i&&(i=r(r({},i),e))},d=function(e){e.classList.remove(i.animateClassName)},f=function(e,t){var n=new CustomEvent(e,{bubbles:!0,detail:t});t.target.dispatchEvent(n)},b=function(){document.body.classList.add(i.disabledClassName)},p=function(){c.disconnect(),c=null},m=function(){return i.disabled||"function"==typeof i.disabled&&i.disabled()},v=function(e,t){e.forEach((function(e){var n=e.target,r=void 0!==n.dataset.salRepeat,o=void 0!==n.dataset.salOnce,a=r||!(o||i.once);e.intersectionRatio>=i.threshold?(function(e){e.target.classList.add(i.animateClassName),f(i.enterEventName,e)}(e),a||t.unobserve(n)):a&&function(e){d(e.target),f(i.exitEventName,e)}(e)}))},y=function(){var e=[].filter.call(document.querySelectorAll(i.selector),(function(e){return!function(e){return e.classList.contains(i.animateClassName)}(e,i.animateClassName)}));return e.forEach((function(e){return c.observe(e)})),e},O=function(){b(),p()},h=function(){document.body.classList.remove(i.disabledClassName),c=new IntersectionObserver(v,{root:i.root,rootMargin:i.rootMargin,threshold:i.threshold}),l=y()},g=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};p(),Array.from(document.querySelectorAll(i.selector)).forEach(d),u(e),h()},w=function(){var e=y();l.push(e)};const j=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:i;if(u(e),"undefined"==typeof window)return console.warn(a),{elements:l,disable:O,enable:h,reset:g,update:w};if(!window.IntersectionObserver)throw b(),Error(s);return m()?b():h(),{elements:l,disable:O,enable:h,reset:g,update:w}};return t.default})()})); -//# sourceMappingURL=sal.js.map \ No newline at end of file diff --git a/public/assets/scripts/sal.js.map b/public/assets/scripts/sal.js.map deleted file mode 100644 index 1871641..0000000 --- a/public/assets/scripts/sal.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack://sal/webpack/universalModuleDefinition","webpack://sal/webpack/bootstrap","webpack://sal/webpack/runtime/define property getters","webpack://sal/webpack/runtime/hasOwnProperty shorthand","webpack://sal/./src/sal.js"],"names":["root","factory","exports","module","define","amd","this","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","SSR_MESSAGE","NOT_SUPPORTED_MESSAGE","options","rootMargin","threshold","animateClassName","disabledClassName","enterEventName","exitEventName","selector","once","disabled","elements","intersectionObserver","setOptions","settings","clearAnimation","element","classList","remove","fireEvent","name","entry","event","CustomEvent","bubbles","detail","target","dispatchEvent","disableAnimations","document","body","add","clearObserver","disconnect","isDisabled","onIntersection","entries","observer","forEach","hasRepeatFlag","undefined","dataset","salRepeat","hasOnceFlag","salOnce","shouldRepeat","intersectionRatio","animate","unobserve","reverse","getObservedElements","collection","filter","querySelectorAll","contains","isAnimated","observe","disable","enable","IntersectionObserver","reset","Array","from","update","newElements","push","window","console","warn","Error"],"mappings":"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","file":"sal.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"sal\"] = factory();\n\telse\n\t\troot[\"sal\"] = factory();\n})(this, function() {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","/**\n * Sal - Scroll Animation Library\n * Performance focused, lightweight scroll animation library\n */\n\nimport './sal.scss';\n\nconst SSR_MESSAGE = 'Sal was not initialised! Probably it is used in SSR.';\n\nconst NOT_SUPPORTED_MESSAGE = ''\n + 'Your browser does not support IntersectionObserver!\\n'\n + 'Get a polyfill from here:\\n'\n + 'https://github.com/w3c/IntersectionObserver/tree/master/polyfill';\n\n/**\n * Default options\n */\nlet options = {\n root: null,\n rootMargin: '0% 50%',\n threshold: 0.5,\n animateClassName: 'sal-animate',\n disabledClassName: 'sal-disabled',\n enterEventName: 'sal:in',\n exitEventName: 'sal:out',\n selector: '[data-sal]',\n once: true,\n disabled: false,\n};\n\n/**\n * Private\n */\nlet elements = [];\nlet intersectionObserver = null;\n\n/**\n * Sets options.\n * @param {Object} settings\n */\nconst setOptions = (settings) => {\n if (settings && settings !== options) {\n options = {\n ...options,\n ...settings,\n };\n }\n};\n\n/**\n * Clears animation for given element.\n * @param {HTMLElement} element\n */\nconst clearAnimation = (element) => {\n element.classList.remove(options.animateClassName);\n};\n\n/**\n * Dispatches the animate event on the intersection observer entry.\n * @param {IntersectionObserverEntry} detail The entry to fire event on.\n */\nconst fireEvent = (name, entry) => {\n const event = new CustomEvent(name, {\n bubbles: true,\n detail: entry,\n });\n\n entry.target.dispatchEvent(event);\n};\n\n/**\n * Launches animation by adding class.\n * @param {IntersectionObserverEntry} entry\n */\nconst animate = (entry) => {\n entry.target.classList.add(options.animateClassName);\n fireEvent(options.enterEventName, entry);\n};\n\n/**\n * Reverses animation by removing class.\n * @param {IntersectionObserverEntry} entry\n */\nconst reverse = (entry) => {\n clearAnimation(entry.target);\n fireEvent(options.exitEventName, entry);\n};\n\n/**\n * Checks if element was animated.\n * @param {HTMLElement} element\n */\nconst isAnimated = (element) => (\n element.classList.contains(options.animateClassName)\n);\n\n/**\n * Enables animations by remove class from body.\n */\nconst enableAnimations = () => {\n document.body.classList.remove(options.disabledClassName);\n};\n\n/**\n * Disables animations by add class from body.\n */\nconst disableAnimations = () => {\n document.body.classList.add(options.disabledClassName);\n};\n\n/**\n * Clears observer.\n */\nconst clearObserver = () => {\n intersectionObserver.disconnect();\n intersectionObserver = null;\n};\n\n/**\n * Check if should be disabled.\n * @return {Boolean}\n */\nconst isDisabled = () => (\n options.disabled\n || (\n (typeof options.disabled === 'function')\n && options.disabled()\n )\n);\n\n/**\n * IntersectionObserver callback.\n * @param {Array} entries\n * @param {IntersectionObserver} observer\n */\nconst onIntersection = (entries, observer) => {\n entries.forEach((entry) => {\n const { target } = entry;\n const hasRepeatFlag = target.dataset.salRepeat !== undefined;\n const hasOnceFlag = target.dataset.salOnce !== undefined;\n const shouldRepeat = hasRepeatFlag || !(hasOnceFlag || options.once);\n\n if (entry.intersectionRatio >= options.threshold) {\n animate(entry);\n\n if (!shouldRepeat) {\n observer.unobserve(target);\n }\n } else if (shouldRepeat) {\n reverse(entry);\n }\n });\n};\n\n/**\n * Returns collection of elements and pushes them to observer.\n *\n * @returns {Array}\n */\nconst getObservedElements = () => {\n const collection = [].filter.call(\n document.querySelectorAll(options.selector),\n (element) => !isAnimated(element, options.animateClassName),\n );\n\n collection.forEach((element) => intersectionObserver.observe(element));\n\n return collection;\n};\n\n/**\n * Disables instance by removing animations and clearing observer.\n */\nconst disable = () => {\n disableAnimations();\n clearObserver();\n};\n\n/**\n * Enables instance by launching new IntersectionObserver.\n */\nconst enable = () => {\n enableAnimations();\n\n intersectionObserver = new IntersectionObserver(onIntersection, {\n root: options.root,\n rootMargin: options.rootMargin,\n threshold: options.threshold,\n });\n\n elements = getObservedElements();\n};\n\n/**\n * Resets instance to provide new settings.\n * @param {Object} settings\n */\nconst reset = (settings = {}) => {\n clearObserver();\n\n Array.from(document.querySelectorAll(options.selector))\n .forEach(clearAnimation);\n\n setOptions(settings);\n enable();\n};\n\n/**\n * Updates observer with new elements to animated.\n * Useful for dynamically injected elements.\n */\nconst update = () => {\n const newElements = getObservedElements();\n elements.push(newElements);\n};\n\n/**\n * Init\n * @param {Object} settings\n * @return {Object} public API\n */\nconst init = (settings = options) => {\n setOptions(settings);\n\n // Early return, when window object is not defined\n // e.g. during Server Side Rendering\n if (typeof window === 'undefined') {\n // eslint-disable-next-line no-console\n console.warn(SSR_MESSAGE);\n\n return {\n elements,\n disable,\n enable,\n reset,\n update,\n };\n }\n\n if (!window.IntersectionObserver) {\n disableAnimations();\n\n throw Error(NOT_SUPPORTED_MESSAGE);\n }\n\n if (!isDisabled()) {\n enable();\n } else {\n disableAnimations();\n }\n\n return {\n elements,\n disable,\n enable,\n reset,\n update,\n };\n};\n\nexport default init;\n"],"sourceRoot":""} \ No newline at end of file diff --git a/public/assets/styles/print.css b/public/assets/styles/print.css index 5409e8d..13b5cdb 100644 --- a/public/assets/styles/print.css +++ b/public/assets/styles/print.css @@ -5,12 +5,6 @@ body { padding-inline-start: 0.5cm; } -/* Show all content immediatly */ -[data-sal|='slide-up'] { - opacity: 1 !important; - transform: none !important; -} - /* Hide content from printing */ lite-youtube { display: none !important; diff --git a/src/components/GalleryDetail.astro b/src/components/GalleryDetail.astro index c3015a5..5085cea 100644 --- a/src/components/GalleryDetail.astro +++ b/src/components/GalleryDetail.astro @@ -1,7 +1,5 @@ --- // Cspell:words astro -import { animation, animationDelay } from '../data/site'; - import Image from './Image.astro'; import Headline from './Headline.astro'; @@ -22,7 +20,6 @@ const imageLength = entry.data.images.length;
{entry.data.title} @@ -52,7 +49,6 @@ const imageLength = entry.data.images.length; 'lg:col-start-2': imageLength === 1 || index === 0, }, ]} - {...animation} > {entry.data.title}
diff --git a/src/components/JournalList.astro b/src/components/JournalList.astro index 12aa21d..395fcdd 100644 --- a/src/components/JournalList.astro +++ b/src/components/JournalList.astro @@ -7,8 +7,6 @@ interface Props { entries: CollectionEntry<'journal'>[]; } -import { animation } from '../data/site'; - import { pickTwoRandomColors } from '../utils'; import Link from '../components/Link.astro'; import Subsubheadline from './Subsubheadline.astro'; @@ -21,7 +19,7 @@ const { entries } = Astro.props; > { entries.map(({ slug, data }) => ( -
  • +
  • +
    { format === '50-start' && (
    @@ -34,10 +32,7 @@ const { } { format === '50-end' && ( -
    +
    @@ -49,10 +44,7 @@ const { } { format === '70-start' && ( -
    +
    @@ -64,10 +56,7 @@ const { } { format === '70-end' && ( -
    +
    @@ -79,10 +68,7 @@ const { } { format === '100-start' && ( -
    +
    @@ -94,10 +80,7 @@ const { } { format === '100-end' && ( -
    +
    diff --git a/src/components/Scripts.astro b/src/components/Scripts.astro index 1ba7a3d..6705dda 100644 --- a/src/components/Scripts.astro +++ b/src/components/Scripts.astro @@ -1,9 +1,7 @@ --- // Cspell:words astro swup animationend keydown -import '../styles/sal.css'; --- - - - diff --git a/src/content/journal/2023/website-relaunch-astro-preact-tailwind.mdx b/src/content/journal/2023/website-relaunch-astro-preact-tailwind.mdx index e1e704f..ff1e5cd 100644 --- a/src/content/journal/2023/website-relaunch-astro-preact-tailwind.mdx +++ b/src/content/journal/2023/website-relaunch-astro-preact-tailwind.mdx @@ -47,4 +47,4 @@ I opted for [Preact](https://preactjs.com/) for components, even though many did It was my first time using [Tailwind CSS](https://tailwindcss.com/). Initially, I was skeptical because I didn’t like the idea of writing CSS in HTML. But after using it, I really like it. Writing CSS is much faster and I don’t have to think about naming classes. Additionally, I reduced the CSS size by 30%. -I used [Sal](https://mciastek.github.io/sal/) for scroll animations and [Swup](https://swup.js.org/) for page transitions. If you're interested in the plugins, tools, and libraries I used, take a look at the [Colophon](/colophon/) page or the [source code](https://github.com/kogakure/website-astro-stefanimhoff.de) on GitHub. +I used [Swup](https://swup.js.org/) for page transitions. If you're interested in the plugins, tools, and libraries I used, take a look at the [Colophon](/colophon/) page or the [source code](https://github.com/kogakure/website-astro-stefanimhoff.de) on GitHub. diff --git a/src/data/site.ts b/src/data/site.ts index fb1cfdd..6a3d651 100644 --- a/src/data/site.ts +++ b/src/data/site.ts @@ -1,8 +1,3 @@ -const animationType = 'slide-up'; -const delay = 300; -const duration = 800; -const easing = 'ease-out-sine'; - export const site = { title: 'Stefan Imhoff', description: 'Web UI Engineer from Hamburg, Germany', @@ -12,14 +7,3 @@ export const site = { faviconPath: '/assets/images/branding/favicons/', x: '@kogakure', }; - -export const animation = { - 'data-sal': animationType, - 'data-sal-duration': duration, - 'data-sal-easing': easing, -}; - -export const animationDelay = { - ...animation, - 'data-sal-delay': delay, -}; diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro index 62ffe81..744bc56 100644 --- a/src/layouts/PageLayout.astro +++ b/src/layouts/PageLayout.astro @@ -1,7 +1,6 @@ --- // Cspell:words astro frontmatter import { dateToFormat, dateToISO } from '../utils'; -import { animation, animationDelay } from '../data/site'; import Pullquote from '../components/Pullquote.astro'; import Image from '../components/Image.astro'; @@ -36,7 +35,7 @@ const gridVariant = frontmatter.grid || grid; { frontmatter.intro && ( -
    +
    ) @@ -44,7 +43,7 @@ const gridVariant = frontmatter.grid || grid; { frontmatter.updated && ( -
    +
    Last Updated:
    - -
    - ## Design - I designed the website myself in [Affinity Designer](https://affinity.serif.com/designer/), using the Japanese art form of _shibui_ (渋い) as a source of inspiration. To learn more about the process, please read the essays about the [inspiration](/new-website-2020-inspiration/) and [design](/new-website-2020-design/). @@ -26,10 +19,6 @@ The source code of this website is available on [GitHub](https://github.com/koga - I created the Bonsai image on my homepage and other cover photos with [Stable Diffusion](https://stability.ai/), [FLUX](https://blackforestlabs.ai/) [ControlNet](https://github.com/lllyasviel/ControlNet), and [Affinity Photo](https://affinity.serif.com/photo/). My portrait photo was generated in Stable Diffusion with a custom model trainied in [DreamBooth](https://dreambooth.github.io/). - The minimalistic icons are by [Remix Icon](https://remixicon.com/), which is [Jimmy Cheung](https://github.com/xiaochunjimmy) and [Wendy Gao](https://github.com/wendygaoyuan). -
    - -
    - ## Technology - The website is built with [Astro](https://astro.build/), the all-in-one web framework. @@ -37,7 +26,7 @@ The source code of this website is available on [GitHub](https://github.com/koga - The layouts, templates, and components are written in Astro and [Preact](https://preactjs.com/). - My content is written in [MDX](https://mdxjs.com/), which allows using components in the [Markdown](https://daringfireball.net/projects/markdown/). - I use [Tailwind CSS](https://tailwindcss.com/) for my styling and [tailwindcss-logical](https://stevecochrane.github.io/tailwindcss-logical/) to get logical properties. -- The scroll animations are created with [Sal](https://mciastek.github.io/sal/) and for page transitions I use [Swup](https://swup.js.org/). +- The page transitions are created with [Swup](https://swup.js.org/). - My site search is build with [Pagefind](https://pagefind.app/) using the [Astro-Pagefind](https://github.com/shishkin/astro-pagefind) integration. - I use YouTube Lite, provided by [Astro Embed](https://github.com/astro-community/astro-embed). - [Astro SEO](https://github.com/jonasmerlin/astro-seo) makes it easy to add the SEO relevant information. @@ -47,5 +36,3 @@ The source code of this website is available on [GitHub](https://github.com/koga - To parse and format dates I use [Moment.js](https://momentjs.com/). - I use [Plop](https://plopjs.com/) to generate content from templates. - The website is self-hosted with [Coolify](https://coolify.io/). - -
    diff --git a/src/pages/cv.astro b/src/pages/cv.astro index 9ebc249..e26b0c7 100644 --- a/src/pages/cv.astro +++ b/src/pages/cv.astro @@ -1,7 +1,5 @@ --- // Cspell:words astro subheadline imhoff stefanimhoff noindex -import { animation, animationDelay } from '../data/site'; - import Divider from '../components/Divider.astro'; import DownloadLink from '../components/DownloadLink.astro'; import EmailLink from '../components/EmailLink.astro'; @@ -38,12 +36,12 @@ const description = > Curriculum Vitae -
    +
    {cv.summary.headline}
    -
    +
    Personal Information {cv.personal.name} {cv.personal.tagline} diff --git a/src/pages/haiku.astro b/src/pages/haiku.astro index 2929b11..50c0e19 100644 --- a/src/pages/haiku.astro +++ b/src/pages/haiku.astro @@ -5,7 +5,6 @@ type Haiku = CollectionEntry<'haiku'>; import { getCollection } from 'astro:content'; import { sortByDate } from '../utils'; -import { animation, animationDelay } from '../data/site'; import GridLayout from '../layouts/GridLayout.astro'; import Link from '../components/Link.astro'; @@ -27,7 +26,6 @@ const description =
    @@ -39,7 +37,6 @@ const description = >
      { allHaiku.map(({ slug }) => ( diff --git a/src/pages/haiku/[...slug].astro b/src/pages/haiku/[...slug].astro index 1025f91..ee390cd 100644 --- a/src/pages/haiku/[...slug].astro +++ b/src/pages/haiku/[...slug].astro @@ -4,7 +4,6 @@ type Haiku = CollectionEntry<'haiku'>; import { getCollection } from 'astro:content'; import { sortByDate } from '../../utils'; -import { animation, animationDelay } from '../../data/site'; import BaseLayout from '../../layouts/BaseLayout.astro'; import PageHeader from '../../components/PageHeader.astro'; @@ -44,7 +43,7 @@ const description = `Haiku ${entry.slug} in German and English.`; class="min-[700px]:grid-cols-[repeat(auto-fit,_minmax(25rem,_1fr)] col-span-full row-start-1 row-end-3 grid w-full grid-cols-[repeat(auto-fit,_minmax(15rem,_1fr))] print:block" >
      -
      +
      @@ -55,7 +54,7 @@ const description = `Haiku ${entry.slug} in German and English.`;
      -
      +
      diff --git a/src/pages/index.astro b/src/pages/index.astro index 0eb5d14..493922d 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -6,7 +6,7 @@ import { getCollection } from 'astro:content'; import { formatPosts, isProduction, sortMarkdownByDate } from '../utils'; -import { site, animation, animationDelay } from '../data/site'; +import { site } from '../data/site'; import GridLayout from '../layouts/GridLayout.astro'; @@ -55,7 +55,6 @@ rssPosts.sort(sortMarkdownByDate);
      About Me @@ -64,7 +63,6 @@ rssPosts.sort(sortMarkdownByDate);
      What I Do
      @@ -75,7 +73,6 @@ rssPosts.sort(sortMarkdownByDate);
      Journal @@ -85,7 +82,6 @@ rssPosts.sort(sortMarkdownByDate);
      diff --git a/src/pages/journal.astro b/src/pages/journal.astro index 0b1ff18..722d08b 100644 --- a/src/pages/journal.astro +++ b/src/pages/journal.astro @@ -6,8 +6,6 @@ import { getCollection } from 'astro:content'; import { formatPosts } from '../utils'; -import { animation, animationDelay } from '../data/site'; - import GridLayout from '../layouts/GridLayout.astro'; import PageTitle from '../components/PageTitle.astro'; import JournalList from '../components/JournalList.astro'; @@ -33,11 +31,10 @@ const description = 'I am writing essays about various topics in this Journal.';
      -