Compare commits

...

9 Commits
master ... main

Author SHA1 Message Date
Avraham Sakal a8d5ca5196 fix README 10 months ago
Avraham Sakal 7af4c821c9 oops 10 months ago
Avraham Sakal 597b49d5a6 update README 10 months ago
Avraham Sakal 5e13636094 re-implement fulldev Section and Card 10 months ago
Avraham Sakal 9eb7dda047 remove unnecessary import 10 months ago
Avraham Sakal b2d21088cb adjust Layout spacings 10 months ago
Avraham Sakal 15601e7bd4 replace homepage Hero 10 months ago
Avraham Sakal 102d4716e0 add `pages_build_output_dir` to `wrangler.toml` 11 months ago
Avraham Sakal a116090136 begin 11 months ago

@ -1,54 +1,7 @@
# Astro Starter Kit: Basics # The Clog
```sh Add blog content to `src/content`.
npm create astro@latest -- --template basics
```
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) Preview locally with `pnpm dev`.
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! To deploy, run `pnpm run build` then `wrangler pages deploy`.
![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```text
/
├── public/
│ └── favicon.svg
├── src/
│ ├── components/
│ │ └── Card.astro
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ └── index.astro
└── package.json
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

@ -1,6 +1,6 @@
// @ts-check // @ts-check
import { defineConfig } from "astro/config"; import { defineConfig } from "astro/config";
import fulldev from "fulldev-ui/integration"; // import fulldev from "fulldev-ui/integration";
import UnoCSS from "unocss/astro"; import UnoCSS from "unocss/astro";
import mdx from "@astrojs/mdx"; import mdx from "@astrojs/mdx";
import cloudflare from "@astrojs/cloudflare"; import cloudflare from "@astrojs/cloudflare";
@ -18,35 +18,24 @@ export default defineConfig({
integrations: [ integrations: [
mdx(), mdx(),
UnoCSS({ UnoCSS({
// injectReset: true, // or a path to the reset file injectReset: "@unocss/reset/normalize.css",
// preflights: [
// {
// getCSS: ({ theme }) => `
// * {
// color: ${theme.colors.gray?.[200] ?? "#ccc"};
// padding: 0;
// margin: 0;
// }
// `,
// },
// ],
}),
fulldev({
// css: '/src/css/custom.css',
colors: {
theme: "dark",
dark: {
background: "#111110",
base: "#3E63DD",
brand: "#359",
},
light: {
background: "#EEEEEC",
base: "#6F6D66",
brand: "#3E63DD",
},
},
}), }),
// fulldev({
// // css: '/src/css/custom.css',
// colors: {
// theme: "dark",
// dark: {
// background: "#111110",
// base: "#3E63DD",
// brand: "#359",
// },
// light: {
// background: "#EEEEEC",
// base: "#6F6D66",
// brand: "#3E63DD",
// },
// },
// }),
], ],
vite: { vite: {

@ -14,12 +14,15 @@
"@astrojs/check": "^0.9.4", "@astrojs/check": "^0.9.4",
"@astrojs/cloudflare": "^12.0.1", "@astrojs/cloudflare": "^12.0.1",
"@astrojs/mdx": "^4.0.1", "@astrojs/mdx": "^4.0.1",
"@radix-ui/colors": "^3.0.0",
"astro": "^5.0.3", "astro": "^5.0.3",
"fulldev-ui": "^0.4.33", "fulldev-ui": "^0.4.33",
"typescript": "^5.7.2" "typescript": "^5.7.2"
}, },
"devDependencies": { "devDependencies": {
"@iconify-json/mdi": "^1.2.1",
"@unocss/preset-uno": "^0.64.1", "@unocss/preset-uno": "^0.64.1",
"@unocss/reset": "^0.65.1",
"unocss": "^0.64.1", "unocss": "^0.64.1",
"wrangler": "^3.93.0" "wrangler": "^3.93.0"
} }

@ -17,6 +17,9 @@ importers:
'@astrojs/mdx': '@astrojs/mdx':
specifier: ^4.0.1 specifier: ^4.0.1
version: 4.0.1(astro@5.0.3(@types/node@22.10.1)(jiti@1.21.6)(rollup@4.28.1)(sass@1.82.0)(tsx@4.19.2)(typescript@5.7.2)(yaml@2.6.1)) version: 4.0.1(astro@5.0.3(@types/node@22.10.1)(jiti@1.21.6)(rollup@4.28.1)(sass@1.82.0)(tsx@4.19.2)(typescript@5.7.2)(yaml@2.6.1))
'@radix-ui/colors':
specifier: ^3.0.0
version: 3.0.0
astro: astro:
specifier: ^5.0.3 specifier: ^5.0.3
version: 5.0.3(@types/node@22.10.1)(jiti@1.21.6)(rollup@4.28.1)(sass@1.82.0)(tsx@4.19.2)(typescript@5.7.2)(yaml@2.6.1) version: 5.0.3(@types/node@22.10.1)(jiti@1.21.6)(rollup@4.28.1)(sass@1.82.0)(tsx@4.19.2)(typescript@5.7.2)(yaml@2.6.1)
@ -27,9 +30,15 @@ importers:
specifier: ^5.7.2 specifier: ^5.7.2
version: 5.7.2 version: 5.7.2
devDependencies: devDependencies:
'@iconify-json/mdi':
specifier: ^1.2.1
version: 1.2.1
'@unocss/preset-uno': '@unocss/preset-uno':
specifier: ^0.64.1 specifier: ^0.64.1
version: 0.64.1 version: 0.64.1
'@unocss/reset':
specifier: ^0.65.1
version: 0.65.1
unocss: unocss:
specifier: ^0.64.1 specifier: ^0.64.1
version: 0.64.1(postcss@8.4.49)(rollup@4.28.1)(vite@5.4.11(@types/node@22.10.1)(sass@1.82.0))(vue@3.5.13(typescript@5.7.2)) version: 0.64.1(postcss@8.4.49)(rollup@4.28.1)(vite@5.4.11(@types/node@22.10.1)(sass@1.82.0))(vue@3.5.13(typescript@5.7.2))
@ -863,6 +872,9 @@ packages:
resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==} resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
engines: {node: '>=14'} engines: {node: '>=14'}
'@iconify-json/mdi@1.2.1':
resolution: {integrity: sha512-dSkQU78gsZV6Yxnq78+LuX7jzeFC/5NAmz7O3rh558GimGFcwMVY/OtqRowIzjqJBmMmWZft7wkFV4TrwRXjlg==}
'@iconify-json/tabler@1.2.10': '@iconify-json/tabler@1.2.10':
resolution: {integrity: sha512-P58U/e0rZNYptzMjnExcFOtSt712xJnqwJI7KoF4iaUJ7EeFQNJawjUXT8X1rvbLMUk/O/fgrzAfhD163XuckA==} resolution: {integrity: sha512-P58U/e0rZNYptzMjnExcFOtSt712xJnqwJI7KoF4iaUJ7EeFQNJawjUXT8X1rvbLMUk/O/fgrzAfhD163XuckA==}
@ -1445,6 +1457,9 @@ packages:
'@unocss/reset@0.64.1': '@unocss/reset@0.64.1':
resolution: {integrity: sha512-xx36rWcrIpyvI1l/v+szQLrxWAgsmk6GH85QQ5iE1qccQbL9IlhWHB1KEd3cRbJ1TFeZ2Mzca/qsjg0LU9ZVnA==} resolution: {integrity: sha512-xx36rWcrIpyvI1l/v+szQLrxWAgsmk6GH85QQ5iE1qccQbL9IlhWHB1KEd3cRbJ1TFeZ2Mzca/qsjg0LU9ZVnA==}
'@unocss/reset@0.65.1':
resolution: {integrity: sha512-qyxF7rKGX+Cu3FpV8KCRQbtCvFcBpmzvx5A2wal77tIhrFR5VSH7NzCVmgs2+V9FXvU3aWVNZ79i1KMnLZ5Mjg==}
'@unocss/rule-utils@0.62.4': '@unocss/rule-utils@0.62.4':
resolution: {integrity: sha512-XUwLbLUzL+VSHCJNK5QBHC9RbFehumge1/XJmsRfmh0+oxgJoO1gvEvxi57gYEmdJdMRJHRJZ66se6+cB0Ymvw==} resolution: {integrity: sha512-XUwLbLUzL+VSHCJNK5QBHC9RbFehumge1/XJmsRfmh0+oxgJoO1gvEvxi57gYEmdJdMRJHRJZ66se6+cB0Ymvw==}
engines: {node: '>=14'} engines: {node: '>=14'}
@ -4335,6 +4350,10 @@ snapshots:
'@fastify/busboy@2.1.1': {} '@fastify/busboy@2.1.1': {}
'@iconify-json/mdi@1.2.1':
dependencies:
'@iconify/types': 2.0.0
'@iconify-json/tabler@1.2.10': '@iconify-json/tabler@1.2.10':
dependencies: dependencies:
'@iconify/types': 2.0.0 '@iconify/types': 2.0.0
@ -4981,6 +5000,8 @@ snapshots:
'@unocss/reset@0.64.1': {} '@unocss/reset@0.64.1': {}
'@unocss/reset@0.65.1': {}
'@unocss/rule-utils@0.62.4': '@unocss/rule-utils@0.62.4':
dependencies: dependencies:
'@unocss/core': 0.62.4 '@unocss/core': 0.62.4

@ -0,0 +1,13 @@
---
---
<div class:list={["flex", "flex-justify-between"]}>
<div class:list={["flex", "flex-content-start"]}>
<slot name="left" />
</div>
<div class:list={["flex", "flex-content-center"]}>
<slot name="center" />
</div>
<div class:list={["flex", "flex-content-end"]}>
<slot name="right" />
</div>
</div>

@ -1,5 +1,9 @@
--- ---
import Header from 'fulldev-ui/components/Header.astro' import LeftRightSplit from '../structure/LeftRightSplit.astro';
import Heading from '../typography/Heading.astro';
import Row from '../structure/Row.astro';
import NavLink from '../widgets/NavLink.astro';
interface Props { interface Props {
title: string; title: string;
} }
@ -14,36 +18,19 @@ const { title } = Astro.props;
<meta name="description" content="A practical coding blog in the form of journal entries and articles." /> <meta name="description" content="A practical coding blog in the form of journal entries and articles." />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="preload" href="/hero.png" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{title}</title> <title>{title}</title>
</head> </head>
<body> <body class="text-brand-1 p-0 m-0">
<Header <LeftRightSplit class="px-8 bg-brand-12 border-b-groove border-width-1 border-brand-10 mb-4">
heading="The Clog" <Heading slot="left"><a href="/" class="text-brand-3 decoration-none">The Clog</a></Heading>
links={[ <Row slot="right" >
{ <NavLink href="/journal">Journal</NavLink>
text: 'Journal', <NavLink href="/articles">Articles</NavLink>
href: '/journal', <NavLink class="i-mdi-git" href="https://git.sakal.us/avraham/">Gitea</NavLink>
}, </Row>
{ </LeftRightSplit>
text: 'Articles',
href: '/articles',
},
]}
buttons={[
{
title: 'Gitea',
icon: 'brand-git',
href: 'https://git.sakal.us/avraham/',
target: '_blank',
contrast: true,
},
]}
frame="fill"
position="relative"
color="brand"
class:list={["mb-6"]}
/>
<slot /> <slot />
</body> </body>
</html> </html>

@ -1,11 +1,26 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import Hero from 'fulldev-ui/blocks/Hero.astro'; import LeftRightSplit from '../structure/LeftRightSplit.astro';
import NavLink from '../widgets/NavLink.astro';
--- ---
<Layout title="The Clog"> <Layout title="The Clog">
<main> <main>
<Hero <LeftRightSplit class="px-4 align-center">
<div slot="left" class="text-center w-full my-auto">
<p>The Coding Blog</p>
<h1 class="text-4xl font-bold text-brand-3">Welcome to The Clog</h1>
<p>A practical coding blog in the form of journal entries and articles.</p>
<div>
<NavLink href="/journal">Journal</NavLink>
<NavLink href="/articles">Articles</NavLink>
</div>
</div>
<div slot="right" class="h-auto max-h-dvh max-w-full w-full my-auto">
<img src="/hero.png" class="object-contain" />
</div>
</LeftRightSplit>
<!-- <Hero
badge="The Coding Blog" badge="The Coding Blog"
heading="Welcome to The Clog" heading="Welcome to The Clog"
text="A practical coding blog in the form of journal entries and articles." text="A practical coding blog in the form of journal entries and articles."
@ -16,6 +31,6 @@ import Hero from 'fulldev-ui/blocks/Hero.astro';
structure="split" structure="split"
image="/hero.png" image="/hero.png"
class:list={["p-space-6"]} class:list={["p-space-6"]}
/> /> -->
</main> </main>
</Layout> </Layout>

@ -1,4 +0,0 @@
---
import Text from 'fulldev-ui/components/Text.astro';
---
<Text contrast={true}><slot /></Text>

@ -1,9 +1,10 @@
--- ---
import { getCollection } from 'astro:content'; import { getCollection } from 'astro:content';
import Layout from '../../layouts/Layout.astro'; import Layout from '../../layouts/Layout.astro';
import Heading from 'fulldev-ui/components/Heading.astro'; import Heading from '../../typography/Heading.astro';
import Link from 'fulldev-ui/components/Link.astro'; import Link from 'fulldev-ui/components/Link.astro';
import RegularText from './RegularText.astro'; import DownTheCenter from '../../structure/DownTheCenter.astro';
import ReadableWidth from '../../sizing/ReadableWidth.astro';
export const prerender = true; export const prerender = true;
@ -22,10 +23,14 @@ const { Content } = await journalEntry.render();
--- ---
<Layout title={journalEntry.data.title}> <Layout title={journalEntry.data.title}>
<main> <main>
<Heading>{journalEntry.data.title}</Heading> <DownTheCenter>
<Content components={{ <ReadableWidth>
p: RegularText, <Heading>{journalEntry.data.title}</Heading>
a: Link, <Content components={{
}} /> // p: RegularText,
a: Link,
}} />
</ReadableWidth>
</DownTheCenter>
</main> </main>
</Layout> </Layout>

@ -1,8 +1,6 @@
--- ---
import { getCollection } from 'astro:content'; import { getCollection } from 'astro:content';
import Layout from '../../layouts/Layout.astro'; import Layout from '../../layouts/Layout.astro';
import Section from 'fulldev-ui/components/Section.astro';
import Text from 'fulldev-ui/components/Text.astro';
const journalEntries = await getCollection('journal-entries'); const journalEntries = await getCollection('journal-entries');
@ -11,7 +9,16 @@ export const prerender = true;
--- ---
<Layout title="Journal Entries"> <Layout title="Journal Entries">
<main> <main>
<Section <div class="flex gap-4 flex-wrap">
{journalEntries.map((journalEntry)=>(
<div class="w-64 border-solid border-brand-3 border-width-1 rounded-2 px-2 py-1 bg-brand-12 opacity-80">
<p>{journalEntry.data.date.toISOString().substring(0,10)} <span class="border-solid border-brand-3 border-width-1 rounded-100 px-2 py-1">{journalEntry.data.category}</span></p>
<h3><a class="text-brand-3 decoration-none" href={`/journal/${journalEntry.slug}`}>{journalEntry.data.title}</a></h3>
<p>{journalEntry.data.description}</p>
</div>
))}
</div>
<!-- <Section
title="Journal Entries" title="Journal Entries"
cards={journalEntries.map((journalEntry)=>({ cards={journalEntries.map((journalEntry)=>({
frame:"panel", frame:"panel",
@ -30,6 +37,6 @@ export const prerender = true;
structure="grid" structure="grid"
size="md" size="md"
> >
</Section> </Section> -->
</main> </main>
</Layout> </Layout>

@ -0,0 +1,5 @@
---
---
<div class="max-w-3xl">
<slot />
</div>

@ -0,0 +1,5 @@
---
---
<div class="flex flex-col items-center justify-center">
<slot />
</div>

@ -0,0 +1,7 @@
---
---
<div class={`flex flex-row justify-between ${Astro.props.class||''}`}>
<slot name="left" />
<slot name="right" />
</div>

@ -0,0 +1,5 @@
---
---
<div class="flex flex-row gap-3 items-center justify-start">
<slot />
</div>

@ -0,0 +1,5 @@
---
---
<h1 class="text-4xl font-bold text-brand-1">
<slot />
</h1>

@ -0,0 +1,5 @@
---
---
<a class="text-brand underline-dotted" href={Astro.props.href}>
<slot />
</a>

@ -0,0 +1,5 @@
---
---
<a class="text-brand-3 px-4 py-2 decoration-none border-brand-3 border-solid border-rounded border-width-1 border-transparent hover:border-brand-3" href={Astro.props.href}>
<slot />
</a>

@ -1,12 +1,32 @@
import { defineConfig } from "unocss"; import { defineConfig, presetIcons } from "unocss";
import presetUno from "@unocss/preset-uno"; import presetUno from "@unocss/preset-uno";
import fulldevUI from "fulldev-ui/unocss"; import { indigo } from "@radix-ui/colors";
// import fulldevUI from "fulldev-ui/unocss";
export default defineConfig({ export default defineConfig({
injectReset: true, // injectReset: true,
theme: {
colors: {
brand: {
"1": indigo.indigo1,
"2": indigo.indigo2,
"3": indigo.indigo3,
"4": indigo.indigo4,
"5": indigo.indigo5,
"6": indigo.indigo6,
"7": indigo.indigo7,
"8": indigo.indigo8,
"9": indigo.indigo9,
"10": indigo.indigo10,
"11": indigo.indigo11,
"12": indigo.indigo12,
},
},
},
presets: [ presets: [
presetUno, presetUno,
//@ts-ignore //@ts-ignore
fulldevUI, // fulldevUI,
presetIcons(),
], ],
}); });

@ -2,5 +2,7 @@
name = "blog" name = "blog"
compatibility_date = "2024-12-06" compatibility_date = "2024-12-06"
pages_build_output_dir = "dist"
[env] [env]
production = { } production = { }

Loading…
Cancel
Save