
## Introduction

**This is not a tutorial.** This crash course is a quick way to get started
making a basic Django website **without** going in-depth about the underlying
concepts that are required to make complex web applications. For every step of
this crash course I will link a more thorough explanation of the tools and
concept you're using, so you can get a better understanding of Django while
creating your first project.

### Prerequisites

[Basic Python](https://www.learnpython.org/en/Hello%2C_World%21),
[HTML](https://www.w3schools.com/html/) , [CSS](https://www.w3schools.com/css/)
and
[Unix Command Line](https://www.learnenough.com/command-line-tutorial/basics).
As long as you're comfortable with all that, you're good.

### Our Goal

We're making a website where you can **upload an image with a title, date and
description**. Simple.

### So, what is Django?

**Django** _/JANG-oh/_ — A type of tool
([web framework](https://en.wikipedia.org/wiki/Web_framework)) most known for
helping people make neat websites quickly with few mistakes.

Making stuff in Django follows this pattern:

1. **Model** — _How you store stuff._ This is where we will tell Django how to
   store our images, titles, dates and descriptions.
2. **View** — _Where your project thinks._ This is how our website will get the
   stuff we stored based on our **models** and process it for the user.
3. **Template** — _How your project presents the stuff it was thinking about._
   The **view** will use this to display the contents it processed based on our
   **models**.

Django does more complex (and really fun) things, but if you're starting out
that's all you need to know _for now_ .
[\[in-depth\]](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Introduction#What_is_Django)

---

## Setting up our project

**Notice for Windows users:**<br/> By default, Windows doesn't have a Unix
command line, which is a prerequisite for this crash course. The October 2018
update for Windows 10 offers Linux subsystems, such as Ubuntu. Please install
and set up a Linux subsystem to utilize the Unix command line.

We're going to use your computer's terminal to set up our python environment and
Django. Let's make the project in our computer's `Documents` folder, so enter
these commands:

```bash
cd ~/Documents
python3 -m venv django_cc
```

`python3 -m venv django_cc` will create a virtual environment within a folder
called `django_cc` for our project, so all the stuff we install for it to work
won't interfere with anything else on your system.
[\[in-depth\]](https://virtualenv.pypa.io/en/stable/)

Next we'll get in our project folder, enable our new python environment and
install Django.

```bash
cd django_cc
source bin/activate
pip install django
```

`source bin/activate` will activate the virtual environment we created. This
means when we install Django, it won't be installed on the whole system, just in
our project. `pip install django` will use Python's package manager to install
the most recent version of Django.

Now that Django is installed, we get some new commands. Let's start by creating
a project within Django, migrating our development database and finally starting
our local development server for the first time to ensure we did everything
right.

```bash
django-admin startproject django_cc
cd django_cc
python3 manage.py migrate
python3 manage.py runserver
```

`django-admin start project django_cc` is telling Django to make the stem of our
project where everything else will be connected (i.e. Django apps). This is also
where we will find `manage.py` the file that we will use to interact with
Django. [\[in-depth\]](https://docs.djangoproject.com/en/2.2/ref/django-admin/)

`python3 manage.py migrate` is used to let Django know that changes have been
made to our models. Since we've just started our project this will be our
initial migration which establishes models Django makes on its own (i.e.
accounts, activity logs, permissions, etc.).
[\[in-depth\]](https://docs.djangoproject.com/en/2.2/topics/migrations/)

`python3 manage.py runserver` will start our development server where we will be
testing our project.

To see the development server in action, go to
[127.0.0.1:8000](http://127.0.0.1:8000/) in your browser. A Django start up page
should appear:

![Django Development Server Default Page](/blog/a-crash-course-in-django/django-cc-default.png)

### The Database

Next, grab your favorite text editor or python IDE because we're going to delve
into Django. We're going to start by creating a Django app where we will write
all of our models for this project.

```bash
python manage.py startapp blog
```

In order for our core project to recognize this app, we need to let it know our
`blog` app exists by adding it to `INSTALLED_APPS` in `django_cc/settings.py`
like so:

```python
# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # highlight-next-line
    'blog',
]
```

### Media file support

Let's add the following to the bottom of `settings.py` so Django knows where to
store media files such as the images that we upload:

```python
# Media file support

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
```

We'll need to do the same for our `templates` folder by updating `DIRS` to
handle `[os.path.join(BASE_DIR, 'templates')]` instead of the default `[]`:

```python
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # highlight-next-line
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
```

We will also need to add a few imports and a conditional at the bottom of
`django_cc/urls.py` so the files are accessible on the development server:

```python
from django.conf.urls import url
from django.contrib import admin

# Add these imports for static file support and to get
# directory details from Django's settings.py
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    url(r'^admin/', admin.site.urls),
]

# Add this to enable media file support on the development server
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```

[\[in-depth\]](https://docs.djangoproject.com/en/2.2/howto/static-files/)

Great, our project is now set up, and we can begin by writing our models.

---

## Writing our models

Inside our new `blog` app, we will find a `models.py` file where we will write
our models for our database. The class `Post` will act as our first model for
uploading a post with an image, title, description, and date published.

```python
from django.db import models
import datetime

class Post(models.Model):
    image = models.FileField(upload_to='images/')
    title = models.CharField(default="", max_length=64)
    description = models.CharField(default="", max_length=512)
    date = models.DateField(default=datetime.date.today)
```

`models.FileField(upload_to='images/')` acts as a field where we will upload
images to an image folder in the media directory we configured in settings.

`models.CharField(default="", max_length=n)` is a basic text field where the max
character length is **n**.

`models.DateField(default=datetime.date.today)` is self-explanatory, it's a
date/time field that is set to the current date and time.

[\[in-depth\]](https://docs.djangoproject.com/en/2.2/topics/db/examples/many_to_many/)

To finish off our models, let's tell Django to order them based newest to
oldest:

```python
class Post(models.Model):
    image = models.FileField(upload_to='images/')
    title = models.CharField(default="", max_length=64)
    description = models.CharField(default="", max_length=512)
    date = models.DateField(default=datetime.date.today)
    class Meta:
        ordering = ['-date']
    def __str__(self):
        return self.title
```

The `Meta` class can do a lot, in our case we will use it to order our models
based on time. The `__str__` function is telling Django to display the title
(instead of saying Post 1, Post 2, etc.) for when we interact with our entries
later in the Django admin panel.
[\[in-depth\]](https://docs.djangoproject.com/en/2.2/ref/models/options/#ordering)

### Migrating our new models

Finish off our models with the following two commands that essentially tell
Django that we've made some changes and that they should be applied to our
database:

```bash
python3 manage.py makemigrations
python3 manage.py migrate
```

Congratulations! Our database is all set up for our posts. There is one issue,
though. We can't edit them right now. Let's get you set up with the Django admin
panel, so you make some posts.

### Admin control panel

Inside our `blog` app, go to `admin.py` and add the following:

```python
from django.contrib import admin
from blog.models import Post

admin.site.register(Post)
```

`from blog.models import Post` imports all the models that we've just created.
`admin.site.register(<model_name>)` tells Django to display that model within
the control panel.

Next, we will create a superuser, so we can log into the admin panel. Type the
following command and follow the prompts. You only need to fill out the username
and passwords prompts.

```bash{outputLines: 2-6}
python3 manage.py createsuperuser
Username (leave blank to use 'ari'):
Email address:
Password:
Password (again):
Superuser created successfully.
```

Once completed, head over to [127.0.0.1:8000/admin](http://127.0.0.1:8000/admin)
and sign in with the credentials you just wrote. You should see this page:

![Django Development Server Admin Panel](/blog/a-crash-course-in-django/django-cc-admin.png)

From here you can add posts to your Django project. We are officially done with
our models. Next will design our view so Django can serve our posts.

---

## View logic

A view is how Django knows what to do when we ask for a page. The first thing we
have to do is create a `views.py` file in `django_cc`. In that file, paste the
following:

```python
from django.shortcuts import render
from django.views.generic.base import View
from django.views.generic import TemplateView
from blog.models import Post

class PostFeed(TemplateView):
    template_name = 'index.html'

    def get_context_data(self, *args, **kwargs):
        context = dict()
        context["posts"] = Post.objects.all()
        return context
```

`from django.views.generic import TemplateView` allows us to use Django's basic
template view which is all that we need for displaying our posts.
`from blog.models import Post` imports all of our database models for our view
functions to use.

`PostFeed` is our basic template view that will use an `index.html` file we will
create next to render our database contents.

`get_context_data` is how we will send our template the information from the
database. `context["posts"] = Post.objects.all()` Our template will refer to
`posts` within our `context` dictionary for a list of all posts that is
collected from the database using `Post.objects.all()`

[\[in-depth\]](https://docs.djangoproject.com/en/2.2/ref/class-based-views/base/)

In `urls.py` we will need to add a new path so Django knows when that URL is
requested to call our view:

```python
from django.conf.urls import url
from django.contrib import admin
from django.conf.urls.static import static
from django.conf import settings

# import path for easy urls
from django.urls import path

# import our views so urls.py can call them
from django_cc.views import PostFeed

urlpatterns = [

    # Path for root of our website that will display the post feed
     # highlight-next-line
    path('', PostFeed.as_view(template_name="index.html"), name="PostFeed"),
    url(r'^admin/', admin.site.urls),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```

Our basic view logic is now complete, now we need to build our index template
for displaying our posts.

---

## Templates with Style

In the root of our Django project where you can find our `blog` and `django_cc`
folders, create a `templates` folder and make an `index.html` file inside. For
the design of our site, we're going to use the framework
[Bulma](https://bulma.io/documentation/) so we won't need to write any CSS. Here
is a boilerplate we can use for our template.

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Posts | Django Crash Course</title>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css"
            integrity="sha256-8B1OaG0zT7uYA572S2xOxWACq9NXYPQ+U5kHPV1bJN4="
            crossorigin="anonymous"
        />
    </head>
    <body></body>
</html>
```

Django templates utilize a DRY version of HTML called Django HTML. This is how
we will send our context to render in our `index.html` template. In the body of
the boilerplate, let's add a basic card with the context for our posts.

```html
<div class="container">
    {% for post in posts %}
    <div class="card">
        <div class="card-image">
            <figure class="image">
                <img
                    src="{{ post.image.url }}"
                    alt="Placeholder image"
                    style="max-width: 250px; max-height: 250px;"
                />
            </figure>
        </div>
        <div class="card-content">
            <div class="content">
                <b>{{ post.title }}</b> | {{ post.description }}
                <br />
                <time datetime="{{ post.date }}">{{ post.date }}</time>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
```

`{% for post in posts %}` acts as a for loop that will duplicate its contents
for each post inside `posts`.

Every time the `for` loop runs, the context for the post in the current
iteration is placed in the HTML when it is referred to using `{{ <variable> }}`

`{{ post.image.url }}` is how you refer to the image's URL, you cannot just
reference the image itself.

When we visit [127.0.0.1:8000](http://127.0.0.1:8000) there should be a list of
all the posts we've added in the control panel:

![Django Crash Course Post Feed](/blog/a-crash-course-in-django/django-cc-feed-posts.png)

Now we have a website that displays what we add to our control panel in Bulma
cards. Neat.

[\[in-depth\]](https://docs.djangoproject.com/en/2.2/topics/templates/)

---

## Wrap Up

Django is a wonderful framework for building websites and other complex things.
Today, you've created a very basic website that is capable of displaying posts
akin to Instagram and in the future hopefully you can build Instagram yourself.
For now, I suggest learning more about Django either through
[their documentation](https://docs.djangoproject.com/en/2.2/) or
[this introduction (which got me started)](https://rnvarma.gitbooks.io/intro-to-django-real/content/).

**FYI** — Follow
[this tutorial by DigitalOcean](https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-18-04)
so, you can learn how to host your Django creations for the world to see.

_Edit: Renamed classes to adhere to PEP 8 and renamed database app to blog._

_Edit: Fixed `return context`, `settings.py` template directory issue and
references to blog models._ Thank you, Chris Merck for the feedback.


A quick way to get started using Django without going too in-depth.

A Crash Course in Django

Go to [borderlands.com](https://borderlands.com/en-US/),
[marvel.com](https://www.marvel.com/) and
[whereismaurice.com](https://whereismaurice.com/). All three sites contain
elements with beveled (specifically, chamfered) corners. Each site has taken an
entirely different approach when making them. Here are those approaches, their
strengths and their shortcomings:

## Sprite Maps

On desktop, [borderlands.com](https://borderlands.com/en-US/) looks pretty
clean. You wouldn't notice it, but they're leveraging a sprite map for a lot of
their UI. Specifically, this sprite map:

![Borderlands.com Sprite Map](/blog/beveled-corners-with-sass/borderlands-sprite-map.png)

Using a sprite map for beveled corners can be useful because it will work with
much older browsers, since a `background-image` for the sprite map and `flexbox`
for connecting sprites is all you need:

```scss
.sprite {
    background-image: url('https://example.com/sprite.png');
    background-size: 475px 440px;

    width: 28px;
    height: 61px;
}

.button {
    display: flex;

    &__left {
        @extend .sprite;
        background-position: -286px -341px;
    }

    &__right {
        @extend .sprite;
        background-position: -257px -341px;
    }
}
```

For the button's body, you can use some Sass, since there isn't anything fancy
about it. But, if you're going to use sprites, you might as well make this a
sprite too for consistency. I mean, _that is_ what the
[borderlands.com](https://borderlands.com/en-US/) developers did after all:

```scss
.button__inner {
    background-image: url('https://example.com/sprite.png');
    background-size: 100% 100%;

    height: 61px;
    max-width: 12em;
    min-width: 165px;
    margin-left: -1px;
    margin-right: -1px;

    display: inline-block;
    flex: 1 1 auto;
    text-align: center;

    p {
        display: inherit;
        margin-top: 1.25rem;

        font-weight: bold;
        font-style: italic;
        text-transform: uppercase;
    }
}
```

Of course because the sides of the button are sprites, this approach is rigid.
Each element may need multiple sprites. They must be appropriately sized. These
elements can't stretch or shrink. And, if an element needs to be tweaked, you
can't do much with a style sheet.

It's also important to mention, this approach needs three `div` elements (one
for each sprite):

```html
<div class="button">
    <div class="button__left"></div>
    <div class="button__inner">
        <p>Sprite Button</p>
    </div>
    <div class="button__right"></div>
</div>
```

I would only recommend this approach if you're going to use it on elements with
fixed sizes. You'll also need to spin up Photoshop anytime you want to tweak a
button's color or dimensions, which isn't fun.

<iframe
    height="200"
    scrolling="no"
    title=""
    src="https://codepen.io/ceiphr/embed/qBmEwMp?defaultTab=result&theme-id=39629"
    frameborder="no"
    loading="lazy"
    allowtransparency="true"
    allowfullscreen="true"
/>

**Note**: I didn't make the sprites used for that button. They were taken from
[borderlands.com](https://borderlands.com/en-US/) and are owned by Gearbox
Software LLC.

## Pseudo Elements

[marvel.com](https://www.marvel.com/) takes a slightly nicer approach.
`::before` and `::after` are used to create the top and bottom halves of
elements. The pseudo-elements of the button create the rectangular border. The
inner contents use another set of pseudo-elements for a
`repeating-linear-gradient` as their background image, which is a white line at
a 45-degree angel.

The main caveat with this approach is the _insane_ number of properties required
to get it working. It took me two hours and 70 lines of Sass to create a working
example in CodePen. Here is the main bit:

```scss
.button {
    background-color: transparent;
    display: inline-block;
    margin: 15px auto;
    position: relative;

    &:after,
    &:before {
        border-color: white;
        border-style: solid;
        content: '';

        display: block;
        height: 16px;
    }

    &:before {
        top: 0;
        right: 0;
        border-width: 1px 1px 0 0;
        margin-left: 16px;
    }

    &:after {
        bottom: 0;
        left: 0;
        border-width: 0 0 1px 1px;
        margin-right: 16px;
    }
}
```

That chunk of code does everything _except_ the beveled corners. Yes, 34 lines
of code for making half an outline for a button. Here are the other **40 LINES
OF CODE** for the beveled corners:

```scss
.button__inner {
    display: block;
    padding: 0 35px;

    text-align: center;
    text-transform: uppercase;
    line-height: 16px;

    background-color: transparent;
    border-left: 1px solid white;
    border-right: 1px solid white;
    color: white;

    &:after,
    &:before {
        border-style: solid;
        border-color: transparent;
        border-width: 0 0 16px 16px;
        content: '';
        position: absolute;

        background-size: 16px 24px;
        background-image: repeating-linear-gradient(
            -45deg,
            white,
            white 1px,
            transparent 0,
            transparent 16px
        );
    }

    &:before {
        top: 0;
        left: 0;
    }

    &:after {
        bottom: 0;
        right: 0;
        transform: rotate(180deg);
    }
}
```

Nearly 80 lines, just for a button. But in the end, you didn't have to use
sprites, and you get the ability to modify color and sizing using Sass, which is
great. As a bonus, you only need a `div` and a `span` for this to work:

```html
<div class="button">
    <span class="button__inner"> Button Out. </span>
</div>
```

No need to boot up Photoshop every time a button needs a color tweaked. Instead,
get a migraine whenever you need to debug all that pseudo-element goodness.

<iframe
    height="200"
    scrolling="no"
    title="Beveled Corners with Pseudo-elements"
    src="https://codepen.io/ceiphr/embed/b79c33ed3339000e33f8a3d50a1b3553?defaultTab=result&theme-id=39629"
    frameborder="no"
    loading="lazy"
    allowtransparency="true"
    allowfullscreen="true"
/>

Useful to mention: Depending on the browser you're using, if you zoom in on that
button, you may notice one or two minor disconnects. I thought this was a
problem with my implementation, but, from my testing, this jankiness is also on
the buttons at [marvel.com](https://www.marvel.com/).

## Clip Paths

[whereismaurice.com](https://whereismaurice.com/) (ahem, a project of mine),
takes the most flexible approach. Let me introduce the `clip-path`. It works
just like Photoshop's clipping mask. Currently, all browsers _except_ IE support
it with shapes and inline SVGs (Firefox includes support for external SVGs).

The other two examples I've given have two key problems which makes them
impractical for anything other than fixed UI elements. First, they are dependent
on the size of the content and second, they cannot handle content
overflow/scrolling. So, for anything other than buttons, they can be a disaster.

The fantastic
[Chris Coyier on CSS-Tricks](https://css-tricks.com/notched-boxes/) found that
if you apply a beveled polygon to a clip path, it can make any element look
great beveled. And from my testing, that includes overflowing and scrollable
elements.

Want beveled corners on opposite sides of an element? Use
`@include bevel--opp()` to apply this Sass mixin:

```scss
/* 
 * @param $size   Bevel size.
 * @param $alt    Use alternate corners.
 */
@mixin bevel--opp($size: 12px, $alt: false) {
    @if $alt {
        clip-path: polygon(
            0% $size,
            $size 0%,
            100% 0%,
            100% 100%,
            100% calc(100% - #{$size}),
            calc(100% - #{$size}) 100%,
            100% 100%,
            0% 100%
        );
    } @else {
        clip-path: polygon(
            0% 0%,
            0% 0%,
            calc(100% - #{$size}) 0%,
            100% $size,
            100% 100%,
            100% 100%,
            $size 100%,
            0 calc(100% - #{$size})
        );
    }
}
```

Well, that's great and all, but what if you want all corners to be beveled
corners? Here is a much simpler mixin for that:

```scss
/* 
 * @param $size   Bevel size.
 */
@mixin bevel--full($size: 12px) {
    clip-path: polygon(
        0% $size,
        $size 0%,
        calc(100% - #{$size}) 0%,
        100% $size,
        100% calc(100% - #{$size}),
        calc(100% - #{$size}) 100%,
        $size 100%,
        0 calc(100% - #{$size})
    );
}
```

The only caveat? None. My code is divine.

Just kidding. Outlines. Outlines are annoying to implement. Here is some example
Sass for beveled buttons, outline style included:

```scss
.button {
    color: white;
    background-color: turquoise;
    display: inline-block;
    padding: 1em;
    @include bevel--opp();

    &--alt {
        @extend .button;
        @include bevel--opp($alt: true);
    }

    &--outline {
        @extend .button;
        background-color: white;
        padding: 0;

        .button {
            background-color: black;
            margin: 1px;
            padding: calc(1em - 1px);
        }
    }
}
```

Not as bad as the pseudo-elements, but still not a Van Gogh. Regardless, the
HTML isn't too bad either:

```html

<div class="button">Button</div>


<div class="button--alt">Button</div>


<div class="button--outline">
    <div class="button">Button Out.</div>
</div>
```

Overall, I think this solution works best. It applies to flexible and fixed
elements. You don't need to worry about scrollable `div` elements or overflow.
And the code is simpler than the other solutions I've mention.

<iframe
    height="510"
    scrolling="no"
    title="Beveled Corners with clip-path"
    src="https://codepen.io/ceiphr/embed/bGWNzYw?defaultTab=result&theme-id=39629"
    frameborder="no"
    loading="lazy"
    allowtransparency="true"
    allowfullscreen="true"
/>

## Wrap Up

Those were three ways to implement beveled corners with Sass. Of course, I'm
going to recommend using `clip-path` since that's the approach I've taken with
my projects. But, at the end of the day, if any of these approaches work for
you, that's great!

If you've found another, _scarier_, way to implement beveled corners, please let
me know. I love to see nightmarish spaghetti code for something as mundane as a
border style.

P.S. In case you're from the future and one of the example websites has been
updated to no longer use beveled corners, here are Wayback Machine links for
[borderlands.com](https://web.archive.org/web/20210701075945/https://borderlands.com/en-US/)
,
[marvel.com](https://web.archive.org/web/20210702001617/https://www.marvel.com/)
and
[whereismaurice.com](https://web.archive.org/web/20210522172927/https://whereismaurice.com/).
I hope you are doing well future person.

Three ways to create beveled corners with Sass and mixins.

Beveled Corners with Sass


The title and description are pulled from the MDX file and processed using
`gray-matter`. Additionally, links are rendered using a custom component passed
to `next-mdx-remote`.

## KaTeX

KaTeX is a cross-browser JavaScript library that displays mathematical notation
in web browsers. It puts special emphasis on being fast and easy to use. Here's
an inline equation: $\sqrt{a^2 + b^2}$ . And here's a block equation:

$$
f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi
$$

KaTeX was initially developed by Khan Academy, and became one of the top five
trending projects on GitHub in September 2014.

## Assets

This is a local image.

![Framework Laptop](/blog/example-post/framework.jpg)

## Formatting

### Tailwind

This is a Tailwind CSS component using grids.

<Container>
    <div className="grid grid-cols-2 gap-6 py-6">
        <div className="shadow-sm border border-neutral-800 p-2 rounded-lg">
            shadow-sm
        </div>
        <div className="shadow border border-neutral-800 p-2 rounded-lg">
            shadow
        </div>
        <div className="shadow-md border border-neutral-800 p-2 rounded-lg">
            shadow-md
        </div>
        <div className="shadow-lg border border-neutral-800 p-2 rounded-lg">
            shadow-lg
        </div>
        <div className="shadow-xl border border-neutral-800 p-2 rounded-lg">
            shadow-xl
        </div>
        <div className="shadow-2xl border border-neutral-800 p-2 rounded-lg">
            shadow-2xl
        </div>
    </div>
</Container>

### Code Snippet

Build first-class code walkthroughs for the web. Whether you are writing blog
posts, documentation, tutorials, coding videos, or any type of technical
content, Code Hike helps you create a [superior code](#mark-annotation) reading
experience.

```tsx path="pages/index.tsx"
import React from 'react';

const Example = () => {
    // link #mark-annotation
    return <div></div>;
};

export default Example;
```

You can also do _`var x = 10`_. So, syntax highlighting works inline too.

## Spline

Spline is a free, real-time collaborative 3D design tool to create interactive
experiences within the browser. Easy 3d design animations, models, textures, and
more. Introducing Community platform. Explore, inspire and publish your next
design all-in-one place. Explore Community.

<Spline className="h-[32rem]" scene="/blog/example-post/round-ari.splinecode" />

## Rive

Use our familiar design and animation tools with our ground-breaking State
Machine to create interactive motion graphics for your products, apps, sites,
...

<Rive className="h-[405px]" src="/blog/example-post/vehicles.riv" />


This frontmatter description will appear below the title

Very Cool


{/* TODO: Update template */}

This is an example post, with a [link](https://nextjs.org) and a React
component:

<Spline scene="https://prod.spline.design/3iURy3G1ocdsRId3/scene.splinecode" />

The title and description are pulled from the MDX file and processed using
`gray-matter`. Additionally, links are rendered using a custom component passed
to `next-mdx-remote`.

Go back [home](/).


Blog