MatthiesenXYZ/astro-ghostcms
MatthiesenXYZ
/
astro-ghostcms
1
0
Fork 0
Code Issues Pull Requests Projects Releases 125 Activity

migrate catpuccin theme from `Fragment` component to `astro-remote`

This commit is contained in:
Adam Matthiesen 2024-03-07 23:09:17 -08:00
parent d2fd139f30
commit e159b54971
10 changed files with 76 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/astro-ghostcms-brutalbyelian/src/components/ghostrender/CodeSlot.astro
View File

@ -6,7 +6,12 @@ import { querySelector } from "ultrahtml/selector"
const html = await Astro.slots.render("default")
const ast = await parse(html)
const codetag = querySelector(ast,'code')
const { children } = codetag
const { children, attributes } = codetag
const code = children[0].value
const checkLang = attributes.class ? attributes.class.slice(9) : undefined
const lang = checkLang ? checkLang : 'plaintxt'
---
<Code code={code} lang={"sh"} theme={"monokai"}/>
<Code code={code} lang={lang}/>

9
packages/astro-ghostcms-catppuccin/package.json
View File

@ -50,7 +50,8 @@
},
"scripts": {},
"peerDependencies": {
"astro": "^4.2.1"
"@matthiesenxyz/astro-ghostcms": ">=3.3.1",
"astro": ">=4.4.0"
},
"devDependencies": {
"@matthiesenxyz/astro-ghostcms": "workspace:*"
@ -61,8 +62,10 @@
"@fontsource-variable/inter": "^5.0.17",
"@matthiesenxyz/astro-ghostcms": "^3.3.1",
"@tailwindcss/typography": "^0.5.10",
"tailwindcss": "^3.3.5",
"astro-navbar": "^2.3.1",
"astro-seo": "^0.8.3"
"astro-remote": "^0.3.2",
"astro-seo": "^0.8.3",
"tailwindcss": "^3.3.5",
"ultrahtml": "1.5.3"
}
}

14
packages/astro-ghostcms-catppuccin/src/components/FeaturedPost.astro
View File

@ -3,6 +3,9 @@ import type { Settings, Post } from "@matthiesenxyz/astro-ghostcms/api";
import FeatureImage from "./FeatureImage.astro";
import AuthorList from "./AuthorList.astro";
import { formatDate } from "../utils";
import { Markup } from 'astro-remote';
import * as render from '../components/astro-remote';
export type Props = {
posts: Post[];
settings: Settings;
@ -59,7 +62,16 @@ const latestFeatured = posts[0]
</div>
<div class="divider my-4"/>
<section id="ghostimport" class="text-ctp-subtext1">
{latestFeatured && <Fragment set:html={latestFeatured.html} />}
{latestFeatured && <Markup
content={latestFeatured.html}
sanitize={{
allowComponents: true,
allowElements: ['a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'figure', 'figcaption', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'em', 'strong', 'del', 'hr', 'br', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption', 'div', 'span', 'script', 'getgist', 'getgistgroup', 'astrocard'],
}}
components={{
pre: render.CodeSlot
}}
/> }
</section>
</div>
</main>

14
packages/astro-ghostcms-catppuccin/src/components/Post.astro
View File

@ -2,6 +2,9 @@
import PostHero from "../components/PostHero.astro";
import PostFooter from "../components/PostFooter.astro";
import { getFeaturedPosts, invariant, type Post, type Settings } from "@matthiesenxyz/astro-ghostcms/api";
import { Markup } from 'astro-remote';
import * as render from '../components/astro-remote';
export type Props = {
post: Post;
settings: Settings;
@ -27,7 +30,16 @@ invariant(settings, "Settings not found");
<PostHero post={post} settings={settings} />
<div id="ghostimport" class="mt-4 text-ctp-subtext1">
<Fragment set:html={post.html} />
<Markup
content={post.html}
sanitize={{
allowComponents: true,
allowElements: ['a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'figure', 'figcaption', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'em', 'strong', 'del', 'hr', 'br', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption', 'div', 'span', 'script', 'getgist', 'getgistgroup', 'astrocard'],
}}
components={{
pre: render.CodeSlot
}}
/>
</div>
<PostFooter post={post} settings={settings} posts={mPosts} />

17
packages/astro-ghostcms-catppuccin/src/components/astro-remote/CodeSlot.astro Normal file
View File

@ -0,0 +1,17 @@
---
import { Code } from "astro/components"
import { parse } from "ultrahtml"
import { querySelector } from "ultrahtml/selector"
const html = await Astro.slots.render("default")
const ast = await parse(html)
const codetag = querySelector(ast,'code')
const { children, attributes } = codetag
const code = children[0].value
const checkLang = attributes.class ? attributes.class.slice(9) : undefined
const lang = checkLang ? checkLang : 'txt'
---
<Code code={code} lang={lang}/>

1
packages/astro-ghostcms-catppuccin/src/components/astro-remote/index.ts Normal file
View File

@ -0,0 +1 @@
export { default as CodeSlot } from "./CodeSlot.astro";

2
packages/starlight-ghostcms/src/routes/[slug].astro
View File

@ -49,7 +49,7 @@ const pageProps = getPageProps(post.title)
content={post.html}
sanitize={{
allowComponents: true,
allowElements: ['a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'figure', 'figcaption', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'em', 'strong', 'del', 'hr', 'br', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption', 'div', 'span', 'script', 'getgist', 'getgistgroup'],
allowElements: ['a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'figure', 'figcaption', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'em', 'strong', 'del', 'hr', 'br', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption', 'div', 'span', 'script', 'getgist', 'getgistgroup', 'astrocard'],
}}
components={{
pre: render.CodeSlot,

10
playgrounds/astro-playground/astro.config.mjs
View File

@ -1,18 +1,18 @@
import ghostcms from "@matthiesenxyz/astro-ghostcms";
import { defineConfig } from "astro/config";
//import tailwind from "@astrojs/tailwind";
import UnoCSS from "unocss/astro";
import tailwind from "@astrojs/tailwind";
//import UnoCSS from "unocss/astro";
// https://astro.build/config
export default defineConfig({
site: "https://demo.astro-ghostcms.xyz/",
integrations: [
//tailwind(),
UnoCSS({ injectReset: true }),
tailwind(),
//UnoCSS({ injectReset: true }),
ghostcms({
ghostURL: 'https://ghostdemo.matthiesen.xyz',
ThemeProvider: {
theme: "@matthiesenxyz/astro-ghostcms-brutalbyelian",
theme: "@matthiesenxyz/astro-ghostcms-catppuccin",
},
verbose: true,
}),

1
playgrounds/astro-playground/package.json
View File

@ -14,6 +14,7 @@
"astro": "^4.4.13",
"@matthiesenxyz/astro-ghostcms": "workspace:*",
"@matthiesenxyz/astro-ghostcms-theme-default": "workspace:*",
"@matthiesenxyz/astro-ghostcms-catppuccin": "workspace:*",
"@matthiesenxyz/astro-ghostcms-brutalbyelian": "workspace:*",
"@astrojs/tailwind": "^5.1.0",
"@unocss/astro": "^0.58.5",

30
pnpm-lock.yaml
View File

@ -147,7 +147,7 @@ importers:
dependencies:
'@astrojs/tailwind':
specifier: ^5.1.0
version: 5.1.0(astro@4.3.7)(tailwindcss@3.4.1)
version: 5.1.0(astro@4.4.13)(tailwindcss@3.4.1)
'@catppuccin/tailwindcss':
specifier: 0.1.6
version: 0.1.6(tailwindcss@3.4.1)
@ -161,17 +161,23 @@ importers:
specifier: ^0.5.10
version: 0.5.10(tailwindcss@3.4.1)
astro:
specifier: ^4.2.1
version: 4.3.7(sass@1.71.1)(typescript@5.4.2)
specifier: '>=4.4.0'
version: 4.4.13(typescript@5.4.2)
astro-navbar:
specifier: ^2.3.1
version: 2.3.1
astro-remote:
specifier: ^0.3.2
version: 0.3.2
astro-seo:
specifier: ^0.8.3
version: 0.8.3(typescript@5.4.2)
tailwindcss:
specifier: ^3.3.5
version: 3.4.1
ultrahtml:
specifier: 1.5.3
version: 1.5.3
packages/astro-ghostcms-rendercontent:
dependencies:
@ -296,6 +302,9 @@ importers:
'@matthiesenxyz/astro-ghostcms-brutalbyelian':
specifier: workspace:*
version: link:../../packages/astro-ghostcms-brutalbyelian
'@matthiesenxyz/astro-ghostcms-catppuccin':
specifier: workspace:*
version: link:../../packages/astro-ghostcms-catppuccin
'@matthiesenxyz/astro-ghostcms-theme-default':
specifier: workspace:*
version: link:../../packages/astro-ghostcms-theme-default
@ -512,21 +521,6 @@ packages:
transitivePeerDependencies:
- supports-color
/@astrojs/tailwind@5.1.0(astro@4.3.7)(tailwindcss@3.4.1):
resolution: {integrity: sha512-BJoCDKuWhU9FT2qYg+fr6Nfb3qP4ShtyjXGHKA/4mHN94z7BGcmauQK23iy+YH5qWvTnhqkd6mQPQ1yTZTe9Ig==}
peerDependencies:
astro: ^3.0.0 || ^4.0.0
tailwindcss: ^3.0.24
dependencies:
astro: 4.3.7(sass@1.71.1)(typescript@5.4.2)
autoprefixer: 10.4.17(postcss@8.4.35)
postcss: 8.4.35
postcss-load-config: 4.0.2(postcss@8.4.35)
tailwindcss: 3.4.1
transitivePeerDependencies:
- ts-node
dev: false
/@astrojs/tailwind@5.1.0(astro@4.4.13)(tailwindcss@3.4.1):
resolution: {integrity: sha512-BJoCDKuWhU9FT2qYg+fr6Nfb3qP4ShtyjXGHKA/4mHN94z7BGcmauQK23iy+YH5qWvTnhqkd6mQPQ1yTZTe9Ig==}
peerDependencies: