feat: macros for posts to extend page functionality

src/renderer/components/MilkdownEditor/MilkdownEditor.css

@@ -330,3 +330,180 @@
 .milkdown-content .ProseMirror:focus-visible {
   outline: none;
 }
+
+/* =================================
+   Macro Styles
+   ================================= */
+
+/* Base macro inline element in editor */
+.milkdown-macro {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  margin: 0 2px;
+  border-radius: 4px;
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 0.9em;
+  line-height: 1.4;
+  vertical-align: baseline;
+  cursor: default;
+  user-select: none;
+}
+
+/* Known (registered) macro - teal/cyan shade */
+.milkdown-macro.macro-known {
+  background-color: rgba(0, 150, 136, 0.15);
+  border: 1px solid rgba(0, 150, 136, 0.3);
+  color: var(--vscode-textLink-foreground, #3794ff);
+}
+
+/* Unknown macro - warning shade */
+.milkdown-macro.macro-unknown {
+  background-color: rgba(255, 152, 0, 0.15);
+  border: 1px solid rgba(255, 152, 0, 0.3);
+  color: var(--vscode-editorWarning-foreground, #cca700);
+}
+
+/* Hover effect */
+.milkdown-macro:hover {
+  filter: brightness(1.1);
+}
+
+/* Selected macro */
+.milkdown-macro.ProseMirror-selectednode {
+  outline: 2px solid var(--vscode-focusBorder, #007acc);
+  outline-offset: 1px;
+}
+
+/* Macro icon prefix */
+.milkdown-macro::before {
+  margin-right: 4px;
+}
+
+.milkdown-macro.macro-known::before {
+  content: "⬡";
+}
+
+.milkdown-macro.macro-unknown::before {
+  content: "⚠";
+}
+
+/* =================================
+   Rendered Macro Styles (Preview)
+   ================================= */
+
+/* Macro error display */
+.macro-error {
+  display: inline-block;
+  padding: 2px 6px;
+  background-color: rgba(255, 0, 0, 0.1);
+  border: 1px dashed rgba(255, 0, 0, 0.5);
+  border-radius: 3px;
+  color: var(--vscode-errorForeground, #f44);
+  font-family: monospace;
+  font-size: 0.85em;
+}
+
+/* Gallery macro preview */
+.macro-gallery {
+  margin: 1em 0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.macro-gallery.gallery-preview {
+  background-color: rgba(0, 150, 136, 0.08);
+  border: 1px dashed rgba(0, 150, 136, 0.3);
+  padding: 16px;
+}
+
+.macro-gallery .gallery-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  color: var(--vscode-descriptionForeground);
+}
+
+.macro-gallery .gallery-icon {
+  font-size: 2em;
+}
+
+.macro-gallery .gallery-info {
+  font-size: 0.9em;
+  font-weight: 500;
+}
+
+.macro-gallery .gallery-caption {
+  font-size: 0.85em;
+  font-style: italic;
+  opacity: 0.8;
+}
+
+/* YouTube macro preview */
+.macro-youtube {
+  margin: 1em 0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.macro-youtube.youtube-preview .youtube-thumbnail {
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  aspect-ratio: 16 / 9;
+  background-size: cover;
+  background-position: center;
+  background-color: #000;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.macro-youtube .youtube-play-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.macro-youtube .youtube-play-button {
+  width: 60px;
+  height: 42px;
+  background-color: rgba(255, 0, 0, 0.85);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.5em;
+}
+
+.macro-youtube .youtube-title {
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+  right: 8px;
+  padding: 4px 8px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  font-size: 0.85em;
+  border-radius: 4px;
+}
+
+/* YouTube iframe container */
+.macro-youtube .youtube-container {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+}
+
+.macro-youtube .youtube-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}