Mirror of
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: clean index page

+180 -7
-3
starlight/astro.config.mjs
··· 143 143 pagination: false, 144 144 }), 145 145 ], 146 - redirects: { 147 - "/": "/blog", 148 - }, 149 146 markdown: { 150 147 rehypePlugins: [rehypeGitHubBadgeLinks], 151 148 },
+3 -3
starlight/package.json
··· 5 5 "scripts": { 6 6 "astro": "astro", 7 7 "build": "astro build", 8 - "dev": "astro dev --port 4322", 9 - "preview": "astro preview --port 4322", 10 - "start": "astro dev --port 4322", 8 + "dev": "astro dev", 9 + "preview": "astro preview", 10 + "start": "astro dev", 11 11 "lunaria:build": "lunaria build", 12 12 "lunaria:preview": "lunaria preview" 13 13 },
+1 -1
starlight/src/components/ContentNotice.astro
··· 11 11 const { icon, label, link } = Astro.props; 12 12 --- 13 13 14 - <p class="sl-flex"> 14 + <p class="ai-notice sl-flex"> 15 15 <Icon name={icon} size="1.5em" color="var(--sl-color-blue-high)" /> 16 16 {!link ? <span>{label}</span> : null} 17 17 {link ? <a href={link}>{label}</a> : null}
+143
starlight/src/components/IndexPostList.astro
··· 1 + --- 2 + import type { StarlightBlogData } from "starlight-blog/data"; 3 + const starlightBlogData = Astro.locals.starlightBlog; 4 + 5 + const postsByYear = starlightBlogData.posts.reduce< 6 + Record<string, StarlightBlogData["posts"]> 7 + >((acc, post) => { 8 + const year = post.createdAt.getFullYear().toString(); 9 + if (!acc[year]) acc[year] = []; 10 + acc[year].push(post); 11 + return acc; 12 + }, {}); 13 + 14 + // Sort years descending 15 + const sortedYears = Object.keys(postsByYear).sort( 16 + (a, b) => Number(b) - Number(a) 17 + ); 18 + --- 19 + 20 + <div class="not-content"> 21 + { 22 + sortedYears.map((year) => ( 23 + <div class="year-section"> 24 + <div class="year-label">{year}</div> 25 + <div class="posts"> 26 + {postsByYear[year] 27 + .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()) 28 + .map((post) => ( 29 + <div class="post"> 30 + <a href={post.href}> 31 + <span class="post-title">{post.title}</span> 32 + <span class="post-separator">•</span> 33 + <span class="post-meta"> 34 + <span> 35 + {post.authors 36 + .map((a) => a.name) 37 + .filter((a) => a != "Artificial Intelligence") 38 + .join(", ")} 39 + </span> 40 + <span class="little-post-separator">•</span> 41 + <span>{post.metrics.readingTime.minutes}min</span> 42 + </span> 43 + </a> 44 + </div> 45 + ))} 46 + </div> 47 + </div> 48 + )) 49 + } 50 + </div> 51 + 52 + <style> 53 + .year-section { 54 + position: relative; 55 + margin-bottom: 4rem; 56 + } 57 + 58 + .year-label { 59 + font-size: 16rem; 60 + top: -14rem; 61 + left: 0; 62 + color: var(--sl-color-gray-7); 63 + font-weight: bold; 64 + position: absolute; 65 + pointer-events: none; 66 + z-index: 0; 67 + } 68 + 69 + .posts { 70 + position: relative; 71 + z-index: 1; 72 + margin-top: 12rem; 73 + margin-inline: 4rem; 74 + } 75 + 76 + .post, 77 + .post > a { 78 + padding-block: 0.5rem; 79 + } 80 + 81 + a { 82 + text-decoration: none; 83 + color: inherit; 84 + } 85 + 86 + .post-separator { 87 + display: inline; 88 + color: var(--sl-color-white); 89 + margin-inline: 1rem; 90 + } 91 + 92 + .little-post-separator { 93 + margin-inline: 0.5rem; 94 + } 95 + 96 + .post-title { 97 + display: inline; 98 + font-weight: 500; 99 + font-size: 1rem; 100 + transition: color 0.1s ease-in-out; 101 + } 102 + 103 + .post > a:hover > .post-title { 104 + color: var(--sl-color-accent); 105 + } 106 + 107 + .post-meta { 108 + color: var(--sl-color-gray-3); 109 + font-size: 0.875rem; 110 + transition: color 0.1s ease-in-out; 111 + } 112 + 113 + .post > a:hover > .post-meta { 114 + color: var(--sl-color-gray-2); 115 + } 116 + 117 + @media (max-width: 72rem) { 118 + :is(.year-section, .posts, .post, .post-title, .post-meta) { 119 + text-align: center; 120 + } 121 + 122 + .year-label { 123 + font-size: 8rem; 124 + top: -1rem; 125 + left: 50%; 126 + transform: translateX(-50%); 127 + } 128 + 129 + .post-title { 130 + display: block; 131 + } 132 + 133 + .post-separator { 134 + display: none; 135 + } 136 + } 137 + </style> 138 + 139 + <style is:global> 140 + .sl-container:has(h1) { 141 + display: none; 142 + } 143 + </style>
+11
starlight/src/content/docs/de/index.mdx
··· 1 + --- 2 + title: Deep Thoughts - Übersicht 3 + template: splash 4 + lastUpdated: false 5 + editUrl: false 6 + pagefind: false 7 + --- 8 + 9 + import IndexPostList from "../../../components/IndexPostList.astro" 10 + 11 + <IndexPostList />
+11
starlight/src/content/docs/fr/index.mdx
··· 1 + --- 2 + title: Deep Thoughts - Aperçu 3 + template: splash 4 + lastUpdated: false 5 + editUrl: false 6 + pagefind: false 7 + --- 8 + 9 + import IndexPostList from "../../../components/IndexPostList.astro" 10 + 11 + <IndexPostList />
+11
starlight/src/content/docs/index.mdx
··· 1 + --- 2 + title: Deep Thoughts - Overview 3 + template: splash 4 + lastUpdated: false 5 + editUrl: false 6 + pagefind: false 7 + --- 8 + 9 + import IndexPostList from "../../components/IndexPostList.astro" 10 + 11 + <IndexPostList />