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
npm create astro@latest -- --template basics
```
Add blog content to `src/content`.
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
[![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)
Preview locally with `pnpm dev`.
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
![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).
To deploy, run `pnpm run build` then `wrangler pages deploy`.

@ -1,6 +1,6 @@
// @ts-check
import { defineConfig } from "astro/config";
import fulldev from "fulldev-ui/integration";
// import fulldev from "fulldev-ui/integration";
import UnoCSS from "unocss/astro";
import mdx from "@astrojs/mdx";
import cloudflare from "@astrojs/cloudflare";
@ -18,35 +18,24 @@ export default defineConfig({
integrations: [
mdx(),
UnoCSS({
// injectReset: true, // or a path to the reset file
// 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",
},
},
injectReset: "@unocss/reset/normalize.css",
}),
// fulldev({
// // css: '/src/css/custom.css',
// colors: {
// theme: "dark",
// dark: {
// background: "#111110",
// base: "#3E63DD",
// brand: "#359",
// },
// light: {
// background: "#EEEEEC",
// base: "#6F6D66",
// brand: "#3E63DD",
// },
// },
// }),
],
vite: {

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

@ -17,6 +17,9 @@ importers:
'@astrojs/mdx':
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))
'@radix-ui/colors':
specifier: ^3.0.0
version: 3.0.0
astro:
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)
@ -27,9 +30,15 @@ importers:
specifier: ^5.7.2
version: 5.7.2
devDependencies:
'@iconify-json/mdi':
specifier: ^1.2.1
version: 1.2.1
'@unocss/preset-uno':
specifier: ^0.64.1
version: 0.64.1
'@unocss/reset':
specifier: ^0.65.1
version: 0.65.1
unocss:
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))
@ -863,6 +872,9 @@ packages:
resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
engines: {node: '>=14'}
'@iconify-json/mdi@1.2.1':
resolution: {integrity: sha512-dSkQU78gsZV6Yxnq78+LuX7jzeFC/5NAmz7O3rh558GimGFcwMVY/OtqRowIzjqJBmMmWZft7wkFV4TrwRXjlg==}
'@iconify-json/tabler@1.2.10':
resolution: {integrity: sha512-P58U/e0rZNYptzMjnExcFOtSt712xJnqwJI7KoF4iaUJ7EeFQNJawjUXT8X1rvbLMUk/O/fgrzAfhD163XuckA==}
@ -1445,6 +1457,9 @@ packages:
'@unocss/reset@0.64.1':
resolution: {integrity: sha512-xx36rWcrIpyvI1l/v+szQLrxWAgsmk6GH85QQ5iE1qccQbL9IlhWHB1KEd3cRbJ1TFeZ2Mzca/qsjg0LU9ZVnA==}
'@unocss/reset@0.65.1':
resolution: {integrity: sha512-qyxF7rKGX+Cu3FpV8KCRQbtCvFcBpmzvx5A2wal77tIhrFR5VSH7NzCVmgs2+V9FXvU3aWVNZ79i1KMnLZ5Mjg==}
'@unocss/rule-utils@0.62.4':
resolution: {integrity: sha512-XUwLbLUzL+VSHCJNK5QBHC9RbFehumge1/XJmsRfmh0+oxgJoO1gvEvxi57gYEmdJdMRJHRJZ66se6+cB0Ymvw==}
engines: {node: '>=14'}
@ -4335,6 +4350,10 @@ snapshots:
'@fastify/busboy@2.1.1': {}
'@iconify-json/mdi@1.2.1':
dependencies:
'@iconify/types': 2.0.0
'@iconify-json/tabler@1.2.10':
dependencies:
'@iconify/types': 2.0.0
@ -4981,6 +5000,8 @@ snapshots:
'@unocss/reset@0.64.1': {}
'@unocss/reset@0.65.1': {}
'@unocss/rule-utils@0.62.4':
dependencies:
'@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 {
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="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="preload" href="/hero.png" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<Header
heading="The Clog"
links={[
{
text: 'Journal',
href: '/journal',
},
{
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"]}
/>
<body class="text-brand-1 p-0 m-0">
<LeftRightSplit class="px-8 bg-brand-12 border-b-groove border-width-1 border-brand-10 mb-4">
<Heading slot="left"><a href="/" class="text-brand-3 decoration-none">The Clog</a></Heading>
<Row slot="right" >
<NavLink href="/journal">Journal</NavLink>
<NavLink href="/articles">Articles</NavLink>
<NavLink class="i-mdi-git" href="https://git.sakal.us/avraham/">Gitea</NavLink>
</Row>
</LeftRightSplit>
<slot />
</body>
</html>

@ -1,11 +1,26 @@
---
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">
<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"
heading="Welcome to The Clog"
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"
image="/hero.png"
class:list={["p-space-6"]}
/>
/> -->
</main>
</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 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 RegularText from './RegularText.astro';
import DownTheCenter from '../../structure/DownTheCenter.astro';
import ReadableWidth from '../../sizing/ReadableWidth.astro';
export const prerender = true;
@ -22,10 +23,14 @@ const { Content } = await journalEntry.render();
---
<Layout title={journalEntry.data.title}>
<main>
<Heading>{journalEntry.data.title}</Heading>
<Content components={{
p: RegularText,
a: Link,
}} />
<DownTheCenter>
<ReadableWidth>
<Heading>{journalEntry.data.title}</Heading>
<Content components={{
// p: RegularText,
a: Link,
}} />
</ReadableWidth>
</DownTheCenter>
</main>
</Layout>

@ -1,8 +1,6 @@
---
import { getCollection } from 'astro:content';
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');
@ -11,7 +9,16 @@ export const prerender = true;
---
<Layout title="Journal Entries">
<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"
cards={journalEntries.map((journalEntry)=>({
frame:"panel",
@ -30,6 +37,6 @@ export const prerender = true;
structure="grid"
size="md"
>
</Section>
</Section> -->
</main>
</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 fulldevUI from "fulldev-ui/unocss";
import { indigo } from "@radix-ui/colors";
// import fulldevUI from "fulldev-ui/unocss";
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: [
presetUno,
//@ts-ignore
fulldevUI,
// fulldevUI,
presetIcons(),
],
});

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

Loading…
Cancel
Save