feat: init starter kit

.github/workflows/deploy.yml

@@ -0,0 +1,39 @@
+name: Deploy to GitHub Pages
+
+on:
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch’s name
+  push:
+    branches: [main]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v4
+      - name: Install, build, and upload your site output
+        uses: withastro/action@v2
+        # with:
+            # path: . # The root location of your Astro project inside the repository. (optional)
+            # node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
+            # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

README.md

@@ -0,0 +1,14 @@
+# Newswire-themes-collection
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `yarn install`             | Installs dependencies                            |
+| `yarn run dev`             | Starts local dev server at `localhost:4321`      |
+| `yarn run build`           | Build your production site to `./dist/`          |
+| `yarn run preview`         | Preview your build locally, before deploying     |
+| `yarn run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `yarn run astro -- --help` | Get help using the Astro CLI                     |

astro.config.mjs

@@ -0,0 +1,12 @@
+import { defineConfig } from "astro/config";
+import tailwind from "@astrojs/tailwind";
+
+import react from "@astrojs/react";
+
+// https://astro.build/config
+export default defineConfig({
+  site: "https://paiji.github.io",
+  base: "/NetNewsWire-themes-collection",
+
+  integrations: [tailwind(),  react()]
+});

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "netnewswire-themes-collection",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/react": "^3.3.4",
+    "@astrojs/tailwind": "^5.1.0",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "astro": "^4.8.6",
+    "embla-carousel": "^8.1.1",
+    "embla-carousel-autoplay": "^8.1.1",
+    "embla-carousel-react": "^8.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5"
+  }
+}

src/assets/themes.json

@@ -0,0 +1,72 @@
+[
+  {
+    "themeTitle": "elegant-nnw",
+    "themeDescription": "A beautiful, elegant theme for NetNewsWire RSS reader.",
+    "themeThumbs": [
+      "https://github.com/ChangJun2019/elegant-nnw/raw/main/screenshots/elegant-theme-light.png",
+      "https://raw.githubusercontent.com/ChangJun2019/elegant-nnw/main/screenshots/elegant-theme-dark.png"
+    ],
+    "themeRepo": "https://github.com/ChangJun2019/elegant-nnw",
+    "themeAuthor": {
+      "name": "ChangJun2019",
+      "url": "https://github.com/ChangJun2019"
+    },
+    "themeInstallUrl": "https://github.com/ChangJun2019/elegant-nnw/releases/latest/download/Elegant.nnwtheme.zip"
+  },
+  {
+    "themeTitle": "Manu",
+    "themeDescription": "Inspired by Manuel's website, features a dignified serif, subtle box-shadows and highlighted links.",
+    "themeThumbs": [
+      "https://github.com/stealsocks/NetNewsWire-themes/raw/main/images/manu-light.png",
+      "https://github.com/stealsocks/NetNewsWire-themes/raw/main/images/manu-dark.png"
+    ],
+    "themeRepo": "https://github.com/stealsocks/NetNewsWire-themes#manu",
+    "themeAuthor": {
+      "name": "Judah",
+      "url": "https://github.com/stealsocks"
+    },
+    "themeInstallUrl": ""
+  },
+  {
+    "themeTitle": "system-ui",
+    "themeDescription": "Modern MacOS feel. SF Pro, blue links and slick font weights.",
+    "themeThumbs": [
+      "https://github.com/stealsocks/NetNewsWire-themes/raw/main/images/system-ui-lght.png",
+      "https://github.com/stealsocks/NetNewsWire-themes/raw/main/images/system-ui-dark.png"
+    ],
+    "themeRepo": "https://github.com/stealsocks/NetNewsWire-themes#system-ui",
+    "themeAuthor": {
+      "name": "Judah",
+      "url": "https://github.com/stealsocks"
+    },
+    "themeInstallUrl": ""
+  },
+  {
+    "themeTitle": "Royal",
+    "themeDescription": "System serif (New York), red underlines and justified text.",
+    "themeThumbs": [
+      "https://github.com/stealsocks/NetNewsWire-themes/raw/main/images/royal-light.png",
+      "https://github.com/stealsocks/NetNewsWire-themes/raw/main/images/royal-dark.png"
+    ],
+    "themeRepo": "https://github.com/stealsocks/NetNhttps://github.com/stealsocks/NetNewsWire-themes#royal",
+    "themeAuthor": {
+      "name": "Judah",
+      "url": "https://github.com/stealsocks"
+    },
+    "themeInstallUrl": ""
+  },
+  {
+    "themeTitle": "Slab",
+    "themeDescription": "Monochrome sections. Avenir and thick outlines.",
+    "themeThumbs": [
+      "https://github.com/stealsocks/NetNewsWire-themes/raw/main/images/slab-light.png",
+      "https://github.com/stealsocks/NetNewsWire-themes/raw/main/images/slab-dark.png"
+    ],
+    "themeRepo": "https://githubhttps://github.com/stealsocks/NetNewsWire-themes#slab",
+    "themeAuthor": {
+      "name": "Judah",
+      "url": "https://github.com/stealsocks"
+    },
+    "themeInstallUrl": ""
+  }
+]

src/assets/themes.sample.json

@@ -0,0 +1,11 @@
+{
+  "themeTitle": "",
+  "themeDescription": "",
+  "themeThumbs": [],
+  "themeRepo": "",
+  "themeAuthor": {
+    "name": "",
+    "url": ""
+  },
+  "themeInstallUrl": ""
+}

src/components/Theme.astro

@@ -0,0 +1,58 @@
+---
+interface Props {
+  title: string;
+  description: string;
+  repo: string;
+  author: {
+    name: string;
+    url: string;
+  };
+  installUrl: string;
+  themeThumbs: string[];
+}
+
+const { title, description, repo, installUrl, themeThumbs, author } =
+  Astro.props;
+
+import { EmblaCarousel } from "./react/Swiper";
+---
+
+<li class="border rounded-xl p-4 hover:bg">
+  <div class="flex gap-6">
+    <div class="w-1/2">
+      <EmblaCarousel themeThumbs={themeThumbs} client:load />
+    </div>
+
+    <div class="w-1/2 relative">
+      <a href={repo} class="inline-block">
+        <h2 class="text-3xl text-link">
+          {title}
+        </h2>
+      </a>
+      <div>
+        <a class="text-slate-700" href={author.url}>{author.name}</a>
+      </div>
+
+      <p class="mt-2">
+        {description}
+      </p>
+      <a
+        class="absolute bottom-0 text-base inline-block bg-link text-white w-full p-4 rounded-xl text-center font-bold"
+        href={`netnewswire://theme/add?url=${installUrl}`}>Install</a
+      >
+    </div>
+  </div>
+</li>
+
+<style is:global>
+  .embla {
+    overflow: hidden;
+  }
+  .embla__container {
+    display: flex;
+  }
+  .embla__slide {
+    flex: 0 0 100%;
+    min-width: 0;
+  }
+</style>

src/components/react/Swiper/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import Autoplay from "embla-carousel-autoplay";
+
+export function EmblaCarousel({ themeThumbs }: { themeThumbs: string[] }) {
+  const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay()]);
+
+  return (
+    <div className="embla" ref={emblaRef}>
+      <div className="embla__container">
+        {themeThumbs.map((thumb) => (
+          <div className="embla__slide" key={thumb}>
+            <img src={thumb} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/Footer.tsx

@@ -0,0 +1,16 @@
+import { FaGithub } from "react-icons/fa6";
+
+function Footer() {
+  return (
+    <footer className="mt-6 p-6 border-t flex justify-between">
+      <span>NetNewsWire Themes collection</span>
+      <div>
+        <a className="text-2xl" href="">
+          <FaGithub />
+        </a>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

src/layouts/Layout.astro

@@ -0,0 +1,55 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+import Footer from "./Footer";
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body class="max-w-screen-lg mx-auto">
+    <header class="flex justify-between items-center px-4 py-6 border-b">
+      <h1 class="bg-white text-3xl">
+        <a
+          class="font-bold text-link hover:underline"
+          href="https://netnewswire.com/">NetNewsWire</a
+        > themes collection
+      </h1>
+
+      <div class="text-xl">
+        <a href="">Github</a>
+      </div>
+    </header>
+    <slot />
+    <Footer />
+  </body>
+</html>
+<style is:global>
+  :root {
+    --link-color: hsl(214, 65%, 55%);
+  }
+  html {
+    /* font-family: system-ui, sans-serif; */
+  }
+  code {
+    font-family:
+      Menlo,
+      Monaco,
+      Lucida Console,
+      Liberation Mono,
+      DejaVu Sans Mono,
+      Bitstream Vera Sans Mono,
+      Courier New,
+      monospace;
+  }
+</style>