Merge pull request #14 from nemanjam/refactor/folder-slug

Change folder structure for content, colocate index.mdx and images

Author: nemanjam

docs/working-notes/data/generate-id-arg.ts

@@ -0,0 +1,29 @@
+const args = {args: {
+  entry: '2024/example-article-4/index.mdx',
+  base:  {
+    href: 'file:///home/username/Desktop/nemanjam.github.io/src/content/post/',
+    origin: 'null',
+    protocol: 'file:',
+    username: '',
+    password: '',
+    host: '',
+    hostname: '',
+    port: '',
+    pathname: '/home/username/Desktop/nemanjam.github.io/src/content/post/',
+    search: '',
+    // searchParams: URLSearchParams {},
+    hash: ''
+  },
+  data: {
+    title: 'Example article 4 commodo ea ipsum tempor nisi aliqua',
+    description: 'Dolor velit excepteur cupidatat: Aute in fugiat id reprehenderit ipsum qui tempor fugiat. Excepteur tempor culpa velit duis quis enim aliquip.\n',
+    publishDate: 2024-01-20T00:00:00.000Z,
+    updatedDate: 2024-05-23T00:00:00.000Z,
+    heroImage: '../../../../content/post/2024/example-article-4/_images/river1.jpg',
+    heroAlt: 'sunt aute reprehenderit exercitation cillum culpa dolor dolor commodo ea ipsum tempor nisi aliqua.',
+    noHero: false,
+    tags: [ 'devops', 'css', 'react', 'astro' ],
+    category: 'tools',
+    toc: true
+  }
+}

docs/working-notes/todo4.md

@@ -35,4 +35,11 @@ git checkout -b feature/content-layer
 id, slug, decoupled with my custom type Post[], Project[], from CollectionEntry<T>
 folder name with slug and colocated images
 remote collection for links page?
+-----------
+folders with index 
+https://github.dev/LeaVerou/lea.verou.me
+
+git checkout -b refactor/folder-slug
+
+
 ```

src/content/config.ts

@@ -7,13 +7,20 @@ import { BASE_FOLDERS } from '@/constants/collections';
 
 const { POST, PROJECT } = BASE_FOLDERS;
 
+/**
+ * Format id slug. Remove '/' to avoid catch all [...page].astro route.
+ *
+ * @example filepath: 2024/03-15-example-project-2/index.mdx -> slug: 2024-03-15-example-project-2
+ */
+const generateId = ({ entry }: { entry: string }) => entry.split('/').slice(0, 2).join('-');
+
 export const postCollection = defineCollection({
-  loader: glob({ pattern: '**/*.mdx', base: POST }),
+  loader: glob({ pattern: '**/*.mdx', base: POST, generateId }),
   schema: postSchema,
 });
 
 export const projectCollection = defineCollection({
-  loader: glob({ pattern: '**/*.mdx', base: PROJECT }),
+  loader: glob({ pattern: '**/*.mdx', base: PROJECT, generateId }),
   schema: projectSchema,
 });
 

src/content/post/_images/2022-02-16-example-article-1/focus1.jpg renamed to src/content/post/2022/02-16-example-article-1/_images/focus1.jpg

@@ -3,7 +3,7 @@ title: Example article 1
 description: |
   Et dolor tempor velit: Aute ad tempor incididunt labore dolore incididunt in quis officia quis est. Ullamco aute et ex velit proident non.
 publishDate: 2022-02-16
-heroImage: '../../content/post/_images/2022-02-16-example-article-1/focus1.jpg'
+heroImage: '../../../../content/post/2022/02-16-example-article-1/_images/focus1.jpg'
 heroAlt: sunt aute reprehenderit exercitation cillum culpa dolor dolor commodo ea ipsum tempor nisi aliqua.
 tags:
   - astro
@@ -17,11 +17,11 @@ toc: true
 import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
 
-import Alert from '../../components/Alert.astro';
-import Button from '../../components/Button.astro';
-import { IMAGE_SIZES } from '../../constants/image';
+import Alert from '../../../../components/Alert.astro';
+import Button from '../../../../components/Button.astro';
+import { IMAGE_SIZES } from '../../../../constants/image';
 
-import BicycleImage from '../../content/post/_images/2022-02-16-example-article-1/focus1.jpg';
+import BicycleImage from '../../../../content/post/2022/02-16-example-article-1/_images/focus1.jpg';
 
 
 Ut exercitation occaecat in velit [nulla aliqua](#) eiusmod laboris ex. Officia dolore ipsum aliqua irure qui non ea elit veniam aute ex incididunt. Elit incididunt dolor velit velit magna. Nulla occaecat ut dolore ullamco amet aliqua laborum velit cillum.

src/content/post/2022-02-16-example-article-1.mdx renamed to src/content/post/2022/02-16-example-article-1/index.mdx

@@ -3,7 +3,7 @@ title: Example article 2 dolor commodo ea ipsum tempor nisi aliqua
 description: |
   Dolor velit excepteur cupidatat: Aute in fugiat id reprehenderit ipsum qui tempor fugiat. Excepteur tempor culpa velit duis quis enim aliquip.
 publishDate: 2022-03-17
-heroImage: '../../content/post/_images/2022-03-17-example-article-2/riverside1.jpg'
+heroImage: '../../../../content/post/2022/03-17-example-article-2/_images/riverside1.jpg'
 heroAlt: sunt aute reprehenderit exercitation cillum culpa dolor dolor commodo ea ipsum tempor nisi aliqua.
 tags:
   - css
@@ -17,11 +17,11 @@ toc: true
 import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
 
-import Alert from '../../components/Alert.astro';
-import Button from '../../components/Button.astro';
-import { IMAGE_SIZES } from '../../constants/image';
+import Alert from '../../../../components/Alert.astro';
+import Button from '../../../../components/Button.astro';
+import { IMAGE_SIZES } from '../../../../constants/image';
 
-import BicycleImage from '../../content/post/_images/2022-03-17-example-article-2/riverside1.jpg';
+import BicycleImage from '../../../../content/post/2022/03-17-example-article-2/_images/riverside1.jpg';
 
 
 Ut exercitation occaecat in velit [nulla aliqua](#) eiusmod laboris ex. Officia dolore ipsum aliqua irure qui non ea elit veniam aute ex incididunt. Elit incididunt dolor velit velit magna. Nulla occaecat ut dolore ullamco amet aliqua laborum velit cillum.

src/content/post/_images/2022-03-17-example-article-2/riverside1.jpg renamed to src/content/post/2022/03-17-example-article-2/_images/riverside1.jpg

@@ -3,7 +3,7 @@ title: Example article 3 reprehenderit ipsum qui tempor
 description: |
   Dolor velit excepteur cupidatat: Aute in fugiat id reprehenderit ipsum qui tempor fugiat. Excepteur tempor culpa velit duis quis enim aliquip.
 publishDate: 2023-01-19
-heroImage: '../../content/post/_images/2023-01-19-example-article-3/lure1.jpg'
+heroImage: '../../../../content/post/2023/01-19-example-article-3/_images/lure1.jpg'
 heroAlt: sunt aute reprehenderit exercitation cillum culpa dolor dolor commodo ea ipsum tempor nisi aliqua.
 tags:
   - devops
@@ -18,11 +18,11 @@ toc: true
 import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
 
-import Alert from '../../components/Alert.astro';
-import Button from '../../components/Button.astro';
-import { IMAGE_SIZES } from '../../constants/image';
+import Alert from '../../../../components/Alert.astro';
+import Button from '../../../../components/Button.astro';
+import { IMAGE_SIZES } from '../../../../constants/image';
 
-import LureImage from '../../content/post/_images/2023-01-19-example-article-3/lure1.jpg';
+import LureImage from '../../../../content/post/2023/01-19-example-article-3/_images/lure1.jpg';
 
 
 Ut exercitation occaecat in velit [nulla aliqua](#) eiusmod laboris ex. Officia dolore ipsum aliqua irure qui non ea elit veniam aute ex incididunt. Elit incididunt dolor velit velit magna. Nulla occaecat ut dolore ullamco amet aliqua laborum velit cillum.