After finishing the post yesterday, I had a thought (I know, I shouldn’t get ahead of myself). I haven’t written as much as I like, so I thought I’d get more active. Between yesterday and today, I made a block for the Gutenberg Editor. It took me that long, but it really shouldn’t have. It is fairly simple, but there’s quite a few moving objects that make it more intricate than a regular React project (oh yeah, a block is written in react). But now, to show off what I’ve done AND talk about the project at the same time, check out something:
{"lang":"python","code":"class BaseIngredient(models.Model):\n class Meta:\n abstract = True\n\n id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)\n name = models.CharField(max_length=100)\n quantity = models.CharField(max_length=100)\n unit = models.CharField(max_length=50)\n\n def __str__(self):\n return f\"{self.quantity} {self.unit} of {self.name}({self.id})\"","theme":"materialDark"}
That’s from the project I’ll talk about in the next post, the GraphQL backend. You can click on it and select it. It isn’t a photo this time. How about some of the Showcase I was talking about?
{"lang":"tsx","code":"import React, __L_CURLY_BRACKET__ useContext __R_CURLY_BRACKET__ from \"react\";\n\nimport OptionsContext from \"@Options\";\nimport __L_CURLY_BRACKET__ ColorBoxesContextProvider __R_CURLY_BRACKET__ from \"@ColorBoxesContext\";\n\nimport ColorBoxesGrid from '.\/ColorBoxesGrid\/ColorBoxesGrid.component';\nimport ColorBoxesControls from '.\/ColorBoxesControls\/ColorBoxesControls.component';\n\nimport ShowcaseItem from \"@UI\/ShowcaseItem\/ShowcaseItem.component\";\nimport Description from \"@UI\/Description\/Description.component\";\n\nconst ColorBoxes: React.FC = () =__R_ANGLE_BRACKET__ __L_CURLY_BRACKET__\n const optionsCtx = useContext(OptionsContext);\n return (\n __L_ANGLE_BRACKET__ColorBoxesContextProvider__R_ANGLE_BRACKET__\n __L_ANGLE_BRACKET__ShowcaseItem\n controls=__L_CURLY_BRACKET____L_ANGLE_BRACKET__ColorBoxesControls \/__R_ANGLE_BRACKET____R_CURLY_BRACKET__\n description=__L_CURLY_BRACKET__\n __L_ANGLE_BRACKET__Description\n description=__L_CURLY_BRACKET__optionsCtx.shownItem.description__R_CURLY_BRACKET__\n meta=__L_CURLY_BRACKET__optionsCtx.shownItem.meta__R_CURLY_BRACKET__\n \/__R_ANGLE_BRACKET__\n __R_CURLY_BRACKET__\n __R_ANGLE_BRACKET__\n __L_ANGLE_BRACKET__ColorBoxesGrid \/__R_ANGLE_BRACKET__\n __L_ANGLE_BRACKET__\/ShowcaseItem__R_ANGLE_BRACKET__\n __L_ANGLE_BRACKET__\/ColorBoxesContextProvider__R_ANGLE_BRACKET__\n );\n__R_CURLY_BRACKET__;\n\nexport default ColorBoxes;","theme":"prism"}
You can change the theme too in case you don’t like dark/light themes. I always use dark because I find it easier on the eyes, but you find what you like. Tell me if you have any suggestions for themes. Because I’m using react-syntax-highlighter I can’t use just any theme but the ones they provide. Hooray for me! I’m proud of myself though I can see I still have to make some tweaks. Also note that the syntax highlighting isn’t really my doing. I just hooked up a bunch of wires, but doing that for the first time made me learn some things.
