Brandon Thomas
0004726a36
This is a fresh start for the `artcraft` repo. The old monorepo, which included our web API gateway, job services, SRE tools, various frontends, and more has moved to `artcraft-services` You can find the full git history here: https://github.com/storytold/artcraft-services This change was motivated by the fact that the entire git history was hundreds of gigabytes in size, which is unwieldy for anyone not in the core team that doesn't care about support services outside of the core artcraft app. We wanted to keep this repo in its well-known place since we already have users and activity here. Please update your remotes to either `artcraft-services` or make a fresh clone of this repo. History can be found at the artcraft-services repo.
4.5 KiB
News Posts
This directory contains markdown files for news/blog posts that appear in the ArtCraft app and website.
Creating a New Post
- Create a new
.mdfile insrc/lib/content/news/with a URL-friendly filename (e.g.,my-new-feature.md) - Add the required frontmatter at the top of the file
- Write your content in markdown below the frontmatter
Frontmatter Template
---
title: Your Post Title
abstract: A brief description of the post (shown in the news list)
date: YYYY-MM-DD
thumbnail: https://optional-image-url.com/image.png
---
| Field | Required | Description |
|---|---|---|
title |
Yes | The title displayed in the news list and post header |
abstract |
Yes | Short description shown in the news list preview |
date |
Yes | Publication date in YYYY-MM-DD format |
thumbnail |
No | URL to an optional header image for the post |
Example Post
---
title: Welcome to the ArtCraft Blog
abstract: We are excited to launch our new blog where we will share updates and tutorials.
date: 2026-01-16
thumbnail: https://example.com/blog-header.png
---
# Hello World!
Welcome to the official **ArtCraft Blog**. This is where we'll be posting about:
- **New Features**: Be the first to know about the latest tools.
- **Tutorials**: Learn how to get the most out of ArtCraft.
- **Community Showcases**: Highlighting amazing work created by our users.
## Stay Tuned
We have a lot of exciting things in the pipeline!
Building the News Feed
The news posts are compiled into a news.json file that is served to the app.
Automatic Build (Dev Server)
When you run the dev server, news posts are automatically compiled:
npx nx dev artcraft-website
Manual Build
To manually regenerate news.json:
cd frontend
node scripts/generate-news-json.mjs
This will output the compiled JSON to:
frontend/apps/artcraft-website/public/news.json
How It Works
- The
generate-news-json.mjsscript reads all.mdfiles from the news content directory - It parses the frontmatter and body content
- It generates a sorted JSON array (newest first by date)
- The JSON is saved to the website's
public/folder - The app fetches this JSON to display the news feed
Tips
- Filename = Slug: The filename (without
.md) becomes the URL slug for the post - Sorting: Posts are automatically sorted by date, newest first
- Markdown Support: Full markdown is supported including headers, lists, bold, italic, images, and code blocks
- Hot Reload: After adding/editing a post, restart the dev server to see changes (or run the build script manually)
Embedding Videos
YouTube Videos
Embed YouTube videos using the @youtube() syntax. You can use either a video ID or a full URL:
@youtube(dQw4w9WgXcQ)
@youtube(https://www.youtube.com/watch?v=dQw4w9WgXcQ)
@youtube(https://youtu.be/dQw4w9WgXcQ)
All of the above will embed the same YouTube video. Supported URL formats:
youtube.com/watch?v=VIDEO_IDyoutu.be/VIDEO_IDyoutube.com/embed/VIDEO_IDyoutube.com/shorts/VIDEO_ID
Regular Videos
Embed regular video files (mp4, webm, etc.) using the @video() syntax:
@video(https://example.com/my-video.mp4)
@video(/videos/demo.webm)
Alternatively, you can use standard image syntax with a video file extension. The parser will automatically detect video files and render them as videos:
Supported video formats: .mp4, .webm, .ogg, .mov, .m4v, .avi
Images and GIFs
Embed images or GIFs with controllable sizes. You can use standard markdown syntax with a pipe | or a dedicated tag:
Standard Markdown with Size
Dedicated Tags
@image(https://example.com/image.png, 300)
@gif(https://example.com/animation.gif, 400x300)
Size Formats:
- Width only:
300(defaults to pixels) or50% - Width and Height:
400x300
If the width is less than 100%, the image will be automatically centered. By default (if no size is specified), images and GIFs will take up 100% of the container width. All images have a maximum width of 100% to ensure they stay within the blog container.