Add letter template

marcprux · marcprux · commit 2161d546e8e4 · 2026-02-09T20:30:05.000-05:00
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -4,6 +4,7 @@ import { remarkHeadingId } from "remark-custom-heading-id";
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeExternalLinks from "rehype-external-links";
+import yaml from '@rollup/plugin-yaml';
 
 export default defineConfig({
   site: 'https://keepandroidopen.org',
@@ -14,6 +15,9 @@ export default defineConfig({
       prefixDefaultLocale: false,
     },
   },
+  vite: {
+    plugins: [yaml()]
+  },
   markdown: {
     remarkPlugins: [remarkHeadingId, remarkKramdownClasses],
     rehypePlugins: [[rehypeExternalLinks, {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,5 +14,8 @@
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",
     "remark-custom-heading-id": "^2.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-yaml": "^4.1.2"
   }
 }
diff --git a/src/content/pages/en/index.md b/src/content/pages/en/index.md
@@ -13,6 +13,8 @@ site_privacy: "**Privacy:** This site uses no cookies and performs no user track
 site_copyright: "**Copyright:** None. This work is marked"
 
 lockdown_banner: "Android will become a locked-down platform"
+open_letter_header: "Open Letter"
+open_letter_description: "An open letter to advocate for Android as a free, open platform."
 ---
 
 In August 2025, Google [announced](https://developer.android.com/developer-verification) that as of September 2026,
diff --git a/src/data/signatures.yaml b/src/data/signatures.yaml
@@ -0,0 +1,6 @@
+- name: John Doe
+  title: Software Engineer
+  organization: Example Corp
+- name: Jane Smith
+  title: Community Organizer
+  organization: Advocacy Group
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
@@ -14,6 +14,8 @@ interface Props {
   site_privacy: string;
   site_copyright: string;
   lockdown_banner: string;
+  open_letter_header: string;
+  open_letter_description: string;
 }
 
 const {
@@ -28,6 +30,8 @@ const {
   site_privacy,
   site_copyright,
   lockdown_banner,
+  open_letter_header,
+  open_letter_description,
 } = Astro.props;
 
 const languageEntries = Object.entries(languages);
@@ -51,17 +55,14 @@ const languageEntries = Object.entries(languages);
   <meta name="twitter:image" content="https://keepandroidopen.org/img/altered-deal.png">
   <link rel="me" href="https://techhub.social/@keepandroidopen">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
-
-  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css"> -->
   <style is:global>
-  
     main {
       max-width: 1200px;
       margin-left: auto;
       margin-right: auto;
       padding: 2em;
     }
-    
+
     h1 {
       /* font-size: 46px; */
       /* font-weight: 600; */
@@ -199,7 +200,7 @@ const languageEntries = Object.entries(languages);
       padding: 1rem 2rem; */
       background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%);
       border-bottom: 4px solid #801313;
-      
+
       /* Text Styling */
       color: #ffffff;
       font-family: 'Arial Black', sans-serif;
@@ -208,7 +209,7 @@ const languageEntries = Object.entries(languages);
       letter-spacing: 2px;
       font-size: 1.5rem;
       text-align: center;
-    
+
       /* The 3D Depth & Shadow Effect */
       /* Format: x-offset y-offset blur color */
       text-shadow: 
@@ -217,17 +218,17 @@ const languageEntries = Object.entries(languages);
         0px 3px 0px #751111,
         0px 4px 0px #5e0d0d,
         0px 6px 10px rgba(0, 0, 0, 0.5);
-    
+
       /* Animation to draw attention */
       animation: pulse-alert 2s infinite;
-    
+
     @keyframes pulse-alert {
       0% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.7); }
       70% { box-shadow: 0 0 0 15px rgba(211, 47, 47, 0); }
       100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); }
     }
-    
-    }
+
+  }
   </style>
 </head>
 <body>
@@ -254,11 +255,9 @@ const languageEntries = Object.entries(languages);
         <h4 style="margin-top: 0; margin-bottom: 10px; font-size: 16px;">
           {contact_header}
         </h4>
-        <ul style="list-style: none; padding: 0; margin: 0;">
-          <li style="margin-bottom: 5px;">{contact_email}: <a href="mailto:info@keepandroidopen.org" style="text-decoration: none;">info@keepandroidopen.org</a></li>
-        </ul>
-        <ul style="list-style: none; padding: 0; margin: 0;">
-          <li style="margin-bottom: 5px;">{site_problems_header}: <a href="https://github.com/keepandroidopen/keepandroidopen.github.io/issues" style="text-decoration: none;">{site_report_issues}</a></li>
+        <ul style="padding: 0; margin: 0;">
+          <li style="list-style: none; margin-bottom: 5px;">{contact_email}: <a href="mailto:info@keepandroidopen.org" style="text-decoration: none;">info@keepandroidopen.org</a></li>
+          <li style="list-style: none; margin-bottom: 5px;">{site_problems_header}: <a href="https://github.com/keepandroidopen/keepandroidopen.github.io/issues" style="text-decoration: none;">{site_report_issues}</a></li>
         </ul>
       </div>
       <div style="flex: 3; min-width: 300px; margin: 20px;">
@@ -317,42 +316,42 @@ const languageEntries = Object.entries(languages);
       
       return `${trimConjunction ? "" : prefix}${segments}`;
     }
-    
+  
     // Set the date we're counting down to
     var countDownDate = new Date("Sep 1, 2026 00:00:00").getTime();
 
     function updateBanner() {
       // Get today's date and time
       var now = new Date().getTime();
-    
+
       // Find the distance between now and the count down date
       var distance = countDownDate - now;
-    
+
       // Time calculations for days, hours, minutes and seconds
       var days = Math.floor(distance / (1000 * 60 * 60 * 24));
       var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
       var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
       var seconds = Math.floor((distance % (1000 * 60)) / 1000);
-    
+
       const locale = document.documentElement.lang; // navigator.language; // Detects browser language (e.g., 'en-US');
-    
+
       var remaining = [
         days > 0 ? getLocalizedUnit(days, 'day', locale, false) : '',
-        hours > 0 ? getLocalizedUnit(hours, 'hour', locale, true) : '',
-        minutes > 0 ? getLocalizedUnit(minutes, 'minute', locale, true) : '',
+        hours > 0 || days > 0 ? getLocalizedUnit(hours, 'hour', locale, true) : '',
+        minutes > 0 || hours > 0 || days > 0 ? getLocalizedUnit(minutes, 'minute', locale, true) : '',
         getLocalizedUnit(seconds, 'second', locale, true)
       ].filter(Boolean).join(' ');
-    
+
       // Display the result in the element with id="countdown"
       document.getElementById("countdown").innerHTML = remaining;
-    
+
       // // If the count down is finished, write some text
       // if (distance < 0) {
       //   clearInterval(x);
       //   document.getElementById("countdown").innerHTML = "EXPIRED";
       // }
     }
-    
+
     // Update the count down every 1 second
     setInterval(updateBanner, 1000);
     updateBanner();
diff --git a/src/pages/letter.astro b/src/pages/letter.astro
@@ -0,0 +1,34 @@
+---
+import Default from "../layouts/Default.astro";
+import { getCollection } from "astro:content";
+
+const page = (await getCollection("pages", ({ id }) => id.startsWith("en/")))[0];
+---
+
+<Default {...page.data}>
+  <article class="prose dark:prose-invert">
+    <h1>Open Letter</h1>
+    <p>Dear recipient,</p>
+    <p>This is a template for an open letter.</p>
+    <p>Sincerely,</p>
+    <div class="signatures-block">
+      <h2>Signatures</h2>
+      <ul id="signatures-list"></ul>
+    </div>
+  </article>
+</Default>
+
+<script>
+  import signatures from "../data/signatures.yaml";
+
+  const signaturesList = document.getElementById("signatures-list");
+
+  signatures.forEach(signature => {
+    const listItem = document.createElement("li");
+    listItem.innerHTML = `
+      <strong>${signature.name}</strong><br>
+      ${signature.title}, ${signature.organization}
+    `;
+    signaturesList.appendChild(listItem);
+  });
+</script>

Original file line number	Diff line number	Diff line change
`@@ -14,5 +14,8 @@`
`14`	`14`	`"rehype-external-links": "^3.0.0",`
`15`	`15`	`"rehype-slug": "^6.0.0",`
`16`	`16`	`"remark-custom-heading-id": "^2.0.0"`
	`17`	`+ },`
	`18`	`+ "devDependencies": {`
	`19`	`+ "@rollup/plugin-yaml": "^4.1.2"`
`17`	`20`	`}`
`18`	`21`	`}`