Code Monkey home page Code Monkey logo

textualize.io's People

Contributors

alexpovel avatar amosborne avatar bmwant avatar darrenburns avatar didierrlopes avatar ewels avatar fabge avatar gamehunterkaan avatar guedesfelipe avatar guilatrova avatar hanxiao avatar joseandresmedina avatar kaushikb11 avatar koaning avatar kraanzu avatar olivierphi avatar rhuygen avatar ryancheley avatar sadeghhadjigi avatar techwiz-3 avatar wasi-master avatar waylonwalker avatar willmcgugan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

textualize.io's Issues

Gallery Project page

I think that projects in the gallery should also have a unique page of their own. Beneficial for SEO I suspect, and also that we can have a URL for one specific project.

I'm wondering if the frontmatter should have a "Descrption" field which should be one or two sentences, leaving the body of the md for the gallery item page.

Rich and Textual Gallery

We need a gallery page(s) which will keep a record of projects using Rich and Textual.

Each project will have a page with the following information:

  • Title
  • URL
  • Optional documentation URL
  • Category (to be determined)
  • Description

Each page will also have an optional image of the project. And display the number of stars if it is a GitHub repo (this doesn't need to update particularly quickly).

Additionally the gallery will generate an index page which displays the categories and the titles with links to the gallery page.

The intention is that we will allow the project authors to submit a PR with their new project.

There should be two top level categories (probably directories), one for Rich and one for Textual. And a gallery button on the projects front page.

Blog Page

We need a blog page on Textualize.io

Can be fairly rudimentary. Content with forward / back links, and some kind of index showing recent posts.

Expandable videos

I suspect some of the videos don't look good on a non-retina screen, i.e. what most people have these days.

We should probably have some mechanism to expand the video to full-screen (or near enough).

Not sure what that mechanism should be. A button, on hover? Open to suggestions...

Don't tilt video in Hero page in mobile

The perspective tilt leads the eye towards the text on the Hero page, but in smaller views the text is no longer to the right of the terminal. I suggest that if the text is not to the right, we don't bother about the tilt.

command01.py example on how to use Provider freezes

Hello,

The example app showcased on 'command01.py' freezes and displays nothing but an blank screen. Ctrl+/ Doesn't do anything.

This is how I call the script. One one terminal:

python3 -m venv ~/virtualenv/Textualize/
. ~/virtualenv/Textualize/bin/activate
pip install textual~=0.46.0
pip install textual-dev==1.3.0
textual diagnose

And on a different terminal, same machine:

. ~/virtualenv/Textualize/bin/activate
textual run --dev  $PWD/command01.py

The script

I made some modifications to print out where it was getting stuck, but it is mostly the same script as shown here:

#!/usr/bin/env python3
from __future__ import annotations

from functools import partial
from pathlib import Path
from typing import Any

from rich.style import Style
from rich.syntax import Syntax
from textual.app import App, ComposeResult
from textual.command import Hit, Hits, Provider
from textual.containers import VerticalScroll
from textual.screen import Screen
from textual.widgets import Static


class PythonFileCommands(Provider):
    """A command provider to open a Python file in the current working directory."""

    def __init__(self, screen: Screen[Any], match_style: Style | None = None):
        super().__init__(screen, match_style)
        self.python_paths = None
        self.app.log(f"Done with Provider init")

    def read_files(self) -> list[Path]:
        """Get a list of Python files in the current working directory."""
        files = list(Path("../").glob("*.py"))
        self.app.log.info(f"Got files: {files}")
        return files

    async def startup(self) -> None:
        """Called once when the command palette is opened, prior to searching."""
        worker = self.app.run_worker(self.read_files, thread=True)
        self.python_paths = await worker.wait()
        self.app.log.info(f"Done startup, paths = {self.python_paths}")

    async def search(self, query: str) -> Hits:
        """Search for Python files."""
        matcher = self.matcher(query)

        my_app = self.app
        assert isinstance(my_app, ViewerApp)

        for path in self.python_paths:
            command = f"open {str(path)}"
            score = matcher.match(command)
            if score > 0:
                yield Hit(
                    score,
                    matcher.highlight(command),
                    partial(my_app.open_file, path),
                    help="Open this file in the viewer",
                )


class ViewerApp(App):
    """Demonstrate a command source."""

    COMMANDS = App.COMMANDS | {PythonFileCommands}

    def compose(self) -> ComposeResult:
        with VerticalScroll():
            yield Static(id="code", expand=True)
        self.log.info("Done with compose")

    def open_file(self, path: Path) -> None:
        """Open and display a file with syntax highlighting."""

        syntax = Syntax.from_path(
            str(path),
            line_numbers=True,
            word_wrap=False,
            indent_guides=True,
            theme="github-dark",
        )
        self.query_one("#code", Static).update(syntax)
        self.log.info(f"Done reading file {path}")


if __name__ == "__main__":
    app = ViewerApp()
    app.run()

Environment

Here is my environment information

(Textualize) [josevnz@dmaf5 Textualize]$ textual diagnose

Textual Diagnostics

Versions

Name Value
Textual 0.46.0
Rich 13.6.0

Python

Name Value
Version 3.11.6
Implementation CPython
Compiler GCC 12.3.1 20230508 (Red Hat 12.3.1-1)
Executable /home/josevnz/virtualenv/Textualize/bin/python

Operating System

Name Value
System Linux
Release 6.5.12-100.fc37.x86_64
Version #1 SMP PREEMPT_DYNAMIC Mon Nov 20 22:28:44 UTC 2023

Terminal

Name Value
Terminal Application GNOME Terminal
TERM xterm-256color
COLORTERM truecolor
FORCE_COLOR Not set
NO_COLOR Not set

Rich Console options

Name Value
size width=262, height=42
legacy_windows False
min_width 1
max_width 262
is_terminal True
encoding utf-8
max_height 42
justify None
overflow None
no_wrap False
highlight None
markup None
height None

Apologies if I missed something obvious, happy to try any workarounds and help testing a fix.

[misc] Miscellaneous fine-tuning

  • Move our Google font to _document.tsx: c.f. https://nextjs.org/docs/basic-features/font-optimization
  • Cache the number of stars of each projects for the duration of the build, so we don't hit the GitHub API rate limit too early by requesting these stars again and again for the same project for each occurrence of it across the paginated gallery
  • Change the size of the top ellipsis on small screens, so the Twitter icon has a bit of margin on the left

Add Discourse Logo

We need a link to the newly created site: https://community.textualize.io

There should be an icon top right, next to the twitter and Github icons. And a "Community" link in the footer.

I've attached an images I sourced from wikipedia, and changes the fill color to white.

discorse

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.