Adam 1 bulan lalu
induk
melakukan
2a681e8f74
5 mengubah file dengan 203 tambahan dan 186 penghapusan
  1. 2 3
      index.html
  2. 0 0
      public/posts/20251213-hey-there.md
  3. 1 1
      public/posts/index.json
  4. 11 2
      src/App.jsx
  5. 189 180
      src/index.css

+ 2 - 3
index.html

@@ -4,11 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>The Goonblog</title>
-    <!-- Add this line below -->
-    <link href="/src/style.css" rel="stylesheet">
+
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
-</html>
+</html>

+ 0 - 0
public/posts/20251025-hey-there.md → public/posts/20251213-hey-there.md


+ 1 - 1
public/posts/index.json

@@ -1,3 +1,3 @@
 [
-  "20251025-hey-there.md"
+  "20251213-hey-there.md"
 ]

+ 11 - 2
src/App.jsx

@@ -251,7 +251,7 @@ function PostView() {
     useEffect(() => {
         if (post) {
             const setMeta = (name, content) => {
-                let element = document.querySelector(`meta[name='${name}']`);
+                let element = document.querySelector(`meta[name="${name}"]`);
                 if (!element) {
                     element = document.createElement("meta");
                     element.setAttribute("name", name);
@@ -264,6 +264,10 @@ function PostView() {
             setMeta("og:description", post.description);
             setMeta("og:type", "article");
             setMeta("og:url", window.location.href);
+            setMeta("twitter:title", post.title);
+            setMeta("twitter:description", post.description);
+            setMeta("twitter:card", "summary");
+            setMeta("twitter:url", window.location.href);
         }
 
         return () => {
@@ -273,9 +277,14 @@ function PostView() {
                 "og:type",
                 "og:url",
                 "og:image",
+                "twitter:title",
+                "twitter:description",
+                "twitter:card",
+                "twitter:url",
+                "twitter:image",
             ];
             metaTags.forEach((name) => {
-                const element = document.querySelector(`meta[name='${name}']`);
+                const element = document.querySelector(`meta[name="${name}"]`);
                 if (element) {
                     element.remove();
                 }

+ 189 - 180
src/index.css

@@ -4,13 +4,16 @@
  * so we must set this explicitly. This allows Tailwind's min-h-screen to work correctly.
  */
 
- @import "tailwindcss";
+@import "tailwindcss";
+@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap");
 
-html, body, #root {
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  padding: 0;
+html,
+body,
+#root {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
 }
 
 /*
@@ -18,242 +21,245 @@ html, body, #root {
  * You can customize the font and background color here.
  */
 body {
-  font-family: var(--font-body), 'Inter', sans-serif;
-  background-color: var(--color-background, #f7fafc); /* A light gray background color */
-  color: var(--color-text, #1f2937);
+    font-family: var(--font-body), "Inter", "Noto Color Emoji", sans-serif;
+    background-color: var(
+        --color-background,
+        #f7fafc
+    ); /* A light gray background color */
+    color: var(--color-text, #1f2937);
 }
 
 .markdown-content table {
-  display: table;
-  width: auto; /* prevent stretching full screen */
-  max-width: max-content;
+    display: table;
+    width: auto; /* prevent stretching full screen */
+    max-width: max-content;
 }
 
 .markdown-content {
-  line-height: 1.7;
-  font-size: 1rem;
-  color: var(--color-text, #000000);
+    line-height: 1.7;
+    font-size: 1rem;
+    color: var(--color-text, #000000);
 }
 
 /* Headings */
 .markdown-content h1 {
-  font-size: 2.25rem; /* 36px */
-  font-weight: 800;
-  margin-top: 2.5rem;
-  margin-bottom: 1rem;
-  color: var(--color-text, #000000);
+    font-size: 2.25rem; /* 36px */
+    font-weight: 800;
+    margin-top: 2.5rem;
+    margin-bottom: 1rem;
+    color: var(--color-text, #000000);
 }
 .markdown-content h2 {
-  font-size: 1.75rem;
-  font-weight: 700;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  color: var(--color-text, #000000);
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    color: var(--color-text, #000000);
 }
 .markdown-content h3 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-top: 1.75rem;
-  margin-bottom: 0.75rem;
-  color: var(--color-text, #000000);
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-top: 1.75rem;
+    margin-bottom: 0.75rem;
+    color: var(--color-text, #000000);
 }
 .markdown-content h4,
 .markdown-content h5,
 .markdown-content h6 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-top: 1.5rem;
-  margin-bottom: 0.5rem;
-  color: var(--color-text, #000000);
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    color: var(--color-text, #000000);
 }
 
 /* Paragraphs */
 .markdown-content p {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
 }
 
 /* Blockquotes */
 .markdown-content blockquote {
-  border-left: 4px solid var(--color-primary, #3b82f6);
-  padding-left: 1rem;
-  margin: 1.5rem 0;
-  color: var(--color-text-secondary, #9ca3af);
-  font-style: italic;
+    border-left: 4px solid var(--color-primary, #3b82f6);
+    padding-left: 1rem;
+    margin: 1.5rem 0;
+    color: var(--color-text-secondary, #9ca3af);
+    font-style: italic;
 }
 
 /* Lists */
 .markdown-content ul,
 .markdown-content ol {
-  margin: 1.25rem 0 1.25rem 1.5rem;
-  padding-left: 1rem;
+    margin: 1.25rem 0 1.25rem 1.5rem;
+    padding-left: 1rem;
 }
 .markdown-content ul {
-  list-style-type: disc;
+    list-style-type: disc;
 }
 .markdown-content ol {
-  list-style-type: decimal;
+    list-style-type: decimal;
 }
 .markdown-content li {
-  margin: 0.5rem 0;
+    margin: 0.5rem 0;
 }
 .markdown-content li > ul,
 .markdown-content li > ol {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
 }
 
 /* Horizontal Rule */
 .markdown-content hr {
-  border: none;
-  border-top: 1px solid var(--color-border, #4b5563);
-  margin: 2rem 0;
+    border: none;
+    border-top: 1px solid var(--color-border, #4b5563);
+    margin: 2rem 0;
 }
 
 /* Code blocks */
 .markdown-content pre {
-  background-color: var(--color-surface, #1f2937);
-  padding: 1rem;
-  border-radius: 0.5rem;
-  overflow-x: auto;
-  margin: 1.5rem 0;
-  border: 1px solid var(--color-border, #374151);
+    background-color: var(--color-surface, #1f2937);
+    padding: 1rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    margin: 1.5rem 0;
+    border: 1px solid var(--color-border, #374151);
 }
 .markdown-content pre code {
-  background: none;
-  color: var(--color-text, #e5e7eb);
-  padding: 0;
-  font-size: 0.9rem;
+    background: none;
+    color: var(--color-text, #e5e7eb);
+    padding: 0;
+    font-size: 0.9rem;
 }
 
 /* Inline code */
 .markdown-content code {
-  font-family: 'Courier New', Courier, monospace;
-  background-color: var(--color-surface, #374151);
-  color: var(--color-accent, #a7f3d0);
-  padding: 0.2em 0.4em;
-  border-radius: 0.25rem;
+    font-family: "Courier New", "Noto Color Emoji", Courier, monospace;
+    background-color: var(--color-surface, #374151);
+    color: var(--color-accent, #a7f3d0);
+    padding: 0.2em 0.4em;
+    border-radius: 0.25rem;
 }
 
 /* Emphasis */
 .markdown-content em {
-  font-style: italic;
-  color: var(--color-text, #000000);
+    font-style: italic;
+    color: var(--color-text, #000000);
 }
 .markdown-content strong {
-  font-weight: 700;
-  color: var(--color-text, #000000);
+    font-weight: 700;
+    color: var(--color-text, #000000);
 }
 
 /* Links */
 .markdown-content a {
-  color: var(--color-primary, #3b82f6);
-  text-decoration: underline;
+    color: var(--color-primary, #3b82f6);
+    text-decoration: underline;
 }
 .markdown-content a:hover {
-  color: var(--color-secondary, #60a5fa);
+    color: var(--color-secondary, #60a5fa);
 }
 
 /* Images */
 .markdown-content img {
-  display: block;
-  width: 100%;
-  border-radius: 0.5rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+    display: block;
+    width: 100%;
+    border-radius: 0.5rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
 }
 
 /* Tables */
 .markdown-content table {
-  border-collapse: collapse;
-  margin: 2rem 0;
-  width: 100%;
-  font-size: 0.95rem;
+    border-collapse: collapse;
+    margin: 2rem 0;
+    width: 100%;
+    font-size: 0.95rem;
 }
 .markdown-content th,
 .markdown-content td {
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--color-border, #4b5563);
-  text-align: left;
-  vertical-align: top;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--color-border, #4b5563);
+    text-align: left;
+    vertical-align: top;
 }
 .markdown-content th {
-  background-color: var(--color-surface, #777777);
-  font-weight: 600;
-  color: var(--color-text, #f3f4f6);
+    background-color: var(--color-surface, #777777);
+    font-weight: 600;
+    color: var(--color-text, #f3f4f6);
 }
 
 /* Strikethrough */
 .markdown-content del,
 .markdown-content s {
-  text-decoration: line-through;
-  color: var(--color-text-secondary, #9ca3af);
+    text-decoration: line-through;
+    color: var(--color-text-secondary, #9ca3af);
 }
 
 .headercontainer {
-  padding-left: 2rem;
-  padding-right: 2rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
 }
 
 /* Standard HTML elements support */
 .markdown-content sub {
-  font-size: 0.8em;
-  vertical-align: sub;
+    font-size: 0.8em;
+    vertical-align: sub;
 }
 .markdown-content sup {
-  font-size: 0.8em;
-  vertical-align: super;
+    font-size: 0.8em;
+    vertical-align: super;
 }
 
 /* Details/Summary for collapsible content */
 .markdown-content details {
-  border: 1px solid var(--color-border, #d1d5db);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin: 1rem 0;
-  background-color: var(--color-surface, #f9fafb);
+    border: 1px solid var(--color-border, #d1d5db);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin: 1rem 0;
+    background-color: var(--color-surface, #f9fafb);
 }
 
 .markdown-content details summary {
-  cursor: pointer;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-  color: var(--color-text, #374151);
+    cursor: pointer;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: var(--color-text, #374151);
 }
 
 .markdown-content details[open] {
-  background-color: var(--color-background, #f3f4f6);
+    background-color: var(--color-background, #f3f4f6);
 }
 
 .markdown-content details[open] summary {
-  margin-bottom: 1rem;
-  border-bottom: 1px solid var(--color-border, #d1d5db);
-  padding-bottom: 0.5rem;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid var(--color-border, #d1d5db);
+    padding-bottom: 0.5rem;
 }
 
 /* Footnotes */
 .markdown-content sup a {
-  font-size: 0.75em;
-  vertical-align: super;
-  color: var(--color-primary, #3b82f6);
+    font-size: 0.75em;
+    vertical-align: super;
+    color: var(--color-primary, #3b82f6);
 }
 .markdown-content .footnotes {
-  font-size: 0.9rem;
-  border-top: 1px solid var(--color-border, #4b5563);
-  margin-top: 2rem;
-  padding-top: 1rem;
+    font-size: 0.9rem;
+    border-top: 1px solid var(--color-border, #4b5563);
+    margin-top: 2rem;
+    padding-top: 1rem;
 }
 .markdown-content .footnotes ol {
-  list-style-type: decimal;
-  margin-left: 1.5rem;
+    list-style-type: decimal;
+    margin-left: 1.5rem;
 }
 .markdown-content .footnotes li {
-  margin: 0.5rem 0;
+    margin: 0.5rem 0;
 }
 
 /* Standard alert/callout styling using blockquotes with emoji */
 .markdown-content blockquote p:first-child:before {
-  /* This will style blockquotes that start with emoji as callouts */
+    /* This will style blockquotes that start with emoji as callouts */
 }
 
 /* You can use standard blockquotes for callouts:
@@ -264,43 +270,46 @@ body {
 
 /* WYSIWYG Editor Styling */
 .w-md-editor {
-  background-color: white;
+    background-color: white;
 }
 
 .w-md-editor-text-textarea,
 .w-md-editor-text {
-  font-size: 14px !important;
-  font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', 'Roboto Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
+    font-size: 14px !important;
+    font-family:
+        ui-monospace, SFMono-Regular, "Cascadia Code", "Roboto Mono", Menlo,
+        Monaco, Consolas, "Noto Color Emoji", "Liberation Mono", "Courier New",
+        monospace !important;
 }
 
 .w-md-editor-preview {
-  background-color: white;
+    background-color: white;
 }
 
 /* Custom toolbar styling */
 .w-md-editor-toolbar {
-  border-bottom: 1px solid #e5e7eb;
-  background-color: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+    background-color: #f9fafb;
 }
 
 .w-md-editor-toolbar-child button {
-  color: #374151;
+    color: #374151;
 }
 
 .w-md-editor-toolbar-child button:hover {
-  background-color: #e5e7eb;
+    background-color: #e5e7eb;
 }
 
 /* Editor content area */
 .w-md-editor-text-container {
-  border: none !important;
+    border: none !important;
 }
 
 /* Preview styling to match our markdown content */
 .w-md-editor-preview .wmde-markdown {
-  padding: 16px;
-  color: #374151;
-  line-height: 1.75;
+    padding: 16px;
+    color: #374151;
+    line-height: 1.75;
 }
 
 .w-md-editor-preview .wmde-markdown h1,
@@ -309,117 +318,117 @@ body {
 .w-md-editor-preview .wmde-markdown h4,
 .w-md-editor-preview .wmde-markdown h5,
 .w-md-editor-preview .wmde-markdown h6 {
-  color: #1f2937;
-  font-weight: 700;
+    color: #1f2937;
+    font-weight: 700;
 }
 
 .w-md-editor-preview .wmde-markdown code {
-  background-color: #f3f4f6;
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-size: 0.875em;
+    background-color: #f3f4f6;
+    padding: 2px 4px;
+    border-radius: 4px;
+    font-size: 0.875em;
 }
 
 .w-md-editor-preview .wmde-markdown pre {
-  background-color: #f3f4f6;
-  border-radius: 8px;
-  padding: 16px;
+    background-color: #f3f4f6;
+    border-radius: 8px;
+    padding: 16px;
 }
 
 .w-md-editor-preview .wmde-markdown blockquote {
-  border-left: 4px solid #3b82f6;
-  padding-left: 16px;
-  margin: 16px 0;
-  font-style: italic;
-  color: #6b7280;
+    border-left: 4px solid #3b82f6;
+    padding-left: 16px;
+    margin: 16px 0;
+    font-style: italic;
+    color: #6b7280;
 }
 
 .w-md-editor-preview .wmde-markdown table {
-  border-collapse: collapse;
-  width: 100%;
-  margin: 16px 0;
+    border-collapse: collapse;
+    width: 100%;
+    margin: 16px 0;
 }
 
 .w-md-editor-preview .wmde-markdown table th,
 .w-md-editor-preview .wmde-markdown table td {
-  border: 1px solid #d1d5db;
-  padding: 8px 12px;
-  text-align: left;
+    border: 1px solid #d1d5db;
+    padding: 8px 12px;
+    text-align: left;
 }
 
 .w-md-editor-preview .wmde-markdown table th {
-  background-color: #f9fafb;
-  font-weight: 600;
+    background-color: #f9fafb;
+    font-weight: 600;
 }
 
 /* Tab styling */
 .w-md-editor-tab {
-  background-color: #f3f4f6 !important;
-  color: #6b7280 !important;
-  border: 1px solid #d1d5db !important;
+    background-color: #f3f4f6 !important;
+    color: #6b7280 !important;
+    border: 1px solid #d1d5db !important;
 }
 
 .w-md-editor-tab.active {
-  background-color: white !important;
-  color: #1f2937 !important;
-  border-bottom-color: white !important;
+    background-color: white !important;
+    color: #1f2937 !important;
+    border-bottom-color: white !important;
 }
 
 /* Theme-aware utility classes */
 .theme-bg {
-  background-color: var(--color-background, #ffffff);
+    background-color: var(--color-background, #ffffff);
 }
 
 .theme-surface {
-  background-color: var(--color-surface, #ffffff);
+    background-color: var(--color-surface, #ffffff);
 }
 
 .theme-text {
-  color: var(--color-text, #1f2937);
+    color: var(--color-text, #1f2937);
 }
 
 .theme-text-secondary {
-  color: var(--color-text-secondary, #6b7280);
+    color: var(--color-text-secondary, #6b7280);
 }
 
 .theme-primary {
-  color: var(--color-primary, #3b82f6);
+    color: var(--color-primary, #3b82f6);
 }
 
 .theme-bg-primary {
-  background-color: var(--color-primary, #3b82f6);
+    background-color: var(--color-primary, #3b82f6);
 }
 
 .theme-secondary {
-  color: var(--color-secondary, #8b5cf6);
+    color: var(--color-secondary, #8b5cf6);
 }
 
 .theme-accent {
-  color: var(--color-accent, #10b981);
+    color: var(--color-accent, #10b981);
 }
 
 .theme-border {
-  border-color: var(--color-border, #d1d5db);
+    border-color: var(--color-border, #d1d5db);
 }
 
 /* Button variants */
 .btn-theme-primary {
-  background-color: var(--color-primary, #3b82f6);
-  color: white;
-  border: 1px solid var(--color-primary, #3b82f6);
+    background-color: var(--color-primary, #3b82f6);
+    color: white;
+    border: 1px solid var(--color-primary, #3b82f6);
 }
 
 .btn-theme-primary:hover {
-  background-color: var(--color-secondary, #1d4ed8);
-  border-color: var(--color-secondary, #1d4ed8);
+    background-color: var(--color-secondary, #1d4ed8);
+    border-color: var(--color-secondary, #1d4ed8);
 }
 
 .btn-theme-secondary {
-  background-color: var(--color-secondary, #8b5cf6);
-  color: white;
-  border: 1px solid var(--color-secondary, #8b5cf6);
+    background-color: var(--color-secondary, #8b5cf6);
+    color: white;
+    border: 1px solid var(--color-secondary, #8b5cf6);
 }
 
 .btn-theme-secondary:hover {
-  opacity: 0.9;
+    opacity: 0.9;
 }