Astro Basics

So I setup more of a structure. Now I have a skeleton-log page instead of the index, and I’ve separated the class Genesis from the entries themselves.

Basically, it should be easier to add entries. Though it’s not exactly perfect. For example, I have to manually add each entry to the list. Not to mention that the sorting leaves a bit to be desired.

Speaking of sorting though… Turns out I’ve hit one of Astro’s limitations. In order to implement it, I’m basically working with query parameters and, as a result, I had to turn Astro’s mode to SERVER. Why? I think it’s cause you can’t exactly generate static methods of working with query parameters. What would the thing even look like? You’d need some javascript to cook up that thing.

Anyways, this might become an issue - but I can use SVELTE components. The only problem is that I cannot use Astro components in Svelte - though it can go the other way around. In other words, it won’t exactly make much sense to have a registry that is setup in svelte, which also brings limitations when it comes to ordering and sorting.

Raw javascript is possible of course… But it’s raw. I mean, it’s worth sharpening my skills, but it’d also be a pain to implement much of anything.

1
  <Code title="genesis.astro" code={`<h2>Genesis</h2>
2

3
<h3>META</h3>
4

5
<div class="sort-array">
6
    <span>Sort by:</span>
7
    <a href="?order=ASC">ASC</a>
8
    <a href="?order=DESC">DESC</a>
9
</div>
10

11
{ items.map(Component => <Component/>) }
12

13
<Base>
14
  <!-- <Welcome /> -->
15
</Base>`} lang="astro"/>
16

17
  <Code title="astro.config.mjs" code={`export default defineConfig({
18
  integrations: [svelte(), expressiveCode({
19
    themes: ['aurora-x'],
20
    styleOverrides: {
21
        // You can also override styles
22
        borderRadius: '0.5rem',
23
        frames: {
24
          shadowColor: '#324',
25
        },
26
        codeFontFamily: "Geist Mono",
27
      },
28
  })],
29

30
  adapter: node({
31
    mode: 'standalone'
32
  }),
33

34
  output: "server"
35
});`} lang="mjs" ins={{ range: "14-18" }}/>

Not to mention the line numbers. Had to install a separate dependency for that called @expressive-code/plugin-line-numbers.

1
<Code code="npm i @expressive-code/plugin-line-numbers" frame="terminal" lang="bash"/>

…and of course the config for expressive code, which is in a separate file…

1
  <Code title="ec.config.mjs" code={`import { defineEcConfig } from 'astro-expressive-code'
2
import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers'
3

4
export default defineEcConfig({
5
  plugins: [pluginLineNumbers()],
6
})`} lang="mjs"/>

Update III

Log Index