Compare commits

...

9 Commits
master ... main

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