generated from polymech/site-template
howtos:list
This commit is contained in:
parent
68376435d8
commit
0082c993d8
@ -23,7 +23,7 @@
|
||||
"format": "unix-time"
|
||||
}
|
||||
],
|
||||
"default": "2025-03-20T16:02:01.103Z"
|
||||
"default": "2025-03-20T16:21:11.073Z"
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
|
||||
File diff suppressed because one or more lines are too long
42
src/components/howtos/List.astro
Normal file
42
src/components/howtos/List.astro
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
import { default_image } from "config/config.js";
|
||||
import Translate from "@/components/polymech/i18n.astro";
|
||||
import { Img } from "imagetools/components"
|
||||
|
||||
const { title, url, model, selected = false } = Astro.props;
|
||||
const {item} = model;
|
||||
const thumbnail = item?.cover_image ? {src:item?.cover_image?.downloadUrl, alt:""} : default_image();
|
||||
const classes = `group relative bg-white overflow-hidden group rounded-xl ${selected ? "ring-2 ring-orange-500" : ""}`;
|
||||
|
||||
---
|
||||
|
||||
<div class={classes}>
|
||||
<div
|
||||
class="p-4 overflow-hidden group-hover:opacity-75 duration-300 transition-all"
|
||||
>
|
||||
<a href={url} title={title} aria-label={title}>
|
||||
<img
|
||||
src={thumbnail.src}
|
||||
alt={title}
|
||||
format="avif"
|
||||
objectFit="cover"
|
||||
loading="lazy"
|
||||
placeholder="blurred"
|
||||
sizes="(min-width: 220px) 220px"
|
||||
breakpoints={{ count: 2, minWidth: 120, maxWidth: 430 }}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-4 text-xs text-neutral-500">
|
||||
<div class="flex items-center justify-between space-x-8">
|
||||
<h3>
|
||||
<a href={url} title={title} aria-label={title}>
|
||||
<span aria-hidden="true" class="absolute inset-0"></span>
|
||||
<Translate>{title}</Translate>
|
||||
</a>
|
||||
</h3>
|
||||
<p class="top-4 right-4"></p>
|
||||
<p class="mt-1"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -7,15 +7,11 @@ import { i18n as Translate } from "@polymech/astro-base";
|
||||
interface Props {
|
||||
howto: IHowto;
|
||||
}
|
||||
const { howto } = Astro.props;
|
||||
debugger
|
||||
const { howto } = Astro.props;
|
||||
import BaseLayout from "@/layouts/BaseLayout.astro";
|
||||
import Wrapper from "@/components/containers/Wrapper.astro";
|
||||
|
||||
|
||||
const _url = Astro.url
|
||||
const canonicalUrl = _url.origin
|
||||
|
||||
function getProxyUrl(imageUrl: string): string {
|
||||
const ret = `${canonicalUrl}/api/image-proxy?url=${encodeURIComponent(imageUrl)}`;
|
||||
return ret
|
||||
@ -33,8 +29,8 @@ function getProxyUrl(imageUrl: string): string {
|
||||
|
||||
<!-- Cover image -->
|
||||
<div class="mb-4">
|
||||
<Img
|
||||
src={(getProxyUrl(howto.cover_image.downloadUrl))}
|
||||
<img
|
||||
src={howto.cover_image.downloadUrl}
|
||||
alt={"none"}
|
||||
attributes={{
|
||||
img: { class: "w-full h-64 object-cover rounded-lg" }
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -25,6 +25,7 @@
|
||||
"tags": {
|
||||
"RTCBJAFa05YBVVBy0KeO": true
|
||||
},
|
||||
"category":"machines",
|
||||
"total_views": 232,
|
||||
"_contentModifiedTimestamp": "2023-08-23T18:20:09.098Z",
|
||||
"cover_image": {
|
||||
|
||||
34
src/model/sidebar.html
Normal file
34
src/model/sidebar.html
Normal file
@ -0,0 +1,34 @@
|
||||
|
||||
<button data-drawer-target="default-sidebar" data-drawer-toggle="default-sidebar" aria-controls="default-sidebar" type="button" class="inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<aside id="default-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar">
|
||||
<div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
|
||||
<ul class="space-y-2 font-medium">
|
||||
<li>
|
||||
<a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
|
||||
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 21">
|
||||
<path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"/>
|
||||
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"/>
|
||||
</svg>
|
||||
<span class="ms-3">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
|
||||
<svg class="shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
|
||||
<path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"/>
|
||||
</svg>
|
||||
<span class="flex-1 ms-3 whitespace-nowrap">Kanban</span>
|
||||
<span class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@ -1,15 +1,47 @@
|
||||
## Todos
|
||||
|
||||
- skip checked
|
||||
- for Astro, tailwind
|
||||
- no react or additional dependencies
|
||||
- for images, use import { Gallery } from "@polymech/astro-base", eg: <Gallery images={item.assets.gallery} /> whereby image:src,alt. Single images are handled there as well
|
||||
- for single images, use import { Img } from 'imagetools/components', <Img src="..."> wherby classes can be added as follows:
|
||||
attributes={{
|
||||
img: { class: "classes ..." }
|
||||
}}
|
||||
- IHowto: import { IHowto } from "@/model/howto.js"
|
||||
- For text, use <Translate>{text}</Translate> (import { i18n as Translate } from "@polymech/astro-base")
|
||||
- use default sample data if needed
|
||||
- IHowto: import { IHowto } from "@/model/howto.js"
|
||||
- For text, use {text} (import { i18n as Translate } from "@polymech/astro-base")
|
||||
- data is provided via `import { getCollection } from 'astro:content'
|
||||
const items = await getCollection('howtos')`
|
||||
|
||||
- [ ] create minimal Astro component for the given interface ("IHowto") and sample data ../components/libary/howto.astro
|
||||
### Example Tailwind Sidebar
|
||||
|
||||
<button data-drawer-target="default-sidebar" data-drawer-toggle="default-sidebar" aria-controls="default-sidebar" type="button" class="inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<aside id="default-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar">
|
||||
<div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
|
||||
<ul class="space-y-2 font-medium">
|
||||
<li>
|
||||
<a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
|
||||
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 21">
|
||||
<path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"/>
|
||||
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"/>
|
||||
</svg>
|
||||
<span class="ms-3">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
|
||||
<svg class="shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
|
||||
<path d="M6.1"/>
|
||||
</svg>
|
||||
<span class="flex-1 ms-3 whitespace-nowrap">Kanban</span>
|
||||
<span class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
## Todos
|
||||
|
||||
- [ ] create minimal Astro component, a sidebar using flowbit (see example) for the given interface ("IHowto") and sample data ../components/libary/howto.astro, use the 'category' field, save as ../components/howtos/sidebar.astro
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
import Layout from '@/layouts/Howto.astro'
|
||||
import { getCollection } from 'astro:content'
|
||||
|
||||
import { LANGUAGES_PROD as LANGUAGES } from "config/config.js"
|
||||
|
||||
export async function getStaticPaths()
|
||||
|
||||
27
src/pages/howtos.astro
Normal file
27
src/pages/howtos.astro
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
import BaseLayout from "@/layouts/BaseLayout.astro"
|
||||
import { getCollection } from "astro:content"
|
||||
import List from "@/components/howtos/List.astro"
|
||||
const all = await getCollection("howtos")
|
||||
const locale = Astro.currentLocale || "en"
|
||||
|
||||
---
|
||||
<BaseLayout>
|
||||
<section>
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-2">
|
||||
{
|
||||
all.map((item) => (
|
||||
<List
|
||||
url={ locale + "/howtos/" + item.id}
|
||||
title={item.data.title}
|
||||
price={item.data.price}
|
||||
type={item.data.type}
|
||||
alt={item.data.title}
|
||||
model={item.data}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</BaseLayout>
|
||||
@ -30,14 +30,5 @@ const locale = Astro.currentLocale || "en"
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{ <script>
|
||||
const currentPath = window.location.pathname;
|
||||
if (!/^\/[a-z]{2}(\/|$)/i.test(currentPath)) {
|
||||
let language = navigator.language
|
||||
language = language.split('-')[0]
|
||||
language = "en"
|
||||
window.location.href = `/${language}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
</BaseLayout>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user