generated from polymech/site-template
astro cleanup
This commit is contained in:
parent
74bdd9aefe
commit
d7483bd262
@ -23,7 +23,7 @@
|
||||
"format": "unix-time"
|
||||
}
|
||||
],
|
||||
"default": "2025-03-29T15:08:34.462Z"
|
||||
"default": "2025-03-29T15:12:49.089Z"
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
|
||||
@ -670,7 +670,7 @@
|
||||
},
|
||||
"https://scholarworks.uni.edu/cgi/viewcontent.cgi?article=3680%5C&context=grp": {
|
||||
"isValid": false,
|
||||
"timestamp": 1743260915889
|
||||
"timestamp": 1743261170564
|
||||
},
|
||||
"https://pmc.ncbi.nlm.nih.gov/articles/PMC10489002/": {
|
||||
"isValid": true,
|
||||
@ -754,7 +754,7 @@
|
||||
},
|
||||
"https://journals.plos.org/plosone/article?id=10.1371%252Fjournal.pone.0288696": {
|
||||
"isValid": false,
|
||||
"timestamp": 1743260916346
|
||||
"timestamp": 1743261171019
|
||||
},
|
||||
"https://www.youtube.com/watch?v=_a7usMe_K38": {
|
||||
"isValid": true,
|
||||
@ -841,7 +841,7 @@
|
||||
},
|
||||
"https://www.toraytac.com/media/c3feb206-1398-4e0e-bca6-df7780f11745/tcCurg/TenCate%2520Advanced%2520Composites/Documents/Technical%2520papers/TenCate_chopped_fiber_thermoplastics_compression_molding_technical_paper.pdf": {
|
||||
"isValid": false,
|
||||
"timestamp": 1743260916511
|
||||
"timestamp": 1743261171190
|
||||
},
|
||||
"https://youtu.be/qtZv96cifIU": {
|
||||
"isValid": true,
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,122 +0,0 @@
|
||||
---
|
||||
// Import required components and interfaces
|
||||
import { IHowto } from "@/model/howto";
|
||||
import { Gallery } from "@polymech/astro-base";
|
||||
import { Img } from 'imagetools/components';
|
||||
import { i18n as Translate } from "@polymech/astro-base";
|
||||
|
||||
// Define props interface with Astro typing
|
||||
interface Props {
|
||||
howto: IHowto;
|
||||
}
|
||||
// Get the howto data from props
|
||||
const { howto } = Astro.props;
|
||||
import BaseLayout from "@/layouts/BaseLayout.astro";
|
||||
import Wrapper from "@/components/containers/Wrapper.astro";
|
||||
|
||||
// const canonicalURL = new URL(Astro.url.pathname, Astro.site)
|
||||
const _url = Astro.url
|
||||
const canonicalUrl = _url.origin
|
||||
|
||||
function getProxyUrl(imageUrl: string): string {
|
||||
const ret = `${canonicalUrl}/api/image-proxy?url=${encodeURIComponent(imageUrl)}`;
|
||||
return ret
|
||||
}
|
||||
|
||||
---
|
||||
<BaseLayout class="markdown-content">
|
||||
<Wrapper>
|
||||
<div class="howto-container max-w-4xl mx-auto p-4">
|
||||
<!-- Header section -->
|
||||
<header class="mb-8">
|
||||
<h1 class="text-3xl font-bold mb-2">
|
||||
<Translate>{howto.title}</Translate>
|
||||
</h1>
|
||||
|
||||
<!-- Cover image -->
|
||||
<div class="mb-4">
|
||||
<Img
|
||||
src={(getProxyUrl(howto.cover_image.downloadUrl))}
|
||||
alt={"none"}
|
||||
attributes={{
|
||||
img: { class: "w-full h-64 object-cover rounded-lg" }
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Metadata -->
|
||||
<div class="flex flex-wrap gap-4 mb-4 text-sm text-gray-600">
|
||||
<div>
|
||||
<span class="font-semibold">Difficulty:</span>
|
||||
<Translate>{howto.difficulty_level}</Translate>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Time:</span>
|
||||
<Translate>{howto.time}</Translate>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Views:</span> {howto.total_views}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Created by:</span> {howto._createdBy}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Country:</span> {howto.creatorCountry}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<p class="whitespace-pre-line">
|
||||
<Translate>{howto.description}</Translate>
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Steps -->
|
||||
<div class="steps-container space-y-12">
|
||||
{howto.steps.map((step, index) => (
|
||||
<div class="step-item" id={`step-${index + 1}`}>
|
||||
<h2 class="text-2xl font-semibold mb-4">
|
||||
<span class="inline-block bg-blue-500 text-white w-8 h-8 rounded-full text-center leading-8 mr-2">
|
||||
{index + 1}
|
||||
</span>
|
||||
<Translate>{step.title}</Translate>
|
||||
</h2>
|
||||
|
||||
<!-- Step content -->
|
||||
<div class="step-content mb-6">
|
||||
<p class="whitespace-pre-line mb-4">
|
||||
<Translate>{step.text}</Translate>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{step.images && step.images.length > 0 && (
|
||||
<div class="step-images">
|
||||
{step.images.map(img => (
|
||||
<img src={img.downloadUrl} alt="alt" />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<!-- Footer information -->
|
||||
<footer class="mt-12 pt-6 border-t border-gray-200">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<span class="text-sm text-gray-500">
|
||||
<Translate>Created</Translate>: {new Date(howto._created).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-sm text-gray-500">
|
||||
<span>
|
||||
<Translate>Found useful by</Translate>: {howto.votedUsefulBy.length} <Translate>people</Translate>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</Wrapper>
|
||||
</BaseLayout>
|
||||
@ -1,241 +0,0 @@
|
||||
# Astro Project Analysis: polymech-site
|
||||
|
||||
## 1. Project Structure Overview
|
||||
|
||||
Based on the explored files, the polymech-site project follows a typical Astro project structure with some custom organization patterns:
|
||||
|
||||
### Directory Structure
|
||||
|
||||
```
|
||||
polymech-site/
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ ├── global/
|
||||
│ │ │ └── Navigation.astro
|
||||
│ │ ├── polymech/
|
||||
│ │ │ └── i18n.astro
|
||||
│ │ └── BaseHead.astro
|
||||
│ ├── layouts/
|
||||
│ │ └── BaseLayout.astro
|
||||
│ ├── pages/
|
||||
│ │ └── index.astro
|
||||
│ └── base/ (utilities)
|
||||
├── public/
|
||||
├── astro.config.mjs
|
||||
└── package.json
|
||||
```
|
||||
|
||||
### Key Components
|
||||
|
||||
- **BaseHead.astro**: Handles metadata, SEO elements, and global head content
|
||||
- **BaseLayout.astro**: Provides the main page structure and wraps content
|
||||
- **Navigation.astro**: Implements site navigation with potential interactive elements
|
||||
- **i18n.astro**: Appears to handle internationalization at the component level
|
||||
|
||||
### Configuration
|
||||
|
||||
The project uses:
|
||||
- Astro's built-in features for static site generation
|
||||
- Various integrations defined in astro.config.mjs
|
||||
- A component-based architecture with clear separation of concerns
|
||||
|
||||
## 2. Patterns and Potential Issues
|
||||
|
||||
### Observed Patterns
|
||||
|
||||
1. **Component Organization**
|
||||
- Components are organized by functionality and scope (global vs. specific)
|
||||
- Layout components are separated from regular components
|
||||
- Reusable UI elements are componentized
|
||||
|
||||
2. **Internationalization Approach**
|
||||
- Custom i18n implementation at the component level
|
||||
- The project appears to handle multiple languages
|
||||
|
||||
3. **Rendering Strategy**
|
||||
- Primarily static rendering with some potential client-side hydration
|
||||
- Heavy use of Astro's component model
|
||||
|
||||
### Potential Issues
|
||||
|
||||
1. **Internationalization Complexity**
|
||||
- The i18n implementation appears custom and potentially complex
|
||||
- No clear centralized i18n management system was identified
|
||||
|
||||
2. **Component Granularity**
|
||||
- With 163 Astro files, there might be issues with component granularity
|
||||
- Potential for component duplication or insufficient reuse
|
||||
|
||||
3. **Build Optimization**
|
||||
- No clear strategy for code splitting or lazy loading of components
|
||||
- Potential performance issues with large number of components
|
||||
|
||||
4. **SEO Implementation**
|
||||
- SEO handling appears to be primarily in BaseHead, which may limit page-specific optimizations
|
||||
- No clear structured data implementation was observed
|
||||
|
||||
## 3. Best Practices for Astro Development
|
||||
|
||||
### Component Architecture
|
||||
|
||||
1. **Island Architecture**
|
||||
- Leverage Astro's island architecture more explicitly
|
||||
- Only hydrate interactive components, keeping most of the site static
|
||||
|
||||
2. **Component Composition**
|
||||
- Use slots and props for flexible component composition
|
||||
- Create truly reusable components with clear interfaces
|
||||
|
||||
3. **Content Management**
|
||||
- Use Astro's content collections for structured content
|
||||
- Separate content from presentation where possible
|
||||
|
||||
### Performance
|
||||
|
||||
1. **Image Optimization**
|
||||
- Use Astro's built-in image optimization features
|
||||
- Implement responsive images with appropriate formats
|
||||
|
||||
2. **CSS Strategy**
|
||||
- Scope CSS to components where possible
|
||||
- Consider using a utility-first approach for consistency
|
||||
|
||||
3. **JavaScript Usage**
|
||||
- Minimize client-side JavaScript
|
||||
- Use directives like `client:load` and `client:visible` strategically
|
||||
|
||||
### Development Workflow
|
||||
|
||||
1. **Type Safety**
|
||||
- Leverage TypeScript for component props
|
||||
- Define clear interfaces for data structures
|
||||
|
||||
2. **Testing**
|
||||
- Implement component testing with appropriate tools
|
||||
- Consider visual regression testing for UI components
|
||||
|
||||
## 4. Specific Improvement Suggestions
|
||||
|
||||
### Performance Optimization
|
||||
|
||||
1. **Asset Optimization**
|
||||
- Implement proper image optimization with `<Image />` component
|
||||
- Use responsive images with srcset for different viewport sizes
|
||||
|
||||
2. **Code Splitting**
|
||||
- Review client-side JavaScript usage and split appropriately
|
||||
- Use dynamic imports for larger client components
|
||||
|
||||
3. **Resource Hints**
|
||||
- Add preload/prefetch directives for critical resources
|
||||
- Implement resource prioritization
|
||||
|
||||
```astro
|
||||
<!-- Example improvement for BaseHead.astro -->
|
||||
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
|
||||
```
|
||||
|
||||
### Internationalization (i18n) Implementation
|
||||
|
||||
1. **Centralized Solution**
|
||||
- Consider adopting a more standardized i18n solution like Astro i18n or astro-i18next
|
||||
- Implement a centralized translation management system
|
||||
|
||||
2. **Content Structure**
|
||||
- Organize content by language in content collections
|
||||
- Create a clear separation between content and presentation
|
||||
|
||||
3. **URL Strategy**
|
||||
- Implement a consistent URL strategy for language variants (e.g., /en/page, /fr/page)
|
||||
- Add language metadata to improve SEO for multilingual content
|
||||
|
||||
```astro
|
||||
<!-- Example improvement for i18n handling -->
|
||||
---
|
||||
import { getLanguageFromURL } from '../utils/i18n';
|
||||
const lang = getLanguageFromURL(Astro.url.pathname);
|
||||
const translations = await import(`../i18n/${lang}.js`);
|
||||
---
|
||||
```
|
||||
|
||||
### Component Organization
|
||||
|
||||
1. **Atomic Design Principles**
|
||||
- Consider reorganizing components following atomic design principles
|
||||
- Create atoms, molecules, organisms, templates, and pages
|
||||
|
||||
2. **Documentation**
|
||||
- Add component documentation with examples
|
||||
- Create a component playground or storybook
|
||||
|
||||
3. **Naming Conventions**
|
||||
- Implement consistent naming conventions
|
||||
- Group related components in subdirectories
|
||||
|
||||
### Code Maintainability
|
||||
|
||||
1. **TypeScript Integration**
|
||||
- Add TypeScript for all component props
|
||||
- Define interfaces for data structures
|
||||
|
||||
```astro
|
||||
<!-- Example improvement with TypeScript -->
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
image?: { src: string; alt: string };
|
||||
canonicalURL?: URL;
|
||||
}
|
||||
|
||||
const { title, description, image, canonicalURL = Astro.url } = Astro.props;
|
||||
---
|
||||
```
|
||||
|
||||
2. **Code Comments**
|
||||
- Add meaningful comments for complex logic
|
||||
- Document component usage and requirements
|
||||
|
||||
3. **Consistent Formatting**
|
||||
- Implement consistent code formatting with tools like Prettier
|
||||
- Add ESLint for code quality enforcement
|
||||
|
||||
### SEO Optimization
|
||||
|
||||
1. **Structured Data**
|
||||
- Implement JSON-LD structured data for key pages
|
||||
- Add appropriate schema.org markup
|
||||
|
||||
```astro
|
||||
<!-- Example JSON-LD implementation -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
"name": "Polymech",
|
||||
"url": Astro.site.toString()
|
||||
})} />
|
||||
```
|
||||
|
||||
2. **Meta Tag Management**
|
||||
- Create a dedicated SEO component with flexible options
|
||||
- Ensure all pages have appropriate meta tags
|
||||
|
||||
3. **Performance Metrics**
|
||||
- Optimize for Core Web Vitals
|
||||
- Add monitoring for key performance metrics
|
||||
|
||||
## 5. Conclusion
|
||||
|
||||
The polymech-site project demonstrates a solid foundation using Astro's component model and static site generation capabilities. With 163 Astro files, it's a substantial project that would benefit from more structured organization principles and standardized approaches to common concerns like internationalization and SEO.
|
||||
|
||||
By implementing the suggested improvements, the project could achieve better performance, maintainability, and extensibility while leveraging Astro's strengths in creating fast, content-focused websites.
|
||||
|
||||
Key priorities should be:
|
||||
1. Optimizing asset delivery and performance
|
||||
2. Standardizing the i18n approach
|
||||
3. Enhancing component documentation and organization
|
||||
4. Improving SEO implementation with structured data
|
||||
5. Adding type safety with TypeScript
|
||||
|
||||
These changes would significantly improve the developer experience and end-user performance while making the codebase more maintainable for future development.
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
---
|
||||
import Wrapper from "@/components/containers/Wrapper.astro";
|
||||
import { getCollection } from "astro:content";
|
||||
import BaseLayout from "@/layouts/BaseLayout.astro";
|
||||
import EntriesOne from "@/components/blog/EntriesOne.astro";
|
||||
const all = await getCollection("resources")
|
||||
---
|
||||
<BaseLayout>
|
||||
|
||||
</BaseLayout>
|
||||
@ -1,24 +0,0 @@
|
||||
---
|
||||
import Wrapper from "@/components/containers/Wrapper.astro";
|
||||
import { getCollection } from "astro:content"
|
||||
import BlogLayout from "@/layouts/Resources.astro"
|
||||
export async function getStaticPaths() {
|
||||
const blogEntries = await getCollection("resources");
|
||||
const all = blogEntries.map((entry) => {
|
||||
const ret = {
|
||||
params: { slug: entry.slug },
|
||||
props: { entry },
|
||||
};
|
||||
return ret;
|
||||
});
|
||||
return all;
|
||||
}
|
||||
|
||||
const { entry } = Astro.props
|
||||
const { Content } = await entry.render()
|
||||
---
|
||||
<BlogLayout frontmatter={entry.data}>
|
||||
<Wrapper>
|
||||
<Content />
|
||||
</Wrapper>
|
||||
</BlogLayout>
|
||||
@ -6,8 +6,8 @@ const parser = new MarkdownIt()
|
||||
import { RSS_CONFIG } from '../app/config'
|
||||
|
||||
export async function GET(context) {
|
||||
const blog = await getCollection('posts')
|
||||
const store = await getCollection('store')
|
||||
const blog = []
|
||||
const store = []
|
||||
const all = [ ...blog ]
|
||||
return rss({
|
||||
site: context.site,
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
---
|
||||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||
import Overview from "@/components/system/Overview.astro";
|
||||
---
|
||||
<BaseLayout>
|
||||
<Overview />
|
||||
</BaseLayout>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
---
|
||||
import { foo, i18n as Translate } from "@polymech/astro-base"
|
||||
import Howto from "@/components/library/howto.astro"
|
||||
import test from "@/model/howto.json"
|
||||
---
|
||||
<Translate language="es">Hallo</Translate>
|
||||
<Howto howto={test} />
|
||||
<Translate language="es">Hellau</Translate>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user