v0: Hackernews clone ft. FastHTML (read-only)

.gitignore

@@ -0,0 +1,151 @@
+.quarto
+.sesskey
+*.db-*
+*.db
+.gitattributes
+_proc/
+sidebar.yml
+Gemfile.lock
+token
+_docs/
+conda/
+.last_checked
+.gitconfig
+*.bak
+*.log
+*~
+~*
+_tmp*
+tmp*
+tags
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+env/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+.hypothesis/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# pyenv
+.python-version
+
+# celery beat schedule file
+celerybeat-schedule
+
+# SageMath parsed files
+*.sage.py
+
+# dotenv
+.env
+
+# virtualenv
+.venv
+venv/
+ENV/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+
+.vscode
+*.swp
+
+# osx generated files
+.DS_Store
+.DS_Store?
+.Trashes
+ehthumbs.db
+Thumbs.db
+.idea
+
+# pytest
+.pytest_cache
+
+# tools/trust-doc-nbs
+docs_src/.last_checked
+
+# symlinks to fastai
+docs_src/fastai
+tools/fastai
+
+# link checker
+checklink/cookies.txt
+
+# .gitconfig is now autogenerated
+.gitconfig
+
+_docs

Dockerfile

@@ -0,0 +1,6 @@
+FROM python:3.10
+WORKDIR /code
+COPY --link --chown=1000 . .
+RUN pip install --no-cache-dir -r requirements.txt
+ENV PYTHONUNBUFFERED=1 PORT=7860
+CMD ["python", "main.py"]

README.md

@@ -0,0 +1,19 @@
+# Hackernews clone ft. FastHTML (read-only)
+
+This is a lightweight, read-only clone of Hacker News built with FastHTML. It provides a simple interface to browse Hacker News stories and comments.
+
+## Features
+
+- View top stories on the home page
+- Infinite scroll to load more stories
+- View individual story pages with comments
+- Responsive design
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Acknowledgements
+
+- Hacker News: https://news.ycombinator.com/
+- Unofficial Hacker News API: https://github.com/cheeaun/node-hnapi

main.py

@@ -0,0 +1,78 @@
+from fasthtml.common import *
+from fastcore.net import urlparse
+import httpx
+
+app, rt = fast_app(pico=False, hdrs=(Link(href='style.css', rel='stylesheet'),))
+
+async def fetch_get(url):
+    async with httpx.AsyncClient() as client:
+        response = await client.get(url)
+        response.raise_for_status()
+        return response.json()
+
+def NavTop(back=False):
+    return Div(
+        Div(
+            Div(
+                Img(src="https://news.ycombinator.com/y18.svg", cls="logo"),
+                A(B('Hacker News'), href='./'),
+                A(NotStr('&nbsp;&nbsp;<< back'), href="./") if back else None,
+                cls='header-content'
+            ),
+            A('code', href="https://github.com/pratapvardhan/hackernews-fasthtml"),
+            cls='header-content space-between'),
+        cls='header')
+
+def HomeRow(data, n='', pl=True):
+    domain = urlparse(data['url']).netloc
+    link = f'./item?id={data["id"]}'
+    return Div(
+        Div(
+            Span(f'{n}.' if n else None),
+            A(data['title'], href=data['url'], cls='st-t'),
+            Span(f'({domain})', cls='st-d') if domain else None,
+            cls='st'),
+        Div(
+            f'{data["points"]} points by', A(data['user']),
+            A(data['time_ago'], href=link), ' | ', A(f'{data["comments_count"]} comments', href=link),
+            cls=f"st-sub {'pl-15p' if pl else ''}"),
+        cls='st'
+    )
+
+def Comment(data):
+    return Div(
+        Div(f"• {data.get('user', '[deleted]')} {data['time_ago']}", cls='st-sub'),
+        Div(NotStr(data['content']), cls='st-c'),
+        *map(Comment, data['comments']),
+        cls='st-cb',
+        style=f"margin-left: {'20px' if data['level'] else 0};",
+    )
+
+def ScrollMore(page):
+    return Div('Scroll for more..', hx_get=f"/?page={page}", hx_trigger="intersect once", hx_swap="outerHTML", hx_target="this", cls='st-c')
+
+async def Feed(page=1, top=True):
+    sno = (page - 1) * 30 + 1
+    data = await fetch_get(f"https://node-hnapi.herokuapp.com/news?page={page}")
+    return *[HomeRow(d, n) for n, d in enumerate(data, sno)], ScrollMore(page+1)
+
+@rt("/")
+async def get(page: int = 1):
+    content = await Feed(page, top=(page == 1))
+    return Div(NavTop(), Div(*content, cls='content'), cls='container') if page == 1 else content
+
+@rt("/item") 
+async def get(id:int):
+    data = await fetch_get(f"https://node-hnapi.herokuapp.com/item/{id}")
+    return Div(
+        NavTop(back=True),
+        Div(
+            HomeRow(data, n='', pl=False),
+            Div(NotStr(data.get('content', '')), cls='st-g'), Br(),
+            *map(Comment, data['comments']),
+            style='padding:0 15px;'
+        ),
+        cls='container'
+    )
+
+serve()

requirements.txt

@@ -0,0 +1,3 @@
+python-fasthtml
+uvicorn>=0.29
+httpx

style.css

@@ -0,0 +1,30 @@
+body {
+    font-family: Verdana, Geneva, sans-serif;
+    font-size: 10pt;
+    margin: 0;
+    padding: 0;
+}
+.container {
+    max-width: 796px;
+    padding: 10px;
+    margin: auto;
+    color: #000000;
+    background-color: #f6f6ef;
+}
+a { text-decoration: none; }
+.space-between { justify-content: space-between; }
+.header { background-color: #ff6600; padding: 2px; color: #000000; }
+.header-content { display: flex; align-items: center; }
+.logo { border: 1px solid white; margin-right: 5px; }
+.content { padding: 0 8px; }
+p { margin-top: 8px; margin-bottom: 4px; }
+.st { margin: 8px 0 2px 0; }
+.st-t, .header a { color: #000000; }
+.st-d { font-size: 8pt; }
+.st-c { font-size: 9pt; }
+.st-cb { border-top: 1px solid gray; margin-top: 8px; padding-top: 8px; }
+.st-sub { font-size: 7pt; }
+.pl-15p { padding-left: 15px; }
+.st-d, .st-sub, .st-d a, .st-sub a, .st-g { color: #828282; }
+.st-sub a:hover { text-decoration: underline; }
+.st-c a:link { color: #000000; text-decoration: underline; }