refactor: remove @ayco/astro-resume

This commit is contained in:
Ayo Ayco 2024-09-04 19:18:34 +02:00
parent 4a6dc800ca
commit d4fef25400
8 changed files with 59 additions and 289 deletions

View file

@ -23,7 +23,6 @@
"@astrojs/node": "^8.3.3",
"@astrojs/rss": "^4.0.7",
"@astrojs/sitemap": "^3.1.6",
"@ayco/astro-resume": "^0.4.2",
"@ayco/astro-sw": "^0.8.8",
"@extractus/article-extractor": "^8.0.10",
"@fastify/middie": "^8.3.1",

View file

@ -23,9 +23,6 @@ importers:
'@astrojs/sitemap':
specifier: ^3.1.6
version: 3.1.6
'@ayco/astro-resume':
specifier: ^0.4.2
version: 0.4.2(astro@4.15.1(@types/node@22.5.2)(rollup@4.21.2)(sass@1.77.8)(typescript@5.5.4))
'@ayco/astro-sw':
specifier: ^0.8.8
version: 0.8.8
@ -124,11 +121,6 @@ packages:
'@astrojs/yaml2ts@0.2.1':
resolution: {integrity: sha512-CBaNwDQJz20E5WxzQh4thLVfhB3JEEGz72wRA+oJp6fQR37QLAqXZJU0mHC+yqMOQ6oj0GfRPJrz6hjf+zm6zA==}
'@ayco/astro-resume@0.4.2':
resolution: {integrity: sha512-blbFmMxkvLqZ0Fw78ySrfeysdhTlaOIsR7V2Fqd1F20Q0B3SCxFomcNvRMw1j45+tBovxeS44XBtEarhBoQXfw==}
peerDependencies:
astro: ^4.12.2
'@ayco/astro-sw@0.8.8':
resolution: {integrity: sha512-0wHLwfT5r45ZjO3kqh2dRTDDlFYjQq/SWSrmtSddZXcV3oqRN0C69LpzohPvwG2Yjfizmt6/IX7aH9LbWP/gbQ==}
engines: {node: '>=18.0.0'}
@ -3074,10 +3066,6 @@ snapshots:
dependencies:
yaml: 2.5.0
'@ayco/astro-resume@0.4.2(astro@4.15.1(@types/node@22.5.2)(rollup@4.21.2)(sass@1.77.8)(typescript@5.5.4))':
dependencies:
astro: 4.15.1(@types/node@22.5.2)(rollup@4.21.2)(sass@1.77.8)(typescript@5.5.4)
'@ayco/astro-sw@0.8.8':
dependencies:
esbuild: 0.23.1

View file

@ -1,10 +1,53 @@
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="800px" height="800px" viewBox="0 0 72 72" id="emoji" xmlns="http://www.w3.org/2000/svg">
<g id="color">
<circle cx="36" cy="36.0001" r="28"/>
</g>
<g id="line">
<circle cx="36" cy="36.0001" r="28" fill="none" stroke="#000000" stroke-linejoin="round" stroke-width="2"/>
<svg
width="500"
height="500"
viewBox="0 0 132.29166 132.29167"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"
sodipodi:docname="logo.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="1.0280428"
inkscape:cx="187.24901"
inkscape:cy="249.98959"
inkscape:window-width="1452"
inkscape:window-height="752"
inkscape:window-x="1567"
inkscape:window-y="188"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="fill:#ffffff;stroke-width:0.275733"
id="path1"
cx="66.32341"
cy="66.615196"
r="65.904121" />
<path
d="m 94.18155,62.84604 q 5.319924,0 8.53988,5.739918 3.35995,5.59992 3.35995,15.119784 0,16.519768 -9.939858,25.759628 -9.79986,9.09987 -27.439608,9.09987 -20.859703,0 -32.199541,-13.15981 -11.19984,-13.15981 -11.19984,-37.799458 0,-12.319824 2.79996,-22.119684 2.939958,-9.79986 8.259882,-16.659762 5.459922,-6.9999 13.159812,-10.639848 7.69989,-3.779946 17.359753,-3.779946 6.9999,0 12.59982,1.959972 5.739918,1.959972 9.79986,5.59992 4.059942,3.49995 6.159912,8.539878 2.239968,4.89993 2.239968,11.059842 0,4.339938 -1.119984,7.979886 -0.979986,3.639948 -2.79996,6.29991 -1.819974,2.659962 -4.479936,4.19994 -2.519964,1.39998 -5.459922,1.39998 -4.619934,0 -7.559892,-3.359952 -2.939958,-3.49995 -2.939958,-8.819874 0,-2.379966 -0.69999,-4.619934 -0.559992,-2.239968 -1.539978,-3.919944 -0.979986,-1.679976 -2.379966,-2.659962 -1.259982,-0.979986 -2.79996,-0.979986 -1.819974,0 -3.49995,1.679976 -1.679977,1.539978 -2.939959,4.479936 -1.259982,2.79996 -2.09997,6.579906 -0.69999,3.639948 -0.69999,7.839888 0,8.259882 2.79996,12.739818 2.939959,4.479936 8.259883,4.479936 3.639948,0 6.9999,-1.819974 3.359952,-1.959972 6.579906,-4.19994 3.219954,-2.239968 6.439908,-4.059942 3.219954,-1.959972 6.439908,-1.959972 z"
id="text1"
style="font-size:139.998px;font-family:'Super Frog';-inkscape-font-specification:'Super Frog';stroke-width:0.729151"
aria-label="C" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 348 B

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -1,159 +0,0 @@
---
import Icon from "astro-iconify";
import SettingsPopover from "./SettingsPopover.astro";
export interface Props {
url: string | null;
}
const placeholder = "Type the article URL here";
const { url } = Astro.props;
---
<div class="address-bar">
<form>
<button
aria-label="Back"
class="btn left-buttons"
type="button"
id="app-back"
name="app-back"
onclick="history.go(-1); return false;"
>
<Icon name="ic:round-arrow-back-ios" />
</button>
<input
type="url"
id="app-url"
name="url"
value={url ?? ""}
placeholder={placeholder}
required
/>
<button
aria-label="Submit"
class="btn right-buttons"
type="submit"
id="submit"
>
<Icon name="ri:ai-generate" />
</button>
<a
aria-label="Home"
class="btn right-buttons"
type="button"
id="app-home"
href="/"
>
<Icon name="mdi:home" />
</a>
<div aria-label="Settings" id="app-settings" class="btn right-buttons">
<input type="checkbox" id="settings-toggle" hidden />
<label for="settings-toggle"><Icon name="mdi:cog" /></label>
</div>
</form>
<SettingsPopover toggle="settings-toggle" />
</div>
<script>
import { deserialize } from "@ayco/astro-resume";
import type { AppConfig } from "../pages/index.astro";
import { renderPost } from "../utils/library";
const backLink = document.querySelector<HTMLButtonElement>("#app-back");
const submitBtn = document.querySelector<HTMLButtonElement>("#submit");
const urlInput = document.querySelector<HTMLInputElement>("#app-url");
const settings = document.querySelector<HTMLDivElement>("#app-settings");
const homeLink = document.querySelector<HTMLAnchorElement>("#app-home");
const { routerOutlet } = deserialize<AppConfig>('app-config');
homeLink?.addEventListener('click', (e) => {
e.preventDefault();
renderPost(null, '/', routerOutlet)
})
// if js is enabled, show the back and settings button
backLink?.setAttribute("style", "display: block");
settings?.setAttribute("style", "display: block");
if (urlInput?.value === "") {
backLink?.setAttribute("disabled", "true");
submitBtn?.setAttribute("disabled", "true");
}
urlInput?.addEventListener("input", (e) => {
const target = e.target as HTMLInputElement;
if (target.value === "") {
submitBtn?.setAttribute("disabled", "true");
} else {
submitBtn?.removeAttribute("disabled");
}
});
</script>
<style>
.address-bar {
width: 100%;
position: relative;
}
form {
width: 100%;
border: 0px;
padding: 0.5rem;
text-align: center;
border-radius: 5px;
border: 1px solid #ccc;
background-color: #f5f5f5;
box-shadow: 0 1px 3px 1px #eee;
display: flex;
input[type="url"] {
flex: 3;
background-color: white;
border-radius: 5px;
border: 1px solid #eee;
font-size: normal;
padding: 0.5rem;
color: #555;
}
#app-back,
#app-settings {
display: none;
}
.btn {
display: block;
border: 0px;
height: 100%;
vertical-align: middle;
background-color: transparent;
padding: 0.5rem 0;
color: black;
svg {
border: 0px;
background-color: transparent;
width: 24px;
height: 24px;
cursor: pointer;
}
}
.left-buttons {
margin-right: 0.5rem;
}
.right-buttons {
margin-left: 0.5rem;
}
.btn svg:hover {
color: blue !important;
}
.btn[disabled="true"] svg {
color: #ccc !important;
cursor: default !important;
}
}
</style>

View file

@ -1,20 +1,15 @@
---
import Serialize from '@ayco/astro-resume';
export interface Props {
skipSave?: boolean
}
---
<div id="library">
<div id="library" data-preferences={JSON.stringify(Astro.props)}>
<span id="heading"></span>
<ul id="post-list"></ul>
</div>
<Serialize id="preferences" data={{...Astro.props}} />
<script>
import { deserialize } from '@ayco/astro-resume';
import type { Props } from './Library.astro';
import type { AppConfig } from '../pages/index.astro';
import { getPostCard, renderPost } from '../utils/library'
import { cozify } from '../utils/sanitizer';
import { logError, logInfo } from '../utils/logger';
@ -26,8 +21,12 @@ export interface Props {
if (urlParam) {
url = new URL(`${url.origin}/?url=${urlParam}`);
}
const { skipSave } = deserialize<Props>('preferences');
const { routerOutlet } = deserialize<AppConfig>('app-config');
const preferencesEl = document.querySelector('[data-preferences]') as HTMLElement;
const preferencesStr = preferencesEl?.dataset.preferences ?? '';
const { skipSave } = JSON.parse(preferencesStr);
const routerOutlet = 'router-outlet';
const includesAppURL = urlParam?.includes(baseUrl) ?? false;
try {

View file

@ -1,91 +0,0 @@
---
import Serialize from "@ayco/astro-resume";
import Icon from "astro-iconify";
import { featureFlags } from "../utils/feature-flags";
export interface Props {
toggle: string;
}
const enabledSettings = Object.keys(featureFlags).filter(
(key) => featureFlags[key]
);
const { toggle } = Astro.props;
---
<form id="settings-form" hidden>
<div id="toolbar">
<h2>Settings</h2>
<label for={toggle}>
<Icon name="mdi:close" />
</label>
</div>
{
enabledSettings.map(
(settings, index) =>
settings !== "" && (
<div class="field">
<input
type="checkbox"
id={`settings-${index}`}
name={`settings-${index}`}
/>
<label for={`settings-${index}`}>{settings}</label>
</div>
)
)
}
<small>This is where feature flags will be set once made available. <a href="https://github.com/ayoayco/cozy/issues/new" target="_blank">Request features or report bugs here.</a></small>
</form>
<Serialize id="settings-toggle-id" data={{toggle}} />
<script>
/**
* temporary JS solution, should be replaced with CSS
*/
import { deserialize } from "@ayco/astro-resume";
const {toggle} = deserialize("settings-toggle-id");
document
.getElementById(toggle)
?.addEventListener("change", (e) => {
if (e.currentTarget?.["checked"])
document.getElementById("settings-form")?.removeAttribute("hidden");
else document.getElementById("settings-form")?.setAttribute("hidden", "");
});
</script>
<style>
#settings-form {
border: 1px solid #ccc;
border-radius: 5px;
background-color: white;
padding: 0.5em;
width: 300px;
position: absolute;
top: 0.5em;
right: 0.1em;
box-shadow: 0 1px 3px 1px #eee;
#toolbar {
display: flex;
margin-bottom: 0.5em;
h2,
svg {
flex: 1;
}
svg {
width: 24px;
height: 24px;
cursor: pointer;
}
}
.field {
margin-left: 0.5em;
margin-bottom: 0.5em;
}
}
</style>

View file

@ -1,6 +1,5 @@
---
import Icon from "astro-iconify";
import SettingsPopover from "./SettingsPopover.astro";
export interface Props {
url: string | null;

View file

@ -1,5 +1,4 @@
---
import Serialize from "@ayco/astro-resume";
import { ArticleData, extract } from "@extractus/article-extractor";
import SimpleAddressBar from "../components/SimpleAddressBar.astro";
import Post from "../components/Post.astro";
@ -10,11 +9,6 @@ import Jumbotron from "../components/Jumbotron.astro";
export const prerender = false;
const appConfig = {
routerOutlet: 'router-outlet',
};
export type AppConfig = typeof appConfig;
let url = Astro.url.searchParams.get('url');
let article: ArticleData | null = {url: '/'};
@ -33,11 +27,9 @@ if (url)
<Layout article={article}>
<Jumbotron />
<SimpleAddressBar url={url} />
<div slot="post" id={appConfig.routerOutlet}>
<div slot="post" id="router-outlet">
<Post article={article} />
</div>
<Library slot="library" skipSave={article === null} />
<Footer slot="footer" />
</Layout>
<Serialize id="app-config" data={appConfig} />