├── .prettierignore ├── public ├── favicon.ico └── vercel.svg ├── .eslintrc.json ├── postcss.config.js ├── tailwind.config.js ├── next-env.d.ts ├── next.config.js ├── pages ├── _app.tsx ├── index.tsx └── articles │ └── [issueNumber].tsx ├── components ├── Time.tsx └── Layout.tsx ├── README.md ├── .gitignore ├── tsconfig.json ├── styles ├── globals.scss └── markdown.scss ├── .github └── workflows │ ├── publish.yml │ └── sync.yml ├── LICENSE ├── package.json ├── scripts └── migrate_data_from_gialog_v0_to_v1.rb └── lib └── issue.ts /.prettierignore: -------------------------------------------------------------------------------- 1 | /.next/ 2 | /out/ 3 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r7kamura/gialog/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["eslint:recommended", "next/core-web-vitals", "prettier"] 3 | } 4 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./components/**/*.tsx", "./pages/**/*.tsx"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | basePath: process.env.GITHUB_REPOSITORY 4 | ? `/${process.env.GITHUB_REPOSITORY.split("/")[1]}` 5 | : "", 6 | reactStrictMode: true, 7 | }; 8 | 9 | module.exports = nextConfig; 10 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import "../styles/globals.scss"; 2 | import "../styles/markdown.scss"; 3 | import type { AppProps } from "next/app"; 4 | import Layout from "../components/Layout"; 5 | 6 | function MyApp({ Component, pageProps }: AppProps) { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | export default MyApp; 15 | -------------------------------------------------------------------------------- /components/Time.tsx: -------------------------------------------------------------------------------- 1 | import { format } from "date-fns"; 2 | 3 | export default function Time({ dateTime }: { dateTime: string }) { 4 | return ( 5 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Gialog 2 | 3 | Blog template to use GitHub Issues as article editor. 4 | 5 | ## Usage 6 | 7 | ### Set up 8 | 9 | 1. Create a new repository from [Use this template](https://github.com/r7kamura/github-issues-as-blog/generate) button above with **Include all branches** option. 10 | 2. Wait a few minutes and your blog will be deployed at `https://:user.github.io/:repo/`. 11 | 12 | ### Add article 13 | 14 | 1. Create an issue. 15 | 2. Wait a few minutes and your blog will be updated. 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | 37 | /data 38 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /styles/globals.scss: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @media (min-width: 1000px) { 6 | html { 7 | font-size: 1.6vw; 8 | } 9 | } 10 | 11 | @media (min-width: 1200px) { 12 | html { 13 | font-size: 19.2px; 14 | } 15 | } 16 | 17 | html { 18 | font-family: sans-serif; 19 | } 20 | 21 | body { 22 | line-height: 1.8; 23 | word-wrap: break-word; 24 | } 25 | 26 | a { 27 | color: rgb(0, 0, 238); 28 | 29 | @apply underline; 30 | @apply dark:text-blue-400; 31 | 32 | &:visited { 33 | color: rgb(85, 26, 139); 34 | 35 | @apply dark:text-violet-300; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: publish 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | workflow_dispatch: 8 | 9 | jobs: 10 | publish: 11 | runs-on: ubuntu-latest 12 | permissions: 13 | contents: write 14 | steps: 15 | - uses: actions/checkout@v3 16 | with: 17 | ref: main 18 | - uses: actions/checkout@v3 19 | with: 20 | path: data 21 | ref: data 22 | continue-on-error: true 23 | - uses: actions/setup-node@v2 24 | with: 25 | node-version: 16.x 26 | cache: npm 27 | - run: npm install 28 | - run: npm run export 29 | - uses: peaceiris/actions-gh-pages@v3 30 | with: 31 | github_token: ${{ secrets.GITHUB_TOKEN }} 32 | publish_dir: out 33 | -------------------------------------------------------------------------------- /pages/index.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from "next"; 2 | import Link from "next/link"; 3 | import { listIssues } from "../lib/issue"; 4 | import Time from "../components/Time"; 5 | 6 | type Props = { 7 | issues: Array; 8 | }; 9 | 10 | type Issue = any; 11 | 12 | const Home: NextPage = ({ issues }) => { 13 | return ( 14 |
15 |
    16 | {issues.map((issue) => ( 17 |
  1. 18 |
    2. 21 | ))} 22 |
23 |
24 | ); 25 | }; 26 | 27 | export default Home; 28 | 29 | export async function getStaticProps() { 30 | return { 31 | props: { 32 | issues: await listIssues(), 33 | }, 34 | }; 35 | } 36 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Ryo Nakamura 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "github-issues-as-blog", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "next build", 7 | "dev": "next dev", 8 | "export": "next build && next export", 9 | "lint": "npm run lint:next && npm run lint:prettier", 10 | "lint:next": "next lint", 11 | "lint:prettier": "prettier --write .", 12 | "start": "next start" 13 | }, 14 | "dependencies": { 15 | "date-fns": "^2.28.0", 16 | "glob": "^7.2.0", 17 | "glob-promise": "^4.2.2", 18 | "gray-matter": "^4.0.3", 19 | "next": "12.1.5", 20 | "react": "18.1.0", 21 | "react-dom": "18.1.0", 22 | "rehype-stringify": "^9.0.3", 23 | "remark": "^14.0.2", 24 | "remark-gfm": "^3.0.1", 25 | "remark-github": "^11.2.2", 26 | "remark-parse": "^10.0.1", 27 | "remark-rehype": "^10.1.0" 28 | }, 29 | "devDependencies": { 30 | "@types/node": "17.0.30", 31 | "@types/react": "18.0.8", 32 | "@types/react-dom": "18.0.3", 33 | "autoprefixer": "^10.4.7", 34 | "eslint": "8.14.0", 35 | "eslint-config-next": "12.1.5", 36 | "eslint-config-prettier": "^8.5.0", 37 | "postcss": "^8.4.14", 38 | "prettier": "^2.6.2", 39 | "sass": "^1.53.0", 40 | "tailwindcss": "^3.1.4", 41 | "typescript": "4.6.4" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /.github/workflows/sync.yml: -------------------------------------------------------------------------------- 1 | name: sync 2 | 3 | on: 4 | issue_comment: 5 | types: 6 | - created 7 | - deleted 8 | - edited 9 | issues: 10 | types: 11 | - closed 12 | - deleted 13 | - edited 14 | - labeled 15 | - opened 16 | - pinned 17 | - reopened 18 | - transferred 19 | - unlabeled 20 | - unpinned 21 | 22 | jobs: 23 | sync: 24 | runs-on: ubuntu-latest 25 | permissions: 26 | contents: write 27 | steps: 28 | - uses: actions/checkout@v3 29 | - uses: actions/checkout@v3 30 | with: 31 | path: data 32 | ref: data 33 | continue-on-error: true 34 | - uses: r7kamura/gialog-sync@v1 35 | env: 36 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 37 | - uses: peaceiris/actions-gh-pages@v3 38 | with: 39 | destination_dir: . 40 | disable_nojekyll: true 41 | force_orphan: true 42 | github_token: ${{ secrets.GITHUB_TOKEN }} 43 | publish_branch: data 44 | publish_dir: data 45 | - uses: actions/setup-node@v2 46 | with: 47 | node-version: 16.x 48 | cache: npm 49 | - run: npm install 50 | - run: npm run export 51 | - uses: peaceiris/actions-gh-pages@v3 52 | with: 53 | github_token: ${{ secrets.GITHUB_TOKEN }} 54 | publish_dir: out 55 | -------------------------------------------------------------------------------- /components/Layout.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import Link from "next/link"; 3 | import { type ReactNode } from "react"; 4 | 5 | const siteTitle = "My blog"; 6 | 7 | export default function Layout({ children }: { children: ReactNode }) { 8 | return ( 9 |
10 | 11 | {siteTitle} 12 | 13 |
14 | 23 |
24 |
25 | {children} 26 |
27 | 40 |
41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /styles/markdown.scss: -------------------------------------------------------------------------------- 1 | .markdown { 2 | h1 { 3 | font-size: 1.4rem; 4 | font-weight: bold; 5 | line-height: 1.3; 6 | margin-top: 0.5rem; 7 | } 8 | 9 | h2 { 10 | font-size: 1.3rem; 11 | margin-bottom: 0; 12 | margin-top: 6rem; 13 | } 14 | 15 | h3 { 16 | margin-top: 4rem; 17 | } 18 | 19 | hr { 20 | margin: 4rem 0; 21 | } 22 | 23 | img { 24 | backface-visibility: hidden; 25 | display: block; 26 | margin: 2rem auto; 27 | max-width: 100%; 28 | } 29 | 30 | figure { 31 | margin: 2rem 0; 32 | } 33 | 34 | figure img { 35 | margin-bottom: 0.5rem; 36 | } 37 | 38 | figcaption { 39 | color: #666; 40 | font-size: 0.9rem; 41 | text-align: center; 42 | 43 | @apply dark:text-gray-300; 44 | } 45 | 46 | p, 47 | ol, 48 | ul { 49 | margin-bottom: 1rem; 50 | margin-top: 1rem; 51 | } 52 | 53 | ol ol, 54 | ol ul, 55 | ul ol, 56 | ul ul { 57 | margin-bottom: 0; 58 | margin-top: 0; 59 | } 60 | 61 | ol { 62 | list-style-type: number; 63 | padding-left: 1.5rem; 64 | } 65 | 66 | ul { 67 | list-style-type: disc; 68 | padding-left: 1.5rem; 69 | } 70 | 71 | code { 72 | border-radius: 0.2rem; 73 | font-family: monospace; 74 | font-size: 0.8rem; 75 | background-color: #eee; 76 | padding: 0.2rem 0.4rem; 77 | 78 | @apply dark:bg-gray-800; 79 | } 80 | 81 | pre code { 82 | background-color: transparent; 83 | border-radius: 0; 84 | padding: 0; 85 | } 86 | 87 | pre { 88 | background-color: #333; 89 | color: #eee; 90 | line-height: 1.3; 91 | margin: 2rem 0; 92 | padding: 0.75rem; 93 | overflow-x: auto; 94 | 95 | @apply dark:bg-gray-800; 96 | } 97 | 98 | blockquote { 99 | border-left: 0.25rem solid #eee; 100 | color: #999; 101 | font-style: italic; 102 | margin: 1rem 0; 103 | padding-left: 1rem; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /pages/articles/[issueNumber].tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from "next"; 2 | import Head from "next/head"; 3 | import Link from "next/link"; 4 | import { 5 | getIssue, 6 | listIssues, 7 | listIssueComments, 8 | type Issue, 9 | type IssueComment, 10 | } from "../../lib/issue"; 11 | import Time from "../../components/Time"; 12 | 13 | type Props = { 14 | issue: Issue; 15 | issueComments: Array; 16 | }; 17 | 18 | const ShowArticle: NextPage = ({ issue, issueComments }) => { 19 | return ( 20 |
21 | 22 | {issue.title} 23 | 24 |
25 |
26 |
29 | 37 |
38 |
39 | {issueComments.map((issueComment) => ( 40 |
41 |
42 |
43 | ))} 44 |
45 | ); 46 | }; 47 | 48 | export default ShowArticle; 49 | 50 | export async function getStaticPaths() { 51 | const issues = await listIssues(); 52 | const paths = issues.map((issue: any) => { 53 | return { 54 | params: { 55 | issueNumber: issue.number.toString(), 56 | }, 57 | }; 58 | }); 59 | return { 60 | paths, 61 | fallback: false, 62 | }; 63 | } 64 | 65 | export async function getStaticProps({ params }: any) { 66 | const issueNumber = parseInt(params.issueNumber, 10); 67 | const issue = await getIssue({ issueNumber }); 68 | const issueComments = await listIssueComments({ issueNumber }); 69 | return { 70 | props: { 71 | issue, 72 | issueComments, 73 | }, 74 | }; 75 | } 76 | -------------------------------------------------------------------------------- /scripts/migrate_data_from_gialog_v0_to_v1.rb: -------------------------------------------------------------------------------- 1 | # This is a migration script from gialog v0 (JSON data version) from v1 (Markdown data version). 2 | # 3 | # Run this script like this: 4 | # 5 | # ``` 6 | # git pull 7 | # git checkout -t origin/data 8 | # ruby /path/to/migrate_data_from_gialog_v0_to_v1.rb 9 | # git add issues 10 | # git commit -m "Migrate data from v0 format to v1 format" 11 | # git push 12 | #```` 13 | # 14 | # Then switch gialog-sync@v0 to gialog-sync@v1 by modifying .github/workflows/sync.yml as follows: 15 | # 16 | # ``` 17 | # diff --git a/.github/workflows/sync.yml b/.github/workflows/sync.yml 18 | # index 07c99a2..7339de2 100644 19 | # --- a/.github/workflows/sync.yml 20 | # +++ b/.github/workflows/sync.yml 21 | # @@ -31,7 +31,7 @@ jobs: 22 | # path: data 23 | # ref: data 24 | # continue-on-error: true 25 | # - - uses: r7kamura/gialog-sync@v0 26 | # + - uses: r7kamura/gialog-sync@v1 27 | # env: 28 | # GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 29 | # - uses: peaceiris/actions-gh-pages@v3 30 | # ``` 31 | 32 | require 'json' 33 | require 'pathname' 34 | require 'yaml' 35 | 36 | data_path = '.' 37 | 38 | issues_data_path = "#{data_path}/issues.json" 39 | issues_data_pathname = Pathname.new(issues_data_path) 40 | issues_data_content = issues_data_pathname.read 41 | issues_data = JSON.parse(issues_data_content) 42 | 43 | issues_data['issues'].each do |issue_number, issue| 44 | issue.delete('bodyHTML') 45 | body = issue.delete('body') 46 | issue_file_content = [ 47 | issue.to_yaml, 48 | body 49 | ].join("\n---\n") 50 | issue_file_path = "#{data_path}/issues/#{issue_number}/issue.md" 51 | issue_file_pathname = Pathname.new(issue_file_path) 52 | issue_file_pathname.parent.mkpath 53 | issue_file_pathname.write(issue_file_content) 54 | end 55 | 56 | issue_comments_data_path = "#{data_path}/issue_comments.json" 57 | issue_comments_data_pathname = Pathname.new(issue_comments_data_path) 58 | issue_comments_data_content = issue_comments_data_pathname.read 59 | issue_comments_data = JSON.parse(issue_comments_data_content) 60 | 61 | issue_comments_data['issue_comments'].each do |issue_number, hash| 62 | hash.each do |issue_comment_id, issue_comment| 63 | issue_comment.delete('bodyHTML') 64 | body = issue_comment.delete('body') 65 | issue_comment_file_content = [ 66 | issue_comment.to_yaml, 67 | body 68 | ].join("\n---\n") 69 | issue_comment_file_path = "#{data_path}/issues/#{issue_number}/issue_comments/#{issue_comment_id}.md" 70 | issue_comment_file_pathname = Pathname.new(issue_comment_file_path) 71 | issue_comment_file_pathname.parent.mkpath 72 | issue_comment_file_pathname.write(issue_comment_file_content) 73 | end 74 | end 75 | -------------------------------------------------------------------------------- /lib/issue.ts: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | import glob from "glob-promise"; 3 | import matter from "gray-matter"; 4 | import { remark } from "remark"; 5 | import remarkGfm from "remark-gfm"; 6 | import remarkGithub from "remark-github"; 7 | import remarkParse from "remark-parse"; 8 | import remarkRehype from "remark-rehype"; 9 | import rehypeStringify from "rehype-stringify"; 10 | 11 | export type Issue = any; 12 | 13 | export type IssueComment = any; 14 | 15 | const dataDirectoryPath = process.env.DATA_DIRECTORY_PATH || "./data"; 16 | 17 | export async function getIssue({ issueNumber }: { issueNumber: number }) { 18 | const filePath = `${dataDirectoryPath}/issues/${issueNumber}/issue.md`; 19 | const content = fs.readFileSync(filePath, { encoding: "utf-8" }); 20 | const issueMatter = matter(content); 21 | const body = issueMatter.content; 22 | const bodyHTML = await renderMarkdown(body); 23 | return { 24 | body, 25 | bodyHTML, 26 | ...issueMatter.data, 27 | }; 28 | } 29 | 30 | export async function listIssues() { 31 | const paths = await glob.promise(`${dataDirectoryPath}/issues/*/issue.md`); 32 | return paths 33 | .map((filePath) => { 34 | const content = fs.readFileSync(filePath, { encoding: "utf-8" }); 35 | const issueMatter = matter(content); 36 | const body = issueMatter.content; 37 | return { 38 | body, 39 | ...issueMatter.data, 40 | }; 41 | }) 42 | .sort(byCreatedAt) 43 | .reverse(); 44 | } 45 | 46 | export async function listIssueComments({ 47 | issueNumber, 48 | }: { 49 | issueNumber: number; 50 | }) { 51 | const paths = await glob.promise( 52 | `${dataDirectoryPath}/issues/${issueNumber}/issue_comments/*.md` 53 | ); 54 | const issueComments = await Promise.all( 55 | paths.map(async (filePath: string) => { 56 | const content = fs.readFileSync(filePath, { encoding: "utf-8" }); 57 | const issueMatter = matter(content); 58 | const body = issueMatter.content; 59 | const bodyHTML = await renderMarkdown(body); 60 | return { 61 | body, 62 | bodyHTML, 63 | ...issueMatter.data, 64 | }; 65 | }) 66 | ); 67 | return issueComments.sort(byCreatedAt); 68 | } 69 | 70 | function byCreatedAt(a: any, b: any) { 71 | if (a.created_at < b.created_at) { 72 | return -1; 73 | } else if (a.created_at > b.created_at) { 74 | return 1; 75 | } else { 76 | return 0; 77 | } 78 | } 79 | 80 | async function renderMarkdown(content: string) { 81 | const result = await remark() 82 | .use(remarkParse) 83 | .use(remarkGfm) 84 | .use(remarkGithub, { 85 | repository: process.env.GITHUB_REPOSITORY || "github/dummy", 86 | }) 87 | .use(remarkRehype) 88 | .use(rehypeStringify) 89 | .use(remarkGfm) 90 | .process(content); 91 | return result.toString(); 92 | } 93 | --------------------------------------------------------------------------------